`;
exports[`compile > expression parsing > v-slot 1`] = `
-"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" ")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
const n1 = _createComponentWithFallback(_component_Comp, null, {
- "foo": _withVaporCtx((_slotProps0) => {
+ "foo": (_slotProps0) => {
const n0 = t0()
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0.a + _slotProps0.b)))
return n0
- })
+ }
}, true)
return n1
}"
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`scopeId compiler support > should wrap default slot 1`] = `
-"import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const _component_Child = _resolveComponent("Child")
const n1 = _createComponentWithFallback(_component_Child, null, {
- "default": _withVaporCtx(() => {
+ "default": () => {
const n0 = t0()
return n0
- })
+ }
}, true)
return n1
}"
`;
exports[`scopeId compiler support > should wrap dynamic slots 1`] = `
-"import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createForSlots as _createForSlots, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, createForSlots as _createForSlots, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template("<div test></div>")
export function render(_ctx) {
() => (_ctx.ok
? {
name: "foo",
- fn: _withVaporCtx(() => {
+ fn: () => {
const n0 = t0()
return n0
- })
+ }
}
: void 0),
() => (_createForSlots(_ctx.list, (i) => ({
name: i,
- fn: _withVaporCtx(() => {
+ fn: () => {
const n2 = t0()
return n2
- })
+ }
})))
]
}, true)
`;
exports[`scopeId compiler support > should wrap named slots 1`] = `
-"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" ")
const t1 = _template("<div test></div>")
export function render(_ctx) {
const _component_Child = _resolveComponent("Child")
const n4 = _createComponentWithFallback(_component_Child, null, {
- "foo": _withVaporCtx((_slotProps0) => {
+ "foo": (_slotProps0) => {
const n0 = t0()
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0.msg)))
return n0
- }),
- "bar": _withVaporCtx(() => {
+ },
+ "bar": () => {
const n2 = t1()
return n2
- })
+ }
}, true)
return n4
}"
describe('scopeId compiler support', () => {
test('should wrap default slot', () => {
const code = compile(`<Child><div/></Child>`)
- expect(code).toMatch(`"default": _withVaporCtx(() => {`)
+ expect(code).toMatch(`"default": () => {`)
expect(code).toMatchSnapshot()
})
scopeId: 'test',
},
)
- expect(code).toMatch(`"foo": _withVaporCtx((_slotProps0) => {`)
- expect(code).toMatch(`"bar": _withVaporCtx(() => {`)
+ expect(code).toMatch(`"foo": (_slotProps0) => {`)
+ expect(code).toMatch(`"bar": () => {`)
expect(code).toMatchSnapshot()
})
scopeId: 'test',
},
)
- expect(code).toMatch(/name: "foo",\s+fn: _withVaporCtx\(/)
- expect(code).toMatch(/name: i,\s+fn: _withVaporCtx\(/)
+ expect(code).toMatch(/name: "foo",\s+fn: \(/)
+ expect(code).toMatch(/name: i,\s+fn: \(/)
expect(code).toMatchSnapshot()
})
})
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: transition > basic 1`] = `
-"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, createComponent as _createComponent, template as _template } from 'vue';
const t0 = _template("<h1>foo</h1>")
export function render(_ctx) {
const n1 = _createComponent(_VaporTransition, { persisted: () => ("") }, {
- "default": _withVaporCtx(() => {
+ "default": () => {
const n0 = t0()
_applyVShow(n0, () => (_ctx.show))
return n0
- })
+ }
}, true)
return n1
}"
`;
exports[`compiler: transition > inject persisted when child has v-show 1`] = `
-"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, createComponent as _createComponent, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n1 = _createComponent(_VaporTransition, { persisted: () => ("") }, {
- "default": _withVaporCtx(() => {
+ "default": () => {
const n0 = t0()
_applyVShow(n0, () => (_ctx.ok))
return n0
- })
+ }
}, true)
return n1
}"
`;
exports[`compiler: transition > the v-if/else-if/else branches in Transition should ignore comments 1`] = `
-"import { VaporTransition as _VaporTransition, setInsertionState as _setInsertionState, createIf as _createIf, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, setInsertionState as _setInsertionState, createIf as _createIf, createComponent as _createComponent, template as _template } from 'vue';
const t0 = _template("<div>hey</div>")
const t1 = _template("<p></p>")
const t2 = _template("<div></div>")
export function render(_ctx) {
const n16 = _createComponent(_VaporTransition, null, {
- "default": _withVaporCtx(() => {
+ "default": () => {
const n0 = _createIf(() => (_ctx.a), () => {
const n2 = t0()
n2.$key = 2
return n14
}))
return [n0, n3, n7]
- })
+ }
}, true)
return n16
}"
`;
exports[`compiler: transition > v-show + appear 1`] = `
-"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, createComponent as _createComponent, template as _template } from 'vue';
const t0 = _template("<h1>foo</h1>")
export function render(_ctx) {
appear: () => (""),
persisted: () => ("")
}, {
- "default": _withVaporCtx(() => {
+ "default": () => {
const n0 = t0()
deferredApplyVShows.push(() => _applyVShow(n0, () => (_ctx.show)))
return n0
- })
+ }
}, true)
deferredApplyVShows.forEach(fn => fn())
return n1
`;
exports[`compiler: transition > work with dynamic keyed children 1`] = `
-"import { VaporTransition as _VaporTransition, createKeyedFragment as _createKeyedFragment, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, createKeyedFragment as _createKeyedFragment, createComponent as _createComponent, template as _template } from 'vue';
const t0 = _template("<h1>foo</h1>")
export function render(_ctx) {
const n1 = _createComponent(_VaporTransition, null, {
- "default": _withVaporCtx(() => {
+ "default": () => {
return _createKeyedFragment(() => _ctx.key, () => {
const n0 = t0()
n0.$key = _ctx.key
return n0
})
- })
+ }
}, true)
return n1
}"
`;
exports[`compiler: transition > work with v-if 1`] = `
-"import { VaporTransition as _VaporTransition, createIf as _createIf, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, createIf as _createIf, createComponent as _createComponent, template as _template } from 'vue';
const t0 = _template("<h1>foo</h1>")
export function render(_ctx) {
const n3 = _createComponent(_VaporTransition, null, {
- "default": _withVaporCtx(() => {
+ "default": () => {
const n0 = _createIf(() => (_ctx.show), () => {
const n2 = t0()
n2.$key = 2
return n2
})
return n0
- })
+ }
}, true)
return n3
}"
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: transform slot > dynamic slots name 1`] = `
-"import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template("foo")
export function render(_ctx) {
$: [
() => ({
name: _ctx.name,
- fn: _withVaporCtx(() => {
+ fn: () => {
const n0 = t0()
return n0
- })
+ }
})
]
}, true)
`;
exports[`compiler: transform slot > dynamic slots name w/ v-for 1`] = `
-"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, createForSlots as _createForSlots, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createForSlots as _createForSlots, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" ")
export function render(_ctx) {
$: [
() => (_createForSlots(_ctx.list, (item) => ({
name: item,
- fn: _withVaporCtx((_slotProps0) => {
+ fn: (_slotProps0) => {
const n0 = t0()
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0.bar)))
return n0
- })
+ }
})))
]
}, true)
`;
exports[`compiler: transform slot > dynamic slots name w/ v-for and provide absent key 1`] = `
-"import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createForSlots as _createForSlots, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, createForSlots as _createForSlots, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template("foo")
export function render(_ctx) {
$: [
() => (_createForSlots(_ctx.list, (_, __, index) => ({
name: index,
- fn: _withVaporCtx(() => {
+ fn: () => {
const n0 = t0()
return n0
- })
+ }
})))
]
}, true)
`;
exports[`compiler: transform slot > dynamic slots name w/ v-if / v-else[-if] 1`] = `
-"import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template("condition slot")
const t1 = _template("another condition")
const t2 = _template("else condition")
() => (_ctx.condition
? {
name: "condition",
- fn: _withVaporCtx(() => {
+ fn: () => {
const n0 = t0()
return n0
- })
+ }
}
: _ctx.anotherCondition
? {
name: "condition",
- fn: _withVaporCtx((_slotProps0) => {
+ fn: (_slotProps0) => {
const n2 = t1()
return n2
- })
+ }
}
: {
name: "condition",
- fn: _withVaporCtx(() => {
+ fn: () => {
const n4 = t2()
return n4
- })
+ }
})
]
}, true)
`;
exports[`compiler: transform slot > implicit default slot 1`] = `
-"import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
const n1 = _createComponentWithFallback(_component_Comp, null, {
- "default": _withVaporCtx(() => {
+ "default": () => {
const n0 = t0()
return n0
- })
+ }
}, true)
return n1
}"
`;
exports[`compiler: transform slot > named slots w/ implicit default slot 1`] = `
-"import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template("foo")
const t1 = _template("bar")
const t2 = _template("<span></span>")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
const n4 = _createComponentWithFallback(_component_Comp, null, {
- "one": _withVaporCtx(() => {
+ "one": () => {
const n0 = t0()
return n0
- }),
- "default": _withVaporCtx(() => {
+ },
+ "default": () => {
const n2 = t1()
const n3 = t2()
return [n2, n3]
- })
+ }
}, true)
return n4
}"
`;
exports[`compiler: transform slot > nested component should not inherit parent slots 1`] = `
-"import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, withVaporCtx as _withVaporCtx } from 'vue';
export function render(_ctx) {
const _component_Bar = _resolveComponent("Bar")
const _component_Foo = _resolveComponent("Foo")
const n2 = _createComponentWithFallback(_component_Foo, null, {
- "header": _withVaporCtx(() => {
+ "header": () => {
return null
- }),
+ },
"default": _withVaporCtx(() => {
const n1 = _createComponentWithFallback(_component_Bar)
return n1
`;
exports[`compiler: transform slot > nested slots scoping 1`] = `
-"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, withVaporCtx as _withVaporCtx, template as _template } from 'vue';
const t0 = _template(" ")
export function render(_ctx) {
const n5 = _createComponentWithFallback(_component_Comp, null, {
"default": _withVaporCtx((_slotProps0) => {
const n1 = _createComponentWithFallback(_component_Inner, null, {
- "default": _withVaporCtx((_slotProps1) => {
+ "default": (_slotProps1) => {
const n0 = t0()
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0.foo + _slotProps1.bar + _ctx.baz)))
return n0
- })
+ }
})
const n3 = t0()
_renderEffect(() => _setText(n3, " " + _toDisplayString(_slotProps0.foo + _ctx.bar + _ctx.baz)))
`;
exports[`compiler: transform slot > on component dynamically named slot 1`] = `
-"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" ")
export function render(_ctx) {
$: [
() => ({
name: _ctx.named,
- fn: _withVaporCtx((_slotProps0) => {
+ fn: (_slotProps0) => {
const n0 = t0()
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0.foo + _ctx.bar)))
return n0
- })
+ }
})
]
}, true)
`;
exports[`compiler: transform slot > on component named slot 1`] = `
-"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" ")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
const n1 = _createComponentWithFallback(_component_Comp, null, {
- "named": _withVaporCtx((_slotProps0) => {
+ "named": (_slotProps0) => {
const n0 = t0()
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0.foo + _ctx.bar)))
return n0
- })
+ }
}, true)
return n1
}"
`;
exports[`compiler: transform slot > on-component default slot 1`] = `
-"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" ")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
const n1 = _createComponentWithFallback(_component_Comp, null, {
- "default": _withVaporCtx((_slotProps0) => {
+ "default": (_slotProps0) => {
const n0 = t0()
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0.foo + _ctx.bar)))
return n0
- })
+ }
}, true)
return n1
}"
`;
exports[`compiler: transform slot > quote slot name 1`] = `
-"import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
const n1 = _createComponentWithFallback(_component_Comp, null, {
- "nav-bar-title-before": _withVaporCtx(() => {
+ "nav-bar-title-before": () => {
return null
- })
+ }
}, true)
return n1
}"
`;
exports[`compiler: transform slot > slot prop alias uses original key 1`] = `
-"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" ")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
const n2 = _createComponentWithFallback(_component_Comp, null, {
- "default": _withVaporCtx((_slotProps0) => {
+ "default": (_slotProps0) => {
const n0 = t0()
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0.msg)))
return n0
- })
+ }
}, true)
return n2
}"
`;
exports[`compiler: transform slot > slot prop array rest destructuring 1`] = `
-"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" ")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
const n2 = _createComponentWithFallback(_component_Comp, null, {
- "default": _withVaporCtx((_slotProps0) => {
+ "default": (_slotProps0) => {
const n0 = t0()
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0.arr.slice(1)[0])))
return n0
- })
+ }
}, true)
return n2
}"
`;
exports[`compiler: transform slot > slot prop computed key destructuring 1`] = `
-"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" ")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
const n2 = _createComponentWithFallback(_component_Comp, null, {
- "default": _withVaporCtx((_slotProps0) => {
+ "default": (_slotProps0) => {
const n0 = t0()
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0[_ctx.key])))
return n0
- })
+ }
}, true)
return n2
}"
`;
exports[`compiler: transform slot > slot prop default value 1`] = `
-"import { resolveComponent as _resolveComponent, getDefaultValue as _getDefaultValue, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, getDefaultValue as _getDefaultValue, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" ")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
const n2 = _createComponentWithFallback(_component_Comp, null, {
- "default": _withVaporCtx((_slotProps0) => {
+ "default": (_slotProps0) => {
const n0 = t0()
_renderEffect(() => _setText(n0, _toDisplayString(_getDefaultValue(_slotProps0.foo, 1))))
return n0
- })
+ }
}, true)
return n2
}"
`;
exports[`compiler: transform slot > slot prop nested default value 1`] = `
-"import { resolveComponent as _resolveComponent, getDefaultValue as _getDefaultValue, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, getDefaultValue as _getDefaultValue, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" ")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
const n2 = _createComponentWithFallback(_component_Comp, null, {
- "default": _withVaporCtx((_slotProps0) => {
+ "default": (_slotProps0) => {
const n0 = t0()
_renderEffect(() => _setText(n0, _toDisplayString(_getDefaultValue(_slotProps0.foo[0], 1) + _getDefaultValue(_slotProps0.baz.qux, 2))))
return n0
- })
+ }
}, true)
return n2
}"
`;
exports[`compiler: transform slot > slot prop nested destructuring 1`] = `
-"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" ")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
const n2 = _createComponentWithFallback(_component_Comp, null, {
- "default": _withVaporCtx((_slotProps0) => {
+ "default": (_slotProps0) => {
const n0 = t0()
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0.foo.bar)))
return n0
- })
+ }
}, true)
return n2
}"
`;
exports[`compiler: transform slot > slot prop rest destructuring 1`] = `
-"import { resolveComponent as _resolveComponent, getRestElement as _getRestElement, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, getRestElement as _getRestElement, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" ")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
const n2 = _createComponentWithFallback(_component_Comp, null, {
- "default": _withVaporCtx((_slotProps0) => {
+ "default": (_slotProps0) => {
const n0 = t0()
_renderEffect(() => _setText(n0, _toDisplayString(_getRestElement(_slotProps0, ["foo"]).bar)))
return n0
- })
+ }
}, true)
return n2
}"
`;
exports[`compiler: transform slot > slot prop rest with computed keys preserved 1`] = `
-"import { resolveComponent as _resolveComponent, getRestElement as _getRestElement, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, getRestElement as _getRestElement, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" ")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
const n2 = _createComponentWithFallback(_component_Comp, null, {
- "default": _withVaporCtx((_slotProps0) => {
+ "default": (_slotProps0) => {
const n0 = t0()
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0.foo + _getRestElement(_slotProps0, ["foo", _ctx.key]).other)))
return n0
- })
+ }
}, true)
return n2
}"
`;
exports[`compiler: transform slot > with whitespace: 'preserve' > implicit default slot 1`] = `
-"import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" Header ")
const t1 = _template(" ")
const t2 = _template("<p></p>")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
const n4 = _createComponentWithFallback(_component_Comp, null, {
- "header": _withVaporCtx(() => {
+ "header": () => {
const n0 = t0()
return n0
- }),
- "default": _withVaporCtx(() => {
+ },
+ "default": () => {
const n2 = t1()
const n3 = t2()
return [n2, n3]
- })
+ }
}, true)
return n4
}"
`;
exports[`compiler: transform slot > with whitespace: 'preserve' > named default slot + implicit whitespace content 1`] = `
-"import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" Header ")
const t1 = _template(" Default ")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
const n5 = _createComponentWithFallback(_component_Comp, null, {
- "header": _withVaporCtx(() => {
+ "header": () => {
const n0 = t0()
return n0
- }),
- "default": _withVaporCtx(() => {
+ },
+ "default": () => {
const n3 = t1()
return n3
- })
+ }
}, true)
return n5
}"
`;
exports[`compiler: transform slot > with whitespace: 'preserve' > should not generate whitespace only default slot 1`] = `
-"import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" Header ")
const t1 = _template(" Footer ")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
const n5 = _createComponentWithFallback(_component_Comp, null, {
- "header": _withVaporCtx(() => {
+ "header": () => {
const n0 = t0()
return n0
- }),
- "footer": _withVaporCtx(() => {
+ },
+ "footer": () => {
const n3 = t1()
return n3
+ }
+ }, true)
+ return n5
+}"
+`;
+
+exports[`compiler: transform slot > withVaporCtx optimization > slot with component inside v-for should have withVaporCtx 1`] = `
+"import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, createFor as _createFor, withVaporCtx as _withVaporCtx, template as _template } from 'vue';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+ const _component_ChildComp = _resolveComponent("ChildComp")
+ const _component_Comp = _resolveComponent("Comp")
+ const n5 = _createComponentWithFallback(_component_Comp, null, {
+ "default": _withVaporCtx(() => {
+ const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
+ const n3 = t0()
+ _setInsertionState(n3, null, true)
+ const n2 = _createComponentWithFallback(_component_ChildComp)
+ return n3
+ })
+ return n0
+ })
+ }, true)
+ return n5
+}"
+`;
+
+exports[`compiler: transform slot > withVaporCtx optimization > slot with component inside v-if should have withVaporCtx 1`] = `
+"import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, createIf as _createIf, withVaporCtx as _withVaporCtx, template as _template } from 'vue';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+ const _component_ChildComp = _resolveComponent("ChildComp")
+ const _component_Comp = _resolveComponent("Comp")
+ const n5 = _createComponentWithFallback(_component_Comp, null, {
+ "default": _withVaporCtx(() => {
+ const n0 = _createIf(() => (_ctx.show), () => {
+ const n3 = t0()
+ _setInsertionState(n3, null, true)
+ const n2 = _createComponentWithFallback(_component_ChildComp)
+ return n3
+ })
+ return n0
+ })
+ }, true)
+ return n5
+}"
+`;
+
+exports[`compiler: transform slot > withVaporCtx optimization > slot with component should have withVaporCtx 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, withVaporCtx as _withVaporCtx } from 'vue';
+
+export function render(_ctx) {
+ const _component_ChildComp = _resolveComponent("ChildComp")
+ const _component_Comp = _resolveComponent("Comp")
+ const n2 = _createComponentWithFallback(_component_Comp, null, {
+ "default": _withVaporCtx(() => {
+ const n0 = _createComponentWithFallback(_component_ChildComp)
+ return n0
+ })
+ }, true)
+ return n2
+}"
+`;
+
+exports[`compiler: transform slot > withVaporCtx optimization > slot with custom element inside v-if should have withVaporCtx 1`] = `
+"import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createPlainElement as _createPlainElement, createIf as _createIf, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n5 = _createComponentWithFallback(_component_Comp, null, {
+ "default": _withVaporCtx(() => {
+ const n0 = _createIf(() => (_ctx.show), () => {
+ const n3 = t0()
+ _setInsertionState(n3, null, true)
+ const n2 = _createPlainElement("my-element")
+ return n3
+ })
+ return n0
})
}, true)
return n5
}"
`;
+
+exports[`compiler: transform slot > withVaporCtx optimization > slot with custom element should have withVaporCtx 1`] = `
+"import { resolveComponent as _resolveComponent, createPlainElement as _createPlainElement, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n2 = _createComponentWithFallback(_component_Comp, null, {
+ "default": _withVaporCtx(() => {
+ const n0 = _createPlainElement("my-element")
+ return n0
+ })
+ }, true)
+ return n2
+}"
+`;
+
+exports[`compiler: transform slot > withVaporCtx optimization > slot with nested v-if containing component should have withVaporCtx 1`] = `
+"import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, createIf as _createIf, withVaporCtx as _withVaporCtx, template as _template } from 'vue';
+const t0 = _template("<span></span>")
+const t1 = _template("<div></div>")
+
+export function render(_ctx) {
+ const _component_ChildComp = _resolveComponent("ChildComp")
+ const _component_Comp = _resolveComponent("Comp")
+ const n8 = _createComponentWithFallback(_component_Comp, null, {
+ "default": _withVaporCtx(() => {
+ const n0 = _createIf(() => (_ctx.a), () => {
+ const n6 = t1()
+ _setInsertionState(n6, null, true)
+ const n2 = _createIf(() => (_ctx.b), () => {
+ const n5 = t0()
+ _setInsertionState(n5, null, true)
+ const n4 = _createComponentWithFallback(_component_ChildComp)
+ return n5
+ })
+ return n6
+ })
+ return n0
+ })
+ }, true)
+ return n8
+}"
+`;
+
+exports[`compiler: transform slot > withVaporCtx optimization > slot with only static elements should not have withVaporCtx 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template("<div>static content</div>")
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n2 = _createComponentWithFallback(_component_Comp, null, {
+ "default": () => {
+ const n0 = t0()
+ return n0
+ }
+ }, true)
+ return n2
+}"
+`;
+
+exports[`compiler: transform slot > withVaporCtx optimization > slot with only text interpolation should not have withVaporCtx 1`] = `
+"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template(" ")
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n2 = _createComponentWithFallback(_component_Comp, null, {
+ "default": () => {
+ const n0 = t0()
+ _renderEffect(() => _setText(n0, _toDisplayString(_ctx.message)))
+ return n0
+ }
+ }, true)
+ return n2
+}"
+`;
+
+exports[`compiler: transform slot > withVaporCtx optimization > slot with slot outlet should have withVaporCtx 1`] = `
+"import { resolveComponent as _resolveComponent, createSlot as _createSlot, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n2 = _createComponentWithFallback(_component_Comp, null, {
+ "default": _withVaporCtx(() => {
+ const n0 = _createSlot("default", null)
+ return n0
+ })
+ }, true)
+ return n2
+}"
+`;
+
+exports[`compiler: transform slot > withVaporCtx optimization > slot with v-for but no component should not have withVaporCtx 1`] = `
+"import { resolveComponent as _resolveComponent, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template("<div> </div>")
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n4 = _createComponentWithFallback(_component_Comp, null, {
+ "default": () => {
+ const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
+ const n2 = t0()
+ const x2 = _txt(n2)
+ _renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value)))
+ return n2
+ })
+ const x0 = _txt(n0)
+ _renderEffect(() => _setText(x0, _toDisplayString(_ctx.item)))
+ return n0
+ }
+ }, true)
+ return n4
+}"
+`;
+
+exports[`compiler: transform slot > withVaporCtx optimization > slot with v-if but no component should not have withVaporCtx 1`] = `
+"import { resolveComponent as _resolveComponent, createIf as _createIf, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template("<div>content</div>")
+const t1 = _template("<span>fallback</span>")
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n7 = _createComponentWithFallback(_component_Comp, null, {
+ "default": () => {
+ const n0 = _createIf(() => (_ctx.show), () => {
+ const n2 = t0()
+ return n2
+ }, () => {
+ const n4 = t1()
+ return n4
+ })
+ return n0
+ }
+ }, true)
+ return n7
+}"
+`;
)
expect(code).toMatchSnapshot()
- expect(code).contains(`"default": _withVaporCtx((_slotProps0) =>`)
+ expect(code).contains(`"default": (_slotProps0) =>`)
expect(code).contains(`_slotProps0.foo + _ctx.bar`)
expect(ir.block.dynamic.children[0].operation).toMatchObject({
)
expect(code).toMatchSnapshot()
- expect(code).contains(`"named": _withVaporCtx((_slotProps0) =>`)
+ expect(code).contains(`"named": (_slotProps0) =>`)
expect(code).contains(`_slotProps0.foo + _ctx.bar`)
expect(ir.block.dynamic.children[0].operation).toMatchObject({
)
expect(code).toMatchSnapshot()
- expect(code).contains(`fn: _withVaporCtx((_slotProps0) =>`)
+ expect(code).contains(`fn: (_slotProps0) =>`)
expect(code).contains(`_slotProps0.foo + _ctx.bar`)
expect(ir.block.dynamic.children[0].operation).toMatchObject({
)
expect(code).toMatchSnapshot()
- expect(code).contains(`"default": _withVaporCtx((_slotProps0) =>`)
+ expect(code).contains(`"default": (_slotProps0) =>`)
expect(code).contains(`_slotProps0.msg`)
})
)
expect(code).toMatchSnapshot()
- expect(code).contains(`"default": _withVaporCtx((_slotProps0) =>`)
+ expect(code).contains(`"default": (_slotProps0) =>`)
expect(code).contains(`_slotProps0.foo.bar`)
})
)
expect(code).toMatchSnapshot()
- expect(code).contains(`"default": _withVaporCtx((_slotProps0) =>`)
+ expect(code).contains(`"default": (_slotProps0) =>`)
expect(code).contains(`_slotProps0[_ctx.key]`)
})
)
expect(code).toMatchSnapshot()
- expect(code).contains(`"default": _withVaporCtx((_slotProps0) =>`)
+ expect(code).contains(`"default": (_slotProps0) =>`)
expect(code).contains(`_getRestElement(_slotProps0`)
})
)
expect(code).toMatchSnapshot()
- expect(code).contains(`"default": _withVaporCtx((_slotProps0) =>`)
+ expect(code).contains(`"default": (_slotProps0) =>`)
expect(code).contains(`_slotProps0.arr.slice(1)`)
})
)
expect(code).toMatchSnapshot()
- expect(code).contains(`"default": _withVaporCtx((_slotProps0) =>`)
+ expect(code).contains(`"default": (_slotProps0) =>`)
expect(code).contains(`_getDefaultValue(_slotProps0.foo, 1)`)
})
)
expect(code).toMatchSnapshot()
- expect(code).contains(`"default": _withVaporCtx((_slotProps0) =>`)
+ expect(code).contains(`"default": (_slotProps0) =>`)
expect(code).contains(`_getDefaultValue(_slotProps0.foo[0], 1)`)
expect(code).contains(`_getDefaultValue(_slotProps0.baz.qux, 2)`)
})
)
expect(code).toMatchSnapshot()
- expect(code).contains(`"default": _withVaporCtx((_slotProps0) =>`)
+ expect(code).contains(`"default": (_slotProps0) =>`)
expect(code).contains(`_getRestElement(_slotProps0, ["foo", _ctx.key])`)
})
expect(code).toMatchSnapshot()
expect(code).contains(`"default": _withVaporCtx((_slotProps0) =>`)
- expect(code).contains(`"default": _withVaporCtx((_slotProps1) =>`)
+ expect(code).contains(`"default": (_slotProps1) =>`)
expect(code).contains(`_slotProps0.foo + _slotProps1.bar + _ctx.baz`)
expect(code).contains(`_slotProps0.foo + _ctx.bar + _ctx.baz`)
)
expect(code).toMatchSnapshot()
- expect(code).contains(`fn: _withVaporCtx((_slotProps0) =>`)
+ expect(code).contains(`fn: (_slotProps0) =>`)
expect(code).contains(`_setText(n0, _toDisplayString(_slotProps0.bar))`)
expect(ir.block.dynamic.children[0].operation).toMatchObject({
)
expect(code).toMatchSnapshot()
- expect(code).contains(`fn: _withVaporCtx((_slotProps0) =>`)
+ expect(code).contains(`fn: (_slotProps0) =>`)
expect(ir.block.dynamic.children[0].operation).toMatchObject({
type: IRNodeTypes.CREATE_COMPONENT_NODE,
expect(code).toMatchSnapshot()
})
})
+
+ describe('withVaporCtx optimization', () => {
+ test('slot with only static elements should not have withVaporCtx', () => {
+ const { code } = compileWithSlots(`
+ <Comp>
+ <template #default>
+ <div>static content</div>
+ </template>
+ </Comp>
+ `)
+ expect(code).not.toContain('withVaporCtx')
+ expect(code).toMatchSnapshot()
+ })
+
+ test('slot with component should have withVaporCtx', () => {
+ const { code } = compileWithSlots(`
+ <Comp>
+ <template #default>
+ <ChildComp />
+ </template>
+ </Comp>
+ `)
+ expect(code).toContain('withVaporCtx')
+ expect(code).toMatchSnapshot()
+ })
+
+ test('slot with slot outlet should have withVaporCtx', () => {
+ const { code } = compileWithSlots(`
+ <Comp>
+ <template #default>
+ <slot />
+ </template>
+ </Comp>
+ `)
+ expect(code).toContain('withVaporCtx')
+ expect(code).toMatchSnapshot()
+ })
+
+ test('slot with component inside v-if should have withVaporCtx', () => {
+ const { code } = compileWithSlots(`
+ <Comp>
+ <template #default>
+ <div v-if="show">
+ <ChildComp />
+ </div>
+ </template>
+ </Comp>
+ `)
+ expect(code).toContain('withVaporCtx')
+ expect(code).toMatchSnapshot()
+ })
+
+ test('slot with component inside v-for should have withVaporCtx', () => {
+ const { code } = compileWithSlots(`
+ <Comp>
+ <template #default>
+ <div v-for="item in items">
+ <ChildComp />
+ </div>
+ </template>
+ </Comp>
+ `)
+ expect(code).toContain('withVaporCtx')
+ expect(code).toMatchSnapshot()
+ })
+
+ test('slot with nested v-if containing component should have withVaporCtx', () => {
+ const { code } = compileWithSlots(`
+ <Comp>
+ <template #default>
+ <div v-if="a">
+ <span v-if="b">
+ <ChildComp />
+ </span>
+ </div>
+ </template>
+ </Comp>
+ `)
+ expect(code).toContain('withVaporCtx')
+ expect(code).toMatchSnapshot()
+ })
+
+ test('slot with only text interpolation should not have withVaporCtx', () => {
+ const { code } = compileWithSlots(`
+ <Comp>
+ <template #default>
+ {{ message }}
+ </template>
+ </Comp>
+ `)
+ expect(code).not.toContain('withVaporCtx')
+ expect(code).toMatchSnapshot()
+ })
+
+ test('slot with v-if but no component should not have withVaporCtx', () => {
+ const { code } = compileWithSlots(`
+ <Comp>
+ <template #default>
+ <div v-if="show">content</div>
+ <span v-else>fallback</span>
+ </template>
+ </Comp>
+ `)
+ expect(code).not.toContain('withVaporCtx')
+ expect(code).toMatchSnapshot()
+ })
+
+ test('slot with v-for but no component should not have withVaporCtx', () => {
+ const { code } = compileWithSlots(`
+ <Comp>
+ <template #default>
+ <div v-for="item in items">{{ item }}</div>
+ </template>
+ </Comp>
+ `)
+ expect(code).not.toContain('withVaporCtx')
+ expect(code).toMatchSnapshot()
+ })
+
+ test('slot with custom element should have withVaporCtx', () => {
+ const { code } = compileWithSlots(
+ `
+ <Comp>
+ <template #default>
+ <my-element></my-element>
+ </template>
+ </Comp>
+ `,
+ {
+ isCustomElement: tag => tag.startsWith('my-'),
+ },
+ )
+ expect(code).toContain('withVaporCtx')
+ expect(code).toMatchSnapshot()
+ })
+
+ test('slot with custom element inside v-if should have withVaporCtx', () => {
+ const { code } = compileWithSlots(
+ `
+ <Comp>
+ <template #default>
+ <div v-if="show">
+ <my-element></my-element>
+ </div>
+ </template>
+ </Comp>
+ `,
+ {
+ isCustomElement: tag => tag.startsWith('my-'),
+ },
+ )
+ expect(code).toContain('withVaporCtx')
+ expect(code).toMatchSnapshot()
+ })
+ })
})
import { camelize, extend, getModifierPropName, isArray } from '@vue/shared'
import type { CodegenContext } from '../generate'
import {
+ type BlockIRNode,
type CreateComponentIRNode,
+ type ForIRNode,
+ type IRDynamicInfo,
IRDynamicPropsKind,
+ IRNodeTypes,
type IRProp,
type IRProps,
type IRPropsStatic,
IRSlotType,
type IRSlots,
type IRSlotsStatic,
+ type IfIRNode,
+ type OperationNode,
type SlotBlockIRNode,
} from '../ir'
import {
parseValueDestructure,
} from './for'
import { genModelHandler } from './vModel'
-import { isBuiltInComponent, isKeepAliveTag } from '../utils'
+import { isBuiltInComponent } from '../utils'
export function genCreateComponent(
operation: CreateComponentIRNode,
]
}
- if (node.type === NodeTypes.ELEMENT && !isKeepAliveTag(node.tag)) {
- // wrap with withVaporCtx to ensure correct currentInstance inside slot
- blockFn = [`${context.helper('withVaporCtx')}(`, ...blockFn, `)`]
+ if (node.type === NodeTypes.ELEMENT) {
+ // wrap with withVaporCtx to track slot owner for:
+ // 1. createSlot to get correct rawSlots in forwarded slots
+ // 2. scopeId inheritance for components created inside slots
+ // Skip if slot content has no components or slot outlets
+ if (needsVaporCtx(oper)) {
+ blockFn = [`${context.helper('withVaporCtx')}(`, ...blockFn, `)`]
+ }
}
return blockFn
}
+
+/**
+ * Check if a slot block needs withVaporCtx wrapper.
+ * Returns true if the block contains:
+ * - Component creation (needs scopeId inheritance)
+ * - Slot outlet (needs rawSlots from slot owner)
+ */
+function needsVaporCtx(block: BlockIRNode): boolean {
+ return hasComponentOrSlotInBlock(block)
+}
+
+function hasComponentOrSlotInBlock(block: BlockIRNode): boolean {
+ // Check operations array
+ if (hasComponentOrSlotInOperations(block.operation)) return true
+ // Check dynamic children (components are often stored here)
+ return hasComponentOrSlotInDynamic(block.dynamic)
+}
+
+function hasComponentOrSlotInDynamic(dynamic: IRDynamicInfo): boolean {
+ // Check operation in this dynamic node
+ if (dynamic.operation) {
+ const type = dynamic.operation.type
+ if (
+ type === IRNodeTypes.CREATE_COMPONENT_NODE ||
+ type === IRNodeTypes.SLOT_OUTLET_NODE
+ ) {
+ return true
+ }
+ if (type === IRNodeTypes.IF) {
+ if (hasComponentOrSlotInIf(dynamic.operation as IfIRNode)) return true
+ }
+ if (type === IRNodeTypes.FOR) {
+ if (hasComponentOrSlotInBlock((dynamic.operation as ForIRNode).render))
+ return true
+ }
+ }
+ // Recursively check children
+ for (const child of dynamic.children) {
+ if (hasComponentOrSlotInDynamic(child)) return true
+ }
+ return false
+}
+
+function hasComponentOrSlotInOperations(operations: OperationNode[]): boolean {
+ for (const op of operations) {
+ switch (op.type) {
+ case IRNodeTypes.CREATE_COMPONENT_NODE:
+ case IRNodeTypes.SLOT_OUTLET_NODE:
+ return true
+ case IRNodeTypes.IF:
+ if (hasComponentOrSlotInIf(op as IfIRNode)) return true
+ break
+ case IRNodeTypes.FOR:
+ if (hasComponentOrSlotInBlock((op as ForIRNode).render)) return true
+ break
+ }
+ }
+ return false
+}
+
+function hasComponentOrSlotInIf(node: IfIRNode): boolean {
+ if (hasComponentOrSlotInBlock(node.positive)) return true
+ if (node.negative) {
+ if ('positive' in node.negative) {
+ // nested IfIRNode
+ return hasComponentOrSlotInIf(node.negative as IfIRNode)
+ } else {
+ // BlockIRNode
+ return hasComponentOrSlotInBlock(node.negative as BlockIRNode)
+ }
+ }
+ return false
+}
setDynamicProps,
setText,
template,
- withVaporCtx,
} from '../src'
import { nextTick, reactive, ref, watchEffect } from '@vue/runtime-dom'
import { makeRender } from './_utils'
inheritAttrs: false,
setup(_: any, { attrs }: any) {
const n0 = createComponent(Wrapper, null, {
- default: withVaporCtx(() => {
+ default: () => {
const n0 = template('<div>')() as HTMLDivElement
renderEffect(() => setDynamicProps(n0, [attrs]))
return n0
- }),
+ },
})
return n0
},
setProp,
setStyle,
template,
- withVaporCtx,
} from '../src'
import { makeRender } from './_utils'
import { stringifyStyle } from '@vue/shared'
() => 'button',
null,
{
- default: withVaporCtx(() => {
+ default: () => {
const n0 = createSlot('default', null)
return n0
- }),
+ },
},
true,
)
const { host } = define(() => {
return createComponent(Comp, null, {
- header: withVaporCtx(() => template('header')()),
+ header: () => template('header')(),
})
}).render()
)
define(() =>
createComponent(Comp, null, {
- default: withVaporCtx((_props: any) => ((props = _props), [])),
+ default: (_props: any) => ((props = _props), []),
}),
).render()
)
define(() =>
createComponent(Comp, null, {
- default: withVaporCtx((_props: any) => ((props = _props), [])),
+ default: (_props: any) => ((props = _props), []),
}),
).render()
$: [
() => ({
name: 'header',
- fn: withVaporCtx((props: any) => {
+ fn: (props: any) => {
const el = template('<h1></h1>')()
renderEffect(() => {
setElementText(el, props.title)
})
return el
- }),
+ },
}),
],
})
const { host } = define(() => {
return createComponent(Comp, null, {
- header: withVaporCtx(() => template('header')()),
- footer: withVaporCtx(() => template('footer')()),
+ header: () => template('header')(),
+ footer: () => template('footer')(),
})
}).render()
flag1.value
? {
name: 'one',
- fn: withVaporCtx(() => template('one content')()),
+ fn: () => template('one content')(),
}
: {
name: 'two',
- fn: withVaporCtx(() => template('two content')()),
+ fn: () => template('two content')(),
},
],
})
Child,
{},
{
- one: withVaporCtx(() => template('one content')()),
- two: withVaporCtx(() => template('two content')()),
+ one: () => template('one content')(),
+ two: () => template('two content')(),
},
)
}).render()
const { html } = define({
setup() {
return createComponent(Child, null, {
- default: withVaporCtx(() => {
+ default: () => {
return createIf(
() => toggle.value,
() => {
return document.createTextNode('content')
},
)
- }),
+ },
})
},
}).render()
const { html } = define({
setup() {
return createComponent(Child, null, {
- default: withVaporCtx(() => {
+ default: () => {
return createIf(
() => toggle.value,
() => {
return document.createTextNode('content')
},
)
- }),
+ },
})
},
}).render()
(toggle.value
? {
name: val.value,
- fn: withVaporCtx(() => {
+ fn: () => {
return template('<h1></h1>')()
- }),
+ },
}
: void 0) as DynamicSlot,
],
const { html } = define({
setup() {
return createComponent(Child, null, {
- default: withVaporCtx(() => {
+ default: () => {
return template('<!--comment-->')()
- }),
+ },
})
},
}).render()
const { html } = define({
setup() {
return createComponent(Child, null, {
- default: withVaporCtx(() => {
+ default: () => {
return createIf(
() => toggle.value,
() => {
return document.createTextNode('content')
},
)
- }),
+ },
})
},
}).render()
const { html } = define({
setup() {
return createComponent(Child, null, {
- default: withVaporCtx(() => {
+ default: () => {
return createIf(
() => outerShow.value,
() => {
)
},
)
- }),
+ },
})
},
}).render()
const { html } = define({
setup() {
return createComponent(Child, null, {
- default: withVaporCtx(() => {
+ default: () => {
const n2 = createFor(
() => items.value,
for_item0 => {
},
)
return n2
- }),
+ },
})
},
}).render()
const { html } = define({
setup() {
return createComponent(Child, null, {
- default: withVaporCtx(() => {
+ default: () => {
const n2 = createFor(
() => items.value,
for_item0 => {
},
)
return n2
- }),
+ },
})
},
}).render()
const { html } = define({
setup() {
return createComponent(Child, null, {
- default: withVaporCtx(() => {
+ default: () => {
const n3 = template('<div> </div>')() as any
const x3 = txt(n3) as any
renderEffect(() => setText(x3, toDisplayString(count.value)))
return n3
- }),
+ },
})
},
}).render()
Parent,
null,
{
- foo: withVaporCtx(() => {
+ foo: () => {
const n0 = template(' ')() as any
renderEffect(() => setText(n0, foo.value))
return n0
- }),
+ },
},
true,
)
Parent,
null,
{
- foo: withVaporCtx(() => {
+ foo: () => {
const n0 = template(' ')() as any
renderEffect(() => setText(n0, foo.value))
return n0
- }),
- default: withVaporCtx(() => {
+ },
+ default: () => {
const n3 = template(' ')() as any
renderEffect(() => setText(n3, foo.value))
return n3
- }),
+ },
},
true,
)
const { html } = define({
setup() {
return createComponent(Parent, null, {
- default: withVaporCtx(() => template('<!-- <div>App</div> -->')()),
+ default: () => template('<!-- <div>App</div> -->')(),
})
},
}).render()
const { html } = define({
setup() {
return createComponent(Parent, null, {
- default: withVaporCtx(() => template('<!-- <div>App</div> -->')()),
+ default: () => template('<!-- <div>App</div> -->')(),
})
},
}).render()
const { html } = define({
setup() {
return createComponent(Child, null, {
- default: withVaporCtx(() => template('default')()),
- foo: withVaporCtx(() => template('foo')()),
+ default: () => template('default')(),
+ foo: () => template('foo')(),
})
},
}).render()
createComponent as createComp,
createComponent,
} from '../../src/component'
-import { withVaporCtx } from '../../src'
import {
type VaporDirective,
VaporTeleport,
VaporTeleport,
{ to: () => svg.value },
{
- default: withVaporCtx(() => {
+ default: () => {
const n3 = template('<circle></circle>', false, 1)() as any
_setTemplateRef(n3, circle, undefined, undefined, 'circle')
return n3
- }),
+ },
},
)
return n4
return createPlainElement('my-parent', null, {
default: withVaporCtx(() =>
createPlainElement('my-child', null, {
- default: withVaporCtx(() => template('<span>default</span>')()),
+ default: () => template('<span>default</span>')(),
}),
),
})
return createPlainElement('my-el-teleport-parent', null, {
default: withVaporCtx(() =>
createPlainElement('my-el-teleport-child', null, {
- default: withVaporCtx(() => template('<span>default</span>')()),
+ default: () => template('<span>default</span>')(),
}),
),
})
const App = {
setup() {
return createPlainElement('my-el-two-teleport-child', null, {
- default: withVaporCtx(() => [
+ default: () => [
template('<div slot="header">header</div>')(),
template('<span slot="body">body</span>')(),
- ]),
+ ],
})
},
}
const App = {
setup() {
return createPlainElement('my-el-two-teleport-child-0', null, {
- default: withVaporCtx(() => [
+ default: () => [
template('<div slot="header">header</div>')(),
template('<span slot="body">body</span>')(),
- ]),
+ ],
})
},
}
const ChildWrapper = {
setup() {
return createPlainElement('my-el-child-shadow-false', null, {
- default: withVaporCtx(() => template('child')()),
+ default: () => template('child')(),
})
},
}
insert,
renderEffect,
template,
- withVaporCtx,
} from '../../src'
import { compile, makeRender, runtimeDom, runtimeVapor } from '../_utils'
import {
render() {
const setRef = createTemplateRefSetter()
const n0 = createComponent(Child, null, {
- default: withVaporCtx(() => {
+ default: () => {
n = document.createElement('div')
setRef(n, 'foo')
return n
- }),
+ },
})
return n0
},
setup() {
const setRef = createTemplateRefSetter()
const n0 = createComponent(Child, null, {
- default: withVaporCtx(() => {
+ default: () => {
n = document.createElement('div')
setRef(n, r)
return n
- }),
+ },
})
return n0
},
r = useTemplateRef('foo')
const setRef = createTemplateRefSetter()
const n0 = createComponent(Child, null, {
- default: withVaporCtx(() => {
+ default: () => {
n = document.createElement('div')
setRef(n, 'foo')
return n
- }),
+ },
})
return n0
},
setStyle,
template,
useVaporCssVars,
- withVaporCtx,
} from '@vue/runtime-vapor'
import { nextTick, onMounted, reactive, ref } from '@vue/runtime-core'
import { makeRender } from '../_utils'
VaporTeleport,
{ to: () => target },
{
- default: withVaporCtx(() => {
+ default: () => {
const n0 = template('<div></div>', true)()
const n1 = createIf(
() => toggle.value,
() => template('<div></div>', true)(),
)
return [n0, n1]
- }),
+ },
},
)
},
VaporTeleport,
{ to: () => target, disabled: () => true },
{
- default: withVaporCtx(() => template('<div></div>', true)()),
+ default: () => template('<div></div>', true)(),
},
)
},
Slotted,
null,
{
- default: withVaporCtx(() => {
+ default: () => {
return template('<div root></div>')()
- }),
+ },
},
true,
)
projects / thirdparty / vuejs / core.git / commitdiff
