Format TypeScript expressions in Vue template attributes #14506

seiyab · 2023-03-14T13:19:10Z

Description

Fix #14432

Checklist

I’ve added tests to confirm my change works.
~~(If changing the API or CLI) I’ve documented the changes I’ve made (in the docs/ directory).~~
(If the change is user-facing) I’ve added my changes to changelog_unreleased/*/XXXX.md file following changelog_unreleased/TEMPLATE.md.
I’ve read the contributing guidelines.

✨Try the playground for this PR✨

tests/format/vue/ts-expression/filter.vue

seiyab · 2023-03-21T00:28:24Z

it's ready for review 🚀

tests/format/vue/ts-expression/__snapshots__/jsfmt.spec.js.snap

fisker · 2023-03-21T05:08:20Z

It seems we still missing some places,

https://github.com/seiyab/prettier/blob/5870d8dd7fa159c175b805fff422f7d68cfd57ed/src/language-html/embed.js#L130-L134

This place seems using wrong parser?

https://github.com/seiyab/prettier/blob/5870d8dd7fa159c175b805fff422f7d68cfd57ed/src/language-html/syntax-vue.js#L81

Maybe we need babel-ts?

fisker · 2023-03-21T05:10:14Z

https://github.com/seiyab/prettier/blob/5870d8dd7fa159c175b805fff422f7d68cfd57ed/src/language-html/embed.js#L56

seiyab · 2023-03-21T07:23:24Z

For the former in #14506 (comment), I agree with you. I'll fix it.
https://sfc.vuejs.org/#eNpFkN1OwzAMhV/Fys02iTVD3JWugveIhLrijo7GiRK3XJS8O04zIFe2c87nn1W9el8tM6paNbEPo2eIyLOHqaPr2SiORrWGRutdYFgh4AAJhuAs7MS2M2RoQobezcQY4JwV+9Ph2VCjC1DskjBaP3WMkgE0l5nZEbz009h/ShuA/VsNhAuGA5xbWP95jyf4hqcEsA0C8op54+gSF+j7uNwVTfQdtesvJSWZJVeKp+ga/TeSelBlwaPtfHWLjuQcaxab+4dcoYatkmuyeM6N+mD2sdY6Dn0+4i1WLly1RFWQxqPFCqM9XoL7ihgEbFRGJENJpR+bfH+m

About the latter in #14506 (comment) , I need more investigation.

I'll see #14506 (comment) too.

fisker · 2023-03-21T08:44:30Z

Can you change base to next branch? In next branch, we don't parse flow syntax in babel parser, should be easier to test.

seiyab · 2023-03-22T13:16:09Z

I'm still investigating https://github.com/seiyab/prettier/blob/5870d8dd7fa159c175b805fff422f7d68cfd57ed/src/language-html/syntax-vue.js#L81 .

fisker · 2023-03-22T13:19:13Z

tests/format/vue/ts-expression/hug-string-literal.vue

+<template>
+<MyComponent :src="100000000000000000000000000000000000000000000000000000000000000000000000000"/>
+</template>
+<script lang="ts"></script>


you can put all attributes in one component, and please add final_new_line.

Ah, I see it's copied from tests/format/vue/vue/expression-binding.vue, can you put them together instead of move it to another dir. maybe tests/format/vue/vue/expression-binding-ts.vue?

…sts/format/vue/vue/expression-binding-ts.vue

fisker · 2023-03-22T13:44:22Z

~~Looks like v-for don't allow typescript syntax?~~ Ah it does

fisker · 2023-03-22T13:51:29Z

Prettier pr-14506
Playground link

--parser vue

Input:

<script lang="ts"></script>

<template>
  <ul>
    <li v-for="a:number 
               of x as number">{{a}}</li>
  </ul>
</template>

Output:

<script lang="ts"></script>

<template>
  <ul>
    <li
      v-for="a:number 
               of x as number"
    >
      {{ a }}
    </li>
  </ul>
</template>

seiyab · 2023-03-22T13:58:47Z

Thanks, I'll also fix v-for.
v-for seems here
https://github.com/seiyab/prettier/blob/6959f30a81d277c7bc6c45b68991dac01dc14c65/src/language-html/syntax-vue.js#L14

I think I need to fix following as you said before. I think it relates to v-slot.
https://github.com/seiyab/prettier/blob/5870d8dd7fa159c175b805fff422f7d68cfd57ed/src/language-html/syntax-vue.js#L81

However, v-slot with TS seems to work mysteriously. Maybe I'm misunderstanding... 🤔
Playground (stable)

Edit:
The reason why v-slot with type works on stable is maybe babel parser used flow plugin.
That's why you suggested to change base branch 👍

fisker · 2023-03-23T13:21:55Z

src/language-html/embed.js

-      return printVueFor(getValue(), attributeTextToDoc);
+      return printVueFor(getValue(), attributeTextToDoc, {
+        ts: options.__should_parse_vue_template_with_ts,
+      });


Let's pass options, we may need access other props in future.

fisker · 2023-03-23T16:38:48Z

tests/format/vue/v-for/ts.vue

+v-for="([longLongProp, longLongProp, [longLongProp, longLongProp='Hello, Prettier!', [longLongProp, longLongProp, anotherLongLongProp=[longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp], yetAnotherLongLongProp], yetAnotherLongLongProp], yetAnotherLongLongProp], index) of longLongLongLongLongLongLongLongList"
+>
+</div>
+</template>


nit: add a new line at last.

Thanks, I found that I had disabled editorconfig plugin mistakenly 😅

fisker · 2023-03-23T16:40:54Z

Looks great! Thank you for your hard work. I'll take another look tomorrow.

# Conflicts: # src/language-js/parse/parsers.js

fisker · 2023-03-24T01:11:44Z

Nice work! Thanks.

You may interest #14575

seiyab · 2023-03-24T04:11:17Z

Thank so much for your friendly supports.
I'll take a look after #14476 .

) Co-authored-by: fisker <lionkay@gmail.com>

seiyab commented Mar 14, 2023

View reviewed changes

tests/format/vue/ts-expression/filter.vue Outdated Show resolved Hide resolved

seiyab mentioned this pull request Mar 14, 2023

[Bug] Typescript code in Vue template is not formatted #14432

Closed

seiyab marked this pull request as ready for review March 20, 2023 14:04

seiyab requested a review from fisker March 20, 2023 14:04

fisker reviewed Mar 21, 2023

View reviewed changes

tests/format/vue/ts-expression/__snapshots__/jsfmt.spec.js.snap Outdated Show resolved Hide resolved

seiyab changed the base branch from main to next March 21, 2023 22:04

seiyab force-pushed the 14432-vue-typescript-in-attributes branch 3 times, most recently from f14bf65 to 9bbb0d5 Compare March 21, 2023 23:28

seiyab and others added 11 commits March 22, 2023 12:43

add as-is test

00a5df0

fix vue expression typescript false negative

c5b2bcf

add tests

7b55e64

add changelog

594ce52

add test for non-ts-vue

db00227

use __vue_ts_expression for vue directive if lang is ts

30c91c9

use __ts_expression for vue directive

45281a6

add test for comment

d6c5ced

change misleading inputs

00c0d7a

Minor tweak

078f7be

update snapshot

b8a2fbb

seiyab force-pushed the 14432-vue-typescript-in-attributes branch from 9bbb0d5 to b8a2fbb Compare March 22, 2023 03:44

seiyab added 2 commits March 22, 2023 22:09

add as-is tests

9ee4ec0

format ts event binding and hug ts string literal

b3b4eac

fisker reviewed Mar 22, 2023

View reviewed changes

seiyab added 2 commits March 22, 2023 22:27

move file tests/format/vue/ts-expression/hug-string-literal.vue -> te…

c38a974

…sts/format/vue/vue/expression-binding-ts.vue

all attributes in one component

131ad06

This comment was marked as outdated.

Sign in to view

seiyab added 2 commits March 23, 2023 22:14

add as-is tests

cac4790

format v-slot, v-for as TS

e3f342c

fisker reviewed Mar 23, 2023

View reviewed changes

pass entire options to printVueFor and printVueBinidngs

572ef0a

fisker reviewed Mar 23, 2023

View reviewed changes

seiyab and others added 5 commits March 24, 2023 06:58

insert final newline

95a63a1

Fix snapshot

39020a4

Merge branch 'next' into 14432-vue-typescript-in-attributes

4ad700b

# Conflicts: # src/language-js/parse/parsers.js

Fix plugin

a39e643

Typo

0503874

fisker approved these changes Mar 24, 2023

View reviewed changes

fisker merged commit e154250 into prettier:next Mar 24, 2023
26 checks passed

seiyab deleted the 14432-vue-typescript-in-attributes branch March 24, 2023 01:58

fisker mentioned this pull request Apr 14, 2023

It reported an error when I use a generic type assertion in template in a .vue file #14695

Open

so1ve mentioned this pull request Jul 9, 2023

Prettier doesn't format vue bindings when using type assertions #14918

Closed

medikoo pushed a commit to medikoo/prettier-elastic that referenced this pull request Feb 13, 2024

Format TypeScript expressions in Vue template attributes (prettier#14506

7afeafa

) Co-authored-by: fisker <lionkay@gmail.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Format TypeScript expressions in Vue template attributes #14506

Format TypeScript expressions in Vue template attributes #14506

seiyab commented Mar 14, 2023 •

edited

seiyab commented Mar 21, 2023

fisker commented Mar 21, 2023

fisker commented Mar 21, 2023

seiyab commented Mar 21, 2023

fisker commented Mar 21, 2023

seiyab commented Mar 22, 2023

fisker Mar 22, 2023

fisker Mar 22, 2023

fisker commented Mar 22, 2023 •

edited

fisker commented Mar 22, 2023

seiyab commented Mar 22, 2023 •

edited

This comment was marked as outdated.

This comment was marked as outdated.

fisker Mar 23, 2023

fisker Mar 23, 2023

seiyab Mar 23, 2023

fisker commented Mar 23, 2023

fisker commented Mar 24, 2023

seiyab commented Mar 24, 2023

Format TypeScript expressions in Vue template attributes #14506

Format TypeScript expressions in Vue template attributes #14506

Conversation

seiyab commented Mar 14, 2023 • edited

Description

Checklist

seiyab commented Mar 21, 2023

fisker commented Mar 21, 2023

fisker commented Mar 21, 2023

seiyab commented Mar 21, 2023

fisker commented Mar 21, 2023

seiyab commented Mar 22, 2023

fisker Mar 22, 2023

Choose a reason for hiding this comment

fisker Mar 22, 2023

Choose a reason for hiding this comment

fisker commented Mar 22, 2023 • edited

fisker commented Mar 22, 2023

seiyab commented Mar 22, 2023 • edited

This comment was marked as outdated.

This comment was marked as outdated.

fisker Mar 23, 2023

Choose a reason for hiding this comment

fisker Mar 23, 2023

Choose a reason for hiding this comment

seiyab Mar 23, 2023

Choose a reason for hiding this comment

fisker commented Mar 23, 2023

fisker commented Mar 24, 2023

seiyab commented Mar 24, 2023

seiyab commented Mar 14, 2023 •

edited

fisker commented Mar 22, 2023 •

edited

seiyab commented Mar 22, 2023 •

edited