refactor(compiler-vapor): skip unnecessary attribute quoting in templates

Author: mary-ext

packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap

@@ -140,7 +140,7 @@ export function render(_ctx) {
 
 exports[`compile > directives > v-pre > basic 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>", true)
+const t0 = _template("<div :id=foo><Comp></Comp>{{ bar }}</div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -150,7 +150,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
 "import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, child as _child, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
+const t0 = _template("<div :id=foo><Comp></Comp>{{ bar }}</div>")
 const t1 = _template("<div> </div>")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {

packages/compiler-vapor/__tests__/compile.spec.ts

@@ -71,7 +71,7 @@ describe('compile', () => {
 
         expect(code).toMatchSnapshot()
         expect(code).contains(
-          JSON.stringify('<div :id="foo"><Comp></Comp>{{ bar }}</div>'),
+          JSON.stringify('<div :id=foo><Comp></Comp>{{ bar }}</div>'),
         )
         expect(code).not.contains('effect')
       })

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

@@ -354,7 +354,7 @@ export function render(_ctx) {
 
 exports[`compiler: element transform > props + children 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<div id=\\"foo\\"><span></span></div>", true)
+const t0 = _template("<div id=foo><span></span></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -399,7 +399,7 @@ 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\\"></div>", true)
+const t0 = _template("<div id=foo class=bar title=\\"has whitespace\\" data-targets=\\"foo>bar\\"></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()

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

@@ -633,7 +633,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > with constant value 1`] = `
 "import { setProp as _setProp, template as _template } from 'vue';
-const t0 = _template("<div f=\\"foo1\\" h=\\"1\\"></div>", true)
+const t0 = _template("<div f=foo1 h=1></div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()

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

@@ -116,7 +116,7 @@ export function render(_ctx) {
 
 exports[`compiler: vModel transform > should support input (checkbox) 1`] = `
 "import { applyCheckboxModel as _applyCheckboxModel, template as _template } from 'vue';
-const t0 = _template("<input type=\\"checkbox\\">", true)
+const t0 = _template("<input type=checkbox>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -138,7 +138,7 @@ export function render(_ctx) {
 
 exports[`compiler: vModel transform > should support input (radio) 1`] = `
 "import { applyRadioModel as _applyRadioModel, template as _template } from 'vue';
-const t0 = _template("<input type=\\"radio\\">", true)
+const t0 = _template("<input type=radio>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -149,7 +149,7 @@ export function render(_ctx) {
 
 exports[`compiler: vModel transform > should support input (text) 1`] = `
 "import { applyTextModel as _applyTextModel, template as _template } from 'vue';
-const t0 = _template("<input type=\\"text\\">", true)
+const t0 = _template("<input type=text>", true)
 
 export function render(_ctx) {
   const n0 = t0()

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

@@ -573,10 +573,11 @@ describe('compiler: element transform', () => {
 
   test('static props', () => {
     const { code, ir } = compileWithElementTransform(
-      `<div id="foo" class="bar" />`,
+      `<div id="foo" class="bar" title="has whitespace" data-targets="foo>bar" />`,
     )
 
-    const template = '<div id="foo" class="bar"></div>'
+    const template =
+      '<div id=foo class=bar title="has whitespace" data-targets="foo>bar"></div>'
     expect(code).toMatchSnapshot()
     expect(code).contains(JSON.stringify(template))
     expect(ir.template).toMatchObject([template])
@@ -588,7 +589,7 @@ describe('compiler: element transform', () => {
       `<div id="foo"><span/></div>`,
     )
 
-    const template = '<div id="foo"><span></span></div>'
+    const template = '<div id=foo><span></span></div>'
     expect(code).toMatchSnapshot()
     expect(code).contains(JSON.stringify(template))
     expect(ir.template).toMatchObject([template])

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

@@ -224,8 +224,20 @@ function transformNativeElement(
     for (const prop of propsResult[1]) {
       const { key, values } = prop
       if (key.isStatic && values.length === 1 && values[0].isStatic) {
+        const value = values[0].content
+
         template += ` ${key.content}`
-        if (values[0].content) template += `="${values[0].content}"`
+
+        if (value) {
+          // https://html.spec.whatwg.org/multipage/introduction.html#intro-early-example
+          const needsQuoting = /[\s>]|^["'=]/.test(value)
+
+          if (needsQuoting) {
+            template += `="${value}"`
+          } else {
+            template += `=${value}`
+          }
+        }
       } else {
         dynamicProps.push(key.content)
         context.registerEffect(