item
", true)
+
+export function render(_ctx) {
+ const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
+ const n2 = t0()
+ return n2
+ })
+ return n0
+}"
+`;
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap
new file mode 100644
index 00000000000..f78e395a75a
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap
@@ -0,0 +1,44 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`v-html > should convert v-html to innerHTML 1`] = `
+"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx, $props, $emit, $attrs, $slots) {
+ const n0 = t0()
+ _renderEffect(() => _setHtml(n0, _ctx.code))
+ return n0
+}"
+`;
+
+exports[`v-html > should raise error and ignore children when v-html is present 1`] = `
+"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setHtml(n0, _ctx.test))
+ return n0
+}"
+`;
+
+exports[`v-html > should raise error if has no expression 1`] = `
+"import { setHtml as _setHtml, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _setHtml(n0, "")
+ return n0
+}"
+`;
+
+exports[`v-html > work with dynamic component 1`] = `
+"import { createDynamicComponent as _createDynamicComponent, setHtml as _setHtml, renderEffect as _renderEffect } from 'vue';
+
+export function render(_ctx) {
+ const n0 = _createDynamicComponent(() => ('button'), null, null, true)
+ _renderEffect(() => _setHtml(n0.nodes, _ctx.foo))
+ return n0
+}"
+`;
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
new file mode 100644
index 00000000000..c60ae16be05
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
@@ -0,0 +1,162 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: v-if > basic v-if 1`] = `
+"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
+const t0 = _template("hello
")
+
+export function render(_ctx) {
+ const n0 = _createIf(() => (_ctx.ok), () => {
+ const n2 = t0()
+ return n2
+ })
+ const n3 = _createIf(() => (_ctx.ok), () => {
+ const n5 = t0()
+ return n5
+ })
+ return [n0, n3]
+}"
+`;
+
+exports[`compiler: v-if > template v-if 1`] = `
+"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
+const t0 = _template("")
+const t1 = _template("hello")
+const t2 = _template("", true) + +export function render(_ctx) { + const n0 = _createIf(() => (_ctx.ok), () => { + const n2 = t0() + const n3 = t1() + const n4 = t2() + const x4 = _txt(n4) + _renderEffect(() => _setText(x4, _toDisplayString(_ctx.msg))) + return [n2, n3, n4] + }) + return n0 +}" +`; + +exports[`compiler: v-if > v-if + v-else 1`] = ` +"import { createIf as _createIf, template as _template } from 'vue'; +const t0 = _template("") +const t1 = _template("") + +export function render(_ctx) { + const n0 = _createIf(() => (_ctx.ok), () => { + const n2 = t0() + return n2 + }, () => { + const n4 = t1() + return n4 + }) + return n0 +}" +`; + +exports[`compiler: v-if > v-if + v-else-if + v-else 1`] = ` +"import { createIf as _createIf, template as _template } from 'vue'; +const t0 = _template("") +const t1 = _template("") +const t2 = _template("fine") + +export function render(_ctx) { + const n0 = _createIf(() => (_ctx.ok), () => { + const n2 = t0() + return n2 + }, () => _createIf(() => (_ctx.orNot), () => { + const n4 = t1() + return n4 + }, () => { + const n7 = t2() + return n7 + })) + return n0 +}" +`; + +exports[`compiler: v-if > v-if + v-else-if 1`] = ` +"import { createIf as _createIf, template as _template } from 'vue'; +const t0 = _template("") +const t1 = _template("") + +export function render(_ctx) { + const n0 = _createIf(() => (_ctx.ok), () => { + const n2 = t0() + return n2 + }, () => _createIf(() => (_ctx.orNot), () => { + const n4 = t1() + return n4 + })) + return n0 +}" +`; + +exports[`compiler: v-if > v-if + v-if / v-else[-if] 1`] = ` +"import { setInsertionState as _setInsertionState, createIf as _createIf, template as _template } from 'vue'; +const t0 = _template("foo") +const t1 = _template("bar") +const t2 = _template("baz") +const t3 = _template("", true) + +export function render(_ctx) { + const n8 = t3() + _setInsertionState(n8, null) + const n0 = _createIf(() => (_ctx.foo), () => { + const n2 = t0() + return n2 + }) + _setInsertionState(n8, null) + const n3 = _createIf(() => (_ctx.bar), () => { + const n5 = t1() + return n5 + }, () => { + const n7 = t2() + return n7 + }) + return n8 +}" +`; diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap new file mode 100644 index 00000000000..5ef064974c0 --- /dev/null +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap @@ -0,0 +1,242 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`compiler: vModel transform > component > v-model for component should generate modelModifiers 1`] = ` +"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue'; + +export function render(_ctx) { + const _component_Comp = _resolveComponent("Comp") + const n0 = _createComponentWithFallback(_component_Comp, { modelValue: () => (_ctx.foo), + "onUpdate:modelValue": () => _value => (_ctx.foo = _value), + modelModifiers: () => ({ trim: true, "bar-baz": true }) }, null, true) + return n0 +}" +`; + +exports[`compiler: vModel transform > component > v-model for component should work 1`] = ` +"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue'; + +export function render(_ctx) { + const _component_Comp = _resolveComponent("Comp") + const n0 = _createComponentWithFallback(_component_Comp, { modelValue: () => (_ctx.foo), + "onUpdate:modelValue": () => _value => (_ctx.foo = _value) }, null, true) + return n0 +}" +`; + +exports[`compiler: vModel transform > component > v-model with arguments for component should generate modelModifiers 1`] = ` +"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue'; + +export function render(_ctx) { + const _component_Comp = _resolveComponent("Comp") + const n0 = _createComponentWithFallback(_component_Comp, { + foo: () => (_ctx.foo), + "onUpdate:foo": () => _value => (_ctx.foo = _value), + fooModifiers: () => ({ trim: true }), + bar: () => (_ctx.bar), + "onUpdate:bar": () => _value => (_ctx.bar = _value), + barModifiers: () => ({ number: true }) + }, null, true) + return n0 +}" +`; + +exports[`compiler: vModel transform > component > v-model with arguments for component should work 1`] = ` +"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue'; + +export function render(_ctx) { + const _component_Comp = _resolveComponent("Comp") + const n0 = _createComponentWithFallback(_component_Comp, { bar: () => (_ctx.foo), + "onUpdate:bar": () => _value => (_ctx.foo = _value) }, null, true) + return n0 +}" +`; + +exports[`compiler: vModel transform > component > v-model with dynamic arguments for component should generate modelModifiers 1`] = ` +"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue'; + +export function render(_ctx) { + const _component_Comp = _resolveComponent("Comp") + const n0 = _createComponentWithFallback(_component_Comp, { $: [ + () => ({ [_ctx.foo]: _ctx.foo, + ["onUpdate:" + _ctx.foo]: () => _value => (_ctx.foo = _value), + [_ctx.foo + "Modifiers"]: () => ({ trim: true }) }), + () => ({ [_ctx.bar]: _ctx.bar, + ["onUpdate:" + _ctx.bar]: () => _value => (_ctx.bar = _value), + [_ctx.bar + "Modifiers"]: () => ({ number: true }) }) + ] }, null, true) + return n0 +}" +`; + +exports[`compiler: vModel transform > component > v-model with dynamic arguments for component should work 1`] = ` +"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue'; + +export function render(_ctx) { + const _component_Comp = _resolveComponent("Comp") + const n0 = _createComponentWithFallback(_component_Comp, { $: [ + () => ({ [_ctx.arg]: _ctx.foo, + ["onUpdate:" + _ctx.arg]: () => _value => (_ctx.foo = _value) }) + ] }, null, true) + return n0 +}" +`; + +exports[`compiler: vModel transform > modifiers > .lazy 1`] = ` +"import { applyTextModel as _applyTextModel, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _applyTextModel(n0, () => (_ctx.model), _value => (_ctx.model = _value), { lazy: true }) + return n0 +}" +`; + +exports[`compiler: vModel transform > modifiers > .number 1`] = ` +"import { applyTextModel as _applyTextModel, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _applyTextModel(n0, () => (_ctx.model), _value => (_ctx.model = _value), { number: true }) + return n0 +}" +`; + +exports[`compiler: vModel transform > modifiers > .trim 1`] = ` +"import { applyTextModel as _applyTextModel, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _applyTextModel(n0, () => (_ctx.model), _value => (_ctx.model = _value), { trim: true }) + return n0 +}" +`; + +exports[`compiler: vModel transform > should support input (checkbox) 1`] = ` +"import { applyCheckboxModel as _applyCheckboxModel, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _applyCheckboxModel(n0, () => (_ctx.model), _value => (_ctx.model = _value)) + return n0 +}" +`; + +exports[`compiler: vModel transform > should support input (dynamic type) 1`] = ` +"import { applyDynamicModel as _applyDynamicModel, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _applyDynamicModel(n0, () => (_ctx.model), _value => (_ctx.model = _value)) + return n0 +}" +`; + +exports[`compiler: vModel transform > should support input (radio) 1`] = ` +"import { applyRadioModel as _applyRadioModel, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _applyRadioModel(n0, () => (_ctx.model), _value => (_ctx.model = _value)) + return n0 +}" +`; + +exports[`compiler: vModel transform > should support input (text) 1`] = ` +"import { applyTextModel as _applyTextModel, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _applyTextModel(n0, () => (_ctx.model), _value => (_ctx.model = _value)) + return n0 +}" +`; + +exports[`compiler: vModel transform > should support member expression 1`] = ` +"import { applyTextModel as _applyTextModel, template as _template } from 'vue'; +const t0 = _template("") + +export function render(_ctx, $props, $emit, $attrs, $slots) { + const n0 = t0() + const n1 = t0() + const n2 = t0() + _applyTextModel(n0, () => (_ctx.setupRef.child), _value => (_ctx.setupRef.child = _value)) + _applyTextModel(n1, () => (_ctx.setupLet.child), _value => (_ctx.setupLet.child = _value)) + _applyTextModel(n2, () => (_ctx.setupMaybeRef.child), _value => (_ctx.setupMaybeRef.child = _value)) + return [n0, n1, n2] +}" +`; + +exports[`compiler: vModel transform > should support member expression w/ inline 1`] = ` +" + const n0 = t0() + const n1 = t0() + const n2 = t0() + _applyTextModel(n0, () => (setupRef.value.child), _value => (setupRef.value.child = _value)) + _applyTextModel(n1, () => (_unref(setupLet).child), _value => (_unref(setupLet).child = _value)) + _applyTextModel(n2, () => (_unref(setupMaybeRef).child), _value => (_unref(setupMaybeRef).child = _value)) + return [n0, n1, n2] +" +`; + +exports[`compiler: vModel transform > should support select 1`] = ` +"import { applySelectModel as _applySelectModel, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _applySelectModel(n0, () => (_ctx.model), _value => (_ctx.model = _value)) + return n0 +}" +`; + +exports[`compiler: vModel transform > should support simple expression 1`] = ` +"import { applyTextModel as _applyTextModel, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _applyTextModel(n0, () => (_ctx.model), _value => (_ctx.model = _value)) + return n0 +}" +`; + +exports[`compiler: vModel transform > should support textarea 1`] = ` +"import { applyTextModel as _applyTextModel, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _applyTextModel(n0, () => (_ctx.model), _value => (_ctx.model = _value)) + return n0 +}" +`; + +exports[`compiler: vModel transform > should support w/ dynamic v-bind 1`] = ` +"import { applyDynamicModel as _applyDynamicModel, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _applyDynamicModel(n0, () => (_ctx.model), _value => (_ctx.model = _value)) + _renderEffect(() => _setDynamicProps(n0, [_ctx.obj], true)) + return n0 +}" +`; + +exports[`compiler: vModel transform > should support w/ dynamic v-bind 2`] = ` +"import { applyDynamicModel as _applyDynamicModel, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _applyDynamicModel(n0, () => (_ctx.model), _value => (_ctx.model = _value)) + return n0 +}" +`; diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap new file mode 100644 index 00000000000..e7a2b30e69c --- /dev/null +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap @@ -0,0 +1,487 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`v-on > complex member expression w/ prefixIdentifiers: true 1`] = ` +"import { delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click") + +export function render(_ctx) { + const n0 = t0() + n0.$evtclick = e => _ctx.a['b' + _ctx.c](e) + return n0 +}" +`; + +exports[`v-on > component event with special characters 1`] = ` +"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue'; + +export function render(_ctx) { + const _component_Foo = _resolveComponent("Foo") + const _on_update_model = () => {} + const _on_update_model1 = () => {} + const n0 = _createComponentWithFallback(_component_Foo, { + "onUpdate:model": () => _on_update_model, + "onUpdate-model": () => _on_update_model1 + }, null, true) + return n0 +}" +`; + +exports[`v-on > dynamic arg 1`] = ` +"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _renderEffect(() => { + + _on(n0, _ctx.event, e => _ctx.handler(e), { + effect: true + }) + }) + return n0 +}" +`; + +exports[`v-on > dynamic arg with complex exp prefixing 1`] = ` +"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _renderEffect(() => { + + _on(n0, _ctx.event(_ctx.foo), e => _ctx.handler(e), { + effect: true + }) + }) + return n0 +}" +`; + +exports[`v-on > dynamic arg with prefixing 1`] = ` +"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _renderEffect(() => { + + _on(n0, _ctx.event, e => _ctx.handler(e), { + effect: true + }) + }) + return n0 +}" +`; + +exports[`v-on > event modifier 1`] = ` +"import { withModifiers as _withModifiers, on as _on, withKeys as _withKeys, delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("") +const t1 = _template("") +const t2 = _template("") +const t3 = _template("") +_delegateEvents("click", "contextmenu", "mouseup", "keyup") + +export function render(_ctx, $props, $emit, $attrs, $slots) { + const n0 = t0() + const n1 = t1() + const n2 = t0() + const n3 = t2() + const n4 = t2() + const n5 = t0() + const n6 = t2() + const n7 = t3() + const n8 = t3() + const n9 = t3() + const n10 = t3() + const n11 = t3() + const n12 = t3() + const n13 = t3() + const n14 = t3() + const n15 = t3() + const n16 = t3() + const n17 = t3() + const n18 = t3() + const n19 = t3() + const n20 = t3() + const n21 = t3() + n0.$evtclick = _withModifiers(_ctx.handleEvent, ["stop"]) + _on(n1, "submit", _withModifiers(_ctx.handleEvent, ["prevent"])) + n2.$evtclick = _withModifiers(_ctx.handleEvent, ["stop","prevent"]) + n3.$evtclick = _withModifiers(_ctx.handleEvent, ["self"]) + _on(n4, "click", _ctx.handleEvent, { + capture: true + }) + _on(n5, "click", _ctx.handleEvent, { + once: true + }) + _on(n6, "scroll", _ctx.handleEvent, { + passive: true + }) + n7.$evtcontextmenu = _withModifiers(_ctx.handleEvent, ["right"]) + n8.$evtclick = _withModifiers(_ctx.handleEvent, ["left"]) + n9.$evtmouseup = _withModifiers(_ctx.handleEvent, ["middle"]) + n10.$evtcontextmenu = _withKeys(_withModifiers(_ctx.handleEvent, ["right"]), ["enter"]) + n11.$evtkeyup = _withKeys(_ctx.handleEvent, ["enter"]) + n12.$evtkeyup = _withKeys(_ctx.handleEvent, ["tab"]) + n13.$evtkeyup = _withKeys(_ctx.handleEvent, ["delete"]) + n14.$evtkeyup = _withKeys(_ctx.handleEvent, ["esc"]) + n15.$evtkeyup = _withKeys(_ctx.handleEvent, ["space"]) + n16.$evtkeyup = _withKeys(_ctx.handleEvent, ["up"]) + n17.$evtkeyup = _withKeys(_ctx.handleEvent, ["down"]) + n18.$evtkeyup = _withKeys(_ctx.handleEvent, ["left"]) + n19.$evtkeyup = _withModifiers(e => _ctx.submit(e), ["middle"]) + n20.$evtkeyup = _withModifiers(e => _ctx.submit(e), ["middle","self"]) + n21.$evtkeyup = _withKeys(_withModifiers(_ctx.handleEvent, ["self"]), ["enter"]) + return [n0, n1, n2, n3, n4, n5, n6, n7, n8, n9, n10, n11, n12, n13, n14, n15, n16, n17, n18, n19, n20, n21] +}" +`; + +exports[`v-on > expression with type 1`] = ` +"import { delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click") + +export function render(_ctx, $props, $emit, $attrs, $slots) { + const n0 = t0() + n0.$evtclick = e => _ctx.handleClick(e) + return n0 +}" +`; + +exports[`v-on > function expression w/ prefixIdentifiers: true 1`] = ` +"import { delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click") + +export function render(_ctx) { + const n0 = t0() + n0.$evtclick = e => _ctx.foo(e) + return n0 +}" +`; + +exports[`v-on > inline statement w/ prefixIdentifiers: true 1`] = ` +"import { delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click") + +export function render(_ctx) { + const n0 = t0() + n0.$evtclick = $event => (_ctx.foo($event)) + return n0 +}" +`; + +exports[`v-on > multiple inline statements w/ prefixIdentifiers: true 1`] = ` +"import { delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click") + +export function render(_ctx) { + const n0 = t0() + n0.$evtclick = $event => {_ctx.foo($event);_ctx.bar()} + return n0 +}" +`; + +exports[`v-on > should NOT add a prefix to $event if the expression is a function expression 1`] = ` +"import { delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click") + +export function render(_ctx) { + const n0 = t0() + n0.$evtclick = $event => {_ctx.i++;_ctx.foo($event)} + return n0 +}" +`; + +exports[`v-on > should NOT wrap as function if expression is already function expression (with Typescript) 1`] = ` +"import { delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click") + +export function render(_ctx) { + const n0 = t0() + n0.$evtclick = (e: any): any => _ctx.foo(e) + return n0 +}" +`; + +exports[`v-on > should NOT wrap as function if expression is already function expression (with newlines) 1`] = ` +"import { delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click") + +export function render(_ctx) { + const n0 = t0() + n0.$evtclick = + $event => { + _ctx.foo($event) + } + + return n0 +}" +`; + +exports[`v-on > should NOT wrap as function if expression is already function expression 1`] = ` +"import { delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click") + +export function render(_ctx) { + const n0 = t0() + n0.$evtclick = $event => _ctx.foo($event) + return n0 +}" +`; + +exports[`v-on > should NOT wrap as function if expression is complex member expression 1`] = ` +"import { delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click") + +export function render(_ctx) { + const n0 = t0() + n0.$evtclick = e => _ctx.a['b' + _ctx.c](e) + return n0 +}" +`; + +exports[`v-on > should delegate event 1`] = ` +"import { delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click") + +export function render(_ctx) { + const n0 = t0() + n0.$evtclick = e => _ctx.test(e) + return n0 +}" +`; + +exports[`v-on > should handle multi-line statement 1`] = ` +"import { delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click") + +export function render(_ctx) { + const n0 = t0() + n0.$evtclick = () => { +_ctx.foo(); +_ctx.bar() +} + return n0 +}" +`; + +exports[`v-on > should handle multiple inline statement 1`] = ` +"import { delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click") + +export function render(_ctx) { + const n0 = t0() + n0.$evtclick = () => {_ctx.foo();_ctx.bar()} + return n0 +}" +`; + +exports[`v-on > should not prefix member expression 1`] = ` +"import { delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click") + +export function render(_ctx) { + const n0 = t0() + n0.$evtclick = e => _ctx.foo.bar(e) + return n0 +}" +`; + +exports[`v-on > should not wrap keys guard if no key modifier is present 1`] = ` +"import { withModifiers as _withModifiers, delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("keyup") + +export function render(_ctx) { + const n0 = t0() + n0.$evtkeyup = _withModifiers(e => _ctx.test(e), ["exact"]) + return n0 +}" +`; + +exports[`v-on > should support multiple events and modifiers options w/ prefixIdentifiers: true 1`] = ` +"import { withModifiers as _withModifiers, withKeys as _withKeys, delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click", "keyup") + +export function render(_ctx) { + const n0 = t0() + n0.$evtclick = _withModifiers(e => _ctx.test(e), ["stop"]) + n0.$evtkeyup = _withKeys(e => _ctx.test(e), ["enter"]) + return n0 +}" +`; + +exports[`v-on > should support multiple modifiers and event options w/ prefixIdentifiers: true 1`] = ` +"import { withModifiers as _withModifiers, on as _on, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _on(n0, "click", _withModifiers(e => _ctx.test(e), ["stop","prevent"]), { + capture: true, + once: true + }) + return n0 +}" +`; + +exports[`v-on > should transform click.middle 1`] = ` +"import { withModifiers as _withModifiers, delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("mouseup") + +export function render(_ctx) { + const n0 = t0() + n0.$evtmouseup = _withModifiers(e => _ctx.test(e), ["middle"]) + return n0 +}" +`; + +exports[`v-on > should transform click.middle 2`] = ` +"import { withModifiers as _withModifiers, on as _on, renderEffect as _renderEffect, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _renderEffect(() => { + + _on(n0, (_ctx.event) === "click" ? "mouseup" : (_ctx.event), _withModifiers(e => _ctx.test(e), ["middle"]), { + effect: true + }) + }) + return n0 +}" +`; + +exports[`v-on > should transform click.right 1`] = ` +"import { withModifiers as _withModifiers, delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("contextmenu") + +export function render(_ctx) { + const n0 = t0() + n0.$evtcontextmenu = _withModifiers(e => _ctx.test(e), ["right"]) + return n0 +}" +`; + +exports[`v-on > should transform click.right 2`] = ` +"import { withModifiers as _withModifiers, withKeys as _withKeys, on as _on, renderEffect as _renderEffect, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _renderEffect(() => { + + _on(n0, (_ctx.event) === "click" ? "contextmenu" : (_ctx.event), _withKeys(_withModifiers(e => _ctx.test(e), ["right"]), ["right"]), { + effect: true + }) + }) + return n0 +}" +`; + +exports[`v-on > should use delegate helper when have multiple events of same name 1`] = ` +"import { delegate as _delegate, withModifiers as _withModifiers, delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click") + +export function render(_ctx) { + const n0 = t0() + _delegate(n0, "click", e => _ctx.test(e)) + _delegate(n0, "click", _withModifiers(e => _ctx.test(e), ["stop"])) + return n0 +}" +`; + +exports[`v-on > should wrap as function if expression is inline statement 1`] = ` +"import { delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click") + +export function render(_ctx) { + const n0 = t0() + n0.$evtclick = () => (_ctx.i++) + return n0 +}" +`; + +exports[`v-on > should wrap both for dynamic key event w/ left/right modifiers 1`] = ` +"import { withModifiers as _withModifiers, withKeys as _withKeys, on as _on, renderEffect as _renderEffect, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _renderEffect(() => { + + _on(n0, _ctx.e, _withKeys(_withModifiers(e => _ctx.test(e), ["left"]), ["left"]), { + effect: true + }) + }) + return n0 +}" +`; + +exports[`v-on > should wrap in unref if identifier is setup-maybe-ref w/ inline: true 1`] = ` +" + const n0 = t0() + const n1 = t0() + const n2 = t0() + n0.$evtclick = () => (x.value=_unref(y)) + n1.$evtclick = () => (x.value++) + n2.$evtclick = () => ({ x: x.value } = _unref(y)) + return [n0, n1, n2] +" +`; + +exports[`v-on > should wrap keys guard for keyboard events or dynamic events 1`] = ` +"import { withModifiers as _withModifiers, withKeys as _withKeys, on as _on, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _on(n0, "keydown", _withKeys(_withModifiers(e => _ctx.test(e), ["stop","ctrl"]), ["a"]), { + capture: true + }) + return n0 +}" +`; + +exports[`v-on > should wrap keys guard for static key event w/ left/right modifiers 1`] = ` +"import { withKeys as _withKeys, delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("keyup") + +export function render(_ctx) { + const n0 = t0() + n0.$evtkeyup = _withKeys(e => _ctx.test(e), ["left"]) + return n0 +}" +`; + +exports[`v-on > simple expression 1`] = ` +"import { delegateEvents as _delegateEvents, template as _template } from 'vue'; +const t0 = _template("", true) +_delegateEvents("click") + +export function render(_ctx, $props, $emit, $attrs, $slots) { + const n0 = t0() + n0.$evtclick = _ctx.handleClick + return n0 +}" +`; diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap new file mode 100644 index 00000000000..b6107d5a1a1 --- /dev/null +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap @@ -0,0 +1,104 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`compiler: v-once > as root node 1`] = ` +"import { setProp as _setProp, template as _template } from 'vue'; +const t0 = _template("", true) + +export function render(_ctx) { + const n0 = t0() + _setProp(n0, "id", _ctx.foo) + return n0 +}" +`; + +exports[`compiler: v-once > basic 1`] = ` +"import { child as _child, next as _next, toDisplayString as _toDisplayString, setText as _setText, setClass as _setClass, template as _template } from 'vue'; +const t0 = _template("
", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ return n0
+}"
+`;
+
+exports[`compiler: v-once > on component 1`] = `
+"import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n1 = t0()
+ _setInsertionState(n1)
+ const n0 = _createComponentWithFallback(_component_Comp, { id: () => (_ctx.foo) }, null, null, true)
+ return n1
+}"
+`;
+
+exports[`compiler: v-once > on nested plain element 1`] = `
+"import { child as _child, setProp as _setProp, template as _template } from 'vue';
+const t0 = _template("
", true)
+
+export function render(_ctx) {
+ const n1 = t0()
+ const n0 = _child(n1)
+ _setProp(n0, "id", _ctx.foo)
+ return n1
+}"
+`;
+
+exports[`compiler: v-once > with v-for 1`] = `
+"import { createFor as _createFor, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
+ const n2 = t0()
+ return n2
+ }, undefined, 4)
+ return n0
+}"
+`;
+
+exports[`compiler: v-once > with v-if 1`] = `
+"import { createIf as _createIf, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = _createIf(() => (_ctx.expr), () => {
+ const n2 = t0()
+ return n2
+ }, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: v-once > with v-if/else 1`] = `
+"import { createIf as _createIf, template as _template } from 'vue';
+const t0 = _template("")
+const t1 = _template("")
+
+export function render(_ctx) {
+ const n0 = _createIf(() => (_ctx.expr), () => {
+ const n2 = t0()
+ return n2
+ }, () => {
+ const n4 = t1()
+ return n4
+ }, true)
+ return n0
+}"
+`;
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vShow.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
new file mode 100644
index 00000000000..f595da5ef8f
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: v-show transform > simple expression 1`] = `
+"import { applyVShow as _applyVShow, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _applyVShow(n0, () => (_ctx.foo))
+ return n0
+}"
+`;
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
new file mode 100644
index 00000000000..9b11f074c40
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
@@ -0,0 +1,432 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: transform slot > dynamic slots name 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template("foo")
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n2 = _createComponentWithFallback(_component_Comp, null, {
+ $: [
+ () => ({
+ name: _ctx.name,
+ fn: () => {
+ const n0 = t0()
+ return n0
+ }
+ })
+ ]
+ }, true)
+ return n2
+}"
+`;
+
+exports[`compiler: transform slot > dynamic slots name w/ v-for 1`] = `
+"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) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n2 = _createComponentWithFallback(_component_Comp, null, {
+ $: [
+ () => (_createForSlots(_ctx.list, (item) => ({
+ name: item,
+ fn: (_slotProps0) => {
+ const n0 = t0()
+ _renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["bar"])))
+ return n0
+ }
+ })))
+ ]
+ }, true)
+ return n2
+}"
+`;
+
+exports[`compiler: transform slot > dynamic slots name w/ v-for and provide absent key 1`] = `
+"import { resolveComponent as _resolveComponent, createForSlots as _createForSlots, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template("foo")
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n2 = _createComponentWithFallback(_component_Comp, null, {
+ $: [
+ () => (_createForSlots(_ctx.list, (_, __, index) => ({
+ name: index,
+ fn: () => {
+ const n0 = t0()
+ return n0
+ }
+ })))
+ ]
+ }, true)
+ return n2
+}"
+`;
+
+exports[`compiler: transform slot > dynamic slots name w/ v-if / v-else[-if] 1`] = `
+"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")
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n6 = _createComponentWithFallback(_component_Comp, null, {
+ $: [
+ () => (_ctx.condition
+ ? {
+ name: "condition",
+ fn: () => {
+ const n0 = t0()
+ return n0
+ }
+ }
+ : _ctx.anotherCondition
+ ? {
+ name: "condition",
+ fn: (_slotProps0) => {
+ const n2 = t1()
+ return n2
+ }
+ }
+ : {
+ name: "condition",
+ fn: () => {
+ const n4 = t2()
+ return n4
+ }
+ })
+ ]
+ }, true)
+ return n6
+}"
+`;
+
+exports[`compiler: transform slot > forwarded slots >
+ {{ String(foo.id++) }} {{ foo }} {{ bar }}
+
+ `)
+ expect(code).toMatchSnapshot()
+ expect(code).contains(`_String(_foo.id++)`)
+ })
+
+ test('empty interpolation', () => {
+ const { code } = compileWithExpression(`{{}}`)
+ const { code: code2 } = compileWithExpression(`{{ }}`)
+ const { code: code3 } = compileWithExpression(`{{ }}
`)
+ const { code: code4 } = compileWithExpression(`{{ foo }}{{ }}
`)
+
+ expect(code).toMatchSnapshot()
+ expect(code).not.toContain(`_toDisplayString`)
+ expect(code).not.toContain(`_setText`)
+
+ expect(code2).toMatchSnapshot()
+ expect(code2).not.toContain(`_toDisplayString`)
+ expect(code2).not.toContain(`_setText`)
+
+ expect(code3).toMatchSnapshot()
+ expect(code3).not.toContain(`_toDisplayString`)
+ expect(code3).not.toContain(`_setText`)
+
+ expect(code4).toMatchSnapshot()
+ })
+})
diff --git a/packages/compiler-vapor/__tests__/transforms/transformChildren.spec.ts b/packages/compiler-vapor/__tests__/transforms/transformChildren.spec.ts
new file mode 100644
index 00000000000..2d8ae8c960d
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/transformChildren.spec.ts
@@ -0,0 +1,76 @@
+import { makeCompile } from './_utils'
+import {
+ transformChildren,
+ transformElement,
+ transformText,
+ transformVIf,
+} from '../../src'
+
+const compileWithElementTransform = makeCompile({
+ nodeTransforms: [
+ transformText,
+ transformVIf,
+ transformElement,
+ transformChildren,
+ ],
+})
+
+describe('compiler: children transform', () => {
+ test('children & sibling references', () => {
+ const { code, helpers } = compileWithElementTransform(
+ `
+
`,
+ )
+ expect(code).toMatchSnapshot()
+ expect(Array.from(helpers)).containSubset([
+ 'child',
+ 'toDisplayString',
+ 'renderEffect',
+ 'next',
+ 'setText',
+ 'template',
+ ])
+ })
+
+ test('efficient traversal', () => {
+ const { code } = compileWithElementTransform(
+ `{{ first }}
+ {{ second }} + {{ third }} +{{ forth }}
+
+
`,
+ )
+ expect(code).toMatchSnapshot()
+ })
+
+ test('efficient find', () => {
+ const { code } = compileWithElementTransform(
+ `x
+ {{ msg }}
+ {{ msg }}
+ {{ msg }}
+
+
`,
+ )
+ expect(code).contains(`const n0 = _nthChild(n1, 2)`)
+ expect(code).toMatchSnapshot()
+ })
+
+ test('anchor insertion in middle', () => {
+ const { code } = compileWithElementTransform(
+ `x
+ x
+ {{ msg }}
+
+
+
+
+
`,
+ )
+ // ensure the insertion anchor is generated before the insertion statement
+ expect(code).toMatch(`const n3 = _next(_child(n4))`)
+ expect(code).toMatch(`_setInsertionState(n4, n3)`)
+ expect(code).toMatchSnapshot()
+ })
+})
diff --git a/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts b/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
new file mode 100644
index 00000000000..a693db4ad39
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
@@ -0,0 +1,959 @@
+import { makeCompile } from './_utils'
+import {
+ IRDynamicPropsKind,
+ IRNodeTypes,
+ transformChildren,
+ transformElement,
+ transformText,
+ transformVBind,
+ transformVFor,
+ transformVOn,
+} from '../../src'
+import {
+ type BindingMetadata,
+ BindingTypes,
+ NodeTypes,
+} from '@vue/compiler-dom'
+
+const compileWithElementTransform = makeCompile({
+ nodeTransforms: [
+ transformVFor,
+ transformElement,
+ transformChildren,
+ transformText,
+ ],
+ directiveTransforms: {
+ bind: transformVBind,
+ on: transformVOn,
+ },
+})
+
+describe('compiler: element transform', () => {
+ describe('component', () => {
+ test('import + resolve component', () => {
+ const { code, ir, helpers } = compileWithElementTransform(``,
+ )
+
+ const template = '
'
+ expect(code).toMatchSnapshot()
+ expect(code).contains(JSON.stringify(template))
+ expect(ir.template).toMatchObject([template])
+ expect(ir.block.effect).lengthOf(0)
+ })
+
+ test('v-bind="obj"', () => {
+ const { code, ir } = compileWithElementTransform(``)
+ expect(code).toMatchSnapshot()
+ expect(ir.block.effect).toMatchObject([
+ {
+ expressions: [
+ {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'obj',
+ isStatic: false,
+ },
+ ],
+ operations: [
+ {
+ type: IRNodeTypes.SET_DYNAMIC_PROPS,
+ element: 0,
+ props: [
+ {
+ kind: IRDynamicPropsKind.EXPRESSION,
+ value: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'obj',
+ isStatic: false,
+ },
+ },
+ ],
+ },
+ ],
+ },
+ ])
+ expect(code).contains('_setDynamicProps(n0, [_ctx.obj], true)')
+ })
+
+ test('v-bind="obj" after static prop', () => {
+ const { code, ir } = compileWithElementTransform(
+ ``,
+ )
+ expect(code).toMatchSnapshot()
+ expect(ir.block.effect).toMatchObject([
+ {
+ expressions: [
+ {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'obj',
+ isStatic: false,
+ },
+ ],
+ operations: [
+ {
+ type: IRNodeTypes.SET_DYNAMIC_PROPS,
+ element: 0,
+ props: [
+ [{ key: { content: 'id' }, values: [{ content: 'foo' }] }],
+ {
+ kind: IRDynamicPropsKind.EXPRESSION,
+ value: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'obj',
+ isStatic: false,
+ },
+ },
+ ],
+ },
+ ],
+ },
+ ])
+ expect(code).contains(
+ '_setDynamicProps(n0, [{ id: "foo" }, _ctx.obj], true)',
+ )
+ })
+
+ test('v-bind="obj" before static prop', () => {
+ const { code, ir } = compileWithElementTransform(
+ ``,
+ )
+ expect(code).toMatchSnapshot()
+ expect(ir.block.effect).toMatchObject([
+ {
+ expressions: [{ content: 'obj' }],
+ operations: [
+ {
+ type: IRNodeTypes.SET_DYNAMIC_PROPS,
+ element: 0,
+ props: [
+ {
+ kind: IRDynamicPropsKind.EXPRESSION,
+ value: { content: 'obj' },
+ },
+ [{ key: { content: 'id' }, values: [{ content: 'foo' }] }],
+ ],
+ },
+ ],
+ },
+ ])
+ expect(code).contains(
+ '_setDynamicProps(n0, [_ctx.obj, { id: "foo" }], true)',
+ )
+ })
+
+ test('v-bind="obj" between static props', () => {
+ const { code, ir } = compileWithElementTransform(
+ ``,
+ )
+ expect(code).toMatchSnapshot()
+ expect(ir.block.effect).toMatchObject([
+ {
+ expressions: [{ content: 'obj' }],
+ operations: [
+ {
+ type: IRNodeTypes.SET_DYNAMIC_PROPS,
+ element: 0,
+ props: [
+ [{ key: { content: 'id' }, values: [{ content: 'foo' }] }],
+ {
+ kind: IRDynamicPropsKind.EXPRESSION,
+ value: { content: 'obj' },
+ },
+ [{ key: { content: 'class' }, values: [{ content: 'bar' }] }],
+ ],
+ },
+ ],
+ },
+ ])
+ expect(code).contains(
+ '_setDynamicProps(n0, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true)',
+ )
+ })
+
+ test('props merging: event handlers', () => {
+ const { code, ir } = compileWithElementTransform(
+ ``,
+ )
+ expect(code).toMatchSnapshot()
+
+ expect(ir.block.operation).toMatchObject([
+ {
+ type: IRNodeTypes.SET_EVENT,
+ element: 0,
+ key: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'click',
+ isStatic: true,
+ },
+ value: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'a',
+ isStatic: false,
+ },
+ keyOverride: undefined,
+ delegate: true,
+ effect: false,
+ },
+ {
+ type: IRNodeTypes.SET_EVENT,
+ element: 0,
+ key: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'click',
+ isStatic: true,
+ },
+ value: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'b',
+ isStatic: false,
+ },
+ keyOverride: undefined,
+ delegate: true,
+ effect: false,
+ },
+ ])
+ })
+
+ test('props merging: style', () => {
+ const { code, ir } = compileWithElementTransform(
+ ``,
+ )
+ expect(code).toMatchSnapshot()
+
+ expect(ir.block.operation).toMatchObject([
+ {
+ type: IRNodeTypes.SET_PROP,
+ element: 0,
+ prop: {
+ key: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'style',
+ isStatic: true,
+ },
+ values: [
+ {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'color: green',
+ isStatic: true,
+ },
+ {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: `{ color: 'red' }`,
+ isStatic: false,
+ },
+ ],
+ },
+ },
+ ])
+ })
+
+ test('props merging: class', () => {
+ const { code, ir } = compileWithElementTransform(
+ ``,
+ )
+
+ expect(code).toMatchSnapshot()
+
+ expect(ir.block.effect).toMatchObject([
+ {
+ expressions: [
+ {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: `{ bar: isBar }`,
+ isStatic: false,
+ },
+ ],
+ operations: [
+ {
+ type: IRNodeTypes.SET_PROP,
+ element: 0,
+ prop: {
+ key: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'class',
+ isStatic: true,
+ },
+ values: [
+ {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: `foo`,
+ isStatic: true,
+ },
+ {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: `{ bar: isBar }`,
+ isStatic: false,
+ },
+ ],
+ },
+ },
+ ],
+ },
+ ])
+ })
+
+ test('v-on="obj"', () => {
+ const { code, ir } = compileWithElementTransform(``)
+ expect(code).toMatchSnapshot()
+ expect(ir.block.effect).toMatchObject([
+ {
+ expressions: [
+ {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'obj',
+ isStatic: false,
+ },
+ ],
+ operations: [
+ {
+ type: IRNodeTypes.SET_DYNAMIC_EVENTS,
+ element: 0,
+ event: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'obj',
+ isStatic: false,
+ },
+ },
+ ],
+ },
+ ])
+ expect(code).contains('_setDynamicEvents(n0, _ctx.obj)')
+ })
+
+ test('component with dynamic prop arguments', () => {
+ const { code, ir } = compileWithElementTransform(
+ `
123
+ `,
+ )
+ expect(code).toMatchSnapshot()
+ expect(ir.template).toEqual(['123
', '', ''])
+ expect(ir.block.dynamic).toMatchObject({
+ children: [
+ { id: 1, template: 1, children: [{ id: 0, template: 0 }] },
+ { id: 3, template: 2, children: [{ id: 2, template: 2 }] },
+ ],
+ })
+
+ expect(ir.block.operation).toMatchObject([
+ { type: IRNodeTypes.INSERT_NODE, parent: 1, elements: [0] },
+ { type: IRNodeTypes.INSERT_NODE, parent: 3, elements: [2] },
+ ])
+ })
+
+ test('empty template', () => {
+ const { code } = compileWithElementTransform('')
+ expect(code).toMatchSnapshot()
+ expect(code).contain('return null')
+ })
+})
diff --git a/packages/compiler-vapor/__tests__/transforms/transformSlotOutlet.spec.ts b/packages/compiler-vapor/__tests__/transforms/transformSlotOutlet.spec.ts
new file mode 100644
index 00000000000..389c665a12f
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/transformSlotOutlet.spec.ts
@@ -0,0 +1,280 @@
+import { ErrorCodes, NodeTypes } from '@vue/compiler-dom'
+import {
+ IRNodeTypes,
+ transformChildren,
+ transformElement,
+ transformSlotOutlet,
+ transformText,
+ transformVBind,
+ transformVOn,
+ transformVShow,
+} from '../../src'
+import { makeCompile } from './_utils'
+
+const compileWithSlotsOutlet = makeCompile({
+ nodeTransforms: [
+ transformText,
+ transformSlotOutlet,
+ transformElement,
+ transformChildren,
+ ],
+ directiveTransforms: {
+ bind: transformVBind,
+ on: transformVOn,
+ show: transformVShow,
+ },
+})
+
+describe('compiler: transform {{ item }}
`,
+ )
+
+ expect(code).matchSnapshot()
+ expect(helpers).contains('createFor')
+ expect(ir.template).toEqual(['item
`)
+ expect(code).matchSnapshot()
+ })
+
+ test('nested v-for', () => {
+ const { code, ir } = compileWithVFor(
+ `{{ j+i }}
`,
+ )
+ expect(code).matchSnapshot()
+ expect(code).contains(`_createFor(() => (_ctx.list), (_for_item0) => {`)
+ expect(code).contains(
+ `_createFor(() => (_for_item0.value), (_for_item1) => {`,
+ )
+ expect(code).contains(`_for_item1.value+_for_item0.value`)
+ expect(ir.template).toEqual([' ', ''])
+ const parentOp = ir.block.dynamic.children[0].operation
+ expect(parentOp).toMatchObject({
+ type: IRNodeTypes.FOR,
+ id: 0,
+ source: { content: 'list' },
+ value: { content: 'i' },
+ render: {
+ type: IRNodeTypes.BLOCK,
+ dynamic: {
+ children: [{ template: 1 }],
+ },
+ },
+ })
+ expect(
+ (parentOp as any).render.dynamic.children[0].children[0].operation,
+ ).toMatchObject({
+ type: IRNodeTypes.FOR,
+ id: 2,
+ source: { content: 'i' },
+ value: { content: 'j' },
+ render: {
+ type: IRNodeTypes.BLOCK,
+ dynamic: {
+ children: [{ template: 0 }],
+ },
+ },
+ })
+ })
+
+ test('object value, key and index', () => {
+ const { code, ir } = compileWithVFor(
+ `{{ value + key + index }}
`,
+ )
+ expect(code).matchSnapshot()
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.FOR,
+ source: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'list',
+ },
+ value: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'value',
+ },
+ key: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'key',
+ },
+ index: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'index',
+ },
+ })
+ })
+
+ test('object de-structured value', () => {
+ const { code, ir } = compileWithVFor(
+ '{{ id }}{{ value }}',
+ )
+ expect(code).matchSnapshot()
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.FOR,
+ source: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'items',
+ },
+ value: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: '{ id, value }',
+ ast: {
+ type: 'ArrowFunctionExpression',
+ params: [
+ {
+ type: 'ObjectPattern',
+ },
+ ],
+ },
+ },
+ key: undefined,
+ index: undefined,
+ })
+ })
+
+ test('object de-structured value (with rest)', () => {
+ const { code, ir } = compileWithVFor(
+ `{{ id + other + index }}
`,
+ )
+ expect(code).matchSnapshot()
+ expect(code).toContain('_getRestElement(_for_item0.value, ["id"])')
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.FOR,
+ source: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'list',
+ },
+ value: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: '{ id, ...other }',
+ ast: {
+ type: 'ArrowFunctionExpression',
+ params: [
+ {
+ type: 'ObjectPattern',
+ },
+ ],
+ },
+ },
+ key: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'index',
+ },
+ index: undefined,
+ })
+ })
+
+ test('array de-structured value', () => {
+ const { code, ir } = compileWithVFor(
+ `{{ id + other + index }}
`,
+ )
+ expect(code).matchSnapshot()
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.FOR,
+ source: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'list',
+ },
+ value: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: '[id, other]',
+ ast: {
+ type: 'ArrowFunctionExpression',
+ params: [
+ {
+ type: 'ArrayPattern',
+ },
+ ],
+ },
+ },
+ key: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'index',
+ },
+ index: undefined,
+ })
+ })
+
+ test('array de-structured value (with rest)', () => {
+ const { code, ir } = compileWithVFor(
+ `{{ id + other + index }}
`,
+ )
+ expect(code).matchSnapshot()
+ expect(code).toContain('_for_item0.value.slice(1)')
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.FOR,
+ source: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'list',
+ },
+ value: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: '[id, ...other]',
+ ast: {
+ type: 'ArrowFunctionExpression',
+ params: [
+ {
+ type: 'ArrayPattern',
+ },
+ ],
+ },
+ },
+ key: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'index',
+ },
+ index: undefined,
+ })
+ })
+
+ test('v-for aliases w/ complex expressions', () => {
+ const { code, ir } = compileWithVFor(
+ `
+ {{ foo + bar + baz + qux + quux }}
+
`,
+ )
+ expect(code).matchSnapshot()
+ expect(code).toContain(`_getDefaultValue(_for_item0.value.foo, _ctx.bar)`)
+ expect(code).toContain(
+ `_getDefaultValue(_for_item0.value.baz[0], _ctx.quux)`,
+ )
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.FOR,
+ source: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'list',
+ },
+ value: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: '{ foo = bar, baz: [qux = quux] }',
+ ast: {
+ type: 'ArrowFunctionExpression',
+ params: [
+ {
+ type: 'ObjectPattern',
+ },
+ ],
+ },
+ },
+ key: undefined,
+ index: undefined,
+ })
+ })
+})
diff --git a/packages/compiler-vapor/__tests__/transforms/vHtml.spec.ts b/packages/compiler-vapor/__tests__/transforms/vHtml.spec.ts
new file mode 100644
index 00000000000..0fcff932c18
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/vHtml.spec.ts
@@ -0,0 +1,122 @@
+import { BindingTypes, DOMErrorCodes, NodeTypes } from '@vue/compiler-dom'
+import {
+ IRNodeTypes,
+ transformChildren,
+ transformElement,
+ transformVHtml,
+} from '../../src'
+import { makeCompile } from './_utils'
+
+const compileWithVHtml = makeCompile({
+ nodeTransforms: [transformElement, transformChildren],
+ directiveTransforms: {
+ html: transformVHtml,
+ },
+})
+
+describe('v-html', () => {
+ test('should convert v-html to innerHTML', () => {
+ const { code, ir, helpers } = compileWithVHtml(
+ ``,
+ {
+ bindingMetadata: {
+ code: BindingTypes.SETUP_REF,
+ },
+ },
+ )
+
+ expect(helpers).contains('setHtml')
+
+ expect(ir.block.operation).toMatchObject([])
+ expect(ir.block.effect).toMatchObject([
+ {
+ expressions: [
+ {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'code',
+ isStatic: false,
+ },
+ ],
+ operations: [
+ {
+ type: IRNodeTypes.SET_HTML,
+ element: 0,
+ value: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'code',
+ isStatic: false,
+ },
+ },
+ ],
+ },
+ ])
+
+ expect(code).matchSnapshot()
+ })
+
+ test('work with dynamic component', () => {
+ const { code } = compileWithVHtml(
+ `hello
`,
+ {
+ onError,
+ },
+ )
+
+ expect(helpers).contains('setHtml')
+
+ // children should have been removed
+ expect(ir.template).toEqual([''])
+
+ expect(ir.block.operation).toMatchObject([])
+ expect(ir.block.effect).toMatchObject([
+ {
+ expressions: [
+ {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'test',
+ isStatic: false,
+ },
+ ],
+ operations: [
+ {
+ type: IRNodeTypes.SET_HTML,
+ element: 0,
+ value: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'test',
+ isStatic: false,
+ },
+ },
+ ],
+ },
+ ])
+
+ expect(onError.mock.calls).toMatchObject([
+ [{ code: DOMErrorCodes.X_V_HTML_WITH_CHILDREN }],
+ ])
+
+ expect(code).matchSnapshot()
+ // children should have been removed
+ expect(code).contains('template("", true)')
+ })
+
+ test('should raise error if has no expression', () => {
+ const onError = vi.fn()
+ const { code } = compileWithVHtml(``, {
+ onError,
+ })
+ expect(code).matchSnapshot()
+ expect(onError.mock.calls).toMatchObject([
+ [{ code: DOMErrorCodes.X_V_HTML_NO_EXPRESSION }],
+ ])
+ })
+})
diff --git a/packages/compiler-vapor/__tests__/transforms/vIf.spec.ts b/packages/compiler-vapor/__tests__/transforms/vIf.spec.ts
new file mode 100644
index 00000000000..e5fd61add2e
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/vIf.spec.ts
@@ -0,0 +1,253 @@
+import { makeCompile } from './_utils'
+import {
+ IRNodeTypes,
+ type IfIRNode,
+ transformChildren,
+ transformComment,
+ transformElement,
+ transformText,
+ transformVIf,
+ transformVOnce,
+ transformVText,
+} from '../../src'
+import { NodeTypes } from '@vue/compiler-dom'
+
+const compileWithVIf = makeCompile({
+ nodeTransforms: [
+ transformVOnce,
+ transformVIf,
+ transformText,
+ transformElement,
+ transformComment,
+ transformChildren,
+ ],
+ directiveTransforms: {
+ text: transformVText,
+ },
+})
+
+describe('compiler: v-if', () => {
+ test('basic v-if', () => {
+ const { code, helpers, ir } = compileWithVIf(`{{msg}}
`)
+
+ expect(helpers).contains('createIf')
+
+ expect(ir.template).toEqual(['']) + expect(ir.block.effect).toEqual([]) + const op = ir.block.dynamic.children[0].operation as IfIRNode + expect(op.positive.effect).toMatchObject([ + { + operations: [ + { + type: IRNodeTypes.SET_TEXT, + element: 4, + values: [ + { + content: 'msg', + type: NodeTypes.SIMPLE_EXPRESSION, + isStatic: false, + }, + ], + }, + ], + }, + ]) + expect(op.positive.dynamic).toMatchObject({ + id: 1, + children: { + 2: { + id: 4, + }, + }, + }) + }) + + test('dedupe same template', () => { + const { code, ir } = compileWithVIf( + `
hello
hello
`,
+ )
+ expect(code).matchSnapshot()
+ expect(ir.template).toEqual(['hello
'])
+ expect(ir.block.returns).toEqual([0, 3])
+ })
+
+ test.todo('v-if with v-once')
+ test.todo('component v-if')
+
+ test('v-if + v-else', () => {
+ const { code, ir, helpers } = compileWithVIf(``)
+ expect(code).matchSnapshot()
+ expect(ir.template).toEqual(['', ''])
+
+ expect(helpers).contains('createIf')
+ expect(ir.block.effect).lengthOf(0)
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.IF,
+ id: 0,
+ condition: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'ok',
+ isStatic: false,
+ },
+ positive: {
+ type: IRNodeTypes.BLOCK,
+ dynamic: {
+ children: [{ template: 0 }],
+ },
+ },
+ negative: {
+ type: IRNodeTypes.BLOCK,
+ dynamic: {
+ children: [{ template: 1 }],
+ },
+ },
+ })
+ expect(ir.block.returns).toEqual([0])
+ })
+
+ test('v-if + v-else-if', () => {
+ const { code, ir } = compileWithVIf(
+ ``,
+ )
+ expect(code).matchSnapshot()
+ expect(ir.template).toEqual(['', ''])
+
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.IF,
+ id: 0,
+ condition: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'ok',
+ isStatic: false,
+ },
+ positive: {
+ type: IRNodeTypes.BLOCK,
+ dynamic: {
+ children: [{ template: 0 }],
+ },
+ },
+ negative: {
+ type: IRNodeTypes.IF,
+ condition: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'orNot',
+ isStatic: false,
+ },
+ positive: {
+ type: IRNodeTypes.BLOCK,
+ dynamic: {
+ children: [{ template: 1 }],
+ },
+ },
+ },
+ })
+ expect(ir.block.returns).toEqual([0])
+ })
+
+ test('v-if + v-else-if + v-else', () => {
+ const { code, ir } = compileWithVIf(
+ `fine`,
+ )
+ expect(code).matchSnapshot()
+ expect(ir.template).toEqual(['', '', 'fine'])
+
+ expect(ir.block.returns).toEqual([0])
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.IF,
+ id: 0,
+ positive: {
+ type: IRNodeTypes.BLOCK,
+ dynamic: {
+ children: [{ template: 0 }],
+ },
+ },
+ negative: {
+ type: IRNodeTypes.IF,
+ positive: {
+ type: IRNodeTypes.BLOCK,
+ dynamic: {
+ children: [{ template: 1 }],
+ },
+ },
+ negative: {
+ type: IRNodeTypes.BLOCK,
+ dynamic: {
+ children: [{ template: 2 }],
+ },
+ },
+ },
+ })
+ })
+
+ test('v-if + v-if / v-else[-if]', () => {
+ const { code } = compileWithVIf(
+ `
+ foo
+ bar
+ baz
+
`,
+ )
+ expect(code).toMatchSnapshot()
+ })
+
+ test('comment between branches', () => {
+ const { code, ir } = compileWithVIf(`
+
+
+
+
+ fine
+
+ `)
+ expect(code).matchSnapshot()
+ expect(ir.template).toEqual([
+ '',
+ '',
+ '',
+ '',
+ 'fine',
+
+ '
+ {{ msg }}
+
+
`,
+ {
+ bindingMetadata: {
+ msg: BindingTypes.SETUP_REF,
+ clz: BindingTypes.SETUP_REF,
+ },
+ },
+ )
+
+ expect(code).toMatchSnapshot()
+ expect(ir.block.effect).lengthOf(0)
+ expect(ir.block.operation).toMatchObject([
+ {
+ type: IRNodeTypes.SET_TEXT,
+ element: 0,
+ values: [
+ {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'msg',
+ isStatic: false,
+ },
+ {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: ' ',
+ isStatic: true,
+ },
+ ],
+ },
+ {
+ element: 1,
+ type: IRNodeTypes.SET_PROP,
+ prop: {
+ key: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'class',
+ isStatic: true,
+ },
+ values: [
+ {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'clz',
+ isStatic: false,
+ },
+ ],
+ },
+ },
+ ])
+ })
+
+ test('as root node', () => {
+ const { ir, code } = compileWithOnce(``)
+
+ expect(code).toMatchSnapshot()
+
+ expect(ir.block.effect).lengthOf(0)
+ expect(ir.block.operation).toMatchObject([
+ {
+ type: IRNodeTypes.SET_PROP,
+ element: 0,
+ prop: {
+ key: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'id',
+ isStatic: true,
+ },
+ values: [
+ {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'foo',
+ isStatic: false,
+ },
+ ],
+ },
+ },
+ ])
+ expect(code).not.contains('effect')
+ })
+
+ test('on nested plain element', () => {
+ const { ir, code } = compileWithOnce(``)
+
+ expect(code).toMatchSnapshot()
+
+ expect(ir.block.effect).lengthOf(0)
+ expect(ir.block.operation).toMatchObject([
+ {
+ type: IRNodeTypes.SET_PROP,
+ element: 0,
+ prop: {
+ runtimeCamelize: false,
+ key: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'id',
+ isStatic: true,
+ },
+ values: [
+ {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'foo',
+ isStatic: false,
+ },
+ ],
+ },
+ },
+ ])
+ })
+
+ test('on component', () => {
+ const { ir, code } = compileWithOnce(`
`)
+
+ expect(code).toMatchSnapshot()
+
+ expect(ir.block.effect).lengthOf(0)
+ expect(ir.block.operation).lengthOf(0)
+ })
+
+ test.todo('with hoistStatic: true')
+
+ test('with v-if', () => {
+ const { ir, code } = compileWithOnce(``)
+ expect(code).toMatchSnapshot()
+
+ expect(ir.block.effect).lengthOf(0)
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.IF,
+ id: 0,
+ once: true,
+ condition: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'expr',
+ isStatic: false,
+ },
+ positive: {
+ type: IRNodeTypes.BLOCK,
+ dynamic: {
+ children: [{ template: 0 }],
+ },
+ },
+ })
+ })
+
+ test('with v-if/else', () => {
+ const { ir, code } = compileWithOnce(
+ ``,
+ )
+ expect(code).toMatchSnapshot()
+
+ expect(ir.block.effect).lengthOf(0)
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.IF,
+ id: 0,
+ once: true,
+ condition: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'expr',
+ isStatic: false,
+ },
+ positive: {
+ type: IRNodeTypes.BLOCK,
+ dynamic: {
+ children: [{ template: 0 }],
+ },
+ },
+ negative: {
+ type: IRNodeTypes.BLOCK,
+ dynamic: {
+ children: [{ template: 1 }],
+ },
+ },
+ })
+ })
+
+ test('with v-for', () => {
+ const { ir, code } = compileWithOnce(``)
+ expect(code).toMatchSnapshot()
+ expect(ir.block.effect).lengthOf(0)
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.FOR,
+ id: 0,
+ once: true,
+ })
+ })
+})
diff --git a/packages/compiler-vapor/__tests__/transforms/vShow.spec.ts b/packages/compiler-vapor/__tests__/transforms/vShow.spec.ts
new file mode 100644
index 00000000000..800f64cc0b4
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/vShow.spec.ts
@@ -0,0 +1,29 @@
+import { makeCompile } from './_utils'
+import { transformChildren, transformElement, transformVShow } from '../../src'
+import { DOMErrorCodes } from '@vue/compiler-dom'
+
+const compileWithVShow = makeCompile({
+ nodeTransforms: [transformElement, transformChildren],
+ directiveTransforms: {
+ show: transformVShow,
+ },
+})
+
+describe('compiler: v-show transform', () => {
+ test('simple expression', () => {
+ const { code } = compileWithVShow(``)
+ expect(code).toMatchSnapshot()
+ })
+
+ test('should raise error if has no expression', () => {
+ const onError = vi.fn()
+ compileWithVShow(``, { onError })
+
+ expect(onError).toHaveBeenCalledTimes(1)
+ expect(onError).toHaveBeenCalledWith(
+ expect.objectContaining({
+ code: DOMErrorCodes.X_V_SHOW_NO_EXPRESSION,
+ }),
+ )
+ })
+})
diff --git a/packages/compiler-vapor/__tests__/transforms/vSlot.spec.ts b/packages/compiler-vapor/__tests__/transforms/vSlot.spec.ts
new file mode 100644
index 00000000000..63b6b00010b
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/vSlot.spec.ts
@@ -0,0 +1,597 @@
+import { ErrorCodes, NodeTypes } from '@vue/compiler-dom'
+import {
+ IRNodeTypes,
+ IRSlotType,
+ transformChildren,
+ transformElement,
+ transformSlotOutlet,
+ transformText,
+ transformVBind,
+ transformVFor,
+ transformVIf,
+ transformVOn,
+ transformVSlot,
+} from '../../src'
+import { makeCompile } from './_utils'
+
+const compileWithSlots = makeCompile({
+ nodeTransforms: [
+ transformText,
+ transformVIf,
+ transformVFor,
+ transformSlotOutlet,
+ transformElement,
+ transformVSlot,
+ transformChildren,
+ ],
+ directiveTransforms: {
+ bind: transformVBind,
+ on: transformVOn,
+ },
+})
+
+describe('compiler: transform slot', () => {
+ test('implicit default slot', () => {
+ const { ir, code } = compileWithSlots(`
+
`,
+ )
+ expect(code).toMatchSnapshot()
+ })
+
+ test('quote slot name', () => {
+ const { code } = compileWithSlots(
+ `hello
`, {
+ onError,
+ })
+ expect(onError.mock.calls).toMatchObject([
+ [{ code: DOMErrorCodes.X_V_TEXT_WITH_CHILDREN }],
+ ])
+
+ // children should have been removed
+ expect(ir.template).toEqual(['{{ data.txt }}
`,
+ undefined,
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"foo
"`,
+ )
+ })
+
+ test('empty text node in slot', async () => {
+ const data = reactive({ txt: '' })
+ const { container } = await testHydration(
+ ``).not.toHaveBeenWarned()
+ })
+
+ test('root with mixed element and text', async () => {
+ const { container, data } = await testHydration(`
+ A{{ data }}{{ data }}
+ `)
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `" Afoofoo"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `" Abarbar"`,
+ )
+ })
+
+ test('empty element', async () => {
+ const { container } = await testHydration(`
+
+ `)
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `""`,
+ )
+ expect(`Hydration children mismatch in
+ {{data.text}}
+
+ `,
+ {
+ Child: `
+ {{data.text}}
+
+ `,
+ {
+ Child: `{{data.text}}
+ {{data.text}}
+ bar
+
+ `,
+ {
+ Child: `
+ {{data.text}}
+
+ `,
+ {
+ Child: `
+ {{data.msg1}}
+
+ `,
+ {
+ Child: `
+
+
+ {{data.msg1}}
+
+ `,
+ {
+ Child: `
+
+
+ {{data.msg}}
+
+ `,
+ {
+ Child: `
+
+
+ {{data.msg}}
+
+ `,
+ {
+ Child: `
+
+
+ {{data.msg1}}
+
+ {{data.msg2}}
+
+
+ `,
+ {
+ Child: `
+ {{data.msg1}}
+
+ {{data.msg2}}
+
+
+ `,
+ {
+ Child: `
+
+
+ {{data.msg1}}
+
+
+ {{data.msg2}}
+
+
+ `,
+ {
+ Child: `
+
+
+ `,
+ {
+ Child: `{{data.foo}} `,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ foo
+ "
+ `,
+ )
+
+ data.foo = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ bar
+ "
+ `,
+ )
+ })
+
+ test('forwarded slot', async () => {
+ const data = reactive({
+ foo: 'foo',
+ bar: 'bar',
+ })
+ const { container } = await testHydration(
+ `
+ {{data.foo}} `,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
+
+ `,
+ Bar: `
+
+
+
+ `,
+ Baz: `
+
+
+
+ `,
+ Qux: `
+ {{data}} `,
+ vapor: false,
+ },
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ true
+ "
+ `,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ false
+ "
+ `,
+ )
+ })
+
+ test('nested components (VDOM -> Vapor(with slot content) -> VDOM)', async () => {
+ const data = ref(true)
+ const { container } = await testWithVDOMApp(
+ `
+
+
+
+ {{data}} vapor fallback
+
+
+ `,
+ vapor: true,
+ },
+ VdomChild: {
+ code: `
+ vdom fallback `,
+ vapor: false,
+ },
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ true vapor fallback
+ "
+ `,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ false vapor fallback
+ "
+ `,
+ )
+ })
+
+ test('nested components (VDOM -> Vapor(with slot content) -> Vapor)', async () => {
+ const data = ref(true)
+ const { container } = await testWithVDOMApp(
+ `
+
+
+
+ {{data}} vapor fallback
+
+
+ `,
+ vapor: true,
+ },
+ VaporChild2: {
+ code: `vapor fallback2 `,
+ vapor: true,
+ },
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ true vapor fallback
+ "
+ `,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ false vapor fallback
+ "
+ `,
+ )
+ })
+
+ test('vapor slot render vdom component', async () => {
+ const data = ref(true)
+ const { container } = await testWithVDOMApp(
+ `
+
+
+
+ `,
+ {
+ VaporChild: {
+ code: `
+
+ `,
+ {
+ VaporChild: {
+ code: `
+ let spyElseFn: Mock
+ const count = ref(0)
+
+ const spyConditionFn = vi.fn(() => count.value)
+
+ // templates can be reused through caching.
+ const t0 = template('')
+ const t1 = template('')
+ const t2 = template('')
+ expect(spyConditionFn).toHaveBeenCalledTimes(1)
+ expect(spyIfFn!).toHaveBeenCalledTimes(0)
+ expect(spyElseFn!).toHaveBeenCalledTimes(1)
+
+ count.value++
+ await nextTick()
+ expect(host.innerHTML).toBe('')
+ expect(spyConditionFn).toHaveBeenCalledTimes(2)
+ expect(spyIfFn!).toHaveBeenCalledTimes(1)
+ expect(spyElseFn!).toHaveBeenCalledTimes(1)
+
+ count.value++
+ await nextTick()
+ expect(host.innerHTML).toBe('')
+ expect(spyConditionFn).toHaveBeenCalledTimes(3)
+ expect(spyIfFn!).toHaveBeenCalledTimes(1)
+ expect(spyElseFn!).toHaveBeenCalledTimes(1)
+
+ count.value = 0
+ await nextTick()
+ expect(host.innerHTML).toBe('')
+ expect(spyConditionFn).toHaveBeenCalledTimes(4)
+ expect(spyIfFn!).toHaveBeenCalledTimes(1)
+ expect(spyElseFn!).toHaveBeenCalledTimes(2)
+ })
+
+ test('should handle nested template', async () => {
+ // mock this template:
+ //
+ // Hello Vapor
+ //
+
+ const ok1 = ref(true)
+ const ok2 = ref(true)
+
+ const t0 = template('Vapor')
+ const t1 = template('Hello ')
+ const { host } = define(() => {
+ const n1 = createIf(
+ () => ok1.value,
+ () => {
+ const n2 = t1()
+ const n3 = createIf(
+ () => ok2.value,
+ () => {
+ const n4 = t0()
+ return n4
+ },
+ )
+ return [n2, n3]
+ },
+ )
+ return n1
+ }).render()
+
+ expect(host.innerHTML).toBe('Hello Vapor')
+
+ ok1.value = false
+ await nextTick()
+ expect(host.innerHTML).toBe('')
+
+ ok1.value = true
+ await nextTick()
+ expect(host.innerHTML).toBe('Hello Vapor')
+
+ ok2.value = false
+ await nextTick()
+ expect(host.innerHTML).toBe('Hello ')
+
+ ok1.value = false
+ await nextTick()
+ expect(host.innerHTML).toBe('')
+ })
+
+ test.todo('should work with directive hooks', async () => {
+ const calls: string[] = []
+ const show1 = ref(true)
+ const show2 = ref(true)
+ const update = ref(0)
+
+ const spyConditionFn1 = vi.fn(() => show1.value)
+ const spyConditionFn2 = vi.fn(() => show2.value)
+
+ const vDirective: any = {
+ created: (el: any, { value }: any) => calls.push(`${value} created`),
+ beforeMount: (el: any, { value }: any) =>
+ calls.push(`${value} beforeMount`),
+ mounted: (el: any, { value }: any) => calls.push(`${value} mounted`),
+ beforeUpdate: (el: any, { value }: any) =>
+ calls.push(`${value} beforeUpdate`),
+ updated: (el: any, { value }: any) => calls.push(`${value} updated`),
+ beforeUnmount: (el: any, { value }: any) =>
+ calls.push(`${value} beforeUnmount`),
+ unmounted: (el: any, { value }: any) => calls.push(`${value} unmounted`),
+ }
+
+ const t0 = template('')
+ const { instance } = define(() => {
+ const n1 = createIf(
+ spyConditionFn1,
+ () => {
+ const n2 = t0() as ParentNode
+ withDirectives(child(n2), [[vDirective, () => (update.value, '1')]])
+ return n2
+ },
+ () =>
+ createIf(
+ spyConditionFn2,
+ () => {
+ const n2 = t0() as ParentNode
+ withDirectives(child(n2), [[vDirective, () => '2']])
+ return n2
+ },
+ () => {
+ const n2 = t0() as ParentNode
+ withDirectives(child(n2), [[vDirective, () => '3']])
+ return n2
+ },
+ ),
+ )
+ return [n1]
+ }).render()
+
+ await nextTick()
+ expect(calls).toEqual(['1 created', '1 beforeMount', '1 mounted'])
+ calls.length = 0
+ expect(spyConditionFn1).toHaveBeenCalledTimes(1)
+ expect(spyConditionFn2).toHaveBeenCalledTimes(0)
+
+ show1.value = false
+ await nextTick()
+ expect(calls).toEqual([
+ '1 beforeUnmount',
+ '2 created',
+ '2 beforeMount',
+ '1 unmounted',
+ '2 mounted',
+ ])
+ calls.length = 0
+ expect(spyConditionFn1).toHaveBeenCalledTimes(2)
+ expect(spyConditionFn2).toHaveBeenCalledTimes(1)
+
+ show2.value = false
+ await nextTick()
+ expect(calls).toEqual([
+ '2 beforeUnmount',
+ '3 created',
+ '3 beforeMount',
+ '2 unmounted',
+ '3 mounted',
+ ])
+ calls.length = 0
+ expect(spyConditionFn1).toHaveBeenCalledTimes(2)
+ expect(spyConditionFn2).toHaveBeenCalledTimes(2)
+
+ show1.value = true
+ await nextTick()
+ expect(calls).toEqual([
+ '3 beforeUnmount',
+ '1 created',
+ '1 beforeMount',
+ '3 unmounted',
+ '1 mounted',
+ ])
+ calls.length = 0
+ expect(spyConditionFn1).toHaveBeenCalledTimes(3)
+ expect(spyConditionFn2).toHaveBeenCalledTimes(2)
+
+ update.value++
+ await nextTick()
+ expect(calls).toEqual(['1 beforeUpdate', '1 updated'])
+ calls.length = 0
+ expect(spyConditionFn1).toHaveBeenCalledTimes(3)
+ expect(spyConditionFn2).toHaveBeenCalledTimes(2)
+
+ unmountComponent(instance!)
+ expect(calls).toEqual(['1 beforeUnmount', '1 unmounted'])
+ expect(spyConditionFn1).toHaveBeenCalledTimes(3)
+ expect(spyConditionFn2).toHaveBeenCalledTimes(2)
+ })
+})
diff --git a/packages/runtime-vapor/__tests__/renderEffect.spec.ts b/packages/runtime-vapor/__tests__/renderEffect.spec.ts
new file mode 100644
index 00000000000..425d84990d2
--- /dev/null
+++ b/packages/runtime-vapor/__tests__/renderEffect.spec.ts
@@ -0,0 +1,245 @@
+import {
+ EffectScope,
+ type GenericComponentInstance,
+ currentInstance,
+ getCurrentScope,
+ nextTick,
+ onBeforeUpdate,
+ onUpdated,
+ ref,
+ watchEffect,
+ watchPostEffect,
+ watchSyncEffect,
+} from '@vue/runtime-dom'
+import { renderEffect, template } from '../src'
+import { onEffectCleanup } from '@vue/reactivity'
+import { makeRender } from './_utils'
+
+const define = makeRender()
+const createDemo = (setupFn: () => any, renderFn: (ctx: any) => any) =>
+ define({
+ setup: () => {
+ const returned = setupFn()
+ Object.defineProperty(returned, '__isScriptSetup', {
+ enumerable: false,
+ value: true,
+ })
+ return returned
+ },
+ render: (ctx: any) => {
+ const t0 = template('')
+ renderFn(ctx)
+ return t0()
+ },
+ })
+
+describe('renderEffect', () => {
+ test('basic', async () => {
+ let dummy: any
+ const source = ref(0)
+ renderEffect(() => {
+ dummy = source.value
+ })
+ expect(dummy).toBe(0)
+ await nextTick()
+ expect(dummy).toBe(0)
+
+ source.value++
+ expect(dummy).toBe(0)
+ await nextTick()
+ expect(dummy).toBe(1)
+
+ source.value++
+ expect(dummy).toBe(1)
+ await nextTick()
+ expect(dummy).toBe(2)
+
+ source.value++
+ expect(dummy).toBe(2)
+ await nextTick()
+ expect(dummy).toBe(3)
+ })
+
+ test('should run with the scheduling order', async () => {
+ const calls: string[] = []
+
+ const { instance } = createDemo(
+ () => {
+ // setup
+ const source = ref(0)
+ const renderSource = ref(0)
+ const change = () => source.value++
+ const changeRender = () => renderSource.value++
+
+ // Life Cycle Hooks
+ onUpdated(() => {
+ calls.push(`updated ${source.value}`)
+ })
+ onBeforeUpdate(() => {
+ calls.push(`beforeUpdate ${source.value}`)
+ })
+
+ // Watch API
+ watchPostEffect(() => {
+ const current = source.value
+ calls.push(`post ${current}`)
+ onEffectCleanup(() => calls.push(`post cleanup ${current}`))
+ })
+ watchEffect(() => {
+ const current = source.value
+ calls.push(`pre ${current}`)
+ onEffectCleanup(() => calls.push(`pre cleanup ${current}`))
+ })
+ watchSyncEffect(() => {
+ const current = source.value
+ calls.push(`sync ${current}`)
+ onEffectCleanup(() => calls.push(`sync cleanup ${current}`))
+ })
+ return { source, change, renderSource, changeRender }
+ },
+ // render
+ _ctx => {
+ // Render Watch API
+ renderEffect(() => {
+ const current = _ctx.renderSource
+ calls.push(`renderEffect ${current}`)
+ onEffectCleanup(() => calls.push(`renderEffect cleanup ${current}`))
+ })
+ },
+ ).render()
+
+ const { change, changeRender } = instance?.setupState as any
+
+ await nextTick()
+ expect(calls).toEqual(['pre 0', 'sync 0', 'renderEffect 0', 'post 0'])
+ calls.length = 0
+
+ // Update
+ changeRender()
+ change()
+
+ expect(calls).toEqual(['sync cleanup 0', 'sync 1'])
+ calls.length = 0
+
+ await nextTick()
+ expect(calls).toEqual([
+ 'pre cleanup 0',
+ 'pre 1',
+ 'renderEffect cleanup 0',
+ 'beforeUpdate 1',
+ 'renderEffect 1',
+ 'post cleanup 0',
+ 'post 1',
+ 'updated 1',
+ ])
+ calls.length = 0
+
+ // Update
+ changeRender()
+ change()
+
+ expect(calls).toEqual(['sync cleanup 1', 'sync 2'])
+ calls.length = 0
+
+ await nextTick()
+ expect(calls).toEqual([
+ 'pre cleanup 1',
+ 'pre 2',
+ 'renderEffect cleanup 1',
+ 'beforeUpdate 2',
+ 'renderEffect 2',
+ 'post cleanup 1',
+ 'post 2',
+ 'updated 2',
+ ])
+ })
+
+ test('errors should include the execution location with beforeUpdate hook', async () => {
+ const { instance } = createDemo(
+ // setup
+ () => {
+ const source = ref()
+ const update = () => source.value++
+ onBeforeUpdate(() => {
+ throw 'error in beforeUpdate'
+ })
+ return { source, update }
+ },
+ // render
+ ctx => {
+ renderEffect(() => {
+ ctx.source
+ })
+ },
+ ).render()
+ const { update } = instance?.setupState as any
+
+ await expect(async () => {
+ update()
+ await nextTick()
+ }).rejects.toThrow('error in beforeUpdate')
+
+ expect(
+ '[Vue warn]: Unhandled error during execution of beforeUpdate hook',
+ ).toHaveBeenWarned()
+ expect(
+ '[Vue warn]: Unhandled error during execution of component update',
+ ).toHaveBeenWarned()
+ })
+
+ test('errors should include the execution location with updated hook', async () => {
+ const { instance } = createDemo(
+ // setup
+ () => {
+ const source = ref(0)
+ const update = () => source.value++
+ onUpdated(() => {
+ throw 'error in updated'
+ })
+ return { source, update }
+ },
+ // render
+ ctx => {
+ renderEffect(() => {
+ ctx.source
+ })
+ },
+ ).render()
+
+ const { update } = instance?.setupState as any
+
+ await expect(async () => {
+ update()
+ await nextTick()
+ }).rejects.toThrow('error in updated')
+
+ expect(
+ '[Vue warn]: Unhandled error during execution of updated',
+ ).toHaveBeenWarned()
+ })
+
+ test('should be called with the current instance and current scope', async () => {
+ const source = ref(0)
+ const scope = new EffectScope()
+ let instanceSnap: GenericComponentInstance | null = null
+ let scopeSnap: EffectScope | undefined = undefined
+ const { instance } = define(() => {
+ scope.run(() => {
+ renderEffect(() => {
+ source.value
+ instanceSnap = currentInstance
+ scopeSnap = getCurrentScope()
+ })
+ })
+ return []
+ }).render()
+
+ expect(instanceSnap).toBe(instance)
+ expect(scopeSnap).toBe(scope)
+
+ source.value++
+ await nextTick()
+ expect(instanceSnap).toBe(instance)
+ expect(scopeSnap).toBe(scope)
+ })
+})
diff --git a/packages/runtime-vapor/__tests__/scopeId.spec.ts b/packages/runtime-vapor/__tests__/scopeId.spec.ts
new file mode 100644
index 00000000000..a4e878f8329
--- /dev/null
+++ b/packages/runtime-vapor/__tests__/scopeId.spec.ts
@@ -0,0 +1,627 @@
+import { createApp, h } from '@vue/runtime-dom'
+import {
+ createComponent,
+ createDynamicComponent,
+ createSlot,
+ defineVaporComponent,
+ forwardedSlotCreator,
+ setInsertionState,
+ template,
+ vaporInteropPlugin,
+} from '../src'
+import { makeRender } from './_utils'
+
+const define = makeRender()
+
+describe('scopeId', () => {
+ test('should attach scopeId to child component', () => {
+ const Child = defineVaporComponent({
+ __scopeId: 'child',
+ setup() {
+ return template('', true)()
+ },
+ })
+
+ const { html } = define({
+ __scopeId: 'parent',
+ setup() {
+ return createComponent(Child)
+ },
+ }).render()
+ expect(html()).toBe(``)
+ })
+
+ test('should attach scopeId to child component with insertion state', () => {
+ const Child = defineVaporComponent({
+ __scopeId: 'child',
+ setup() {
+ return template('', true)()
+ },
+ })
+
+ const { html } = define({
+ __scopeId: 'parent',
+ setup() {
+ const t0 = template('', true)
+ const n1 = t0() as any
+ setInsertionState(n1)
+ createComponent(Child)
+ return n1
+ },
+ }).render()
+ expect(html()).toBe(`
+
+const mountApp: AppMountFn = (app, container) => {
+ optimizePropertyLookup()
+
+ // clear content before mounting
+ if (container.nodeType === 1 /* Node.ELEMENT_NODE */) {
+ if (__DEV__ && container.childNodes.length) {
+ warn('mount target container is not empty and will be cleared.')
+ }
+ container.textContent = ''
+ }
+
+ const instance = createComponent(
+ app._component,
+ app._props as RawProps,
+ null,
+ false,
+ false,
+ undefined,
+ app._context,
+ )
+ mountComponent(instance, container)
+ flushOnAppMount()
+
+ return instance!
+}
+
+let _hydrateApp: CreateAppFunction
+
+const hydrateApp: AppMountFn = (app, container) => {
+ optimizePropertyLookup()
+
+ let instance: VaporComponentInstance
+ withHydration(container, () => {
+ instance = createComponent(
+ app._component,
+ app._props as RawProps,
+ null,
+ false,
+ false,
+ undefined,
+ app._context,
+ )
+ mountComponent(instance, container)
+ flushOnAppMount()
+ })
+
+ return instance!
+}
+
+const unmountApp: AppUnmountFn = app => {
+ unmountComponent(app._instance as VaporComponentInstance, app._container)
+}
+
+function prepareApp() {
+ // compile-time feature flags check
+ if (__ESM_BUNDLER__ && !__TEST__) {
+ initFeatureFlags()
+ }
+
+ const target = getGlobalThis()
+ target.__VUE__ = true
+ if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+ setDevtoolsHook(target.__VUE_DEVTOOLS_GLOBAL_HOOK__, target)
+ }
+}
+
+function postPrepareApp(app: App) {
+ app.vapor = true
+ const mount = app.mount
+ app.mount = (container, ...args: any[]) => {
+ container = normalizeContainer(container) as ParentNode
+ return mount(container, ...args)
+ }
+}
+
+export const createVaporApp: CreateAppFunction = (
+ comp,
+ props,
+) => {
+ prepareApp()
+ if (!_createApp) _createApp = createAppAPI(mountApp, unmountApp, getExposed)
+ const app = _createApp(comp, props)
+ postPrepareApp(app)
+ return app
+}
+
+export const createVaporSSRApp: CreateAppFunction<
+ ParentNode,
+ VaporComponent
+> = (comp, props) => {
+ prepareApp()
+ if (!_hydrateApp)
+ _hydrateApp = createAppAPI(hydrateApp, unmountApp, getExposed)
+ const app = _hydrateApp(comp, props)
+ postPrepareApp(app)
+ return app
+}
diff --git a/packages/runtime-vapor/src/apiCreateDynamicComponent.ts b/packages/runtime-vapor/src/apiCreateDynamicComponent.ts
new file mode 100644
index 00000000000..659f8487a0f
--- /dev/null
+++ b/packages/runtime-vapor/src/apiCreateDynamicComponent.ts
@@ -0,0 +1,61 @@
+import { currentInstance, resolveDynamicComponent } from '@vue/runtime-dom'
+import { insert } from './block'
+import { createComponentWithFallback, emptyContext } from './component'
+import { renderEffect } from './renderEffect'
+import type { RawProps } from './componentProps'
+import type { RawSlots } from './componentSlots'
+import {
+ insertionAnchor,
+ insertionParent,
+ resetInsertionState,
+} from './insertionState'
+import { DYNAMIC_COMPONENT_ANCHOR_LABEL } from '@vue/shared'
+import { advanceHydrationNode, isHydrating } from './dom/hydration'
+import { DynamicFragment, type VaporFragment } from './fragment'
+
+export function createDynamicComponent(
+ getter: () => any,
+ rawProps?: RawProps | null,
+ rawSlots?: RawSlots | null,
+ isSingleRoot?: boolean,
+ once?: boolean,
+ scopeId?: string,
+): VaporFragment {
+ const _insertionParent = insertionParent
+ const _insertionAnchor = insertionAnchor
+ if (!isHydrating) resetInsertionState()
+
+ const frag =
+ isHydrating || __DEV__
+ ? new DynamicFragment(DYNAMIC_COMPONENT_ANCHOR_LABEL)
+ : new DynamicFragment()
+
+ renderEffect(() => {
+ const value = getter()
+ const appContext =
+ (currentInstance && currentInstance.appContext) || emptyContext
+ frag.update(
+ () =>
+ createComponentWithFallback(
+ resolveDynamicComponent(value) as any,
+ rawProps,
+ rawSlots,
+ isSingleRoot,
+ once,
+ scopeId,
+ appContext,
+ ),
+ value,
+ )
+ })
+
+ if (!isHydrating) {
+ if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor)
+ } else {
+ if (_insertionAnchor !== undefined) {
+ advanceHydrationNode(_insertionParent!)
+ }
+ }
+
+ return frag
+}
diff --git a/packages/runtime-vapor/src/apiCreateFor.ts b/packages/runtime-vapor/src/apiCreateFor.ts
new file mode 100644
index 00000000000..7a9342e9098
--- /dev/null
+++ b/packages/runtime-vapor/src/apiCreateFor.ts
@@ -0,0 +1,615 @@
+import {
+ EffectScope,
+ type ShallowRef,
+ isReactive,
+ isReadonly,
+ isShallow,
+ setActiveSub,
+ shallowReadArray,
+ shallowRef,
+ toReactive,
+ toReadonly,
+ watch,
+} from '@vue/reactivity'
+import { FOR_ANCHOR_LABEL, isArray, isObject, isString } from '@vue/shared'
+import { createComment, createTextNode } from './dom/node'
+import {
+ type Block,
+ insert,
+ normalizeAnchor,
+ remove,
+ remove as removeBlock,
+} from './block'
+import { warn } from '@vue/runtime-dom'
+import { currentInstance } from './component'
+import type { DynamicSlot } from './componentSlots'
+import { renderEffect } from './renderEffect'
+import { VaporVForFlags } from '../../shared/src/vaporFlags'
+import {
+ advanceHydrationNode,
+ currentHydrationNode,
+ isHydrating,
+ locateFragmentAnchor,
+ locateHydrationNode,
+} from './dom/hydration'
+import { ForFragment, VaporFragment } from './fragment'
+import {
+ insertionAnchor,
+ insertionParent,
+ resetInsertionState,
+} from './insertionState'
+import { applyTransitionHooks } from './components/Transition'
+
+class ForBlock extends VaporFragment {
+ scope: EffectScope | undefined
+ key: any
+
+ itemRef: ShallowRef
+ keyRef: ShallowRef | undefined
+ indexRef: ShallowRef | undefined
+
+ constructor(
+ nodes: Block,
+ scope: EffectScope | undefined,
+ item: ShallowRef,
+ key: ShallowRef | undefined,
+ index: ShallowRef | undefined,
+ renderKey: any,
+ ) {
+ super(nodes)
+ this.scope = scope
+ this.itemRef = item
+ this.keyRef = key
+ this.indexRef = index
+ this.key = renderKey
+ }
+}
+
+type Source = any[] | Record | number | Set | Map
+
+type ResolvedSource = {
+ values: any[]
+ needsWrap: boolean
+ isReadonlySource: boolean
+ keys?: string[]
+}
+
+export const createFor = (
+ src: () => Source,
+ renderItem: (
+ item: ShallowRef,
+ key: ShallowRef,
+ index: ShallowRef,
+ ) => Block,
+ getKey?: (item: any, key: any, index?: number) => any,
+ flags = 0,
+ setup?: (_: {
+ createSelector: (source: () => any) => (cb: () => void) => void
+ }) => void,
+): ForFragment => {
+ const _insertionParent = insertionParent
+ const _insertionAnchor = insertionAnchor
+ if (isHydrating) {
+ locateHydrationNode()
+ } else {
+ resetInsertionState()
+ }
+
+ let isMounted = false
+ let oldBlocks: ForBlock[] = []
+ let newBlocks: ForBlock[]
+ let parent: ParentNode | undefined | null
+ // useSelector only
+ let currentKey: any
+ let parentAnchor: Node
+ if (!isHydrating) {
+ parentAnchor = __DEV__ ? createComment('for') : createTextNode()
+ }
+
+ const frag = new ForFragment(oldBlocks)
+ const instance = currentInstance!
+ const canUseFastRemove = !!(flags & VaporVForFlags.FAST_REMOVE)
+ const isComponent = !!(flags & VaporVForFlags.IS_COMPONENT)
+ const selectors: {
+ deregister: (key: any) => void
+ cleanup: () => void
+ }[] = []
+
+ if (__DEV__ && !instance) {
+ warn('createFor() can only be used inside setup()')
+ }
+
+ const renderList = () => {
+ const source = normalizeSource(src())
+ const newLength = source.values.length
+ const oldLength = oldBlocks.length
+ newBlocks = new Array(newLength)
+ let isFallback = false
+
+ const prevSub = setActiveSub()
+
+ if (!isMounted) {
+ isMounted = true
+ for (let i = 0; i < newLength; i++) {
+ mount(source, i)
+ }
+
+ if (isHydrating) {
+ parentAnchor = locateFragmentAnchor(
+ currentHydrationNode!,
+ FOR_ANCHOR_LABEL,
+ )!
+ if (__DEV__ && !parentAnchor) {
+ throw new Error(`v-for fragment anchor node was not found.`)
+ }
+ }
+ } else {
+ parent = parent || parentAnchor!.parentNode
+ if (!oldLength) {
+ // remove fallback nodes
+ if (frag.fallback && (frag.nodes[0] as Block[]).length > 0) {
+ remove(frag.nodes[0], parent!)
+ }
+
+ // fast path for all new
+ for (let i = 0; i < newLength; i++) {
+ mount(source, i)
+ }
+ } else if (!newLength) {
+ // fast path for clearing all
+ for (const selector of selectors) {
+ selector.cleanup()
+ }
+ const doRemove = !canUseFastRemove
+ for (let i = 0; i < oldLength; i++) {
+ unmount(oldBlocks[i], doRemove, false)
+ }
+ if (canUseFastRemove) {
+ parent!.textContent = ''
+ parent!.appendChild(parentAnchor)
+ }
+
+ // render fallback nodes
+ if (frag.fallback) {
+ insert((frag.nodes[0] = frag.fallback()), parent!, parentAnchor)
+ isFallback = true
+ }
+ } else if (!getKey) {
+ // unkeyed fast path
+ const commonLength = Math.min(newLength, oldLength)
+ for (let i = 0; i < commonLength; i++) {
+ update((newBlocks[i] = oldBlocks[i]), getItem(source, i)[0])
+ }
+ for (let i = oldLength; i < newLength; i++) {
+ mount(source, i)
+ }
+ for (let i = newLength; i < oldLength; i++) {
+ unmount(oldBlocks[i])
+ }
+ } else {
+ if (__DEV__) {
+ const keyToIndexMap: Map = new Map()
+ for (let i = 0; i < newLength; i++) {
+ const item = getItem(source, i)
+ const key = getKey(...item)
+ if (key != null) {
+ if (keyToIndexMap.has(key)) {
+ warn(
+ `Duplicate keys found during update:`,
+ JSON.stringify(key),
+ `Make sure keys are unique.`,
+ )
+ }
+ keyToIndexMap.set(key, i)
+ }
+ }
+ }
+
+ const sharedBlockCount = Math.min(oldLength, newLength)
+ const previousKeyIndexPairs: [any, number][] = new Array(oldLength)
+ const queuedBlocks: [
+ blockIndex: number,
+ blockItem: ReturnType,
+ blockKey: any,
+ ][] = new Array(newLength)
+
+ let anchorFallback: Node = parentAnchor
+ let endOffset = 0
+ let startOffset = 0
+ let queuedBlocksInsertIndex = 0
+ let previousKeyIndexInsertIndex = 0
+
+ while (endOffset < sharedBlockCount) {
+ const currentIndex = newLength - endOffset - 1
+ const currentItem = getItem(source, currentIndex)
+ const currentKey = getKey(...currentItem)
+ const existingBlock = oldBlocks[oldLength - endOffset - 1]
+ if (existingBlock.key === currentKey) {
+ update(existingBlock, ...currentItem)
+ newBlocks[currentIndex] = existingBlock
+ endOffset++
+ continue
+ }
+ break
+ }
+
+ if (endOffset !== 0) {
+ anchorFallback = normalizeAnchor(
+ newBlocks[newLength - endOffset].nodes,
+ )!
+ }
+
+ while (startOffset < sharedBlockCount - endOffset) {
+ const currentItem = getItem(source, startOffset)
+ const currentKey = getKey(...currentItem)
+ const previousBlock = oldBlocks[startOffset]
+ const previousKey = previousBlock.key
+ if (previousKey === currentKey) {
+ update((newBlocks[startOffset] = previousBlock), currentItem[0])
+ } else {
+ queuedBlocks[queuedBlocksInsertIndex++] = [
+ startOffset,
+ currentItem,
+ currentKey,
+ ]
+ previousKeyIndexPairs[previousKeyIndexInsertIndex++] = [
+ previousKey,
+ startOffset,
+ ]
+ }
+ startOffset++
+ }
+
+ for (let i = startOffset; i < oldLength - endOffset; i++) {
+ previousKeyIndexPairs[previousKeyIndexInsertIndex++] = [
+ oldBlocks[i].key,
+ i,
+ ]
+ }
+
+ const preparationBlockCount = Math.min(
+ newLength - endOffset,
+ sharedBlockCount,
+ )
+ for (let i = startOffset; i < preparationBlockCount; i++) {
+ const blockItem = getItem(source, i)
+ const blockKey = getKey(...blockItem)
+ queuedBlocks[queuedBlocksInsertIndex++] = [i, blockItem, blockKey]
+ }
+
+ if (!queuedBlocksInsertIndex && !previousKeyIndexInsertIndex) {
+ for (let i = preparationBlockCount; i < newLength - endOffset; i++) {
+ const blockItem = getItem(source, i)
+ const blockKey = getKey(...blockItem)
+ mount(source, i, anchorFallback, blockItem, blockKey)
+ }
+ } else {
+ queuedBlocks.length = queuedBlocksInsertIndex
+ previousKeyIndexPairs.length = previousKeyIndexInsertIndex
+
+ const previousKeyIndexMap = new Map(previousKeyIndexPairs)
+ const operations: (() => void)[] = []
+
+ let mountCounter = 0
+ const relocateOrMountBlock = (
+ blockIndex: number,
+ blockItem: ReturnType,
+ blockKey: any,
+ anchorOffset: number,
+ ) => {
+ const previousIndex = previousKeyIndexMap.get(blockKey)
+ if (previousIndex !== undefined) {
+ const reusedBlock = (newBlocks[blockIndex] =
+ oldBlocks[previousIndex])
+ update(reusedBlock, ...blockItem)
+ previousKeyIndexMap.delete(blockKey)
+ if (previousIndex !== blockIndex) {
+ operations.push(() =>
+ insert(
+ reusedBlock,
+ parent!,
+ anchorOffset === -1
+ ? anchorFallback
+ : normalizeAnchor(newBlocks[anchorOffset].nodes),
+ ),
+ )
+ }
+ } else {
+ mountCounter++
+ operations.push(() =>
+ mount(
+ source,
+ blockIndex,
+ anchorOffset === -1
+ ? anchorFallback
+ : normalizeAnchor(newBlocks[anchorOffset].nodes),
+ blockItem,
+ blockKey,
+ ),
+ )
+ }
+ }
+
+ for (let i = queuedBlocks.length - 1; i >= 0; i--) {
+ const [blockIndex, blockItem, blockKey] = queuedBlocks[i]
+ relocateOrMountBlock(
+ blockIndex,
+ blockItem,
+ blockKey,
+ blockIndex < preparationBlockCount - 1 ? blockIndex + 1 : -1,
+ )
+ }
+
+ for (let i = preparationBlockCount; i < newLength - endOffset; i++) {
+ const blockItem = getItem(source, i)
+ const blockKey = getKey(...blockItem)
+ relocateOrMountBlock(i, blockItem, blockKey, -1)
+ }
+
+ const useFastRemove = mountCounter === newLength
+
+ for (const leftoverIndex of previousKeyIndexMap.values()) {
+ unmount(
+ oldBlocks[leftoverIndex],
+ !(useFastRemove && canUseFastRemove),
+ !useFastRemove,
+ )
+ }
+ if (useFastRemove) {
+ for (const selector of selectors) {
+ selector.cleanup()
+ }
+ if (canUseFastRemove) {
+ parent!.textContent = ''
+ parent!.appendChild(parentAnchor)
+ }
+ }
+
+ // perform mount and move operations
+ for (const action of operations) {
+ action()
+ }
+ }
+ }
+ }
+
+ if (!isFallback) {
+ frag.nodes = [(oldBlocks = newBlocks)]
+ if (parentAnchor) frag.nodes.push(parentAnchor)
+ } else {
+ oldBlocks = []
+ }
+ setActiveSub(prevSub)
+ }
+
+ const needKey = renderItem.length > 1
+ const needIndex = renderItem.length > 2
+
+ const mount = (
+ source: ResolvedSource,
+ idx: number,
+ anchor: Node | undefined = parentAnchor,
+ [item, key, index] = getItem(source, idx),
+ key2 = getKey && getKey(item, key, index),
+ ): ForBlock => {
+ const itemRef = shallowRef(item)
+ // avoid creating refs if the render fn doesn't need it
+ const keyRef = needKey ? shallowRef(key) : undefined
+ const indexRef = needIndex ? shallowRef(index) : undefined
+
+ currentKey = key2
+ let nodes: Block
+ let scope: EffectScope | undefined
+ if (isComponent) {
+ // component already has its own scope so no outer scope needed
+ nodes = renderItem(itemRef, keyRef as any, indexRef as any)
+ } else {
+ scope = new EffectScope()
+ nodes = scope.run(() =>
+ renderItem(itemRef, keyRef as any, indexRef as any),
+ )!
+ }
+
+ const block = (newBlocks[idx] = new ForBlock(
+ nodes,
+ scope,
+ itemRef,
+ keyRef,
+ indexRef,
+ key2,
+ ))
+
+ // apply transition for new nodes
+ if (frag.$transition) {
+ applyTransitionHooks(block.nodes, frag.$transition, false)
+ }
+
+ if (parent) insert(block.nodes, parent, anchor)
+
+ return block
+ }
+
+ const update = (
+ { itemRef, keyRef, indexRef }: ForBlock,
+ newItem: any,
+ newKey?: any,
+ newIndex?: any,
+ ) => {
+ if (newItem !== itemRef.value) {
+ itemRef.value = newItem
+ }
+ if (keyRef && newKey !== undefined && newKey !== keyRef.value) {
+ keyRef.value = newKey
+ }
+ if (indexRef && newIndex !== undefined && newIndex !== indexRef.value) {
+ indexRef.value = newIndex
+ }
+ }
+
+ const unmount = (block: ForBlock, doRemove = true, doDeregister = true) => {
+ if (!isComponent) {
+ block.scope!.stop()
+ }
+ if (doRemove) {
+ removeBlock(block.nodes, parent!)
+ }
+ if (doDeregister) {
+ for (const selector of selectors) {
+ selector.deregister(block.key)
+ }
+ }
+ }
+
+ if (setup) {
+ setup({ createSelector })
+ }
+
+ if (flags & VaporVForFlags.ONCE) {
+ renderList()
+ } else {
+ renderEffect(renderList)
+ }
+
+ if (!isHydrating) {
+ if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor)
+ } else {
+ advanceHydrationNode(
+ _insertionAnchor !== undefined ? _insertionParent! : parentAnchor!,
+ )
+ }
+
+ return frag
+
+ function createSelector(source: () => any): (cb: () => void) => void {
+ let operMap = new Map void)[]>()
+ let activeKey = source()
+ let activeOpers: (() => void)[] | undefined
+
+ watch(source, newValue => {
+ if (activeOpers !== undefined) {
+ for (const oper of activeOpers) {
+ oper()
+ }
+ }
+ activeOpers = operMap.get(newValue)
+ if (activeOpers !== undefined) {
+ for (const oper of activeOpers) {
+ oper()
+ }
+ }
+ })
+
+ selectors.push({ deregister, cleanup })
+ return register
+
+ function cleanup() {
+ operMap = new Map()
+ activeOpers = undefined
+ }
+
+ function register(oper: () => void) {
+ oper()
+ let opers = operMap.get(currentKey)
+ if (opers !== undefined) {
+ opers.push(oper)
+ } else {
+ opers = [oper]
+ operMap.set(currentKey, opers)
+ if (currentKey === activeKey) {
+ activeOpers = opers
+ }
+ }
+ }
+
+ function deregister(key: any) {
+ operMap.delete(key)
+ if (key === activeKey) {
+ activeOpers = undefined
+ }
+ }
+ }
+}
+
+export function createForSlots(
+ rawSource: Source,
+ getSlot: (item: any, key: any, index?: number) => DynamicSlot,
+): DynamicSlot[] {
+ const source = normalizeSource(rawSource)
+ const sourceLength = source.values.length
+ const slots = new Array(sourceLength)
+ for (let i = 0; i < sourceLength; i++) {
+ slots[i] = getSlot(...getItem(source, i))
+ }
+ return slots
+}
+
+function normalizeSource(source: any): ResolvedSource {
+ let values = source
+ let needsWrap = false
+ let isReadonlySource = false
+ let keys
+ if (isArray(source)) {
+ if (isReactive(source)) {
+ needsWrap = !isShallow(source)
+ values = shallowReadArray(source)
+ isReadonlySource = isReadonly(source)
+ }
+ } else if (isString(source)) {
+ values = source.split('')
+ } else if (typeof source === 'number') {
+ if (__DEV__ && !Number.isInteger(source)) {
+ warn(`The v-for range expect an integer value but got ${source}.`)
+ }
+ values = new Array(source)
+ for (let i = 0; i < source; i++) values[i] = i + 1
+ } else if (isObject(source)) {
+ if (source[Symbol.iterator as any]) {
+ values = Array.from(source as Iterable)
+ } else {
+ keys = Object.keys(source)
+ values = new Array(keys.length)
+ for (let i = 0, l = keys.length; i < l; i++) {
+ values[i] = source[keys[i]]
+ }
+ }
+ }
+ return {
+ values,
+ needsWrap,
+ isReadonlySource,
+ keys,
+ }
+}
+
+function getItem(
+ { keys, values, needsWrap, isReadonlySource }: ResolvedSource,
+ idx: number,
+): [item: any, key: any, index?: number] {
+ const value = needsWrap
+ ? isReadonlySource
+ ? toReadonly(toReactive(values[idx]))
+ : toReactive(values[idx])
+ : values[idx]
+ if (keys) {
+ return [value, keys[idx], idx]
+ } else {
+ return [value, idx, undefined]
+ }
+}
+
+// runtime helper for rest element destructure
+export function getRestElement(val: any, keys: string[]): any {
+ const res: any = {}
+ for (const key in val) {
+ if (!keys.includes(key)) res[key] = val[key]
+ }
+ return res
+}
+
+export function getDefaultValue(val: any, defaultVal: any): any {
+ return val === undefined ? defaultVal : val
+}
+
+export function isForBlock(block: Block): block is ForBlock {
+ return block instanceof ForBlock
+}
diff --git a/packages/runtime-vapor/src/apiCreateFragment.ts b/packages/runtime-vapor/src/apiCreateFragment.ts
new file mode 100644
index 00000000000..d4bb8763681
--- /dev/null
+++ b/packages/runtime-vapor/src/apiCreateFragment.ts
@@ -0,0 +1,11 @@
+import type { Block, BlockFn } from './block'
+import { DynamicFragment } from './fragment'
+import { renderEffect } from './renderEffect'
+
+export function createKeyedFragment(key: () => any, render: BlockFn): Block {
+ const frag = __DEV__ ? new DynamicFragment('keyed') : new DynamicFragment()
+ renderEffect(() => {
+ frag.update(render, key())
+ })
+ return frag
+}
diff --git a/packages/runtime-vapor/src/apiCreateIf.ts b/packages/runtime-vapor/src/apiCreateIf.ts
new file mode 100644
index 00000000000..d9432b497e9
--- /dev/null
+++ b/packages/runtime-vapor/src/apiCreateIf.ts
@@ -0,0 +1,48 @@
+import { IF_ANCHOR_LABEL } from '@vue/shared'
+import { type Block, type BlockFn, insert } from './block'
+import { advanceHydrationNode, isHydrating } from './dom/hydration'
+import {
+ insertionAnchor,
+ insertionParent,
+ resetInsertionState,
+} from './insertionState'
+import { renderEffect } from './renderEffect'
+import { DynamicFragment } from './fragment'
+
+export function createIf(
+ condition: () => any,
+ b1: BlockFn,
+ b2?: BlockFn,
+ once?: boolean,
+): Block {
+ const _insertionParent = insertionParent
+ const _insertionAnchor = insertionAnchor
+ if (!isHydrating) resetInsertionState()
+
+ let frag: Block
+ if (once) {
+ frag = condition() ? b1() : b2 ? b2() : []
+ } else {
+ frag =
+ isHydrating || __DEV__
+ ? new DynamicFragment(IF_ANCHOR_LABEL)
+ : new DynamicFragment()
+ renderEffect(() => (frag as DynamicFragment).update(condition() ? b1 : b2))
+ }
+
+ if (!isHydrating) {
+ if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor)
+ } else {
+ // After block node hydration is completed, advance currentHydrationNode to
+ // _insertionParent's next sibling if _insertionAnchor has a value
+ // _insertionAnchor values:
+ // 1. Node type: _insertionAnchor is a static node, no hydration needed
+ // 2. null: block node is appended, potentially without next sibling
+ // 3. 0: next sibling of current block node is static, no hydration needed
+ if (_insertionAnchor !== undefined) {
+ advanceHydrationNode(_insertionParent!)
+ }
+ }
+
+ return frag
+}
diff --git a/packages/runtime-vapor/src/apiDefineAsyncComponent.ts b/packages/runtime-vapor/src/apiDefineAsyncComponent.ts
new file mode 100644
index 00000000000..e609dfa795d
--- /dev/null
+++ b/packages/runtime-vapor/src/apiDefineAsyncComponent.ts
@@ -0,0 +1,139 @@
+import {
+ type AsyncComponentLoader,
+ type AsyncComponentOptions,
+ ErrorCodes,
+ createAsyncComponentContext,
+ currentInstance,
+ handleError,
+ markAsyncBoundary,
+ useAsyncComponentState,
+} from '@vue/runtime-dom'
+import { defineVaporComponent } from './apiDefineComponent'
+import {
+ type VaporComponent,
+ type VaporComponentInstance,
+ createComponent,
+} from './component'
+import { renderEffect } from './renderEffect'
+import { DynamicFragment } from './fragment'
+
+/*! #__NO_SIDE_EFFECTS__ */
+export function defineVaporAsyncComponent(
+ source: AsyncComponentLoader | AsyncComponentOptions,
+): T {
+ const {
+ load,
+ getResolvedComp,
+ setPendingRequest,
+ source: {
+ loadingComponent,
+ errorComponent,
+ delay,
+ // hydrate: hydrateStrategy,
+ timeout,
+ // suspensible = true,
+ },
+ } = createAsyncComponentContext(source)
+
+ return defineVaporComponent({
+ name: 'VaporAsyncComponentWrapper',
+
+ __asyncLoader: load,
+
+ // __asyncHydrate(el, instance, hydrate) {
+ // // TODO async hydrate
+ // },
+
+ get __asyncResolved() {
+ return getResolvedComp()
+ },
+
+ setup() {
+ const instance = currentInstance as VaporComponentInstance
+ markAsyncBoundary(instance)
+
+ const frag = __DEV__
+ ? new DynamicFragment('async component')
+ : new DynamicFragment()
+
+ // already resolved
+ let resolvedComp = getResolvedComp()
+ if (resolvedComp) {
+ frag.update(() => createInnerComp(resolvedComp!, instance))
+ return frag
+ }
+
+ const onError = (err: Error) => {
+ setPendingRequest(null)
+ handleError(
+ err,
+ instance,
+ ErrorCodes.ASYNC_COMPONENT_LOADER,
+ !errorComponent /* do not throw in dev if user provided error component */,
+ )
+ }
+
+ // TODO suspense-controlled or SSR.
+
+ const { loaded, error, delayed } = useAsyncComponentState(
+ delay,
+ timeout,
+ onError,
+ )
+
+ load()
+ .then(() => {
+ loaded.value = true
+ // TODO parent is keep-alive, force update so the loaded component's
+ // name is taken into account
+ })
+ .catch(err => {
+ onError(err)
+ error.value = err
+ })
+
+ renderEffect(() => {
+ resolvedComp = getResolvedComp()
+ let render
+ if (loaded.value && resolvedComp) {
+ render = () => createInnerComp(resolvedComp!, instance, frag)
+ } else if (error.value && errorComponent) {
+ render = () =>
+ createComponent(errorComponent, { error: () => error.value })
+ } else if (loadingComponent && !delayed.value) {
+ render = () => createComponent(loadingComponent)
+ }
+ frag.update(render)
+ })
+
+ return frag
+ },
+ }) as T
+}
+
+function createInnerComp(
+ comp: VaporComponent,
+ parent: VaporComponentInstance,
+ frag?: DynamicFragment,
+): VaporComponentInstance {
+ const { rawProps, rawSlots, isSingleRoot, appContext } = parent
+ const instance = createComponent(
+ comp,
+ rawProps,
+ rawSlots,
+ isSingleRoot,
+ undefined,
+ undefined,
+ appContext,
+ )
+
+ // set ref
+ frag && frag.setRef && frag.setRef(instance)
+
+ // TODO custom element
+ // pass the custom element callback on to the inner comp
+ // and remove it from the async wrapper
+ // i.ce = ce
+ // delete parent.ce
+ return instance
+}
diff --git a/packages/runtime-vapor/src/apiDefineComponent.ts b/packages/runtime-vapor/src/apiDefineComponent.ts
new file mode 100644
index 00000000000..430f87cdd50
--- /dev/null
+++ b/packages/runtime-vapor/src/apiDefineComponent.ts
@@ -0,0 +1,21 @@
+import type { ObjectVaporComponent, VaporComponent } from './component'
+import { extend, isFunction } from '@vue/shared'
+
+/*! #__NO_SIDE_EFFECTS__ */
+export function defineVaporComponent(
+ comp: VaporComponent,
+ extraOptions?: Omit,
+): VaporComponent {
+ if (isFunction(comp)) {
+ // #8236: extend call and options.name access are considered side-effects
+ // by Rollup, so we have to wrap it in a pure-annotated IIFE.
+ return /*@__PURE__*/ (() =>
+ extend({ name: comp.name }, extraOptions, {
+ setup: comp,
+ __vapor: true,
+ }))()
+ }
+ // TODO type inference
+ comp.__vapor = true
+ return comp
+}
diff --git a/packages/runtime-vapor/src/apiTemplateRef.ts b/packages/runtime-vapor/src/apiTemplateRef.ts
new file mode 100644
index 00000000000..3a34f5bd836
--- /dev/null
+++ b/packages/runtime-vapor/src/apiTemplateRef.ts
@@ -0,0 +1,169 @@
+import { type Ref, isRef, onScopeDispose } from '@vue/reactivity'
+import {
+ type VaporComponentInstance,
+ currentInstance,
+ getExposed,
+ isVaporComponent,
+} from './component'
+import {
+ ErrorCodes,
+ type SchedulerJob,
+ callWithErrorHandling,
+ isAsyncWrapper,
+ queuePostFlushCb,
+ warn,
+} from '@vue/runtime-dom'
+import {
+ EMPTY_OBJ,
+ hasOwn,
+ isArray,
+ isFunction,
+ isString,
+ remove,
+} from '@vue/shared'
+import { DynamicFragment } from './fragment'
+
+export type NodeRef = string | Ref | ((ref: Element) => void)
+export type RefEl = Element | VaporComponentInstance
+
+export type setRefFn = (
+ el: RefEl,
+ ref: NodeRef,
+ oldRef?: NodeRef,
+ refFor?: boolean,
+) => NodeRef | undefined
+
+export function createTemplateRefSetter(): setRefFn {
+ const instance = currentInstance as VaporComponentInstance
+ return (...args) => setRef(instance, ...args)
+}
+
+/**
+ * Function for handling a template ref
+ */
+export function setRef(
+ instance: VaporComponentInstance,
+ el: RefEl,
+ ref: NodeRef,
+ oldRef?: NodeRef,
+ refFor = false,
+): NodeRef | undefined {
+ if (!instance || instance.isUnmounted) return
+
+ const isVaporComp = isVaporComponent(el)
+ if (isVaporComp && isAsyncWrapper(el as VaporComponentInstance)) {
+ const i = el as VaporComponentInstance
+ const frag = i.block as DynamicFragment
+ // async component not resolved yet
+ if (!i.type.__asyncResolved) {
+ frag.setRef = i => setRef(instance, i, ref, oldRef, refFor)
+ return
+ }
+
+ // set ref to the inner component instead
+ el = frag.nodes as VaporComponentInstance
+ }
+
+ const setupState: any = __DEV__ ? instance.setupState || {} : null
+ const refValue = getRefValue(el)
+
+ const refs =
+ instance.refs === EMPTY_OBJ ? (instance.refs = {}) : instance.refs
+
+ // dynamic ref changed. unset old ref
+ if (oldRef != null && oldRef !== ref) {
+ if (isString(oldRef)) {
+ refs[oldRef] = null
+ if (__DEV__ && hasOwn(setupState, oldRef)) {
+ setupState[oldRef] = null
+ }
+ } else if (isRef(oldRef)) {
+ oldRef.value = null
+ }
+ }
+
+ if (isFunction(ref)) {
+ const invokeRefSetter = (value?: Element | Record) => {
+ callWithErrorHandling(ref, currentInstance, ErrorCodes.FUNCTION_REF, [
+ value,
+ refs,
+ ])
+ }
+
+ invokeRefSetter(refValue)
+ // TODO this gets called repeatedly in renderEffect when it's dynamic ref?
+ onScopeDispose(() => invokeRefSetter())
+ } else {
+ const _isString = isString(ref)
+ const _isRef = isRef(ref)
+ let existing: unknown
+
+ if (_isString || _isRef) {
+ const doSet: SchedulerJob = () => {
+ if (refFor) {
+ existing = _isString
+ ? __DEV__ && hasOwn(setupState, ref)
+ ? setupState[ref]
+ : refs[ref]
+ : ref.value
+
+ if (!isArray(existing)) {
+ existing = [refValue]
+ if (_isString) {
+ refs[ref] = existing
+ if (__DEV__ && hasOwn(setupState, ref)) {
+ setupState[ref] = refs[ref]
+ // if setupState[ref] is a reactivity ref,
+ // the existing will also become reactivity too
+ // need to get the Proxy object by resetting
+ existing = setupState[ref]
+ }
+ } else {
+ ref.value = existing
+ }
+ } else if (!existing.includes(refValue)) {
+ existing.push(refValue)
+ }
+ } else if (_isString) {
+ refs[ref] = refValue
+ if (__DEV__ && hasOwn(setupState, ref)) {
+ setupState[ref] = refValue
+ }
+ } else if (_isRef) {
+ ref.value = refValue
+ } else if (__DEV__) {
+ warn('Invalid template ref type:', ref, `(${typeof ref})`)
+ }
+ }
+ queuePostFlushCb(doSet, -1)
+
+ // TODO this gets called repeatedly in renderEffect when it's dynamic ref?
+ onScopeDispose(() => {
+ queuePostFlushCb(() => {
+ if (isArray(existing)) {
+ remove(existing, refValue)
+ } else if (_isString) {
+ refs[ref] = null
+ if (__DEV__ && hasOwn(setupState, ref)) {
+ setupState[ref] = null
+ }
+ } else if (_isRef) {
+ ref.value = null
+ }
+ })
+ })
+ } else if (__DEV__) {
+ warn('Invalid template ref type:', ref, `(${typeof ref})`)
+ }
+ }
+ return ref
+}
+
+const getRefValue = (el: RefEl) => {
+ if (isVaporComponent(el)) {
+ return getExposed(el) || el
+ } else if (el instanceof DynamicFragment) {
+ return getRefValue(el.nodes as RefEl)
+ }
+ return el
+}
diff --git a/packages/runtime-vapor/src/block.ts b/packages/runtime-vapor/src/block.ts
new file mode 100644
index 00000000000..04b0a4881cb
--- /dev/null
+++ b/packages/runtime-vapor/src/block.ts
@@ -0,0 +1,235 @@
+import { isArray } from '@vue/shared'
+import {
+ type VaporComponentInstance,
+ isVaporComponent,
+ mountComponent,
+ unmountComponent,
+} from './component'
+import {
+ type TransitionHooks,
+ type TransitionProps,
+ type TransitionState,
+ performTransitionEnter,
+ performTransitionLeave,
+} from '@vue/runtime-dom'
+import { isHydrating } from './dom/hydration'
+import { getInheritedScopeIds } from '@vue/runtime-dom'
+import {
+ type DynamicFragment,
+ type VaporFragment,
+ isFragment,
+} from './fragment'
+
+export interface TransitionOptions {
+ $key?: any
+ $transition?: VaporTransitionHooks
+}
+
+export interface VaporTransitionHooks extends TransitionHooks {
+ state: TransitionState
+ props: TransitionProps
+ instance: VaporComponentInstance
+ // mark transition hooks as disabled so that it skips during
+ // inserting
+ disabled?: boolean
+}
+
+export type TransitionBlock =
+ | (Node & TransitionOptions)
+ | (VaporFragment & TransitionOptions)
+ | (DynamicFragment & TransitionOptions)
+
+export type Block = TransitionBlock | VaporComponentInstance | Block[]
+
+export type BlockFn = (...args: any[]) => Block
+
+export function isBlock(val: NonNullable): val is Block {
+ return (
+ val instanceof Node ||
+ isArray(val) ||
+ isVaporComponent(val) ||
+ isFragment(val)
+ )
+}
+
+export function isValidBlock(block: Block): boolean {
+ if (block instanceof Node) {
+ return !(block instanceof Comment)
+ } else if (isVaporComponent(block)) {
+ return isValidBlock(block.block)
+ } else if (isArray(block)) {
+ return block.length > 0 && block.some(isValidBlock)
+ } else {
+ // fragment
+ return isValidBlock(block.nodes)
+ }
+}
+
+export function insert(
+ block: Block,
+ parent: ParentNode,
+ anchor: Node | null | 0 = null, // 0 means prepend
+ parentSuspense?: any, // TODO Suspense
+): void {
+ anchor = anchor === 0 ? parent.firstChild : anchor
+ if (block instanceof Node) {
+ if (!isHydrating) {
+ // only apply transition on Element nodes
+ if (
+ block instanceof Element &&
+ (block as TransitionBlock).$transition &&
+ !(block as TransitionBlock).$transition!.disabled
+ ) {
+ performTransitionEnter(
+ block,
+ (block as TransitionBlock).$transition as TransitionHooks,
+ () => parent.insertBefore(block, anchor as Node),
+ parentSuspense,
+ )
+ } else {
+ parent.insertBefore(block, anchor)
+ }
+ }
+ } else if (isVaporComponent(block)) {
+ if (block.isMounted) {
+ insert(block.block!, parent, anchor)
+ } else {
+ mountComponent(block, parent, anchor)
+ }
+ } else if (isArray(block)) {
+ for (const b of block) {
+ insert(b, parent, anchor)
+ }
+ } else {
+ if (block.anchor) {
+ insert(block.anchor, parent, anchor)
+ anchor = block.anchor
+ }
+ // fragment
+ if (block.insert) {
+ block.insert(parent, anchor, (block as TransitionBlock).$transition)
+ } else {
+ insert(
+ block.nodes,
+ block.target || parent,
+ block.targetAnchor || anchor,
+ parentSuspense,
+ )
+ }
+ }
+}
+
+export type InsertFn = typeof insert
+
+export function prepend(parent: ParentNode, ...blocks: Block[]): void {
+ let i = blocks.length
+ while (i--) insert(blocks[i], parent, 0)
+}
+
+export function remove(block: Block, parent?: ParentNode): void {
+ if (block instanceof Node) {
+ if ((block as TransitionBlock).$transition && block instanceof Element) {
+ performTransitionLeave(
+ block,
+ (block as TransitionBlock).$transition as TransitionHooks,
+ () => parent && parent.removeChild(block),
+ )
+ } else {
+ parent && parent.removeChild(block)
+ }
+ } else if (isVaporComponent(block)) {
+ unmountComponent(block, parent)
+ } else if (isArray(block)) {
+ for (let i = 0; i < block.length; i++) {
+ remove(block[i], parent)
+ }
+ } else {
+ // fragment
+ if (block.remove) {
+ block.remove(parent, (block as TransitionBlock).$transition)
+ } else {
+ remove(block.nodes, parent)
+ }
+ if (block.anchor) remove(block.anchor, parent)
+ if ((block as DynamicFragment).scope) {
+ ;(block as DynamicFragment).scope!.stop()
+ }
+ }
+}
+
+export function normalizeAnchor(node: Block): Node | undefined {
+ if (node && node instanceof Node) {
+ return node
+ } else if (isArray(node)) {
+ return normalizeAnchor(node[0])
+ } else if (isVaporComponent(node)) {
+ return normalizeAnchor(node.block!)
+ } else {
+ return normalizeAnchor(node.nodes!)
+ }
+}
+
+/**
+ * dev / test only
+ */
+export function normalizeBlock(block: Block): Node[] {
+ if (!__DEV__ && !__TEST__) {
+ throw new Error(
+ 'normalizeBlock should not be used in production code paths',
+ )
+ }
+ const nodes: Node[] = []
+ if (block instanceof Node) {
+ nodes.push(block)
+ } else if (isArray(block)) {
+ block.forEach(child => nodes.push(...normalizeBlock(child)))
+ } else if (isVaporComponent(block)) {
+ nodes.push(...normalizeBlock(block.block!))
+ } else {
+ if (block.getNodes) {
+ nodes.push(...normalizeBlock(block.getNodes()))
+ } else {
+ nodes.push(...normalizeBlock(block.nodes))
+ }
+ block.anchor && nodes.push(block.anchor)
+ }
+ return nodes
+}
+
+export function setScopeId(block: Block, scopeId: string): void {
+ if (block instanceof Element) {
+ block.setAttribute(scopeId, '')
+ } else if (isVaporComponent(block)) {
+ setScopeId(block.block, scopeId)
+ } else if (isArray(block)) {
+ for (const b of block) {
+ setScopeId(b, scopeId)
+ }
+ } else if (isFragment(block)) {
+ setScopeId(block.nodes, scopeId)
+ }
+}
+
+export function setComponentScopeId(instance: VaporComponentInstance): void {
+ const parent = instance.parent
+ if (!parent) return
+ if (isArray(instance.block) && instance.block.length > 1) return
+
+ const scopeId = parent.type.__scopeId
+ if (scopeId) {
+ setScopeId(instance.block, scopeId)
+ }
+
+ // inherit scopeId from vdom parent
+ if (
+ parent.subTree &&
+ (parent.subTree.component as any) === instance &&
+ parent.vnode!.scopeId
+ ) {
+ setScopeId(instance.block, parent.vnode!.scopeId)
+ const scopeIds = getInheritedScopeIds(parent.vnode!, parent.parent)
+ for (const id of scopeIds) {
+ setScopeId(instance.block, id)
+ }
+ }
+}
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
new file mode 100644
index 00000000000..13963db45f9
--- /dev/null
+++ b/packages/runtime-vapor/src/component.ts
@@ -0,0 +1,679 @@
+import {
+ type ComponentInternalOptions,
+ type ComponentPropsOptions,
+ EffectScope,
+ type EmitFn,
+ type EmitsOptions,
+ ErrorCodes,
+ type GenericAppContext,
+ type GenericComponentInstance,
+ type LifecycleHook,
+ type NormalizedPropsOptions,
+ type ObjectEmitsOptions,
+ type SuspenseBoundary,
+ callWithErrorHandling,
+ currentInstance,
+ endMeasure,
+ expose,
+ nextUid,
+ popWarningContext,
+ pushWarningContext,
+ queuePostFlushCb,
+ registerHMR,
+ setCurrentInstance,
+ startMeasure,
+ unregisterHMR,
+ warn,
+} from '@vue/runtime-dom'
+import {
+ type Block,
+ insert,
+ isBlock,
+ remove,
+ setComponentScopeId,
+ setScopeId,
+} from './block'
+import {
+ type ShallowRef,
+ markRaw,
+ onScopeDispose,
+ proxyRefs,
+ setActiveSub,
+ unref,
+} from '@vue/reactivity'
+import { EMPTY_OBJ, invokeArrayFns, isFunction, isString } from '@vue/shared'
+import {
+ type DynamicPropsSource,
+ type RawProps,
+ getKeysFromRawProps,
+ getPropsProxyHandlers,
+ hasFallthroughAttrs,
+ normalizePropsOptions,
+ resolveDynamicProps,
+ setupPropsValidation,
+} from './componentProps'
+import { renderEffect } from './renderEffect'
+import { emit, normalizeEmitsOptions } from './componentEmits'
+import { setDynamicProps } from './dom/prop'
+import {
+ type DynamicSlotSource,
+ type RawSlots,
+ type StaticSlots,
+ type VaporSlot,
+ dynamicSlotsProxyHandlers,
+ getSlot,
+} from './componentSlots'
+import { hmrReload, hmrRerender } from './hmr'
+import { createElement } from './dom/node'
+import {
+ adoptTemplate,
+ advanceHydrationNode,
+ currentHydrationNode,
+ isHydrating,
+ locateHydrationNode,
+ setCurrentHydrationNode,
+} from './dom/hydration'
+import { isVaporTeleport } from './components/Teleport'
+import {
+ insertionAnchor,
+ insertionParent,
+ resetInsertionState,
+} from './insertionState'
+import { DynamicFragment } from './fragment'
+
+export { currentInstance } from '@vue/runtime-dom'
+
+export type VaporComponent = FunctionalVaporComponent | ObjectVaporComponent
+
+export type VaporSetupFn = (
+ props: any,
+ ctx: Pick,
+) => Block | Record | undefined
+
+export type FunctionalVaporComponent = VaporSetupFn &
+ Omit & {
+ displayName?: string
+ } & SharedInternalOptions
+
+export interface ObjectVaporComponent
+ extends ComponentInternalOptions,
+ SharedInternalOptions {
+ setup?: VaporSetupFn
+ inheritAttrs?: boolean
+ props?: ComponentPropsOptions
+ emits?: EmitsOptions
+ render?(
+ ctx: any,
+ props?: any,
+ emit?: EmitFn,
+ attrs?: any,
+ slots?: Record,
+ ): Block
+
+ name?: string
+ vapor?: boolean
+ __asyncLoader?: () => Promise
+ __asyncResolved?: VaporComponent
+}
+
+interface SharedInternalOptions {
+ /**
+ * Cached normalized props options.
+ * In vapor mode there are no mixins so normalized options can be cached
+ * directly on the component
+ */
+ __propsOptions?: NormalizedPropsOptions
+ /**
+ * Cached normalized props proxy handlers.
+ */
+ __propsHandlers?: [ProxyHandler | null, ProxyHandler]
+ /**
+ * Cached normalized emits options.
+ */
+ __emitsOptions?: ObjectEmitsOptions
+}
+
+// In TypeScript, it is actually impossible to have a record type with only
+// specific properties that have a different type from the indexed type.
+// This makes our rawProps / rawSlots shape difficult to satisfy when calling
+// `createComponent` - luckily this is not user-facing, so we don't need to be
+// 100% strict. Here we use intentionally wider types to make `createComponent`
+// more ergonomic in tests and internal call sites, where we immediately cast
+// them into the stricter types.
+export type LooseRawProps = Record<
+ string,
+ (() => unknown) | DynamicPropsSource[]
+> & {
+ $?: DynamicPropsSource[]
+}
+
+export type LooseRawSlots = Record & {
+ $?: DynamicSlotSource[]
+}
+
+export function createComponent(
+ component: VaporComponent,
+ rawProps?: LooseRawProps | null,
+ rawSlots?: LooseRawSlots | null,
+ isSingleRoot?: boolean,
+ once?: boolean, // TODO once support
+ scopeId?: string,
+ appContext: GenericAppContext = (currentInstance &&
+ currentInstance.appContext) ||
+ emptyContext,
+): VaporComponentInstance {
+ const _insertionParent = insertionParent
+ const _insertionAnchor = insertionAnchor
+ if (isHydrating) {
+ locateHydrationNode()
+ } else {
+ resetInsertionState()
+ }
+
+ // vdom interop enabled and component is not an explicit vapor component
+ if (appContext.vapor && !component.__vapor) {
+ const frag = appContext.vapor.vdomMount(
+ component as any,
+ rawProps,
+ rawSlots,
+ scopeId,
+ )
+
+ if (!isHydrating) {
+ if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor)
+ } else {
+ frag.hydrate()
+ if (_insertionAnchor !== undefined) {
+ advanceHydrationNode(_insertionParent!)
+ }
+ }
+
+ return frag
+ }
+
+ // teleport
+ if (isVaporTeleport(component)) {
+ const frag = component.process(rawProps!, rawSlots!)
+ if (!isHydrating) {
+ if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor)
+ } else {
+ frag.hydrate()
+ if (_insertionAnchor !== undefined) {
+ advanceHydrationNode(_insertionParent!)
+ }
+ }
+
+ return frag as any
+ }
+
+ if (
+ isSingleRoot &&
+ component.inheritAttrs !== false &&
+ isVaporComponent(currentInstance) &&
+ currentInstance.hasFallthrough
+ ) {
+ // check if we are the single root of the parent
+ // if yes, inject parent attrs as dynamic props source
+ const attrs = currentInstance.attrs
+ if (rawProps) {
+ ;((rawProps as RawProps).$ || ((rawProps as RawProps).$ = [])).push(
+ () => attrs,
+ )
+ } else {
+ rawProps = { $: [() => attrs] } as RawProps
+ }
+ }
+
+ const instance = new VaporComponentInstance(
+ component,
+ rawProps as RawProps,
+ rawSlots as RawSlots,
+ appContext,
+ )
+
+ // HMR
+ if (__DEV__ && component.__hmrId) {
+ registerHMR(instance)
+ instance.isSingleRoot = isSingleRoot
+ instance.hmrRerender = hmrRerender.bind(null, instance)
+ instance.hmrReload = hmrReload.bind(null, instance)
+ }
+
+ if (__DEV__) {
+ pushWarningContext(instance)
+ startMeasure(instance, `init`)
+
+ // cache normalized options for dev only emit check
+ instance.propsOptions = normalizePropsOptions(component)
+ instance.emitsOptions = normalizeEmitsOptions(component)
+ }
+
+ const prevInstance = setCurrentInstance(instance)
+ const prevSub = setActiveSub()
+
+ if (__DEV__) {
+ setupPropsValidation(instance)
+ }
+
+ const setupFn = isFunction(component) ? component : component.setup
+ const setupResult = setupFn
+ ? callWithErrorHandling(setupFn, instance, ErrorCodes.SETUP_FUNCTION, [
+ instance.props,
+ instance,
+ ]) || EMPTY_OBJ
+ : EMPTY_OBJ
+
+ if (__DEV__ && !isBlock(setupResult)) {
+ if (isFunction(component)) {
+ warn(`Functional vapor component must return a block directly.`)
+ instance.block = []
+ } else if (!component.render) {
+ warn(
+ `Vapor component setup() returned non-block value, and has no render function.`,
+ )
+ instance.block = []
+ } else {
+ instance.devtoolsRawSetupState = setupResult
+ // TODO make the proxy warn non-existent property access during dev
+ instance.setupState = proxyRefs(setupResult)
+ devRender(instance)
+ }
+ } else {
+ // component has a render function but no setup function
+ // (typically components with only a template and no state)
+ if (!setupFn && component.render) {
+ instance.block = callWithErrorHandling(
+ component.render,
+ instance,
+ ErrorCodes.RENDER_FUNCTION,
+ )
+ } else {
+ // in prod result can only be block
+ instance.block = setupResult as Block
+ }
+ }
+
+ // single root, inherit attrs
+ if (
+ instance.hasFallthrough &&
+ component.inheritAttrs !== false &&
+ Object.keys(instance.attrs).length
+ ) {
+ const el = getRootElement(instance)
+ if (el) {
+ renderEffect(() => applyFallthroughProps(el, instance.attrs))
+ }
+ }
+
+ setActiveSub(prevSub)
+ setCurrentInstance(...prevInstance)
+
+ if (__DEV__) {
+ popWarningContext()
+ endMeasure(instance, 'init')
+ }
+
+ onScopeDispose(() => unmountComponent(instance), true)
+
+ if (scopeId) setScopeId(instance.block, scopeId)
+
+ if (_insertionParent) {
+ mountComponent(instance, _insertionParent, _insertionAnchor)
+ }
+
+ if (isHydrating && _insertionAnchor !== undefined) {
+ advanceHydrationNode(_insertionParent!)
+ }
+ return instance
+}
+
+export let isApplyingFallthroughProps = false
+
+export function applyFallthroughProps(
+ block: Block,
+ attrs: Record,
+): void {
+ isApplyingFallthroughProps = true
+ setDynamicProps(block as Element, [attrs])
+ isApplyingFallthroughProps = false
+}
+
+/**
+ * dev only
+ */
+export function devRender(instance: VaporComponentInstance): void {
+ instance.block =
+ (instance.type.render
+ ? callWithErrorHandling(
+ instance.type.render,
+ instance,
+ ErrorCodes.RENDER_FUNCTION,
+ [
+ instance.setupState,
+ instance.props,
+ instance.emit,
+ instance.attrs,
+ instance.slots,
+ ],
+ )
+ : callWithErrorHandling(
+ isFunction(instance.type) ? instance.type : instance.type.setup!,
+ instance,
+ ErrorCodes.SETUP_FUNCTION,
+ [
+ instance.props,
+ {
+ slots: instance.slots,
+ attrs: instance.attrs,
+ emit: instance.emit,
+ expose: instance.expose,
+ },
+ ],
+ )) || []
+}
+
+export const emptyContext: GenericAppContext = {
+ app: null as any,
+ config: {},
+ provides: /*@__PURE__*/ Object.create(null),
+}
+
+export class VaporComponentInstance implements GenericComponentInstance {
+ vapor: true
+ uid: number
+ type: VaporComponent
+ root: GenericComponentInstance | null
+ parent: GenericComponentInstance | null
+ appContext: GenericAppContext
+
+ block: Block
+ scope: EffectScope
+
+ rawProps: RawProps
+ rawSlots: RawSlots
+
+ props: Record
+ attrs: Record
+ propsDefaults: Record | null
+
+ slots: StaticSlots
+
+ // to hold vnode props / slots in vdom interop mode
+ rawPropsRef?: ShallowRef
+ rawSlotsRef?: ShallowRef
+
+ emit: EmitFn
+ emitted: Record | null
+
+ expose: (exposed: Record) => void
+ exposed: Record | null
+ exposeProxy: Record | null
+
+ // for useTemplateRef()
+ refs: Record
+ // for provide / inject
+ provides: Record
+ // for useId
+ ids: [string, number, number]
+ // for suspense
+ suspense: SuspenseBoundary | null
+
+ hasFallthrough: boolean
+
+ // lifecycle hooks
+ isMounted: boolean
+ isUnmounted: boolean
+ isDeactivated: boolean
+ isUpdating: boolean
+
+ bc?: LifecycleHook // LifecycleHooks.BEFORE_CREATE
+ c?: LifecycleHook // LifecycleHooks.CREATED
+ bm?: LifecycleHook // LifecycleHooks.BEFORE_MOUNT
+ m?: LifecycleHook // LifecycleHooks.MOUNTED
+ bu?: LifecycleHook // LifecycleHooks.BEFORE_UPDATE
+ u?: LifecycleHook // LifecycleHooks.UPDATED
+ um?: LifecycleHook // LifecycleHooks.BEFORE_UNMOUNT
+ bum?: LifecycleHook // LifecycleHooks.UNMOUNTED
+ da?: LifecycleHook // LifecycleHooks.DEACTIVATED
+ a?: LifecycleHook // LifecycleHooks.ACTIVATED
+ rtg?: LifecycleHook // LifecycleHooks.RENDER_TRACKED
+ rtc?: LifecycleHook // LifecycleHooks.RENDER_TRIGGERED
+ ec?: LifecycleHook // LifecycleHooks.ERROR_CAPTURED
+ sp?: LifecycleHook<() => Promise> // LifecycleHooks.SERVER_PREFETCH
+
+ // dev only
+ setupState?: Record
+ devtoolsRawSetupState?: any
+ hmrRerender?: () => void
+ hmrRerenderEffects?: (() => void)[]
+ hmrReload?: (newComp: VaporComponent) => void
+ propsOptions?: NormalizedPropsOptions
+ emitsOptions?: ObjectEmitsOptions | null
+ isSingleRoot?: boolean
+
+ constructor(
+ comp: VaporComponent,
+ rawProps?: RawProps | null,
+ rawSlots?: RawSlots | null,
+ appContext?: GenericAppContext,
+ ) {
+ this.vapor = true
+ this.uid = nextUid()
+ this.type = comp
+ this.parent = currentInstance
+ this.root = currentInstance ? currentInstance.root : this
+
+ if (currentInstance) {
+ this.appContext = currentInstance.appContext
+ this.provides = currentInstance.provides
+ this.ids = currentInstance.ids
+ } else {
+ this.appContext = appContext || emptyContext
+ this.provides = Object.create(this.appContext.provides)
+ this.ids = ['', 0, 0]
+ }
+
+ this.block = null! // to be set
+ this.scope = new EffectScope(true)
+
+ this.emit = emit.bind(null, this)
+ this.expose = expose.bind(null, this)
+ this.refs = EMPTY_OBJ
+ this.emitted =
+ this.exposed =
+ this.exposeProxy =
+ this.propsDefaults =
+ this.suspense =
+ null
+
+ this.isMounted =
+ this.isUnmounted =
+ this.isUpdating =
+ this.isDeactivated =
+ false
+
+ // init props
+ this.rawProps = rawProps || EMPTY_OBJ
+ this.hasFallthrough = hasFallthroughAttrs(comp, rawProps)
+ if (rawProps || comp.props) {
+ const [propsHandlers, attrsHandlers] = getPropsProxyHandlers(comp)
+ this.attrs = new Proxy(this, attrsHandlers)
+ this.props = comp.props
+ ? new Proxy(this, propsHandlers!)
+ : isFunction(comp)
+ ? this.attrs
+ : EMPTY_OBJ
+ } else {
+ this.props = this.attrs = EMPTY_OBJ
+ }
+
+ // init slots
+ this.rawSlots = rawSlots || EMPTY_OBJ
+ this.slots = rawSlots
+ ? rawSlots.$
+ ? new Proxy(rawSlots, dynamicSlotsProxyHandlers)
+ : rawSlots
+ : EMPTY_OBJ
+ }
+
+ /**
+ * Expose `getKeysFromRawProps` on the instance so it can be used in code
+ * paths where it's needed, e.g. `useModel`
+ */
+ rawKeys(): string[] {
+ return getKeysFromRawProps(this.rawProps)
+ }
+}
+
+export function isVaporComponent(
+ value: unknown,
+): value is VaporComponentInstance {
+ return value instanceof VaporComponentInstance
+}
+
+/**
+ * Used when a component cannot be resolved at compile time
+ * and needs rely on runtime resolution - where it might fallback to a plain
+ * element if the resolution fails.
+ */
+export function createComponentWithFallback(
+ comp: VaporComponent | string,
+ rawProps?: LooseRawProps | null,
+ rawSlots?: LooseRawSlots | null,
+ isSingleRoot?: boolean,
+ once?: boolean,
+ scopeId?: string,
+ appContext?: GenericAppContext,
+): HTMLElement | VaporComponentInstance {
+ if (!isString(comp)) {
+ return createComponent(
+ comp,
+ rawProps,
+ rawSlots,
+ isSingleRoot,
+ once,
+ scopeId,
+ appContext,
+ )
+ }
+
+ const _insertionParent = insertionParent
+ const _insertionAnchor = insertionAnchor
+ if (isHydrating) {
+ locateHydrationNode()
+ } else {
+ resetInsertionState()
+ }
+
+ const el = isHydrating
+ ? (adoptTemplate(currentHydrationNode!, `<${comp}/>`) as HTMLElement)
+ : createElement(comp)
+ // mark single root
+ ;(el as any).$root = isSingleRoot
+
+ scopeId = scopeId || currentInstance!.type.__scopeId
+ if (scopeId) setScopeId(el, scopeId)
+
+ if (rawProps) {
+ renderEffect(() => {
+ setDynamicProps(el, [resolveDynamicProps(rawProps as RawProps)])
+ })
+ }
+
+ if (rawSlots) {
+ let prev: Node
+ if (isHydrating) {
+ prev = currentHydrationNode!
+ setCurrentHydrationNode(el.firstChild)
+ }
+ if (rawSlots.$) {
+ // TODO dynamic slot fragment
+ } else {
+ insert(getSlot(rawSlots as RawSlots, 'default')!(), el)
+ }
+ if (isHydrating) {
+ setCurrentHydrationNode(prev!)
+ }
+ }
+
+ if (!isHydrating) {
+ if (_insertionParent) insert(el, _insertionParent, _insertionAnchor)
+ } else {
+ if (_insertionAnchor !== undefined) {
+ advanceHydrationNode(_insertionParent!)
+ }
+ }
+
+ return el
+}
+
+export function mountComponent(
+ instance: VaporComponentInstance,
+ parent: ParentNode,
+ anchor?: Node | null | 0,
+): void {
+ if (__DEV__) {
+ startMeasure(instance, `mount`)
+ }
+ if (instance.bm) invokeArrayFns(instance.bm)
+ insert(instance.block, parent, anchor)
+ setComponentScopeId(instance)
+ if (instance.m) queuePostFlushCb(() => invokeArrayFns(instance.m!))
+ instance.isMounted = true
+ if (__DEV__) {
+ endMeasure(instance, `mount`)
+ }
+}
+
+export function unmountComponent(
+ instance: VaporComponentInstance,
+ parentNode?: ParentNode,
+): void {
+ if (instance.isMounted && !instance.isUnmounted) {
+ if (__DEV__ && instance.type.__hmrId) {
+ unregisterHMR(instance)
+ }
+ if (instance.bum) {
+ invokeArrayFns(instance.bum)
+ }
+
+ instance.scope.stop()
+
+ if (instance.um) {
+ queuePostFlushCb(() => invokeArrayFns(instance.um!))
+ }
+ instance.isUnmounted = true
+ }
+
+ if (parentNode) {
+ remove(instance.block, parentNode)
+ }
+}
+
+export function getExposed(
+ instance: GenericComponentInstance,
+): Record | undefined {
+ if (instance.exposed) {
+ return (
+ instance.exposeProxy ||
+ (instance.exposeProxy = new Proxy(markRaw(instance.exposed), {
+ get: (target, key) => unref(target[key as any]),
+ }))
+ )
+ }
+}
+
+function getRootElement({
+ block,
+}: VaporComponentInstance): Element | undefined {
+ if (block instanceof Element) {
+ return block
+ }
+
+ if (block instanceof DynamicFragment) {
+ const { nodes } = block
+ if (nodes instanceof Element && (nodes as any).$root) {
+ return nodes
+ }
+ }
+}
diff --git a/packages/runtime-vapor/src/componentEmits.ts b/packages/runtime-vapor/src/componentEmits.ts
new file mode 100644
index 00000000000..daee4d59fe7
--- /dev/null
+++ b/packages/runtime-vapor/src/componentEmits.ts
@@ -0,0 +1,58 @@
+import { type ObjectEmitsOptions, baseEmit } from '@vue/runtime-dom'
+import type { VaporComponent, VaporComponentInstance } from './component'
+import { EMPTY_OBJ, hasOwn, isArray } from '@vue/shared'
+import { type RawProps, resolveSource } from './componentProps'
+import { interopKey } from './vdomInterop'
+
+/**
+ * The logic from core isn't too reusable so it's better to duplicate here
+ */
+export function normalizeEmitsOptions(
+ comp: VaporComponent,
+): ObjectEmitsOptions | null {
+ const cached = comp.__emitsOptions
+ if (cached) return cached
+
+ const raw = comp.emits
+ if (!raw) return null
+
+ let normalized: ObjectEmitsOptions
+ if (isArray(raw)) {
+ normalized = {}
+ for (const key of raw) normalized[key] = null
+ } else {
+ normalized = raw
+ }
+
+ return (comp.__emitsOptions = normalized)
+}
+
+export function emit(
+ instance: VaporComponentInstance,
+ event: string,
+ ...rawArgs: any[]
+): void {
+ baseEmit(
+ instance,
+ instance.rawProps || EMPTY_OBJ,
+ propGetter,
+ event,
+ ...rawArgs,
+ )
+}
+
+function propGetter(rawProps: RawProps, key: string) {
+ const dynamicSources = rawProps.$
+ if (dynamicSources) {
+ let i = dynamicSources.length
+ while (i--) {
+ const source = resolveSource(dynamicSources[i])
+ if (hasOwn(source, key))
+ // for props passed from VDOM component, no need to resolve
+ return dynamicSources[interopKey]
+ ? source[key]
+ : resolveSource(source[key])
+ }
+ }
+ return rawProps[key] && resolveSource(rawProps[key])
+}
diff --git a/packages/runtime-vapor/src/componentProps.ts b/packages/runtime-vapor/src/componentProps.ts
new file mode 100644
index 00000000000..55eadb98046
--- /dev/null
+++ b/packages/runtime-vapor/src/componentProps.ts
@@ -0,0 +1,365 @@
+import {
+ EMPTY_ARR,
+ NO,
+ YES,
+ camelize,
+ hasOwn,
+ isArray,
+ isFunction,
+ isString,
+} from '@vue/shared'
+import type { VaporComponent, VaporComponentInstance } from './component'
+import {
+ type NormalizedPropsOptions,
+ baseNormalizePropsOptions,
+ isEmitListener,
+ popWarningContext,
+ pushWarningContext,
+ resolvePropValue,
+ setCurrentInstance,
+ validateProps,
+ warn,
+} from '@vue/runtime-dom'
+import { ReactiveFlags } from '@vue/reactivity'
+import { normalizeEmitsOptions } from './componentEmits'
+import { renderEffect } from './renderEffect'
+import type { interopKey } from './vdomInterop'
+
+export type RawProps = Record unknown> & {
+ // generated by compiler for :[key]="x" or v-bind="x"
+ $?: DynamicPropsSource[] & { [interopKey]?: boolean }
+}
+
+export type DynamicPropsSource =
+ | (() => Record)
+ | Record unknown>
+
+// TODO optimization: maybe convert functions into computeds
+export function resolveSource(
+ source: Record | (() => Record),
+): Record {
+ return isFunction(source) ? source() : source
+}
+
+export function getPropsProxyHandlers(
+ comp: VaporComponent,
+): [
+ ProxyHandler | null,
+ ProxyHandler,
+] {
+ if (comp.__propsHandlers) {
+ return comp.__propsHandlers
+ }
+ const propsOptions = normalizePropsOptions(comp)[0]
+ const emitsOptions = normalizeEmitsOptions(comp)
+ const isProp = (
+ propsOptions
+ ? (key: string | symbol) =>
+ isString(key) && hasOwn(propsOptions, camelize(key))
+ : NO
+ ) as (key: string | symbol) => key is string
+ const isAttr = propsOptions
+ ? (key: string) =>
+ key !== '$' && !isProp(key) && !isEmitListener(emitsOptions, key)
+ : YES
+
+ const getProp = (instance: VaporComponentInstance, key: string | symbol) => {
+ // this enables direct watching of props and prevents `Invalid watch source` DEV warnings.
+ if (key === ReactiveFlags.IS_REACTIVE) return true
+
+ if (!isProp(key)) return
+ const rawProps = instance.rawProps
+ const dynamicSources = rawProps.$
+ if (dynamicSources) {
+ let i = dynamicSources.length
+ let source, isDynamic, rawKey
+ while (i--) {
+ source = dynamicSources[i]
+ isDynamic = isFunction(source)
+ source = isDynamic ? (source as Function)() : source
+ for (rawKey in source) {
+ if (camelize(rawKey) === key) {
+ return resolvePropValue(
+ propsOptions!,
+ key,
+ isDynamic ? source[rawKey] : source[rawKey](),
+ instance,
+ resolveDefault,
+ )
+ }
+ }
+ }
+ }
+ for (const rawKey in rawProps) {
+ if (camelize(rawKey) === key) {
+ return resolvePropValue(
+ propsOptions!,
+ key,
+ rawProps[rawKey](),
+ instance,
+ resolveDefault,
+ )
+ }
+ }
+ return resolvePropValue(
+ propsOptions!,
+ key,
+ undefined,
+ instance,
+ resolveDefault,
+ true,
+ )
+ }
+
+ const propsHandlers = propsOptions
+ ? ({
+ get: (target, key) => getProp(target, key),
+ has: (_, key) => isProp(key),
+ ownKeys: () => Object.keys(propsOptions),
+ getOwnPropertyDescriptor(target, key) {
+ if (isProp(key)) {
+ return {
+ configurable: true,
+ enumerable: true,
+ get: () => getProp(target, key),
+ }
+ }
+ },
+ } satisfies ProxyHandler)
+ : null
+
+ if (__DEV__ && propsOptions) {
+ Object.assign(propsHandlers!, {
+ set: propsSetDevTrap,
+ deleteProperty: propsDeleteDevTrap,
+ })
+ }
+
+ const getAttr = (target: RawProps, key: string) => {
+ if (!isProp(key) && !isEmitListener(emitsOptions, key)) {
+ return getAttrFromRawProps(target, key)
+ }
+ }
+
+ const hasAttr = (target: RawProps, key: string) => {
+ if (isAttr(key)) {
+ return hasAttrFromRawProps(target, key)
+ } else {
+ return false
+ }
+ }
+
+ const attrsHandlers = {
+ get: (target, key: string) => getAttr(target.rawProps, key),
+ has: (target, key: string) => hasAttr(target.rawProps, key),
+ ownKeys: target => getKeysFromRawProps(target.rawProps).filter(isAttr),
+ getOwnPropertyDescriptor(target, key: string) {
+ if (hasAttr(target.rawProps, key)) {
+ return {
+ configurable: true,
+ enumerable: true,
+ get: () => getAttr(target.rawProps, key),
+ }
+ }
+ },
+ } satisfies ProxyHandler
+
+ if (__DEV__) {
+ Object.assign(attrsHandlers, {
+ set: propsSetDevTrap,
+ deleteProperty: propsDeleteDevTrap,
+ })
+ }
+
+ return (comp.__propsHandlers = [propsHandlers, attrsHandlers])
+}
+
+export function getAttrFromRawProps(rawProps: RawProps, key: string): unknown {
+ if (key === '$') return
+ // need special merging behavior for class & style
+ const merged = key === 'class' || key === 'style' ? ([] as any[]) : undefined
+ const dynamicSources = rawProps.$
+ if (dynamicSources) {
+ let i = dynamicSources.length
+ let source, isDynamic
+ while (i--) {
+ source = dynamicSources[i]
+ isDynamic = isFunction(source)
+ source = isDynamic ? (source as Function)() : source
+ if (source && hasOwn(source, key)) {
+ const value = isDynamic ? source[key] : source[key]()
+ if (merged) {
+ merged.push(value)
+ } else {
+ return value
+ }
+ }
+ }
+ }
+ if (hasOwn(rawProps, key)) {
+ if (merged) {
+ merged.push(rawProps[key]())
+ } else {
+ return rawProps[key]()
+ }
+ }
+ if (merged && merged.length) {
+ return merged
+ }
+}
+
+export function hasAttrFromRawProps(rawProps: RawProps, key: string): boolean {
+ if (key === '$') return false
+ const dynamicSources = rawProps.$
+ if (dynamicSources) {
+ let i = dynamicSources.length
+ while (i--) {
+ const source = resolveSource(dynamicSources[i])
+ if (source && hasOwn(source, key)) {
+ return true
+ }
+ }
+ }
+ return hasOwn(rawProps, key)
+}
+
+export function getKeysFromRawProps(rawProps: RawProps): string[] {
+ const keys: string[] = []
+ for (const key in rawProps) {
+ if (key !== '$') keys.push(key)
+ }
+ const dynamicSources = rawProps.$
+ if (dynamicSources) {
+ let i = dynamicSources.length
+ let source
+ while (i--) {
+ source = resolveSource(dynamicSources[i])
+ for (const key in source) {
+ keys.push(key)
+ }
+ }
+ }
+ return Array.from(new Set(keys))
+}
+
+export function normalizePropsOptions(
+ comp: VaporComponent,
+): NormalizedPropsOptions {
+ const cached = comp.__propsOptions
+ if (cached) return cached
+
+ const raw = comp.props
+ if (!raw) return EMPTY_ARR as []
+
+ const normalized: NormalizedPropsOptions[0] = {}
+ const needCastKeys: NormalizedPropsOptions[1] = []
+ baseNormalizePropsOptions(raw, normalized, needCastKeys)
+
+ return (comp.__propsOptions = [normalized, needCastKeys])
+}
+
+function resolveDefault(
+ factory: (props: Record) => unknown,
+ instance: VaporComponentInstance,
+) {
+ const prev = setCurrentInstance(instance)
+ const res = factory.call(null, instance.props)
+ setCurrentInstance(...prev)
+ return res
+}
+
+export function hasFallthroughAttrs(
+ comp: VaporComponent,
+ rawProps: RawProps | null | undefined,
+): boolean {
+ if (rawProps) {
+ // determine fallthrough
+ if (rawProps.$ || !comp.props) {
+ return true
+ } else {
+ // check if rawProps contains any keys not declared
+ const propsOptions = normalizePropsOptions(comp)[0]!
+ for (const key in rawProps) {
+ if (!hasOwn(propsOptions, camelize(key))) {
+ return true
+ }
+ }
+ }
+ }
+ return false
+}
+
+/**
+ * dev only
+ */
+export function setupPropsValidation(instance: VaporComponentInstance): void {
+ const rawProps = instance.rawProps
+ if (!rawProps) return
+ renderEffect(() => {
+ pushWarningContext(instance)
+ validateProps(
+ resolveDynamicProps(rawProps),
+ instance.props,
+ normalizePropsOptions(instance.type)[0]!,
+ )
+ popWarningContext()
+ }, true /* noLifecycle */)
+}
+
+export function resolveDynamicProps(props: RawProps): Record {
+ const mergedRawProps: Record = {}
+ for (const key in props) {
+ if (key !== '$') {
+ mergedRawProps[key] = props[key]()
+ }
+ }
+ if (props.$) {
+ for (const source of props.$) {
+ const isDynamic = isFunction(source)
+ const resolved = isDynamic ? source() : source
+ for (const key in resolved) {
+ const value = isDynamic ? resolved[key] : (resolved[key] as Function)()
+ if (key === 'class' || key === 'style') {
+ const existing = mergedRawProps[key]
+ if (isArray(existing)) {
+ existing.push(value)
+ } else {
+ mergedRawProps[key] = [existing, value]
+ }
+ } else {
+ mergedRawProps[key] = value
+ }
+ }
+ }
+ }
+ return mergedRawProps
+}
+
+function propsSetDevTrap(_: any, key: string | symbol) {
+ warn(
+ `Attempt to mutate prop ${JSON.stringify(key)} failed. Props are readonly.`,
+ )
+ return true
+}
+
+function propsDeleteDevTrap(_: any, key: string | symbol) {
+ warn(
+ `Attempt to delete prop ${JSON.stringify(key)} failed. Props are readonly.`,
+ )
+ return true
+}
+
+export const rawPropsProxyHandlers: ProxyHandler = {
+ get: getAttrFromRawProps,
+ has: hasAttrFromRawProps,
+ ownKeys: getKeysFromRawProps,
+ getOwnPropertyDescriptor(target, key: string) {
+ if (hasAttrFromRawProps(target, key)) {
+ return {
+ configurable: true,
+ enumerable: true,
+ get: () => getAttrFromRawProps(target, key),
+ }
+ }
+ },
+}
diff --git a/packages/runtime-vapor/src/componentSlots.ts b/packages/runtime-vapor/src/componentSlots.ts
new file mode 100644
index 00000000000..1e8b30128e1
--- /dev/null
+++ b/packages/runtime-vapor/src/componentSlots.ts
@@ -0,0 +1,200 @@
+import {
+ EMPTY_OBJ,
+ NO,
+ SLOT_ANCHOR_LABEL,
+ hasOwn,
+ isArray,
+ isFunction,
+} from '@vue/shared'
+import { type Block, type BlockFn, insert, setScopeId } from './block'
+import { rawPropsProxyHandlers } from './componentProps'
+import { currentInstance, isRef } from '@vue/runtime-dom'
+import type { LooseRawProps, VaporComponentInstance } from './component'
+import { renderEffect } from './renderEffect'
+import {
+ insertionAnchor,
+ insertionParent,
+ resetInsertionState,
+} from './insertionState'
+import {
+ advanceHydrationNode,
+ isHydrating,
+ locateHydrationNode,
+} from './dom/hydration'
+import { DynamicFragment, type VaporFragment } from './fragment'
+
+export type RawSlots = Record & {
+ $?: DynamicSlotSource[]
+}
+
+export type StaticSlots = Record
+
+export type VaporSlot = BlockFn
+export type DynamicSlot = { name: string; fn: VaporSlot }
+export type DynamicSlotFn = () => DynamicSlot | DynamicSlot[]
+export type DynamicSlotSource = StaticSlots | DynamicSlotFn
+
+export const dynamicSlotsProxyHandlers: ProxyHandler = {
+ get: getSlot,
+ has: (target, key: string) => !!getSlot(target, key),
+ getOwnPropertyDescriptor(target, key: string) {
+ const slot = getSlot(target, key)
+ if (slot) {
+ return {
+ configurable: true,
+ enumerable: true,
+ value: slot,
+ }
+ }
+ },
+ ownKeys(target) {
+ let keys = Object.keys(target)
+ const dynamicSources = target.$
+ if (dynamicSources) {
+ keys = keys.filter(k => k !== '$')
+ for (const source of dynamicSources) {
+ if (isFunction(source)) {
+ const slot = source()
+ if (isArray(slot)) {
+ for (const s of slot) keys.push(String(s.name))
+ } else {
+ keys.push(String(slot.name))
+ }
+ } else {
+ keys.push(...Object.keys(source))
+ }
+ }
+ }
+ return keys
+ },
+ set: NO,
+ deleteProperty: NO,
+}
+
+export function getSlot(
+ target: RawSlots,
+ key: string,
+): (VaporSlot & { _bound?: VaporSlot }) | undefined {
+ if (key === '$') return
+ const dynamicSources = target.$
+ if (dynamicSources) {
+ let i = dynamicSources.length
+ let source
+ while (i--) {
+ source = dynamicSources[i]
+ if (isFunction(source)) {
+ const slot = source()
+ if (slot) {
+ if (isArray(slot)) {
+ for (const s of slot) {
+ if (String(s.name) === key) return s.fn
+ }
+ } else if (String(slot.name) === key) {
+ return slot.fn
+ }
+ }
+ } else if (hasOwn(source, key)) {
+ return source[key]
+ }
+ }
+ }
+ if (hasOwn(target, key)) {
+ return target[key]
+ }
+}
+
+export function forwardedSlotCreator(): (
+ name: string | (() => string),
+ rawProps?: LooseRawProps | null,
+ fallback?: VaporSlot,
+) => Block {
+ const instance = currentInstance as VaporComponentInstance
+ return (name, rawProps, fallback) =>
+ createSlot(name, rawProps, fallback, instance)
+}
+
+export function createSlot(
+ name: string | (() => string),
+ rawProps?: LooseRawProps | null,
+ fallback?: VaporSlot,
+ i?: VaporComponentInstance,
+): Block {
+ const _insertionParent = insertionParent
+ const _insertionAnchor = insertionAnchor
+ if (!isHydrating) resetInsertionState()
+
+ const instance = i || (currentInstance as VaporComponentInstance)
+ const rawSlots = instance.rawSlots
+ const slotProps = rawProps
+ ? new Proxy(rawProps, rawPropsProxyHandlers)
+ : EMPTY_OBJ
+
+ let fragment: DynamicFragment
+ if (isRef(rawSlots._)) {
+ if (isHydrating) locateHydrationNode()
+ fragment = instance.appContext.vapor!.vdomSlot(
+ rawSlots._,
+ name,
+ slotProps,
+ instance,
+ fallback,
+ )
+ } else {
+ fragment =
+ isHydrating || __DEV__
+ ? new DynamicFragment(SLOT_ANCHOR_LABEL)
+ : new DynamicFragment()
+ const isDynamicName = isFunction(name)
+ const renderSlot = () => {
+ const slot = getSlot(rawSlots, isFunction(name) ? name() : name)
+ if (slot) {
+ fragment.fallback = fallback
+ // create and cache bound version of the slot to make it stable
+ // so that we avoid unnecessary updates if it resolves to the same slot
+ fragment.update(slot._bound || (slot._bound = () => slot(slotProps)))
+ } else {
+ fragment.update(fallback)
+ }
+ }
+
+ // dynamic slot name or has dynamicSlots
+ if (isDynamicName || rawSlots.$) {
+ renderEffect(renderSlot)
+ } else {
+ renderSlot()
+ }
+ }
+
+ if (i) fragment.forwarded = true
+ if (i || !hasForwardedSlot(fragment.nodes)) {
+ const scopeId = instance!.type.__scopeId
+ if (scopeId) setScopeId(fragment, `${scopeId}-s`)
+ }
+
+ if (!isHydrating) {
+ if (_insertionParent) insert(fragment, _insertionParent, _insertionAnchor)
+ } else {
+ if (fragment.insert) {
+ ;(fragment as VaporFragment).hydrate!()
+ }
+ if (_insertionAnchor !== undefined) {
+ advanceHydrationNode(_insertionParent!)
+ }
+ }
+
+ return fragment
+}
+
+function isForwardedSlot(block: Block): block is DynamicFragment {
+ return (
+ block instanceof DynamicFragment && !!(block as DynamicFragment).forwarded
+ )
+}
+
+function hasForwardedSlot(block: Block): block is DynamicFragment {
+ if (isArray(block)) {
+ return block.some(isForwardedSlot)
+ } else {
+ return isForwardedSlot(block)
+ }
+}
diff --git a/packages/runtime-vapor/src/components/Teleport.ts b/packages/runtime-vapor/src/components/Teleport.ts
new file mode 100644
index 00000000000..d80399373ed
--- /dev/null
+++ b/packages/runtime-vapor/src/components/Teleport.ts
@@ -0,0 +1,243 @@
+import {
+ type TeleportProps,
+ currentInstance,
+ isTeleportDeferred,
+ isTeleportDisabled,
+ queuePostFlushCb,
+ resolveTeleportTarget,
+ warn,
+} from '@vue/runtime-dom'
+import { type Block, type BlockFn, insert, remove } from '../block'
+import { createComment, createTextNode, querySelector } from '../dom/node'
+import {
+ type LooseRawProps,
+ type LooseRawSlots,
+ type VaporComponentInstance,
+ isVaporComponent,
+} from '../component'
+import { rawPropsProxyHandlers } from '../componentProps'
+import { renderEffect } from '../renderEffect'
+import { extend, isArray } from '@vue/shared'
+import { VaporFragment } from '../fragment'
+
+const instanceToTeleportMap: WeakMap =
+ __DEV__ ? new WeakMap() : (undefined as any)
+
+export const VaporTeleportImpl = {
+ name: 'VaporTeleport',
+ __isTeleport: true,
+ __vapor: true,
+
+ process(props: LooseRawProps, slots: LooseRawSlots): TeleportFragment {
+ const frag = new TeleportFragment()
+ const updateChildrenEffect = renderEffect(() =>
+ frag.updateChildren(slots.default && (slots.default as BlockFn)()),
+ )
+
+ const updateEffect = renderEffect(() => {
+ frag.update(
+ // access the props to trigger tracking
+ extend(
+ {},
+ new Proxy(props, rawPropsProxyHandlers) as any as TeleportProps,
+ ),
+ )
+ })
+
+ if (__DEV__) {
+ // used in `normalizeBlock` to get nodes of TeleportFragment during
+ // HMR updates. returns empty array if content is mounted in target
+ // container to prevent incorrect parent node lookup.
+ frag.getNodes = () => {
+ return frag.parent !== frag.currentParent ? [] : frag.nodes
+ }
+
+ // for HMR rerender
+ const instance = currentInstance as VaporComponentInstance
+ ;(
+ instance!.hmrRerenderEffects || (instance!.hmrRerenderEffects = [])
+ ).push(() => {
+ // remove the teleport content
+ frag.remove()
+
+ // stop effects
+ updateChildrenEffect.stop()
+ updateEffect.stop()
+ })
+
+ // for HMR reload
+ const nodes = frag.nodes
+ if (isVaporComponent(nodes)) {
+ instanceToTeleportMap.set(nodes, frag)
+ } else if (isArray(nodes)) {
+ nodes.forEach(
+ node =>
+ isVaporComponent(node) && instanceToTeleportMap.set(node, frag),
+ )
+ }
+ }
+
+ return frag
+ },
+}
+
+export class TeleportFragment extends VaporFragment {
+ anchor: Node
+
+ private targetStart?: Node
+ private mainAnchor?: Node
+ private placeholder?: Node
+ private mountContainer?: ParentNode | null
+ private mountAnchor?: Node | null
+
+ constructor() {
+ super([])
+ this.anchor = __DEV__ ? createComment('teleport') : createTextNode()
+ }
+
+ get currentParent(): ParentNode {
+ return (this.mountContainer || this.parent)!
+ }
+
+ get currentAnchor(): Node | null {
+ return this.mountAnchor || this.anchor
+ }
+
+ get parent(): ParentNode | null {
+ return this.anchor.parentNode
+ }
+
+ updateChildren(children: Block): void {
+ // not mounted yet
+ if (!this.parent) {
+ this.nodes = children
+ return
+ }
+
+ // teardown previous nodes
+ remove(this.nodes, this.currentParent)
+ // mount new nodes
+ insert((this.nodes = children), this.currentParent, this.currentAnchor)
+ }
+
+ update(props: TeleportProps): void {
+ const mount = (parent: ParentNode, anchor: Node | null) => {
+ insert(
+ this.nodes,
+ (this.mountContainer = parent),
+ (this.mountAnchor = anchor),
+ )
+ }
+
+ const mountToTarget = () => {
+ const target = (this.target = resolveTeleportTarget(props, querySelector))
+ if (target) {
+ if (
+ // initial mount into target
+ !this.targetAnchor ||
+ // target changed
+ this.targetAnchor.parentNode !== target
+ ) {
+ insert((this.targetStart = createTextNode('')), target)
+ insert((this.targetAnchor = createTextNode('')), target)
+ }
+
+ mount(target, this.targetAnchor!)
+ } else if (__DEV__) {
+ warn(
+ `Invalid Teleport target on ${this.targetAnchor ? 'update' : 'mount'}:`,
+ target,
+ `(${typeof target})`,
+ )
+ }
+ }
+
+ // mount into main container
+ if (isTeleportDisabled(props)) {
+ if (this.parent) {
+ if (!this.mainAnchor) {
+ this.mainAnchor = __DEV__
+ ? createComment('teleport end')
+ : createTextNode()
+ }
+ if (!this.placeholder) {
+ this.placeholder = __DEV__
+ ? createComment('teleport start')
+ : createTextNode()
+ }
+ if (!this.mainAnchor.isConnected) {
+ insert(this.placeholder, this.parent, this.anchor)
+ insert(this.mainAnchor, this.parent, this.anchor)
+ }
+
+ mount(this.parent, this.mainAnchor)
+ }
+ }
+ // mount into target container
+ else {
+ if (isTeleportDeferred(props)) {
+ queuePostFlushCb(mountToTarget)
+ } else {
+ mountToTarget()
+ }
+ }
+ }
+
+ remove = (parent: ParentNode | undefined = this.parent!): void => {
+ // remove nodes
+ if (this.nodes) {
+ remove(this.nodes, this.currentParent)
+ this.nodes = []
+ }
+
+ // remove anchors
+ if (this.targetStart) {
+ remove(this.targetStart!, this.target!)
+ this.targetStart = undefined
+ remove(this.targetAnchor!, this.target!)
+ this.targetAnchor = undefined
+ }
+
+ if (this.placeholder) {
+ remove(this.placeholder!, parent)
+ this.placeholder = undefined
+ remove(this.mainAnchor!, parent)
+ this.mainAnchor = undefined
+ }
+
+ this.mountContainer = undefined
+ this.mountAnchor = undefined
+ }
+
+ hydrate = (): void => {
+ // TODO
+ }
+}
+
+export function isVaporTeleport(
+ value: unknown,
+): value is typeof VaporTeleportImpl {
+ return value === VaporTeleportImpl
+}
+
+/**
+ * dev only
+ * during root component HMR reload, since the old component will be unmounted
+ * and a new one will be mounted, we need to update the teleport's nodes
+ * to ensure they are up to date.
+ */
+export function handleTeleportRootComponentHmrReload(
+ instance: VaporComponentInstance,
+ newInstance: VaporComponentInstance,
+): void {
+ const teleport = instanceToTeleportMap.get(instance)
+ if (teleport) {
+ instanceToTeleportMap.set(newInstance, teleport)
+ if (teleport.nodes === instance) {
+ teleport.nodes = newInstance
+ } else if (isArray(teleport.nodes)) {
+ const i = teleport.nodes.indexOf(instance)
+ if (i !== -1) teleport.nodes[i] = newInstance
+ }
+ }
+}
diff --git a/packages/runtime-vapor/src/components/Transition.ts b/packages/runtime-vapor/src/components/Transition.ts
new file mode 100644
index 00000000000..560b277cbb9
--- /dev/null
+++ b/packages/runtime-vapor/src/components/Transition.ts
@@ -0,0 +1,322 @@
+import {
+ type GenericComponentInstance,
+ type TransitionElement,
+ type TransitionHooks,
+ type TransitionHooksContext,
+ type TransitionProps,
+ TransitionPropsValidators,
+ type TransitionState,
+ baseResolveTransitionHooks,
+ checkTransitionMode,
+ currentInstance,
+ leaveCbKey,
+ resolveTransitionProps,
+ useTransitionState,
+ warn,
+} from '@vue/runtime-dom'
+import type { Block, TransitionBlock, VaporTransitionHooks } from '../block'
+import {
+ type FunctionalVaporComponent,
+ type VaporComponentInstance,
+ applyFallthroughProps,
+ isVaporComponent,
+} from '../component'
+import { extend, isArray } from '@vue/shared'
+import { renderEffect } from '../renderEffect'
+import { isFragment } from '../fragment'
+
+const decorate = (t: typeof VaporTransition) => {
+ t.displayName = 'VaporTransition'
+ t.props = TransitionPropsValidators
+ t.__vapor = true
+ return t
+}
+
+export const VaporTransition: FunctionalVaporComponent = /*@__PURE__*/ decorate(
+ (props, { slots, attrs }) => {
+ const children = (slots.default && slots.default()) as any as Block
+ if (!children) return
+
+ const instance = currentInstance! as VaporComponentInstance
+ const { mode } = props
+ checkTransitionMode(mode)
+
+ let resolvedProps
+ let isMounted = false
+ renderEffect(() => {
+ resolvedProps = resolveTransitionProps(props)
+ if (isMounted) {
+ // only update props for Fragment block, for later reusing
+ if (isFragment(children)) {
+ children.$transition!.props = resolvedProps
+ } else {
+ const child = findTransitionBlock(children)
+ if (child) {
+ // replace existing transition hooks
+ child.$transition!.props = resolvedProps
+ applyTransitionHooks(child, child.$transition!)
+ }
+ }
+ } else {
+ isMounted = true
+ }
+ })
+
+ // fallthrough attrs
+ let fallthroughAttrs = true
+ if (instance.hasFallthrough) {
+ renderEffect(() => {
+ // attrs are accessed in advance
+ const resolvedAttrs = extend({}, attrs)
+ const child = findTransitionBlock(children)
+ if (child) {
+ // mark single root
+ ;(child as any).$root = true
+
+ applyFallthroughProps(child, resolvedAttrs)
+ // ensure fallthrough attrs are not happened again in
+ // applyTransitionHooks
+ fallthroughAttrs = false
+ }
+ })
+ }
+
+ applyTransitionHooks(
+ children,
+ {
+ state: useTransitionState(),
+ props: resolvedProps!,
+ instance: instance,
+ } as VaporTransitionHooks,
+ fallthroughAttrs,
+ )
+
+ return children
+ },
+)
+
+const getTransitionHooksContext = (
+ key: String,
+ props: TransitionProps,
+ state: TransitionState,
+ instance: GenericComponentInstance,
+ postClone: ((hooks: TransitionHooks) => void) | undefined,
+) => {
+ const { leavingNodes } = state
+ const context: TransitionHooksContext = {
+ setLeavingNodeCache: el => {
+ leavingNodes.set(key, el)
+ },
+ unsetLeavingNodeCache: el => {
+ const leavingNode = leavingNodes.get(key)
+ if (leavingNode === el) {
+ leavingNodes.delete(key)
+ }
+ },
+ earlyRemove: () => {
+ const leavingNode = leavingNodes.get(key)
+ if (leavingNode && (leavingNode as TransitionElement)[leaveCbKey]) {
+ // force early removal (not cancelled)
+ ;(leavingNode as TransitionElement)[leaveCbKey]!()
+ }
+ },
+ cloneHooks: block => {
+ const hooks = resolveTransitionHooks(
+ block,
+ props,
+ state,
+ instance,
+ postClone,
+ )
+ if (postClone) postClone(hooks)
+ return hooks
+ },
+ }
+ return context
+}
+
+export function resolveTransitionHooks(
+ block: TransitionBlock,
+ props: TransitionProps,
+ state: TransitionState,
+ instance: GenericComponentInstance,
+ postClone?: (hooks: TransitionHooks) => void,
+): VaporTransitionHooks {
+ const context = getTransitionHooksContext(
+ String(block.$key),
+ props,
+ state,
+ instance,
+ postClone,
+ )
+ const hooks = baseResolveTransitionHooks(
+ context,
+ props,
+ state,
+ instance,
+ ) as VaporTransitionHooks
+ hooks.state = state
+ hooks.props = props
+ hooks.instance = instance as VaporComponentInstance
+ return hooks
+}
+
+export function applyTransitionHooks(
+ block: Block,
+ hooks: VaporTransitionHooks,
+ fallthroughAttrs: boolean = true,
+): VaporTransitionHooks {
+ const isFrag = isFragment(block)
+ const child = findTransitionBlock(block)
+ if (!child) {
+ // set transition hooks on fragment for reusing during it's updating
+ if (isFrag) setTransitionHooksOnFragment(block, hooks)
+ return hooks
+ }
+
+ const { props, instance, state, delayedLeave } = hooks
+ let resolvedHooks = resolveTransitionHooks(
+ child,
+ props,
+ state,
+ instance,
+ hooks => (resolvedHooks = hooks as VaporTransitionHooks),
+ )
+ resolvedHooks.delayedLeave = delayedLeave
+ setTransitionHooks(child, resolvedHooks)
+ if (isFrag) setTransitionHooksOnFragment(block, resolvedHooks)
+
+ // fallthrough attrs
+ if (fallthroughAttrs && instance.hasFallthrough) {
+ // mark single root
+ ;(child as any).$root = true
+ renderEffect(() => applyFallthroughProps(child, instance.attrs))
+ }
+
+ return resolvedHooks
+}
+
+export function applyTransitionLeaveHooks(
+ block: Block,
+ enterHooks: VaporTransitionHooks,
+ afterLeaveCb: () => void,
+): void {
+ const leavingBlock = findTransitionBlock(block)
+ if (!leavingBlock) return undefined
+
+ const { props, state, instance } = enterHooks
+ const leavingHooks = resolveTransitionHooks(
+ leavingBlock,
+ props,
+ state,
+ instance,
+ )
+ setTransitionHooks(leavingBlock, leavingHooks)
+
+ const { mode } = props
+ if (mode === 'out-in') {
+ state.isLeaving = true
+ leavingHooks.afterLeave = () => {
+ state.isLeaving = false
+ afterLeaveCb()
+ leavingBlock.$transition = undefined
+ delete leavingHooks.afterLeave
+ }
+ } else if (mode === 'in-out') {
+ leavingHooks.delayLeave = (
+ block: TransitionElement,
+ earlyRemove,
+ delayedLeave,
+ ) => {
+ state.leavingNodes.set(String(leavingBlock.$key), leavingBlock)
+ // early removal callback
+ block[leaveCbKey] = () => {
+ earlyRemove()
+ block[leaveCbKey] = undefined
+ leavingBlock.$transition = undefined
+ delete enterHooks.delayedLeave
+ }
+ enterHooks.delayedLeave = () => {
+ delayedLeave()
+ leavingBlock.$transition = undefined
+ delete enterHooks.delayedLeave
+ }
+ }
+ }
+}
+
+const transitionBlockCache = new WeakMap()
+export function findTransitionBlock(
+ block: Block,
+ inFragment: boolean = false,
+): TransitionBlock | undefined {
+ if (transitionBlockCache.has(block)) {
+ return transitionBlockCache.get(block)
+ }
+
+ let isFrag = false
+ let child: TransitionBlock | undefined
+ if (block instanceof Node) {
+ // transition can only be applied on Element child
+ if (block instanceof Element) child = block
+ } else if (isVaporComponent(block)) {
+ child = findTransitionBlock(block.block)
+ // use component id as key
+ if (child && child.$key === undefined) child.$key = block.uid
+ } else if (isArray(block)) {
+ child = block[0] as TransitionBlock
+ let hasFound = false
+ for (const c of block) {
+ const item = findTransitionBlock(c)
+ if (item instanceof Element) {
+ if (__DEV__ && hasFound) {
+ // warn more than one non-comment child
+ warn(
+ ' can only be used on a single element or component. ' +
+ 'Use for lists.',
+ )
+ break
+ }
+ child = item
+ hasFound = true
+ if (!__DEV__) break
+ }
+ }
+ } else if ((isFrag = isFragment(block))) {
+ if (block.insert) {
+ child = block
+ } else {
+ child = findTransitionBlock(block.nodes, true)
+ }
+ }
+
+ if (__DEV__ && !child && !inFragment && !isFrag) {
+ warn('Transition component has no valid child element')
+ }
+
+ return child
+}
+
+export function setTransitionHooksOnFragment(
+ block: Block,
+ hooks: VaporTransitionHooks,
+): void {
+ if (isFragment(block)) {
+ setTransitionHooks(block, hooks)
+ } else if (isArray(block)) {
+ for (let i = 0; i < block.length; i++) {
+ setTransitionHooksOnFragment(block[i], hooks)
+ }
+ }
+}
+
+export function setTransitionHooks(
+ block: TransitionBlock | VaporComponentInstance,
+ hooks: VaporTransitionHooks,
+): void {
+ if (isVaporComponent(block)) {
+ block = findTransitionBlock(block.block) as TransitionBlock
+ if (!block) return
+ }
+ block.$transition = hooks
+}
diff --git a/packages/runtime-vapor/src/components/TransitionGroup.ts b/packages/runtime-vapor/src/components/TransitionGroup.ts
new file mode 100644
index 00000000000..e3b4fb4fb0a
--- /dev/null
+++ b/packages/runtime-vapor/src/components/TransitionGroup.ts
@@ -0,0 +1,226 @@
+import {
+ type ElementWithTransition,
+ type TransitionGroupProps,
+ TransitionPropsValidators,
+ baseApplyTranslation,
+ callPendingCbs,
+ currentInstance,
+ forceReflow,
+ handleMovedChildren,
+ hasCSSTransform,
+ onBeforeUpdate,
+ onUpdated,
+ resolveTransitionProps,
+ useTransitionState,
+ warn,
+} from '@vue/runtime-dom'
+import { extend, isArray } from '@vue/shared'
+import {
+ type Block,
+ type TransitionBlock,
+ type VaporTransitionHooks,
+ insert,
+} from '../block'
+import {
+ resolveTransitionHooks,
+ setTransitionHooks,
+ setTransitionHooksOnFragment,
+} from './Transition'
+import {
+ type ObjectVaporComponent,
+ type VaporComponentInstance,
+ applyFallthroughProps,
+ isVaporComponent,
+} from '../component'
+import { isForBlock } from '../apiCreateFor'
+import { renderEffect } from '../renderEffect'
+import { createElement } from '../dom/node'
+import { DynamicFragment, isFragment } from '../fragment'
+
+const positionMap = new WeakMap()
+const newPositionMap = new WeakMap()
+
+const decorate = (t: typeof VaporTransitionGroup) => {
+ delete (t.props! as any).mode
+ t.__vapor = true
+ return t
+}
+
+export const VaporTransitionGroup: ObjectVaporComponent = decorate({
+ name: 'VaporTransitionGroup',
+
+ props: /*@__PURE__*/ extend({}, TransitionPropsValidators, {
+ tag: String,
+ moveClass: String,
+ }),
+
+ setup(props: TransitionGroupProps, { slots }) {
+ const instance = currentInstance as VaporComponentInstance
+ const state = useTransitionState()
+ const cssTransitionProps = resolveTransitionProps(props)
+
+ let prevChildren: TransitionBlock[]
+ let children: TransitionBlock[]
+ let slottedBlock: Block
+
+ onBeforeUpdate(() => {
+ prevChildren = []
+ children = getTransitionBlocks(slottedBlock)
+ if (children) {
+ for (let i = 0; i < children.length; i++) {
+ const child = children[i]
+ if (isValidTransitionBlock(child)) {
+ prevChildren.push(child)
+ // disabled transition during enter, so the children will be
+ // inserted into the correct position immediately. this prevents
+ // `recordPosition` from getting incorrect positions in `onUpdated`
+ child.$transition!.disabled = true
+ positionMap.set(
+ child,
+ getTransitionElement(child).getBoundingClientRect(),
+ )
+ }
+ }
+ }
+ })
+
+ onUpdated(() => {
+ if (!prevChildren.length) {
+ return
+ }
+
+ const moveClass = props.moveClass || `${props.name || 'v'}-move`
+ const firstChild = getFirstConnectedChild(prevChildren)
+ if (
+ !firstChild ||
+ !hasCSSTransform(
+ firstChild as ElementWithTransition,
+ firstChild.parentNode as Node,
+ moveClass,
+ )
+ ) {
+ prevChildren = []
+ return
+ }
+
+ prevChildren.forEach(callPendingCbs)
+ prevChildren.forEach(child => {
+ child.$transition!.disabled = false
+ recordPosition(child)
+ })
+ const movedChildren = prevChildren.filter(applyTranslation)
+
+ // force reflow to put everything in position
+ forceReflow()
+
+ movedChildren.forEach(c =>
+ handleMovedChildren(
+ getTransitionElement(c) as ElementWithTransition,
+ moveClass,
+ ),
+ )
+ prevChildren = []
+ })
+
+ slottedBlock = slots.default && slots.default()
+
+ // store props and state on fragment for reusing during insert new items
+ setTransitionHooksOnFragment(slottedBlock, {
+ props: cssTransitionProps,
+ state,
+ instance,
+ } as VaporTransitionHooks)
+
+ children = getTransitionBlocks(slottedBlock)
+ for (let i = 0; i < children.length; i++) {
+ const child = children[i]
+ if (isValidTransitionBlock(child)) {
+ if (child.$key != null) {
+ setTransitionHooks(
+ child,
+ resolveTransitionHooks(child, cssTransitionProps, state, instance!),
+ )
+ } else if (__DEV__ && child.$key == null) {
+ warn(` children must be keyed`)
+ }
+ }
+ }
+
+ const tag = props.tag
+ if (tag) {
+ const container = createElement(tag)
+ insert(slottedBlock, container)
+ // fallthrough attrs
+ if (instance!.hasFallthrough) {
+ ;(container as any).$root = true
+ renderEffect(() => applyFallthroughProps(container, instance!.attrs))
+ }
+ return container
+ } else {
+ const frag = __DEV__
+ ? new DynamicFragment('transitionGroup')
+ : new DynamicFragment()
+ renderEffect(() => frag.update(() => slottedBlock))
+ return frag
+ }
+ },
+})
+
+function getTransitionBlocks(block: Block) {
+ let children: TransitionBlock[] = []
+ if (block instanceof Node) {
+ children.push(block)
+ } else if (isVaporComponent(block)) {
+ children.push(...getTransitionBlocks(block.block))
+ } else if (isArray(block)) {
+ for (let i = 0; i < block.length; i++) {
+ const b = block[i]
+ const blocks = getTransitionBlocks(b)
+ if (isForBlock(b)) blocks.forEach(block => (block.$key = b.key))
+ children.push(...blocks)
+ }
+ } else if (isFragment(block)) {
+ if (block.insert) {
+ // vdom component
+ children.push(block)
+ } else {
+ children.push(...getTransitionBlocks(block.nodes))
+ }
+ }
+
+ return children
+}
+
+function isValidTransitionBlock(block: Block): boolean {
+ return !!(block instanceof Element || (isFragment(block) && block.insert))
+}
+
+function getTransitionElement(c: TransitionBlock): Element {
+ return (isFragment(c) ? (c.nodes as Element[])[0] : c) as Element
+}
+
+function recordPosition(c: TransitionBlock) {
+ newPositionMap.set(c, getTransitionElement(c).getBoundingClientRect())
+}
+
+function applyTranslation(c: TransitionBlock): TransitionBlock | undefined {
+ if (
+ baseApplyTranslation(
+ positionMap.get(c)!,
+ newPositionMap.get(c)!,
+ getTransitionElement(c) as ElementWithTransition,
+ )
+ ) {
+ return c
+ }
+}
+
+function getFirstConnectedChild(
+ children: TransitionBlock[],
+): Element | undefined {
+ for (let i = 0; i < children.length; i++) {
+ const child = children[i]
+ const el = getTransitionElement(child)
+ if (el.isConnected) return el
+ }
+}
diff --git a/packages/runtime-vapor/src/directives/custom.ts b/packages/runtime-vapor/src/directives/custom.ts
new file mode 100644
index 00000000000..32cfe968b50
--- /dev/null
+++ b/packages/runtime-vapor/src/directives/custom.ts
@@ -0,0 +1,35 @@
+import { type DirectiveModifiers, onScopeDispose } from '@vue/runtime-dom'
+import type { VaporComponentInstance } from '../component'
+
+// !! vapor directive is different from vdom directives
+export type VaporDirective = (
+ node: Element | VaporComponentInstance,
+ value?: () => any,
+ argument?: string,
+ modifiers?: DirectiveModifiers,
+) => (() => void) | void
+
+type VaporDirectiveArguments = Array<
+ | [VaporDirective | undefined]
+ | [VaporDirective | undefined, () => any]
+ | [VaporDirective | undefined, (() => any) | undefined, argument: string]
+ | [
+ VaporDirective | undefined,
+ value: (() => any) | undefined,
+ argument: string | undefined,
+ modifiers: DirectiveModifiers,
+ ]
+>
+
+export function withVaporDirectives(
+ node: Element | VaporComponentInstance,
+ dirs: VaporDirectiveArguments,
+): void {
+ // TODO handle custom directive on component
+ for (const [dir, value, argument, modifiers] of dirs) {
+ if (dir) {
+ const ret = dir(node, value, argument, modifiers)
+ if (ret) onScopeDispose(ret)
+ }
+ }
+}
diff --git a/packages/runtime-vapor/src/directives/vModel.ts b/packages/runtime-vapor/src/directives/vModel.ts
new file mode 100644
index 00000000000..0c32b24bf4a
--- /dev/null
+++ b/packages/runtime-vapor/src/directives/vModel.ts
@@ -0,0 +1,113 @@
+import {
+ currentInstance,
+ onMounted,
+ vModelCheckboxInit,
+ vModelCheckboxUpdate,
+ vModelGetValue,
+ vModelSelectInit,
+ vModelSetSelected,
+ vModelTextInit,
+ vModelTextUpdate,
+} from '@vue/runtime-dom'
+import { renderEffect } from '../renderEffect'
+import { looseEqual } from '@vue/shared'
+import { addEventListener } from '../dom/event'
+import { traverse } from '@vue/reactivity'
+
+type VaporModelDirective<
+ T extends HTMLElement =
+ | HTMLInputElement
+ | HTMLTextAreaElement
+ | HTMLSelectElement,
+ Modifiers extends string = string,
+> = (
+ el: T,
+ get: () => any,
+ set: (v: any) => void,
+ modifiers?: { [key in Modifiers]?: true },
+) => void
+
+function ensureMounted(cb: () => void) {
+ if (currentInstance!.isMounted) {
+ cb()
+ } else {
+ onMounted(cb)
+ }
+}
+
+export const applyTextModel: VaporModelDirective<
+ HTMLInputElement | HTMLTextAreaElement,
+ 'trim' | 'number' | 'lazy'
+> = (el, get, set, { trim, number, lazy } = {}) => {
+ vModelTextInit(el, trim, number, lazy, set)
+ ensureMounted(() => {
+ let value: any
+ renderEffect(() => {
+ vModelTextUpdate(el, value, (value = get()), trim, number, lazy)
+ })
+ })
+}
+
+export const applyCheckboxModel: VaporModelDirective = (
+ el,
+ get,
+ set,
+) => {
+ vModelCheckboxInit(el, set)
+ ensureMounted(() => {
+ let value: any
+ renderEffect(() => {
+ vModelCheckboxUpdate(
+ el,
+ value,
+ // #4096 array checkboxes need to be deep traversed
+ traverse((value = get())),
+ )
+ })
+ })
+}
+
+export const applyRadioModel: VaporModelDirective = (
+ el,
+ get,
+ set,
+) => {
+ addEventListener(el, 'change', () => set(vModelGetValue(el)))
+ ensureMounted(() => {
+ let value: any
+ renderEffect(() => {
+ if (value !== (value = get())) {
+ el.checked = looseEqual(value, vModelGetValue(el))
+ }
+ })
+ })
+}
+
+export const applySelectModel: VaporModelDirective<
+ HTMLSelectElement,
+ 'number'
+> = (el, get, set, modifiers) => {
+ vModelSelectInit(el, get(), modifiers && modifiers.number, set)
+ ensureMounted(() => {
+ renderEffect(() => vModelSetSelected(el, traverse(get())))
+ })
+}
+
+export const applyDynamicModel: VaporModelDirective = (
+ el,
+ get,
+ set,
+ modifiers,
+) => {
+ let apply: VaporModelDirective = applyTextModel
+ if (el.tagName === 'SELECT') {
+ apply = applySelectModel
+ } else if (el.tagName === 'TEXTAREA') {
+ apply = applyTextModel
+ } else if ((el as HTMLInputElement).type === 'checkbox') {
+ apply = applyCheckboxModel
+ } else if ((el as HTMLInputElement).type === 'radio') {
+ apply = applyRadioModel
+ }
+ apply(el, get, set, modifiers)
+}
diff --git a/packages/runtime-vapor/src/directives/vShow.ts b/packages/runtime-vapor/src/directives/vShow.ts
new file mode 100644
index 00000000000..406b372c20c
--- /dev/null
+++ b/packages/runtime-vapor/src/directives/vShow.ts
@@ -0,0 +1,76 @@
+import {
+ type VShowElement,
+ vShowHidden,
+ vShowOriginalDisplay,
+ warn,
+} from '@vue/runtime-dom'
+import { renderEffect } from '../renderEffect'
+import { isVaporComponent } from '../component'
+import type { Block, TransitionBlock } from '../block'
+import { isArray } from '@vue/shared'
+import { DynamicFragment } from '../fragment'
+
+export function applyVShow(target: Block, source: () => any): void {
+ if (isVaporComponent(target)) {
+ return applyVShow(target.block, source)
+ }
+
+ if (isArray(target) && target.length === 1) {
+ return applyVShow(target[0], source)
+ }
+
+ if (target instanceof DynamicFragment) {
+ const update = target.update
+ target.update = (render, key) => {
+ update.call(target, render, key)
+ setDisplay(target, source())
+ }
+ }
+
+ renderEffect(() => setDisplay(target, source()))
+}
+
+function setDisplay(target: Block, value: unknown): void {
+ if (isVaporComponent(target)) {
+ return setDisplay(target, value)
+ }
+ if (isArray(target) && target.length === 1) {
+ return setDisplay(target[0], value)
+ }
+ if (target instanceof DynamicFragment) {
+ return setDisplay(target.nodes, value)
+ }
+ const { $transition } = target as TransitionBlock
+ if (target instanceof Element) {
+ const el = target as VShowElement
+ if (!(vShowOriginalDisplay in el)) {
+ el[vShowOriginalDisplay] =
+ el.style.display === 'none' ? '' : el.style.display
+ }
+ if ($transition) {
+ if (value) {
+ $transition.beforeEnter(target)
+ el.style.display = el[vShowOriginalDisplay]!
+ $transition.enter(target)
+ } else {
+ // during initial render, the element is not yet inserted into the
+ // DOM, and it is hidden, no need to trigger transition
+ if (target.isConnected) {
+ $transition.leave(target, () => {
+ el.style.display = 'none'
+ })
+ } else {
+ el.style.display = 'none'
+ }
+ }
+ } else {
+ el.style.display = value ? el[vShowOriginalDisplay]! : 'none'
+ }
+ el[vShowHidden] = !value
+ } else if (__DEV__) {
+ warn(
+ `v-show used on component with non-single-element root node ` +
+ `and will be ignored.`,
+ )
+ }
+}
diff --git a/packages/runtime-vapor/src/dom/event.ts b/packages/runtime-vapor/src/dom/event.ts
new file mode 100644
index 00000000000..4987ecfc0d8
--- /dev/null
+++ b/packages/runtime-vapor/src/dom/event.ts
@@ -0,0 +1,109 @@
+import { onEffectCleanup } from '@vue/reactivity'
+import { isArray } from '@vue/shared'
+
+export function addEventListener(
+ el: Element,
+ event: string,
+ handler: (...args: any) => any,
+ options?: AddEventListenerOptions,
+) {
+ el.addEventListener(event, handler, options)
+ return (): void => el.removeEventListener(event, handler, options)
+}
+
+export function on(
+ el: Element,
+ event: string,
+ handler: (e: Event) => any,
+ options: AddEventListenerOptions & { effect?: boolean } = {},
+): void {
+ addEventListener(el, event, handler, options)
+ if (options.effect) {
+ onEffectCleanup(() => {
+ el.removeEventListener(event, handler, options)
+ })
+ }
+}
+
+export function delegate(
+ el: any,
+ event: string,
+ handler: (e: Event) => any,
+): void {
+ const key = `$evt${event}`
+ const existing = el[key]
+ if (existing) {
+ if (isArray(existing)) {
+ existing.push(handler)
+ } else {
+ el[key] = [existing, handler]
+ }
+ } else {
+ el[key] = handler
+ }
+}
+
+type DelegatedHandler = {
+ (...args: any[]): any
+}
+
+/**
+ * Event delegation borrowed from solid
+ */
+const delegatedEvents = Object.create(null)
+
+export const delegateEvents = (...names: string[]): void => {
+ for (const name of names) {
+ if (!delegatedEvents[name]) {
+ delegatedEvents[name] = true
+ document.addEventListener(name, delegatedEventHandler)
+ }
+ }
+}
+
+const delegatedEventHandler = (e: Event) => {
+ let node = ((e.composedPath && e.composedPath()[0]) || e.target) as any
+ if (e.target !== node) {
+ Object.defineProperty(e, 'target', {
+ configurable: true,
+ value: node,
+ })
+ }
+ Object.defineProperty(e, 'currentTarget', {
+ configurable: true,
+ get() {
+ return node || document
+ },
+ })
+ while (node !== null) {
+ const handlers = node[`$evt${e.type}`] as
+ | DelegatedHandler
+ | DelegatedHandler[]
+ if (handlers) {
+ if (isArray(handlers)) {
+ for (const handler of handlers) {
+ if (!node.disabled) {
+ handler(e)
+ if (e.cancelBubble) return
+ }
+ }
+ } else {
+ handlers(e)
+ if (e.cancelBubble) return
+ }
+ }
+ node =
+ node.host && node.host !== node && node.host instanceof Node
+ ? node.host
+ : node.parentNode
+ }
+}
+
+export function setDynamicEvents(
+ el: HTMLElement,
+ events: Record any>,
+): void {
+ for (const name in events) {
+ on(el, name, events[name], { effect: true })
+ }
+}
diff --git a/packages/runtime-vapor/src/dom/hydration.ts b/packages/runtime-vapor/src/dom/hydration.ts
new file mode 100644
index 00000000000..eeb5c8590f7
--- /dev/null
+++ b/packages/runtime-vapor/src/dom/hydration.ts
@@ -0,0 +1,223 @@
+import { warn } from '@vue/runtime-dom'
+import {
+ insertionAnchor,
+ insertionParent,
+ resetInsertionState,
+ setInsertionState,
+} from '../insertionState'
+import {
+ _child,
+ _next,
+ createTextNode,
+ disableHydrationNodeLookup,
+ enableHydrationNodeLookup,
+} from './node'
+import { BLOCK_ANCHOR_END_LABEL, BLOCK_ANCHOR_START_LABEL } from '@vue/shared'
+
+const isHydratingStack = [] as boolean[]
+export let isHydrating = false
+export let currentHydrationNode: Node | null = null
+
+let isOptimized = false
+
+function performHydration(
+ fn: () => T,
+ setup: () => void,
+ cleanup: () => void,
+): T {
+ if (!isOptimized) {
+ adoptTemplate = adoptTemplateImpl
+ locateHydrationNode = locateHydrationNodeImpl
+ // optimize anchor cache lookup
+ ;(Comment.prototype as any).$fe = undefined
+ ;(Node.prototype as any).$lbn = undefined
+ isOptimized = true
+ }
+ enableHydrationNodeLookup()
+ isHydratingStack.push((isHydrating = true))
+ setup()
+ const res = fn()
+ cleanup()
+ currentHydrationNode = null
+ isHydratingStack.pop()
+ isHydrating = isHydratingStack[isHydratingStack.length - 1] || false
+ if (!isHydrating) disableHydrationNodeLookup()
+ return res
+}
+
+export function withHydration(container: ParentNode, fn: () => void): void {
+ const setup = () => setInsertionState(container)
+ const cleanup = () => resetInsertionState()
+ return performHydration(fn, setup, cleanup)
+}
+
+export function hydrateNode(node: Node, fn: () => void): void {
+ const setup = () => (currentHydrationNode = node)
+ const cleanup = () => {}
+ return performHydration(fn, setup, cleanup)
+}
+
+export let adoptTemplate: (node: Node, template: string) => Node | null
+export let locateHydrationNode: () => void
+
+type Anchor = Comment & {
+ // cached matching fragment end to avoid repeated traversal
+ // on nested fragments
+ $fe?: Anchor
+}
+
+export const isComment = (node: Node, data: string): node is Anchor =>
+ node.nodeType === 8 && (node as Comment).data === data
+
+export function setCurrentHydrationNode(node: Node | null): void {
+ currentHydrationNode = node
+}
+
+function locateNextSiblingOfParent(n: Node): Node | null {
+ if (!n.parentNode) return null
+ return n.parentNode.nextSibling || locateNextSiblingOfParent(n.parentNode)
+}
+
+export function advanceHydrationNode(
+ node: Node & { $pns?: Node | null },
+): void {
+ // if no next sibling, find the next node in the parent chain
+ const ret =
+ node.nextSibling ||
+ // pns is short for "parent next sibling"
+ node.$pns ||
+ (node.$pns = locateNextSiblingOfParent(node))
+ if (ret) setCurrentHydrationNode(ret)
+}
+
+/**
+ * Locate the first non-fragment-comment node and locate the next node
+ * while handling potential fragments.
+ */
+function adoptTemplateImpl(node: Node, template: string): Node | null {
+ if (!(template[0] === '<' && template[1] === '!')) {
+ while (node.nodeType === 8) {
+ node = node.nextSibling!
+
+ // empty text node in slot
+ if (
+ template.trim() === '' &&
+ isComment(node, ']') &&
+ isComment(node.previousSibling!, '[')
+ ) {
+ node = node.parentNode!.insertBefore(createTextNode(' '), node)
+ break
+ }
+ }
+ }
+
+ if (__DEV__) {
+ const type = node.nodeType
+ if (
+ (type === 8 && !template.startsWith(' 0) {
+ if (node.nodeType === 8) {
+ if (node.data === open) {
+ stack.push(node)
+ } else if (node.data === close) {
+ const matchingOpen = stack.pop()!
+ matchingOpen.$fe = node
+ if (stack.length === 0) return node
+ }
+ }
+ }
+
+ return null
+}
+
+export function locateFragmentAnchor(
+ node: Node,
+ label: string,
+): Comment | null {
+ while (node && node.nodeType === 8) {
+ if (isComment(node, label)) return node
+ node = node.nextSibling!
+ }
+ return null
+}
+
+function locateNextBlockNode(node: Node): Node | null {
+ while (node) {
+ if (isComment(node, BLOCK_ANCHOR_START_LABEL)) return node.nextSibling
+ node = node.nextSibling!
+ }
+
+ if (__DEV__) {
+ throw new Error(
+ `Could not locate hydration node with anchor label: ${BLOCK_ANCHOR_START_LABEL}`,
+ )
+ }
+ return null
+}
+
+export function advanceToNonBlockNode(node: Node): Node {
+ while (node) {
+ if (isComment(node, BLOCK_ANCHOR_START_LABEL)) {
+ node = locateEndAnchor(
+ node,
+ BLOCK_ANCHOR_START_LABEL,
+ BLOCK_ANCHOR_END_LABEL,
+ )!
+ continue
+ }
+
+ break
+ }
+ return node
+}
diff --git a/packages/runtime-vapor/src/dom/node.ts b/packages/runtime-vapor/src/dom/node.ts
new file mode 100644
index 00000000000..fe267f27b95
--- /dev/null
+++ b/packages/runtime-vapor/src/dom/node.ts
@@ -0,0 +1,144 @@
+import { advanceToNonBlockNode } from './hydration'
+import { isBlockStartAnchor } from '@vue/shared'
+
+/*! #__NO_SIDE_EFFECTS__ */
+export function createElement(tagName: string): HTMLElement {
+ return document.createElement(tagName)
+}
+
+/*! #__NO_SIDE_EFFECTS__ */
+export function createTextNode(value = ''): Text {
+ return document.createTextNode(value)
+}
+
+/*! #__NO_SIDE_EFFECTS__ */
+export function createComment(data: string): Comment {
+ return document.createComment(data)
+}
+
+/*! #__NO_SIDE_EFFECTS__ */
+export function querySelector(selectors: string): Element | null {
+ return document.querySelector(selectors)
+}
+
+/*! #__NO_SIDE_EFFECTS__ */
+const _txt: typeof _child = _child
+
+/**
+ * Hydration-specific version of `child`.
+ */
+/*! #__NO_SIDE_EFFECTS__ */
+const __txt: typeof __child = (node: ParentNode): Node => {
+ let n = node.firstChild!
+
+ // since SSR doesn't generate whitespace placeholder text nodes, if firstChild
+ // is null, manually insert a text node as the first child
+ if (!n) {
+ node.textContent = ' '
+ return node.firstChild!
+ }
+
+ return n
+}
+
+/*! #__NO_SIDE_EFFECTS__ */
+export function _child(node: ParentNode): Node {
+ return node.firstChild!
+}
+
+/**
+ * Hydration-specific version of `child`.
+ */
+/*! #__NO_SIDE_EFFECTS__ */
+export function __child(node: ParentNode): Node {
+ let n: Node = node.firstChild!
+ while (n && isBlockStartAnchor(n)) {
+ n = advanceToNonBlockNode(n)
+ n = n.nextSibling!
+ }
+
+ return n
+}
+
+/*! #__NO_SIDE_EFFECTS__ */
+export function _nthChild(node: Node, i: number): Node {
+ return node.childNodes[i]
+}
+
+/**
+ * Hydration-specific version of `nthChild`.
+ */
+/*! #__NO_SIDE_EFFECTS__ */
+export function __nthChild(node: Node, i: number): Node {
+ let n = __child(node as ParentNode)
+ for (let start = 0; start < i; start++) {
+ n = __next(n) as ChildNode
+ }
+ return n
+}
+
+/*! #__NO_SIDE_EFFECTS__ */
+export function _next(node: Node): Node {
+ return node.nextSibling!
+}
+
+/**
+ * Hydration-specific version of `next`.
+ */
+/*! #__NO_SIDE_EFFECTS__ */
+export function __next(node: Node): Node {
+ if (isBlockStartAnchor(node)) {
+ node = advanceToNonBlockNode(node)
+ }
+ return node.nextSibling!
+}
+
+type DelegatedFunction any> = T & {
+ impl: T
+}
+
+/*! #__NO_SIDE_EFFECTS__ */
+export const txt: DelegatedFunction = node => {
+ return txt.impl(node)
+}
+txt.impl = _child
+
+/*! #__NO_SIDE_EFFECTS__ */
+export const child: DelegatedFunction = node => {
+ return child.impl(node)
+}
+child.impl = _child
+
+/*! #__NO_SIDE_EFFECTS__ */
+export const next: DelegatedFunction = node => {
+ return next.impl(node)
+}
+next.impl = _next
+
+/*! #__NO_SIDE_EFFECTS__ */
+export const nthChild: DelegatedFunction = (node, i) => {
+ return nthChild.impl(node, i)
+}
+nthChild.impl = _nthChild
+
+/**
+ * Enables hydration-specific node lookup behavior.
+ *
+ * Temporarily switches the implementations of the exported
+ * `txt`, `child`, `next`, and `nthChild` functions to their hydration-specific
+ * versions (`__txt`, `__child`, `__next`, `__nthChild`). This allows traversal
+ * logic to correctly handle SSR comment anchors during hydration.
+ */
+export function enableHydrationNodeLookup(): void {
+ txt.impl = __txt
+ child.impl = __child
+ next.impl = __next
+ nthChild.impl = __nthChild
+}
+
+export function disableHydrationNodeLookup(): void {
+ txt.impl = _txt
+ child.impl = _child
+ next.impl = _next
+ nthChild.impl = _nthChild
+}
diff --git a/packages/runtime-vapor/src/dom/prop.ts b/packages/runtime-vapor/src/dom/prop.ts
new file mode 100644
index 00000000000..ccc941e299d
--- /dev/null
+++ b/packages/runtime-vapor/src/dom/prop.ts
@@ -0,0 +1,285 @@
+import {
+ type NormalizedStyle,
+ canSetValueDirectly,
+ isOn,
+ isString,
+ normalizeClass,
+ normalizeStyle,
+ parseStringStyle,
+ toDisplayString,
+} from '@vue/shared'
+import { on } from './event'
+import {
+ currentInstance,
+ mergeProps,
+ patchStyle,
+ shouldSetAsProp,
+ warn,
+} from '@vue/runtime-dom'
+import {
+ type VaporComponentInstance,
+ isApplyingFallthroughProps,
+} from '../component'
+
+type TargetElement = Element & {
+ $root?: true
+ $html?: string
+ $cls?: string
+ $sty?: NormalizedStyle | string | undefined
+ value?: string
+ _value?: any
+}
+
+const hasFallthroughKey = (key: string) =>
+ (currentInstance as VaporComponentInstance).hasFallthrough &&
+ key in currentInstance!.attrs
+
+export function setProp(el: any, key: string, value: any): void {
+ if (key in el) {
+ setDOMProp(el, key, value)
+ } else {
+ setAttr(el, key, value)
+ }
+}
+
+export function setAttr(el: any, key: string, value: any): void {
+ if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
+ return
+ }
+
+ // special case for with
+ // :true-value & :false-value
+ // store value as dom properties since non-string values will be
+ // stringified.
+ if (key === 'true-value') {
+ ;(el as any)._trueValue = value
+ } else if (key === 'false-value') {
+ ;(el as any)._falseValue = value
+ }
+
+ if (value !== el[`$${key}`]) {
+ el[`$${key}`] = value
+ if (value != null) {
+ el.setAttribute(key, value)
+ } else {
+ el.removeAttribute(key)
+ }
+ }
+}
+
+export function setDOMProp(el: any, key: string, value: any): void {
+ if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
+ return
+ }
+
+ const prev = el[key]
+ if (value === prev) {
+ return
+ }
+
+ let needRemove = false
+ if (value === '' || value == null) {
+ const type = typeof prev
+ if (value == null && type === 'string') {
+ // e.g.
`).not.toHaveBeenWarned()
+ })
+
+ test('element with binding and text children', async () => {
+ const { container, data } = await testHydration(`
+
+ {{ data }}
+
+ `,
+ {},
+ ref('foo'),
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `""`,
+ )
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `""`,
+ )
+ })
+
+ test('in ssr slot vnode fallback', async () => {
+ const { container, data } = await testHydration(
+ `
+
+ {{ data }}
+
+ `,
+ {
+ Child: `
+
+
+
+ `,
+ },
+ ref('foo'),
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ {{data}}
+
+ `,
+ {
+ Child: `
+
+ {{data}}
+
+
+ `,
+ {
+ Child: `
+
+ {{data}}
+
+
+ `,
+ {
+ Child: `
+
+ {{item}}
+
+
+ `,
+ {
+ Child: `
+
+ {{data}}
+
+
+ `,
+ {
+ Child: `
+
+ {{data}}
+
+
+ `,
+ {
+ Child: `
+
+
+
+
+ `,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ foo
+ "
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ bar
+ "
+ `,
+ )
+ })
+
+ test('mixed slot and text node', async () => {
+ const data = reactive({
+ text: 'foo',
+ msg: 'hi',
+ })
+ const { container } = await testHydration(
+ `
+ {{ data }}
+ `)
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"foo
"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `""`,
+ )
+ })
+
+ test('element with elements children', async () => {
+ const { container } = await testHydration(`
+
+
+ {{ data }}
+
+
+
+ `)
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"foo
"`,
+ )
+
+ // event handler
+ triggerEvent('click', container.querySelector('.foo')!)
+
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"bar
"`,
+ )
+ })
+
+ test('element with ref', async () => {
+ const { data, container } = await testHydration(
+ `
+ hi
+
+ `,
+ {},
+ ref(null),
+ )
+
+ expect(data.value).toBe(container.firstChild)
+ })
+ })
+
+ describe('component', () => {
+ test('basic component', async () => {
+ const { container, data } = await testHydration(
+ `
+
+ foo
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ bar
+
"
+ `,
+ )
+ })
+
+ test('fragment component', async () => {
+ const { container, data } = await testHydration(
+ `
+ {{ data }}
-{{ data }}-` },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "foo
-foo-
+
+
"
+ `,
+ )
+ })
+
+ test('fragment component with prepend', async () => {
+ const { container, data } = await testHydration(
+ `
+ bar
-bar-
+ {{ data }}
-{{ data }}-` },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "foo
-foo-
+
+
"
+ `,
+ )
+ })
+
+ test('nested fragment components', async () => {
+ const { container, data } = await testHydration(
+ `
+ bar
-bar-
+ {{ data }}
-{{ data }}-`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "foo
-foo-
+
+
"
+ `,
+ )
+ })
+
+ test('component with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+ bar
-bar-
+
+
+
+
+ `,
+ {
+ Child: `{{ data }}`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ foo
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ bar
+
"
+ `,
+ )
+ })
+
+ test('nested components with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+ {{ data }}
`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "foo
+
+
"
+ `,
+ )
+ })
+
+ test('nested components with multi level anchor insertion', async () => {
+ const { container, data } = await testHydration(
+ `
+ bar
+ {{ data }}
`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
+ foo
+
+
"
+ `,
+ )
+ })
+
+ test('consecutive components with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+
+
+ bar
+
+
+
+
+ `,
+ {
+ Child: `{{ data }}`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ foo
+ foo
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ bar
+ bar
+
"
+ `,
+ )
+ })
+
+ test('consecutive components with insertion parent', async () => {
+ const data = reactive({ foo: 'foo', bar: 'bar' })
+ const { container } = await testHydration(
+ `
+
+
+
+ `,
+ {
+ Child1: `{{ data.foo }}`,
+ Child2: `{{ data.bar }}`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ foo
+ bar
+
"
+ `,
+ )
+
+ data.foo = 'foo1'
+ data.bar = 'bar1'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ foo1
+ bar1
+
"
+ `,
+ )
+ })
+
+ test('nested consecutive components with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+ {{ data }}
`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "foo
+ foo
+
+
"
+ `,
+ )
+ })
+
+ test('nested consecutive components with multi level anchor insertion', async () => {
+ const { container, data } = await testHydration(
+ `
+ bar
+ bar
+ {{ data }}
`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
+ foo
+ foo
+
+
"
+ `,
+ )
+ })
+
+ test('mixed component and element with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+
+
+ bar
+ bar
+
+
+
+
+ `,
+ {
+ Child: `{{ data }}`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ foo
+
+ foo
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ bar
+
+ bar
+
"
+ `,
+ )
+ })
+
+ test('mixed component and text with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+
+
+
+
+ `,
+ {
+ Child: `{{ data }}`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ foo
+ foo
+ foo
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ bar
+ bar
+ bar
+
"
+ `,
+ )
+ })
+
+ test('fragment component with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+
+
+
+
+ `,
+ {
+ Child: `{{ data }}
-{{ data }}`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "foo
-foo
+
+
"
+ `,
+ )
+ })
+
+ test('nested fragment component with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+ bar
-bar
+ {{ data }}
-{{ data }}-`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "foo
-foo-
+
+
"
+ `,
+ )
+ })
+
+ test('nested fragment component with multi level anchor insertion', async () => {
+ const { container, data } = await testHydration(
+ `
+ bar
-bar-
+ {{ data }}
-{{ data }}-`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
+ foo
-foo-
+
+
"
+ `,
+ )
+ })
+
+ test('consecutive fragment components with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+
+
+ bar
-bar-
+
+
+
+
+ `,
+ {
+ Child: `{{ data }}
-{{ data }}`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "foo
-foo
+ foo
-foo
+
+
"
+ `,
+ )
+ })
+
+ test('nested consecutive fragment components with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+ bar
-bar
+ bar
-bar
+ {{ data }}
-{{ data }}-`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "foo
-foo-
+ foo
-foo-
+
+
"
+ `,
+ )
+ })
+
+ test('nested consecutive fragment components with multi level anchor insertion', async () => {
+ const { container, data } = await testHydration(
+ `
+ bar
-bar-
+ bar
-bar-
+ {{ data }}
-{{ data }}-`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
+ foo
-foo-
+ foo
-foo-
+
+
"
+ `,
+ )
+ })
+
+ test('nested consecutive fragment components with root level anchor insertion', async () => {
+ const { container, data } = await testHydration(
+ `
+
+
+ bar
-bar-
+ bar
-bar-
+ {{ data }}
-{{ data }}-`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "foo
-foo-foo
-foo-
+
+
"
+ `,
+ )
+ })
+
+ test('mixed fragment component and element with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+ bar
-bar-bar
-bar-
+
+
+
+
+ `,
+ {
+ Child: `{{ data }}
-{{ data }}`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "foo
-foo
+
+ foo
-foo
+
+
"
+ `,
+ )
+ })
+
+ test('mixed fragment component and text with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+ bar
-bar
+
+ bar
-bar
+
+
+
+
+ `,
+ {
+ Child: `{{ data }}
-{{ data }}`,
+ },
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "foo
-foo
+ foo
+ foo
-foo
+
+
"
+ `,
+ )
+ })
+ })
+
+ describe('dynamic component', () => {
+ test('basic dynamic component', async () => {
+ const { container, data } = await testHydration(
+ `
+ bar
-bar
+ bar
+ bar
-bar
+ foo
`,
+ bar: `bar
`,
+ },
+ ref('foo'),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"foo
"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"bar
"`,
+ )
+ })
+
+ test('dynamic component with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+
+
+
+ `,
+ {
+ foo: `foo
`,
+ bar: `bar
`,
+ },
+ ref('foo'),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "foo
+
+
"
+ `,
+ )
+ })
+
+ test('consecutive dynamic components with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+ bar
+
+
+
+ `,
+ {
+ foo: `foo
`,
+ bar: `bar
`,
+ },
+ ref('foo'),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "foo
+ foo
+
+
"
+ `,
+ )
+ })
+
+ test('dynamic component fallback', async () => {
+ const { container, data } = await testHydration(
+ `
+ bar
+ bar
+
+ foo
+
"
+ `,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ bar
+
"
+ `,
+ )
+ })
+ })
+
+ describe('if', () => {
+ test('basic toggle - true -> false', async () => {
+ const data = ref(true)
+ const { container } = await testHydration(
+ `
+ foo
+ `,
+ undefined,
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"foo
"`,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `""`,
+ )
+ })
+
+ test('basic toggle - false -> true', async () => {
+ const data = ref(false)
+ const { container } = await testHydration(
+ `
+ foo
+ `,
+ undefined,
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `""`,
+ )
+
+ data.value = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"foo
"`,
+ )
+ })
+
+ test('v-if on insertion parent', async () => {
+ const data = ref(true)
+ const { container } = await testHydration(
+ `
+
+
+ `,
+ { Child: `foo` },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"foo
"`,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `""`,
+ )
+
+ data.value = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"foo
"`,
+ )
+ })
+
+ test('v-if/else-if/else chain - switch branches', async () => {
+ const data = ref('a')
+ const { container } = await testHydration(
+ `
+ foo
+ bar
+ baz
+ `,
+ undefined,
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"foo
"`,
+ )
+
+ data.value = 'b'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"bar
"`,
+ )
+
+ data.value = 'c'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"baz
"`,
+ )
+
+ data.value = 'a'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"foo
"`,
+ )
+ })
+
+ test('nested if', async () => {
+ const data = reactive({ outer: true, inner: true })
+ const { container } = await testHydration(
+ `
+
+ outer
+
+ `,
+ undefined,
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "inner
+ outer
+
"
+ `,
+ )
+
+ data.inner = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "inner
+ outer
+
+
"
+ `,
+ )
+
+ data.outer = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `""`,
+ )
+ })
+
+ test('on component', async () => {
+ const data = ref(true)
+ const { container } = await testHydration(
+ `
+ foo
` },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"foo
"`,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `""`,
+ )
+
+ data.value = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"foo
"`,
+ )
+ })
+
+ test('mixed prepend and insertion anchor', async () => {
+ const data = reactive({
+ show: true,
+ foo: 'foo',
+ bar: 'bar',
+ qux: 'qux',
+ })
+ const { container } = await testHydration(
+ `
+
+
+
+ `,
+ { Child: `foo` },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ foo
+
"
+ `,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
+
"
+ `,
+ )
+ })
+
+ test('consecutive component with insertion parent', async () => {
+ const data = reactive({
+ show: true,
+ foo: 'foo',
+ bar: 'bar',
+ })
+ const { container } = await testHydration(
+ `
+
+
+ `,
+ {
+ Child: `{{data.foo}}`,
+ Child2: `{{data.bar}}`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ foo
+ bar
+
"
+ `,
+ )
+
+ data.show = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `""`,
+ )
+
+ data.show = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"foobar
"`,
+ )
+
+ data.foo = 'foo1'
+ data.bar = 'bar1'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"foo1bar1
"`,
+ )
+ })
+
+ test('consecutive v-if on component with insertion anchor', async () => {
+ const data = ref(true)
+ const { container } = await testHydration(
+ `
+
+
+
+ `,
+ { Child: `foo` },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ foo
+ foo
+
"
+ `,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
+
+
"
+ `,
+ )
+
+ data.value = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+ "
+ foo
+ foo
+
"
+ `)
+ })
+
+ test('on fragment component', async () => {
+ const data = ref(true)
+ const { container } = await testHydration(
+ `
+
+
+ `,
+ {
+ Child: `{{ data }}
-{{ data }}-`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"true
-true-true
-true-
+
+
+ `,
+ {
+ Child: `{{ data }}
-{{ data }}-`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "true
-true-
+
+
+
"
+ `,
+ )
+
+ data.value = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+ "
+
"
+ `)
+ })
+
+ test('consecutive v-if on fragment component with insertion anchor', async () => {
+ const data = ref(true)
+ const { container } = await testHydration(
+ `
+ true
-true-
+
+
+
+ `,
+ {
+ Child: `{{ data }}
-{{ data }}-`,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "true
-true-
+ true
-true-
+
+
+
+
"
+ `,
+ )
+
+ data.value = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+ "
+
"
+ `)
+ })
+
+ test('on dynamic component with insertion anchor', async () => {
+ const data = ref(true)
+ const { container } = await testHydration(
+ `
+ true
-true-
+ true
-true-
+
+
+
+ `,
+ { Child: `foo` },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ foo
+
"
+ `,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
+
"
+ `,
+ )
+
+ data.value = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+ "
+ foo
+
"
+ `)
+ })
+ })
+
+ describe('for', () => {
+ test('basic v-for', async () => {
+ const { container, data } = await testHydration(
+ `
+ {{ item }}
+ `,
+ undefined,
+ ref(['a', 'b', 'c']),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"abc"`,
+ )
+
+ data.value.push('d')
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"abcd"`,
+ )
+ })
+
+ test('v-for with insertion parent + sibling component', async () => {
+ const { container, data } = await testHydration(
+ `
+
+ {{ item }}
+
+ {{data.length}}
`,
+ },
+ ref(['a', 'b', 'c']),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"abc
3
"`,
+ )
+
+ data.value.push('d')
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"abcd
4
"`,
+ )
+ })
+
+ test('v-for with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+
+
+ {{ item }}
+
+
+ `,
+ undefined,
+ ref(['a', 'b', 'c']),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ abc
+
"
+ `,
+ )
+
+ data.value.push('d')
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ abcd
+
"
+ `,
+ )
+
+ data.value.splice(0, 1)
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ bcd
+
"
+ `,
+ )
+ })
+
+ test('consecutive v-for with insertion anchor', async () => {
+ const { container, data } = await testHydration(
+ `
+
+
+ {{ item }}
+ {{ item }}
+
+
+ `,
+ undefined,
+ ref(['a', 'b', 'c']),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ abc
+ abc
+
"
+ `,
+ )
+
+ data.value.push('d')
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ abcd
+ abcd
+
"
+ `,
+ )
+
+ data.value.splice(0, 2)
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ cd
+ cd
+
"
+ `,
+ )
+ })
+
+ test('v-for on component', async () => {
+ const { container, data } = await testHydration(
+ `
+
+
+ `,
+ {
+ Child: `comp
`,
+ },
+ ref(['a', 'b', 'c']),
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"comp
comp
comp
comp
comp
comp
comp
+
+ {{ item }}
+
+
+ `,
+ {
+ Child: `
+ a
+
+ b
+
+ c
+
"
+ `,
+ )
+
+ data.value.push('d')
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ a
+
+ b
+
+ c
+ d
"
+ `,
+ )
+ })
+
+ test('on fragment component', async () => {
+ const { container, data } = await testHydration(
+ `
+
+
+ `,
+ {
+ Child: `foo
-bar-`,
+ },
+ ref(['a', 'b', 'c']),
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `"foo
-bar-foo
-bar-foo
-bar-foo
-bar-foo
-bar-foo
-bar-foo
-bar-
+
+ foo
+
+ hi
"
+ `,
+ )
+
+ data.msg = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
+ foo
+
+ bar
"
+ `,
+ )
+ })
+
+ test('mixed root slot and text node', async () => {
+ const data = reactive({
+ text: 'foo',
+ msg: 'hi',
+ })
+ const { container } = await testHydration(
+ `
+ {{data.msg}}
+
+ foo
+
+
+ bar
+
+
"
+ `,
+ )
+
+ data.msg = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "hi
+
+ foo
+
+
+ bar
+
+
"
+ `,
+ )
+ })
+
+ test('mixed slot and element', async () => {
+ const data = reactive({
+ text: 'foo',
+ msg: 'hi',
+ })
+ const { container } = await testHydration(
+ `
+ bar
{{data.msg}}
+
+ foo
+
+
"
+ `,
+ )
+
+ data.msg = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "hi
+
+ foo
+
+
"
+ `,
+ )
+ })
+
+ test('mixed slot and component', async () => {
+ const data = reactive({
+ msg1: 'foo',
+ msg2: 'bar',
+ })
+ const { container } = await testHydration(
+ `
+ bar
+
+ `,
+ Child2: `
+
+ {{data.msg2}}
+ `,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.msg2 = 'hello'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "bar
+
+ foo
+
+ bar
+
+
"
+ `,
+ )
+ })
+
+ test('mixed slot and fragment component', async () => {
+ const data = reactive({
+ msg1: 'foo',
+ msg2: 'bar',
+ })
+ const { container } = await testHydration(
+ `
+ hello
+
+ foo
+
+ hello
+
+
+ `,
+ Child2: `
+
+ {{data.msg1}}
{{data.msg2}}
+ `,
+ },
+ data,
+ )
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
"
+ `,
+ )
+
+ data.msg1 = 'hello'
+ data.msg2 = 'vapor'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "foo
bar
+
+ foo
+
+ foo
bar
+
+
"
+ `,
+ )
+ })
+
+ test('mixed slot and v-if', async () => {
+ const data = reactive({
+ show: true,
+ msg: 'foo',
+ })
+ const { container } = await testHydration(
+ `
+ hello
vapor
+
+ hello
+
+ hello
vapor
+ {{data.msg}}
+ {{data.msg}}
+ `,
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "foo
+ foo
+ foo
"
+ `,
+ )
+
+ data.show = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ foo
+ "
+ `,
+ )
+
+ data.show = true
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+ "foo
+ foo
+ foo
"
+ `)
+ })
+
+ test('mixed slot and v-for', async () => {
+ const data = reactive({
+ items: ['a', 'b', 'c'],
+ msg: 'foo',
+ })
+ const { container } = await testHydration(
+ `
+ {{item}}
+ {{item}}
+ `,
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "a
b
c
+ foo
+ a
b
c
"
+ `,
+ )
+
+ data.items.push('d')
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "a
b
c
d
+ foo
+ a
b
c
d
"
+ `,
+ )
+ })
+
+ test('consecutive slots', async () => {
+ const data = reactive({
+ msg1: 'foo',
+ msg2: 'bar',
+ })
+
+ const { container } = await testHydration(
+ `
+
+
+
+ `,
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
+ foo
+
+
+ bar
+
+
"
+ `,
+ )
+
+ data.msg1 = 'hello'
+ data.msg2 = 'vapor'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
+ hello
+
+
+ vapor
+
+
"
+ `,
+ )
+ })
+
+ test('consecutive slots prepend', async () => {
+ const data = reactive({
+ msg1: 'foo',
+ msg2: 'bar',
+ msg3: 'baz',
+ })
+
+ const { container } = await testHydration(
+ `
+
+
+ `,
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "{{data.msg3}}
+
+
+ foo
+
+
+ bar
+
+
"
+ `,
+ )
+
+ data.msg1 = 'hello'
+ data.msg2 = 'vapor'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "baz
+
+ hello
+
+
+ vapor
+
+
"
+ `,
+ )
+ })
+
+ test('slot fallback', async () => {
+ const data = reactive({
+ foo: 'foo',
+ })
+ const { container } = await testHydration(
+ `
+ baz
+
+ {{data.foo}}
+
+
+ `,
+ {
+ Parent: `{{data.bar}}
+
+
+
"
+ `,
+ )
+
+ data.foo = 'foo1'
+ data.bar = 'bar1'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+
+ foo
+
+
bar
+
+
"
+ `,
+ )
+ })
+
+ test('forwarded slot with fallback', async () => {
+ const data = reactive({
+ foo: 'foo',
+ })
+ const { container } = await testHydration(
+ `
+
+
+ foo1
+
+
bar1
+ foo
+
"
+ `,
+ )
+
+ data.foo = 'foo1'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ foo1
+
"
+ `,
+ )
+ })
+
+ test('forwarded slot with empty content', async () => {
+ const data = reactive({
+ foo: 'foo',
+ })
+ const { container } = await testHydration(
+ `
+
+
+ `,
+ },
+ data,
+ )
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "{{data.foo}}
+
+
+
+
+
"
+ `,
+ )
+
+ data.foo = 'bar'
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "foo
+
+
+
+
"
+ `,
+ )
+ })
+ })
+
+ describe.todo('transition', async () => {
+ test('transition appear', async () => {})
+
+ test('transition appear with v-if', async () => {})
+
+ test('transition appear with v-show', async () => {})
+
+ test('transition appear w/ event listener', async () => {})
+ })
+
+ describe.todo('async component', async () => {
+ test('async component', async () => {})
+
+ test('update async wrapper before resolve', async () => {})
+
+ test('hydrate safely when property used by async setup changed before render', async () => {})
+
+ test('unmount async wrapper before load', async () => {})
+
+ test('nested async wrapper', async () => {})
+
+ test('unmount async wrapper before load (fragment)', async () => {})
+ })
+
+ describe.todo('force hydrate prop', async () => {
+ test.todo('force hydrate prop with `.prop` modifier', () => {})
+
+ test.todo(
+ 'force hydrate input v-model with non-string value bindings',
+ () => {},
+ )
+
+ test.todo('force hydrate checkbox with indeterminate', () => {})
+
+ test.todo(
+ 'force hydrate select option with non-string value bindings',
+ () => {},
+ )
+
+ test.todo('force hydrate custom element with dynamic props', () => {})
+ })
+
+ describe.todo('data-allow-mismatch')
+
+ describe.todo('mismatch handling')
+
+ describe.todo('Teleport')
+
+ describe.todo('Suspense')
+})
+
+describe('VDOM interop', () => {
+ test('basic render vapor component', async () => {
+ const data = ref(true)
+ const { container } = await testWithVDOMApp(
+ `
+
+ bar
+ true
+
"
+ `,
+ )
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ false
+
"
+ `,
+ )
+ })
+
+ test('vapor slot render vdom component (render function)', async () => {
+ const data = ref(true)
+ const { container } = await testWithVaporApp(
+ `
+
+
+
+
"
+ `,
+ )
+
+ expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+
+ data.value = false
+ await nextTick()
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "true
+
+
"
+ `,
+ )
+ })
+})
diff --git a/packages/runtime-vapor/__tests__/if.spec.ts b/packages/runtime-vapor/__tests__/if.spec.ts
new file mode 100644
index 00000000000..eed0a95ef61
--- /dev/null
+++ b/packages/runtime-vapor/__tests__/if.spec.ts
@@ -0,0 +1,243 @@
+import {
+ child,
+ createIf,
+ insert,
+ renderEffect,
+ template,
+ // @ts-expect-error
+ withDirectives,
+} from '../src'
+import { nextTick, ref } from '@vue/runtime-dom'
+import type { Mock } from 'vitest'
+import { makeRender } from './_utils'
+import { unmountComponent } from '../src/component'
+import { setElementText } from '../src/dom/prop'
+
+const define = makeRender()
+
+describe('createIf', () => {
+ test('basic', async () => {
+ // mock this template:
+ // false
+ //
+
+ let spyIfFn: Mock{{counter}}
+ //zero
+ //zero
') + + const { host } = define(() => { + const n0 = t0() + + insert( + createIf( + spyConditionFn, + // v-if + (spyIfFn ||= vi.fn(() => { + const n2 = t1() + renderEffect(() => { + setElementText(n2, count.value) + }) + return n2 + })), + // v-else + (spyElseFn ||= vi.fn(() => { + const n4 = t2() + return n4 + })), + ), + n0 as any as ParentNode, + ) + return n0 + }).render() + + expect(host.innerHTML).toBe('zero
1
2
zero
`)
+ })
+
+ test('should attach scopeId to nested child component', () => {
+ const Child = defineVaporComponent({
+ __scopeId: 'child',
+ setup() {
+ return template('', true)()
+ },
+ })
+
+ const Parent = defineVaporComponent({
+ __scopeId: 'parent',
+ setup() {
+ return createComponent(Child)
+ },
+ })
+
+ const { html } = define({
+ __scopeId: 'app',
+ setup() {
+ return createComponent(Parent)
+ },
+ }).render()
+ expect(html()).toBe(``)
+ })
+
+ test('should not attach scopeId to nested multiple root components', () => {
+ const Child = defineVaporComponent({
+ __scopeId: 'child',
+ setup() {
+ return template('', true)()
+ },
+ })
+
+ const Parent = defineVaporComponent({
+ __scopeId: 'parent',
+ setup() {
+ const n0 = template('')()
+ const n1 = createComponent(Child)
+ return [n0, n1]
+ },
+ })
+
+ const { html } = define({
+ __scopeId: 'app',
+ setup() {
+ return createComponent(Parent)
+ },
+ }).render()
+ expect(html()).toBe(``)
+ })
+
+ test('should attach scopeId to nested child component with insertion state', () => {
+ const Child = defineVaporComponent({
+ __scopeId: 'child',
+ setup() {
+ return template('', true)()
+ },
+ })
+
+ const Parent = defineVaporComponent({
+ __scopeId: 'parent',
+ setup() {
+ return createComponent(Child)
+ },
+ })
+
+ const { html } = define({
+ __scopeId: 'app',
+ setup() {
+ const t0 = template('', true)
+ const n1 = t0() as any
+ setInsertionState(n1)
+ createComponent(Parent)
+ return n1
+ },
+ }).render()
+ expect(html()).toBe(
+ `
`,
+ )
+ })
+
+ test('should attach scopeId to dynamic component', () => {
+ const { html } = define({
+ __scopeId: 'parent',
+ setup() {
+ return createDynamicComponent(() => 'button')
+ },
+ }).render()
+ expect(html()).toBe(``)
+ })
+
+ test('should attach scopeId to dynamic component with insertion state', () => {
+ const { html } = define({
+ __scopeId: 'parent',
+ setup() {
+ const t0 = template('', true)
+ const n1 = t0() as any
+ setInsertionState(n1)
+ createDynamicComponent(() => 'button')
+ return n1
+ },
+ }).render()
+ expect(html()).toBe(
+ ``,
+ )
+ })
+
+ test('should attach scopeId to nested dynamic component', () => {
+ const Comp = defineVaporComponent({
+ __scopeId: 'child',
+ setup() {
+ return createDynamicComponent(() => 'button', null, null, true)
+ },
+ })
+ const { html } = define({
+ __scopeId: 'parent',
+ setup() {
+ return createComponent(Comp, null, null, true)
+ },
+ }).render()
+ expect(html()).toBe(
+ ``,
+ )
+ })
+
+ test('should attach scopeId to nested dynamic component with insertion state', () => {
+ const Comp = defineVaporComponent({
+ __scopeId: 'child',
+ setup() {
+ return createDynamicComponent(() => 'button', null, null, true)
+ },
+ })
+ const { html } = define({
+ __scopeId: 'parent',
+ setup() {
+ const t0 = template('', true)
+ const n1 = t0() as any
+ setInsertionState(n1)
+ createComponent(Comp, null, null, true)
+ return n1
+ },
+ }).render()
+ expect(html()).toBe(
+ ``,
+ )
+ })
+
+ test.todo('should attach scopeId to suspense content', async () => {})
+
+ // :slotted basic
+ test('should work on slots', () => {
+ const Child = defineVaporComponent({
+ __scopeId: 'child',
+ setup() {
+ const n1 = template('', true)() as any
+ setInsertionState(n1)
+ createSlot('default', null)
+ return n1
+ },
+ })
+
+ const Child2 = defineVaporComponent({
+ __scopeId: 'child2',
+ setup() {
+ return template('', true)()
+ },
+ })
+
+ const { html } = define({
+ __scopeId: 'parent',
+ setup() {
+ const n2 = createComponent(
+ Child,
+ null,
+ {
+ default: () => {
+ const n0 = template('')()
+ const n1 = createComponent(
+ Child2,
+ null,
+ null,
+ undefined,
+ undefined,
+ 'parent',
+ )
+ return [n0, n1]
+ },
+ },
+ true,
+ )
+ return n2
+ },
+ }).render()
+
+ expect(html()).toBe(
+ `
` +
+ `` +
+ // component inside slot should have:
+ // - scopeId from template context
+ // - slotted scopeId from slot owner
+ // - its own scopeId
+ `` +
+ `` +
+ `
`,
+ )
+ })
+
+ test(':slotted on forwarded slots', async () => {
+ const Wrapper = defineVaporComponent({
+ __scopeId: 'wrapper',
+ setup() {
+ // ` +
+ `` +
+ `` +
+ `
`,
+ )
+ })
+})
+
+describe('vdom interop', () => {
+ test('vdom parent > vapor child', () => {
+ const VaporChild = defineVaporComponent({
+ __scopeId: 'vapor-child',
+ setup() {
+ return template('', true)()
+ },
+ })
+
+ const VdomParent = {
+ __scopeId: 'vdom-parent',
+ setup() {
+ return () => h(VaporChild as any)
+ },
+ }
+
+ const App = {
+ setup() {
+ return () => h(VdomParent)
+ },
+ }
+
+ const root = document.createElement('div')
+ createApp(App).use(vaporInteropPlugin).mount(root)
+
+ expect(root.innerHTML).toBe(
+ ``,
+ )
+ })
+
+ test('vdom parent > vapor > vdom child', () => {
+ const VdomChild = {
+ __scopeId: 'vdom-child',
+ setup() {
+ return () => h('button')
+ },
+ }
+
+ const VaporChild = defineVaporComponent({
+ __scopeId: 'vapor-child',
+ setup() {
+ return createComponent(VdomChild as any, null, null, true)
+ },
+ })
+
+ const VdomParent = {
+ __scopeId: 'vdom-parent',
+ setup() {
+ return () => h(VaporChild as any)
+ },
+ }
+
+ const App = {
+ setup() {
+ return () => h(VdomParent)
+ },
+ }
+
+ const root = document.createElement('div')
+ createApp(App).use(vaporInteropPlugin).mount(root)
+
+ expect(root.innerHTML).toBe(
+ ``,
+ )
+ })
+
+ test('vdom parent > vapor > vapor > vdom child', () => {
+ const VdomChild = {
+ __scopeId: 'vdom-child',
+ setup() {
+ return () => h('button')
+ },
+ }
+
+ const NestedVaporChild = defineVaporComponent({
+ __scopeId: 'nested-vapor-child',
+ setup() {
+ return createComponent(VdomChild as any, null, null, true)
+ },
+ })
+
+ const VaporChild = defineVaporComponent({
+ __scopeId: 'vapor-child',
+ setup() {
+ return createComponent(NestedVaporChild as any, null, null, true)
+ },
+ })
+
+ const VdomParent = {
+ __scopeId: 'vdom-parent',
+ setup() {
+ return () => h(VaporChild as any)
+ },
+ }
+
+ const App = {
+ setup() {
+ return () => h(VdomParent)
+ },
+ }
+
+ const root = document.createElement('div')
+ createApp(App).use(vaporInteropPlugin).mount(root)
+
+ expect(root.innerHTML).toBe(
+ ``,
+ )
+ })
+
+ test('vdom parent > vapor dynamic child', () => {
+ const VaporChild = defineVaporComponent({
+ __scopeId: 'vapor-child',
+ setup() {
+ return createDynamicComponent(() => 'button', null, null, true)
+ },
+ })
+
+ const VdomParent = {
+ __scopeId: 'vdom-parent',
+ setup() {
+ return () => h(VaporChild as any)
+ },
+ }
+
+ const App = {
+ setup() {
+ return () => h(VdomParent)
+ },
+ }
+
+ const root = document.createElement('div')
+ createApp(App).use(vaporInteropPlugin).mount(root)
+
+ expect(root.innerHTML).toBe(
+ ``,
+ )
+ })
+
+ test('vapor parent > vdom child', () => {
+ const VdomChild = {
+ __scopeId: 'vdom-child',
+ setup() {
+ return () => h('button')
+ },
+ }
+
+ const VaporParent = defineVaporComponent({
+ __scopeId: 'vapor-parent',
+ setup() {
+ return createComponent(VdomChild as any, null, null, true)
+ },
+ })
+
+ const App = {
+ setup() {
+ return () => h(VaporParent as any)
+ },
+ }
+
+ const root = document.createElement('div')
+ createApp(App).use(vaporInteropPlugin).mount(root)
+
+ expect(root.innerHTML).toBe(
+ ``,
+ )
+ })
+
+ test('vapor parent > vdom > vapor child', () => {
+ const VaporChild = defineVaporComponent({
+ __scopeId: 'vapor-child',
+ setup() {
+ return template('', true)()
+ },
+ })
+
+ const VdomChild = {
+ __scopeId: 'vdom-child',
+ setup() {
+ return () => h(VaporChild as any)
+ },
+ }
+
+ const VaporParent = defineVaporComponent({
+ __scopeId: 'vapor-parent',
+ setup() {
+ return createComponent(VdomChild as any, null, null, true)
+ },
+ })
+
+ const App = {
+ setup() {
+ return () => h(VaporParent as any)
+ },
+ }
+
+ const root = document.createElement('div')
+ createApp(App).use(vaporInteropPlugin).mount(root)
+
+ expect(root.innerHTML).toBe(
+ ``,
+ )
+ })
+
+ test('vapor parent > vdom > vdom > vapor child', () => {
+ const VaporChild = defineVaporComponent({
+ __scopeId: 'vapor-child',
+ setup() {
+ return template('', true)()
+ },
+ })
+
+ const VdomChild = {
+ __scopeId: 'vdom-child',
+ setup() {
+ return () => h(VaporChild as any)
+ },
+ }
+
+ const VdomParent = {
+ __scopeId: 'vdom-parent',
+ setup() {
+ return () => h(VdomChild as any)
+ },
+ }
+
+ const VaporParent = defineVaporComponent({
+ __scopeId: 'vapor-parent',
+ setup() {
+ return createComponent(VdomParent as any, null, null, true)
+ },
+ })
+
+ const App = {
+ setup() {
+ return () => h(VaporParent as any)
+ },
+ }
+
+ const root = document.createElement('div')
+ createApp(App).use(vaporInteropPlugin).mount(root)
+
+ expect(root.innerHTML).toBe(
+ ``,
+ )
+ })
+
+ test.todo('vapor parent > vapor slot > vdom child', () => {
+ const VaporSlot = defineVaporComponent({
+ __scopeId: 'vapor-slot',
+ setup() {
+ const n1 = template('', true)() as any
+ setInsertionState(n1)
+ createSlot('default', null)
+ return n1
+ },
+ })
+
+ const VdomChild = {
+ __scopeId: 'vdom-child',
+ setup() {
+ return () => h('span')
+ },
+ }
+
+ const VaporParent = defineVaporComponent({
+ __scopeId: 'vapor-parent',
+ setup() {
+ const n2 = createComponent(
+ VaporSlot,
+ null,
+ {
+ default: () => {
+ const n0 = template('')()
+ const n1 = createComponent(
+ VdomChild,
+ undefined,
+ undefined,
+ undefined,
+ undefined,
+ 'vapor-parent',
+ )
+ return [n0, n1]
+ },
+ },
+ true,
+ )
+ return n2
+ },
+ })
+
+ const App = {
+ setup() {
+ return () => h(VaporParent as any)
+ },
+ }
+
+ const root = document.createElement('div')
+ createApp(App).use(vaporInteropPlugin).mount(root)
+
+ expect(root.innerHTML).toBe(
+ `` +
+ `` +
+ `` +
+ `` +
+ `
`,
+ )
+ })
+})
diff --git a/packages/runtime-vapor/__tests__/vdomInterop.spec.ts b/packages/runtime-vapor/__tests__/vdomInterop.spec.ts
new file mode 100644
index 00000000000..98c4cdbc9d0
--- /dev/null
+++ b/packages/runtime-vapor/__tests__/vdomInterop.spec.ts
@@ -0,0 +1,220 @@
+import {
+ createVNode,
+ defineComponent,
+ h,
+ nextTick,
+ ref,
+ renderSlot,
+ toDisplayString,
+ useModel,
+} from '@vue/runtime-dom'
+import { makeInteropRender } from './_utils'
+import {
+ applyTextModel,
+ child,
+ createComponent,
+ defineVaporComponent,
+ renderEffect,
+ setText,
+ template,
+} from '../src'
+
+const define = makeInteropRender()
+
+describe('vdomInterop', () => {
+ describe('props', () => {
+ test('should work if props are not provided', () => {
+ const VaporChild = defineVaporComponent({
+ props: {
+ msg: String,
+ },
+ setup(_, { attrs }) {
+ return [document.createTextNode(attrs.class || 'foo')]
+ },
+ })
+
+ const { html } = define({
+ setup() {
+ return () => h(VaporChild as any)
+ },
+ }).render()
+
+ expect(html()).toBe('foo')
+ })
+ })
+
+ describe('v-model', () => {
+ test('basic work', async () => {
+ const VaporChild = defineVaporComponent({
+ props: {
+ modelValue: {},
+ modelModifiers: {},
+ },
+ emits: ['update:modelValue'],
+ setup(__props) {
+ const modelValue = useModel(__props, 'modelValue')
+
+ const n0 = template('')() as any + const n1 = template('')() as any + const x0 = child(n0) as any + applyTextModel( + n1, + () => modelValue.value, + _value => (modelValue.value = _value), + ) + renderEffect(() => setText(x0, toDisplayString(modelValue.value))) + return [n0, n1] + }, + }) + + const { html, host } = define({ + setup() { + const msg = ref('foo') + return () => + h(VaporChild as any, { + modelValue: msg.value, + 'onUpdate:modelValue': (value: string) => { + msg.value = value + }, + }) + }, + }).render() + + expect(html()).toBe('
foo
') + + const inputEl = host.querySelector('input')! + inputEl.value = 'bar' + inputEl.dispatchEvent(new Event('input')) + + await nextTick() + expect(html()).toBe('bar
') + }) + }) + + describe('emit', () => { + test('emit from vapor child to vdom parent', () => { + const VaporChild = defineVaporComponent({ + emits: ['click'], + setup(_, { emit }) { + emit('click') + return [] + }, + }) + + const fn = vi.fn() + define({ + setup() { + return () => h(VaporChild as any, { onClick: fn }) + }, + }).render() + + // fn should be called once + expect(fn).toHaveBeenCalledTimes(1) + }) + }) + + describe('slots', () => { + test('basic', () => { + const VDomChild = defineComponent({ + setup(_, { slots }) { + return () => renderSlot(slots, 'default') + }, + }) + + const VaporChild = defineVaporComponent({ + setup() { + return createComponent( + VDomChild as any, + null, + { + default: () => document.createTextNode('default slot'), + }, + true, + ) + }, + }) + + const { html } = define({ + setup() { + return () => h(VaporChild as any) + }, + }).render() + + expect(html()).toBe('default slot') + }) + + test('functional slot', () => { + const VDomChild = defineComponent({ + setup(_, { slots }) { + return () => createVNode(slots.default!) + }, + }) + + const VaporChild = defineVaporComponent({ + setup() { + return createComponent( + VDomChild as any, + null, + { + default: () => document.createTextNode('default slot'), + }, + true, + ) + }, + }) + + const { html } = define({ + setup() { + return () => h(VaporChild as any) + }, + }).render() + + expect(html()).toBe('default slot') + }) + }) + + describe.todo('provide', () => {}) + + describe.todo('inject', () => {}) + + describe.todo('template ref', () => {}) + + describe.todo('dynamic component', () => {}) + + describe('attribute fallthrough', () => { + it('should not fallthrough emit handlers to vdom child', () => { + const VDomChild = defineComponent({ + emits: ['click'], + setup(_, { emit }) { + return () => h('button', { onClick: () => emit('click') }, 'click me') + }, + }) + + const fn = vi.fn() + const VaporChild = defineVaporComponent({ + emits: ['click'], + setup() { + return createComponent( + VDomChild as any, + { onClick: () => fn }, + null, + true, + ) + }, + }) + + const { host, html } = define({ + setup() { + return () => h(VaporChild as any) + }, + }).render() + + expect(html()).toBe('') + const button = host.querySelector('button')! + button.dispatchEvent(new Event('click')) + + // fn should be called once + expect(fn).toHaveBeenCalledTimes(1) + }) + }) +}) diff --git a/packages/runtime-vapor/package.json b/packages/runtime-vapor/package.json new file mode 100644 index 00000000000..f27ef46b7e7 --- /dev/null +++ b/packages/runtime-vapor/package.json @@ -0,0 +1,47 @@ +{ + "name": "@vue/runtime-vapor", + "version": "3.6.0-alpha.2", + "description": "@vue/runtime-vapor", + "main": "index.js", + "module": "dist/runtime-vapor.esm-bundler.js", + "types": "dist/runtime-vapor.d.ts", + "files": [ + "index.js", + "dist" + ], + "exports": { + ".": { + "types": "./dist/runtime-vapor.d.ts", + "default": "./dist/runtime-vapor.esm-bundler.js" + }, + "./*": "./*" + }, + "sideEffects": false, + "buildOptions": { + "name": "VueRuntimeVapor", + "formats": [ + "esm-bundler" + ] + }, + "repository": { + "type": "git", + "url": "git+https://github.com/vuejs/core.git", + "directory": "packages/runtime-vapor" + }, + "keywords": [ + "vue" + ], + "author": "Evan You", + "license": "MIT", + "bugs": { + "url": "https://github.com/vuejs/core/issues" + }, + "homepage": "https://github.com/vuejs/core/tree/dev/packages/runtime-vapor#readme", + "dependencies": { + "@vue/shared": "workspace:*", + "@vue/reactivity": "workspace:*" + }, + "peerDependencies": { + "@vue/runtime-dom": "workspace:*" + } +} diff --git a/packages/runtime-vapor/src/.gitignore b/packages/runtime-vapor/src/.gitignore new file mode 100644 index 00000000000..a1f960b5e5a --- /dev/null +++ b/packages/runtime-vapor/src/.gitignore @@ -0,0 +1 @@ +_old diff --git a/packages/runtime-vapor/src/apiCreateApp.ts b/packages/runtime-vapor/src/apiCreateApp.ts new file mode 100644 index 00000000000..b7d9e64079d --- /dev/null +++ b/packages/runtime-vapor/src/apiCreateApp.ts @@ -0,0 +1,124 @@ +import { + type VaporComponent, + type VaporComponentInstance, + createComponent, + getExposed, + mountComponent, + unmountComponent, +} from './component' +import { + type App, + type AppMountFn, + type AppUnmountFn, + type CreateAppFunction, + createAppAPI, + flushOnAppMount, + initFeatureFlags, + normalizeContainer, + setDevtoolsHook, + warn, +} from '@vue/runtime-dom' +import type { RawProps } from './componentProps' +import { getGlobalThis } from '@vue/shared' +import { optimizePropertyLookup } from './dom/prop' +import { withHydration } from './dom/hydration' + +let _createApp: CreateAppFunction
+ value = ''
+ needRemove = true
+ } else if (type === 'number') {
+ // e.g. ![]()
+ value = 0
+ needRemove = true
+ }
+ }
+
+ // some properties perform value validation and throw,
+ // some properties has getter, no setter, will error in 'use strict'
+ // eg.
+ try {
+ el[key] = value
+ } catch (e: any) {
+ // do not warn if value is auto-coerced from nullish values
+ if (__DEV__ && !needRemove) {
+ warn(
+ `Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: ` +
+ `value ${value} is invalid.`,
+ e,
+ )
+ }
+ }
+ needRemove && el.removeAttribute(key)
+}
+
+export function setClass(el: TargetElement, value: any): void {
+ if (el.$root) {
+ setClassIncremental(el, value)
+ } else if ((value = normalizeClass(value)) !== el.$cls) {
+ el.className = el.$cls = value
+ }
+}
+
+function setClassIncremental(el: any, value: any): void {
+ const cacheKey = `$clsi${isApplyingFallthroughProps ? '$' : ''}`
+ const prev = el[cacheKey]
+ if ((value = el[cacheKey] = normalizeClass(value)) !== prev) {
+ const nextList = value.split(/\s+/)
+ if (value) {
+ el.classList.add(...nextList)
+ }
+ if (prev) {
+ for (const cls of prev.split(/\s+/)) {
+ if (!nextList.includes(cls)) el.classList.remove(cls)
+ }
+ }
+ }
+}
+
+export function setStyle(el: TargetElement, value: any): void {
+ if (el.$root) {
+ setStyleIncremental(el, value)
+ } else {
+ const prev = el.$sty
+ value = el.$sty = normalizeStyle(value)
+ patchStyle(el, prev, value)
+ }
+}
+
+function setStyleIncremental(el: any, value: any): NormalizedStyle | undefined {
+ const cacheKey = `$styi${isApplyingFallthroughProps ? '$' : ''}`
+ const prev = el[cacheKey]
+ value = el[cacheKey] = isString(value)
+ ? parseStringStyle(value)
+ : (normalizeStyle(value) as NormalizedStyle | undefined)
+ patchStyle(el, prev, value)
+ return value
+}
+
+export function setValue(el: TargetElement, value: any): void {
+ if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey('value')) {
+ return
+ }
+
+ // store value as _value as well since
+ // non-string values will be stringified.
+ el._value = value
+ // #4956: