Skip to content

Commit 1487e44

Browse files
Doctor-wuDoctor-wu
authored
Merge branch 'main' into feature-expose
2 parents 413084d + b9b3e02 commit 1487e44

File tree

15 files changed

+376
-42
lines changed

15 files changed

+376
-42
lines changed

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -125,9 +125,10 @@ const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
125125
const t1 = _template("<div></div>")
126126
127127
export function render(_ctx) {
128+
const _component_Comp = _resolveComponent("Comp")
128129
const n0 = t0()
129130
const n3 = t1()
130-
const n1 = _createComponent(_resolveComponent("Comp"))
131+
const n1 = _createComponent(_component_Comp)
131132
const n2 = _createTextNode()
132133
_insert([n1, n2], n3)
133134
_renderEffect(() => _setText(n2, _ctx.bar))

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

+18-9
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ exports[`compiler: element transform > component > do not resolve component from
44
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
55
66
export function render(_ctx) {
7-
const n0 = _createComponent(_resolveComponent("Example"), null, true)
7+
const _component_Example = _resolveComponent("Example")
8+
const n0 = _createComponent(_component_Example, null, true)
89
return n0
910
}"
1011
`;
@@ -33,7 +34,8 @@ exports[`compiler: element transform > component > import + resolve component 1`
3334
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
3435
3536
export function render(_ctx) {
36-
const n0 = _createComponent(_resolveComponent("Foo"), null, true)
37+
const _component_Foo = _resolveComponent("Foo")
38+
const n0 = _createComponent(_component_Foo, null, true)
3739
return n0
3840
}"
3941
`;
@@ -97,7 +99,8 @@ exports[`compiler: element transform > component > should wrap as function if v-
9799
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
98100
99101
export function render(_ctx) {
100-
const n0 = _createComponent(_resolveComponent("Foo"), [{
102+
const _component_Foo = _resolveComponent("Foo")
103+
const n0 = _createComponent(_component_Foo, [{
101104
onBar: () => $event => (_ctx.handleBar($event))
102105
}], true)
103106
return n0
@@ -108,7 +111,8 @@ exports[`compiler: element transform > component > static props 1`] = `
108111
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
109112
110113
export function render(_ctx) {
111-
const n0 = _createComponent(_resolveComponent("Foo"), [{
114+
const _component_Foo = _resolveComponent("Foo")
115+
const n0 = _createComponent(_component_Foo, [{
112116
id: () => ("foo"),
113117
class: () => ("bar")
114118
}], true)
@@ -120,7 +124,8 @@ exports[`compiler: element transform > component > v-bind="obj" 1`] = `
120124
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
121125
122126
export function render(_ctx) {
123-
const n0 = _createComponent(_resolveComponent("Foo"), [() => (_ctx.obj)], true)
127+
const _component_Foo = _resolveComponent("Foo")
128+
const n0 = _createComponent(_component_Foo, [() => (_ctx.obj)], true)
124129
return n0
125130
}"
126131
`;
@@ -129,7 +134,8 @@ exports[`compiler: element transform > component > v-bind="obj" after static pro
129134
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
130135
131136
export function render(_ctx) {
132-
const n0 = _createComponent(_resolveComponent("Foo"), [{
137+
const _component_Foo = _resolveComponent("Foo")
138+
const n0 = _createComponent(_component_Foo, [{
133139
id: () => ("foo")
134140
}, () => (_ctx.obj)], true)
135141
return n0
@@ -140,7 +146,8 @@ exports[`compiler: element transform > component > v-bind="obj" before static pr
140146
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
141147
142148
export function render(_ctx) {
143-
const n0 = _createComponent(_resolveComponent("Foo"), [() => (_ctx.obj), {
149+
const _component_Foo = _resolveComponent("Foo")
150+
const n0 = _createComponent(_component_Foo, [() => (_ctx.obj), {
144151
id: () => ("foo")
145152
}], true)
146153
return n0
@@ -151,7 +158,8 @@ exports[`compiler: element transform > component > v-bind="obj" between static p
151158
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
152159
153160
export function render(_ctx) {
154-
const n0 = _createComponent(_resolveComponent("Foo"), [{
161+
const _component_Foo = _resolveComponent("Foo")
162+
const n0 = _createComponent(_component_Foo, [{
155163
id: () => ("foo")
156164
}, () => (_ctx.obj), {
157165
class: () => ("bar")
@@ -165,7 +173,8 @@ exports[`compiler: element transform > component > v-on="obj" 1`] = `
165173
import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
166174
167175
export function render(_ctx) {
168-
const n0 = _createComponent(_resolveComponent("Foo"), [() => (_toHandlers(_ctx.obj))], true)
176+
const _component_Foo = _resolveComponent("Foo")
177+
const n0 = _createComponent(_component_Foo, [() => (_toHandlers(_ctx.obj))], true)
169178
return n0
170179
}"
171180
`;

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

+87
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,92 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3+
exports[`compiler: vModel transform > component > v-model for component should generate modelModifiers 1`] = `
4+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
5+
6+
export function render(_ctx) {
7+
const _component_Comp = _resolveComponent("Comp")
8+
const n0 = _createComponent(_component_Comp, [{
9+
modelValue: () => (_ctx.foo),
10+
"onUpdate:modelValue": () => $event => (_ctx.foo = $event),
11+
modelModifiers: () => ({ trim: true, "bar-baz": true })
12+
}], true)
13+
return n0
14+
}"
15+
`;
16+
17+
exports[`compiler: vModel transform > component > v-model for component should work 1`] = `
18+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
19+
20+
export function render(_ctx) {
21+
const _component_Comp = _resolveComponent("Comp")
22+
const n0 = _createComponent(_component_Comp, [{
23+
modelValue: () => (_ctx.foo),
24+
"onUpdate:modelValue": () => $event => (_ctx.foo = $event)
25+
}], true)
26+
return n0
27+
}"
28+
`;
29+
30+
exports[`compiler: vModel transform > component > v-model with arguments for component should generate modelModifiers 1`] = `
31+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
32+
33+
export function render(_ctx) {
34+
const _component_Comp = _resolveComponent("Comp")
35+
const n0 = _createComponent(_component_Comp, [{
36+
foo: () => (_ctx.foo),
37+
"onUpdate:foo": () => $event => (_ctx.foo = $event),
38+
fooModifiers: () => ({ trim: true }),
39+
bar: () => (_ctx.bar),
40+
"onUpdate:bar": () => $event => (_ctx.bar = $event),
41+
barModifiers: () => ({ number: true })
42+
}], true)
43+
return n0
44+
}"
45+
`;
46+
47+
exports[`compiler: vModel transform > component > v-model with arguments for component should work 1`] = `
48+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
49+
50+
export function render(_ctx) {
51+
const _component_Comp = _resolveComponent("Comp")
52+
const n0 = _createComponent(_component_Comp, [{
53+
bar: () => (_ctx.foo),
54+
"onUpdate:bar": () => $event => (_ctx.foo = $event)
55+
}], true)
56+
return n0
57+
}"
58+
`;
59+
60+
exports[`compiler: vModel transform > component > v-model with dynamic arguments for component should generate modelModifiers 1`] = `
61+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
62+
63+
export function render(_ctx) {
64+
const _component_Comp = _resolveComponent("Comp")
65+
const n0 = _createComponent(_component_Comp, [{
66+
[_ctx.foo]: () => (_ctx.foo),
67+
["onUpdate:" + _ctx.foo]: () => $event => (_ctx.foo = $event),
68+
[_ctx.foo + "Modifiers"]: () => ({ trim: true }),
69+
[_ctx.bar]: () => (_ctx.bar),
70+
["onUpdate:" + _ctx.bar]: () => $event => (_ctx.bar = $event),
71+
[_ctx.bar + "Modifiers"]: () => ({ number: true })
72+
}], true)
73+
return n0
74+
}"
75+
`;
76+
77+
exports[`compiler: vModel transform > component > v-model with dynamic arguments for component should work 1`] = `
78+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
79+
80+
export function render(_ctx) {
81+
const _component_Comp = _resolveComponent("Comp")
82+
const n0 = _createComponent(_component_Comp, [{
83+
[_ctx.arg]: () => (_ctx.foo),
84+
["onUpdate:" + _ctx.arg]: () => $event => (_ctx.foo = $event)
85+
}], true)
86+
return n0
87+
}"
88+
`;
89+
390
exports[`compiler: vModel transform > modifiers > .lazy 1`] = `
491
"import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue/vapor';
592
const t0 = _template("<input>")

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@ describe('compiler: element transform', () => {
198198
)
199199

200200
expect(code).toMatchSnapshot()
201-
expect(code).contains('_createComponent(_resolveComponent("Foo"), [{')
201+
expect(code).contains('_createComponent(_component_Foo, [{')
202202
expect(code).contains(' id: () => ("foo")')
203203
expect(code).contains(' class: () => ("bar")')
204204
expect(code).contains('}], true)')

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

+171-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import { makeCompile } from './_utils'
2-
import { transformChildren, transformElement, transformVModel } from '../../src'
2+
import {
3+
IRNodeTypes,
4+
transformChildren,
5+
transformElement,
6+
transformVModel,
7+
} from '../../src'
38
import { BindingTypes, DOMErrorCodes } from '@vue/compiler-dom'
49

510
const compileWithVModel = makeCompile({
@@ -198,4 +203,169 @@ describe('compiler: vModel transform', () => {
198203

199204
expect(code).toMatchSnapshot()
200205
})
206+
207+
describe('component', () => {
208+
test('v-model for component should work', () => {
209+
const { code, ir } = compileWithVModel('<Comp v-model="foo" />')
210+
expect(code).toMatchSnapshot()
211+
expect(code).contains(
212+
`modelValue: () => (_ctx.foo),
213+
"onUpdate:modelValue": () => $event => (_ctx.foo = $event)`,
214+
)
215+
expect(ir.block.operation).toMatchObject([
216+
{
217+
type: IRNodeTypes.CREATE_COMPONENT_NODE,
218+
tag: 'Comp',
219+
props: [
220+
[
221+
{
222+
key: { content: 'modelValue', isStatic: true },
223+
model: true,
224+
modelModifiers: [],
225+
values: [{ content: 'foo', isStatic: false }],
226+
},
227+
],
228+
],
229+
},
230+
])
231+
})
232+
233+
test('v-model with arguments for component should work', () => {
234+
const { code, ir } = compileWithVModel('<Comp v-model:bar="foo" />')
235+
expect(code).toMatchSnapshot()
236+
expect(code).contains(
237+
`bar: () => (_ctx.foo),
238+
"onUpdate:bar": () => $event => (_ctx.foo = $event)`,
239+
)
240+
expect(ir.block.operation).toMatchObject([
241+
{
242+
type: IRNodeTypes.CREATE_COMPONENT_NODE,
243+
tag: 'Comp',
244+
props: [
245+
[
246+
{
247+
key: { content: 'bar', isStatic: true },
248+
model: true,
249+
modelModifiers: [],
250+
values: [{ content: 'foo', isStatic: false }],
251+
},
252+
],
253+
],
254+
},
255+
])
256+
})
257+
258+
test('v-model with dynamic arguments for component should work', () => {
259+
const { code, ir } = compileWithVModel('<Comp v-model:[arg]="foo" />')
260+
expect(code).toMatchSnapshot()
261+
expect(code).contains(
262+
`[_ctx.arg]: () => (_ctx.foo),
263+
["onUpdate:" + _ctx.arg]: () => $event => (_ctx.foo = $event)`,
264+
)
265+
expect(ir.block.operation).toMatchObject([
266+
{
267+
type: IRNodeTypes.CREATE_COMPONENT_NODE,
268+
tag: 'Comp',
269+
props: [
270+
[
271+
{
272+
key: { content: 'arg', isStatic: false },
273+
values: [{ content: 'foo', isStatic: false }],
274+
model: true,
275+
modelModifiers: [],
276+
},
277+
],
278+
],
279+
},
280+
])
281+
})
282+
283+
test('v-model for component should generate modelModifiers', () => {
284+
const { code, ir } = compileWithVModel(
285+
'<Comp v-model.trim.bar-baz="foo" />',
286+
)
287+
expect(code).toMatchSnapshot()
288+
expect(code).contain(
289+
`modelModifiers: () => ({ trim: true, "bar-baz": true })`,
290+
)
291+
expect(ir.block.operation).toMatchObject([
292+
{
293+
type: IRNodeTypes.CREATE_COMPONENT_NODE,
294+
tag: 'Comp',
295+
props: [
296+
[
297+
{
298+
key: { content: 'modelValue', isStatic: true },
299+
values: [{ content: 'foo', isStatic: false }],
300+
model: true,
301+
modelModifiers: ['trim', 'bar-baz'],
302+
},
303+
],
304+
],
305+
},
306+
])
307+
})
308+
309+
test('v-model with arguments for component should generate modelModifiers', () => {
310+
const { code, ir } = compileWithVModel(
311+
'<Comp v-model:foo.trim="foo" v-model:bar.number="bar" />',
312+
)
313+
expect(code).toMatchSnapshot()
314+
expect(code).contain(`fooModifiers: () => ({ trim: true })`)
315+
expect(code).contain(`barModifiers: () => ({ number: true })`)
316+
expect(ir.block.operation).toMatchObject([
317+
{
318+
type: IRNodeTypes.CREATE_COMPONENT_NODE,
319+
tag: 'Comp',
320+
props: [
321+
[
322+
{
323+
key: { content: 'foo', isStatic: true },
324+
values: [{ content: 'foo', isStatic: false }],
325+
model: true,
326+
modelModifiers: ['trim'],
327+
},
328+
{
329+
key: { content: 'bar', isStatic: true },
330+
values: [{ content: 'bar', isStatic: false }],
331+
model: true,
332+
modelModifiers: ['number'],
333+
},
334+
],
335+
],
336+
},
337+
])
338+
})
339+
340+
test('v-model with dynamic arguments for component should generate modelModifiers ', () => {
341+
const { code, ir } = compileWithVModel(
342+
'<Comp v-model:[foo].trim="foo" v-model:[bar].number="bar" />',
343+
)
344+
expect(code).toMatchSnapshot()
345+
expect(code).contain(`[_ctx.foo + "Modifiers"]: () => ({ trim: true })`)
346+
expect(code).contain(`[_ctx.bar + "Modifiers"]: () => ({ number: true })`)
347+
expect(ir.block.operation).toMatchObject([
348+
{
349+
type: IRNodeTypes.CREATE_COMPONENT_NODE,
350+
tag: 'Comp',
351+
props: [
352+
[
353+
{
354+
key: { content: 'foo', isStatic: false },
355+
values: [{ content: 'foo', isStatic: false }],
356+
model: true,
357+
modelModifiers: ['trim'],
358+
},
359+
{
360+
key: { content: 'bar', isStatic: false },
361+
values: [{ content: 'bar', isStatic: false }],
362+
model: true,
363+
modelModifiers: ['number'],
364+
},
365+
],
366+
],
367+
},
368+
])
369+
})
370+
})
201371
})

‎packages/compiler-vapor/src/generate.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export function generate(
125125
}
126126

127127
push(INDENT_START)
128-
push(...genBlockContent(ir.block, context))
128+
push(...genBlockContent(ir.block, context, true))
129129
push(INDENT_END, NEWLINE)
130130

131131
if (isSetupInlined) {

0 commit comments

Comments
 (0)