fix: skip quote replacement in interpolation (#28)

Co-authored-by: Teages <[email protected]>

Author: danielroe

src/utils/template.ts

@@ -164,6 +164,10 @@ export async function transpileVueTemplate(
   for (const item of expressions) {
     item.replacement = transformMap.get(item) ?? item.src
 
+    if (!shouldReplaceQuote(item)) {
+      continue
+    }
+
     // the source should only have one of the quotes
     const sourceQuote = getSourceQuote(
       content,
@@ -212,6 +216,20 @@ export function replaceQuote(code: string, target: string, replace: string): str
   return res
 }
 
+function shouldReplaceQuote(expression: Expression): boolean {
+  if (!expression.src.includes(`'`) && !expression.src.includes(`"`)) {
+    return false
+  }
+
+  // skip the expression in the interpolation, it doesn't care about the quote
+  const secondLastTrack = expression.track.at(-2)
+  if (secondLastTrack?.type === NodeTypes.INTERPOLATION) {
+    return false
+  }
+
+  return true
+}
+
 function getSourceQuote(code: string, start: number, end: number): string | null {
   const source = code.slice(start, end)
   const quotes = ['"', '\'']

test/template.test.ts

@@ -184,6 +184,32 @@ describe('transform typescript template', () => {
     expect(output).toBe(`'test'`)
   })
 
+  it('handles quotes in interpolations', async () => {
+    expect(
+      await fixture(`
+        <template>
+          <div>
+            <div :class="$test('foobar', \`Foobar 'test'\`)" />
+            <div>{{ $test('foobar', "Foobar 'test'") }}</div>
+            <div>{{ $test('foobar', 'Foobar test') }}</div>
+            <div>{{ $test('foobar', \`Foobar ' " ''" test\`) }}</div>
+          </div>
+        </template>
+        `),
+    ).toMatchInlineSnapshot(`
+      "
+              <template>
+                <div>
+                  <div :class="$test('foobar', \`Foobar \\'test\\'\`)" />
+                  <div>{{ $test("foobar", "Foobar 'test'") }}</div>
+                  <div>{{ $test("foobar", "Foobar test") }}</div>
+                  <div>{{ $test("foobar", \`Foobar ' " ''" test\`) }}</div>
+                </div>
+              </template>
+              "
+    `)
+  })
+
   async function fixture(src: string) {
     const requireFromVue = createRequire(resolveModulePath('vue'))
     const { parse } = requireFromVue('@vue/compiler-dom') as typeof import('@vue/compiler-dom')