fix(compiler-vapor): encode quotes back

Author: mary-ext

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap

@@ -399,7 +399,37 @@ export function render(_ctx) {
 
 exports[`compiler: element transform > static props 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<div id=foo class=bar title=\\"has whitespace\\"data-targets=\\"foo>bar\\"></div>", true)
+const t0 = _template("<div id=foo class=bar></div>", true)
+
+export function render(_ctx) {
+  const n0 = t0()
+  return n0
+}"
+`;
+
+exports[`compiler: element transform > static props mixed quoting 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("<div title=\\"has whitespace\\"inert data-targets=\\"foo>bar\\"></div>", true)
+
+export function render(_ctx) {
+  const n0 = t0()
+  return n0
+}"
+`;
+
+exports[`compiler: element transform > static props quoted 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("<div title=\\"has whitespace\\"alt=\\"&#34;contains quotes&#34;\\"data-targets=\\"foo>bar\\"></div>", true)
+
+export function render(_ctx) {
+  const n0 = t0()
+  return n0
+}"
+`;
+
+exports[`compiler: element transform > static props unquoted 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("<div id=foo class=bar title=foo\\"=bar></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()

packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts

@@ -573,11 +573,48 @@ describe('compiler: element transform', () => {
 
   test('static props', () => {
     const { code, ir } = compileWithElementTransform(
-      `<div id="foo" class="bar" title="has whitespace" inert data-targets="foo>bar" />`,
+      `<div id="foo" class="bar" />`,
+    )
+
+    const template = '<div id=foo class=bar></div>'
+    expect(code).toMatchSnapshot()
+    expect(code).contains(JSON.stringify(template))
+    expect(ir.template).toMatchObject([template])
+    expect(ir.block.effect).lengthOf(0)
+  })
+
+  test('static props unquoted', () => {
+    const { code, ir } = compileWithElementTransform(
+      `<div id="foo" class="bar" title='foo"=bar' />`,
+    )
+
+    const template = '<div id=foo class=bar title=foo"=bar></div>'
+    expect(code).toMatchSnapshot()
+    expect(code).contains(JSON.stringify(template))
+    expect(ir.template).toMatchObject([template])
+    expect(ir.block.effect).lengthOf(0)
+  })
+
+  test('static props quoted', () => {
+    const { code, ir } = compileWithElementTransform(
+      `<div title="has whitespace" alt='"contains quotes"' data-targets="foo>bar" />`,
+    )
+
+    const template =
+      '<div title="has whitespace"alt="&#34;contains quotes&#34;"data-targets="foo>bar"></div>'
+    expect(code).toMatchSnapshot()
+    expect(code).contains(JSON.stringify(template))
+    expect(ir.template).toMatchObject([template])
+    expect(ir.block.effect).lengthOf(0)
+  })
+
+  test('static props mixed quoting', () => {
+    const { code, ir } = compileWithElementTransform(
+      `<div title="has whitespace" inert data-targets="foo>bar" />`,
     )
 
     const template =
-      '<div id=foo class=bar title="has whitespace"inert data-targets="foo>bar"></div>'
+      '<div title="has whitespace"inert data-targets="foo>bar"></div>'
     expect(code).toMatchSnapshot()
     expect(code).contains(JSON.stringify(template))
     expect(ir.template).toMatchObject([template])

packages/compiler-vapor/src/transforms/transformElement.ts

@@ -236,7 +236,9 @@ function transformNativeElement(
           needsQuoting = /[\s>]|^["'=]/.test(value)
 
           if (needsQuoting) {
-            template += `="${value}"`
+            const encoded = value.replace(/"/g, '"')
+
+            template += `="${encoded}"`
           } else {
             template += `=${value}`
           }