Skip to content

Commit 3f6ce96

Browse files
sxzzsxzz
committed
feat(vapor): support more magic vars
1 parent 81b3d36 commit 3f6ce96

File tree

12 files changed

+59
-55
lines changed

12 files changed

+59
-55
lines changed

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

+10-10
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`compile > bindings 1`] = `
44
"import { renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue/vapor';
55
const t0 = _template("<div></div>")
66
7-
export function render(_ctx, $props) {
7+
export function render(_ctx, $props, $emit, $attrs, $slots) {
88
const n0 = t0()
99
_renderEffect(() => _setText(n0, "count is ", _ctx.count, "."))
1010
return n0
@@ -56,7 +56,7 @@ exports[`compile > directives > custom directive > basic 1`] = `
5656
"import { withDirectives as _withDirectives, template as _template } from 'vue/vapor';
5757
const t0 = _template("<div></div>")
5858
59-
export function render(_ctx, $props) {
59+
export function render(_ctx, $props, $emit, $attrs, $slots) {
6060
const n0 = t0()
6161
_withDirectives(n0, [[_ctx.vExample]])
6262
return n0
@@ -67,7 +67,7 @@ exports[`compile > directives > custom directive > binding value 1`] = `
6767
"import { withDirectives as _withDirectives, template as _template } from 'vue/vapor';
6868
const t0 = _template("<div></div>")
6969
70-
export function render(_ctx, $props) {
70+
export function render(_ctx, $props, $emit, $attrs, $slots) {
7171
const n0 = t0()
7272
_withDirectives(n0, [[_ctx.vExample, () => _ctx.msg]])
7373
return n0
@@ -78,7 +78,7 @@ exports[`compile > directives > custom directive > dynamic parameters 1`] = `
7878
"import { withDirectives as _withDirectives, template as _template } from 'vue/vapor';
7979
const t0 = _template("<div></div>")
8080
81-
export function render(_ctx, $props) {
81+
export function render(_ctx, $props, $emit, $attrs, $slots) {
8282
const n0 = t0()
8383
_withDirectives(n0, [[_ctx.vExample, () => _ctx.msg, _ctx.foo]])
8484
return n0
@@ -89,7 +89,7 @@ exports[`compile > directives > custom directive > modifiers 1`] = `
8989
"import { withDirectives as _withDirectives, template as _template } from 'vue/vapor';
9090
const t0 = _template("<div></div>")
9191
92-
export function render(_ctx, $props) {
92+
export function render(_ctx, $props, $emit, $attrs, $slots) {
9393
const n0 = t0()
9494
_withDirectives(n0, [[_ctx.vExample, () => _ctx.msg, void 0, { bar: true }]])
9595
return n0
@@ -100,7 +100,7 @@ exports[`compile > directives > custom directive > modifiers w/o binding 1`] = `
100100
"import { withDirectives as _withDirectives, template as _template } from 'vue/vapor';
101101
const t0 = _template("<div></div>")
102102
103-
export function render(_ctx, $props) {
103+
export function render(_ctx, $props, $emit, $attrs, $slots) {
104104
const n0 = t0()
105105
_withDirectives(n0, [[_ctx.vExample, void 0, void 0, { "foo-bar": true }]])
106106
return n0
@@ -111,7 +111,7 @@ exports[`compile > directives > custom directive > static parameters 1`] = `
111111
"import { withDirectives as _withDirectives, template as _template } from 'vue/vapor';
112112
const t0 = _template("<div></div>")
113113
114-
export function render(_ctx, $props) {
114+
export function render(_ctx, $props, $emit, $attrs, $slots) {
115115
const n0 = t0()
116116
_withDirectives(n0, [[_ctx.vExample, () => _ctx.msg, "foo"]])
117117
return n0
@@ -122,7 +122,7 @@ exports[`compile > directives > custom directive > static parameters and modifie
122122
"import { withDirectives as _withDirectives, template as _template } from 'vue/vapor';
123123
const t0 = _template("<div></div>")
124124
125-
export function render(_ctx, $props) {
125+
export function render(_ctx, $props, $emit, $attrs, $slots) {
126126
const n0 = t0()
127127
_withDirectives(n0, [[_ctx.vExample, () => _ctx.msg, "foo", { bar: true }]])
128128
return n0
@@ -143,7 +143,7 @@ exports[`compile > directives > v-pre > basic 1`] = `
143143
"import { setInheritAttrs as _setInheritAttrs, template as _template } from 'vue/vapor';
144144
const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
145145
146-
export function render(_ctx, $props) {
146+
export function render(_ctx, $props, $emit, $attrs, $slots) {
147147
const n0 = t0()
148148
_setInheritAttrs(false)
149149
return n0
@@ -155,7 +155,7 @@ exports[`compile > directives > v-pre > should not affect siblings after it 1`]
155155
const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
156156
const t1 = _template("<div></div>")
157157
158-
export function render(_ctx, $props) {
158+
export function render(_ctx, $props, $emit, $attrs, $slots) {
159159
const _component_Comp = _resolveComponent("Comp")
160160
const n0 = t0()
161161
const n3 = t1()

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export function render(_ctx) {
1212
exports[`compiler: expression > props 1`] = `
1313
"import { createTextNode as _createTextNode } from 'vue/vapor';
1414
15-
export function render(_ctx, $props) {
15+
export function render(_ctx, $props, $emit, $attrs, $slots) {
1616
const n0 = _createTextNode(() => [$props.foo])
1717
return n0
1818
}"
@@ -21,7 +21,7 @@ export function render(_ctx, $props) {
2121
exports[`compiler: expression > props aliased 1`] = `
2222
"import { createTextNode as _createTextNode } from 'vue/vapor';
2323
24-
export function render(_ctx, $props) {
24+
export function render(_ctx, $props, $emit, $attrs, $slots) {
2525
const n0 = _createTextNode(() => [$props['bar']])
2626
return n0
2727
}"

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`compiler: element transform > component > do not resolve component from non-script-setup bindings 1`] = `
44
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
55
6-
export function render(_ctx, $props) {
6+
export function render(_ctx, $props, $emit, $attrs, $slots) {
77
const _component_Example = _resolveComponent("Example")
88
const n0 = _createComponent(_component_Example, null, null, true)
99
return n0
@@ -14,7 +14,7 @@ exports[`compiler: element transform > component > generate multi root component
1414
"import { createComponent as _createComponent, template as _template } from 'vue/vapor';
1515
const t0 = _template("123")
1616
17-
export function render(_ctx, $props) {
17+
export function render(_ctx, $props, $emit, $attrs, $slots) {
1818
const n1 = t0()
1919
const n0 = _createComponent(_ctx.Comp)
2020
return [n0, n1]
@@ -24,7 +24,7 @@ export function render(_ctx, $props) {
2424
exports[`compiler: element transform > component > generate single root component 1`] = `
2525
"import { createComponent as _createComponent } from 'vue/vapor';
2626
27-
export function render(_ctx, $props) {
27+
export function render(_ctx, $props, $emit, $attrs, $slots) {
2828
const n0 = _createComponent(_ctx.Comp, null, null, true)
2929
return n0
3030
}"
@@ -57,7 +57,7 @@ exports[`compiler: element transform > component > resolve component from setup
5757
exports[`compiler: element transform > component > resolve component from setup bindings 1`] = `
5858
"import { createComponent as _createComponent } from 'vue/vapor';
5959
60-
export function render(_ctx, $props) {
60+
export function render(_ctx, $props, $emit, $attrs, $slots) {
6161
const n0 = _createComponent(_ctx.Example, null, null, true)
6262
return n0
6363
}"
@@ -73,7 +73,7 @@ exports[`compiler: element transform > component > resolve namespaced component
7373
exports[`compiler: element transform > component > resolve namespaced component from props bindings (non-inline) 1`] = `
7474
"import { createComponent as _createComponent } from 'vue/vapor';
7575
76-
export function render(_ctx, $props) {
76+
export function render(_ctx, $props, $emit, $attrs, $slots) {
7777
const n0 = _createComponent(_ctx.Foo.Example, null, null, true)
7878
return n0
7979
}"
@@ -89,7 +89,7 @@ exports[`compiler: element transform > component > resolve namespaced component
8989
exports[`compiler: element transform > component > resolve namespaced component from setup bindings 1`] = `
9090
"import { createComponent as _createComponent } from 'vue/vapor';
9191
92-
export function render(_ctx, $props) {
92+
export function render(_ctx, $props, $emit, $attrs, $slots) {
9393
const n0 = _createComponent(_ctx.Foo.Example, null, null, true)
9494
return n0
9595
}"

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`v-html > should convert v-html to innerHTML 1`] = `
44
"import { renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue/vapor';
55
const t0 = _template("<div></div>")
66
7-
export function render(_ctx, $props) {
7+
export function render(_ctx, $props, $emit, $attrs, $slots) {
88
const n0 = t0()
99
_renderEffect(() => _setHtml(n0, _ctx.code))
1010
return n0

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ exports[`compiler: vModel transform > should support member expression 1`] = `
180180
"import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue/vapor';
181181
const t0 = _template("<input>")
182182
183-
export function render(_ctx, $props) {
183+
export function render(_ctx, $props, $emit, $attrs, $slots) {
184184
const n0 = t0()
185185
_withDirectives(n0, [[_vModelText, () => _ctx.setupRef.child]])
186186
const n1 = t0()

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const t2 = _template("<div></div>")
6565
const t3 = _template("<input>")
6666
_delegateEvents("click", "contextmenu", "mouseup", "keyup")
6767
68-
export function render(_ctx, $props) {
68+
export function render(_ctx, $props, $emit, $attrs, $slots) {
6969
const n0 = t0()
7070
const n1 = t1()
7171
const n2 = t0()
@@ -493,7 +493,7 @@ exports[`v-on > simple expression 1`] = `
493493
const t0 = _template("<div></div>")
494494
_delegateEvents("click")
495495
496-
export function render(_ctx, $props) {
496+
export function render(_ctx, $props, $emit, $attrs, $slots) {
497497
const n0 = t0()
498498
_delegate(n0, "click", () => _ctx.handleClick)
499499
return n0

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ exports[`compiler: v-once > basic 1`] = `
1616
"import { createTextNode as _createTextNode, setClass as _setClass, prepend as _prepend, template as _template } from 'vue/vapor';
1717
const t0 = _template("<div><span></span></div>")
1818
19-
export function render(_ctx, $props) {
19+
export function render(_ctx, $props, $emit, $attrs, $slots) {
2020
const n2 = t0()
2121
const n1 = n2.firstChild
2222
const n0 = _createTextNode([_ctx.msg, " "])

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`v-text > should convert v-text to textContent 1`] = `
44
"import { renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue/vapor';
55
const t0 = _template("<div></div>")
66
7-
export function render(_ctx, $props) {
7+
export function render(_ctx, $props, $emit, $attrs, $slots) {
88
const n0 = t0()
99
_renderEffect(() => _setText(n0, _ctx.str))
1010
return n0

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export function generate(
110110
const args = ['_ctx']
111111
if (bindingMetadata && !inline) {
112112
// binding optimization args
113-
args.push('$props')
113+
args.push('$props', '$emit', '$attrs', '$slots')
114114
}
115115
const signature = (options.isTS ? args.map(arg => `${arg}: any`) : args).join(
116116
', ',

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

+8-3
Original file line numberDiff line numberDiff line change
@@ -192,9 +192,14 @@ function canPrefix(name: string) {
192192
if (isGloballyAllowed(name)) {
193193
return false
194194
}
195-
// special case for webpack compilation
196-
if (name === 'require') {
195+
if (
196+
// special case for webpack compilation
197+
name === 'require' ||
198+
name === '$props' ||
199+
name === '$emit' ||
200+
name === '$attrs' ||
201+
name === '$slots'
202+
)
197203
return false
198-
}
199204
return true
200205
}

‎packages/runtime-vapor/src/apiRender.ts

+5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import {
22
type ComponentInternalInstance,
33
componentKey,
44
createSetupContext,
5+
getAttrsProxy,
6+
getSlotsProxy,
57
setCurrentInstance,
68
validateComponentName,
79
} from './component'
@@ -73,6 +75,9 @@ export function setupComponent(instance: ComponentInternalInstance): void {
7375
[
7476
instance.setupState, // _ctx
7577
__DEV__ ? shallowReadonly(props) : props, // $props
78+
instance.emit, // $emit
79+
__DEV__ ? getAttrsProxy(instance) : instance.attrs, // $attrs
80+
__DEV__ ? getSlotsProxy(instance) : instance.slots, // $slots
7681
],
7782
)
7883
resetTracking()

‎packages/runtime-vapor/src/component.ts

+21-27
Original file line numberDiff line numberDiff line change
@@ -93,9 +93,7 @@ export function createSetupContext(
9393
})
9494
} else {
9595
return {
96-
get attrs() {
97-
return getAttrsProxy(instance)
98-
},
96+
attrs: instance.attrs,
9997
emit: instance.emit,
10098
slots: instance.slots,
10199
expose,
@@ -390,38 +388,34 @@ export function validateComponentName(
390388
}
391389
}
392390

393-
function getAttrsProxy(instance: ComponentInternalInstance): Data {
391+
/**
392+
* Dev-only
393+
*/
394+
export function getAttrsProxy(instance: ComponentInternalInstance): Data {
394395
return (
395396
instance.attrsProxy ||
396-
(instance.attrsProxy = new Proxy(
397-
instance.attrs,
398-
__DEV__
399-
? {
400-
get(target, key: string) {
401-
return target[key]
402-
},
403-
set() {
404-
warn(`setupContext.attrs is readonly.`)
405-
return false
406-
},
407-
deleteProperty() {
408-
warn(`setupContext.attrs is readonly.`)
409-
return false
410-
},
411-
}
412-
: {
413-
get(target, key: string) {
414-
return target[key]
415-
},
416-
},
417-
))
397+
(instance.attrsProxy = new Proxy(instance.attrs, {
398+
get(target, key: string) {
399+
return target[key]
400+
},
401+
set() {
402+
warn(`setupContext.attrs is readonly.`)
403+
return false
404+
},
405+
deleteProperty() {
406+
warn(`setupContext.attrs is readonly.`)
407+
return false
408+
},
409+
}))
418410
)
419411
}
420412

421413
/**
422414
* Dev-only
423415
*/
424-
function getSlotsProxy(instance: ComponentInternalInstance): StaticSlots {
416+
export function getSlotsProxy(
417+
instance: ComponentInternalInstance,
418+
): StaticSlots {
425419
return (
426420
instance.slotsProxy ||
427421
(instance.slotsProxy = new Proxy(instance.slots, {

0 commit comments

Comments
 (0)