Skip to content

Commit ad15466

Browse files
mary-extedison1105
mary-ext
and
edison1105
authored
refactor(compiler-vapor): skip unnecessary attribute quoting in templates (#13673)
Co-authored-by: daiwei <daiwei521@126.com>
1 parent 55bdced commit ad15466

11 files changed

Lines changed: 311 additions & 81 deletions

File tree

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export function render(_ctx) {
140140
141141
exports[`compile > directives > v-pre > basic 1`] = `
142142
"import { template as _template } from 'vue';
143-
const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}", true)
143+
const t0 = _template("<div :id=foo><Comp></Comp>{{ bar }}", true)
144144
145145
export function render(_ctx, $props, $emit, $attrs, $slots) {
146146
const n0 = t0()
@@ -150,7 +150,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
150150
151151
exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
152152
"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';
153-
const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}")
153+
const t0 = _template("<div :id=foo><Comp></Comp>{{ bar }}")
154154
const t1 = _template("<div> ")
155155
156156
export function render(_ctx, $props, $emit, $attrs, $slots) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ describe('compile', () => {
6767

6868
expect(code).toMatchSnapshot()
6969
expect(code).contains(
70-
JSON.stringify('<div :id="foo"><Comp></Comp>{{ bar }}'),
70+
JSON.stringify('<div :id=foo><Comp></Comp>{{ bar }}'),
7171
)
7272
expect(code).not.contains('effect')
7373
})

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`compiler sfc: transform asset url > should allow for full base URLs, with paths 1`] = `
44
"import { template as _template } from 'vue';
5-
const t0 = _template("<img src=\\"http://localhost:3000/src/logo.png\\">", true)
5+
const t0 = _template("<img src=http://localhost:3000/src/logo.png>", true)
66
77
export function render(_ctx) {
88
const n0 = t0()
@@ -12,7 +12,7 @@ export function render(_ctx) {
1212
1313
exports[`compiler sfc: transform asset url > should allow for full base URLs, without paths 1`] = `
1414
"import { template as _template } from 'vue';
15-
const t0 = _template("<img src=\\"http://localhost:3000/logo.png\\">", true)
15+
const t0 = _template("<img src=http://localhost:3000/logo.png>", true)
1616
1717
export function render(_ctx) {
1818
const n0 = t0()
@@ -22,7 +22,7 @@ export function render(_ctx) {
2222
2323
exports[`compiler sfc: transform asset url > should allow for full base URLs, without port 1`] = `
2424
"import { template as _template } from 'vue';
25-
const t0 = _template("<img src=\\"http://localhost/logo.png\\">", true)
25+
const t0 = _template("<img src=http://localhost/logo.png>", true)
2626
2727
export function render(_ctx) {
2828
const n0 = t0()
@@ -32,7 +32,7 @@ export function render(_ctx) {
3232
3333
exports[`compiler sfc: transform asset url > should allow for full base URLs, without protocol 1`] = `
3434
"import { template as _template } from 'vue';
35-
const t0 = _template("<img src=\\"//localhost/logo.png\\">", true)
35+
const t0 = _template("<img src=//localhost/logo.png>", true)
3636
3737
export function render(_ctx) {
3838
const n0 = t0()
@@ -54,7 +54,7 @@ export function render(_ctx) {
5454
5555
exports[`compiler sfc: transform asset url > support uri is empty 1`] = `
5656
"import { template as _template } from 'vue';
57-
const t0 = _template("<use href=\\"\\">", true, 1)
57+
const t0 = _template("<use href>", true, 1)
5858
5959
export function render(_ctx) {
6060
const n0 = t0()
@@ -69,10 +69,10 @@ import _imports_1 from 'fixtures/logo.png';
6969
import _imports_2 from '/fixtures/logo.png';
7070
const t0 = _template("<img src=\\"" + _imports_0 + "\\">")
7171
const t1 = _template("<img src=\\"" + _imports_1 + "\\">")
72-
const t2 = _template("<img src=\\"http://example.com/fixtures/logo.png\\">")
73-
const t3 = _template("<img src=\\"//example.com/fixtures/logo.png\\">")
72+
const t2 = _template("<img src=http://example.com/fixtures/logo.png>")
73+
const t3 = _template("<img src=//example.com/fixtures/logo.png>")
7474
const t4 = _template("<img src=\\"" + _imports_2 + "\\">")
75-
const t5 = _template("<img src=\\"data:image/png;base64,i\\">")
75+
const t5 = _template("<img src=data:image/png;base64,i>")
7676
7777
export function render(_ctx) {
7878
const n0 = t0()
@@ -90,7 +90,7 @@ exports[`compiler sfc: transform asset url > transform with stringify 1`] = `
9090
"import { template as _template } from 'vue';
9191
import _imports_0 from './bar.png';
9292
import _imports_1 from '/bar.png';
93-
const t0 = _template("<div><img src=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_1 + "\\"><img src=\\"https://foo.bar/baz.png\\"><img src=\\"//foo.bar/baz.png\\"><img src=\\"" + _imports_0 + "\\">", true)
93+
const t0 = _template("<div><img src=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_1 + "\\"><img src=https://foo.bar/baz.png><img src=//foo.bar/baz.png><img src=\\"" + _imports_0 + "\\">", true)
9494
9595
export function render(_ctx) {
9696
const n0 = t0()
@@ -102,7 +102,7 @@ exports[`compiler sfc: transform asset url > with explicit base 1`] = `
102102
"import { template as _template } from 'vue';
103103
import _imports_0 from 'bar.png';
104104
import _imports_1 from '@theme/bar.png';
105-
const t0 = _template("<img src=\\"/foo/bar.png\\">")
105+
const t0 = _template("<img src=/foo/bar.png>")
106106
const t1 = _template("<img src=\\"" + _imports_0 + "\\">")
107107
const t2 = _template("<img src=\\"" + _imports_1 + "\\">")
108108
@@ -121,8 +121,8 @@ import _imports_0 from './bar.png';
121121
import _imports_1 from '/bar.png';
122122
const t0 = _template("<img src=\\"" + _imports_0 + "\\">")
123123
const t1 = _template("<img src=\\"" + _imports_1 + "\\">")
124-
const t2 = _template("<img src=\\"https://foo.bar/baz.png\\">")
125-
const t3 = _template("<img src=\\"//foo.bar/baz.png\\">")
124+
const t2 = _template("<img src=https://foo.bar/baz.png>")
125+
const t3 = _template("<img src=//foo.bar/baz.png>")
126126
127127
export function render(_ctx) {
128128
const n0 = t0()

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

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,17 @@ exports[`compiler sfc: transform srcset > transform srcset 1`] = `
1818
"import { template as _template } from 'vue';
1919
import _imports_0 from './logo.png';
2020
import _imports_1 from '/logo.png';
21-
const t0 = _template("<img src=\\"" + _imports_0 + "\\" srcset>")
22-
const t1 = _template("<img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + "\\">")
23-
const t2 = _template("<img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x' + "\\">")
24-
const t3 = _template("<img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x' + "\\">")
25-
const t4 = _template("<img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + "\\">")
26-
const t5 = _template("<img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\">")
27-
const t6 = _template("<img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\">")
28-
const t7 = _template("<img src=\\"" + _imports_1 + "\\" srcset=\\"" + _imports_1 + ', ' + _imports_1 + ' 2x' + "\\">")
29-
const t8 = _template("<img src=\\"https://example.com/logo.png\\" srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\">")
30-
const t9 = _template("<img src=\\"" + _imports_1 + "\\" srcset=\\"" + _imports_1 + ', ' + _imports_0 + ' 2x' + "\\">")
31-
const t10 = _template("<img src=\\"data:image/png;base64,i\\" srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\">")
21+
const t0 = _template("<img src=\\"" + _imports_0 + "\\"srcset>")
22+
const t1 = _template("<img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + "\\">")
23+
const t2 = _template("<img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ' 2x' + "\\">")
24+
const t3 = _template("<img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x' + "\\">")
25+
const t4 = _template("<img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + "\\">")
26+
const t5 = _template("<img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\">")
27+
const t6 = _template("<img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\">")
28+
const t7 = _template("<img src=\\"" + _imports_1 + "\\"srcset=\\"" + _imports_1 + ', ' + _imports_1 + ' 2x' + "\\">")
29+
const t8 = _template("<img src=https://example.com/logo.png srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\">")
30+
const t9 = _template("<img src=\\"" + _imports_1 + "\\"srcset=\\"" + _imports_1 + ', ' + _imports_0 + ' 2x' + "\\">")
31+
const t10 = _template("<img src=data:image/png;base64,i srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\">")
3232
3333
export function render(_ctx) {
3434
const n0 = t0()
@@ -51,17 +51,17 @@ exports[`compiler sfc: transform srcset > transform srcset w/ base 1`] = `
5151
"import { template as _template } from 'vue';
5252
import _imports_0 from '/logo.png';
5353
import _imports_1 from '/foo/logo.png';
54-
const t0 = _template("<img src=\\"/foo/logo.png\\" srcset>")
55-
const t1 = _template("<img src=\\"/foo/logo.png\\" srcset=\\"/foo/logo.png\\">")
56-
const t2 = _template("<img src=\\"/foo/logo.png\\" srcset=\\"/foo/logo.png 2x\\">")
57-
const t3 = _template("<img src=\\"/foo/logo.png\\" srcset=\\"/foo/logo.png, /foo/logo.png 2x\\">")
58-
const t4 = _template("<img src=\\"/foo/logo.png\\" srcset=\\"/foo/logo.png 2x, /foo/logo.png\\">")
59-
const t5 = _template("<img src=\\"/foo/logo.png\\" srcset=\\"/foo/logo.png 2x, /foo/logo.png 3x\\">")
60-
const t6 = _template("<img src=\\"/foo/logo.png\\" srcset=\\"/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x\\">")
61-
const t7 = _template("<img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x' + "\\">")
62-
const t8 = _template("<img src=\\"https://example.com/logo.png\\" srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\">")
63-
const t9 = _template("<img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ', ' + _imports_1 + ' 2x' + "\\">")
64-
const t10 = _template("<img src=\\"data:image/png;base64,i\\" srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\">")
54+
const t0 = _template("<img src=/foo/logo.png srcset>")
55+
const t1 = _template("<img src=/foo/logo.png srcset=/foo/logo.png>")
56+
const t2 = _template("<img src=/foo/logo.png srcset=\\"/foo/logo.png 2x\\">")
57+
const t3 = _template("<img src=/foo/logo.png srcset=\\"/foo/logo.png, /foo/logo.png 2x\\">")
58+
const t4 = _template("<img src=/foo/logo.png srcset=\\"/foo/logo.png 2x, /foo/logo.png\\">")
59+
const t5 = _template("<img src=/foo/logo.png srcset=\\"/foo/logo.png 2x, /foo/logo.png 3x\\">")
60+
const t6 = _template("<img src=/foo/logo.png srcset=\\"/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x\\">")
61+
const t7 = _template("<img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x' + "\\">")
62+
const t8 = _template("<img src=https://example.com/logo.png srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\">")
63+
const t9 = _template("<img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ', ' + _imports_1 + ' 2x' + "\\">")
64+
const t10 = _template("<img src=data:image/png;base64,i srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\">")
6565
6666
export function render(_ctx) {
6767
const n0 = t0()
@@ -84,17 +84,17 @@ exports[`compiler sfc: transform srcset > transform srcset w/ includeAbsolute: t
8484
"import { template as _template } from 'vue';
8585
import _imports_0 from './logo.png';
8686
import _imports_1 from '/logo.png';
87-
const t0 = _template("<img src=\\"" + _imports_0 + "\\" srcset>")
88-
const t1 = _template("<img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + "\\">")
89-
const t2 = _template("<img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x' + "\\">")
90-
const t3 = _template("<img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x' + "\\">")
91-
const t4 = _template("<img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + "\\">")
92-
const t5 = _template("<img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\">")
93-
const t6 = _template("<img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\">")
94-
const t7 = _template("<img src=\\"" + _imports_1 + "\\" srcset=\\"" + _imports_1 + ', ' + _imports_1 + ' 2x' + "\\">")
95-
const t8 = _template("<img src=\\"https://example.com/logo.png\\" srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\">")
96-
const t9 = _template("<img src=\\"" + _imports_1 + "\\" srcset=\\"" + _imports_1 + ', ' + _imports_0 + ' 2x' + "\\">")
97-
const t10 = _template("<img src=\\"data:image/png;base64,i\\" srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\">")
87+
const t0 = _template("<img src=\\"" + _imports_0 + "\\"srcset>")
88+
const t1 = _template("<img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + "\\">")
89+
const t2 = _template("<img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ' 2x' + "\\">")
90+
const t3 = _template("<img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x' + "\\">")
91+
const t4 = _template("<img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + "\\">")
92+
const t5 = _template("<img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\">")
93+
const t6 = _template("<img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\">")
94+
const t7 = _template("<img src=\\"" + _imports_1 + "\\"srcset=\\"" + _imports_1 + ', ' + _imports_1 + ' 2x' + "\\">")
95+
const t8 = _template("<img src=https://example.com/logo.png srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\">")
96+
const t9 = _template("<img src=\\"" + _imports_1 + "\\"srcset=\\"" + _imports_1 + ', ' + _imports_0 + ' 2x' + "\\">")
97+
const t10 = _template("<img src=data:image/png;base64,i srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\">")
9898
9999
export function render(_ctx) {
100100
const n0 = t0()
@@ -117,7 +117,7 @@ exports[`compiler sfc: transform srcset > transform srcset w/ stringify 1`] = `
117117
"import { template as _template } from 'vue';
118118
import _imports_0 from './logo.png';
119119
import _imports_1 from '/logo.png';
120-
const t0 = _template("<div><img src=\\"" + _imports_0 + "\\" srcset><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\"><img src=\\"" + _imports_1 + "\\" srcset=\\"" + _imports_1 + ', ' + _imports_1 + ' 2x' + "\\"><img src=\\"https://example.com/logo.png\\" srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\"><img src=\\"" + _imports_1 + "\\" srcset=\\"" + _imports_1 + ', ' + _imports_0 + ' 2x' + "\\"><img src=\\"data:image/png;base64,i\\" srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\">", true)
120+
const t0 = _template("<div><img src=\\"" + _imports_0 + "\\"srcset><img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + "\\"><img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\"><img src=\\"" + _imports_0 + "\\"srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\"><img src=\\"" + _imports_1 + "\\"srcset=\\"" + _imports_1 + ', ' + _imports_1 + ' 2x' + "\\"><img src=https://example.com/logo.png srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\"><img src=\\"" + _imports_1 + "\\"srcset=\\"" + _imports_1 + ', ' + _imports_0 + ' 2x' + "\\"><img src=data:image/png;base64,i srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\">", true)
121121
122122
export function render(_ctx) {
123123
const n0 = t0()

0 commit comments

Comments
 (0)