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

Commit 2476176

Browse files
sxzzsxzz
committed
feat(vapor): merge inherited attrs with current attrs
1 parent c915865 commit 2476176

33 files changed

+505
-178
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"dev-prepare-cjs": "node scripts/prepare-cjs.js || npm run build-all-cjs",
3030
"dev-compiler": "run-p \"dev template-explorer\" serve open",
3131
"dev-sfc": "run-s dev-prepare-cjs dev-sfc-run",
32-
"dev-sfc-serve": "vite packages-private/sfc-playground --host",
32+
"dev-sfc-serve": "vite packages-private/sfc-playground",
3333
"dev-sfc-run": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime\" \"dev vue -ipf esm-browser-runtime\" \"dev server-renderer -if esm-bundler\" dev-sfc-serve",
3434
"dev-vapor": "pnpm -C playground run dev",
3535
"serve": "serve",

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -140,11 +140,12 @@ export function render(_ctx) {
140140
`;
141141

142142
exports[`compile > directives > v-pre > basic 1`] = `
143-
"import { template as _template } from 'vue/vapor';
143+
"import { setInheritAttrs as _setInheritAttrs, template as _template } from 'vue/vapor';
144144
const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
145145
146146
export function render(_ctx, $props) {
147147
const n0 = t0()
148+
_setInheritAttrs(false)
148149
return n0
149150
}"
150151
`;
@@ -176,15 +177,16 @@ export function render(_ctx) {
176177
`;
177178
178179
exports[`compile > dynamic root nodes and interpolation 1`] = `
179-
"import { delegate as _delegate, renderEffect as _renderEffect, setText as _setText, setDynamicProp as _setDynamicProp, delegateEvents as _delegateEvents, template as _template } from 'vue/vapor';
180+
"import { delegate as _delegate, setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setText as _setText, setDynamicProp as _setDynamicProp, delegateEvents as _delegateEvents, template as _template } from 'vue/vapor';
180181
const t0 = _template("<button></button>")
181182
_delegateEvents("click")
182183
183184
export function render(_ctx) {
184185
const n0 = t0()
185186
_delegate(n0, "click", () => _ctx.handleClick)
187+
_setInheritAttrs(["id"])
186188
_renderEffect(() => _setText(n0, _ctx.count, "foo", _ctx.count, "foo", _ctx.count))
187-
_renderEffect(() => _setDynamicProp(n0, "id", _ctx.count))
189+
_renderEffect(() => _setDynamicProp(n0, "id", _ctx.count, true))
188190
return n0
189191
}"
190192
`;
@@ -199,7 +201,8 @@ exports[`compile > expression parsing > interpolation 1`] = `
199201
exports[`compile > expression parsing > v-bind 1`] = `
200202
"((_ctx) => {
201203
const n0 = t0()
202-
_renderEffect(() => _setDynamicProps(n0, { [key.value+1]: _unref(foo)[key.value+1]() }))
204+
_setInheritAttrs(true)
205+
_renderEffect(() => _setDynamicProps(n0, [{ [key.value+1]: _unref(foo)[key.value+1]() }], true))
203206
return n0
204207
})()"
205208
`;

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

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -286,22 +286,24 @@ export function render(_ctx) {
286286
`;
287287

