Handle TS syntax in Vue/Angular class attributes (#18)

bradlc · web-flow · commit 0454a045a6db · 2022-01-25T13:18:22.000Z
diff --git a/src/index.js b/src/index.js
@@ -167,7 +167,7 @@ function transformHtml(attributes, computedAttributes = []) {
         }
 
         let ast = recast.parse(`let __prettier_temp__ = ${attr.value}`, {
-          parser: prettierParserBabel.parsers.babel,
+          parser: prettierParserBabel.parsers['babel-ts'],
         })
         let didChange = false
 
diff --git a/tests/test.js b/tests/test.js
@@ -101,6 +101,7 @@ let vue = [
   t`<div :class="clsx('${yes}')"></div>`,
   t`<div :class="\`${yes}\`"></div>`,
   t`<div :class="\`${yes} \${someVar}\`"></div>`,
+  t`<div :class="someVar! ? \`${yes}\` : \`${yes}\`"></div>`, // ts
   [
     `<div :class="\`sm:block inline flex\${someVar}\`"></div>`,
     `<div :class="\`inline sm:block flex\${someVar}\`"></div>`,

Original file line number	Diff line number	Diff line change
`@@ -167,7 +167,7 @@ function transformHtml(attributes, computedAttributes = []) {`
`167`	`167`	`}`
`168`	`168`
`169`	`169`	let ast = recast.parse(`let __prettier_temp__ = ${attr.value}`, {
`170`		`- parser: prettierParserBabel.parsers.babel,`
	`170`	`+ parser: prettierParserBabel.parsers['babel-ts'],`
`171`	`171`	`})`
`172`	`172`	`let didChange = false`
`173`	`173`
Original file line number	Diff line number	Diff line change
`@@ -101,6 +101,7 @@ let vue = [`
`101`	`101`	t`<div :class="clsx('${yes}')"></div>`,
`102`	`102`	t`<div :class="\`${yes}\`"></div>`,
`103`	`103`	t`<div :class="\`${yes} \${someVar}\`"></div>`,
	`104`	+ t`<div :class="someVar! ? \`${yes}\` : \`${yes}\`"></div>`, // ts
`104`	`105`	`[`
`105`	`106`	`<div :class="\`sm:block inline flex\${someVar}\`"></div>`,
`106`	`107`	`<div :class="\`inline sm:block flex\${someVar}\`"></div>`,