Skip to content
This repository was archived by the owner on Jul 19, 2025. It is now read-only.

Commit e958118

Browse files
sxzzsxzz
committed
fix(compiler-vapor): resolve component & unit tests
1 parent dce9b61 commit e958118

File tree

4 files changed

+354
-29
lines changed

4 files changed

+354
-29
lines changed

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

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

3+
exports[`compiler: element transform > component > do not resolve component from non-script-setup bindings 1`] = `
4+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
5+
6+
export function render(_ctx) {
7+
const n0 = _createComponent(_resolveComponent("Example"), null, true)
8+
return n0
9+
}"
10+
`;
11+
12+
exports[`compiler: element transform > component > import + resolve component 1`] = `
13+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
14+
15+
export function render(_ctx) {
16+
const n0 = _createComponent(_resolveComponent("Foo"), null, true)
17+
return n0
18+
}"
19+
`;
20+
21+
exports[`compiler: element transform > component > resolve component from setup bindings (inline const) 1`] = `
22+
"(() => {
23+
const n0 = _createComponent(Example, null, true)
24+
return n0
25+
})()"
26+
`;
27+
28+
exports[`compiler: element transform > component > resolve component from setup bindings (inline) 1`] = `
29+
"(() => {
30+
const n0 = _createComponent(_unref(Example), null, true)
31+
return n0
32+
})()"
33+
`;
34+
35+
exports[`compiler: element transform > component > resolve component from setup bindings 1`] = `
36+
"import { createComponent as _createComponent } from 'vue/vapor';
37+
38+
export function render(_ctx) {
39+
const n0 = _createComponent(_ctx.Example, null, true)
40+
return n0
41+
}"
42+
`;
43+
44+
exports[`compiler: element transform > component > resolve namespaced component from props bindings (inline) 1`] = `
45+
"(() => {
46+
const n0 = _createComponent(Foo.Example, null, true)
47+
return n0
48+
})()"
49+
`;
50+
51+
exports[`compiler: element transform > component > resolve namespaced component from props bindings (non-inline) 1`] = `
52+
"import { createComponent as _createComponent } from 'vue/vapor';
53+
54+
export function render(_ctx) {
55+
const n0 = _createComponent(_ctx.Foo.Example, null, true)
56+
return n0
57+
}"
58+
`;
59+
60+
exports[`compiler: element transform > component > resolve namespaced component from setup bindings (inline const) 1`] = `
61+
"(() => {
62+
const n0 = _createComponent(Foo.Example, null, true)
63+
return n0
64+
})()"
65+
`;
66+
67+
exports[`compiler: element transform > component > resolve namespaced component from setup bindings 1`] = `
68+
"import { createComponent as _createComponent } from 'vue/vapor';
69+
70+
export function render(_ctx) {
71+
const n0 = _createComponent(_ctx.Foo.Example, null, true)
72+
return n0
73+
}"
74+
`;
75+
76+
exports[`compiler: element transform > props + children 1`] = `
77+
"import { template as _template } from 'vue/vapor';
78+
const t0 = _template("<div id=\\"foo\\"><span></span></div>")
79+
80+
export function render(_ctx) {
81+
const n0 = t0()
82+
return n0
83+
}"
84+
`;
85+
386
exports[`compiler: element transform > props merging: class 1`] = `
487
"import { renderEffect as _renderEffect, setClass as _setClass, template as _template } from 'vue/vapor';
588
const t0 = _template("<div></div>")
@@ -11,6 +94,19 @@ export function render(_ctx) {
1194
}"
1295
`;
1396
97+
exports[`compiler: element transform > props merging: event handlers 1`] = `
98+
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue/vapor';
99+
const t0 = _template("<div></div>")
100+
_delegateEvents("click")
101+
102+
export function render(_ctx) {
103+
const n0 = t0()
104+
_delegate(n0, "click", () => _ctx.a)
105+
_delegate(n0, "click", () => _ctx.b)
106+
return n0
107+
}"
108+
`;
109+
14110
exports[`compiler: element transform > props merging: style 1`] = `
15111
"import { renderEffect as _renderEffect, setStyle as _setStyle, template as _template } from 'vue/vapor';
16112
const t0 = _template("<div></div>")

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

Lines changed: 201 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@ import {
66
transformVBind,
77
transformVOn,
88
} from '../../src'
9-
import { NodeTypes } from '@vue/compiler-core'
9+
import {
10+
type BindingMetadata,
11+
BindingTypes,
12+
NodeTypes,
13+
} from '@vue/compiler-core'
1014

1115
const compileWithElementTransform = makeCompile({
1216
nodeTransforms: [transformElement, transformChildren],
@@ -17,14 +21,182 @@ const compileWithElementTransform = makeCompile({
1721
})
1822

1923
describe('compiler: element transform', () => {
20-
test.todo('basic')
24+
describe('component', () => {
25+
test('import + resolve component', () => {
26+
const { code, ir, vaporHelpers } = compileWithElementTransform(`<Foo/>`)
27+
expect(code).toMatchSnapshot()
28+
expect(vaporHelpers).contains.all.keys(
29+
'resolveComponent',
30+
'createComponent',
31+
)
32+
expect(ir.block.operation).toMatchObject([
33+
{
34+
type: IRNodeTypes.CREATE_COMPONENT_NODE,
35+
id: 0,
36+
tag: 'Foo',
37+
resolve: true,
38+
root: true,
39+
props: [[]],
40+
},
41+
])
42+
})
43+
44+
test.todo('resolve implicitly self-referencing component', () => {
45+
const { code, vaporHelpers } = compileWithElementTransform(`<Example/>`, {
46+
filename: `/foo/bar/Example.vue?vue&type=template`,
47+
})
48+
expect(code).toMatchSnapshot()
49+
expect(vaporHelpers).toContain('resolveComponent')
50+
})
51+
52+
test('resolve component from setup bindings', () => {
53+
const { code, ir, vaporHelpers } = compileWithElementTransform(
54+
`<Example/>`,
55+
{
56+
bindingMetadata: {
57+
Example: BindingTypes.SETUP_MAYBE_REF,
58+
},
59+
},
60+
)
61+
expect(code).toMatchSnapshot()
62+
expect(vaporHelpers).not.toContain('resolveComponent')
63+
expect(ir.block.operation).toMatchObject([
64+
{
65+
type: IRNodeTypes.CREATE_COMPONENT_NODE,
66+
tag: 'Example',
67+
resolve: false,
68+
},
69+
])
70+
})
71+
72+
test('resolve component from setup bindings (inline)', () => {
73+
const { code, vaporHelpers } = compileWithElementTransform(`<Example/>`, {
74+
inline: true,
75+
bindingMetadata: {
76+
Example: BindingTypes.SETUP_MAYBE_REF,
77+
},
78+
})
79+
expect(code).toMatchSnapshot()
80+
expect(code).contains(`unref(Example)`)
81+
expect(vaporHelpers).not.toContain('resolveComponent')
82+
expect(vaporHelpers).toContain('unref')
83+
})
84+
85+
test('resolve component from setup bindings (inline const)', () => {
86+
const { code, vaporHelpers } = compileWithElementTransform(`<Example/>`, {
87+
inline: true,
88+
bindingMetadata: {
89+
Example: BindingTypes.SETUP_CONST,
90+
},
91+
})
92+
expect(code).toMatchSnapshot()
93+
expect(vaporHelpers).not.toContain('resolveComponent')
94+
})
95+
96+
test('resolve namespaced component from setup bindings', () => {
97+
const { code, vaporHelpers } = compileWithElementTransform(
98+
`<Foo.Example/>`,
99+
{
100+
bindingMetadata: {
101+
Foo: BindingTypes.SETUP_MAYBE_REF,
102+
},
103+
},
104+
)
105+
expect(code).toMatchSnapshot()
106+
expect(code).contains(`_ctx.Foo.Example`)
107+
expect(vaporHelpers).not.toContain('resolveComponent')
108+
})
109+
110+
test('resolve namespaced component from setup bindings (inline const)', () => {
111+
const { code, vaporHelpers } = compileWithElementTransform(
112+
`<Foo.Example/>`,
113+
{
114+
inline: true,
115+
bindingMetadata: {
116+
Foo: BindingTypes.SETUP_CONST,
117+
},
118+
},
119+
)
120+
expect(code).toMatchSnapshot()
121+
expect(code).contains(`Foo.Example`)
122+
expect(vaporHelpers).not.toContain('resolveComponent')
123+
})
124+
125+
test('resolve namespaced component from props bindings (inline)', () => {
126+
const { code, vaporHelpers } = compileWithElementTransform(
127+
`<Foo.Example/>`,
128+
{
129+
inline: true,
130+
bindingMetadata: {
131+
Foo: BindingTypes.PROPS,
132+
},
133+
},
134+
)
135+
expect(code).toMatchSnapshot()
136+
expect(code).contains(`Foo.Example`)
137+
expect(vaporHelpers).not.toContain('resolveComponent')
138+
})
139+
140+
test('resolve namespaced component from props bindings (non-inline)', () => {
141+
const { code, vaporHelpers } = compileWithElementTransform(
142+
`<Foo.Example/>`,
143+
{
144+
inline: false,
145+
bindingMetadata: {
146+
Foo: BindingTypes.PROPS,
147+
},
148+
},
149+
)
150+
expect(code).toMatchSnapshot()
151+
expect(code).contains('_ctx.Foo.Example')
152+
expect(vaporHelpers).not.toContain('resolveComponent')
153+
})
154+
155+
test('do not resolve component from non-script-setup bindings', () => {
156+
const bindingMetadata: BindingMetadata = {
157+
Example: BindingTypes.SETUP_MAYBE_REF,
158+
}
159+
Object.defineProperty(bindingMetadata, '__isScriptSetup', {
160+
value: false,
161+
})
162+
const { code, ir, vaporHelpers } = compileWithElementTransform(
163+
`<Example/>`,
164+
{ bindingMetadata },
165+
)
166+
expect(code).toMatchSnapshot()
167+
expect(vaporHelpers).toContain('resolveComponent')
168+
expect(ir.block.operation).toMatchObject([
169+
{
170+
type: IRNodeTypes.CREATE_COMPONENT_NODE,
171+
id: 0,
172+
tag: 'Example',
173+
resolve: true,
174+
},
175+
])
176+
})
177+
})
21178

22179
test('static props', () => {
23180
const { code, ir } = compileWithElementTransform(
24181
`<div id="foo" class="bar" />`,
25182
)
183+
184+
const template = '<div id="foo" class="bar"></div>'
185+
expect(code).toMatchSnapshot()
186+
expect(code).contains(JSON.stringify(template))
187+
expect(ir.template).toMatchObject([template])
188+
expect(ir.block.effect).lengthOf(0)
189+
})
190+
191+
test('props + children', () => {
192+
const { code, ir } = compileWithElementTransform(
193+
`<div id="foo"><span/></div>`,
194+
)
195+
196+
const template = '<div id="foo"><span></span></div>'
26197
expect(code).toMatchSnapshot()
27-
expect(code).contains('<div id=\\"foo\\" class=\\"bar\\"></div>"')
198+
expect(code).contains(JSON.stringify(template))
199+
expect(ir.template).toMatchObject([template])
28200
expect(ir.block.effect).lengthOf(0)
29201
})
30202

@@ -220,7 +392,7 @@ describe('compiler: element transform', () => {
220392
)
221393
})
222394

223-
test.todo('props merging: event handlers', () => {
395+
test('props merging: event handlers', () => {
224396
const { code, ir } = compileWithElementTransform(
225397
`<div @click.foo="a" @click.bar="b" />`,
226398
)
@@ -235,23 +407,31 @@ describe('compiler: element transform', () => {
235407
content: 'click',
236408
isStatic: true,
237409
},
238-
events: [
239-
{
240-
// IREvent: value, modifiers, keyOverride...
241-
value: {
242-
type: NodeTypes.SIMPLE_EXPRESSION,
243-
content: `a`,
244-
isStatic: false,
245-
},
246-
},
247-
{
248-
value: {
249-
type: NodeTypes.SIMPLE_EXPRESSION,
250-
content: `b`,
251-
isStatic: false,
252-
},
253-
},
254-
],
410+
value: {
411+
type: NodeTypes.SIMPLE_EXPRESSION,
412+
content: 'a',
413+
isStatic: false,
414+
},
415+
keyOverride: undefined,
416+
delegate: true,
417+
effect: false,
418+
},
419+
{
420+
type: IRNodeTypes.SET_EVENT,
421+
element: 0,
422+
key: {
423+
type: NodeTypes.SIMPLE_EXPRESSION,
424+
content: 'click',
425+
isStatic: true,
426+
},
427+
value: {
428+
type: NodeTypes.SIMPLE_EXPRESSION,
429+
content: 'b',
430+
isStatic: false,
431+
},
432+
keyOverride: undefined,
433+
delegate: true,
434+
effect: false,
255435
},
256436
])
257437
})

0 commit comments

Comments
 (0)