288288
exports[`compiler: element transform > props + children 1`] = `
289-
"import { template as _template } from 'vue/vapor';
289+
"import { setInheritAttrs as _setInheritAttrs, template as _template } from 'vue/vapor';
290290
const t0 = _template("<div id=\\"foo\\"><span></span></div>")
291291
292292
export function render(_ctx) {
293293
const n0 = t0()
294+
_setInheritAttrs(false)
294295
return n0
295296
}"
296297
`;
297298
298299
exports[`compiler: element transform > props merging: class 1`] = `
299-
"import { renderEffect as _renderEffect, setClass as _setClass, template as _template } from 'vue/vapor';
300+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setClass as _setClass, template as _template } from 'vue/vapor';
300301
const t0 = _template("<div></div>")
301302
302303
export function render(_ctx) {
303304
const n0 = t0()
304-
_renderEffect(() => _setClass(n0, ["foo", { bar: _ctx.isBar }]))
305+
_setInheritAttrs(["class"])
306+
_renderEffect(() => _setClass(n0, ["foo", { bar: _ctx.isBar }], true))
305307
return n0
306308
}"
307309
`;
@@ -324,66 +326,72 @@ export function render(_ctx) {
324326
`;
325327
326328
exports[`compiler: element transform > props merging: style 1`] = `
327-
"import { renderEffect as _renderEffect, setStyle as _setStyle, template as _template } from 'vue/vapor';
329+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setStyle as _setStyle, template as _template } from 'vue/vapor';
328330
const t0 = _template("<div></div>")
329331
330332
export function render(_ctx) {
331333
const n0 = t0()
332-
_renderEffect(() => _setStyle(n0, ["color: green", { color: 'red' }]))
334+
_setInheritAttrs(["style"])
335+
_renderEffect(() => _setStyle(n0, ["color: green", { color: 'red' }], true))
333336
return n0
334337
}"
335338
`;
336339
337340
exports[`compiler: element transform > static props 1`] = `
338-
"import { template as _template } from 'vue/vapor';
341+
"import { setInheritAttrs as _setInheritAttrs, template as _template } from 'vue/vapor';
339342
const t0 = _template("<div id=\\"foo\\" class=\\"bar\\"></div>")
340343
341344
export function render(_ctx) {
342345
const n0 = t0()
346+
_setInheritAttrs(false)
343347
return n0
344348
}"
345349
`;
346350
347351
exports[`compiler: element transform > v-bind="obj" 1`] = `
348-
"import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue/vapor';
352+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue/vapor';
349353
const t0 = _template("<div></div>")
350354
351355
export function render(_ctx) {
352356
const n0 = t0()
353-
_renderEffect(() => _setDynamicProps(n0, _ctx.obj))
357+
_setInheritAttrs(true)
358+
_renderEffect(() => _setDynamicProps(n0, [_ctx.obj], true))
354359
return n0
355360
}"
356361
`;
357362
358363
exports[`compiler: element transform > v-bind="obj" after static prop 1`] = `
359-
"import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue/vapor';
364+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue/vapor';
360365
const t0 = _template("<div></div>")
361366
362367
export function render(_ctx) {
363368
const n0 = t0()
364-
_renderEffect(() => _setDynamicProps(n0, { id: "foo" }, _ctx.obj))
369+
_setInheritAttrs(true)
370+
_renderEffect(() => _setDynamicProps(n0, [{ id: "foo" }, _ctx.obj], true))
365371
return n0
366372
}"
367373
`;
368374
369375
exports[`compiler: element transform > v-bind="obj" before static prop 1`] = `
370-
"import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue/vapor';
376+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue/vapor';
371377
const t0 = _template("<div></div>")
372378
373379
export function render(_ctx) {
374380
const n0 = t0()
375-
_renderEffect(() => _setDynamicProps(n0, _ctx.obj, { id: "foo" }))
381+
_setInheritAttrs(true)
382+
_renderEffect(() => _setDynamicProps(n0, [_ctx.obj, { id: "foo" }], true))
376383
return n0
377384
}"
378385
`;
379386
380387
exports[`compiler: element transform > v-bind="obj" between static props 1`] = `
381-
"import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue/vapor';
388+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue/vapor';
382389
const t0 = _template("<div></div>")
383390
384391
export function render(_ctx) {
385392
const n0 = t0()
386-
_renderEffect(() => _setDynamicProps(n0, { id: "foo" }, _ctx.obj, { class: "bar" }))
393+
_setInheritAttrs(true)
394+
_renderEffect(() => _setDynamicProps(n0, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true))
387395
return n0
388396
}"
389397
`;

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

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

33
exports[`compiler v-bind > .attr modifier 1`] = `
4-
"import { renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue/vapor';
4+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue/vapor';
55
const t0 = _template("<div></div>")
66
77
export function render(_ctx) {
88
const n0 = t0()
9-
_renderEffect(() => _setAttr(n0, "foo-bar", _ctx.id))
9+
_setInheritAttrs(["foo-bar"])
10+
_renderEffect(() => _setAttr(n0, "foo-bar", _ctx.id, true))
1011
return n0
1112
}"
1213
`;
1314

1415
exports[`compiler v-bind > .attr modifier w/ no expression 1`] = `
15-
"import { renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue/vapor';
16+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue/vapor';
1617
const t0 = _template("<div></div>")
1718
1819
export function render(_ctx) {
1920
const n0 = t0()
20-
_renderEffect(() => _setAttr(n0, "foo-bar", _ctx.fooBar))
21+
_setInheritAttrs(["foo-bar"])
22+
_renderEffect(() => _setAttr(n0, "foo-bar", _ctx.fooBar, true))
2123
return n0
2224
}"
2325
`;
2426

2527
exports[`compiler v-bind > .camel modifier 1`] = `
26-
"import { renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
28+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
2729
const t0 = _template("<div></div>")
2830
2931
export function render(_ctx) {
3032
const n0 = t0()
31-
_renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.id))
33+
_setInheritAttrs(["fooBar"])
34+
_renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.id, true))
3235
return n0
3336
}"
3437
`;
3538

3639
exports[`compiler v-bind > .camel modifier w/ dynamic arg 1`] = `
3740
"import { camelize as _camelize } from 'vue';
38-
import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue/vapor';
41+
import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue/vapor';
3942
const t0 = _template("<div></div>")
4043
4144
export function render(_ctx) {
4245
const n0 = t0()
43-
_renderEffect(() => _setDynamicProps(n0, { [_camelize(_ctx.foo)]: _ctx.id }))
46+
_setInheritAttrs(true)
47+
_renderEffect(() => _setDynamicProps(n0, [{ [_camelize(_ctx.foo)]: _ctx.id }], true))
4448
return n0
4549
}"
4650
`;
4751

4852
exports[`compiler v-bind > .camel modifier w/ no expression 1`] = `
49-
"import { renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
53+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
5054
const t0 = _template("<div></div>")
5155
5256
export function render(_ctx) {
5357
const n0 = t0()
54-
_renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.fooBar))
58+
_setInheritAttrs(["fooBar"])
59+
_renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.fooBar, true))
5560
return n0
5661
}"
5762
`;
5863

5964
exports[`compiler v-bind > .prop modifier (shortband) w/ no expression 1`] = `
60-
"import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
65+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
6166
const t0 = _template("<div></div>")
6267
6368
export function render(_ctx) {
6469
const n0 = t0()
65-
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar))
70+
_setInheritAttrs(["fooBar"])
71+
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar, true))
6672
return n0
6773
}"
6874
`;
6975

7076
exports[`compiler v-bind > .prop modifier (shorthand) 1`] = `
71-
"import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
77+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
7278
const t0 = _template("<div></div>")
7379
7480
export function render(_ctx) {
7581
const n0 = t0()
76-
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id))
82+
_setInheritAttrs(["fooBar"])
83+
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id, true))
7784
return n0
7885
}"
7986
`;
8087

8188
exports[`compiler v-bind > .prop modifier 1`] = `
82-
"import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
89+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
8390
const t0 = _template("<div></div>")
8491
8592
export function render(_ctx) {
8693
const n0 = t0()
87-
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id))
94+
_setInheritAttrs(["fooBar"])
95+
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id, true))
8896
return n0
8997
}"
9098
`;
9199

92100
exports[`compiler v-bind > .prop modifier w/ dynamic arg 1`] = `
93-
"import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue/vapor';
101+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue/vapor';
94102
const t0 = _template("<div></div>")
95103
96104
export function render(_ctx) {
97105
const n0 = t0()
98-
_renderEffect(() => _setDynamicProps(n0, { ["." + _ctx.fooBar]: _ctx.id }))
106+
_setInheritAttrs(true)
107+
_renderEffect(() => _setDynamicProps(n0, [{ ["." + _ctx.fooBar]: _ctx.id }], true))
99108
return n0
100109
}"
101110
`;
102111

103112
exports[`compiler v-bind > .prop modifier w/ no expression 1`] = `
104-
"import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
113+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
105114
const t0 = _template("<div></div>")
106115
107116
export function render(_ctx) {
108117
const n0 = t0()
109-
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar))
118+
_setInheritAttrs(["fooBar"])
119+
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar, true))
110120
return n0
111121
}"
112122
`;
113123

114124
exports[`compiler v-bind > basic 1`] = `
115-
"import { renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
125+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
116126
const t0 = _template("<div></div>")
117127
118128
export function render(_ctx) {
119129
const n0 = t0()
120-
_renderEffect(() => _setDynamicProp(n0, "id", _ctx.id))
130+
_setInheritAttrs(["id"])
131+
_renderEffect(() => _setDynamicProp(n0, "id", _ctx.id, true))
121132
return n0
122133
}"
123134
`;
124135

125136
exports[`compiler v-bind > dynamic arg 1`] = `
126-
"import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue/vapor';
137+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue/vapor';
127138
const t0 = _template("<div></div>")
128139
129140
export function render(_ctx) {
130141
const n0 = t0()
131-
_renderEffect(() => _setDynamicProps(n0, { [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title }))
142+
_setInheritAttrs(true)
143+
_renderEffect(() => _setDynamicProps(n0, [{ [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title }], true))
132144
return n0
133145
}"
134146
`;
135147

136148
exports[`compiler v-bind > dynamic arg w/ static attribute 1`] = `
137-
"import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue/vapor';
149+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue/vapor';
138150
const t0 = _template("<div></div>")
139151
140152
export function render(_ctx) {
141153
const n0 = t0()
142-
_renderEffect(() => _setDynamicProps(n0, { [_ctx.id]: _ctx.id, foo: "bar", checked: "" }))
154+
_setInheritAttrs(true)
155+
_renderEffect(() => _setDynamicProps(n0, [{ [_ctx.id]: _ctx.id, foo: "bar", checked: "" }], true))
143156
return n0
144157
}"
145158
`;
146159

147160
exports[`compiler v-bind > no expression (shorthand) 1`] = `
148-
"import { renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
161+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
149162
const t0 = _template("<div></div>")
150163
151164
export function render(_ctx) {
152165
const n0 = t0()
153-
_renderEffect(() => _setDynamicProp(n0, "camel-case", _ctx.camelCase))
166+
_setInheritAttrs(["camel-case"])
167+
_renderEffect(() => _setDynamicProp(n0, "camel-case", _ctx.camelCase, true))
154168
return n0
155169
}"
156170
`;
157171

158172
exports[`compiler v-bind > no expression 1`] = `
159-
"import { renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
173+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
160174
const t0 = _template("<div></div>")
161175
162176
export function render(_ctx) {
163177
const n0 = t0()
164-
_renderEffect(() => _setDynamicProp(n0, "id", _ctx.id))
178+
_setInheritAttrs(["id"])
179+
_renderEffect(() => _setDynamicProp(n0, "id", _ctx.id, true))
165180
return n0
166181
}"
167182
`;
168183

169184
exports[`compiler v-bind > should error if empty expression 1`] = `
170-
"import { template as _template } from 'vue/vapor';
185+
"import { setInheritAttrs as _setInheritAttrs, template as _template } from 'vue/vapor';
171186
const t0 = _template("<div arg></div>")
172187
173188
export function render(_ctx) {
174189
const n0 = t0()
190+
_setInheritAttrs(false)
175191
return n0
176192
}"
177193
`;

0 commit comments

Comments
 (0)