Skip to content

Commit 97c40a6

Browse files
yyx990803yyx990803
committed
refactor(vapor): refactor interpolation transform to make it hydration friendly
1 parent bb50640 commit 97c40a6

File tree

12 files changed

+137
-101
lines changed

12 files changed

+137
-101
lines changed

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

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -149,17 +149,17 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
149149
`;
150150
151151
exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
152-
"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, createTextNode as _createTextNode, insert as _insert, toDisplayString as _toDisplayString, setText as _setText, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
152+
"import { resolveComponent as _resolveComponent, child as _child, createComponentWithFallback as _createComponentWithFallback, prepend as _prepend, toDisplayString as _toDisplayString, setText as _setText, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
153153
const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
154-
const t1 = _template("<div></div>")
154+
const t1 = _template("<div> </div>")
155155
156156
export function render(_ctx, $props, $emit, $attrs, $slots) {
157157
const _component_Comp = _resolveComponent("Comp")
158158
const n0 = t0()
159159
const n3 = t1()
160+
const n2 = _child(n3)
160161
const n1 = _createComponentWithFallback(_component_Comp)
161-
const n2 = _createTextNode()
162-
_insert([n1, n2], n3)
162+
_prepend(n3, n1)
163163
_renderEffect(() => {
164164
_setText(n2, _toDisplayString(_ctx.bar))
165165
_setProp(n3, "id", _ctx.foo)
@@ -169,10 +169,12 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
169169
`;
170170
171171
exports[`compile > dynamic root 1`] = `
172-
"import { createTextNode as _createTextNode, toDisplayString as _toDisplayString } from 'vue';
172+
"import { toDisplayString as _toDisplayString, setText as _setText, template as _template } from 'vue';
173+
const t0 = _template(" ")
173174
174175
export function render(_ctx) {
175-
const n0 = _createTextNode(_toDisplayString(1) + _toDisplayString(2))
176+
const n0 = t0()
177+
_setText(n0, _toDisplayString(1) + _toDisplayString(2))
176178
return n0
177179
}"
178180
`;
@@ -197,7 +199,7 @@ export function render(_ctx) {
197199
198200
exports[`compile > expression parsing > interpolation 1`] = `
199201
"
200-
const n0 = _createTextNode()
202+
const n0 = t0()
201203
_renderEffect(() => _setText(n0, _toDisplayString(a + b.value)))
202204
return n0
203205
"
@@ -229,10 +231,12 @@ export function render(_ctx) {
229231
`;
230232
231233
exports[`compile > static + dynamic root 1`] = `
232-
"import { createTextNode as _createTextNode, toDisplayString as _toDisplayString } from 'vue';
234+
"import { toDisplayString as _toDisplayString, setText as _setText, template as _template } from 'vue';
235+
const t0 = _template(" ")
233236
234237
export function render(_ctx) {
235-
const n0 = _createTextNode(_toDisplayString(1) + _toDisplayString(2) + "3" + _toDisplayString(4) + _toDisplayString(5) + "6" + _toDisplayString(7) + _toDisplayString(8) + "9" + 'A' + 'B')
238+
const n0 = t0()
239+
_setText(n0, _toDisplayString(1) + _toDisplayString(2) + "3" + _toDisplayString(4) + _toDisplayString(5) + "6" + _toDisplayString(7) + _toDisplayString(8) + "9" + 'A' + 'B')
236240
return n0
237241
}"
238242
`;

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,33 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

33
exports[`compiler: expression > basic 1`] = `
4-
"import { createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect } from 'vue';
4+
"import { toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
5+
const t0 = _template(" ")
56
67
export function render(_ctx) {
7-
const n0 = _createTextNode()
8+
const n0 = t0()
89
_renderEffect(() => _setText(n0, _toDisplayString(_ctx.a)))
910
return n0
1011
}"
1112
`;
1213

1314
exports[`compiler: expression > props 1`] = `
14-
"import { createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect } from 'vue';
15+
"import { toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
16+
const t0 = _template(" ")
1517
1618
export function render(_ctx, $props, $emit, $attrs, $slots) {
17-
const n0 = _createTextNode()
19+
const n0 = t0()
1820
_renderEffect(() => _setText(n0, _toDisplayString($props.foo)))
1921
return n0
2022
}"
2123
`;
2224

2325
exports[`compiler: expression > props aliased 1`] = `
24-
"import { createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect } from 'vue';
26+
"import { toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
27+
const t0 = _template(" ")
2528
2629
export function render(_ctx, $props, $emit, $attrs, $slots) {
27-
const n0 = _createTextNode()
30+
const n0 = t0()
2831
_renderEffect(() => _setText(n0, _toDisplayString($props['bar'])))
2932
return n0
3033
}"

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

33
exports[`compiler: children transform > children & sibling references 1`] = `
4-
"import { child as _child, nthChild as _nthChild, next as _next, createTextNode as _createTextNode, insert as _insert, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
5-
const t0 = _template("<div><p> </p> <!><p> </p></div>", true)
4+
"import { child as _child, next as _next, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
5+
const t0 = _template("<div><p> </p> <p> </p></div>", true)
66
77
export function render(_ctx) {
8-
const n4 = t0()
9-
const n0 = _child(n4)
10-
const n3 = _nthChild(n4, 2)
11-
const n2 = _next(n3)
8+
const n3 = t0()
9+
const n0 = _child(n3)
10+
const n1 = _next(n0)
11+
const n2 = _next(n1)
1212
const x0 = _child(n0)
13-
const n1 = _createTextNode()
1413
const x2 = _child(n2)
15-
_insert(n1, n4, n3)
1614
_renderEffect(() => {
1715
_setText(x0, _toDisplayString(_ctx.first))
18-
_setText(n1, _toDisplayString(_ctx.second) + " " + _toDisplayString(_ctx.third) + " ")
16+
_setText(n1, " " + _toDisplayString(_ctx.second) + " " + _toDisplayString(_ctx.third) + " ")
1917
_setText(x2, _toDisplayString(_ctx.forth))
2018
})
21-
return n4
19+
return n3
2220
}"
2321
`;
2422

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

33
exports[`compiler: text transform > consecutive text 1`] = `
4-
"import { createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect } from 'vue';
4+
"import { toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
5+
const t0 = _template(" ")
56
67
export function render(_ctx) {
7-
const n0 = _createTextNode()
8+
const n0 = t0()
89
_renderEffect(() => _setText(n0, _toDisplayString(_ctx.msg)))
910
return n0
1011
}"
1112
`;
1213

1314
exports[`compiler: text transform > no consecutive text 1`] = `
14-
"import { createTextNode as _createTextNode } from 'vue';
15+
"import { setText as _setText, template as _template } from 'vue';
16+
const t0 = _template(" ")
1517
1618
export function render(_ctx) {
17-
const n0 = _createTextNode("hello world")
19+
const n0 = t0()
20+
_setText(n0, "hello world")
1821
return n0
1922
}"
2023
`;

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ export function render(_ctx) {
1212
`;
1313

1414
exports[`compiler: v-once > basic 1`] = `
15-
"import { child as _child, createTextNode as _createTextNode, toDisplayString as _toDisplayString, setClass as _setClass, prepend as _prepend, template as _template } from 'vue';
16-
const t0 = _template("<div><span></span></div>", true)
15+
"import { child as _child, next as _next, toDisplayString as _toDisplayString, setText as _setText, setClass as _setClass, template as _template } from 'vue';
16+
const t0 = _template("<div> <span></span></div>", true)
1717
1818
export function render(_ctx, $props, $emit, $attrs, $slots) {
1919
const n2 = t0()
20-
const n1 = _child(n2)
21-
const n0 = _createTextNode(_toDisplayString(_ctx.msg) + " ")
20+
const n0 = _child(n2)
21+
const n1 = _next(n0)
22+
_setText(n0, _toDisplayString(_ctx.msg) + " ")
2223
_setClass(n1, _ctx.clz)
23-
_prepend(n2, n0)
2424
return n2
2525
}"
2626
`;

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

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ export function render(_ctx) {
2222
`;
2323

2424
exports[`compiler: transform slot > dynamic slots name w/ v-for 1`] = `
25-
"import { resolveComponent as _resolveComponent, createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createForSlots as _createForSlots, createComponentWithFallback as _createComponentWithFallback } from 'vue';
25+
"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createForSlots as _createForSlots, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
26+
const t0 = _template(" ")
2627
2728
export function render(_ctx) {
2829
const _component_Comp = _resolveComponent("Comp")
@@ -31,7 +32,7 @@ export function render(_ctx) {
3132
() => (_createForSlots(_ctx.list, (item) => ({
3233
name: item,
3334
fn: (_slotProps0) => {
34-
const n0 = _createTextNode()
35+
const n0 = t0()
3536
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["bar"])))
3637
return n0
3738
}
@@ -158,33 +159,33 @@ export function render(_ctx) {
158159
`;
159160

160161
exports[`compiler: transform slot > nested slots scoping 1`] = `
161-
"import { resolveComponent as _resolveComponent, createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
162+
"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
162163
const t0 = _template(" ")
163164
164165
export function render(_ctx) {
165166
const _component_Inner = _resolveComponent("Inner")
166167
const _component_Comp = _resolveComponent("Comp")
167168
const n5 = _createComponentWithFallback(_component_Comp, null, {
168169
"default": (_slotProps0) => {
169-
const n2 = t0()
170+
const n3 = t0()
170171
const n1 = _createComponentWithFallback(_component_Inner, null, {
171172
"default": (_slotProps1) => {
172-
const n0 = _createTextNode()
173+
const n0 = t0()
173174
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["foo"] + _slotProps1["bar"] + _ctx.baz)))
174175
return n0
175176
}
176177
})
177-
const n3 = _createTextNode()
178-
_renderEffect(() => _setText(n3, _toDisplayString(_slotProps0["foo"] + _ctx.bar + _ctx.baz)))
179-
return [n1, n2, n3]
178+
_renderEffect(() => _setText(n3, " " + _toDisplayString(_slotProps0["foo"] + _ctx.bar + _ctx.baz)))
179+
return [n1, n3]
180180
}
181181
}, true)
182182
return n5
183183
}"
184184
`;
185185

186186
exports[`compiler: transform slot > on component dynamically named slot 1`] = `
187-
"import { resolveComponent as _resolveComponent, createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback } from 'vue';
187+
"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
188+
const t0 = _template(" ")
188189
189190
export function render(_ctx) {
190191
const _component_Comp = _resolveComponent("Comp")
@@ -193,7 +194,7 @@ export function render(_ctx) {
193194
() => ({
194195
name: _ctx.named,
195196
fn: (_slotProps0) => {
196-
const n0 = _createTextNode()
197+
const n0 = t0()
197198
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["foo"] + _ctx.bar)))
198199
return n0
199200
}
@@ -205,13 +206,14 @@ export function render(_ctx) {
205206
`;
206207

207208
exports[`compiler: transform slot > on component named slot 1`] = `
208-
"import { resolveComponent as _resolveComponent, createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback } from 'vue';
209+
"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
210+
const t0 = _template(" ")
209211
210212
export function render(_ctx) {
211213
const _component_Comp = _resolveComponent("Comp")
212214
const n1 = _createComponentWithFallback(_component_Comp, null, {
213215
"named": (_slotProps0) => {
214-
const n0 = _createTextNode()
216+
const n0 = t0()
215217
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["foo"] + _ctx.bar)))
216218
return n0
217219
}
@@ -221,13 +223,14 @@ export function render(_ctx) {
221223
`;
222224

223225
exports[`compiler: transform slot > on-component default slot 1`] = `
224-
"import { resolveComponent as _resolveComponent, createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback } from 'vue';
226+
"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
227+
const t0 = _template(" ")
225228
226229
export function render(_ctx) {
227230
const _component_Comp = _resolveComponent("Comp")
228231
const n1 = _createComponentWithFallback(_component_Comp, null, {
229232
"default": (_slotProps0) => {
230-
const n0 = _createTextNode()
233+
const n0 = t0()
231234
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["foo"] + _ctx.bar)))
232235
return n0
233236
}

‎packages/compiler-vapor/__tests__/transforms/transformChildren.spec.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,11 @@ describe('compiler: children transform', () => {
2727
)
2828
expect(code).toMatchSnapshot()
2929
expect(Array.from(helpers)).containSubset([
30+
'child',
31+
'toDisplayString',
32+
'renderEffect',
3033
'next',
3134
'setText',
32-
'createTextNode',
33-
'insert',
3435
'template',
3536
])
3637
})

‎packages/compiler-vapor/__tests__/transforms/transformText.spec.ts

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
// TODO: add tests for this transform
2+
import { NodeTypes } from '@vue/compiler-dom'
23
import {
34
IRNodeTypes,
45
transformChildren,
@@ -24,14 +25,14 @@ describe('compiler: text transform', () => {
2425
'{{ "hello world" }}',
2526
)
2627
expect(code).toMatchSnapshot()
27-
expect(helpers).contains.all.keys('createTextNode')
28+
expect(helpers).contains.all.keys('setText', 'template')
2829
expect(ir.block.operation).toMatchObject([
2930
{
30-
type: IRNodeTypes.CREATE_TEXT_NODE,
31-
id: 0,
31+
type: IRNodeTypes.SET_TEXT,
32+
element: 0,
3233
values: [
3334
{
34-
type: IRNodeTypes.SET_TEXT,
35+
type: NodeTypes.SIMPLE_EXPRESSION,
3536
content: '"hello world"',
3637
isStatic: false,
3738
},
@@ -43,14 +44,8 @@ describe('compiler: text transform', () => {
4344
it('consecutive text', () => {
4445
const { code, ir, helpers } = compileWithTextTransform('{{ msg }}')
4546
expect(code).toMatchSnapshot()
46-
expect(helpers).contains.all.keys('createTextNode')
47-
expect(ir.block.operation).toMatchObject([
48-
{
49-
type: IRNodeTypes.CREATE_TEXT_NODE,
50-
id: 0,
51-
values: undefined,
52-
},
53-
])
47+
expect(helpers).contains.all.keys('setText', 'template')
48+
expect(ir.block.operation).toMatchObject([])
5449
expect(ir.block.effect.length).toBe(1)
5550
})
5651
})

‎packages/compiler-vapor/__tests__/transforms/vOnce.spec.ts

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ describe('compiler: v-once', () => {
2828
expect(ir.block.effect).lengthOf(0)
2929
expect(ir.block.operation).toMatchObject([
3030
{
31-
type: IRNodeTypes.CREATE_TEXT_NODE,
32-
id: 0,
31+
type: IRNodeTypes.SET_TEXT,
32+
element: 0,
3333
values: [
3434
{
3535
type: NodeTypes.SIMPLE_EXPRESSION,
@@ -61,11 +61,6 @@ describe('compiler: v-once', () => {
6161
],
6262
},
6363
},
64-
{
65-
type: IRNodeTypes.PREPEND_NODE,
66-
elements: [0],
67-
parent: 2,
68-
},
6964
])
7065
})
7166

‎packages/compiler-vapor/src/generators/template.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,10 @@ export function genChildren(
6666
push(NEWLINE, `const ${variable} = `)
6767

6868
if (prev) {
69-
const offset = elementIndex - prev[1]
70-
if (offset === 1) {
69+
if (elementIndex - prev[1] === 1) {
7170
push(...genCall(helper('next'), prev[0]))
7271
} else {
73-
push(...genCall(helper('nthChild'), from, String(offset)))
72+
push(...genCall(helper('nthChild'), from, String(elementIndex)))
7473
}
7574
} else {
7675
if (newPath.length === 1 && newPath[0] === 0) {

0 commit comments

Comments
 (0)