Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: Cannot format expressions in Vue using TS types #365

Open
jjlorenzo opened this issue Apr 1, 2022 · 6 comments · May be fixed by #375
Open

Bug: Cannot format expressions in Vue using TS types #365

jjlorenzo opened this issue Apr 1, 2022 · 6 comments · May be fixed by #375
Assignees
@Shinigami92
Labels
framework: Vue Related to the framework Vue type: bug Functionality that does not work as intended/expected

Comments

@jjlorenzo
Copy link

Info

Tool Version
Plugin v1.20.0
Prettier v2.6.1
Framework vue
Node v17.7.1
OS mac

Prettier config

// @ts-check
/// <reference types="@prettier/plugin-pug/src/prettier" />

/**
 * @type {import("prettier").Options}
 */
module.exports = {
  plugins: [require.resolve("@prettier/plugin-pug")],
  printWidth: 120,
  pugClassNotation: "attribute",
  pugFramework: "vue",
  pugSortAttributes: "asc",
  pugSortAttributesEnd: ["^:", "^@"],
  quoteProps: "consistent",
  semi: false,
  trailingComma: "all",
}

Input

<template lang="pug">
n-modal(
  preset="card",
  transform-origin="center",
  v-model:show="show",
  :closable="false",
  :close-on-esc="false",
  :footer-style="{ textAlign: 'center' }",
  :header-style="{ textAlign: 'center' }",
  :mask-closable="false",
  :style="{ backgroundColor: theme.inputColorDisabled, width: '600px' }"
)
  template(#header) Enter the PIN code
  template(#default)
    n-space(justify="space-around", :wrap="false")
      n-input(
        readonly,
        size="large",
        v-for="(value, index) in pinChrs",
        v-model:value="pinChrs[index]",
        :key="index",
        :maxlength="1",
        :show-button="false",
        :style="{ textAlign: 'center', width: '60px' }",
        :theme-overrides="{ fontSizeLarge: '40px', heightLarge: '80px' }"
        :ref="(el:any) => pinRefs[index] = el",
      )
  template(#footer) You should have received by a phone call or by SMS
</template>

Output or Error

The `:ref="(el:any) => pinRefs[index] = el",` doesn't get ordered, in general no ordering occurs either in the parent component

Expected Output

In this case, is expected that `:ref="(el:any) => pinRefs[index] = el",` gets reordered to before `:maxlength="1",`

Additional Context
@Shinigami92
Copy link
Member

Could you try remove :any in this case and confirm that it works without it? If this is the case, I have an assumption where the problem is

@jjlorenzo
Copy link
Author

Sorry for forgetting to test this before.
Your'e right, without the type information, it works as expected.

@Shinigami92 Shinigami92 changed the title Bug: Bug: Cannot format expressions in Vue using TS types Apr 1, 2022
@Shinigami92 Shinigami92 added type: bug Functionality that does not work as intended/expected framework: Vue Related to the framework Vue labels Apr 1, 2022
@Shinigami92
Copy link
Member

plugin-pug/src/printer.ts

Lines 679 to 681 in 0d70a7f

private formatVueExpression(val: string): string {
return this.formatDelegatePrettier(val, '__vue_expression');
}

plugin-pug/src/printer.ts

Line 654 in 0d70a7f

val = format(val, { parser, ...options });

I think we need to forward this bug to upstream prettier 🤔

@fisker Does prettier already support Vue 3's types in template?

@fisker
Copy link
Member

fisker commented Apr 1, 2022

I don't use TS myself, but we may have a related issue prettier/prettier#12414

Hope I didn't misunderstand this issue, they are all TS in template, right?

@jjlorenzo
Copy link
Author

Hope I didn't misunderstand this issue, they are all TS in template, right?

Yes

@fisker
Copy link
Member

fisker commented Apr 1, 2022

We need to update the vue expression parser to allow typescript syntax, luckily we have babel-ts, so we don't need use typescript parser.

@fisker fisker mentioned this issue Apr 1, 2022
Closed
@fisker fisker mentioned this issue Apr 16, 2022
Merged
3 tasks
@Shinigami92 Shinigami92 linked a pull request Apr 16, 2022 that will close this issue
Draft
@Shinigami92 Shinigami92 self-assigned this Apr 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Shinigami92 Shinigami92

Labels
framework: Vue Related to the framework Vue type: bug Functionality that does not work as intended/expected
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Handle vue ts prettier/plugin-pug
3 participants
@jjlorenzo @fisker @Shinigami92