-
+
-
+ + + + ++ +
+
slot props: {{ foo }}
+ component prop: {{ msg }}
+
+
+ A test slot
+ {{ msg }}
+ diff --git a/packages-private/sfc-playground/vite.config.ts b/packages-private/sfc-playground/vite.config.ts index 2e77f1970a7..c1a40fd1ca9 100644 --- a/packages-private/sfc-playground/vite.config.ts +++ b/packages-private/sfc-playground/vite.config.ts @@ -53,6 +53,8 @@ function copyVuePlugin(): Plugin { copyFile(`vue/dist/vue.esm-browser.prod.js`) copyFile(`vue/dist/vue.runtime.esm-browser.js`) copyFile(`vue/dist/vue.runtime.esm-browser.prod.js`) + copyFile(`vue/dist/vue.runtime-with-vapor.esm-browser.js`) + copyFile(`vue/dist/vue.runtime-with-vapor.esm-browser.prod.js`) copyFile(`server-renderer/dist/server-renderer.esm-browser.js`) }, } diff --git a/packages-private/template-explorer/package.json b/packages-private/template-explorer/package.json index 08da34b173e..c546f4a298d 100644 --- a/packages-private/template-explorer/package.json +++ b/packages-private/template-explorer/package.json @@ -11,6 +11,7 @@ "enableNonBrowserBranches": true }, "dependencies": { + "@vue/compiler-vapor": "workspace:^", "monaco-editor": "^0.52.2", "source-map-js": "^1.2.1" } diff --git a/packages-private/template-explorer/src/index.ts b/packages-private/template-explorer/src/index.ts index 988712d623c..96619b5a311 100644 --- a/packages-private/template-explorer/src/index.ts +++ b/packages-private/template-explorer/src/index.ts @@ -1,15 +1,18 @@ import type * as m from 'monaco-editor' +import type { CompilerError } from '@vue/compiler-dom' +import { compile } from '@vue/compiler-dom' import { - type CompilerError, type CompilerOptions, - compile, -} from '@vue/compiler-dom' -import { compile as ssrCompile } from '@vue/compiler-ssr' + compile as vaporCompile, +} from '@vue/compiler-vapor' +// import { compile as ssrCompile } from '@vue/compiler-ssr' + import { compilerOptions, defaultOptions, initOptions, ssrMode, + vaporMode, } from './options' import { toRaw, watchEffect } from '@vue/runtime-dom' import { SourceMapConsumer } from 'source-map-js' @@ -77,10 +80,16 @@ window.init = () => { console.clear() try { const errors: CompilerError[] = [] - const compileFn = ssrMode.value ? ssrCompile : compile + const compileFn = /* ssrMode.value ? ssrCompile : */ ( + vaporMode.value ? vaporCompile : compile + ) as typeof vaporCompile const start = performance.now() const { code, ast, map } = compileFn(source, { ...compilerOptions, + prefixIdentifiers: + compilerOptions.prefixIdentifiers || + compilerOptions.mode === 'module' || + compilerOptions.ssr, filename: 'ExampleTemplate.vue', sourceMap: true, onError: err => { diff --git a/packages-private/template-explorer/src/options.ts b/packages-private/template-explorer/src/options.ts index e3cc6173a8a..341e885c083 100644 --- a/packages-private/template-explorer/src/options.ts +++ b/packages-private/template-explorer/src/options.ts @@ -1,8 +1,9 @@ import { createApp, h, reactive, ref } from 'vue' -import type { CompilerOptions } from '@vue/compiler-dom' +import type { CompilerOptions } from '@vue/compiler-vapor' import { BindingTypes } from '@vue/compiler-core' export const ssrMode = ref(false) +export const vaporMode = ref(true) export const defaultOptions: CompilerOptions = { mode: 'module', @@ -39,11 +40,11 @@ const App = { compilerOptions.prefixIdentifiers || compilerOptions.mode === 'module' return [ - h('h1', `Vue 3 Template Explorer`), + h('h1', `Vue Template Explorer`), h( 'a', { - href: `https://github.com/vuejs/core/tree/${__COMMIT__}`, + href: `https://github.com/vuejs/vue/tree/${__COMMIT__}`, target: `_blank`, }, `@${__COMMIT__}`, @@ -222,6 +223,18 @@ const App = { }), h('label', { for: 'compat' }, 'v2 compat mode'), ]), + + h('li', [ + h('input', { + type: 'checkbox', + id: 'vapor', + checked: vaporMode.value, + onChange(e: Event) { + vaporMode.value = (e.target as HTMLInputElement).checked + }, + }), + h('label', { for: 'vapor' }, 'vapor'), + ]), ]), ]), ] diff --git a/packages-private/tsconfig.json b/packages-private/tsconfig.json index 1c287a7500c..37a38f53fc6 100644 --- a/packages-private/tsconfig.json +++ b/packages-private/tsconfig.json @@ -3,5 +3,5 @@ "compilerOptions": { "isolatedDeclarations": false }, - "include": ["."] + "include": [".", "../packages/vue/__tests__/e2e/e2eUtils.ts"] } diff --git a/packages-private/vapor-e2e-test/__tests__/todomvc.spec.ts b/packages-private/vapor-e2e-test/__tests__/todomvc.spec.ts new file mode 100644 index 00000000000..3de8392e5e2 --- /dev/null +++ b/packages-private/vapor-e2e-test/__tests__/todomvc.spec.ts @@ -0,0 +1,195 @@ +import path from 'node:path' +import { + E2E_TIMEOUT, + setupPuppeteer, +} from '../../../packages/vue/__tests__/e2e/e2eUtils' +import connect from 'connect' +import sirv from 'sirv' + +describe('e2e: todomvc', () => { + const { + page, + click, + isVisible, + count, + text, + value, + isChecked, + isFocused, + classList, + enterValue, + clearValue, + timeout, + } = setupPuppeteer() + + let server: any + const port = '8194' + beforeAll(() => { + server = connect() + .use(sirv(path.resolve(import.meta.dirname, '../dist'))) + .listen(port) + process.on('SIGTERM', () => server && server.close()) + }) + + afterAll(() => { + server.close() + }) + + async function removeItemAt(n: number) { + const item = (await page().$('.todo:nth-child(' + n + ')'))! + const itemBBox = (await item.boundingBox())! + await page().mouse.move(itemBBox.x + 10, itemBBox.y + 10) + await click('.todo:nth-child(' + n + ') .destroy') + } + + test( + 'vapor', + async () => { + const baseUrl = `http://localhost:${port}/todomvc/` + await page().goto(baseUrl) + + expect(await isVisible('.main')).toBe(false) + expect(await isVisible('.footer')).toBe(false) + expect(await count('.filters .selected')).toBe(1) + expect(await text('.filters .selected')).toBe('All') + expect(await count('.todo')).toBe(0) + + await enterValue('.new-todo', 'test') + expect(await count('.todo')).toBe(1) + expect(await isVisible('.todo .edit')).toBe(false) + expect(await text('.todo label')).toBe('test') + expect(await text('.todo-count strong')).toBe('1') + expect(await isChecked('.todo .toggle')).toBe(false) + expect(await isVisible('.main')).toBe(true) + expect(await isVisible('.footer')).toBe(true) + expect(await isVisible('.clear-completed')).toBe(false) + expect(await value('.new-todo')).toBe('') + + await enterValue('.new-todo', 'test2') + expect(await count('.todo')).toBe(2) + expect(await text('.todo:nth-child(2) label')).toBe('test2') + expect(await text('.todo-count strong')).toBe('2') + + // toggle + await click('.todo .toggle') + expect(await count('.todo.completed')).toBe(1) + expect(await classList('.todo:nth-child(1)')).toContain('completed') + expect(await text('.todo-count strong')).toBe('1') + expect(await isVisible('.clear-completed')).toBe(true) + + await enterValue('.new-todo', 'test3') + expect(await count('.todo')).toBe(3) + expect(await text('.todo:nth-child(3) label')).toBe('test3') + expect(await text('.todo-count strong')).toBe('2') + + await enterValue('.new-todo', 'test4') + await enterValue('.new-todo', 'test5') + expect(await count('.todo')).toBe(5) + expect(await text('.todo-count strong')).toBe('4') + + // toggle more + await click('.todo:nth-child(4) .toggle') + await click('.todo:nth-child(5) .toggle') + expect(await count('.todo.completed')).toBe(3) + expect(await text('.todo-count strong')).toBe('2') + + // remove + await removeItemAt(1) + expect(await count('.todo')).toBe(4) + expect(await count('.todo.completed')).toBe(2) + expect(await text('.todo-count strong')).toBe('2') + await removeItemAt(2) + expect(await count('.todo')).toBe(3) + expect(await count('.todo.completed')).toBe(2) + expect(await text('.todo-count strong')).toBe('1') + + // remove all + await click('.clear-completed') + expect(await count('.todo')).toBe(1) + expect(await text('.todo label')).toBe('test2') + expect(await count('.todo.completed')).toBe(0) + expect(await text('.todo-count strong')).toBe('1') + expect(await isVisible('.clear-completed')).toBe(false) + + // prepare to test filters + await enterValue('.new-todo', 'test') + await enterValue('.new-todo', 'test') + await click('.todo:nth-child(2) .toggle') + await click('.todo:nth-child(3) .toggle') + + // active filter + await click('.filters li:nth-child(2) a') + await timeout(1) + expect(await count('.todo')).toBe(1) + expect(await count('.todo.completed')).toBe(0) + // add item with filter active + await enterValue('.new-todo', 'test') + expect(await count('.todo')).toBe(2) + + // completed filter + await click('.filters li:nth-child(3) a') + await timeout(1) + expect(await count('.todo')).toBe(2) + expect(await count('.todo.completed')).toBe(2) + + // filter on page load + await page().goto(`${baseUrl}#active`) + expect(await count('.todo')).toBe(2) + expect(await count('.todo.completed')).toBe(0) + expect(await text('.todo-count strong')).toBe('2') + + // completed on page load + await page().goto(`${baseUrl}#completed`) + expect(await count('.todo')).toBe(2) + expect(await count('.todo.completed')).toBe(2) + expect(await text('.todo-count strong')).toBe('2') + + // toggling with filter active + await click('.todo .toggle') + expect(await count('.todo')).toBe(1) + await click('.filters li:nth-child(2) a') + await timeout(1) + expect(await count('.todo')).toBe(3) + await click('.todo .toggle') + expect(await count('.todo')).toBe(2) + + // editing triggered by blur + await click('.filters li:nth-child(1) a') + await timeout(1) + await click('.todo:nth-child(1) label', { clickCount: 2 }) + expect(await count('.todo.editing')).toBe(1) + expect(await isFocused('.todo:nth-child(1) .edit')).toBe(true) + await clearValue('.todo:nth-child(1) .edit') + await page().type('.todo:nth-child(1) .edit', 'edited!') + await click('.new-todo') // blur + expect(await count('.todo.editing')).toBe(0) + expect(await text('.todo:nth-child(1) label')).toBe('edited!') + + // editing triggered by enter + await click('.todo label', { clickCount: 2 }) + await enterValue('.todo:nth-child(1) .edit', 'edited again!') + expect(await count('.todo.editing')).toBe(0) + expect(await text('.todo:nth-child(1) label')).toBe('edited again!') + + // cancel + await click('.todo label', { clickCount: 2 }) + await clearValue('.todo:nth-child(1) .edit') + await page().type('.todo:nth-child(1) .edit', 'edited!') + await page().keyboard.press('Escape') + expect(await count('.todo.editing')).toBe(0) + expect(await text('.todo:nth-child(1) label')).toBe('edited again!') + + // empty value should remove + await click('.todo label', { clickCount: 2 }) + await enterValue('.todo:nth-child(1) .edit', ' ') + expect(await count('.todo')).toBe(3) + + // toggle all + await click('.toggle-all+label') + expect(await count('.todo.completed')).toBe(3) + await click('.toggle-all+label') + expect(await count('.todo:not(.completed)')).toBe(3) + }, + E2E_TIMEOUT, + ) +}) diff --git a/packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts b/packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts new file mode 100644 index 00000000000..360f48085a1 --- /dev/null +++ b/packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts @@ -0,0 +1,84 @@ +import path from 'node:path' +import { + E2E_TIMEOUT, + setupPuppeteer, +} from '../../../packages/vue/__tests__/e2e/e2eUtils' +import connect from 'connect' +import sirv from 'sirv' + +describe('vdom / vapor interop', () => { + const { page, click, text, enterValue } = setupPuppeteer() + + let server: any + const port = '8193' + beforeAll(() => { + server = connect() + .use(sirv(path.resolve(import.meta.dirname, '../dist'))) + .listen(port) + process.on('SIGTERM', () => server && server.close()) + }) + + afterAll(() => { + server.close() + }) + + test( + 'should work', + async () => { + const baseUrl = `http://localhost:${port}/interop/` + await page().goto(baseUrl) + + expect(await text('.vapor > h2')).toContain('Vapor component in VDOM') + + expect(await text('.vapor-prop')).toContain('hello') + + const t = await text('.vdom-slot-in-vapor-default') + expect(t).toContain('slot prop: slot prop') + expect(t).toContain('component prop: hello') + + await click('.change-vdom-slot-in-vapor-prop') + expect(await text('.vdom-slot-in-vapor-default')).toContain( + 'slot prop: changed', + ) + + expect(await text('.vdom-slot-in-vapor-test')).toContain('A test slot') + + await click('.toggle-vdom-slot-in-vapor') + expect(await text('.vdom-slot-in-vapor-test')).toContain( + 'fallback content', + ) + + await click('.toggle-vdom-slot-in-vapor') + expect(await text('.vdom-slot-in-vapor-test')).toContain('A test slot') + + expect(await text('.vdom > h2')).toContain('VDOM component in Vapor') + + expect(await text('.vdom-prop')).toContain('hello') + + const tt = await text('.vapor-slot-in-vdom-default') + expect(tt).toContain('slot prop: slot prop') + expect(tt).toContain('component prop: hello') + + await click('.change-vapor-slot-in-vdom-prop') + expect(await text('.vapor-slot-in-vdom-default')).toContain( + 'slot prop: changed', + ) + + expect(await text('.vapor-slot-in-vdom-test')).toContain('fallback') + + await click('.toggle-vapor-slot-in-vdom-default') + expect(await text('.vapor-slot-in-vdom-default')).toContain( + 'default slot fallback', + ) + + await click('.toggle-vapor-slot-in-vdom-default') + + await enterValue('input', 'bye') + expect(await text('.vapor-prop')).toContain('bye') + expect(await text('.vdom-slot-in-vapor-default')).toContain('bye') + expect(await text('.vdom-prop')).toContain('bye') + expect(await text('.vapor-slot-in-vdom-default')).toContain('bye') + }, + E2E_TIMEOUT, + ) +}) diff --git a/packages-private/vapor-e2e-test/index.html b/packages-private/vapor-e2e-test/index.html new file mode 100644 index 00000000000..7dc205e5ab0 --- /dev/null +++ b/packages-private/vapor-e2e-test/index.html @@ -0,0 +1,2 @@ +VDOM / Vapor interop +Vapor TodoMVC diff --git a/packages-private/vapor-e2e-test/interop/App.vue b/packages-private/vapor-e2e-test/interop/App.vue new file mode 100644 index 00000000000..772a6989dd7 --- /dev/null +++ b/packages-private/vapor-e2e-test/interop/App.vue @@ -0,0 +1,22 @@ + + + + + +slot prop: {{ foo }}
+ component prop: {{ msg }}
+
+
+ A test slot
+
+
+
+
+
+
diff --git a/packages-private/vapor-e2e-test/interop/VdomComp.vue b/packages-private/vapor-e2e-test/interop/VdomComp.vue
new file mode 100644
index 00000000000..30ec1b2eeb5
--- /dev/null
+++ b/packages-private/vapor-e2e-test/interop/VdomComp.vue
@@ -0,0 +1,28 @@
+
+
+
+ This is a Vapor component in VDOM
+props.msg: {{ msg }}
+ + + +
+
+
+
+ vdom slots in vapor component
+ +
+ #default:
+
+ #test: fallback content
+
+ slot prop: {{ foo }}
+ component prop: {{ msg }}
+
+
+
+
diff --git a/packages-private/vapor-e2e-test/interop/index.html b/packages-private/vapor-e2e-test/interop/index.html
new file mode 100644
index 00000000000..79052a023ba
--- /dev/null
+++ b/packages-private/vapor-e2e-test/interop/index.html
@@ -0,0 +1,2 @@
+
+
diff --git a/packages-private/vapor-e2e-test/interop/main.ts b/packages-private/vapor-e2e-test/interop/main.ts
new file mode 100644
index 00000000000..d5d6d7dcf8c
--- /dev/null
+++ b/packages-private/vapor-e2e-test/interop/main.ts
@@ -0,0 +1,4 @@
+import { createApp, vaporInteropPlugin } from 'vue'
+import App from './App.vue'
+
+createApp(App).use(vaporInteropPlugin).mount('#app')
diff --git a/packages-private/vapor-e2e-test/package.json b/packages-private/vapor-e2e-test/package.json
new file mode 100644
index 00000000000..66ea0457ec9
--- /dev/null
+++ b/packages-private/vapor-e2e-test/package.json
@@ -0,0 +1,18 @@
+{
+ "name": "vapor-e2e-test",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite dev",
+ "build": "vite build"
+ },
+ "devDependencies": {
+ "@types/connect": "^3.4.38",
+ "@vitejs/plugin-vue": "catalog:",
+ "connect": "^3.7.0",
+ "sirv": "^2.0.4",
+ "vite": "catalog:",
+ "vue": "workspace:*"
+ }
+}
diff --git a/packages-private/vapor-e2e-test/todomvc/App.vue b/packages-private/vapor-e2e-test/todomvc/App.vue
new file mode 100644
index 00000000000..910ada51093
--- /dev/null
+++ b/packages-private/vapor-e2e-test/todomvc/App.vue
@@ -0,0 +1,228 @@
+
+
+
+ This is a VDOM component in Vapor
+props.msg: {{ msg }}
+
+
+ vapor slots in vdom
+ +
+ #default: default slot fallback
+
+
+ #test fallback
+
+ todos
+ +test
", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ return n0
+}"
+`;
+
+exports[`compile > directives > v-pre > basic 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("hello
hello
', 'hello', '',
+ '
hello
')
+ checkAbbr(
+ 'hello
hello',
+ '',
+ )
+ checkAbbr(
+ '
hello
foo
',
+ 'foo',
+ '
',
+ '
foo
',
+ )
+ checkAbbr(
+ '',
+ '
',
+ )
+ checkAbbr(
+ '
',
+ '
', + '
',
+ )
+
+ checkAbbr('hello', 'hello', 'hello')
+})
diff --git a/packages/compiler-vapor/__tests__/compile.spec.ts b/packages/compiler-vapor/__tests__/compile.spec.ts
new file mode 100644
index 00000000000..33f399caa77
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/compile.spec.ts
@@ -0,0 +1,223 @@
+import { BindingTypes, type RootNode } from '@vue/compiler-dom'
+import { type CompilerOptions, compile as _compile } from '../src'
+
+// TODO This is a temporary test case for initial implementation.
+// Remove it once we have more comprehensive tests.
+// DO NOT ADD MORE TESTS HERE.
+
+function compile(template: string | RootNode, options: CompilerOptions = {}) {
+ let { code } = _compile(template, {
+ ...options,
+ mode: 'module',
+ prefixIdentifiers: true,
+ })
+ return code
+}
+
+describe('compile', () => {
+ test('static template', () => {
+ const code = compile(
+ `
+
+ `)
+ expect(code).matchSnapshot()
+ })
+ })
+})
diff --git a/packages/compiler-vapor/__tests__/scopeId.spec.ts b/packages/compiler-vapor/__tests__/scopeId.spec.ts
new file mode 100644
index 00000000000..da17ef5552f
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/scopeId.spec.ts
@@ -0,0 +1,3 @@
+// import { compile } from '../src/compile'
+
+describe.todo('scopeId compiler support', () => {})
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/expression.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/expression.spec.ts.snap
new file mode 100644
index 00000000000..518c2a5fe70
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/expression.spec.ts.snap
@@ -0,0 +1,34 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: expression > basic 1`] = `
+"import { toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template(" ")
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setText(n0, _toDisplayString(_ctx.a)))
+ return n0
+}"
+`;
+
+exports[`compiler: expression > props 1`] = `
+"import { toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template(" ")
+
+export function render(_ctx, $props, $emit, $attrs, $slots) {
+ const n0 = t0()
+ _renderEffect(() => _setText(n0, _toDisplayString($props.foo)))
+ return n0
+}"
+`;
+
+exports[`compiler: expression > props aliased 1`] = `
+"import { toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template(" ")
+
+export function render(_ctx, $props, $emit, $attrs, $slots) {
+ const n0 = t0()
+ _renderEffect(() => _setText(n0, _toDisplayString($props['bar'])))
+ return n0
+}"
+`;
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap
new file mode 100644
index 00000000000..5ae8a94f5b1
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap
@@ -0,0 +1,77 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: children transform > anchor insertion in middle 1`] = `
+"import { child as _child, next as _next, setInsertionState as _setInsertionState, createIf as _createIf, template as _template } from 'vue';
+const t0 = _template("")
+const t1 = _template("", true)
+
+export function render(_ctx) {
+ const n3 = t0()
+ const n0 = _child(n3)
+ const n1 = _next(n0)
+ const n2 = _next(n1)
+ const x0 = _child(n0)
+ const x2 = _child(n2)
+ _renderEffect(() => {
+ _setText(x0, _toDisplayString(_ctx.first))
+ _setText(n1, " " + _toDisplayString(_ctx.second) + " " + _toDisplayString(_ctx.third) + " ")
+ _setText(x2, _toDisplayString(_ctx.forth))
+ })
+ return n3
+}"
+`;
+
+exports[`compiler: children transform > efficient find 1`] = `
+"import { child as _child, nthChild as _nthChild, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template(" ", true)
+
+export function render(_ctx) {
+ const n1 = t0()
+ const n0 = _nthChild(n1, 2)
+ const x0 = _child(n0)
+ _renderEffect(() => _setText(x0, _toDisplayString(_ctx.msg)))
+ return n1
+}"
+`;
+
+exports[`compiler: children transform > efficient traversal 1`] = `
+"import { child as _child, next as _next, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template(" ", true)
+
+export function render(_ctx) {
+ const n3 = t0()
+ const p0 = _next(_child(n3))
+ const p1 = _next(p0)
+ const p2 = _next(p1)
+ const n0 = _child(p0)
+ const n1 = _child(p1)
+ const n2 = _child(p2)
+ const x0 = _child(n0)
+ const x1 = _child(n1)
+ const x2 = _child(n2)
+ _renderEffect(() => {
+ const _msg = _ctx.msg
+
+ _setText(x0, _toDisplayString(_msg))
+ _setText(x1, _toDisplayString(_msg))
+ _setText(x2, _toDisplayString(_msg))
+ })
+ return n3
+}"
+`;
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
new file mode 100644
index 00000000000..69527c0b100
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
@@ -0,0 +1,441 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: element transform > component > cache v-on expression with unique handler name 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Foo = _resolveComponent("Foo")
+ const _component_Bar = _resolveComponent("Bar")
+ const _on_bar = $event => (_ctx.handleBar($event))
+ const n0 = _createComponentWithFallback(_component_Foo, { onBar: () => _on_bar })
+ const _on_bar1 = () => _ctx.handler
+ const n1 = _createComponentWithFallback(_component_Bar, { onBar: () => _on_bar1 })
+ return [n0, n1]
+}"
+`;
+
+exports[`compiler: element transform > component > do not resolve component from non-script-setup bindings 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx, $props, $emit, $attrs, $slots) {
+ const _component_Example = _resolveComponent("Example")
+ const n0 = _createComponentWithFallback(_component_Example, null, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > component > generate multi root component 1`] = `
+"import { createComponent as _createComponent, template as _template } from 'vue';
+const t0 = _template("123")
+
+export function render(_ctx, $props, $emit, $attrs, $slots) {
+ const n0 = _createComponent(_ctx.Comp)
+ const n1 = t0()
+ return [n0, n1]
+}"
+`;
+
+exports[`compiler: element transform > component > generate single root component 1`] = `
+"import { createComponent as _createComponent } from 'vue';
+
+export function render(_ctx, $props, $emit, $attrs, $slots) {
+ const n0 = _createComponent(_ctx.Comp, null, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > component > import + resolve component 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Foo = _resolveComponent("Foo")
+ const n0 = _createComponentWithFallback(_component_Foo, null, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > component > resolve component from setup bindings (inline const) 1`] = `
+"
+ const n0 = _createComponent(Example, null, null, true)
+ return n0
+"
+`;
+
+exports[`compiler: element transform > component > resolve component from setup bindings (inline) 1`] = `
+"
+ const n0 = _createComponent(_unref(Example), null, null, true)
+ return n0
+"
+`;
+
+exports[`compiler: element transform > component > resolve component from setup bindings 1`] = `
+"import { createComponent as _createComponent } from 'vue';
+
+export function render(_ctx, $props, $emit, $attrs, $slots) {
+ const n0 = _createComponent(_ctx.Example, null, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > component > resolve namespaced component from props bindings (inline) 1`] = `
+"
+ const n0 = _createComponent(Foo.Example, null, null, true)
+ return n0
+"
+`;
+
+exports[`compiler: element transform > component > resolve namespaced component from props bindings (non-inline) 1`] = `
+"import { createComponent as _createComponent } from 'vue';
+
+export function render(_ctx, $props, $emit, $attrs, $slots) {
+ const n0 = _createComponent(_ctx.Foo.Example, null, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > component > resolve namespaced component from setup bindings (inline const) 1`] = `
+"
+ const n0 = _createComponent(Foo.Example, null, null, true)
+ return n0
+"
+`;
+
+exports[`compiler: element transform > component > resolve namespaced component from setup bindings 1`] = `
+"import { createComponent as _createComponent } from 'vue';
+
+export function render(_ctx, $props, $emit, $attrs, $slots) {
+ const n0 = _createComponent(_ctx.Foo.Example, null, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > component > static props 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Foo = _resolveComponent("Foo")
+ const n0 = _createComponentWithFallback(_component_Foo, {
+ id: () => ("foo"),
+ class: () => ("bar")
+ }, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > component > v-bind="obj" 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Foo = _resolveComponent("Foo")
+ const n0 = _createComponentWithFallback(_component_Foo, { $: [
+ () => (_ctx.obj)
+ ] }, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > component > v-bind="obj" after static prop 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Foo = _resolveComponent("Foo")
+ const n0 = _createComponentWithFallback(_component_Foo, {
+ id: () => ("foo"),
+ $: [
+ () => (_ctx.obj)
+ ]
+ }, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > component > v-bind="obj" before static prop 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Foo = _resolveComponent("Foo")
+ const n0 = _createComponentWithFallback(_component_Foo, { $: [
+ () => (_ctx.obj),
+ { id: () => ("foo") }
+ ] }, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > component > v-bind="obj" between static props 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Foo = _resolveComponent("Foo")
+ const n0 = _createComponentWithFallback(_component_Foo, {
+ id: () => ("foo"),
+ $: [
+ () => (_ctx.obj),
+ { class: () => ("bar") }
+ ]
+ }, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > component > v-on expression is a function call 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Foo = _resolveComponent("Foo")
+ const _on_bar = $event => (_ctx.handleBar($event))
+ const n0 = _createComponentWithFallback(_component_Foo, { onBar: () => _on_bar }, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > component > v-on expression is inline statement 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Foo = _resolveComponent("Foo")
+ const _on_bar = () => _ctx.handler
+ const n0 = _createComponentWithFallback(_component_Foo, { onBar: () => _on_bar }, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > component > v-on="obj" 1`] = `
+"import { resolveComponent as _resolveComponent, toHandlers as _toHandlers, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Foo = _resolveComponent("Foo")
+ const n0 = _createComponentWithFallback(_component_Foo, { $: [
+ () => (_toHandlers(_ctx.obj))
+ ] }, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > component dynamic event with once modifier 1`] = `
+"import { resolveComponent as _resolveComponent, toHandlerKey as _toHandlerKey, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Foo = _resolveComponent("Foo")
+ const n0 = _createComponentWithFallback(_component_Foo, { $: [
+ () => ({ [_toHandlerKey(_ctx.foo) + "Once"]: () => _ctx.bar })
+ ] }, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > component event with once modifier 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Foo = _resolveComponent("Foo")
+ const n0 = _createComponentWithFallback(_component_Foo, { onFooOnce: () => _ctx.bar }, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > component with dynamic event arguments 1`] = `
+"import { resolveComponent as _resolveComponent, toHandlerKey as _toHandlerKey, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Foo = _resolveComponent("Foo")
+ const n0 = _createComponentWithFallback(_component_Foo, { $: [
+ () => ({ [_toHandlerKey(_ctx.foo-_ctx.bar)]: () => _ctx.bar }),
+ () => ({ [_toHandlerKey(_ctx.baz)]: () => _ctx.qux })
+ ] }, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > component with dynamic prop arguments 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Foo = _resolveComponent("Foo")
+ const n0 = _createComponentWithFallback(_component_Foo, { $: [
+ () => ({ [_ctx.foo-_ctx.bar]: _ctx.bar }),
+ () => ({ [_ctx.baz]: _ctx.qux })
+ ] }, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > dynamic component > capitalized version w/ static binding 1`] = `
+"import { resolveDynamicComponent as _resolveDynamicComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const n0 = _createComponentWithFallback(_resolveDynamicComponent("foo"), null, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > dynamic component > dynamic binding 1`] = `
+"import { createDynamicComponent as _createDynamicComponent } from 'vue';
+
+export function render(_ctx) {
+ const n0 = _createDynamicComponent(() => (_ctx.foo), null, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > dynamic component > dynamic binding shorthand 1`] = `
+"import { createDynamicComponent as _createDynamicComponent } from 'vue';
+
+export function render(_ctx) {
+ const n0 = _createDynamicComponent(() => (_ctx.is), null, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > dynamic component > normal component with is prop 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_custom_input = _resolveComponent("custom-input")
+ const n0 = _createComponentWithFallback(_component_custom_input, { is: () => ("foo") }, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > dynamic component > static binding 1`] = `
+"import { resolveDynamicComponent as _resolveDynamicComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const n0 = _createComponentWithFallback(_resolveDynamicComponent("foo"), null, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > empty template 1`] = `
+"
+export function render(_ctx) {
+ return null
+}"
+`;
+
+exports[`compiler: element transform > invalid html nesting 1`] = `
+"import { insert as _insert, template as _template } from 'vue';
+const t0 = _template(" outlets > default slot outlet 1`] = `
+"import { createSlot as _createSlot } from 'vue';
+
+export function render(_ctx) {
+ const n0 = _createSlot("default", null)
+ return n0
+}"
+`;
+
+exports[`compiler: transform outlets > default slot outlet with fallback 1`] = `
+"import { createSlot as _createSlot, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = _createSlot("default", null, () => {
+ const n2 = t0()
+ return n2
+ })
+ return n0
+}"
+`;
+
+exports[`compiler: transform outlets > default slot outlet with props & fallback 1`] = `
+"import { createSlot as _createSlot, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = _createSlot("default", { foo: () => (_ctx.bar) }, () => {
+ const n2 = t0()
+ return n2
+ })
+ return n0
+}"
+`;
+
+exports[`compiler: transform outlets > default slot outlet with props 1`] = `
+"import { createSlot as _createSlot } from 'vue';
+
+export function render(_ctx) {
+ const n0 = _createSlot("default", {
+ foo: () => ("bar"),
+ baz: () => (_ctx.qux),
+ fooBar: () => (_ctx.foo-_ctx.bar)
+ })
+ return n0
+}"
+`;
+
+exports[`compiler: transform outlets > dynamically named slot outlet 1`] = `
+"import { createSlot as _createSlot } from 'vue';
+
+export function render(_ctx) {
+ const n0 = _createSlot(() => (_ctx.foo + _ctx.bar), null)
+ return n0
+}"
+`;
+
+exports[`compiler: transform outlets > dynamically named slot outlet with v-bind shorthand 1`] = `
+"import { createSlot as _createSlot } from 'vue';
+
+export function render(_ctx) {
+ const n0 = _createSlot(() => (_ctx.name), null)
+ return n0
+}"
+`;
+
+exports[`compiler: transform outlets > error on unexpected custom directive on 1`] = `
+"import { resolveDirective as _resolveDirective, createSlot as _createSlot } from 'vue';
+
+export function render(_ctx) {
+ const _directive_foo = _resolveDirective("foo")
+ const n0 = _createSlot("default", null)
+ return n0
+}"
+`;
+
+exports[`compiler: transform outlets > error on unexpected custom directive with v-show on 1`] = `
+"import { createSlot as _createSlot } from 'vue';
+
+export function render(_ctx) {
+ const n0 = _createSlot("default", null)
+ return n0
+}"
+`;
+
+exports[`compiler: transform outlets > named slot outlet with fallback 1`] = `
+"import { createSlot as _createSlot, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = _createSlot("foo", null, () => {
+ const n2 = t0()
+ return n2
+ })
+ return n0
+}"
+`;
+
+exports[`compiler: transform outlets > named slot outlet with props & fallback 1`] = `
+"import { createSlot as _createSlot, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = _createSlot("foo", { foo: () => (_ctx.bar) }, () => {
+ const n2 = t0()
+ return n2
+ })
+ return n0
+}"
+`;
+
+exports[`compiler: transform outlets > statically named slot outlet 1`] = `
+"import { createSlot as _createSlot } from 'vue';
+
+export function render(_ctx) {
+ const n0 = _createSlot("foo", null)
+ return n0
+}"
+`;
+
+exports[`compiler: transform outlets > statically named slot outlet with props 1`] = `
+"import { createSlot as _createSlot } from 'vue';
+
+export function render(_ctx) {
+ const n0 = _createSlot("foo", {
+ foo: () => ("bar"),
+ baz: () => (_ctx.qux)
+ })
+ return n0
+}"
+`;
+
+exports[`compiler: transform outlets > statically named slot outlet with v-bind="obj" 1`] = `
+"import { createSlot as _createSlot } from 'vue';
+
+export function render(_ctx) {
+ const n0 = _createSlot("foo", {
+ foo: () => ("bar"),
+ $: [
+ () => (_ctx.obj),
+ { baz: () => (_ctx.qux) }
+ ]
+ })
+ return n0
+}"
+`;
+
+exports[`compiler: transform outlets > statically named slot outlet with v-on 1`] = `
+"import { createSlot as _createSlot, toHandlers as _toHandlers } from 'vue';
+
+export function render(_ctx) {
+ const n0 = _createSlot("default", {
+ onClick: () => _ctx.foo,
+ $: [
+ () => (_toHandlers(_ctx.bar)),
+ { baz: () => (_ctx.qux) }
+ ]
+ })
+ return n0
+}"
+`;
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap
new file mode 100644
index 00000000000..f2eade4bcdf
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap
@@ -0,0 +1,56 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: template ref transform > dynamic ref 1`] = `
+"import { createTemplateRefSetter as _createTemplateRefSetter, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const _setTemplateRef = _createTemplateRefSetter()
+ const n0 = t0()
+ let r0
+ _renderEffect(() => r0 = _setTemplateRef(n0, _ctx.foo, r0))
+ return n0
+}"
+`;
+
+exports[`compiler: template ref transform > ref + v-for 1`] = `
+"import { createTemplateRefSetter as _createTemplateRefSetter, createFor as _createFor, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const _setTemplateRef = _createTemplateRefSetter()
+ const n0 = _createFor(() => ([1,2,3]), (_for_item0) => {
+ const n2 = t0()
+ _setTemplateRef(n2, "foo", void 0, true)
+ return n2
+ }, null, 4)
+ return n0
+}"
+`;
+
+exports[`compiler: template ref transform > ref + v-if 1`] = `
+"import { createTemplateRefSetter as _createTemplateRefSetter, createIf as _createIf, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const _setTemplateRef = _createTemplateRefSetter()
+ const n0 = _createIf(() => (true), () => {
+ const n2 = t0()
+ _setTemplateRef(n2, "foo")
+ return n2
+ })
+ return n0
+}"
+`;
+
+exports[`compiler: template ref transform > static ref 1`] = `
+"import { createTemplateRefSetter as _createTemplateRefSetter, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const _setTemplateRef = _createTemplateRefSetter()
+ const n0 = t0()
+ _setTemplateRef(n0, "foo")
+ return n0
+}"
+`;
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformText.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
new file mode 100644
index 00000000000..f18f8520353
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: text transform > consecutive text 1`] = `
+"import { toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template(" ")
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setText(n0, _toDisplayString(_ctx.msg)))
+ return n0
+}"
+`;
+
+exports[`compiler: text transform > no consecutive text 1`] = `
+"import { setText as _setText, template as _template } from 'vue';
+const t0 = _template(" ")
+
+export function render(_ctx) {
+ const n0 = t0()
+ _setText(n0, "hello world")
+ return n0
+}"
+`;
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
new file mode 100644
index 00000000000..6e7d4229df8
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
@@ -0,0 +1,611 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`cache multiple access > cache variable used in both property shorthand and normal binding 1`] = `
+"import { setStyle as _setStyle, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => {
+ const _color = _ctx.color
+ _setStyle(n0, {color: _color})
+ _setProp(n0, "id", _color)
+ })
+ return n0
+}"
+`;
+
+exports[`cache multiple access > dynamic key bindings with expressions 1`] = `
+"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => {
+ const _key = _ctx.key
+ _setDynamicProps(n0, [{ [_key+1]: _ctx.foo[_key+1]() }], true)
+ })
+ return n0
+}"
+`;
+
+exports[`cache multiple access > dynamic property access 1`] = `
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => {
+ const _obj = _ctx.obj
+ _setProp(n0, "id", _obj[1][_ctx.baz] + _obj.bar)
+ })
+ return n0
+}"
+`;
+
+exports[`cache multiple access > function calls with arguments 1`] = `
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("")
+
+export function render(_ctx) {
+ const n0 = t0()
+ const n1 = t0()
+ const n2 = t0()
+ _renderEffect(() => {
+ const _foo = _ctx.foo
+ const _bar = _ctx.bar
+ const _foo_bar_baz = _foo[_bar(_ctx.baz)]
+
+ _setProp(n0, "id", _foo_bar_baz)
+ _setProp(n1, "id", _foo_bar_baz)
+ _setProp(n2, "id", _bar() + _foo)
+ })
+ return [n0, n1, n2]
+}"
+`;
+
+exports[`cache multiple access > not cache variable and member expression with the same name 1`] = `
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setProp(n0, "id", _ctx.bar + _ctx.obj.bar))
+ return n0
+}"
+`;
+
+exports[`cache multiple access > not cache variable only used in property shorthand 1`] = `
+"import { setStyle as _setStyle, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setStyle(n0, {color: _ctx.color}))
+ return n0
+}"
+`;
+
+exports[`cache multiple access > object property chain access 1`] = `
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("")
+
+export function render(_ctx) {
+ const n0 = t0()
+ const n1 = t0()
+ _renderEffect(() => {
+ const _obj = _ctx.obj
+ const _obj_foo_baz_obj_bar = _obj['foo']['baz'] + _obj.bar
+
+ _setProp(n0, "id", _obj_foo_baz_obj_bar)
+ _setProp(n1, "id", _obj_foo_baz_obj_bar)
+ })
+ return [n0, n1]
+}"
+`;
+
+exports[`cache multiple access > repeated expression in expressions 1`] = `
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("")
+
+export function render(_ctx) {
+ const n0 = t0()
+ const n1 = t0()
+ const n2 = t0()
+ _renderEffect(() => {
+ const _foo = _ctx.foo
+ const _foo_bar = _foo + _ctx.bar
+
+ _setProp(n0, "id", _foo_bar)
+ _setProp(n1, "id", _foo_bar)
+ _setProp(n2, "id", _foo + _foo_bar)
+ })
+ return [n0, n1, n2]
+}"
+`;
+
+exports[`cache multiple access > repeated expressions 1`] = `
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("")
+
+export function render(_ctx) {
+ const n0 = t0()
+ const n1 = t0()
+ _renderEffect(() => {
+ const _foo_bar = _ctx.foo + _ctx.bar
+
+ _setProp(n0, "id", _foo_bar)
+ _setProp(n1, "id", _foo_bar)
+ })
+ return [n0, n1]
+}"
+`;
+
+exports[`cache multiple access > repeated variable in expressions 1`] = `
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("")
+
+export function render(_ctx) {
+ const n0 = t0()
+ const n1 = t0()
+ _renderEffect(() => {
+ const _foo = _ctx.foo
+ _setProp(n0, "id", _foo + _foo + _ctx.bar)
+ _setProp(n1, "id", _foo)
+ })
+ return [n0, n1]
+}"
+`;
+
+exports[`cache multiple access > repeated variables 1`] = `
+"import { setClass as _setClass, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("")
+
+export function render(_ctx) {
+ const n0 = t0()
+ const n1 = t0()
+ _renderEffect(() => {
+ const _foo = _ctx.foo
+
+ _setClass(n0, _foo)
+ _setClass(n1, _foo)
+ })
+ return [n0, n1]
+}"
+`;
+
+exports[`compiler v-bind > .attr modifier 1`] = `
+"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setAttr(n0, "foo-bar", _ctx.id))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .attr modifier w/ innerHTML 1`] = `
+"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setAttr(n0, "innerHTML", _ctx.foo))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .attr modifier w/ no expression 1`] = `
+"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setAttr(n0, "foo-bar", _ctx.fooBar))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .attr modifier w/ progress value 1`] = `
+"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setAttr(n0, "value", _ctx.foo))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .attr modifier w/ textContent 1`] = `
+"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setAttr(n0, "textContent", _ctx.foo))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .attr modifier w/ value 1`] = `
+"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setAttr(n0, "value", _ctx.foo))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .camel modifier 1`] = `
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setProp(n0, "fooBar", _ctx.id))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .camel modifier w/ dynamic arg 1`] = `
+"import { camelize as _camelize, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setDynamicProps(n0, [{ [_camelize(_ctx.foo)]: _ctx.id }], true))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .camel modifier w/ no expression 1`] = `
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setProp(n0, "fooBar", _ctx.fooBar))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .prop modifier (shorthand) 1`] = `
+"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .prop modifier (shorthand) w/ innerHTML 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.foo))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .prop modifier (shorthand) w/ no expression 1`] = `
+"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .prop modifier (shorthand) w/ progress value 1`] = `
+"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setDOMProp(n0, "value", _ctx.foo))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .prop modifier (shorthand) w/ textContent 1`] = `
+"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setText(n0, _ctx.foo))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .prop modifier (shorthand) w/ value 1`] = `
+"import { setValue as _setValue, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setValue(n0, _ctx.foo))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .prop modifier 1`] = `
+"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .prop modifier w/ dynamic arg 1`] = `
+"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setDynamicProps(n0, [{ ["." + _ctx.fooBar]: _ctx.id }], true))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .prop modifier w/ innerHTML 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.foo))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .prop modifier w/ no expression 1`] = `
+"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .prop modifier w/ progress value 1`] = `
+"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setDOMProp(n0, "value", _ctx.foo))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .prop modifier w/ textContent 1`] = `
+"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setText(n0, _ctx.foo))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > .prop modifier w/ value 1`] = `
+"import { setValue as _setValue, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setValue(n0, _ctx.foo))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > :innerHTML 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.foo))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > :textContext 1`] = `
+"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setText(n0, _ctx.foo))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > :value 1`] = `
+"import { setValue as _setValue, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setValue(n0, _ctx.foo))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > :value w/ progress 1`] = `
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setProp(n0, "value", _ctx.foo))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > attributes must be set as attribute 1`] = `
+"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("")
+const t1 = _template("")
+const t2 = _template("")
+const t3 = _template("![]()
")
+const t4 = _template("")
+const t5 = _template("")
+const t6 = _template("")
+
+export function render(_ctx) {
+ const n0 = t0()
+ const n1 = t1()
+ const n2 = t2()
+ const n3 = t3()
+ const n4 = t4()
+ const n5 = t5()
+ const n6 = t6()
+ _renderEffect(() => {
+ const _width = _ctx.width
+ const _height = _ctx.height
+ _setAttr(n0, "spellcheck", _ctx.spellcheck)
+ _setAttr(n0, "draggable", _ctx.draggable)
+ _setAttr(n0, "translate", _ctx.translate)
+ _setAttr(n0, "form", _ctx.form)
+ _setAttr(n1, "list", _ctx.list)
+ _setAttr(n2, "type", _ctx.type)
+
+ _setAttr(n3, "width", _width)
+ _setAttr(n4, "width", _width)
+ _setAttr(n5, "width", _width)
+ _setAttr(n6, "width", _width)
+
+ _setAttr(n3, "height", _height)
+ _setAttr(n4, "height", _height)
+ _setAttr(n5, "height", _height)
+ _setAttr(n6, "height", _height)
+ })
+ return [n0, n1, n2, n3, n4, n5, n6]
+}"
+`;
+
+exports[`compiler v-bind > basic 1`] = `
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setProp(n0, "id", _ctx.id))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > dynamic arg 1`] = `
+"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => {
+ const _id = _ctx.id
+ const _title = _ctx.title
+ _setDynamicProps(n0, [{ [_id]: _id, [_title]: _title }], true)
+ })
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > dynamic arg w/ static attribute 1`] = `
+"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => {
+ const _id = _ctx.id
+ _setDynamicProps(n0, [{ [_id]: _id, foo: "bar", checked: "" }], true)
+ })
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > no expression (shorthand) 1`] = `
+"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setAttr(n0, "camel-case", _ctx.camelCase))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > no expression 1`] = `
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setProp(n0, "id", _ctx.id))
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > number value 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n0 = _createComponentWithFallback(_component_Comp, { depth: () => (0) }, null, true)
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > should error if empty expression 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ return n0
+}"
+`;
+
+exports[`compiler v-bind > with constant value 1`] = `
+"import { setProp as _setProp, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx, $props, $emit, $attrs, $slots) {
+ const n0 = t0()
+ _setProp(n0, "a", void 0)
+ _setProp(n0, "b", 1 > 2)
+ _setProp(n0, "c", 1 + 2)
+ _setProp(n0, "d", 1 ? 2 : 3)
+ _setProp(n0, "e", (2))
+ _setProp(n0, "g", 1)
+ _setProp(n0, "i", true)
+ _setProp(n0, "j", null)
+ _setProp(n0, "k", _ctx.x)
+ _setProp(n0, "l", { foo: 1 })
+ _setProp(n0, "m", { [_ctx.x]: 1 })
+ _setProp(n0, "n", { ...{ foo: 1 } })
+ _setProp(n0, "o", [1, , 3])
+ _setProp(n0, "p", [1, ...[2, 3]])
+ _setProp(n0, "q", [1, 2])
+ _setProp(n0, "r", /\\s+/)
+ return n0
+}"
+`;
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
new file mode 100644
index 00000000000..cb14f56afdb
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
@@ -0,0 +1,144 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: v-for > array de-structured value (with rest) 1`] = `
+"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
+const t0 = _template(" ", true)
+
+export function render(_ctx) {
+ const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
+ const n2 = t0()
+ const x2 = _child(n2)
+ _renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value[0] + _for_item0.value.slice(1) + _for_key0.value)))
+ return n2
+ }, ([id, ...other], index) => (id))
+ return n0
+}"
+`;
+
+exports[`compiler: v-for > array de-structured value 1`] = `
+"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
+const t0 = _template(" ", true)
+
+export function render(_ctx) {
+ const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
+ const n2 = t0()
+ const x2 = _child(n2)
+ _renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value[0] + _for_item0.value[1] + _for_key0.value)))
+ return n2
+ }, ([id, other], index) => (id))
+ return n0
+}"
+`;
+
+exports[`compiler: v-for > basic v-for 1`] = `
+"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, delegateEvents as _delegateEvents, template as _template } from 'vue';
+const t0 = _template(" ", true)
+_delegateEvents("click")
+
+export function render(_ctx) {
+ const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
+ const n2 = t0()
+ const x2 = _child(n2)
+ n2.$evtclick = () => (_ctx.remove(_for_item0.value))
+ _renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value)))
+ return n2
+ }, (item) => (item.id))
+ return n0
+}"
+`;
+
+exports[`compiler: v-for > multi effect 1`] = `
+"import { setProp as _setProp, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = _createFor(() => (_ctx.items), (_for_item0, _for_key0) => {
+ const n2 = t0()
+ _renderEffect(() => {
+ _setProp(n2, "item", _for_item0.value)
+ _setProp(n2, "index", _for_key0.value)
+ })
+ return n2
+ })
+ return n0
+}"
+`;
+
+exports[`compiler: v-for > nested v-for 1`] = `
+"import { setInsertionState as _setInsertionState, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
+const t0 = _template(" ")
+const t1 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
+ const n5 = t1()
+ _setInsertionState(n5)
+ const n2 = _createFor(() => (_for_item0.value), (_for_item1) => {
+ const n4 = t0()
+ const x4 = _child(n4)
+ _renderEffect(() => _setText(x4, _toDisplayString(_for_item1.value+_for_item0.value)))
+ return n4
+ }, null, 1)
+ return n5
+ })
+ return n0
+}"
+`;
+
+exports[`compiler: v-for > object de-structured value (with rest) 1`] = `
+"import { getRestElement as _getRestElement, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
+const t0 = _template(" ", true)
+
+export function render(_ctx) {
+ const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
+ const n2 = t0()
+ const x2 = _child(n2)
+ _renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value.id + _getRestElement(_for_item0.value, ["id"]) + _for_key0.value)))
+ return n2
+ }, ({ id, ...other }, index) => (id))
+ return n0
+}"
+`;
+
+exports[`compiler: v-for > object de-structured value 1`] = `
+"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
+const t0 = _template(" ", true)
+
+export function render(_ctx) {
+ const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
+ const n2 = t0()
+ const x2 = _child(n2)
+ _renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value.id) + _toDisplayString(_for_item0.value.value)))
+ return n2
+ }, ({ id, value }) => (id))
+ return n0
+}"
+`;
+
+exports[`compiler: v-for > v-for aliases w/ complex expressions 1`] = `
+"import { getDefaultValue as _getDefaultValue, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, 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()
+ const x2 = _child(n2)
+ _renderEffect(() => _setText(x2, _toDisplayString(_getDefaultValue(_for_item0.value.foo, _ctx.bar) + _ctx.bar + _ctx.baz + _getDefaultValue(_for_item0.value.baz[0], _ctx.quux) + _ctx.quux)))
+ return n2
+ })
+ return n0
+}"
+`;
+
+exports[`compiler: v-for > w/o value 1`] = `
+"import { createFor as _createFor, template as _template } from 'vue';
+const t0 = _template(" ", true)
+
+export function render(_ctx) {
+ const n0 = _createIf(() => (_ctx.ok), () => {
+ const n2 = t0()
+ const x2 = _child(n2)
+ _renderEffect(() => _setText(x2, _toDisplayString(_ctx.msg)))
+ return n2
+ })
+ return n0
+}"
+`;
+
+exports[`compiler: v-if > comment between branches 1`] = `
+"import { createIf as _createIf, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("")
+const t1 = _template("")
+const t2 = _template("")
+const t3 = _template("")
+const t4 = _template("fine")
+const t5 = _template(" ")
+
+export function render(_ctx) {
+ const n0 = _createIf(() => (_ctx.ok), () => {
+ const n2 = t0()
+ return n2
+ }, () => _createIf(() => (_ctx.orNot), () => {
+ const n5 = t1()
+ const n6 = t2()
+ return [n5, n6]
+ }, () => {
+ const n10 = t3()
+ const n11 = t4()
+ return [n10, n11]
+ }))
+ const n13 = t5()
+ const x13 = _child(n13)
+ _renderEffect(() => _setText(x13, _toDisplayString(_ctx.text)))
+ return [n0, n13]
+}"
+`;
+
+exports[`compiler: v-if > dedupe same template 1`] = `
+"import { createIf as _createIf, template as _template } from 'vue';
+const t0 = _template(" ", true)
+
+export function render(_ctx, $props, $emit, $attrs, $slots) {
+ const n2 = t0()
+ const n0 = _child(n2)
+ const n1 = _next(n0)
+ _setText(n0, _toDisplayString(_ctx.msg) + " ")
+ _setClass(n1, _ctx.clz)
+ return n2
+}"
+`;
+
+exports[`compiler: v-once > inside v-once 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template(" ", true)
+
+export function render(_ctx, $props, $emit, $attrs, $slots) {
+ const n0 = t0()
+ const x0 = _child(n0)
+ _renderEffect(() => _setText(x0, _toDisplayString(_ctx.str)))
+ return n0
+}"
+`;
+
+exports[`v-text > should raise error and ignore children when v-text is present 1`] = `
+"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template(" ", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ const x0 = _child(n0)
+ _renderEffect(() => _setText(x0, _toDisplayString(_ctx.test)))
+ return n0
+}"
+`;
+
+exports[`v-text > should raise error if has no expression 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ return n0
+}"
+`;
diff --git a/packages/compiler-vapor/__tests__/transforms/_utils.ts b/packages/compiler-vapor/__tests__/transforms/_utils.ts
new file mode 100644
index 00000000000..1b6e3f18ab1
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/_utils.ts
@@ -0,0 +1,37 @@
+import type { RootNode } from '@vue/compiler-dom'
+import {
+ type CompilerOptions,
+ type RootIRNode,
+ generate,
+ parse,
+ transform,
+} from '../../src'
+
+export function makeCompile(options: CompilerOptions = {}) {
+ return (
+ template: string,
+ overrideOptions: CompilerOptions = {},
+ ): {
+ ast: RootNode
+ ir: RootIRNode
+ code: string
+ helpers: Set
+ } => {
+ const ast = parse(template, {
+ prefixIdentifiers: true,
+ ...options,
+ ...overrideOptions,
+ })
+ const ir = transform(ast, {
+ prefixIdentifiers: true,
+ ...options,
+ ...overrideOptions,
+ })
+ const { code, helpers } = generate(ir, {
+ prefixIdentifiers: true,
+ ...options,
+ ...overrideOptions,
+ })
+ return { ast, ir, code, helpers }
+ }
+}
diff --git a/packages/compiler-vapor/__tests__/transforms/expression.spec.ts b/packages/compiler-vapor/__tests__/transforms/expression.spec.ts
new file mode 100644
index 00000000000..c97decd9ddd
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/expression.spec.ts
@@ -0,0 +1,34 @@
+import { BindingTypes } from '@vue/compiler-dom'
+import { transformChildren, transformText } from '../../src'
+import { makeCompile } from './_utils'
+
+const compileWithExpression = makeCompile({
+ nodeTransforms: [transformChildren, transformText],
+})
+
+describe('compiler: expression', () => {
+ test('basic', () => {
+ const { code } = compileWithExpression(`{{ a }}`)
+ expect(code).toMatchSnapshot()
+ expect(code).contains(`ctx.a`)
+ })
+
+ test('props', () => {
+ const { code } = compileWithExpression(`{{ foo }}`, {
+ bindingMetadata: { foo: BindingTypes.PROPS },
+ })
+ expect(code).toMatchSnapshot()
+ expect(code).contains(`$props.foo`)
+ })
+
+ test('props aliased', () => {
+ const { code } = compileWithExpression(`{{ foo }}`, {
+ bindingMetadata: {
+ foo: BindingTypes.PROPS_ALIASED,
+ __propsAliases: { foo: 'bar' } as any,
+ },
+ })
+ expect(code).toMatchSnapshot()
+ expect(code).contains(`$props['bar']`)
+ })
+})
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..e656312356c
--- /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(
+ ` outlets', () => {
+ test('default slot outlet', () => {
+ const { ir, code, helpers } = compileWithSlotsOutlet(`', () => {
+ const onError = vi.fn()
+ const source = `', () => {
+ const onError = vi.fn()
+ const source = `![]()
+
+
+ {{ foo + bar }} `,
+ )
+ expect(code).toMatchSnapshot()
+
+ expect(code).contains(`"default": (_slotProps0) =>`)
+ expect(code).contains(`_slotProps0["foo"] + _ctx.bar`)
+
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.CREATE_COMPONENT_NODE,
+ tag: 'Comp',
+ props: [[]],
+ slots: [
+ {
+ slotType: IRSlotType.STATIC,
+ slots: {
+ default: {
+ type: IRNodeTypes.BLOCK,
+ props: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: '{ foo }',
+ ast: {
+ type: 'ArrowFunctionExpression',
+ params: [{ type: 'ObjectPattern' }],
+ },
+ },
+ },
+ },
+ },
+ ],
+ })
+ })
+
+ test('on component named slot', () => {
+ const { ir, code } = compileWithSlots(
+ `{{ foo + bar }} `,
+ )
+ expect(code).toMatchSnapshot()
+
+ expect(code).contains(`"named": (_slotProps0) =>`)
+ expect(code).contains(`_slotProps0["foo"] + _ctx.bar`)
+
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.CREATE_COMPONENT_NODE,
+ tag: 'Comp',
+ slots: [
+ {
+ slotType: IRSlotType.STATIC,
+ slots: {
+ named: {
+ type: IRNodeTypes.BLOCK,
+ props: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: '{ foo }',
+ },
+ },
+ },
+ },
+ ],
+ })
+ })
+
+ test('on component dynamically named slot', () => {
+ const { ir, code } = compileWithSlots(
+ `{{ foo + bar }} `,
+ )
+ expect(code).toMatchSnapshot()
+
+ expect(code).contains(`fn: (_slotProps0) =>`)
+ expect(code).contains(`_slotProps0["foo"] + _ctx.bar`)
+
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.CREATE_COMPONENT_NODE,
+ tag: 'Comp',
+ slots: [
+ {
+ name: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'named',
+ isStatic: false,
+ },
+ fn: {
+ type: IRNodeTypes.BLOCK,
+ props: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: '{ foo }',
+ },
+ },
+ },
+ ],
+ })
+ })
+
+ test('named slots w/ implicit default slot', () => {
+ const { ir, code } = compileWithSlots(
+ `
+ foobar
+ `,
+ )
+ expect(code).toMatchSnapshot()
+
+ expect(ir.template).toEqual(['foo', 'bar', ''])
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.CREATE_COMPONENT_NODE,
+ id: 4,
+ tag: 'Comp',
+ props: [[]],
+ slots: [
+ {
+ slotType: IRSlotType.STATIC,
+ slots: {
+ one: {
+ type: IRNodeTypes.BLOCK,
+ dynamic: {
+ children: [{ template: 0 }],
+ },
+ },
+ default: {
+ type: IRNodeTypes.BLOCK,
+ dynamic: {
+ children: [{}, { template: 1 }, { template: 2 }],
+ },
+ },
+ },
+ },
+ ],
+ })
+ })
+
+ test('nested slots scoping', () => {
+ const { ir, code } = compileWithSlots(
+ `
+
+
+ {{ foo + bar + baz }}
+
+ {{ foo + bar + baz }}
+
+ `,
+ )
+ expect(code).toMatchSnapshot()
+
+ expect(code).contains(`"default": (_slotProps0) =>`)
+ expect(code).contains(`"default": (_slotProps1) =>`)
+ expect(code).contains(`_slotProps0["foo"] + _slotProps1["bar"] + _ctx.baz`)
+ expect(code).contains(`_slotProps0["foo"] + _ctx.bar + _ctx.baz`)
+
+ const outerOp = ir.block.dynamic.children[0].operation
+ expect(outerOp).toMatchObject({
+ type: IRNodeTypes.CREATE_COMPONENT_NODE,
+ tag: 'Comp',
+ props: [[]],
+ slots: [
+ {
+ slotType: IRSlotType.STATIC,
+ slots: {
+ default: {
+ type: IRNodeTypes.BLOCK,
+ props: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: '{ foo }',
+ },
+ },
+ },
+ },
+ ],
+ })
+ expect(
+ (outerOp as any).slots[0].slots.default.dynamic.children[0].operation,
+ ).toMatchObject({
+ type: IRNodeTypes.CREATE_COMPONENT_NODE,
+ tag: 'Inner',
+ slots: [
+ {
+ slotType: IRSlotType.STATIC,
+ slots: {
+ default: {
+ type: IRNodeTypes.BLOCK,
+ props: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: '{ bar }',
+ },
+ },
+ },
+ },
+ ],
+ })
+ })
+
+ test('dynamic slots name', () => {
+ const { ir, code } = compileWithSlots(
+ `
+ foo
+ `,
+ )
+ expect(code).toMatchSnapshot()
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.CREATE_COMPONENT_NODE,
+ tag: 'Comp',
+ slots: [
+ {
+ name: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'name',
+ isStatic: false,
+ },
+ fn: { type: IRNodeTypes.BLOCK },
+ },
+ ],
+ })
+ })
+
+ test('dynamic slots name w/ v-for', () => {
+ const { ir, code } = compileWithSlots(
+ `
+ {{ bar }}
+ `,
+ )
+ expect(code).toMatchSnapshot()
+
+ expect(code).contains(`fn: (_slotProps0) =>`)
+ expect(code).contains(`_setText(n0, _toDisplayString(_slotProps0["bar"]))`)
+
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.CREATE_COMPONENT_NODE,
+ tag: 'Comp',
+ slots: [
+ {
+ name: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'item',
+ isStatic: false,
+ },
+ fn: { type: IRNodeTypes.BLOCK },
+ loop: {
+ source: { content: 'list' },
+ value: { content: 'item' },
+ index: undefined,
+ },
+ },
+ ],
+ })
+ })
+
+ test('dynamic slots name w/ v-for and provide absent key', () => {
+ const { ir, code } = compileWithSlots(
+ `
+ foo
+ `,
+ )
+ expect(code).toMatchSnapshot()
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.CREATE_COMPONENT_NODE,
+ tag: 'Comp',
+ slots: [
+ {
+ name: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'index',
+ isStatic: false,
+ },
+ fn: { type: IRNodeTypes.BLOCK },
+ loop: {
+ source: { content: 'list' },
+ value: undefined,
+ index: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ },
+ },
+ },
+ ],
+ })
+ })
+
+ test('dynamic slots name w/ v-if / v-else[-if]', () => {
+ const { ir, code } = compileWithSlots(
+ `
+ condition slot
+ another condition
+ else condition
+ `,
+ )
+ expect(code).toMatchSnapshot()
+
+ expect(code).contains(`fn: (_slotProps0) =>`)
+
+ expect(ir.block.dynamic.children[0].operation).toMatchObject({
+ type: IRNodeTypes.CREATE_COMPONENT_NODE,
+ tag: 'Comp',
+ slots: [
+ {
+ slotType: IRSlotType.CONDITIONAL,
+ condition: { content: 'condition' },
+ positive: {
+ slotType: IRSlotType.DYNAMIC,
+ },
+ negative: {
+ slotType: IRSlotType.CONDITIONAL,
+ condition: { content: 'anotherCondition' },
+ positive: {
+ slotType: IRSlotType.DYNAMIC,
+ },
+ negative: { slotType: IRSlotType.DYNAMIC },
+ },
+ },
+ ],
+ })
+ })
+
+ test('quote slot name', () => {
+ const { code } = compileWithSlots(
+ `foobar `
+ compileWithSlots(source, { onError })
+ const index = source.indexOf('bar')
+ expect(onError.mock.calls[0][0]).toMatchObject({
+ code: ErrorCodes.X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN,
+ loc: {
+ start: {
+ offset: index,
+ line: 1,
+ column: index + 1,
+ },
+ end: {
+ offset: index + 3,
+ line: 1,
+ column: index + 4,
+ },
+ },
+ })
+ })
+
+ test('error on duplicated slot names', () => {
+ const onError = vi.fn()
+ const source = `
+export type TransformPreset = [
+ NodeTransform[],
+ Record,
+]
+
+export function getBaseTransformPreset(): TransformPreset {
+ return [
+ [
+ transformVOnce,
+ transformVIf,
+ transformVFor,
+ transformSlotOutlet,
+ transformTemplateRef,
+ transformText,
+ transformElement,
+ transformVSlot,
+ transformComment,
+ transformChildren,
+ ],
+ {
+ bind: transformVBind,
+ on: transformVOn,
+ html: transformVHtml,
+ text: transformVText,
+ show: transformVShow,
+ model: transformVModel,
+ },
+ ]
+}
diff --git a/packages/compiler-vapor/src/errors.ts b/packages/compiler-vapor/src/errors.ts
new file mode 100644
index 00000000000..3ccd32cba7c
--- /dev/null
+++ b/packages/compiler-vapor/src/errors.ts
@@ -0,0 +1,32 @@
+import {
+ type CompilerError,
+ type SourceLocation,
+ createCompilerError,
+} from '@vue/compiler-dom'
+
+export interface VaporCompilerError extends CompilerError {
+ code: VaporErrorCodes
+}
+
+export function createVaporCompilerError(
+ code: VaporErrorCodes,
+ loc?: SourceLocation,
+) {
+ return createCompilerError(
+ code,
+ loc,
+ VaporErrorMessages,
+ ) as VaporCompilerError
+}
+
+export enum VaporErrorCodes {
+ X_V_PLACEHOLDER = 100,
+ __EXTEND_POINT__,
+}
+
+export const VaporErrorMessages: Record = {
+ [VaporErrorCodes.X_V_PLACEHOLDER]: `[placeholder]`,
+
+ // just to fulfill types
+ [VaporErrorCodes.__EXTEND_POINT__]: ``,
+}
diff --git a/packages/compiler-vapor/src/generate.ts b/packages/compiler-vapor/src/generate.ts
new file mode 100644
index 00000000000..193a0f5da77
--- /dev/null
+++ b/packages/compiler-vapor/src/generate.ts
@@ -0,0 +1,180 @@
+import type {
+ CodegenOptions as BaseCodegenOptions,
+ BaseCodegenResult,
+ SimpleExpressionNode,
+} from '@vue/compiler-dom'
+import type { BlockIRNode, CoreHelper, RootIRNode, VaporHelper } from './ir'
+import { extend, remove } from '@vue/shared'
+import { genBlockContent } from './generators/block'
+import { genTemplates } from './generators/template'
+import {
+ type CodeFragment,
+ INDENT_END,
+ INDENT_START,
+ LF,
+ NEWLINE,
+ buildCodeFragment,
+ codeFragmentToString,
+ genCall,
+} from './generators/utils'
+import { setTemplateRefIdent } from './generators/templateRef'
+
+export type CodegenOptions = Omit
+
+export class CodegenContext {
+ options: Required
+
+ helpers: Set = new Set([])
+
+ helper = (name: CoreHelper | VaporHelper) => {
+ this.helpers.add(name)
+ return `_${name}`
+ }
+
+ delegates: Set = new Set()
+
+ identifiers: Record =
+ Object.create(null)
+
+ seenInlineHandlerNames: Record = Object.create(null)
+
+ block: BlockIRNode
+ withId(
+ fn: () => T,
+ map: Record,
+ ): T {
+ const { identifiers } = this
+ const ids = Object.keys(map)
+
+ for (const id of ids) {
+ identifiers[id] ||= []
+ identifiers[id].unshift(map[id] || id)
+ }
+
+ const ret = fn()
+ ids.forEach(id => remove(identifiers[id], map[id] || id))
+
+ return ret
+ }
+
+ enterBlock(block: BlockIRNode) {
+ const parent = this.block
+ this.block = block
+ return (): BlockIRNode => (this.block = parent)
+ }
+
+ scopeLevel: number = 0
+ enterScope(): [level: number, exit: () => number] {
+ return [this.scopeLevel++, () => this.scopeLevel--] as const
+ }
+
+ constructor(
+ public ir: RootIRNode,
+ options: CodegenOptions,
+ ) {
+ const defaultOptions: Required = {
+ mode: 'module',
+ prefixIdentifiers: true,
+ sourceMap: false,
+ filename: `template.vue.html`,
+ scopeId: null,
+ runtimeGlobalName: `Vue`,
+ runtimeModuleName: `vue`,
+ ssrRuntimeModuleName: 'vue/server-renderer',
+ ssr: false,
+ isTS: false,
+ inSSR: false,
+ inline: false,
+ bindingMetadata: {},
+ expressionPlugins: [],
+ }
+ this.options = extend(defaultOptions, options)
+ this.block = ir.block
+ }
+}
+
+export interface VaporCodegenResult extends BaseCodegenResult {
+ ast: RootIRNode
+ helpers: Set
+}
+
+// IR -> JS codegen
+export function generate(
+ ir: RootIRNode,
+ options: CodegenOptions = {},
+): VaporCodegenResult {
+ const [frag, push] = buildCodeFragment()
+ const context = new CodegenContext(ir, options)
+ const { helpers } = context
+ const { inline, bindingMetadata } = options
+ const functionName = 'render'
+
+ const args = ['_ctx']
+ if (bindingMetadata && !inline) {
+ // binding optimization args
+ args.push('$props', '$emit', '$attrs', '$slots')
+ }
+ const signature = (options.isTS ? args.map(arg => `${arg}: any`) : args).join(
+ ', ',
+ )
+
+ if (!inline) {
+ push(NEWLINE, `export function ${functionName}(${signature}) {`)
+ }
+
+ push(INDENT_START)
+ if (ir.hasTemplateRef) {
+ push(
+ NEWLINE,
+ `const ${setTemplateRefIdent} = ${context.helper('createTemplateRefSetter')}()`,
+ )
+ }
+ push(...genBlockContent(ir.block, context, true))
+ push(INDENT_END, NEWLINE)
+
+ if (!inline) {
+ push('}')
+ }
+
+ const delegates = genDelegates(context)
+ const templates = genTemplates(ir.template, ir.rootTemplateIndex, context)
+ const imports = genHelperImports(context)
+ const preamble = imports + templates + delegates
+
+ const newlineCount = [...preamble].filter(c => c === '\n').length
+ if (newlineCount && !inline) {
+ frag.unshift(...new Array(newlineCount).fill(LF))
+ }
+
+ let [code, map] = codeFragmentToString(frag, context)
+ if (!inline) {
+ code = preamble + code
+ }
+
+ return {
+ code,
+ ast: ir,
+ preamble,
+ map: map && map.toJSON(),
+ helpers,
+ }
+}
+
+function genDelegates({ delegates, helper }: CodegenContext) {
+ return delegates.size
+ ? genCall(
+ helper('delegateEvents'),
+ ...Array.from(delegates).map(v => `"${v}"`),
+ ).join('') + '\n'
+ : ''
+}
+
+function genHelperImports({ helpers, helper, options }: CodegenContext) {
+ let imports = ''
+ if (helpers.size) {
+ imports += `import { ${[...helpers]
+ .map(h => `${h} as _${h}`)
+ .join(', ')} } from '${options.runtimeModuleName}';\n`
+ }
+ return imports
+}
diff --git a/packages/compiler-vapor/src/generators/block.ts b/packages/compiler-vapor/src/generators/block.ts
new file mode 100644
index 00000000000..b161b8f45d1
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/block.ts
@@ -0,0 +1,85 @@
+import type { BlockIRNode, CoreHelper } from '../ir'
+import {
+ type CodeFragment,
+ DELIMITERS_ARRAY,
+ INDENT_END,
+ INDENT_START,
+ NEWLINE,
+ buildCodeFragment,
+ genCall,
+ genMulti,
+} from './utils'
+import type { CodegenContext } from '../generate'
+import { genEffects, genOperations } from './operation'
+import { genChildren, genSelf } from './template'
+import { toValidAssetId } from '@vue/compiler-dom'
+
+export function genBlock(
+ oper: BlockIRNode,
+ context: CodegenContext,
+ args: CodeFragment[] = [],
+ root?: boolean,
+ customReturns?: (returns: CodeFragment[]) => CodeFragment[],
+): CodeFragment[] {
+ return [
+ '(',
+ ...args,
+ ') => {',
+ INDENT_START,
+ ...genBlockContent(oper, context, root, customReturns),
+ INDENT_END,
+ NEWLINE,
+ '}',
+ ]
+}
+
+export function genBlockContent(
+ block: BlockIRNode,
+ context: CodegenContext,
+ root?: boolean,
+ customReturns?: (returns: CodeFragment[]) => CodeFragment[],
+): CodeFragment[] {
+ const [frag, push] = buildCodeFragment()
+ const { dynamic, effect, operation, returns } = block
+ const resetBlock = context.enterBlock(block)
+
+ if (root) {
+ genResolveAssets('component', 'resolveComponent')
+ genResolveAssets('directive', 'resolveDirective')
+ }
+
+ for (const child of dynamic.children) {
+ push(...genSelf(child, context))
+ }
+ for (const child of dynamic.children) {
+ push(...genChildren(child, context, `n${child.id!}`))
+ }
+
+ push(...genOperations(operation, context))
+ push(...genEffects(effect, context))
+
+ push(NEWLINE, `return `)
+
+ const returnNodes = returns.map(n => `n${n}`)
+ const returnsCode: CodeFragment[] =
+ returnNodes.length > 1
+ ? genMulti(DELIMITERS_ARRAY, ...returnNodes)
+ : [returnNodes[0] || 'null']
+ push(...(customReturns ? customReturns(returnsCode) : returnsCode))
+
+ resetBlock()
+ return frag
+
+ function genResolveAssets(
+ kind: 'component' | 'directive',
+ helper: CoreHelper,
+ ) {
+ for (const name of context.ir[kind]) {
+ push(
+ NEWLINE,
+ `const ${toValidAssetId(name, kind)} = `,
+ ...genCall(context.helper(helper), JSON.stringify(name)),
+ )
+ }
+ }
+}
diff --git a/packages/compiler-vapor/src/generators/component.ts b/packages/compiler-vapor/src/generators/component.ts
new file mode 100644
index 00000000000..7c232db754b
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/component.ts
@@ -0,0 +1,434 @@
+import { camelize, extend, isArray } from '@vue/shared'
+import type { CodegenContext } from '../generate'
+import {
+ type CreateComponentIRNode,
+ IRDynamicPropsKind,
+ type IRProp,
+ type IRProps,
+ type IRPropsStatic,
+ type IRSlotDynamic,
+ type IRSlotDynamicBasic,
+ type IRSlotDynamicConditional,
+ type IRSlotDynamicLoop,
+ IRSlotType,
+ type IRSlots,
+ type IRSlotsStatic,
+ type SlotBlockIRNode,
+} from '../ir'
+import {
+ type CodeFragment,
+ DELIMITERS_ARRAY_NEWLINE,
+ DELIMITERS_OBJECT,
+ DELIMITERS_OBJECT_NEWLINE,
+ INDENT_END,
+ INDENT_START,
+ NEWLINE,
+ genCall,
+ genMulti,
+} from './utils'
+import { genExpression } from './expression'
+import { genPropKey, genPropValue } from './prop'
+import {
+ type SimpleExpressionNode,
+ createSimpleExpression,
+ isMemberExpression,
+ toValidAssetId,
+ walkIdentifiers,
+} from '@vue/compiler-core'
+import { genEventHandler } from './event'
+import { genDirectiveModifiers, genDirectivesForElement } from './directive'
+import { genBlock } from './block'
+import { genModelHandler } from './vModel'
+
+export function genCreateComponent(
+ operation: CreateComponentIRNode,
+ context: CodegenContext,
+): CodeFragment[] {
+ const { helper } = context
+
+ const tag = genTag()
+ const { root, props, slots, once } = operation
+ const rawSlots = genRawSlots(slots, context)
+ const [ids, handlers] = processInlineHandlers(props, context)
+ const rawProps = context.withId(() => genRawProps(props, context), ids)
+
+ const inlineHandlers: CodeFragment[] = handlers.reduce(
+ (acc, { name, value }) => {
+ const handler = genEventHandler(context, value, undefined, false)
+ return [...acc, `const ${name} = `, ...handler, NEWLINE]
+ },
+ [],
+ )
+
+ return [
+ NEWLINE,
+ ...inlineHandlers,
+ `const n${operation.id} = `,
+ ...genCall(
+ operation.dynamic && !operation.dynamic.isStatic
+ ? helper('createDynamicComponent')
+ : operation.asset
+ ? helper('createComponentWithFallback')
+ : helper('createComponent'),
+ tag,
+ rawProps,
+ rawSlots,
+ root ? 'true' : false,
+ once && 'true',
+ ),
+ ...genDirectivesForElement(operation.id, context),
+ ]
+
+ function genTag() {
+ if (operation.dynamic) {
+ if (operation.dynamic.isStatic) {
+ return genCall(
+ helper('resolveDynamicComponent'),
+ genExpression(operation.dynamic, context),
+ )
+ } else {
+ return ['() => (', ...genExpression(operation.dynamic, context), ')']
+ }
+ } else if (operation.asset) {
+ return toValidAssetId(operation.tag, 'component')
+ } else {
+ return genExpression(
+ extend(createSimpleExpression(operation.tag, false), { ast: null }),
+ context,
+ )
+ }
+ }
+}
+
+function getUniqueHandlerName(context: CodegenContext, name: string): string {
+ const { seenInlineHandlerNames } = context
+ const count = seenInlineHandlerNames[name] || 0
+ seenInlineHandlerNames[name] = count + 1
+ return count === 0 ? name : `${name}${count}`
+}
+
+type InlineHandler = {
+ name: string
+ value: SimpleExpressionNode
+}
+
+function processInlineHandlers(
+ props: IRProps[],
+ context: CodegenContext,
+): [Record, InlineHandler[]] {
+ const ids: Record = Object.create(null)
+ const handlers: InlineHandler[] = []
+ const staticProps = props[0]
+ if (isArray(staticProps)) {
+ for (let i = 0; i < staticProps.length; i++) {
+ const prop = staticProps[i]
+ if (!prop.handler) continue
+ prop.values.forEach((value, i) => {
+ const isMemberExp = isMemberExpression(value, context.options)
+ // cache inline handlers (fn expression or inline statement)
+ if (!isMemberExp) {
+ const name = getUniqueHandlerName(context, `_on_${prop.key.content}`)
+ handlers.push({ name, value })
+ ids[name] = null
+ // replace the original prop value with the handler name
+ prop.values[i] = extend({ ast: null }, createSimpleExpression(name))
+ }
+ })
+ }
+ }
+ return [ids, handlers]
+}
+
+export function genRawProps(
+ props: IRProps[],
+ context: CodegenContext,
+): CodeFragment[] | undefined {
+ const staticProps = props[0]
+ if (isArray(staticProps)) {
+ if (!staticProps.length && props.length === 1) {
+ return
+ }
+ return genStaticProps(
+ staticProps,
+ context,
+ genDynamicProps(props.slice(1), context),
+ )
+ } else if (props.length) {
+ // all dynamic
+ return genStaticProps([], context, genDynamicProps(props, context))
+ }
+}
+
+function genStaticProps(
+ props: IRPropsStatic,
+ context: CodegenContext,
+ dynamicProps?: CodeFragment[],
+): CodeFragment[] {
+ const args = props.map(prop => genProp(prop, context, true))
+ if (dynamicProps) {
+ args.push([`$: `, ...dynamicProps])
+ }
+ return genMulti(
+ args.length > 1 ? DELIMITERS_OBJECT_NEWLINE : DELIMITERS_OBJECT,
+ ...args,
+ )
+}
+
+function genDynamicProps(
+ props: IRProps[],
+ context: CodegenContext,
+): CodeFragment[] | undefined {
+ const { helper } = context
+ const frags: CodeFragment[][] = []
+ for (const p of props) {
+ let expr: CodeFragment[]
+ if (isArray(p)) {
+ if (p.length) {
+ frags.push(genStaticProps(p, context))
+ }
+ continue
+ } else {
+ if (p.kind === IRDynamicPropsKind.ATTRIBUTE)
+ expr = genMulti(DELIMITERS_OBJECT, genProp(p, context))
+ else {
+ expr = genExpression(p.value, context)
+ if (p.handler) expr = genCall(helper('toHandlers'), expr)
+ }
+ }
+ frags.push(['() => (', ...expr, ')'])
+ }
+ if (frags.length) {
+ return genMulti(DELIMITERS_ARRAY_NEWLINE, ...frags)
+ }
+}
+
+function genProp(prop: IRProp, context: CodegenContext, isStatic?: boolean) {
+ const values = genPropValue(prop.values, context)
+ return [
+ ...genPropKey(prop, context),
+ ': ',
+ ...(prop.handler
+ ? genEventHandler(
+ context,
+ prop.values[0],
+ undefined,
+ true /* wrap handlers passed to components */,
+ )
+ : isStatic
+ ? ['() => (', ...values, ')']
+ : values),
+ ...(prop.model
+ ? [...genModelEvent(prop, context), ...genModelModifiers(prop, context)]
+ : []),
+ ]
+}
+
+function genModelEvent(prop: IRProp, context: CodegenContext): CodeFragment[] {
+ const name = prop.key.isStatic
+ ? [JSON.stringify(`onUpdate:${camelize(prop.key.content)}`)]
+ : ['["onUpdate:" + ', ...genExpression(prop.key, context), ']']
+ const handler = genModelHandler(prop.values[0], context)
+
+ return [',', NEWLINE, ...name, ': () => ', ...handler]
+}
+
+function genModelModifiers(
+ prop: IRProp,
+ context: CodegenContext,
+): CodeFragment[] {
+ const { key, modelModifiers } = prop
+ if (!modelModifiers || !modelModifiers.length) return []
+
+ const modifiersKey = key.isStatic
+ ? key.content === 'modelValue'
+ ? [`modelModifiers`]
+ : [`${key.content}Modifiers`]
+ : ['[', ...genExpression(key, context), ' + "Modifiers"]']
+
+ const modifiersVal = genDirectiveModifiers(modelModifiers)
+ return [',', NEWLINE, ...modifiersKey, `: () => ({ ${modifiersVal} })`]
+}
+
+function genRawSlots(slots: IRSlots[], context: CodegenContext) {
+ if (!slots.length) return
+ const staticSlots = slots[0]
+ if (staticSlots.slotType === IRSlotType.STATIC) {
+ // single static slot
+ return genStaticSlots(
+ staticSlots,
+ context,
+ slots.length > 1 ? slots.slice(1) : undefined,
+ )
+ } else {
+ return genStaticSlots(
+ { slotType: IRSlotType.STATIC, slots: {} },
+ context,
+ slots,
+ )
+ }
+}
+
+function genStaticSlots(
+ { slots }: IRSlotsStatic,
+ context: CodegenContext,
+ dynamicSlots?: IRSlots[],
+) {
+ const args = Object.keys(slots).map(name => [
+ `${JSON.stringify(name)}: `,
+ ...genSlotBlockWithProps(slots[name], context),
+ ])
+ if (dynamicSlots) {
+ args.push([`$: `, ...genDynamicSlots(dynamicSlots, context)])
+ }
+ return genMulti(DELIMITERS_OBJECT_NEWLINE, ...args)
+}
+
+function genDynamicSlots(
+ slots: IRSlots[],
+ context: CodegenContext,
+): CodeFragment[] {
+ return genMulti(
+ DELIMITERS_ARRAY_NEWLINE,
+ ...slots.map(slot =>
+ slot.slotType === IRSlotType.STATIC
+ ? genStaticSlots(slot, context)
+ : slot.slotType === IRSlotType.EXPRESSION
+ ? slot.slots.content
+ : genDynamicSlot(slot, context, true),
+ ),
+ )
+}
+
+function genDynamicSlot(
+ slot: IRSlotDynamic,
+ context: CodegenContext,
+ withFunction = false,
+): CodeFragment[] {
+ let frag: CodeFragment[]
+ switch (slot.slotType) {
+ case IRSlotType.DYNAMIC:
+ frag = genBasicDynamicSlot(slot, context)
+ break
+ case IRSlotType.LOOP:
+ frag = genLoopSlot(slot, context)
+ break
+ case IRSlotType.CONDITIONAL:
+ frag = genConditionalSlot(slot, context)
+ break
+ }
+ return withFunction ? ['() => (', ...frag, ')'] : frag
+}
+
+function genBasicDynamicSlot(
+ slot: IRSlotDynamicBasic,
+ context: CodegenContext,
+): CodeFragment[] {
+ const { name, fn } = slot
+ return genMulti(
+ DELIMITERS_OBJECT_NEWLINE,
+ ['name: ', ...genExpression(name, context)],
+ ['fn: ', ...genSlotBlockWithProps(fn, context)],
+ )
+}
+
+function genLoopSlot(
+ slot: IRSlotDynamicLoop,
+ context: CodegenContext,
+): CodeFragment[] {
+ const { name, fn, loop } = slot
+ const { value, key, index, source } = loop
+ const rawValue = value && value.content
+ const rawKey = key && key.content
+ const rawIndex = index && index.content
+
+ const idMap: Record = {}
+ if (rawValue) idMap[rawValue] = rawValue
+ if (rawKey) idMap[rawKey] = rawKey
+ if (rawIndex) idMap[rawIndex] = rawIndex
+ const slotExpr = genMulti(
+ DELIMITERS_OBJECT_NEWLINE,
+ ['name: ', ...context.withId(() => genExpression(name, context), idMap)],
+ [
+ 'fn: ',
+ ...context.withId(() => genSlotBlockWithProps(fn, context), idMap),
+ ],
+ )
+ return [
+ ...genCall(
+ context.helper('createForSlots'),
+ genExpression(source, context),
+ [
+ ...genMulti(
+ ['(', ')', ', '],
+ rawValue ? rawValue : rawKey || rawIndex ? '_' : undefined,
+ rawKey ? rawKey : rawIndex ? '__' : undefined,
+ rawIndex,
+ ),
+ ' => (',
+ ...slotExpr,
+ ')',
+ ],
+ ),
+ ]
+}
+
+function genConditionalSlot(
+ slot: IRSlotDynamicConditional,
+ context: CodegenContext,
+): CodeFragment[] {
+ const { condition, positive, negative } = slot
+ return [
+ ...genExpression(condition, context),
+ INDENT_START,
+ NEWLINE,
+ '? ',
+ ...genDynamicSlot(positive, context),
+ NEWLINE,
+ ': ',
+ ...(negative ? [...genDynamicSlot(negative, context)] : ['void 0']),
+ INDENT_END,
+ ]
+}
+
+function genSlotBlockWithProps(oper: SlotBlockIRNode, context: CodegenContext) {
+ let isDestructureAssignment = false
+ let rawProps: string | undefined
+ let propsName: string | undefined
+ let exitScope: (() => void) | undefined
+ let depth: number | undefined
+ const { props } = oper
+ const idsOfProps = new Set()
+
+ if (props) {
+ rawProps = props.content
+ if ((isDestructureAssignment = !!props.ast)) {
+ ;[depth, exitScope] = context.enterScope()
+ propsName = `_slotProps${depth}`
+ walkIdentifiers(
+ props.ast,
+ (id, _, __, ___, isLocal) => {
+ if (isLocal) idsOfProps.add(id.name)
+ },
+ true,
+ )
+ } else {
+ idsOfProps.add((propsName = rawProps))
+ }
+ }
+
+ const idMap: Record = {}
+
+ idsOfProps.forEach(
+ id =>
+ (idMap[id] = isDestructureAssignment
+ ? `${propsName}[${JSON.stringify(id)}]`
+ : null),
+ )
+ const blockFn = context.withId(
+ () => genBlock(oper, context, [propsName]),
+ idMap,
+ )
+ exitScope && exitScope()
+
+ return blockFn
+}
diff --git a/packages/compiler-vapor/src/generators/directive.ts b/packages/compiler-vapor/src/generators/directive.ts
new file mode 100644
index 00000000000..7ed4624c1f8
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/directive.ts
@@ -0,0 +1,111 @@
+import {
+ createSimpleExpression,
+ isSimpleIdentifier,
+ toValidAssetId,
+} from '@vue/compiler-dom'
+import { extend } from '@vue/shared'
+import { genExpression } from './expression'
+import type { CodegenContext } from '../generate'
+import {
+ type CodeFragment,
+ type CodeFragmentDelimiters,
+ DELIMITERS_ARRAY,
+ NEWLINE,
+ genCall,
+ genMulti,
+} from './utils'
+import { type DirectiveIRNode, IRNodeTypes, type OperationNode } from '../ir'
+import { genVShow } from './vShow'
+import { genVModel } from './vModel'
+
+export function genBuiltinDirective(
+ oper: DirectiveIRNode,
+ context: CodegenContext,
+): CodeFragment[] {
+ switch (oper.name) {
+ case 'show':
+ return genVShow(oper, context)
+ case 'model':
+ return genVModel(oper, context)
+ default:
+ return []
+ }
+}
+
+/**
+ * user directives via `withVaporDirectives`
+ * TODO the compiler side is implemented but no runtime support yet
+ * it was removed due to perf issues
+ */
+export function genDirectivesForElement(
+ id: number,
+ context: CodegenContext,
+): CodeFragment[] {
+ const dirs = filterCustomDirectives(id, context.block.operation)
+ return dirs.length ? genCustomDirectives(dirs, context) : []
+}
+
+function genCustomDirectives(
+ opers: DirectiveIRNode[],
+ context: CodegenContext,
+): CodeFragment[] {
+ const { helper } = context
+
+ const element = `n${opers[0].element}`
+ const directiveItems = opers.map(genDirectiveItem)
+ const directives = genMulti(DELIMITERS_ARRAY, ...directiveItems)
+
+ return [
+ NEWLINE,
+ ...genCall(helper('withVaporDirectives'), element, directives),
+ ]
+
+ function genDirectiveItem({
+ dir,
+ name,
+ asset,
+ }: DirectiveIRNode): CodeFragment[] {
+ const directiveVar = asset
+ ? toValidAssetId(name, 'directive')
+ : genExpression(
+ extend(createSimpleExpression(name, false), { ast: null }),
+ context,
+ )
+ const value = dir.exp && ['() => ', ...genExpression(dir.exp, context)]
+ const argument = dir.arg && genExpression(dir.arg, context)
+ const modifiers = !!dir.modifiers.length && [
+ '{ ',
+ genDirectiveModifiers(dir.modifiers.map(m => m.content)),
+ ' }',
+ ]
+
+ return genMulti(
+ DELIMITERS_ARRAY.concat('void 0') as CodeFragmentDelimiters,
+ directiveVar,
+ value,
+ argument,
+ modifiers,
+ )
+ }
+}
+
+export function genDirectiveModifiers(modifiers: string[]): string {
+ return modifiers
+ .map(
+ value =>
+ `${isSimpleIdentifier(value) ? value : JSON.stringify(value)}: true`,
+ )
+ .join(', ')
+}
+
+function filterCustomDirectives(
+ id: number,
+ operations: OperationNode[],
+): DirectiveIRNode[] {
+ return operations.filter(
+ (oper): oper is DirectiveIRNode =>
+ oper.type === IRNodeTypes.DIRECTIVE &&
+ oper.element === id &&
+ !oper.builtin,
+ )
+}
diff --git a/packages/compiler-vapor/src/generators/dom.ts b/packages/compiler-vapor/src/generators/dom.ts
new file mode 100644
index 00000000000..5634f7e4408
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/dom.ts
@@ -0,0 +1,34 @@
+import type { CodegenContext } from '../generate'
+import type { InsertNodeIRNode, PrependNodeIRNode } from '../ir'
+import { type CodeFragment, NEWLINE, genCall } from './utils'
+
+export function genInsertNode(
+ { parent, elements, anchor }: InsertNodeIRNode,
+ { helper }: CodegenContext,
+): CodeFragment[] {
+ let element = elements.map(el => `n${el}`).join(', ')
+ if (elements.length > 1) element = `[${element}]`
+ return [
+ NEWLINE,
+ ...genCall(
+ helper('insert'),
+ element,
+ `n${parent}`,
+ anchor === undefined ? undefined : `n${anchor}`,
+ ),
+ ]
+}
+
+export function genPrependNode(
+ oper: PrependNodeIRNode,
+ { helper }: CodegenContext,
+): CodeFragment[] {
+ return [
+ NEWLINE,
+ ...genCall(
+ helper('prepend'),
+ `n${oper.parent}`,
+ ...oper.elements.map(el => `n${el}`),
+ ),
+ ]
+}
diff --git a/packages/compiler-vapor/src/generators/event.ts b/packages/compiler-vapor/src/generators/event.ts
new file mode 100644
index 00000000000..cfb47b61184
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/event.ts
@@ -0,0 +1,193 @@
+import {
+ BindingTypes,
+ type SimpleExpressionNode,
+ isFnExpression,
+ isMemberExpression,
+} from '@vue/compiler-dom'
+import type { CodegenContext } from '../generate'
+import {
+ IRNodeTypes,
+ type OperationNode,
+ type SetDynamicEventsIRNode,
+ type SetEventIRNode,
+} from '../ir'
+import { genExpression } from './expression'
+import {
+ type CodeFragment,
+ DELIMITERS_OBJECT_NEWLINE,
+ NEWLINE,
+ genCall,
+ genMulti,
+} from './utils'
+
+export function genSetEvent(
+ oper: SetEventIRNode,
+ context: CodegenContext,
+): CodeFragment[] {
+ const { helper } = context
+ const { element, key, keyOverride, value, modifiers, delegate, effect } = oper
+
+ const name = genName()
+ const handler = genEventHandler(context, value, modifiers)
+ const eventOptions = genEventOptions()
+
+ if (delegate) {
+ // key is static
+ context.delegates.add(key.content)
+ // if this is the only delegated event of this name on this element,
+ // we can generate optimized handler attachment code
+ // e.g. n1.$evtclick = () => {}
+ if (!context.block.operation.some(isSameDelegateEvent)) {
+ return [NEWLINE, `n${element}.$evt${key.content} = `, ...handler]
+ }
+ }
+
+ return [
+ NEWLINE,
+ ...genCall(
+ helper(delegate ? 'delegate' : 'on'),
+ `n${element}`,
+ name,
+ handler,
+ eventOptions,
+ ),
+ ]
+
+ function genName(): CodeFragment[] {
+ const expr = genExpression(key, context)
+ if (keyOverride) {
+ // TODO unit test
+ const find = JSON.stringify(keyOverride[0])
+ const replacement = JSON.stringify(keyOverride[1])
+ const wrapped: CodeFragment[] = ['(', ...expr, ')']
+ return [...wrapped, ` === ${find} ? ${replacement} : `, ...wrapped]
+ } else {
+ return genExpression(key, context)
+ }
+ }
+
+ function genEventOptions(): CodeFragment[] | undefined {
+ let { options } = modifiers
+ if (!options.length && !effect) return
+
+ return genMulti(
+ DELIMITERS_OBJECT_NEWLINE,
+ effect && ['effect: true'],
+ ...options.map((option): CodeFragment[] => [`${option}: true`]),
+ )
+ }
+
+ function isSameDelegateEvent(op: OperationNode) {
+ if (
+ op.type === IRNodeTypes.SET_EVENT &&
+ op !== oper &&
+ op.delegate &&
+ op.element === oper.element &&
+ op.key.content === key.content
+ ) {
+ return true
+ }
+ }
+}
+
+export function genSetDynamicEvents(
+ oper: SetDynamicEventsIRNode,
+ context: CodegenContext,
+): CodeFragment[] {
+ const { helper } = context
+ return [
+ NEWLINE,
+ ...genCall(
+ helper('setDynamicEvents'),
+ `n${oper.element}`,
+ genExpression(oper.event, context),
+ ),
+ ]
+}
+
+export function genEventHandler(
+ context: CodegenContext,
+ value: SimpleExpressionNode | undefined,
+ modifiers: {
+ nonKeys: string[]
+ keys: string[]
+ } = { nonKeys: [], keys: [] },
+ // passed as component prop - need additional wrap
+ extraWrap: boolean = false,
+): CodeFragment[] {
+ let handlerExp: CodeFragment[] = [`() => {}`]
+ if (value && value.content.trim()) {
+ // Determine how the handler should be wrapped so it always reference the
+ // latest value when invoked.
+ if (isMemberExpression(value, context.options)) {
+ // e.g. @click="foo.bar"
+ handlerExp = genExpression(value, context)
+ if (!isConstantBinding(value, context) && !extraWrap) {
+ // non constant, wrap with invocation as `e => foo.bar(e)`
+ // when passing as component handler, access is always dynamic so we
+ // can skip this
+ handlerExp = [`e => `, ...handlerExp, `(e)`]
+ }
+ } else if (isFnExpression(value, context.options)) {
+ // Fn expression: @click="e => foo(e)"
+ // no need to wrap in this case
+ handlerExp = genExpression(value, context)
+ } else {
+ // inline statement
+ // @click="foo($event)" ---> $event => foo($event)
+ const referencesEvent = value.content.includes('$event')
+ const hasMultipleStatements = value.content.includes(`;`)
+ const expr = referencesEvent
+ ? context.withId(() => genExpression(value, context), {
+ $event: null,
+ })
+ : genExpression(value, context)
+ handlerExp = [
+ referencesEvent ? '$event => ' : '() => ',
+ hasMultipleStatements ? '{' : '(',
+ ...expr,
+ hasMultipleStatements ? '}' : ')',
+ ]
+ }
+ }
+
+ const { keys, nonKeys } = modifiers
+ if (nonKeys.length)
+ handlerExp = genWithModifiers(context, handlerExp, nonKeys)
+ if (keys.length) handlerExp = genWithKeys(context, handlerExp, keys)
+
+ if (extraWrap) handlerExp.unshift(`() => `)
+ return handlerExp
+}
+
+function genWithModifiers(
+ context: CodegenContext,
+ handler: CodeFragment[],
+ nonKeys: string[],
+): CodeFragment[] {
+ return genCall(
+ context.helper('withModifiers'),
+ handler,
+ JSON.stringify(nonKeys),
+ )
+}
+
+function genWithKeys(
+ context: CodegenContext,
+ handler: CodeFragment[],
+ keys: string[],
+): CodeFragment[] {
+ return genCall(context.helper('withKeys'), handler, JSON.stringify(keys))
+}
+
+function isConstantBinding(
+ value: SimpleExpressionNode,
+ context: CodegenContext,
+) {
+ if (value.ast === null) {
+ const bindingType = context.options.bindingMetadata[value.content]
+ if (bindingType === BindingTypes.SETUP_CONST) {
+ return true
+ }
+ }
+}
diff --git a/packages/compiler-vapor/src/generators/expression.ts b/packages/compiler-vapor/src/generators/expression.ts
new file mode 100644
index 00000000000..eedaeeb380a
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/expression.ts
@@ -0,0 +1,582 @@
+import {
+ NOOP,
+ extend,
+ genPropsAccessExp,
+ isGloballyAllowed,
+ isString,
+} from '@vue/shared'
+import {
+ BindingTypes,
+ NewlineType,
+ type SimpleExpressionNode,
+ type SourceLocation,
+ advancePositionWithClone,
+ createSimpleExpression,
+ isInDestructureAssignment,
+ isStaticProperty,
+ walkIdentifiers,
+} from '@vue/compiler-dom'
+import type { Identifier, Node } from '@babel/types'
+import type { CodegenContext } from '../generate'
+import { isConstantExpression } from '../utils'
+import { type CodeFragment, NEWLINE, buildCodeFragment } from './utils'
+import { walk } from 'estree-walker'
+import { type ParserOptions, parseExpression } from '@babel/parser'
+
+export function genExpression(
+ node: SimpleExpressionNode,
+ context: CodegenContext,
+ assignment?: string,
+): CodeFragment[] {
+ const { content, ast, isStatic, loc } = node
+
+ if (isStatic) {
+ return [[JSON.stringify(content), NewlineType.None, loc]]
+ }
+
+ if (
+ !node.content.trim() ||
+ // there was a parsing error
+ ast === false ||
+ isConstantExpression(node)
+ ) {
+ return [[content, NewlineType.None, loc], assignment && ` = ${assignment}`]
+ }
+
+ // the expression is a simple identifier
+ if (ast === null) {
+ return genIdentifier(content, context, loc, assignment)
+ }
+
+ const ids: Identifier[] = []
+ const parentStackMap = new Map()
+ const parentStack: Node[] = []
+ walkIdentifiers(
+ ast!,
+ id => {
+ ids.push(id)
+ parentStackMap.set(id, parentStack.slice())
+ },
+ false,
+ parentStack,
+ )
+
+ let hasMemberExpression = false
+ if (ids.length) {
+ const [frag, push] = buildCodeFragment()
+ ids
+ .sort((a, b) => a.start! - b.start!)
+ .forEach((id, i) => {
+ // range is offset by -1 due to the wrapping parens when parsed
+ const start = id.start! - 1
+ const end = id.end! - 1
+ const last = ids[i - 1]
+
+ const leadingText = content.slice(last ? last.end! - 1 : 0, start)
+ if (leadingText.length) push([leadingText, NewlineType.Unknown])
+
+ const source = content.slice(start, end)
+ const parentStack = parentStackMap.get(id)!
+ const parent = parentStack[parentStack.length - 1]
+
+ hasMemberExpression ||=
+ parent &&
+ (parent.type === 'MemberExpression' ||
+ parent.type === 'OptionalMemberExpression')
+
+ push(
+ ...genIdentifier(
+ source,
+ context,
+ {
+ start: advancePositionWithClone(node.loc.start, source, start),
+ end: advancePositionWithClone(node.loc.start, source, end),
+ source,
+ },
+ hasMemberExpression ? undefined : assignment,
+ id,
+ parent,
+ parentStack,
+ ),
+ )
+
+ if (i === ids.length - 1 && end < content.length) {
+ push([content.slice(end), NewlineType.Unknown])
+ }
+ })
+
+ if (assignment && hasMemberExpression) {
+ push(` = ${assignment}`)
+ }
+ return frag
+ } else {
+ return [[content, NewlineType.Unknown, loc]]
+ }
+}
+
+function genIdentifier(
+ raw: string,
+ context: CodegenContext,
+ loc?: SourceLocation,
+ assignment?: string,
+ id?: Identifier,
+ parent?: Node,
+ parentStack?: Node[],
+): CodeFragment[] {
+ const { options, helper, identifiers } = context
+ const { inline, bindingMetadata } = options
+ let name: string | undefined = raw
+
+ const idMap = identifiers[raw]
+ if (idMap && idMap.length) {
+ const replacement = idMap[0]
+ if (isString(replacement)) {
+ if (parent && parent.type === 'ObjectProperty' && parent.shorthand) {
+ return [[`${name}: ${replacement}`, NewlineType.None, loc]]
+ } else {
+ return [[replacement, NewlineType.None, loc]]
+ }
+ } else {
+ // replacement is an expression - process it again
+ return genExpression(replacement, context, assignment)
+ }
+ }
+
+ let prefix: string | undefined
+ if (isStaticProperty(parent) && parent.shorthand) {
+ // property shorthand like { foo }, we need to add the key since
+ // we rewrite the value
+ prefix = `${raw}: `
+ }
+
+ const type = bindingMetadata && bindingMetadata[raw]
+ if (inline) {
+ switch (type) {
+ case BindingTypes.SETUP_LET:
+ name = raw = assignment
+ ? `_isRef(${raw}) ? (${raw}.value = ${assignment}) : (${raw} = ${assignment})`
+ : unref()
+ break
+ case BindingTypes.SETUP_REF:
+ name = raw = withAssignment(`${raw}.value`)
+ break
+ case BindingTypes.SETUP_MAYBE_REF:
+ // ({ x } = y)
+ const isDestructureAssignment =
+ parent && isInDestructureAssignment(parent, parentStack || [])
+ // x = y
+ const isAssignmentLVal =
+ parent && parent.type === 'AssignmentExpression' && parent.left === id
+ // x++
+ const isUpdateArg =
+ parent && parent.type === 'UpdateExpression' && parent.argument === id
+ // const binding that may or may not be ref
+ // if it's not a ref, then assignments don't make sense -
+ // so we ignore the non-ref assignment case and generate code
+ // that assumes the value to be a ref for more efficiency
+ raw =
+ isAssignmentLVal || isUpdateArg || isDestructureAssignment
+ ? (name = `${raw}.value`)
+ : assignment
+ ? `${helper('isRef')}(${raw}) ? (${raw}.value = ${assignment}) : null`
+ : unref()
+ break
+ case BindingTypes.PROPS:
+ raw = genPropsAccessExp(raw)
+ break
+ case BindingTypes.PROPS_ALIASED:
+ raw = genPropsAccessExp(bindingMetadata.__propsAliases![raw])
+ break
+ default:
+ raw = withAssignment(raw)
+ }
+ } else {
+ if (canPrefix(raw)) {
+ if (type === BindingTypes.PROPS_ALIASED) {
+ raw = `$props['${bindingMetadata.__propsAliases![raw]}']`
+ } else {
+ raw = `${type === BindingTypes.PROPS ? '$props' : '_ctx'}.${raw}`
+ }
+ }
+ raw = withAssignment(raw)
+ }
+ return [prefix, [raw, NewlineType.None, loc, name]]
+
+ function withAssignment(s: string) {
+ return assignment ? `${s} = ${assignment}` : s
+ }
+ function unref() {
+ return `${helper('unref')}(${raw})`
+ }
+}
+
+function canPrefix(name: string) {
+ // skip whitelisted globals
+ if (isGloballyAllowed(name)) {
+ return false
+ }
+ if (
+ // special case for webpack compilation
+ name === 'require' ||
+ name === '$props' ||
+ name === '$emit' ||
+ name === '$attrs' ||
+ name === '$slots'
+ )
+ return false
+ return true
+}
+
+type DeclarationResult = {
+ ids: Record
+ frag: CodeFragment[]
+}
+type DeclarationValue = {
+ name: string
+ isIdentifier?: boolean
+ value: SimpleExpressionNode
+ rawName?: string
+ exps?: Set
+ seenCount?: number
+}
+
+export function processExpressions(
+ context: CodegenContext,
+ expressions: SimpleExpressionNode[],
+): DeclarationResult {
+ // analyze variables
+ const { seenVariable, variableToExpMap, expToVariableMap, seenIdentifier } =
+ analyzeExpressions(expressions)
+
+ // process repeated identifiers and member expressions
+ // e.g., `foo[baz]` will be transformed into `foo_baz`
+ const varDeclarations = processRepeatedVariables(
+ context,
+ seenVariable,
+ variableToExpMap,
+ expToVariableMap,
+ seenIdentifier,
+ )
+
+ // process duplicate expressions after identifier and member expression handling.
+ // e.g., `foo + bar` will be transformed into `foo_bar`
+ const expDeclarations = processRepeatedExpressions(
+ context,
+ expressions,
+ varDeclarations,
+ )
+
+ return genDeclarations([...varDeclarations, ...expDeclarations], context)
+}
+
+function analyzeExpressions(expressions: SimpleExpressionNode[]) {
+ const seenVariable: Record = Object.create(null)
+ const variableToExpMap = new Map>()
+ const expToVariableMap = new Map()
+ const seenIdentifier = new Set()
+
+ const registerVariable = (
+ name: string,
+ exp: SimpleExpressionNode,
+ isIdentifier: boolean,
+ ) => {
+ if (isIdentifier) seenIdentifier.add(name)
+ seenVariable[name] = (seenVariable[name] || 0) + 1
+ variableToExpMap.set(
+ name,
+ (variableToExpMap.get(name) || new Set()).add(exp),
+ )
+ expToVariableMap.set(exp, (expToVariableMap.get(exp) || []).concat(name))
+ }
+
+ for (const exp of expressions) {
+ if (!exp.ast) {
+ exp.ast === null && registerVariable(exp.content, exp, true)
+ continue
+ }
+
+ walk(exp.ast, {
+ enter(currentNode: Node, parent: Node | null) {
+ if (currentNode.type === 'MemberExpression') {
+ const memberExp = extractMemberExpression(
+ currentNode,
+ (name: string) => {
+ registerVariable(name, exp, true)
+ },
+ )
+ registerVariable(memberExp, exp, false)
+ return this.skip()
+ }
+
+ // skip shorthand or non-computed property keys
+ if (
+ parent &&
+ parent.type === 'ObjectProperty' &&
+ parent.key === currentNode &&
+ (parent.shorthand || !parent.computed)
+ ) {
+ return this.skip()
+ }
+
+ if (currentNode.type === 'Identifier') {
+ registerVariable(currentNode.name, exp, true)
+ }
+ },
+ })
+ }
+
+ return { seenVariable, seenIdentifier, variableToExpMap, expToVariableMap }
+}
+
+function processRepeatedVariables(
+ context: CodegenContext,
+ seenVariable: Record,
+ variableToExpMap: Map>,
+ expToVariableMap: Map,
+ seenIdentifier: Set,
+): DeclarationValue[] {
+ const declarations: DeclarationValue[] = []
+ for (const [name, exps] of variableToExpMap) {
+ if (seenVariable[name] > 1 && exps.size > 0) {
+ const isIdentifier = seenIdentifier.has(name)
+ const varName = isIdentifier ? name : genVarName(name)
+
+ // replaces all non-identifiers with the new name. if node content
+ // includes only one member expression, it will become an identifier,
+ // e.g., foo[baz] -> foo_baz.
+ // for identifiers, we don't need to replace the content - they will be
+ // replaced during context.withId(..., ids)
+ const replaceRE = new RegExp(escapeRegExp(name), 'g')
+ exps.forEach(node => {
+ if (node.ast) {
+ node.content = node.content.replace(replaceRE, varName)
+ // re-parse the expression
+ node.ast = parseExp(context, node.content)
+ }
+ })
+
+ if (
+ !declarations.some(d => d.name === varName) &&
+ (!isIdentifier || shouldDeclareVariable(name, expToVariableMap, exps))
+ ) {
+ declarations.push({
+ name: varName,
+ isIdentifier,
+ value: extend(
+ { ast: isIdentifier ? null : parseExp(context, name) },
+ createSimpleExpression(name),
+ ),
+ rawName: name,
+ exps,
+ seenCount: seenVariable[name],
+ })
+ }
+ }
+ }
+
+ return declarations
+}
+
+function shouldDeclareVariable(
+ name: string,
+ expToVariableMap: Map,
+ exps: Set,
+): boolean {
+ const vars = Array.from(exps, exp => expToVariableMap.get(exp)!)
+ // assume name equals to `foo`
+ // if each expression only references `foo`, declaration is needed
+ // to avoid reactivity tracking
+ // e.g., [[foo],[foo]]
+ if (vars.every(v => v.length === 1)) {
+ return true
+ }
+
+ // if `foo` appears multiple times in one array, declaration is needed
+ // e.g., [[foo,foo]]
+ if (vars.some(v => v.filter(e => e === name).length > 1)) {
+ return true
+ }
+
+ const first = vars[0]
+ // if arrays have different lengths, declaration is needed
+ // e.g., [[foo],[foo,bar]]
+ if (vars.some(v => v.length !== first.length)) {
+ // special case, no declaration needed if one array is a subset of the other
+ // because they will be treated as repeated expressions
+ // e.g., [[foo,bar],[foo,foo,bar]] -> const foo_bar = _ctx.foo + _ctx.bar
+ if (
+ vars.some(
+ v => v.length > first.length && v.every(e => first.includes(e)),
+ ) ||
+ vars.some(v => first.length > v.length && first.every(e => v.includes(e)))
+ ) {
+ return false
+ }
+ return true
+ }
+ // if arrays share common elements, no declaration needed
+ // because they will be treat as repeated expressions
+ // e.g., [[foo,bar],[foo,bar]] -> const foo_bar = _ctx.foo + _ctx.bar
+ if (vars.some(v => v.some(e => first.includes(e)))) {
+ return false
+ }
+
+ return true
+}
+
+function processRepeatedExpressions(
+ context: CodegenContext,
+ expressions: SimpleExpressionNode[],
+ varDeclarations: DeclarationValue[],
+): DeclarationValue[] {
+ const declarations: DeclarationValue[] = []
+ const seenExp = expressions.reduce(
+ (acc, exp) => {
+ // only handle expressions that are not identifiers
+ if (exp.ast && exp.ast.type !== 'Identifier') {
+ acc[exp.content] = (acc[exp.content] || 0) + 1
+ }
+ return acc
+ },
+ Object.create(null) as Record,
+ )
+
+ Object.entries(seenExp).forEach(([content, count]) => {
+ if (count > 1) {
+ // foo + baz -> foo_baz
+ const varName = genVarName(content)
+ if (!declarations.some(d => d.name === varName)) {
+ // if foo and baz have no other references, we don't need to declare separate variables
+ // instead of:
+ // const foo = _ctx.foo
+ // const baz = _ctx.baz
+ // const foo_baz = foo + baz
+ // we can generate:
+ // const foo_baz = _ctx.foo + _ctx.baz
+ const delVars: Record = {}
+ for (let i = varDeclarations.length - 1; i >= 0; i--) {
+ const item = varDeclarations[i]
+ if (!item.exps || !item.seenCount) continue
+
+ const shouldRemove = [...item.exps].every(
+ node => node.content === content && item.seenCount === count,
+ )
+ if (shouldRemove) {
+ delVars[item.name] = item.rawName!
+ varDeclarations.splice(i, 1)
+ }
+ }
+ const value = extend(
+ {},
+ expressions.find(exp => exp.content === content)!,
+ )
+ Object.keys(delVars).forEach(name => {
+ value.content = value.content.replace(name, delVars[name])
+ if (value.ast) value.ast = parseExp(context, value.content)
+ })
+ declarations.push({
+ name: varName,
+ value: value,
+ })
+ }
+
+ // assume content equals to `foo + baz`
+ expressions.forEach(exp => {
+ // foo + baz -> foo_baz
+ if (exp.content === content) {
+ exp.content = varName
+ // ast is no longer needed since it becomes an identifier.
+ exp.ast = null
+ }
+ // foo + foo + baz -> foo + foo_baz
+ else if (exp.content.includes(content)) {
+ exp.content = exp.content.replace(
+ new RegExp(escapeRegExp(content), 'g'),
+ varName,
+ )
+ // re-parse the expression
+ exp.ast = parseExp(context, exp.content)
+ }
+ })
+ }
+ })
+
+ return declarations
+}
+
+function genDeclarations(
+ declarations: DeclarationValue[],
+ context: CodegenContext,
+): DeclarationResult {
+ const [frag, push] = buildCodeFragment()
+ const ids: Record = Object.create(null)
+
+ // process identifiers first as expressions may rely on them
+ declarations.forEach(({ name, isIdentifier, value }) => {
+ if (isIdentifier) {
+ const varName = (ids[name] = `_${name}`)
+ push(`const ${varName} = `, ...genExpression(value, context), NEWLINE)
+ }
+ })
+
+ // process expressions
+ declarations.forEach(({ name, isIdentifier, value }) => {
+ if (!isIdentifier) {
+ const varName = (ids[name] = `_${name}`)
+ push(
+ `const ${varName} = `,
+ ...context.withId(() => genExpression(value, context), ids),
+ NEWLINE,
+ )
+ }
+ })
+
+ return { ids, frag }
+}
+
+function escapeRegExp(string: string) {
+ return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function parseExp(context: CodegenContext, content: string): Node {
+ const plugins = context.options.expressionPlugins
+ const options: ParserOptions = {
+ plugins: plugins ? [...plugins, 'typescript'] : ['typescript'],
+ }
+ return parseExpression(`(${content})`, options)
+}
+
+function genVarName(exp: string): string {
+ return `${exp
+ .replace(/[^a-zA-Z0-9]/g, '_')
+ .replace(/_+/g, '_')
+ .replace(/_+$/, '')}`
+}
+
+function extractMemberExpression(
+ exp: Node,
+ onIdentifier: (name: string) => void,
+): string {
+ if (!exp) return ''
+ switch (exp.type) {
+ case 'Identifier': // foo[bar]
+ onIdentifier(exp.name)
+ return exp.name
+ case 'StringLiteral': // foo['bar']
+ return exp.extra ? (exp.extra.raw as string) : exp.value
+ case 'NumericLiteral': // foo[0]
+ return exp.value.toString()
+ case 'BinaryExpression': // foo[bar + 1]
+ return `${extractMemberExpression(exp.left, onIdentifier)} ${exp.operator} ${extractMemberExpression(exp.right, onIdentifier)}`
+ case 'CallExpression': // foo[bar(baz)]
+ return `${extractMemberExpression(exp.callee, onIdentifier)}(${exp.arguments.map(arg => extractMemberExpression(arg, onIdentifier)).join(', ')})`
+ case 'MemberExpression': // foo[bar.baz]
+ const object = extractMemberExpression(exp.object, onIdentifier)
+ const prop = exp.computed
+ ? `[${extractMemberExpression(exp.property, onIdentifier)}]`
+ : `.${extractMemberExpression(exp.property, NOOP)}`
+ return `${object}${prop}`
+ default:
+ return ''
+ }
+}
diff --git a/packages/compiler-vapor/src/generators/for.ts b/packages/compiler-vapor/src/generators/for.ts
new file mode 100644
index 00000000000..fbb72c61d47
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/for.ts
@@ -0,0 +1,236 @@
+import {
+ type SimpleExpressionNode,
+ createSimpleExpression,
+ walkIdentifiers,
+} from '@vue/compiler-dom'
+import { genBlock } from './block'
+import { genExpression } from './expression'
+import type { CodegenContext } from '../generate'
+import type { ForIRNode } from '../ir'
+import { type CodeFragment, NEWLINE, genCall, genMulti } from './utils'
+import type { Identifier } from '@babel/types'
+import { parseExpression } from '@babel/parser'
+import { VaporVForFlags } from '../../../shared/src/vaporFlags'
+
+export function genFor(
+ oper: ForIRNode,
+ context: CodegenContext,
+): CodeFragment[] {
+ const { helper } = context
+ const {
+ source,
+ value,
+ key,
+ index,
+ render,
+ keyProp,
+ once,
+ id,
+ component,
+ onlyChild,
+ } = oper
+
+ let rawValue: string | null = null
+ const rawKey = key && key.content
+ const rawIndex = index && index.content
+
+ const sourceExpr = ['() => (', ...genExpression(source, context), ')']
+ const idToPathMap = parseValueDestructure()
+
+ const [depth, exitScope] = context.enterScope()
+ const idMap: Record = {}
+
+ const itemVar = `_for_item${depth}`
+ idMap[itemVar] = null
+
+ idToPathMap.forEach((pathInfo, id) => {
+ let path = `${itemVar}.value${pathInfo ? pathInfo.path : ''}`
+ if (pathInfo) {
+ if (pathInfo.helper) {
+ idMap[pathInfo.helper] = null
+ path = `${pathInfo.helper}(${path}, ${pathInfo.helperArgs})`
+ }
+ if (pathInfo.dynamic) {
+ const node = (idMap[id] = createSimpleExpression(path))
+ const plugins = context.options.expressionPlugins
+ node.ast = parseExpression(`(${path})`, {
+ plugins: plugins ? [...plugins, 'typescript'] : ['typescript'],
+ })
+ } else {
+ idMap[id] = path
+ }
+ } else {
+ idMap[id] = path
+ }
+ })
+
+ const args = [itemVar]
+ if (rawKey) {
+ const keyVar = `_for_key${depth}`
+ args.push(`, ${keyVar}`)
+ idMap[rawKey] = `${keyVar}.value`
+ idMap[keyVar] = null
+ }
+ if (rawIndex) {
+ const indexVar = `_for_index${depth}`
+ args.push(`, ${indexVar}`)
+ idMap[rawIndex] = `${indexVar}.value`
+ idMap[indexVar] = null
+ }
+
+ const blockFn = context.withId(() => genBlock(render, context, args), idMap)
+ exitScope()
+
+ let flags = 0
+ if (onlyChild) {
+ flags |= VaporVForFlags.FAST_REMOVE
+ }
+ if (component) {
+ flags |= VaporVForFlags.IS_COMPONENT
+ }
+ if (once) {
+ flags |= VaporVForFlags.ONCE
+ }
+
+ return [
+ NEWLINE,
+ `const n${id} = `,
+ ...genCall(
+ helper('createFor'),
+ sourceExpr,
+ blockFn,
+ genCallback(keyProp),
+ flags ? String(flags) : undefined,
+ // todo: hydrationNode
+ ),
+ ]
+
+ // construct a id -> accessor path map.
+ // e.g. `{ x: { y: [z] }}` -> `Map{ 'z' => '.x.y[0]' }`
+ function parseValueDestructure() {
+ const map = new Map<
+ string,
+ {
+ path: string
+ dynamic: boolean
+ helper?: string
+ helperArgs?: string
+ } | null
+ >()
+ if (value) {
+ rawValue = value && value.content
+ if (value.ast) {
+ walkIdentifiers(
+ value.ast,
+ (id, _, parentStack, ___, isLocal) => {
+ if (isLocal) {
+ let path = ''
+ let isDynamic = false
+ let helper
+ let helperArgs
+ for (let i = 0; i < parentStack.length; i++) {
+ const parent = parentStack[i]
+ const child = parentStack[i + 1] || id
+
+ if (
+ parent.type === 'ObjectProperty' &&
+ parent.value === child
+ ) {
+ if (parent.key.type === 'StringLiteral') {
+ path += `[${JSON.stringify(parent.key.value)}]`
+ } else if (parent.computed) {
+ isDynamic = true
+ path += `[${value.content.slice(
+ parent.key.start! - 1,
+ parent.key.end! - 1,
+ )}]`
+ } else {
+ // non-computed, can only be identifier
+ path += `.${(parent.key as Identifier).name}`
+ }
+ } else if (parent.type === 'ArrayPattern') {
+ const index = parent.elements.indexOf(child as any)
+ if (child.type === 'RestElement') {
+ path += `.slice(${index})`
+ } else {
+ path += `[${index}]`
+ }
+ } else if (
+ parent.type === 'ObjectPattern' &&
+ child.type === 'RestElement'
+ ) {
+ helper = context.helper('getRestElement')
+ helperArgs =
+ '[' +
+ parent.properties
+ .filter(p => p.type === 'ObjectProperty')
+ .map(p => {
+ if (p.key.type === 'StringLiteral') {
+ return JSON.stringify(p.key.value)
+ } else if (p.computed) {
+ isDynamic = true
+ return value.content.slice(
+ p.key.start! - 1,
+ p.key.end! - 1,
+ )
+ } else {
+ return JSON.stringify((p.key as Identifier).name)
+ }
+ })
+ .join(', ') +
+ ']'
+ }
+
+ // default value
+ if (
+ child.type === 'AssignmentPattern' &&
+ (parent.type === 'ObjectProperty' ||
+ parent.type === 'ArrayPattern')
+ ) {
+ isDynamic = true
+ helper = context.helper('getDefaultValue')
+ helperArgs = value.content.slice(
+ child.right.start! - 1,
+ child.right.end! - 1,
+ )
+ }
+ }
+ map.set(id.name, { path, dynamic: isDynamic, helper, helperArgs })
+ }
+ },
+ true,
+ )
+ } else {
+ map.set(rawValue, null)
+ }
+ }
+ return map
+ }
+
+ function genCallback(expr: SimpleExpressionNode | undefined) {
+ if (!expr) return false
+ const res = context.withId(
+ () => genExpression(expr, context),
+ genSimpleIdMap(),
+ )
+ return [
+ ...genMulti(
+ ['(', ')', ', '],
+ rawValue ? rawValue : rawKey || rawIndex ? '_' : undefined,
+ rawKey ? rawKey : rawIndex ? '__' : undefined,
+ rawIndex,
+ ),
+ ' => (',
+ ...res,
+ ')',
+ ]
+ }
+
+ function genSimpleIdMap() {
+ const idMap: Record = {}
+ if (rawKey) idMap[rawKey] = null
+ if (rawIndex) idMap[rawIndex] = null
+ idToPathMap.forEach((_, id) => (idMap[id] = null))
+ return idMap
+ }
+}
diff --git a/packages/compiler-vapor/src/generators/html.ts b/packages/compiler-vapor/src/generators/html.ts
new file mode 100644
index 00000000000..72af699dd03
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/html.ts
@@ -0,0 +1,16 @@
+import type { CodegenContext } from '../generate'
+import type { SetHtmlIRNode } from '../ir'
+import { genExpression } from './expression'
+import { type CodeFragment, NEWLINE, genCall } from './utils'
+
+export function genSetHtml(
+ oper: SetHtmlIRNode,
+ context: CodegenContext,
+): CodeFragment[] {
+ const { helper } = context
+ const { value, element } = oper
+ return [
+ NEWLINE,
+ ...genCall(helper('setHtml'), `n${element}`, genExpression(value, context)),
+ ]
+}
diff --git a/packages/compiler-vapor/src/generators/if.ts b/packages/compiler-vapor/src/generators/if.ts
new file mode 100644
index 00000000000..f4a3e599fab
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/if.ts
@@ -0,0 +1,45 @@
+import type { CodegenContext } from '../generate'
+import { IRNodeTypes, type IfIRNode } from '../ir'
+import { genBlock } from './block'
+import { genExpression } from './expression'
+import { type CodeFragment, NEWLINE, buildCodeFragment, genCall } from './utils'
+
+export function genIf(
+ oper: IfIRNode,
+ context: CodegenContext,
+ isNested = false,
+): CodeFragment[] {
+ const { helper } = context
+ const { condition, positive, negative, once } = oper
+ const [frag, push] = buildCodeFragment()
+
+ const conditionExpr: CodeFragment[] = [
+ '() => (',
+ ...genExpression(condition, context),
+ ')',
+ ]
+
+ let positiveArg = genBlock(positive, context)
+ let negativeArg: false | CodeFragment[] = false
+
+ if (negative) {
+ if (negative.type === IRNodeTypes.BLOCK) {
+ negativeArg = genBlock(negative, context)
+ } else {
+ negativeArg = ['() => ', ...genIf(negative!, context, true)]
+ }
+ }
+
+ if (!isNested) push(NEWLINE, `const n${oper.id} = `)
+ push(
+ ...genCall(
+ helper('createIf'),
+ conditionExpr,
+ positiveArg,
+ negativeArg,
+ once && 'true',
+ ),
+ )
+
+ return frag
+}
diff --git a/packages/compiler-vapor/src/generators/operation.ts b/packages/compiler-vapor/src/generators/operation.ts
new file mode 100644
index 00000000000..4247bc6feca
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/operation.ts
@@ -0,0 +1,171 @@
+import {
+ type IREffect,
+ IRNodeTypes,
+ type InsertionStateTypes,
+ type OperationNode,
+ isBlockOperation,
+} from '../ir'
+import type { CodegenContext } from '../generate'
+import { genInsertNode, genPrependNode } from './dom'
+import { genSetDynamicEvents, genSetEvent } from './event'
+import { genFor } from './for'
+import { genSetHtml } from './html'
+import { genIf } from './if'
+import { genDynamicProps, genSetProp } from './prop'
+import { genDeclareOldRef, genSetTemplateRef } from './templateRef'
+import { genGetTextChild, genSetText } from './text'
+import {
+ type CodeFragment,
+ INDENT_END,
+ INDENT_START,
+ NEWLINE,
+ buildCodeFragment,
+ genCall,
+} from './utils'
+import { genCreateComponent } from './component'
+import { genSlotOutlet } from './slotOutlet'
+import { processExpressions } from './expression'
+import { genBuiltinDirective } from './directive'
+
+export function genOperations(
+ opers: OperationNode[],
+ context: CodegenContext,
+): CodeFragment[] {
+ const [frag, push] = buildCodeFragment()
+ for (const operation of opers) {
+ push(...genOperationWithInsertionState(operation, context))
+ }
+ return frag
+}
+
+export function genOperationWithInsertionState(
+ oper: OperationNode,
+ context: CodegenContext,
+): CodeFragment[] {
+ const [frag, push] = buildCodeFragment()
+ if (isBlockOperation(oper) && oper.parent) {
+ push(...genInsertionstate(oper, context))
+ }
+ push(...genOperation(oper, context))
+ return frag
+}
+
+export function genOperation(
+ oper: OperationNode,
+ context: CodegenContext,
+): CodeFragment[] {
+ switch (oper.type) {
+ case IRNodeTypes.SET_PROP:
+ return genSetProp(oper, context)
+ case IRNodeTypes.SET_DYNAMIC_PROPS:
+ return genDynamicProps(oper, context)
+ case IRNodeTypes.SET_TEXT:
+ return genSetText(oper, context)
+ case IRNodeTypes.SET_EVENT:
+ return genSetEvent(oper, context)
+ case IRNodeTypes.SET_DYNAMIC_EVENTS:
+ return genSetDynamicEvents(oper, context)
+ case IRNodeTypes.SET_HTML:
+ return genSetHtml(oper, context)
+ case IRNodeTypes.SET_TEMPLATE_REF:
+ return genSetTemplateRef(oper, context)
+ case IRNodeTypes.INSERT_NODE:
+ return genInsertNode(oper, context)
+ case IRNodeTypes.PREPEND_NODE:
+ return genPrependNode(oper, context)
+ case IRNodeTypes.IF:
+ return genIf(oper, context)
+ case IRNodeTypes.FOR:
+ return genFor(oper, context)
+ case IRNodeTypes.CREATE_COMPONENT_NODE:
+ return genCreateComponent(oper, context)
+ case IRNodeTypes.DECLARE_OLD_REF:
+ return genDeclareOldRef(oper)
+ case IRNodeTypes.SLOT_OUTLET_NODE:
+ return genSlotOutlet(oper, context)
+ case IRNodeTypes.DIRECTIVE:
+ return genBuiltinDirective(oper, context)
+ case IRNodeTypes.GET_TEXT_CHILD:
+ return genGetTextChild(oper, context)
+ default:
+ const exhaustiveCheck: never = oper
+ throw new Error(
+ `Unhandled operation type in genOperation: ${exhaustiveCheck}`,
+ )
+ }
+}
+
+export function genEffects(
+ effects: IREffect[],
+ context: CodegenContext,
+): CodeFragment[] {
+ const {
+ helper,
+ block: { expressions },
+ } = context
+ const [frag, push, unshift] = buildCodeFragment()
+ let operationsCount = 0
+ const { ids, frag: declarationFrags } = processExpressions(
+ context,
+ expressions,
+ )
+ push(...declarationFrags)
+ for (let i = 0; i < effects.length; i++) {
+ const effect = effects[i]
+ operationsCount += effect.operations.length
+ const frags = context.withId(() => genEffect(effect, context), ids)
+ i > 0 && push(NEWLINE)
+ if (frag[frag.length - 1] === ')' && frags[0] === '(') {
+ push(';')
+ }
+ push(...frags)
+ }
+
+ const newLineCount = frag.filter(frag => frag === NEWLINE).length
+ if (newLineCount > 1 || operationsCount > 1 || declarationFrags.length > 0) {
+ unshift(`{`, INDENT_START, NEWLINE)
+ push(INDENT_END, NEWLINE, '}')
+ }
+
+ if (effects.length) {
+ unshift(NEWLINE, `${helper('renderEffect')}(() => `)
+ push(`)`)
+ }
+
+ return frag
+}
+
+export function genEffect(
+ { operations }: IREffect,
+ context: CodegenContext,
+): CodeFragment[] {
+ const [frag, push] = buildCodeFragment()
+ const operationsExps = genOperations(operations, context)
+ const newlineCount = operationsExps.filter(frag => frag === NEWLINE).length
+
+ if (newlineCount > 1) {
+ push(...operationsExps)
+ } else {
+ push(...operationsExps.filter(frag => frag !== NEWLINE))
+ }
+
+ return frag
+}
+
+function genInsertionstate(
+ operation: InsertionStateTypes,
+ context: CodegenContext,
+): CodeFragment[] {
+ return [
+ NEWLINE,
+ ...genCall(
+ context.helper('setInsertionState'),
+ `n${operation.parent}`,
+ operation.anchor == null
+ ? undefined
+ : operation.anchor === -1 // -1 indicates prepend
+ ? `0` // runtime anchor value for prepend
+ : `n${operation.anchor}`,
+ ),
+ ]
+}
diff --git a/packages/compiler-vapor/src/generators/prop.ts b/packages/compiler-vapor/src/generators/prop.ts
new file mode 100644
index 00000000000..62fca087ed7
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/prop.ts
@@ -0,0 +1,225 @@
+import {
+ NewlineType,
+ type SimpleExpressionNode,
+ isSimpleIdentifier,
+} from '@vue/compiler-core'
+import type { CodegenContext } from '../generate'
+import {
+ IRDynamicPropsKind,
+ type IRProp,
+ type SetDynamicPropsIRNode,
+ type SetPropIRNode,
+ type VaporHelper,
+} from '../ir'
+import { genExpression } from './expression'
+import {
+ type CodeFragment,
+ DELIMITERS_ARRAY,
+ DELIMITERS_OBJECT,
+ NEWLINE,
+ genCall,
+ genMulti,
+} from './utils'
+import {
+ canSetValueDirectly,
+ capitalize,
+ isSVGTag,
+ shouldSetAsAttr,
+ toHandlerKey,
+} from '@vue/shared'
+
+export type HelperConfig = {
+ name: VaporHelper
+ needKey?: boolean
+ acceptRoot?: boolean
+}
+
+// this should be kept in sync with runtime-vapor/src/dom/prop.ts
+const helpers = {
+ setText: { name: 'setText' },
+ setHtml: { name: 'setHtml' },
+ setClass: { name: 'setClass' },
+ setStyle: { name: 'setStyle' },
+ setValue: { name: 'setValue' },
+ setAttr: { name: 'setAttr', needKey: true },
+ setProp: { name: 'setProp', needKey: true },
+ setDOMProp: { name: 'setDOMProp', needKey: true },
+ setDynamicProps: { name: 'setDynamicProps' },
+} as const satisfies Partial>
+
+// only the static key prop will reach here
+export function genSetProp(
+ oper: SetPropIRNode,
+ context: CodegenContext,
+): CodeFragment[] {
+ const { helper } = context
+ const {
+ prop: { key, values, modifier },
+ tag,
+ } = oper
+ const resolvedHelper = getRuntimeHelper(tag, key.content, modifier)
+ const propValue = genPropValue(values, context)
+ return [
+ NEWLINE,
+ ...genCall(
+ [helper(resolvedHelper.name), null],
+ `n${oper.element}`,
+ resolvedHelper.needKey ? genExpression(key, context) : false,
+ propValue,
+ ),
+ ]
+}
+
+// dynamic key props and v-bind="{}" will reach here
+export function genDynamicProps(
+ oper: SetDynamicPropsIRNode,
+ context: CodegenContext,
+): CodeFragment[] {
+ const { helper } = context
+ const values = oper.props.map(props =>
+ Array.isArray(props)
+ ? genLiteralObjectProps(props, context) // static and dynamic arg props
+ : props.kind === IRDynamicPropsKind.ATTRIBUTE
+ ? genLiteralObjectProps([props], context) // dynamic arg props
+ : genExpression(props.value, context),
+ ) // v-bind=""
+ return [
+ NEWLINE,
+ ...genCall(
+ helper('setDynamicProps'),
+ `n${oper.element}`,
+ genMulti(DELIMITERS_ARRAY, ...values),
+ oper.root && 'true',
+ ),
+ ]
+}
+
+function genLiteralObjectProps(
+ props: IRProp[],
+ context: CodegenContext,
+): CodeFragment[] {
+ return genMulti(
+ DELIMITERS_OBJECT,
+ ...props.map(prop => [
+ ...genPropKey(prop, context),
+ `: `,
+ ...genPropValue(prop.values, context),
+ ]),
+ )
+}
+
+export function genPropKey(
+ { key: node, modifier, runtimeCamelize, handler, handlerModifiers }: IRProp,
+ context: CodegenContext,
+): CodeFragment[] {
+ const { helper } = context
+
+ const handlerModifierPostfix = handlerModifiers
+ ? handlerModifiers.map(capitalize).join('')
+ : ''
+ // static arg was transformed by v-bind transformer
+ if (node.isStatic) {
+ // only quote keys if necessary
+ const keyName =
+ (handler ? toHandlerKey(node.content) : node.content) +
+ handlerModifierPostfix
+ return [
+ [
+ isSimpleIdentifier(keyName) ? keyName : JSON.stringify(keyName),
+ NewlineType.None,
+ node.loc,
+ ],
+ ]
+ }
+
+ let key = genExpression(node, context)
+ if (runtimeCamelize) {
+ key = genCall(helper('camelize'), key)
+ }
+ if (handler) {
+ key = genCall(helper('toHandlerKey'), key)
+ }
+ return [
+ '[',
+ modifier && `${JSON.stringify(modifier)} + `,
+ ...key,
+ handlerModifierPostfix
+ ? ` + ${JSON.stringify(handlerModifierPostfix)}`
+ : undefined,
+ ']',
+ ]
+}
+
+export function genPropValue(
+ values: SimpleExpressionNode[],
+ context: CodegenContext,
+): CodeFragment[] {
+ if (values.length === 1) {
+ return genExpression(values[0], context)
+ }
+ return genMulti(
+ DELIMITERS_ARRAY,
+ ...values.map(expr => genExpression(expr, context)),
+ )
+}
+
+function getRuntimeHelper(
+ tag: string,
+ key: string,
+ modifier: '.' | '^' | undefined,
+): HelperConfig {
+ const tagName = tag.toUpperCase()
+ if (modifier) {
+ if (modifier === '.') {
+ return getSpecialHelper(key, tagName) || helpers.setDOMProp
+ } else {
+ return helpers.setAttr
+ }
+ }
+
+ // 1. special handling for value / style / class / textContent / innerHTML
+ const helper = getSpecialHelper(key, tagName)
+ if (helper) {
+ return helper
+ }
+
+ // 2. Aria DOM properties shared between all Elements in
+ // https://developer.mozilla.org/en-US/docs/Web/API/Element
+ if (/aria[A-Z]/.test(key)) {
+ return helpers.setDOMProp
+ }
+
+ // 3. SVG: always attribute
+ if (isSVGTag(tag)) {
+ // TODO pass svg flag
+ return helpers.setAttr
+ }
+
+ // 4. respect shouldSetAsAttr used in vdom and setDynamicProp for consistency
+ // also fast path for presence of hyphen (covers data-* and aria-*)
+ if (shouldSetAsAttr(tagName, key) || key.includes('-')) {
+ return helpers.setAttr
+ }
+
+ // 5. Fallback to setDOMProp, which has a runtime `key in el` check to
+ // ensure behavior consistency with vdom
+ return helpers.setProp
+}
+
+function getSpecialHelper(
+ keyName: string,
+ tagName: string,
+): HelperConfig | undefined {
+ // special case for 'value' property
+ if (keyName === 'value' && canSetValueDirectly(tagName)) {
+ return helpers.setValue
+ } else if (keyName === 'class') {
+ return helpers.setClass
+ } else if (keyName === 'style') {
+ return helpers.setStyle
+ } else if (keyName === 'innerHTML') {
+ return helpers.setHtml
+ } else if (keyName === 'textContent') {
+ return helpers.setText
+ }
+}
diff --git a/packages/compiler-vapor/src/generators/slotOutlet.ts b/packages/compiler-vapor/src/generators/slotOutlet.ts
new file mode 100644
index 00000000000..3221cbbd2c7
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/slotOutlet.ts
@@ -0,0 +1,37 @@
+import type { CodegenContext } from '../generate'
+import type { SlotOutletIRNode } from '../ir'
+import { genBlock } from './block'
+import { genExpression } from './expression'
+import { type CodeFragment, NEWLINE, buildCodeFragment, genCall } from './utils'
+import { genRawProps } from './component'
+
+export function genSlotOutlet(
+ oper: SlotOutletIRNode,
+ context: CodegenContext,
+): CodeFragment[] {
+ const { helper } = context
+ const { id, name, fallback } = oper
+ const [frag, push] = buildCodeFragment()
+
+ const nameExpr = name.isStatic
+ ? genExpression(name, context)
+ : ['() => (', ...genExpression(name, context), ')']
+
+ let fallbackArg: CodeFragment[] | undefined
+ if (fallback) {
+ fallbackArg = genBlock(fallback, context)
+ }
+
+ push(
+ NEWLINE,
+ `const n${id} = `,
+ ...genCall(
+ helper('createSlot'),
+ nameExpr,
+ genRawProps(oper.props, context) || 'null',
+ fallbackArg,
+ ),
+ )
+
+ return frag
+}
diff --git a/packages/compiler-vapor/src/generators/template.ts b/packages/compiler-vapor/src/generators/template.ts
new file mode 100644
index 00000000000..356c1ccbe15
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/template.ts
@@ -0,0 +1,117 @@
+import type { CodegenContext } from '../generate'
+import { DynamicFlag, type IRDynamicInfo } from '../ir'
+import { genDirectivesForElement } from './directive'
+import { genOperationWithInsertionState } from './operation'
+import { type CodeFragment, NEWLINE, buildCodeFragment, genCall } from './utils'
+
+export function genTemplates(
+ templates: string[],
+ rootIndex: number | undefined,
+ { helper }: CodegenContext,
+): string {
+ return templates
+ .map(
+ (template, i) =>
+ `const t${i} = ${helper('template')}(${JSON.stringify(
+ template,
+ )}${i === rootIndex ? ', true' : ''})\n`,
+ )
+ .join('')
+}
+
+export function genSelf(
+ dynamic: IRDynamicInfo,
+ context: CodegenContext,
+): CodeFragment[] {
+ const [frag, push] = buildCodeFragment()
+ const { id, template, operation } = dynamic
+
+ if (id !== undefined && template !== undefined) {
+ push(NEWLINE, `const n${id} = t${template}()`)
+ push(...genDirectivesForElement(id, context))
+ }
+
+ if (operation) {
+ push(...genOperationWithInsertionState(operation, context))
+ }
+
+ return frag
+}
+
+export function genChildren(
+ dynamic: IRDynamicInfo,
+ context: CodegenContext,
+ from: string = `n${dynamic.id}`,
+): CodeFragment[] {
+ const { helper } = context
+ const [frag, push] = buildCodeFragment()
+ const { children } = dynamic
+
+ let offset = 0
+ let prev: [variable: string, elementIndex: number] | undefined
+ const childrenToGen: [IRDynamicInfo, string][] = []
+
+ for (const [index, child] of children.entries()) {
+ if (child.flags & DynamicFlag.NON_TEMPLATE) {
+ offset--
+ }
+
+ const id =
+ child.flags & DynamicFlag.REFERENCED
+ ? child.flags & DynamicFlag.INSERT
+ ? child.anchor
+ : child.id
+ : undefined
+
+ if (id === undefined && !child.hasDynamicChild) {
+ push(...genSelf(child, context))
+ continue
+ }
+
+ const elementIndex = Number(index) + offset
+ // p for "placeholder" variables that are meant for possible reuse by
+ // other access paths
+ const variable = id === undefined ? `p${context.block.tempId++}` : `n${id}`
+ push(NEWLINE, `const ${variable} = `)
+
+ if (prev) {
+ if (elementIndex - prev[1] === 1) {
+ push(...genCall(helper('next'), prev[0]))
+ } else {
+ push(...genCall(helper('nthChild'), from, String(elementIndex)))
+ }
+ } else {
+ if (elementIndex === 0) {
+ push(...genCall(helper('child'), from))
+ } else {
+ // check if there's a node that we can reuse from
+ let init = genCall(helper('child'), from)
+ if (elementIndex === 1) {
+ init = genCall(helper('next'), init)
+ } else if (elementIndex > 1) {
+ init = genCall(helper('nthChild'), from, String(elementIndex))
+ }
+ push(...init)
+ }
+ }
+
+ if (id === child.anchor) {
+ push(...genSelf(child, context))
+ }
+
+ if (id !== undefined) {
+ push(...genDirectivesForElement(id, context))
+ }
+
+ prev = [variable, elementIndex]
+ childrenToGen.push([child, variable])
+ }
+
+ if (childrenToGen.length) {
+ for (const [child, from] of childrenToGen) {
+ push(...genChildren(child, context, from))
+ }
+ }
+
+ return frag
+}
diff --git a/packages/compiler-vapor/src/generators/templateRef.ts b/packages/compiler-vapor/src/generators/templateRef.ts
new file mode 100644
index 00000000000..a4d6d546ed3
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/templateRef.ts
@@ -0,0 +1,27 @@
+import { genExpression } from './expression'
+import type { CodegenContext } from '../generate'
+import type { DeclareOldRefIRNode, SetTemplateRefIRNode } from '../ir'
+import { type CodeFragment, NEWLINE, genCall } from './utils'
+
+export const setTemplateRefIdent = `_setTemplateRef`
+
+export function genSetTemplateRef(
+ oper: SetTemplateRefIRNode,
+ context: CodegenContext,
+): CodeFragment[] {
+ return [
+ NEWLINE,
+ oper.effect && `r${oper.element} = `,
+ ...genCall(
+ setTemplateRefIdent, // will be generated in root scope
+ `n${oper.element}`,
+ genExpression(oper.value, context),
+ oper.effect ? `r${oper.element}` : oper.refFor ? 'void 0' : undefined,
+ oper.refFor && 'true',
+ ),
+ ]
+}
+
+export function genDeclareOldRef(oper: DeclareOldRefIRNode): CodeFragment[] {
+ return [NEWLINE, `let r${oper.id}`]
+}
diff --git a/packages/compiler-vapor/src/generators/text.ts b/packages/compiler-vapor/src/generators/text.ts
new file mode 100644
index 00000000000..89e3167c664
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/text.ts
@@ -0,0 +1,47 @@
+import type { SimpleExpressionNode } from '@vue/compiler-dom'
+import type { CodegenContext } from '../generate'
+import type { GetTextChildIRNode, SetTextIRNode } from '../ir'
+import { getLiteralExpressionValue } from '../utils'
+import { genExpression } from './expression'
+import { type CodeFragment, NEWLINE, genCall } from './utils'
+
+export function genSetText(
+ oper: SetTextIRNode,
+ context: CodegenContext,
+): CodeFragment[] {
+ const { helper } = context
+ const { element, values, generated, jsx } = oper
+ const texts = combineValues(values, context, jsx)
+ return [
+ NEWLINE,
+ ...genCall(helper('setText'), `${generated ? 'x' : 'n'}${element}`, texts),
+ ]
+}
+
+function combineValues(
+ values: SimpleExpressionNode[],
+ context: CodegenContext,
+ jsx?: boolean,
+): CodeFragment[] {
+ return values.flatMap((value, i) => {
+ let exp = genExpression(value, context)
+ if (!jsx && getLiteralExpressionValue(value) == null) {
+ // dynamic, wrap with toDisplayString
+ exp = genCall(context.helper('toDisplayString'), exp)
+ }
+ if (i > 0) {
+ exp.unshift(jsx ? ', ' : ' + ')
+ }
+ return exp
+ })
+}
+
+export function genGetTextChild(
+ oper: GetTextChildIRNode,
+ context: CodegenContext,
+): CodeFragment[] {
+ return [
+ NEWLINE,
+ `const x${oper.parent} = ${context.helper('child')}(n${oper.parent})`,
+ ]
+}
diff --git a/packages/compiler-vapor/src/generators/utils.ts b/packages/compiler-vapor/src/generators/utils.ts
new file mode 100644
index 00000000000..904b3dc87ca
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/utils.ts
@@ -0,0 +1,204 @@
+import { SourceMapGenerator } from 'source-map-js'
+import {
+ type CodegenSourceMapGenerator,
+ NewlineType,
+ type Position,
+ type SourceLocation,
+ advancePositionWithMutation,
+ locStub,
+} from '@vue/compiler-dom'
+import { isArray, isString } from '@vue/shared'
+import type { CodegenContext } from '../generate'
+
+export const NEWLINE: unique symbol = Symbol(__DEV__ ? `newline` : ``)
+/** increase offset but don't push actual code */
+export const LF: unique symbol = Symbol(__DEV__ ? `line feed` : ``)
+export const INDENT_START: unique symbol = Symbol(__DEV__ ? `indent start` : ``)
+export const INDENT_END: unique symbol = Symbol(__DEV__ ? `indent end` : ``)
+
+type FalsyValue = false | null | undefined
+export type CodeFragment =
+ | typeof NEWLINE
+ | typeof LF
+ | typeof INDENT_START
+ | typeof INDENT_END
+ | string
+ | [code: string, newlineIndex?: number, loc?: SourceLocation, name?: string]
+ | FalsyValue
+export type CodeFragments = Exclude | CodeFragment[]
+
+export function buildCodeFragment(
+ ...frag: CodeFragment[]
+): [
+ CodeFragment[],
+ (...items: CodeFragment[]) => number,
+ (...items: CodeFragment[]) => number,
+] {
+ const push = frag.push.bind(frag)
+ const unshift = frag.unshift.bind(frag)
+ return [frag, push, unshift]
+}
+
+export type CodeFragmentDelimiters = [
+ left: CodeFragments,
+ right: CodeFragments,
+ delimiter: CodeFragments,
+ placeholder?: CodeFragments,
+]
+
+export function genMulti(
+ [left, right, seg, placeholder]: CodeFragmentDelimiters,
+ ...frags: CodeFragments[]
+): CodeFragment[] {
+ if (placeholder) {
+ while (frags.length > 0 && !frags[frags.length - 1]) {
+ frags.pop()
+ }
+ frags = frags.map(frag => frag || placeholder)
+ } else {
+ frags = frags.filter(Boolean)
+ }
+
+ const frag: CodeFragment[] = []
+ push(left)
+ for (let [i, fn] of (
+ frags as Array>
+ ).entries()) {
+ push(fn)
+ if (i < frags.length - 1) push(seg)
+ }
+ push(right)
+ return frag
+
+ function push(fn: CodeFragments) {
+ if (!isArray(fn)) fn = [fn]
+ frag.push(...fn)
+ }
+}
+export const DELIMITERS_ARRAY: CodeFragmentDelimiters = ['[', ']', ', ']
+export const DELIMITERS_ARRAY_NEWLINE: CodeFragmentDelimiters = [
+ ['[', INDENT_START, NEWLINE],
+ [INDENT_END, NEWLINE, ']'],
+ [', ', NEWLINE],
+]
+export const DELIMITERS_OBJECT: CodeFragmentDelimiters = ['{ ', ' }', ', ']
+export const DELIMITERS_OBJECT_NEWLINE: CodeFragmentDelimiters = [
+ ['{', INDENT_START, NEWLINE],
+ [INDENT_END, NEWLINE, '}'],
+ [', ', NEWLINE],
+]
+
+export function genCall(
+ name: string | [name: string, placeholder?: CodeFragments],
+ ...frags: CodeFragments[]
+): CodeFragment[] {
+ const hasPlaceholder = isArray(name)
+ const fnName = hasPlaceholder ? name[0] : name
+ const placeholder = hasPlaceholder ? name[1] : 'null'
+ return [fnName, ...genMulti(['(', ')', ', ', placeholder], ...frags)]
+}
+
+export function codeFragmentToString(
+ code: CodeFragment[],
+ context: CodegenContext,
+): [code: string, map: CodegenSourceMapGenerator | undefined] {
+ const {
+ options: { filename, sourceMap },
+ } = context
+
+ let map: CodegenSourceMapGenerator | undefined
+ if (sourceMap) {
+ // lazy require source-map implementation, only in non-browser builds
+ map = new SourceMapGenerator() as unknown as CodegenSourceMapGenerator
+ map.setSourceContent(filename, context.ir.source)
+ map._sources.add(filename)
+ }
+
+ let codegen = ''
+ const pos = { line: 1, column: 1, offset: 0 }
+ let indentLevel = 0
+
+ for (let frag of code) {
+ if (!frag) continue
+
+ if (frag === NEWLINE) {
+ frag = [`\n${` `.repeat(indentLevel)}`, NewlineType.Start]
+ } else if (frag === INDENT_START) {
+ indentLevel++
+ continue
+ } else if (frag === INDENT_END) {
+ indentLevel--
+ continue
+ } else if (frag === LF) {
+ pos.line++
+ pos.column = 0
+ pos.offset++
+ continue
+ }
+
+ if (isString(frag)) frag = [frag]
+
+ let [code, newlineIndex = NewlineType.None, loc, name] = frag
+ codegen += code
+
+ if (map) {
+ if (loc) addMapping(loc.start, name)
+ if (newlineIndex === NewlineType.Unknown) {
+ // multiple newlines, full iteration
+ advancePositionWithMutation(pos, code)
+ } else {
+ // fast paths
+ pos.offset += code.length
+ if (newlineIndex === NewlineType.None) {
+ // no newlines; fast path to avoid newline detection
+ if (__TEST__ && code.includes('\n')) {
+ throw new Error(
+ `CodegenContext.push() called newlineIndex: none, but contains` +
+ `newlines: ${code.replace(/\n/g, '\\n')}`,
+ )
+ }
+ pos.column += code.length
+ } else {
+ // single newline at known index
+ if (newlineIndex === NewlineType.End) {
+ newlineIndex = code.length - 1
+ }
+ if (
+ __TEST__ &&
+ (code.charAt(newlineIndex) !== '\n' ||
+ code.slice(0, newlineIndex).includes('\n') ||
+ code.slice(newlineIndex + 1).includes('\n'))
+ ) {
+ throw new Error(
+ `CodegenContext.push() called with newlineIndex: ${newlineIndex} ` +
+ `but does not conform: ${code.replace(/\n/g, '\\n')}`,
+ )
+ }
+ pos.line++
+ pos.column = code.length - newlineIndex
+ }
+ }
+ if (loc && loc !== locStub) {
+ addMapping(loc.end)
+ }
+ }
+ }
+
+ return [codegen, map]
+
+ function addMapping(loc: Position, name: string | null = null) {
+ // we use the private property to directly add the mapping
+ // because the addMapping() implementation in source-map-js has a bunch of
+ // unnecessary arg and validation checks that are pure overhead in our case.
+ const { _names, _mappings } = map!
+ if (name !== null && !_names.has(name)) _names.add(name)
+ _mappings.add({
+ originalLine: loc.line,
+ originalColumn: loc.column - 1, // source-map column is 0 based
+ generatedLine: pos.line,
+ generatedColumn: pos.column - 1,
+ source: filename,
+ name,
+ })
+ }
+}
diff --git a/packages/compiler-vapor/src/generators/vModel.ts b/packages/compiler-vapor/src/generators/vModel.ts
new file mode 100644
index 00000000000..a7082d91464
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/vModel.ts
@@ -0,0 +1,52 @@
+import type { CodegenContext } from '../generate'
+import type { DirectiveIRNode } from '../ir'
+import { type CodeFragment, NEWLINE, genCall } from './utils'
+import { genExpression } from './expression'
+import type { SimpleExpressionNode } from '@vue/compiler-dom'
+
+const helperMap = {
+ text: 'applyTextModel',
+ radio: 'applyRadioModel',
+ checkbox: 'applyCheckboxModel',
+ select: 'applySelectModel',
+ dynamic: 'applyDynamicModel',
+} as const
+
+// This is only for built-in v-model on native elements.
+export function genVModel(
+ oper: DirectiveIRNode,
+ context: CodegenContext,
+): CodeFragment[] {
+ const {
+ modelType,
+ element,
+ dir: { exp, modifiers },
+ } = oper
+
+ return [
+ NEWLINE,
+ ...genCall(
+ context.helper(helperMap[modelType!]),
+ `n${element}`,
+ // getter
+ [`() => (`, ...genExpression(exp!, context), `)`],
+ // setter
+ genModelHandler(exp!, context),
+ // modifiers
+ modifiers.length
+ ? `{ ${modifiers.map(e => e.content + ': true').join(',')} }`
+ : undefined,
+ ),
+ ]
+}
+
+export function genModelHandler(
+ exp: SimpleExpressionNode,
+ context: CodegenContext,
+): CodeFragment[] {
+ return [
+ `${context.options.isTS ? `(_value: any)` : `_value`} => (`,
+ ...genExpression(exp, context, '_value'),
+ ')',
+ ]
+}
diff --git a/packages/compiler-vapor/src/generators/vShow.ts b/packages/compiler-vapor/src/generators/vShow.ts
new file mode 100644
index 00000000000..9a6ccefcded
--- /dev/null
+++ b/packages/compiler-vapor/src/generators/vShow.ts
@@ -0,0 +1,18 @@
+import type { CodegenContext } from '../generate'
+import type { DirectiveIRNode } from '../ir'
+import { genExpression } from './expression'
+import { type CodeFragment, NEWLINE, genCall } from './utils'
+
+export function genVShow(
+ oper: DirectiveIRNode,
+ context: CodegenContext,
+): CodeFragment[] {
+ return [
+ NEWLINE,
+ ...genCall(context.helper('applyVShow'), `n${oper.element}`, [
+ `() => (`,
+ ...genExpression(oper.dir.exp!, context),
+ `)`,
+ ]),
+ ]
+}
diff --git a/packages/compiler-vapor/src/index.ts b/packages/compiler-vapor/src/index.ts
new file mode 100644
index 00000000000..6eda1021060
--- /dev/null
+++ b/packages/compiler-vapor/src/index.ts
@@ -0,0 +1,52 @@
+export { parse } from '@vue/compiler-dom'
+export {
+ transform,
+ createStructuralDirectiveTransform,
+ type TransformContext,
+ type NodeTransform,
+ type StructuralDirectiveTransform,
+ type DirectiveTransform,
+} from './transform'
+export {
+ generate,
+ CodegenContext,
+ type CodegenOptions,
+ type VaporCodegenResult,
+} from './generate'
+export {
+ genCall,
+ genMulti,
+ buildCodeFragment,
+ codeFragmentToString,
+ type CodeFragment,
+} from './generators/utils'
+export {
+ wrapTemplate,
+ compile,
+ type CompilerOptions,
+ type TransformPreset,
+} from './compile'
+export * from './ir'
+export {
+ VaporErrorCodes,
+ VaporErrorMessages,
+ createVaporCompilerError,
+ type VaporCompilerError,
+} from './errors'
+
+export { transformElement } from './transforms/transformElement'
+export { transformChildren } from './transforms/transformChildren'
+export { transformTemplateRef } from './transforms/transformTemplateRef'
+export { transformText } from './transforms/transformText'
+export { transformVBind } from './transforms/vBind'
+export { transformVHtml } from './transforms/vHtml'
+export { transformVOn } from './transforms/vOn'
+export { transformVOnce } from './transforms/vOnce'
+export { transformVShow } from './transforms/vShow'
+export { transformVText } from './transforms/vText'
+export { transformVIf } from './transforms/vIf'
+export { transformVFor } from './transforms/vFor'
+export { transformVModel } from './transforms/vModel'
+export { transformComment } from './transforms/transformComment'
+export { transformSlotOutlet } from './transforms/transformSlotOutlet'
+export { transformVSlot } from './transforms/vSlot'
diff --git a/packages/compiler-vapor/src/ir/component.ts b/packages/compiler-vapor/src/ir/component.ts
new file mode 100644
index 00000000000..884636cdfa8
--- /dev/null
+++ b/packages/compiler-vapor/src/ir/component.ts
@@ -0,0 +1,71 @@
+import type { SimpleExpressionNode } from '@vue/compiler-dom'
+import type { DirectiveTransformResult } from '../transform'
+import type { BlockIRNode, IRFor } from './index'
+
+// props
+export interface IRProp extends Omit {
+ values: SimpleExpressionNode[]
+}
+
+export enum IRDynamicPropsKind {
+ EXPRESSION, // v-bind="value"
+ ATTRIBUTE, // v-bind:[foo]="value"
+}
+
+export type IRPropsStatic = IRProp[]
+export interface IRPropsDynamicExpression {
+ kind: IRDynamicPropsKind.EXPRESSION
+ value: SimpleExpressionNode
+ handler?: boolean
+}
+export interface IRPropsDynamicAttribute extends IRProp {
+ kind: IRDynamicPropsKind.ATTRIBUTE
+}
+export type IRProps =
+ | IRPropsStatic
+ | IRPropsDynamicAttribute
+ | IRPropsDynamicExpression
+
+// slots
+export interface SlotBlockIRNode extends BlockIRNode {
+ props?: SimpleExpressionNode
+}
+
+export enum IRSlotType {
+ STATIC,
+ DYNAMIC,
+ LOOP,
+ CONDITIONAL,
+ EXPRESSION, // JSX only
+}
+export type IRSlotsStatic = {
+ slotType: IRSlotType.STATIC
+ slots: Record
+}
+export interface IRSlotDynamicBasic {
+ slotType: IRSlotType.DYNAMIC
+ name: SimpleExpressionNode
+ fn: SlotBlockIRNode
+}
+export interface IRSlotDynamicLoop {
+ slotType: IRSlotType.LOOP
+ name: SimpleExpressionNode
+ fn: SlotBlockIRNode
+ loop: IRFor
+}
+export interface IRSlotDynamicConditional {
+ slotType: IRSlotType.CONDITIONAL
+ condition: SimpleExpressionNode
+ positive: IRSlotDynamicBasic
+ negative?: IRSlotDynamicBasic | IRSlotDynamicConditional
+}
+export interface IRSlotsExpression {
+ slotType: IRSlotType.EXPRESSION
+ slots: SimpleExpressionNode
+}
+
+export type IRSlotDynamic =
+ | IRSlotDynamicBasic
+ | IRSlotDynamicLoop
+ | IRSlotDynamicConditional
+export type IRSlots = IRSlotsStatic | IRSlotDynamic | IRSlotsExpression
diff --git a/packages/compiler-vapor/src/ir/index.ts b/packages/compiler-vapor/src/ir/index.ts
new file mode 100644
index 00000000000..da636113224
--- /dev/null
+++ b/packages/compiler-vapor/src/ir/index.ts
@@ -0,0 +1,306 @@
+import type {
+ CompoundExpressionNode,
+ DirectiveNode,
+ RootNode,
+ SimpleExpressionNode,
+ TemplateChildNode,
+} from '@vue/compiler-dom'
+import type { Prettify } from '@vue/shared'
+import type { DirectiveTransform, NodeTransform } from '../transform'
+import type { IRProp, IRProps, IRSlots } from './component'
+
+export * from './component'
+
+export enum IRNodeTypes {
+ ROOT,
+ BLOCK,
+
+ SET_PROP,
+ SET_DYNAMIC_PROPS,
+ SET_TEXT,
+ SET_EVENT,
+ SET_DYNAMIC_EVENTS,
+ SET_HTML,
+ SET_TEMPLATE_REF,
+
+ INSERT_NODE,
+ PREPEND_NODE,
+ CREATE_COMPONENT_NODE,
+ SLOT_OUTLET_NODE,
+
+ DIRECTIVE,
+ DECLARE_OLD_REF, // consider make it more general
+
+ IF,
+ FOR,
+
+ GET_TEXT_CHILD,
+}
+
+export interface BaseIRNode {
+ type: IRNodeTypes
+}
+
+export type CoreHelper = keyof typeof import('packages/runtime-dom/src')
+
+export type VaporHelper = keyof typeof import('packages/runtime-vapor/src')
+
+export interface BlockIRNode extends BaseIRNode {
+ type: IRNodeTypes.BLOCK
+ node: RootNode | TemplateChildNode
+ dynamic: IRDynamicInfo
+ tempId: number
+ effect: IREffect[]
+ operation: OperationNode[]
+ expressions: SimpleExpressionNode[]
+ returns: number[]
+}
+
+export interface RootIRNode {
+ type: IRNodeTypes.ROOT
+ node: RootNode
+ source: string
+ template: string[]
+ rootTemplateIndex?: number
+ component: Set
+ directive: Set
+ block: BlockIRNode
+ hasTemplateRef: boolean
+}
+
+export interface IfIRNode extends BaseIRNode {
+ type: IRNodeTypes.IF
+ id: number
+ condition: SimpleExpressionNode
+ positive: BlockIRNode
+ negative?: BlockIRNode | IfIRNode
+ once?: boolean
+ parent?: number
+ anchor?: number
+}
+
+export interface IRFor {
+ source: SimpleExpressionNode
+ value?: SimpleExpressionNode
+ key?: SimpleExpressionNode
+ index?: SimpleExpressionNode
+}
+
+export interface ForIRNode extends BaseIRNode, IRFor {
+ type: IRNodeTypes.FOR
+ id: number
+ keyProp?: SimpleExpressionNode
+ render: BlockIRNode
+ once: boolean
+ component: boolean
+ onlyChild: boolean
+ parent?: number
+ anchor?: number
+}
+
+export interface SetPropIRNode extends BaseIRNode {
+ type: IRNodeTypes.SET_PROP
+ element: number
+ prop: IRProp
+ root: boolean
+ tag: string
+}
+
+export interface SetDynamicPropsIRNode extends BaseIRNode {
+ type: IRNodeTypes.SET_DYNAMIC_PROPS
+ element: number
+ props: IRProps[]
+ root: boolean
+}
+
+export interface SetDynamicEventsIRNode extends BaseIRNode {
+ type: IRNodeTypes.SET_DYNAMIC_EVENTS
+ element: number
+ event: SimpleExpressionNode
+}
+
+export interface SetTextIRNode extends BaseIRNode {
+ type: IRNodeTypes.SET_TEXT
+ element: number
+ values: SimpleExpressionNode[]
+ generated?: boolean // whether this is a generated empty text node by `processTextLikeContainer`
+ jsx?: boolean
+}
+
+export type KeyOverride = [find: string, replacement: string]
+export interface SetEventIRNode extends BaseIRNode {
+ type: IRNodeTypes.SET_EVENT
+ element: number
+ key: SimpleExpressionNode
+ value?: SimpleExpressionNode
+ modifiers: {
+ // modifiers for addEventListener() options, e.g. .passive & .capture
+ options: string[]
+ // modifiers that needs runtime guards, withKeys
+ keys: string[]
+ // modifiers that needs runtime guards, withModifiers
+ nonKeys: string[]
+ }
+ keyOverride?: KeyOverride
+ delegate: boolean
+ /** Whether it's in effect */
+ effect: boolean
+}
+
+export interface SetHtmlIRNode extends BaseIRNode {
+ type: IRNodeTypes.SET_HTML
+ element: number
+ value: SimpleExpressionNode
+}
+
+export interface SetTemplateRefIRNode extends BaseIRNode {
+ type: IRNodeTypes.SET_TEMPLATE_REF
+ element: number
+ value: SimpleExpressionNode
+ refFor: boolean
+ effect: boolean
+}
+
+export interface InsertNodeIRNode extends BaseIRNode {
+ type: IRNodeTypes.INSERT_NODE
+ elements: number[]
+ parent: number
+ anchor?: number
+}
+
+export interface PrependNodeIRNode extends BaseIRNode {
+ type: IRNodeTypes.PREPEND_NODE
+ elements: number[]
+ parent: number
+}
+
+export interface DirectiveIRNode extends BaseIRNode {
+ type: IRNodeTypes.DIRECTIVE
+ element: number
+ dir: VaporDirectiveNode
+ name: string
+ builtin?: boolean
+ asset?: boolean
+ modelType?: 'text' | 'dynamic' | 'radio' | 'checkbox' | 'select'
+}
+
+export interface CreateComponentIRNode extends BaseIRNode {
+ type: IRNodeTypes.CREATE_COMPONENT_NODE
+ id: number
+ tag: string
+ props: IRProps[]
+ slots: IRSlots[]
+ asset: boolean
+ root: boolean
+ once: boolean
+ dynamic?: SimpleExpressionNode
+ parent?: number
+ anchor?: number
+}
+
+export interface DeclareOldRefIRNode extends BaseIRNode {
+ type: IRNodeTypes.DECLARE_OLD_REF
+ id: number
+}
+
+export interface SlotOutletIRNode extends BaseIRNode {
+ type: IRNodeTypes.SLOT_OUTLET_NODE
+ id: number
+ name: SimpleExpressionNode
+ props: IRProps[]
+ fallback?: BlockIRNode
+ parent?: number
+ anchor?: number
+}
+
+export interface GetTextChildIRNode extends BaseIRNode {
+ type: IRNodeTypes.GET_TEXT_CHILD
+ parent: number
+}
+
+export type IRNode = OperationNode | RootIRNode
+export type OperationNode =
+ | SetPropIRNode
+ | SetDynamicPropsIRNode
+ | SetTextIRNode
+ | SetEventIRNode
+ | SetDynamicEventsIRNode
+ | SetHtmlIRNode
+ | SetTemplateRefIRNode
+ | InsertNodeIRNode
+ | PrependNodeIRNode
+ | DirectiveIRNode
+ | IfIRNode
+ | ForIRNode
+ | CreateComponentIRNode
+ | DeclareOldRefIRNode
+ | SlotOutletIRNode
+ | GetTextChildIRNode
+
+export enum DynamicFlag {
+ NONE = 0,
+ /**
+ * This node is referenced and needs to be saved as a variable.
+ */
+ REFERENCED = 1,
+ /**
+ * This node is not generated from template, but is generated dynamically.
+ */
+ NON_TEMPLATE = 1 << 1,
+ /**
+ * This node needs to be inserted back into the template.
+ */
+ INSERT = 1 << 2,
+}
+
+export interface IRDynamicInfo {
+ id?: number
+ flags: DynamicFlag
+ anchor?: number
+ children: IRDynamicInfo[]
+ template?: number
+ hasDynamicChild?: boolean
+ operation?: OperationNode
+}
+
+export interface IREffect {
+ expressions: SimpleExpressionNode[]
+ operations: OperationNode[]
+}
+
+type Overwrite = Pick> &
+ Pick>
+
+export type HackOptions = Prettify<
+ Overwrite<
+ T,
+ {
+ nodeTransforms?: NodeTransform[]
+ directiveTransforms?: Record
+ }
+ >
+>
+
+export type VaporDirectiveNode = Overwrite<
+ DirectiveNode,
+ {
+ exp: Exclude
+ arg: Exclude
+ }
+>
+
+export type InsertionStateTypes =
+ | IfIRNode
+ | ForIRNode
+ | SlotOutletIRNode
+ | CreateComponentIRNode
+
+export function isBlockOperation(op: OperationNode): op is InsertionStateTypes {
+ const type = op.type
+ return (
+ type === IRNodeTypes.CREATE_COMPONENT_NODE ||
+ type === IRNodeTypes.SLOT_OUTLET_NODE ||
+ type === IRNodeTypes.IF ||
+ type === IRNodeTypes.FOR
+ )
+}
diff --git a/packages/compiler-vapor/src/transform.ts b/packages/compiler-vapor/src/transform.ts
new file mode 100644
index 00000000000..76563899d2b
--- /dev/null
+++ b/packages/compiler-vapor/src/transform.ts
@@ -0,0 +1,309 @@
+import {
+ type AllNode,
+ type TransformOptions as BaseTransformOptions,
+ type CommentNode,
+ type CompilerCompatOptions,
+ type ElementNode,
+ ElementTypes,
+ NodeTypes,
+ type RootNode,
+ type SimpleExpressionNode,
+ type TemplateChildNode,
+ defaultOnError,
+ defaultOnWarn,
+ isVSlot,
+} from '@vue/compiler-dom'
+import { EMPTY_OBJ, NOOP, extend, isArray, isString } from '@vue/shared'
+import {
+ type BlockIRNode,
+ DynamicFlag,
+ type HackOptions,
+ type IRDynamicInfo,
+ IRNodeTypes,
+ type IRSlots,
+ type OperationNode,
+ type RootIRNode,
+ type VaporDirectiveNode,
+} from './ir'
+import { isConstantExpression, isStaticExpression } from './utils'
+import { newBlock, newDynamic } from './transforms/utils'
+
+export type NodeTransform = (
+ node: RootNode | TemplateChildNode,
+ context: TransformContext,
+) => void | (() => void) | (() => void)[]
+
+export type DirectiveTransform = (
+ dir: VaporDirectiveNode,
+ node: ElementNode,
+ context: TransformContext,
+) => DirectiveTransformResult | void
+
+export interface DirectiveTransformResult {
+ key: SimpleExpressionNode
+ value: SimpleExpressionNode
+ modifier?: '.' | '^'
+ runtimeCamelize?: boolean
+ handler?: boolean
+ handlerModifiers?: string[]
+ model?: boolean
+ modelModifiers?: string[]
+}
+
+// A structural directive transform is technically also a NodeTransform;
+// Only v-if and v-for fall into this category.
+export type StructuralDirectiveTransform = (
+ node: ElementNode,
+ dir: VaporDirectiveNode,
+ context: TransformContext,
+) => void | (() => void)
+
+export type TransformOptions = HackOptions
+
+export class TransformContext {
+ parent: TransformContext | null = null
+ root: TransformContext
+ index: number = 0
+
+ block: BlockIRNode = this.ir.block
+ options: Required<
+ Omit
+ >
+
+ template: string = ''
+ childrenTemplate: (string | null)[] = []
+ dynamic: IRDynamicInfo = this.ir.block.dynamic
+
+ inVOnce: boolean = false
+ inVFor: number = 0
+
+ comment: CommentNode[] = []
+ component: Set = this.ir.component
+ directive: Set = this.ir.directive
+
+ slots: IRSlots[] = []
+
+ private globalId = 0
+
+ constructor(
+ public ir: RootIRNode,
+ public node: T,
+ options: TransformOptions = {},
+ ) {
+ this.options = extend({}, defaultOptions, options)
+ this.root = this as TransformContext
+ }
+
+ enterBlock(ir: BlockIRNode, isVFor: boolean = false): () => void {
+ const { block, template, dynamic, childrenTemplate, slots } = this
+ this.block = ir
+ this.dynamic = ir.dynamic
+ this.template = ''
+ this.childrenTemplate = []
+ this.slots = []
+ isVFor && this.inVFor++
+ return () => {
+ // exit
+ this.registerTemplate()
+ this.block = block
+ this.template = template
+ this.dynamic = dynamic
+ this.childrenTemplate = childrenTemplate
+ this.slots = slots
+ isVFor && this.inVFor--
+ }
+ }
+
+ increaseId = (): number => this.globalId++
+ reference(): number {
+ if (this.dynamic.id !== undefined) return this.dynamic.id
+ this.dynamic.flags |= DynamicFlag.REFERENCED
+ return (this.dynamic.id = this.increaseId())
+ }
+
+ pushTemplate(content: string): number {
+ const existing = this.ir.template.findIndex(
+ template => template === content,
+ )
+ if (existing !== -1) return existing
+ this.ir.template.push(content)
+ return this.ir.template.length - 1
+ }
+ registerTemplate(): number {
+ if (!this.template) return -1
+ const id = this.pushTemplate(this.template)
+ return (this.dynamic.template = id)
+ }
+
+ registerEffect(
+ expressions: SimpleExpressionNode[],
+ ...operations: OperationNode[]
+ ): void {
+ expressions = expressions.filter(exp => !isConstantExpression(exp))
+ if (
+ this.inVOnce ||
+ expressions.length === 0 ||
+ expressions.every(e =>
+ isStaticExpression(e, this.root.options.bindingMetadata),
+ )
+ ) {
+ return this.registerOperation(...operations)
+ }
+
+ this.block.expressions.push(...expressions)
+ const existing = this.block.effect.find(e =>
+ isSameExpression(e.expressions, expressions),
+ )
+ if (existing) {
+ existing.operations.push(...operations)
+ } else {
+ this.block.effect.push({
+ expressions,
+ operations,
+ })
+ }
+
+ function isSameExpression(
+ a: SimpleExpressionNode[],
+ b: SimpleExpressionNode[],
+ ) {
+ if (a.length !== b.length) return false
+ return a.every((exp, i) => exp.content === b[i].content)
+ }
+ }
+
+ registerOperation(...node: OperationNode[]): void {
+ this.block.operation.push(...node)
+ }
+
+ create(
+ node: T,
+ index: number,
+ ): TransformContext {
+ return Object.assign(Object.create(TransformContext.prototype), this, {
+ node,
+ parent: this as any,
+ index,
+
+ template: '',
+ childrenTemplate: [],
+ dynamic: newDynamic(),
+ } satisfies Partial>)
+ }
+}
+
+const defaultOptions = {
+ filename: '',
+ prefixIdentifiers: true,
+ hoistStatic: false,
+ hmr: false,
+ cacheHandlers: false,
+ nodeTransforms: [],
+ directiveTransforms: {},
+ transformHoist: null,
+ isBuiltInComponent: NOOP,
+ isCustomElement: NOOP,
+ expressionPlugins: [],
+ scopeId: null,
+ slotted: true,
+ ssr: false,
+ inSSR: false,
+ ssrCssVars: ``,
+ bindingMetadata: EMPTY_OBJ,
+ inline: false,
+ isTS: false,
+ onError: defaultOnError,
+ onWarn: defaultOnWarn,
+}
+
+// AST -> IR
+export function transform(
+ node: RootNode,
+ options: TransformOptions = {},
+): RootIRNode {
+ const ir: RootIRNode = {
+ type: IRNodeTypes.ROOT,
+ node,
+ source: node.source,
+ template: [],
+ component: new Set(),
+ directive: new Set(),
+ block: newBlock(node),
+ hasTemplateRef: false,
+ }
+
+ const context = new TransformContext(ir, node, options)
+
+ transformNode(context)
+
+ return ir
+}
+
+export function transformNode(
+ context: TransformContext,
+): void {
+ let { node } = context
+
+ // apply transform plugins
+ const { nodeTransforms } = context.options
+ const exitFns = []
+ for (const nodeTransform of nodeTransforms) {
+ const onExit = nodeTransform(node, context)
+ if (onExit) {
+ if (isArray(onExit)) {
+ exitFns.push(...onExit)
+ } else {
+ exitFns.push(onExit)
+ }
+ }
+ if (!context.node) {
+ // node was removed
+ return
+ } else {
+ // node may have been replaced
+ node = context.node
+ }
+ }
+
+ // exit transforms
+ context.node = node
+ let i = exitFns.length
+ while (i--) {
+ exitFns[i]()
+ }
+
+ if (context.node.type === NodeTypes.ROOT) {
+ context.registerTemplate()
+ }
+}
+
+export function createStructuralDirectiveTransform(
+ name: string | string[],
+ fn: StructuralDirectiveTransform,
+): NodeTransform {
+ const matches = (n: string) =>
+ isString(name) ? n === name : name.includes(n)
+
+ return (node, context) => {
+ if (node.type === NodeTypes.ELEMENT) {
+ const { props } = node
+ // structural directive transforms are not concerned with slots
+ // as they are handled separately in vSlot.ts
+ if (node.tagType === ElementTypes.TEMPLATE && props.some(isVSlot)) {
+ return
+ }
+ const exitFns = []
+ for (const prop of props) {
+ if (prop.type === NodeTypes.DIRECTIVE && matches(prop.name)) {
+ const onExit = fn(
+ node,
+ prop as VaporDirectiveNode,
+ context as TransformContext,
+ )
+ if (onExit) exitFns.push(onExit)
+ }
+ }
+ return exitFns
+ }
+ }
+}
diff --git a/packages/compiler-vapor/src/transforms/transformChildren.ts b/packages/compiler-vapor/src/transforms/transformChildren.ts
new file mode 100644
index 00000000000..790cd9d6fb1
--- /dev/null
+++ b/packages/compiler-vapor/src/transforms/transformChildren.ts
@@ -0,0 +1,111 @@
+import { type ElementNode, ElementTypes, NodeTypes } from '@vue/compiler-dom'
+import {
+ type NodeTransform,
+ type TransformContext,
+ transformNode,
+} from '../transform'
+import {
+ DynamicFlag,
+ type IRDynamicInfo,
+ IRNodeTypes,
+ isBlockOperation,
+} from '../ir'
+
+export const transformChildren: NodeTransform = (node, context) => {
+ const isFragment =
+ node.type === NodeTypes.ROOT ||
+ (node.type === NodeTypes.ELEMENT &&
+ (node.tagType === ElementTypes.TEMPLATE ||
+ node.tagType === ElementTypes.COMPONENT))
+
+ if (!isFragment && node.type !== NodeTypes.ELEMENT) return
+
+ for (const [i, child] of node.children.entries()) {
+ const childContext = context.create(child, i)
+ transformNode(childContext)
+
+ const childDynamic = childContext.dynamic
+
+ if (isFragment) {
+ childContext.reference()
+ childContext.registerTemplate()
+
+ if (
+ !(childDynamic.flags & DynamicFlag.NON_TEMPLATE) ||
+ childDynamic.flags & DynamicFlag.INSERT
+ ) {
+ context.block.returns.push(childContext.dynamic.id!)
+ }
+ } else {
+ context.childrenTemplate.push(childContext.template)
+ }
+
+ if (
+ childDynamic.hasDynamicChild ||
+ childDynamic.id !== undefined ||
+ childDynamic.flags & DynamicFlag.NON_TEMPLATE ||
+ childDynamic.flags & DynamicFlag.INSERT
+ ) {
+ context.dynamic.hasDynamicChild = true
+ }
+
+ context.dynamic.children[i] = childDynamic
+ }
+
+ if (!isFragment) {
+ processDynamicChildren(context as TransformContext)
+ }
+}
+
+function processDynamicChildren(context: TransformContext) {
+ let prevDynamics: IRDynamicInfo[] = []
+ let hasStaticTemplate = false
+ const children = context.dynamic.children
+
+ for (const [index, child] of children.entries()) {
+ if (child.flags & DynamicFlag.INSERT) {
+ prevDynamics.push(child)
+ }
+
+ if (!(child.flags & DynamicFlag.NON_TEMPLATE)) {
+ if (prevDynamics.length) {
+ if (hasStaticTemplate) {
+ context.childrenTemplate[index - prevDynamics.length] = ``
+ prevDynamics[0].flags -= DynamicFlag.NON_TEMPLATE
+ const anchor = (prevDynamics[0].anchor = context.increaseId())
+ registerInsertion(prevDynamics, context, anchor)
+ } else {
+ registerInsertion(prevDynamics, context, -1 /* prepend */)
+ }
+ prevDynamics = []
+ }
+ hasStaticTemplate = true
+ }
+ }
+
+ if (prevDynamics.length) {
+ registerInsertion(prevDynamics, context)
+ }
+}
+
+function registerInsertion(
+ dynamics: IRDynamicInfo[],
+ context: TransformContext,
+ anchor?: number,
+) {
+ for (const child of dynamics) {
+ if (child.template != null) {
+ // template node due to invalid nesting - generate actual insertion
+ context.registerOperation({
+ type: IRNodeTypes.INSERT_NODE,
+ elements: dynamics.map(child => child.id!),
+ parent: context.reference(),
+ anchor,
+ })
+ } else if (child.operation && isBlockOperation(child.operation)) {
+ // block types
+ child.operation.parent = context.reference()
+ child.operation.anchor = anchor
+ }
+ }
+}
diff --git a/packages/compiler-vapor/src/transforms/transformComment.ts b/packages/compiler-vapor/src/transforms/transformComment.ts
new file mode 100644
index 00000000000..23c4069551f
--- /dev/null
+++ b/packages/compiler-vapor/src/transforms/transformComment.ts
@@ -0,0 +1,56 @@
+import {
+ type CommentNode,
+ type ElementNode,
+ NodeTypes,
+ type TemplateChildNode,
+} from '@vue/compiler-dom'
+import type { NodeTransform, TransformContext } from '../transform'
+import { DynamicFlag } from '../ir'
+
+export const transformComment: NodeTransform = (node, context) => {
+ if (node.type !== NodeTypes.COMMENT) return
+
+ if (getSiblingIf(context as TransformContext)) {
+ context.comment.push(node)
+ context.dynamic.flags |= DynamicFlag.NON_TEMPLATE
+ } else {
+ context.template += ``
+ }
+}
+
+export function getSiblingIf(
+ context: TransformContext,
+ reverse?: boolean,
+): ElementNode | undefined {
+ const parent = context.parent
+ if (!parent) return
+
+ const siblings = parent.node.children
+ let sibling: TemplateChildNode | undefined
+ let i = siblings.indexOf(context.node)
+ while (reverse ? --i >= 0 : ++i < siblings.length) {
+ sibling = siblings[i]
+ if (!isCommentLike(sibling)) {
+ break
+ }
+ }
+
+ if (
+ sibling &&
+ sibling.type === NodeTypes.ELEMENT &&
+ sibling.props.some(
+ ({ type, name }) =>
+ type === NodeTypes.DIRECTIVE &&
+ ['else-if', reverse ? 'if' : 'else'].includes(name),
+ )
+ ) {
+ return sibling
+ }
+}
+
+function isCommentLike(node: TemplateChildNode) {
+ return (
+ node.type === NodeTypes.COMMENT ||
+ (node.type === NodeTypes.TEXT && !node.content.trim().length)
+ )
+}
diff --git a/packages/compiler-vapor/src/transforms/transformElement.ts b/packages/compiler-vapor/src/transforms/transformElement.ts
new file mode 100644
index 00000000000..dceb3fd6121
--- /dev/null
+++ b/packages/compiler-vapor/src/transforms/transformElement.ts
@@ -0,0 +1,437 @@
+import { isValidHTMLNesting } from '@vue/compiler-dom'
+import {
+ type AttributeNode,
+ type ComponentNode,
+ type ElementNode,
+ ElementTypes,
+ ErrorCodes,
+ NodeTypes,
+ type PlainElementNode,
+ type SimpleExpressionNode,
+ createCompilerError,
+ createSimpleExpression,
+ isStaticArgOf,
+} from '@vue/compiler-dom'
+import {
+ camelize,
+ capitalize,
+ extend,
+ isBuiltInDirective,
+ isVoidTag,
+ makeMap,
+} from '@vue/shared'
+import type {
+ DirectiveTransformResult,
+ NodeTransform,
+ TransformContext,
+} from '../transform'
+import {
+ DynamicFlag,
+ IRDynamicPropsKind,
+ IRNodeTypes,
+ type IRProp,
+ type IRProps,
+ type IRPropsDynamicAttribute,
+ type IRPropsStatic,
+ type VaporDirectiveNode,
+} from '../ir'
+import { EMPTY_EXPRESSION } from './utils'
+import { findProp } from '../utils'
+
+export const isReservedProp: (key: string) => boolean = /*#__PURE__*/ makeMap(
+ // the leading comma is intentional so empty string "" is also included
+ ',key,ref,ref_for,ref_key,',
+)
+
+export const transformElement: NodeTransform = (node, context) => {
+ return function postTransformElement() {
+ ;({ node } = context)
+ if (
+ !(
+ node.type === NodeTypes.ELEMENT &&
+ (node.tagType === ElementTypes.ELEMENT ||
+ node.tagType === ElementTypes.COMPONENT)
+ )
+ )
+ return
+
+ const isComponent = node.tagType === ElementTypes.COMPONENT
+ const isDynamicComponent = isComponentTag(node.tag)
+ const propsResult = buildProps(
+ node,
+ context as TransformContext,
+ isComponent,
+ isDynamicComponent,
+ )
+
+ let { parent } = context
+ while (
+ parent &&
+ parent.parent &&
+ parent.node.type === NodeTypes.ELEMENT &&
+ parent.node.tagType === ElementTypes.TEMPLATE
+ ) {
+ parent = parent.parent
+ }
+ const singleRoot =
+ context.root === parent &&
+ parent.node.children.filter(child => child.type !== NodeTypes.COMMENT)
+ .length === 1
+
+ ;(isComponent ? transformComponentElement : transformNativeElement)(
+ node as any,
+ propsResult,
+ singleRoot,
+ context as TransformContext,
+ isDynamicComponent,
+ )
+ }
+}
+
+function transformComponentElement(
+ node: ComponentNode,
+ propsResult: PropsResult,
+ singleRoot: boolean,
+ context: TransformContext,
+ isDynamicComponent: boolean,
+) {
+ const dynamicComponent = isDynamicComponent
+ ? resolveDynamicComponent(node)
+ : undefined
+
+ let { tag } = node
+ let asset = true
+
+ if (!dynamicComponent) {
+ const fromSetup = resolveSetupReference(tag, context)
+ if (fromSetup) {
+ tag = fromSetup
+ asset = false
+ }
+
+ const dotIndex = tag.indexOf('.')
+ if (dotIndex > 0) {
+ const ns = resolveSetupReference(tag.slice(0, dotIndex), context)
+ if (ns) {
+ tag = ns + tag.slice(dotIndex)
+ asset = false
+ }
+ }
+
+ if (asset) {
+ context.component.add(tag)
+ }
+ }
+
+ context.dynamic.flags |= DynamicFlag.NON_TEMPLATE | DynamicFlag.INSERT
+ context.dynamic.operation = {
+ type: IRNodeTypes.CREATE_COMPONENT_NODE,
+ id: context.reference(),
+ tag,
+ props: propsResult[0] ? propsResult[1] : [propsResult[1]],
+ asset,
+ root: singleRoot,
+ slots: [...context.slots],
+ once: context.inVOnce,
+ dynamic: dynamicComponent,
+ }
+ context.slots = []
+}
+
+function resolveDynamicComponent(node: ComponentNode) {
+ const isProp = findProp(node, 'is', false, true /* allow empty */)
+ if (!isProp) return
+
+ if (isProp.type === NodeTypes.ATTRIBUTE) {
+ return isProp.value && createSimpleExpression(isProp.value.content, true)
+ } else {
+ return (
+ isProp.exp ||
+ // #10469 handle :is shorthand
+ extend(createSimpleExpression(`is`, false, isProp.arg!.loc), {
+ ast: null,
+ })
+ )
+ }
+}
+
+function resolveSetupReference(name: string, context: TransformContext) {
+ const bindings = context.options.bindingMetadata
+ if (!bindings || bindings.__isScriptSetup === false) {
+ return
+ }
+
+ const camelName = camelize(name)
+ const PascalName = capitalize(camelName)
+ return bindings[name]
+ ? name
+ : bindings[camelName]
+ ? camelName
+ : bindings[PascalName]
+ ? PascalName
+ : undefined
+}
+
+function transformNativeElement(
+ node: PlainElementNode,
+ propsResult: PropsResult,
+ singleRoot: boolean,
+ context: TransformContext,
+) {
+ const { tag } = node
+ const { scopeId } = context.options
+
+ let template = ''
+
+ template += `<${tag}`
+ if (scopeId) template += ` ${scopeId}`
+
+ const dynamicProps: string[] = []
+ if (propsResult[0] /* dynamic props */) {
+ const [, dynamicArgs, expressions] = propsResult
+ context.registerEffect(expressions, {
+ type: IRNodeTypes.SET_DYNAMIC_PROPS,
+ element: context.reference(),
+ props: dynamicArgs,
+ root: singleRoot,
+ })
+ } else {
+ for (const prop of propsResult[1]) {
+ const { key, values } = prop
+ if (key.isStatic && values.length === 1 && values[0].isStatic) {
+ template += ` ${key.content}`
+ if (values[0].content) template += `="${values[0].content}"`
+ } else {
+ dynamicProps.push(key.content)
+ context.registerEffect(values, {
+ type: IRNodeTypes.SET_PROP,
+ element: context.reference(),
+ prop,
+ root: singleRoot,
+ tag,
+ })
+ }
+ }
+ }
+
+ template += `>` + context.childrenTemplate.join('')
+ // TODO remove unnecessary close tag, e.g. if it's the last element of the template
+ if (!isVoidTag(tag)) {
+ template += ``
+ }
+
+ if (singleRoot) {
+ context.ir.rootTemplateIndex = context.ir.template.length
+ }
+
+ if (
+ context.parent &&
+ context.parent.node.type === NodeTypes.ELEMENT &&
+ !isValidHTMLNesting(context.parent.node.tag, tag)
+ ) {
+ context.reference()
+ context.dynamic.template = context.pushTemplate(template)
+ context.dynamic.flags |= DynamicFlag.INSERT | DynamicFlag.NON_TEMPLATE
+ } else {
+ context.template += template
+ }
+}
+
+export type PropsResult =
+ | [dynamic: true, props: IRProps[], expressions: SimpleExpressionNode[]]
+ | [dynamic: false, props: IRPropsStatic]
+
+export function buildProps(
+ node: ElementNode,
+ context: TransformContext,
+ isComponent: boolean,
+ isDynamicComponent?: boolean,
+): PropsResult {
+ const props = node.props as (VaporDirectiveNode | AttributeNode)[]
+ if (props.length === 0) return [false, []]
+
+ const dynamicArgs: IRProps[] = []
+ const dynamicExpr: SimpleExpressionNode[] = []
+ let results: DirectiveTransformResult[] = []
+
+ function pushMergeArg() {
+ if (results.length) {
+ dynamicArgs.push(dedupeProperties(results))
+ results = []
+ }
+ }
+
+ for (const prop of props) {
+ if (prop.type === NodeTypes.DIRECTIVE && !prop.arg) {
+ if (prop.name === 'bind') {
+ // v-bind="obj"
+ if (prop.exp) {
+ dynamicExpr.push(prop.exp)
+ pushMergeArg()
+ dynamicArgs.push({
+ kind: IRDynamicPropsKind.EXPRESSION,
+ value: prop.exp,
+ })
+ } else {
+ context.options.onError(
+ createCompilerError(ErrorCodes.X_V_BIND_NO_EXPRESSION, prop.loc),
+ )
+ }
+ continue
+ } else if (prop.name === 'on') {
+ // v-on="obj"
+ if (prop.exp) {
+ if (isComponent) {
+ dynamicExpr.push(prop.exp)
+ pushMergeArg()
+ dynamicArgs.push({
+ kind: IRDynamicPropsKind.EXPRESSION,
+ value: prop.exp,
+ handler: true,
+ })
+ } else {
+ context.registerEffect(
+ [prop.exp],
+
+ {
+ type: IRNodeTypes.SET_DYNAMIC_EVENTS,
+ element: context.reference(),
+ event: prop.exp,
+ },
+ )
+ }
+ } else {
+ context.options.onError(
+ createCompilerError(ErrorCodes.X_V_ON_NO_EXPRESSION, prop.loc),
+ )
+ }
+ continue
+ }
+ }
+
+ // exclude `is` prop for
+ if (
+ (isDynamicComponent &&
+ prop.type === NodeTypes.ATTRIBUTE &&
+ prop.name === 'is') ||
+ (prop.type === NodeTypes.DIRECTIVE &&
+ prop.name === 'bind' &&
+ isStaticArgOf(prop.arg, 'is'))
+ ) {
+ continue
+ }
+
+ const result = transformProp(prop, node, context)
+ if (result) {
+ dynamicExpr.push(result.key, result.value)
+ if (isComponent && !result.key.isStatic) {
+ // v-bind:[name]="value" or v-on:[name]="value"
+ pushMergeArg()
+ dynamicArgs.push(
+ extend(resolveDirectiveResult(result), {
+ kind: IRDynamicPropsKind.ATTRIBUTE,
+ }) as IRPropsDynamicAttribute,
+ )
+ } else {
+ // other static props
+ results.push(result)
+ }
+ }
+ }
+
+ // has dynamic key or v-bind="{}"
+ if (dynamicArgs.length || results.some(({ key }) => !key.isStatic)) {
+ // take rest of props as dynamic props
+ pushMergeArg()
+ return [true, dynamicArgs, dynamicExpr]
+ }
+
+ const irProps = dedupeProperties(results)
+ return [false, irProps]
+}
+
+function transformProp(
+ prop: VaporDirectiveNode | AttributeNode,
+ node: ElementNode,
+ context: TransformContext,
+): DirectiveTransformResult | void {
+ let { name } = prop
+
+ if (prop.type === NodeTypes.ATTRIBUTE) {
+ if (isReservedProp(name)) return
+ return {
+ key: createSimpleExpression(prop.name, true, prop.nameLoc),
+ value: prop.value
+ ? createSimpleExpression(prop.value.content, true, prop.value.loc)
+ : EMPTY_EXPRESSION,
+ }
+ }
+
+ const directiveTransform = context.options.directiveTransforms[name]
+ if (directiveTransform) {
+ return directiveTransform(prop, node, context)
+ }
+
+ if (!isBuiltInDirective(name)) {
+ const fromSetup = resolveSetupReference(`v-${name}`, context)
+ if (fromSetup) {
+ name = fromSetup
+ } else {
+ context.directive.add(name)
+ }
+
+ context.registerOperation({
+ type: IRNodeTypes.DIRECTIVE,
+ element: context.reference(),
+ dir: prop,
+ name,
+ asset: !fromSetup,
+ })
+ }
+}
+
+// Dedupe props in an object literal.
+// Literal duplicated attributes would have been warned during the parse phase,
+// however, it's possible to encounter duplicated `onXXX` handlers with different
+// modifiers. We also need to merge static and dynamic class / style attributes.
+function dedupeProperties(results: DirectiveTransformResult[]): IRProp[] {
+ const knownProps: Map = new Map()
+ const deduped: IRProp[] = []
+
+ for (const result of results) {
+ const prop = resolveDirectiveResult(result)
+ // dynamic keys are always allowed
+ if (!prop.key.isStatic) {
+ deduped.push(prop)
+ continue
+ }
+ const name = prop.key.content
+ const existing = knownProps.get(name)
+ if (existing) {
+ if (name === 'style' || name === 'class') {
+ mergePropValues(existing, prop)
+ }
+ // unexpected duplicate, should have emitted error during parse
+ } else {
+ knownProps.set(name, prop)
+ deduped.push(prop)
+ }
+ }
+ return deduped
+}
+
+function resolveDirectiveResult(prop: DirectiveTransformResult): IRProp {
+ return extend({}, prop, {
+ value: undefined,
+ values: [prop.value],
+ })
+}
+
+function mergePropValues(existing: IRProp, incoming: IRProp) {
+ const newValues = incoming.values
+ existing.values.push(...newValues)
+}
+
+function isComponentTag(tag: string) {
+ return tag === 'component' || tag === 'Component'
+}
diff --git a/packages/compiler-vapor/src/transforms/transformSlotOutlet.ts b/packages/compiler-vapor/src/transforms/transformSlotOutlet.ts
new file mode 100644
index 00000000000..83b4aa2d2e4
--- /dev/null
+++ b/packages/compiler-vapor/src/transforms/transformSlotOutlet.ts
@@ -0,0 +1,133 @@
+import {
+ type AttributeNode,
+ type ElementNode,
+ ElementTypes,
+ ErrorCodes,
+ NodeTypes,
+ type SimpleExpressionNode,
+ createCompilerError,
+ createSimpleExpression,
+ isStaticArgOf,
+ isStaticExp,
+} from '@vue/compiler-core'
+import type { NodeTransform, TransformContext } from '../transform'
+import {
+ type BlockIRNode,
+ type DirectiveIRNode,
+ DynamicFlag,
+ IRNodeTypes,
+ type IRProps,
+ type VaporDirectiveNode,
+} from '../ir'
+import { camelize, extend } from '@vue/shared'
+import { newBlock } from './utils'
+import { buildProps } from './transformElement'
+
+export const transformSlotOutlet: NodeTransform = (node, context) => {
+ if (node.type !== NodeTypes.ELEMENT || node.tag !== 'slot') {
+ return
+ }
+ const id = context.reference()
+ context.dynamic.flags |= DynamicFlag.INSERT | DynamicFlag.NON_TEMPLATE
+ const [fallback, exitBlock] = createFallback(
+ node,
+ context as TransformContext,
+ )
+
+ let slotName: SimpleExpressionNode | undefined
+ const slotProps: (AttributeNode | VaporDirectiveNode)[] = []
+ for (const prop of node.props as (AttributeNode | VaporDirectiveNode)[]) {
+ if (prop.type === NodeTypes.ATTRIBUTE) {
+ if (prop.value) {
+ if (prop.name === 'name') {
+ slotName = createSimpleExpression(prop.value.content, true, prop.loc)
+ } else {
+ slotProps.push(extend({}, prop, { name: camelize(prop.name) }))
+ }
+ }
+ } else if (prop.name === 'bind' && isStaticArgOf(prop.arg, 'name')) {
+ if (prop.exp) {
+ slotName = prop.exp!
+ } else {
+ // v-bind shorthand syntax
+ slotName = createSimpleExpression(
+ camelize(prop.arg!.content),
+ false,
+ prop.arg!.loc,
+ )
+ slotName.ast = null
+ }
+ } else {
+ let slotProp = prop
+ if (
+ slotProp.name === 'bind' &&
+ slotProp.arg &&
+ isStaticExp(slotProp.arg)
+ ) {
+ slotProp = extend({}, prop, {
+ arg: extend({}, slotProp.arg, {
+ content: camelize(slotProp.arg!.content),
+ }),
+ })
+ }
+ slotProps.push(slotProp)
+ }
+ }
+
+ slotName ||= createSimpleExpression('default', true)
+ let irProps: IRProps[] = []
+ if (slotProps.length) {
+ const [isDynamic, props] = buildProps(
+ extend({}, node, { props: slotProps }),
+ context as TransformContext,
+ true,
+ )
+ irProps = isDynamic ? props : [props]
+
+ const runtimeDirective = context.block.operation.find(
+ (oper): oper is DirectiveIRNode =>
+ oper.type === IRNodeTypes.DIRECTIVE && oper.element === id,
+ )
+ if (runtimeDirective) {
+ context.options.onError(
+ createCompilerError(
+ ErrorCodes.X_V_SLOT_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET,
+ runtimeDirective.dir.loc,
+ ),
+ )
+ }
+ }
+
+ return () => {
+ exitBlock && exitBlock()
+ context.dynamic.operation = {
+ type: IRNodeTypes.SLOT_OUTLET_NODE,
+ id,
+ name: slotName,
+ props: irProps,
+ fallback,
+ }
+ }
+}
+
+function createFallback(
+ node: ElementNode,
+ context: TransformContext,
+): [block?: BlockIRNode, exit?: () => void] {
+ if (!node.children.length) {
+ return []
+ }
+
+ context.node = node = extend({}, node, {
+ type: NodeTypes.ELEMENT,
+ tag: 'template',
+ props: [],
+ tagType: ElementTypes.TEMPLATE,
+ children: node.children,
+ })
+
+ const fallback = newBlock(node)
+ const exitBlock = context.enterBlock(fallback)
+ context.reference()
+ return [fallback, exitBlock]
+}
diff --git a/packages/compiler-vapor/src/transforms/transformTemplateRef.ts b/packages/compiler-vapor/src/transforms/transformTemplateRef.ts
new file mode 100644
index 00000000000..9fa7c09bf58
--- /dev/null
+++ b/packages/compiler-vapor/src/transforms/transformTemplateRef.ts
@@ -0,0 +1,45 @@
+import {
+ NodeTypes,
+ type SimpleExpressionNode,
+ createSimpleExpression,
+} from '@vue/compiler-dom'
+import type { NodeTransform } from '../transform'
+import { IRNodeTypes } from '../ir'
+import { normalizeBindShorthand } from './vBind'
+import { findProp, isConstantExpression } from '../utils'
+import { EMPTY_EXPRESSION } from './utils'
+
+export const transformTemplateRef: NodeTransform = (node, context) => {
+ if (node.type !== NodeTypes.ELEMENT) return
+
+ const dir = findProp(node, 'ref', false, true)
+ if (!dir) return
+
+ context.ir.hasTemplateRef = true
+
+ let value: SimpleExpressionNode
+ if (dir.type === NodeTypes.DIRECTIVE) {
+ value = dir.exp || normalizeBindShorthand(dir.arg!, context)
+ } else {
+ value = dir.value
+ ? createSimpleExpression(dir.value.content, true, dir.value.loc)
+ : EMPTY_EXPRESSION
+ }
+
+ return () => {
+ const id = context.reference()
+ const effect = !isConstantExpression(value)
+ effect &&
+ context.registerOperation({
+ type: IRNodeTypes.DECLARE_OLD_REF,
+ id,
+ })
+ context.registerEffect([value], {
+ type: IRNodeTypes.SET_TEMPLATE_REF,
+ element: id,
+ value,
+ refFor: !!context.inVFor,
+ effect,
+ })
+ }
+}
diff --git a/packages/compiler-vapor/src/transforms/transformText.ts b/packages/compiler-vapor/src/transforms/transformText.ts
new file mode 100644
index 00000000000..7cdb1b1a78c
--- /dev/null
+++ b/packages/compiler-vapor/src/transforms/transformText.ts
@@ -0,0 +1,156 @@
+import {
+ type ElementNode,
+ ElementTypes,
+ type InterpolationNode,
+ NodeTypes,
+ type RootNode,
+ type SimpleExpressionNode,
+ type TemplateChildNode,
+ type TextNode,
+ createSimpleExpression,
+} from '@vue/compiler-dom'
+import type { NodeTransform, TransformContext } from '../transform'
+import { DynamicFlag, IRNodeTypes } from '../ir'
+import {
+ getLiteralExpressionValue,
+ isConstantExpression,
+ isStaticExpression,
+} from '../utils'
+
+type TextLike = TextNode | InterpolationNode
+const seen = new WeakMap<
+ TransformContext,
+ WeakSet
+>()
+
+export const transformText: NodeTransform = (node, context) => {
+ if (!seen.has(context.root)) seen.set(context.root, new WeakSet())
+ if (seen.get(context.root)!.has(node)) {
+ context.dynamic.flags |= DynamicFlag.NON_TEMPLATE
+ return
+ }
+
+ const isFragment =
+ node.type === NodeTypes.ROOT ||
+ (node.type === NodeTypes.ELEMENT &&
+ (node.tagType === ElementTypes.TEMPLATE ||
+ node.tagType === ElementTypes.COMPONENT))
+
+ if (
+ (isFragment ||
+ (node.type === NodeTypes.ELEMENT &&
+ node.tagType === ElementTypes.ELEMENT)) &&
+ node.children.length
+ ) {
+ let hasInterp = false
+ let isAllTextLike = true
+ for (const c of node.children) {
+ if (c.type === NodeTypes.INTERPOLATION) {
+ hasInterp = true
+ } else if (c.type !== NodeTypes.TEXT) {
+ isAllTextLike = false
+ }
+ }
+ // all text like with interpolation
+ if (!isFragment && isAllTextLike && hasInterp) {
+ processTextContainer(
+ node.children as TextLike[],
+ context as TransformContext,
+ )
+ } else if (hasInterp) {
+ // check if there's any text before interpolation, it needs to be merged
+ for (let i = 0; i < node.children.length; i++) {
+ const c = node.children[i]
+ const prev = node.children[i - 1]
+ if (
+ c.type === NodeTypes.INTERPOLATION &&
+ prev &&
+ prev.type === NodeTypes.TEXT
+ ) {
+ // mark leading text node for skipping
+ seen.get(context.root)!.add(prev)
+ }
+ }
+ }
+ } else if (node.type === NodeTypes.INTERPOLATION) {
+ processInterpolation(context as TransformContext)
+ } else if (node.type === NodeTypes.TEXT) {
+ context.template += node.content
+ }
+}
+
+function processInterpolation(context: TransformContext) {
+ const children = context.parent!.node.children
+ const nexts = children.slice(context.index)
+ const idx = nexts.findIndex(n => !isTextLike(n))
+ const nodes = (idx > -1 ? nexts.slice(0, idx) : nexts) as Array
+
+ // merge leading text
+ const prev = children[context.index - 1]
+ if (prev && prev.type === NodeTypes.TEXT) {
+ nodes.unshift(prev)
+ }
+
+ context.template += ' '
+ const id = context.reference()
+ const values = nodes.map(node => createTextLikeExpression(node, context))
+
+ const nonConstantExps = values.filter(v => !isConstantExpression(v))
+ const isStatic =
+ !nonConstantExps.length ||
+ nonConstantExps.every(e =>
+ isStaticExpression(e, context.options.bindingMetadata),
+ ) ||
+ context.inVOnce
+
+ if (isStatic) {
+ context.registerOperation({
+ type: IRNodeTypes.SET_TEXT,
+ element: id,
+ values,
+ })
+ } else {
+ context.registerEffect(values, {
+ type: IRNodeTypes.SET_TEXT,
+ element: id,
+ values,
+ })
+ }
+}
+
+function processTextContainer(
+ children: TextLike[],
+ context: TransformContext,
+) {
+ const values = children.map(child => createTextLikeExpression(child, context))
+ const literals = values.map(getLiteralExpressionValue)
+ if (literals.every(l => l != null)) {
+ context.childrenTemplate = literals.map(l => String(l))
+ } else {
+ context.childrenTemplate = [' ']
+ context.registerOperation({
+ type: IRNodeTypes.GET_TEXT_CHILD,
+ parent: context.reference(),
+ })
+ context.registerEffect(values, {
+ type: IRNodeTypes.SET_TEXT,
+ element: context.reference(),
+ values,
+ // indicates this node is generated, so prefix should be "x" instead of "n"
+ generated: true,
+ })
+ }
+}
+
+function createTextLikeExpression(node: TextLike, context: TransformContext) {
+ seen.get(context.root)!.add(node)
+ if (node.type === NodeTypes.TEXT) {
+ return createSimpleExpression(node.content, true, node.loc)
+ } else {
+ return node.content as SimpleExpressionNode
+ }
+}
+
+function isTextLike(node: TemplateChildNode): node is TextLike {
+ return node.type === NodeTypes.INTERPOLATION || node.type === NodeTypes.TEXT
+}
diff --git a/packages/compiler-vapor/src/transforms/utils.ts b/packages/compiler-vapor/src/transforms/utils.ts
new file mode 100644
index 00000000000..b8e7adc6059
--- /dev/null
+++ b/packages/compiler-vapor/src/transforms/utils.ts
@@ -0,0 +1,63 @@
+import {
+ type AttributeNode,
+ type DirectiveNode,
+ type ElementNode,
+ ElementTypes,
+ NodeTypes,
+ type SimpleExpressionNode,
+ type TemplateChildNode,
+ type TemplateNode,
+ createSimpleExpression,
+} from '@vue/compiler-dom'
+import { extend } from '@vue/shared'
+import {
+ type BlockIRNode,
+ DynamicFlag,
+ type IRDynamicInfo,
+ IRNodeTypes,
+} from '../ir'
+
+export const newDynamic = (): IRDynamicInfo => ({
+ flags: DynamicFlag.REFERENCED,
+ children: [],
+})
+
+export const newBlock = (node: BlockIRNode['node']): BlockIRNode => ({
+ type: IRNodeTypes.BLOCK,
+ node,
+ dynamic: newDynamic(),
+ effect: [],
+ operation: [],
+ returns: [],
+ expressions: [],
+ tempId: 0,
+})
+
+export function wrapTemplate(node: ElementNode, dirs: string[]): TemplateNode {
+ if (node.tagType === ElementTypes.TEMPLATE) {
+ return node
+ }
+
+ const reserved: Array = []
+ const pass: Array = []
+ node.props.forEach(prop => {
+ if (prop.type === NodeTypes.DIRECTIVE && dirs.includes(prop.name)) {
+ reserved.push(prop)
+ } else {
+ pass.push(prop)
+ }
+ })
+
+ return extend({}, node, {
+ type: NodeTypes.ELEMENT,
+ tag: 'template',
+ props: reserved,
+ tagType: ElementTypes.TEMPLATE,
+ children: [extend({}, node, { props: pass } as TemplateChildNode)],
+ } as Partial)
+}
+
+export const EMPTY_EXPRESSION: SimpleExpressionNode = createSimpleExpression(
+ '',
+ true,
+)
diff --git a/packages/compiler-vapor/src/transforms/vBind.ts b/packages/compiler-vapor/src/transforms/vBind.ts
new file mode 100644
index 00000000000..dc56eb34b4e
--- /dev/null
+++ b/packages/compiler-vapor/src/transforms/vBind.ts
@@ -0,0 +1,74 @@
+import {
+ ErrorCodes,
+ NodeTypes,
+ type SimpleExpressionNode,
+ createCompilerError,
+ createSimpleExpression,
+} from '@vue/compiler-dom'
+import { camelize, extend } from '@vue/shared'
+import type { DirectiveTransform, TransformContext } from '../transform'
+import { resolveExpression } from '../utils'
+import { isReservedProp } from './transformElement'
+
+// same-name shorthand - :arg is expanded to :arg="arg"
+export function normalizeBindShorthand(
+ arg: SimpleExpressionNode,
+ context: TransformContext,
+): SimpleExpressionNode {
+ if (arg.type !== NodeTypes.SIMPLE_EXPRESSION || !arg.isStatic) {
+ // only simple expression is allowed for same-name shorthand
+ context.options.onError(
+ createCompilerError(
+ ErrorCodes.X_V_BIND_INVALID_SAME_NAME_ARGUMENT,
+ arg.loc,
+ ),
+ )
+ return createSimpleExpression('', true, arg.loc)
+ }
+
+ const propName = camelize(arg.content)
+ const exp = createSimpleExpression(propName, false, arg.loc)
+ exp.ast = null
+ return exp
+}
+
+export const transformVBind: DirectiveTransform = (dir, node, context) => {
+ const { loc, modifiers } = dir
+ let { exp } = dir
+ let arg = dir.arg!
+ const modifiersString = modifiers.map(s => s.content)
+
+ if (!exp) exp = normalizeBindShorthand(arg, context)
+ if (!exp.content.trim()) {
+ context.options.onError(
+ createCompilerError(ErrorCodes.X_V_BIND_NO_EXPRESSION, loc),
+ )
+ exp = createSimpleExpression('', true, loc)
+ }
+
+ exp = resolveExpression(exp)
+ arg = resolveExpression(arg)
+
+ if (arg.isStatic && isReservedProp(arg.content)) return
+
+ let camel = false
+ if (modifiersString.includes('camel')) {
+ if (arg.isStatic) {
+ arg = extend({}, arg, { content: camelize(arg.content) })
+ } else {
+ camel = true
+ }
+ }
+
+ return {
+ key: arg,
+ value: exp,
+ loc,
+ runtimeCamelize: camel,
+ modifier: modifiersString.includes('prop')
+ ? '.'
+ : modifiersString.includes('attr')
+ ? '^'
+ : undefined,
+ }
+}
diff --git a/packages/compiler-vapor/src/transforms/vFor.ts b/packages/compiler-vapor/src/transforms/vFor.ts
new file mode 100644
index 00000000000..d4cf42dbd55
--- /dev/null
+++ b/packages/compiler-vapor/src/transforms/vFor.ts
@@ -0,0 +1,89 @@
+import {
+ type ElementNode,
+ ElementTypes,
+ ErrorCodes,
+ type SimpleExpressionNode,
+ createCompilerError,
+} from '@vue/compiler-dom'
+import {
+ type NodeTransform,
+ type TransformContext,
+ createStructuralDirectiveTransform,
+} from '../transform'
+import {
+ type BlockIRNode,
+ DynamicFlag,
+ IRNodeTypes,
+ type VaporDirectiveNode,
+} from '../ir'
+import { findProp, isStaticExpression, propToExpression } from '../utils'
+import { newBlock, wrapTemplate } from './utils'
+
+export const transformVFor: NodeTransform = createStructuralDirectiveTransform(
+ 'for',
+ processFor,
+)
+
+export function processFor(
+ node: ElementNode,
+ dir: VaporDirectiveNode,
+ context: TransformContext,
+) {
+ if (!dir.exp) {
+ context.options.onError(
+ createCompilerError(ErrorCodes.X_V_FOR_NO_EXPRESSION, dir.loc),
+ )
+ return
+ }
+ const parseResult = dir.forParseResult
+ if (!parseResult) {
+ context.options.onError(
+ createCompilerError(ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION, dir.loc),
+ )
+ return
+ }
+
+ const { source, value, key, index } = parseResult
+
+ const keyProp = findProp(node, 'key')
+ const keyProperty = keyProp && propToExpression(keyProp)
+ const isComponent = node.tagType === ElementTypes.COMPONENT
+ context.node = node = wrapTemplate(node, ['for'])
+ context.dynamic.flags |= DynamicFlag.NON_TEMPLATE | DynamicFlag.INSERT
+ const id = context.reference()
+ const render: BlockIRNode = newBlock(node)
+ const exitBlock = context.enterBlock(render, true)
+ context.reference()
+
+ return (): void => {
+ exitBlock()
+
+ const { parent } = context
+
+ // if v-for is the only child of a parent element, it can go the fast path
+ // when the entire list is emptied
+ const isOnlyChild =
+ parent &&
+ parent.block.node !== parent.node &&
+ parent.node.children.length === 1
+
+ context.dynamic.operation = {
+ type: IRNodeTypes.FOR,
+ id,
+ source: source as SimpleExpressionNode,
+ value: value as SimpleExpressionNode | undefined,
+ key: key as SimpleExpressionNode | undefined,
+ index: index as SimpleExpressionNode | undefined,
+ keyProp: keyProperty,
+ render,
+ once:
+ context.inVOnce ||
+ isStaticExpression(
+ source as SimpleExpressionNode,
+ context.options.bindingMetadata,
+ ),
+ component: isComponent,
+ onlyChild: !!isOnlyChild,
+ }
+ }
+}
diff --git a/packages/compiler-vapor/src/transforms/vHtml.ts b/packages/compiler-vapor/src/transforms/vHtml.ts
new file mode 100644
index 00000000000..6b9a269e495
--- /dev/null
+++ b/packages/compiler-vapor/src/transforms/vHtml.ts
@@ -0,0 +1,26 @@
+import { IRNodeTypes } from '../ir'
+import type { DirectiveTransform } from '../transform'
+import { DOMErrorCodes, createDOMCompilerError } from '@vue/compiler-dom'
+import { EMPTY_EXPRESSION } from './utils'
+
+export const transformVHtml: DirectiveTransform = (dir, node, context) => {
+ let { exp, loc } = dir
+ if (!exp) {
+ context.options.onError(
+ createDOMCompilerError(DOMErrorCodes.X_V_HTML_NO_EXPRESSION, loc),
+ )
+ exp = EMPTY_EXPRESSION
+ }
+ if (node.children.length) {
+ context.options.onError(
+ createDOMCompilerError(DOMErrorCodes.X_V_HTML_WITH_CHILDREN, loc),
+ )
+ context.childrenTemplate.length = 0
+ }
+
+ context.registerEffect([exp], {
+ type: IRNodeTypes.SET_HTML,
+ element: context.reference(),
+ value: exp,
+ })
+}
diff --git a/packages/compiler-vapor/src/transforms/vIf.ts b/packages/compiler-vapor/src/transforms/vIf.ts
new file mode 100644
index 00000000000..088af62e193
--- /dev/null
+++ b/packages/compiler-vapor/src/transforms/vIf.ts
@@ -0,0 +1,133 @@
+import {
+ type ElementNode,
+ ErrorCodes,
+ createCompilerError,
+ createSimpleExpression,
+} from '@vue/compiler-dom'
+import {
+ type NodeTransform,
+ type TransformContext,
+ createStructuralDirectiveTransform,
+} from '../transform'
+import {
+ type BlockIRNode,
+ DynamicFlag,
+ IRNodeTypes,
+ type VaporDirectiveNode,
+} from '../ir'
+import { extend } from '@vue/shared'
+import { newBlock, wrapTemplate } from './utils'
+import { getSiblingIf } from './transformComment'
+import { isStaticExpression } from '../utils'
+
+export const transformVIf: NodeTransform = createStructuralDirectiveTransform(
+ ['if', 'else', 'else-if'],
+ processIf,
+)
+
+export function processIf(
+ node: ElementNode,
+ dir: VaporDirectiveNode,
+ context: TransformContext,
+): (() => void) | undefined {
+ if (dir.name !== 'else' && (!dir.exp || !dir.exp.content.trim())) {
+ const loc = dir.exp ? dir.exp.loc : node.loc
+ context.options.onError(
+ createCompilerError(ErrorCodes.X_V_IF_NO_EXPRESSION, dir.loc),
+ )
+ dir.exp = createSimpleExpression(`true`, false, loc)
+ }
+
+ context.dynamic.flags |= DynamicFlag.NON_TEMPLATE
+ if (dir.name === 'if') {
+ const id = context.reference()
+ context.dynamic.flags |= DynamicFlag.INSERT
+ const [branch, onExit] = createIfBranch(node, context)
+
+ return () => {
+ onExit()
+ context.dynamic.operation = {
+ type: IRNodeTypes.IF,
+ id,
+ condition: dir.exp!,
+ positive: branch,
+ once:
+ context.inVOnce ||
+ isStaticExpression(dir.exp!, context.options.bindingMetadata),
+ }
+ }
+ } else {
+ // check the adjacent v-if
+ const siblingIf = getSiblingIf(context, true)
+
+ const siblings = context.parent && context.parent.dynamic.children
+ let lastIfNode
+ if (siblings) {
+ let i = siblings.length
+ while (i--) {
+ if (siblings[i].operation) lastIfNode = siblings[i].operation
+ }
+ }
+
+ if (
+ // check if v-if is the sibling node
+ !siblingIf ||
+ // check if IfNode is the last operation and get the root IfNode
+ !lastIfNode ||
+ lastIfNode.type !== IRNodeTypes.IF
+ ) {
+ context.options.onError(
+ createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, node.loc),
+ )
+ return
+ }
+
+ while (lastIfNode.negative && lastIfNode.negative.type === IRNodeTypes.IF) {
+ lastIfNode = lastIfNode.negative
+ }
+
+ // Check if v-else was followed by v-else-if
+ if (dir.name === 'else-if' && lastIfNode.negative) {
+ context.options.onError(
+ createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, node.loc),
+ )
+ }
+
+ // TODO ignore comments if the v-if is direct child of (PR #3622)
+ if (__DEV__ && context.root.comment.length) {
+ node = wrapTemplate(node, ['else-if', 'else'])
+ context.node = node = extend({}, node, {
+ children: [...context.comment, ...node.children],
+ })
+ }
+ context.root.comment = []
+
+ const [branch, onExit] = createIfBranch(node, context)
+
+ if (dir.name === 'else') {
+ lastIfNode.negative = branch
+ } else {
+ lastIfNode.negative = {
+ type: IRNodeTypes.IF,
+ id: -1,
+ condition: dir.exp!,
+ positive: branch,
+ once: context.inVOnce,
+ }
+ }
+
+ return () => onExit()
+ }
+}
+
+export function createIfBranch(
+ node: ElementNode,
+ context: TransformContext,
+): [BlockIRNode, () => void] {
+ context.node = node = wrapTemplate(node, ['if', 'else-if', 'else'])
+
+ const branch: BlockIRNode = newBlock(node)
+ const exitBlock = context.enterBlock(branch)
+ context.reference()
+ return [branch, exitBlock]
+}
diff --git a/packages/compiler-vapor/src/transforms/vModel.ts b/packages/compiler-vapor/src/transforms/vModel.ts
new file mode 100644
index 00000000000..e92f1bcebff
--- /dev/null
+++ b/packages/compiler-vapor/src/transforms/vModel.ts
@@ -0,0 +1,163 @@
+import {
+ BindingTypes,
+ DOMErrorCodes,
+ ElementTypes,
+ ErrorCodes,
+ NodeTypes,
+ createCompilerError,
+ createDOMCompilerError,
+ createSimpleExpression,
+ findDir,
+ findProp,
+ hasDynamicKeyVBind,
+ isMemberExpression,
+ isStaticArgOf,
+} from '@vue/compiler-dom'
+import type { DirectiveTransform } from '../transform'
+import { type DirectiveIRNode, IRNodeTypes } from '../ir'
+
+export const transformVModel: DirectiveTransform = (dir, node, context) => {
+ const { exp, arg } = dir
+ if (!exp) {
+ context.options.onError(
+ createCompilerError(ErrorCodes.X_V_MODEL_NO_EXPRESSION, dir.loc),
+ )
+ return
+ }
+
+ // we assume v-model directives are always parsed
+ // (not artificially created by a transform)
+ const rawExp = exp.loc.source
+
+ // in SFC ` +
+ sfc
+ }
+ const descriptor = parse(sfc).descriptor
+
+ const script = compileScript(descriptor, {
+ id: 'x',
+ isProd: true,
+ inlineTemplate: true,
+ genDefaultAs: '__sfc__',
+ vapor: true,
+ templateOptions: {
+ ssr,
+ },
+ })
+
+ const code =
+ script.content
+ .replace(/\bimport {/g, 'const {')
+ .replace(/ as _/g, ': _')
+ .replace(/} from ['"]vue['"]/g, `} = Vue`)
+ .replace(/} from "vue\/server-renderer"/g, '} = VueServerRenderer') +
+ '\nreturn __sfc__'
+
+ return new Function('Vue', 'VueServerRenderer', '_data', '_components', code)(
+ Vue,
+ VueServerRenderer,
+ data,
+ components,
+ )
+}
+
+async function testHydration(
+ code: string,
+ components: Record = {},
+) {
+ const data = ref('foo')
+ const ssrComponents: any = {}
+ const clientComponents: any = {}
+ for (const key in components) {
+ clientComponents[key] = compile(components[key], data, clientComponents)
+ ssrComponents[key] = compile(components[key], data, ssrComponents, true)
+ }
+
+ const serverComp = compile(code, data, ssrComponents, true)
+ const html = await VueServerRenderer.renderToString(
+ runtimeDom.createSSRApp(serverComp),
+ )
+ const container = document.createElement('div')
+ document.body.appendChild(container)
+ container.innerHTML = html
+
+ const clientComp = compile(code, data, clientComponents)
+ const app = createVaporSSRApp(clientComp)
+ app.mount(container)
+ return { data, container }
+}
+
+const triggerEvent = (type: string, el: Element) => {
+ const event = new Event(type, { bubbles: true })
+ el.dispatchEvent(event)
+}
+
+describe('Vapor Mode hydration', () => {
+ delegateEvents('click')
+
+ beforeEach(() => {
+ document.body.innerHTML = ''
+ })
+
+ test('root text', async () => {
+ const { data, container } = await testHydration(`
+ {{ data }}
+ `)
+ expect(container.innerHTML).toMatchInlineSnapshot(`"foo"`)
+
+ data.value = 'bar'
+ await nextTick()
+ expect(container.innerHTML).toMatchInlineSnapshot(`"bar"`)
+ })
+
+ test('root comment', async () => {
+ const { container } = await testHydration(`
+
+ `)
+ expect(container.innerHTML).toBe('')
+ expect(`Hydration children mismatch in
', + '
+
`,
+ )
+ expect(code).matchSnapshot()
+ })
+
+ test('dynamic root', () => {
+ const code = compile(`{{ 1 }}{{ 2 }}`)
+ expect(code).matchSnapshot()
+ })
+
+ test('dynamic root nodes and interpolation', () => {
+ const code = compile(
+ ``,
+ )
+ expect(code).matchSnapshot()
+ })
+
+ test('static + dynamic root', () => {
+ const code = compile(
+ `{{ 1 }}{{ 2 }}3{{ 4 }}{{ 5 }}6{{ 7 }}{{ 8 }}9{{ 'A' }}{{ 'B' }}`,
+ )
+ expect(code).matchSnapshot()
+ })
+
+ test('fragment', () => {
+ const code = compile(``)
+ expect(code).matchSnapshot()
+ })
+
+ test('bindings', () => {
+ const code = compile(`hello
+ + +count is {{ count }}.
`, {
+ bindingMetadata: {
+ count: BindingTypes.SETUP_REF,
+ },
+ })
+ expect(code).matchSnapshot()
+ })
+
+ describe('directives', () => {
+ describe('v-pre', () => {
+ test('basic', () => {
+ const code = compile(`test
`)
+ expect(code).toMatchSnapshot()
+ expect(code).not.contains('v-cloak')
+ })
+ })
+
+ describe('custom directive', () => {
+ test('basic', () => {
+ const code = compile(``, {
+ bindingMetadata: {
+ vExample: BindingTypes.SETUP_CONST,
+ },
+ })
+ expect(code).matchSnapshot()
+ })
+
+ test('binding value', () => {
+ const code = compile(``, {
+ bindingMetadata: {
+ msg: BindingTypes.SETUP_REF,
+ vExample: BindingTypes.SETUP_CONST,
+ },
+ })
+ expect(code).matchSnapshot()
+ })
+
+ test('static parameters', () => {
+ const code = compile(``, {
+ bindingMetadata: {
+ msg: BindingTypes.SETUP_REF,
+ vExample: BindingTypes.SETUP_CONST,
+ },
+ })
+ expect(code).matchSnapshot()
+ })
+
+ test('modifiers', () => {
+ const code = compile(``, {
+ bindingMetadata: {
+ msg: BindingTypes.SETUP_REF,
+ vExample: BindingTypes.SETUP_CONST,
+ },
+ })
+ expect(code).matchSnapshot()
+ })
+
+ test('modifiers w/o binding', () => {
+ const code = compile(``, {
+ bindingMetadata: {
+ vExample: BindingTypes.SETUP_CONST,
+ },
+ })
+ expect(code).matchSnapshot()
+ })
+
+ test('static parameters and modifiers', () => {
+ const code = compile(``, {
+ bindingMetadata: {
+ msg: BindingTypes.SETUP_REF,
+ vExample: BindingTypes.SETUP_CONST,
+ },
+ })
+ expect(code).matchSnapshot()
+ })
+
+ test('dynamic parameters', () => {
+ const code = compile(``, {
+ bindingMetadata: {
+ foo: BindingTypes.SETUP_REF,
+ vExample: BindingTypes.SETUP_CONST,
+ },
+ })
+ expect(code).matchSnapshot()
+ })
+ })
+ })
+
+ describe('expression parsing', () => {
+ test('interpolation', () => {
+ const code = compile(`{{ a + b }}`, {
+ inline: true,
+ bindingMetadata: {
+ b: BindingTypes.SETUP_REF,
+ },
+ })
+ expect(code).matchSnapshot()
+ expect(code).contains('a + b.value')
+ })
+
+ test('v-bind', () => {
+ const code = compile(``, {
+ inline: true,
+ bindingMetadata: {
+ key: BindingTypes.SETUP_REF,
+ foo: BindingTypes.SETUP_MAYBE_REF,
+ },
+ })
+ expect(code).matchSnapshot()
+ expect(code).contains('const _key = key.value')
+ expect(code).contains('_key+1')
+ expect(code).contains(
+ '_setDynamicProps(n0, [{ [_key+1]: _unref(foo)[_key+1]() }], true)',
+ )
+ })
+
+ // TODO: add more test for expression parsing (v-on, v-slot, v-for)
+ })
+
+ describe('custom directive', () => {
+ test('basic', () => {
+ const code = compile(``)
+ expect(code).matchSnapshot()
+ })
+
+ test('component', () => {
+ const code = compile(`
+
+
+ ", true)
+
+export function render(_ctx) {
+ const n4 = t1()
+ const n3 = _next(_child(n4))
+ _setInsertionState(n4, n3)
+ const n0 = _createIf(() => (1), () => {
+ const n2 = t0()
+ return n2
+ }, null, true)
+ return n4
+}"
+`;
+
+exports[`compiler: children transform > children & sibling references 1`] = `
+"import { child as _child, next as _next, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("
x
x
x
123
")
+const t1 = _template("")
+const t2 = _template("")
+
+export function render(_ctx) {
+ const n1 = t1()
+ const n3 = t2()
+ const n0 = t0()
+ const n2 = t2()
+ _insert(n0, n1)
+ _insert(n2, n3)
+ return [n1, n3]
+}"
+`;
+
+exports[`compiler: element transform > props + children 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > props merging: class 1`] = `
+"import { setClass as _setClass, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setClass(n0, ["foo", { bar: _ctx.isBar }]))
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > props merging: event handlers 1`] = `
+"import { withKeys as _withKeys, delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
+const t0 = _template("", true)
+_delegateEvents("click")
+
+export function render(_ctx) {
+ const n0 = t0()
+ _delegate(n0, "click", _withKeys(e => _ctx.a(e), ["foo"]))
+ _delegate(n0, "click", _withKeys(e => _ctx.b(e), ["bar"]))
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > props merging: style 1`] = `
+"import { setStyle as _setStyle, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _setStyle(n0, ["color: green", { color: 'red' }])
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > static props 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > v-bind="obj" 1`] = `
+"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setDynamicProps(n0, [_ctx.obj], true))
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > v-bind="obj" after static prop 1`] = `
+"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setDynamicProps(n0, [{ id: "foo" }, _ctx.obj], true))
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > v-bind="obj" before static prop 1`] = `
+"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setDynamicProps(n0, [_ctx.obj, { id: "foo" }], true))
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > v-bind="obj" between static props 1`] = `
+"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setDynamicProps(n0, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true))
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > v-on="obj" 1`] = `
+"import { setDynamicEvents as _setDynamicEvents, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ _renderEffect(() => _setDynamicEvents(n0, _ctx.obj))
+ return n0
+}"
+`;
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformRef.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformRef.spec.ts.snap
new file mode 100644
index 00000000000..a59b17d9429
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformRef.spec.ts.snap
@@ -0,0 +1,52 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: template ref transform > dynamic ref 1`] = `
+"import { renderEffect as _renderEffect, setRef as _setRef, template as _template } from 'vue';
+const t0 = _template("")
+
+export function render(_ctx) {
+ const n0 = t0()
+ let r0
+ _renderEffect(() => r0 = _setRef(n0, _ctx.foo, r0))
+ return n0
+}"
+`
+
+exports[`compiler: template ref transform > ref + v-for 1`] = `
+"import { setRef as _setRef, createFor as _createFor, template as _template } from 'vue';
+const t0 = _template("")
+
+export function render(_ctx) {
+ const n0 = _createFor(() => ([1,2,3]), (_block) => {
+ const n2 = t0()
+ _setRef(n2, "foo", void 0, true)
+ return [n2, () => {}]
+ })
+ return n0
+}"
+`
+
+exports[`compiler: template ref transform > ref + v-if 1`] = `
+"import { setRef as _setRef, createIf as _createIf, template as _template } from 'vue';
+const t0 = _template("")
+
+export function render(_ctx) {
+ const n0 = _createIf(() => (true), () => {
+ const n2 = t0()
+ _setRef(n2, "foo")
+ return n2
+ })
+ return n0
+}"
+`
+
+exports[`compiler: template ref transform > static ref 1`] = `
+"import { setRef as _setRef, template as _template } from 'vue';
+const t0 = _template("")
+
+export function render(_ctx) {
+ const n0 = t0()
+ _setRef(n0, "foo")
+ return n0
+}"
+`
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformSlotOutlet.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformSlotOutlet.spec.ts.snap
new file mode 100644
index 00000000000..6d62b9c4e35
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformSlotOutlet.spec.ts.snap
@@ -0,0 +1,163 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: transform
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..ecf886d7cbb
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap
@@ -0,0 +1,34 @@
+// 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
+}"
+`;
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..16ab6ae3720
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
@@ -0,0 +1,136 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: v-if > basic v-if 1`] = `
+"import { child as _child, 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 { child as _child, 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 = _child(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 +}" +`; 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..cb1a05d2a43 --- /dev/null +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap @@ -0,0 +1,460 @@ +// 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 > 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 > 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..ab3ade45b60 --- /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
+ }, null, 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..4ecd8c76a7e
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
@@ -0,0 +1,254 @@
+// 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 > implicit default slot 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template("")
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n1 = _createComponentWithFallback(_component_Comp, null, {
+ "default": () => {
+ const n0 = t0()
+ return n0
+ }
+ }, true)
+ return n1
+}"
+`;
+
+exports[`compiler: transform slot > named slots w/ implicit default slot 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template("foo")
+const t1 = _template("bar")
+const t2 = _template("")
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n4 = _createComponentWithFallback(_component_Comp, null, {
+ "one": () => {
+ const n0 = t0()
+ return n0
+ },
+ "default": () => {
+ const n2 = t1()
+ const n3 = t2()
+ return [n2, n3]
+ }
+ }, true)
+ return n4
+}"
+`;
+
+exports[`compiler: transform slot > nested component slot 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_B = _resolveComponent("B")
+ const _component_A = _resolveComponent("A")
+ const n1 = _createComponentWithFallback(_component_A, null, {
+ "default": () => {
+ const n0 = _createComponentWithFallback(_component_B)
+ return n0
+ }
+ }, true)
+ return n1
+}"
+`;
+
+exports[`compiler: transform slot > nested slots scoping 1`] = `
+"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template(" ")
+
+export function render(_ctx) {
+ const _component_Inner = _resolveComponent("Inner")
+ const _component_Comp = _resolveComponent("Comp")
+ const n5 = _createComponentWithFallback(_component_Comp, null, {
+ "default": (_slotProps0) => {
+ const n1 = _createComponentWithFallback(_component_Inner, null, {
+ "default": (_slotProps1) => {
+ const n0 = t0()
+ _renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["foo"] + _slotProps1["bar"] + _ctx.baz)))
+ return n0
+ }
+ })
+ const n3 = t0()
+ _renderEffect(() => _setText(n3, " " + _toDisplayString(_slotProps0["foo"] + _ctx.bar + _ctx.baz)))
+ return [n1, n3]
+ }
+ }, true)
+ return n5
+}"
+`;
+
+exports[`compiler: transform slot > on component dynamically named slot 1`] = `
+"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template(" ")
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n1 = _createComponentWithFallback(_component_Comp, null, {
+ $: [
+ () => ({
+ name: _ctx.named,
+ fn: (_slotProps0) => {
+ const n0 = t0()
+ _renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["foo"] + _ctx.bar)))
+ return n0
+ }
+ })
+ ]
+ }, true)
+ return n1
+}"
+`;
+
+exports[`compiler: transform slot > on component named slot 1`] = `
+"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template(" ")
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n1 = _createComponentWithFallback(_component_Comp, null, {
+ "named": (_slotProps0) => {
+ const n0 = t0()
+ _renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["foo"] + _ctx.bar)))
+ return n0
+ }
+ }, true)
+ return n1
+}"
+`;
+
+exports[`compiler: transform slot > on-component default slot 1`] = `
+"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template(" ")
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n1 = _createComponentWithFallback(_component_Comp, null, {
+ "default": (_slotProps0) => {
+ const n0 = t0()
+ _renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["foo"] + _ctx.bar)))
+ return n0
+ }
+ }, true)
+ return n1
+}"
+`;
+
+exports[`compiler: transform slot > quote slot name 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n1 = _createComponentWithFallback(_component_Comp, null, {
+ "nav-bar-title-before": () => {
+ return null
+ }
+ }, true)
+ return n1
+}"
+`;
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap
new file mode 100644
index 00000000000..9a3b88acba3
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap
@@ -0,0 +1,35 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`v-text > should convert v-text to setText 1`] = `
+"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("
+
`,
+ )
+ 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))
+ _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..adaad182cf3
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
@@ -0,0 +1,941 @@
+import { makeCompile } from './_utils'
+import {
+ IRDynamicPropsKind,
+ IRNodeTypes,
+ transformChildren,
+ transformElement,
+ transformText,
+ transformVBind,
+ transformVOn,
+} from '../../src'
+import {
+ type BindingMetadata,
+ BindingTypes,
+ NodeTypes,
+} from '@vue/compiler-core'
+
+const compileWithElementTransform = makeCompile({
+ nodeTransforms: [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..5993511323b
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/transformSlotOutlet.spec.ts
@@ -0,0 +1,280 @@
+import { ErrorCodes, NodeTypes } from '@vue/compiler-core'
+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 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..0de0b6abca6
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/vHtml.spec.ts
@@ -0,0 +1,114 @@
+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('should raise error and ignore children when v-html is present', () => {
+ const onError = vi.fn()
+ const { code, ir, helpers } = 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..66cdf7b9306
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/vIf.spec.ts
@@ -0,0 +1,242 @@
+import { makeCompile } from './_utils'
+import {
+ IRNodeTypes,
+ type IfIRNode,
+ transformChildren,
+ transformComment,
+ transformElement,
+ transformText,
+ transformVIf,
+ transformVOnce,
+ transformVText,
+} from '../../src'
+import { NodeTypes } from '@vue/compiler-core'
+
+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('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..84ddb2e5d04
--- /dev/null
+++ b/packages/compiler-vapor/__tests__/transforms/vSlot.spec.ts
@@ -0,0 +1,501 @@
+import { ErrorCodes, NodeTypes } from '@vue/compiler-core'
+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(`
hello
`, {
+ onError,
+ })
+ expect(onError.mock.calls).toMatchObject([
+ [{ code: DOMErrorCodes.X_V_TEXT_WITH_CHILDREN }],
+ ])
+
+ // children should have been removed
+ expect(ir.template).toEqual(['`).not.toHaveBeenWarned()
+ })
+
+ test('root with mixed element and text', async () => {
+ const { container, data } = await testHydration(`
+ A{{ data }}{{ data }}
+ `)
+ expect(container.innerHTML).toMatchInlineSnapshot(
+ `" Afoofoo"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(container.innerHTML).toMatchInlineSnapshot(
+ `" Abarbar"`,
+ )
+ })
+
+ test('empty element', async () => {
+ const { container } = await testHydration(`
+
+ `)
+ expect(container.innerHTML).toBe('')
+ expect(`Hydration children mismatch in
`, () =>
+ // h('select', { multiple: 'multiple' }),
+ // )
+ // expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+ // mountWithHydration(``, () => h('div', { id: 'foo' }))
+ // expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(1)
+
+ // mountWithHydration(``, () => h('div', { id: 'foo' }))
+ // expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(2)
+ // })
+
+ // test('attr special case: textarea value', () => {
+ // mountWithHydration(``, () =>
+ // h('textarea', { value: 'foo' }),
+ // )
+ // mountWithHydration(``, () =>
+ // h('textarea', { value: '' }),
+ // )
+ // expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+ // mountWithHydration(``, () =>
+ // h('textarea', { value: 'bar' }),
+ // )
+ // expect(`Hydration attribute mismatch`).toHaveBeenWarned()
+ // })
+
+ // // #11873
+ // test('`).not.toHaveBeenWarned()
+ })
+
+ test('element with binding and text children', async () => {
+ const { container, data } = await testHydration(`
+ (r => setTimeout(r, 10))
+ // return () => h('h1', 'Async component')
+ // },
+ // }
+
+ // const AsyncWrapper = {
+ // render() {
+ // return h(AsyncComp)
+ // },
+ // }
+
+ // const SiblingComp = {
+ // setup() {
+ // toggle.value = false
+ // return () => h('span')
+ // },
+ // }
+
+ // const App = {
+ // setup() {
+ // return () =>
+ // h(
+ // Suspense,
+ // {},
+ // {
+ // default: () => [
+ // h('main', {}, [
+ // h(AsyncWrapper, {
+ // prop: toggle.value ? 'hello' : 'world',
+ // }),
+ // h(SiblingComp),
+ // ]),
+ // ],
+ // },
+ // )
+ // },
+ // }
+
+ // // server render
+ // const html = await renderToString(h(App))
+
+ // expect(html).toMatchInlineSnapshot(
+ // `"(r => setTimeout(r, 10))
+ // return () => h('h1', 'Async component')
+ // },
+ // }
+
+ // const AsyncWrapper = { render: () => h(AsyncComp) }
+ // const AsyncWrapperWrapper = { render: () => h(AsyncWrapper) }
+
+ // const SiblingComp = {
+ // setup() {
+ // toggle.value = false
+ // return () => h('span')
+ // },
+ // }
+
+ // const App = {
+ // setup() {
+ // return () =>
+ // h(
+ // Suspense,
+ // {},
+ // {
+ // default: () => [
+ // h('main', {}, [
+ // h(AsyncWrapperWrapper, {
+ // prop: toggle.value ? 'hello' : 'world',
+ // }),
+ // h(SiblingComp),
+ // ]),
+ // ],
+ // },
+ // )
+ // },
+ // }
+
+ // // server render
+ // const html = await renderToString(h(App))
+
+ // expect(html).toMatchInlineSnapshot(
+ // `" & {
+ // el: Element
+ // }
+ // ).el instanceof SVGElement,
+ // )
+ // })
+
+ // test('force hydrate prop with `.prop` modifier', () => {
+ // const { container } = mountWithHydration('', () =>
+ // h('input', {
+ // type: 'checkbox',
+ // '.indeterminate': true,
+ // }),
+ // )
+ // expect((container.firstChild! as any).indeterminate).toBe(true)
+ // })
+
+ // test('force hydrate input v-model with non-string value bindings', () => {
+ // const { container } = mountWithHydration(
+ // '',
+ // () =>
+ // withDirectives(
+ // createVNode(
+ // 'input',
+ // { type: 'checkbox', 'true-value': true },
+ // null,
+ // PatchFlags.PROPS,
+ // ['true-value'],
+ // ),
+ // [[vModelCheckbox, true]],
+ // ),
+ // )
+ // expect((container.firstChild as any)._trueValue).toBe(true)
+ // })
+
+ // test('force hydrate checkbox with indeterminate', () => {
+ // const { container } = mountWithHydration(
+ // '',
+ // () =>
+ // createVNode(
+ // 'input',
+ // { type: 'checkbox', indeterminate: '' },
+ // null,
+ // PatchFlags.CACHED,
+ // ),
+ // )
+ // expect((container.firstChild as any).indeterminate).toBe(true)
+ // })
+
+ // test('force hydrate select option with non-string value bindings', () => {
+ // const { container } = mountWithHydration(
+ // '',
+ // () =>
+ // h('select', [
+ // // hoisted because bound value is a constant...
+ // createVNode('option', { value: true }, null, -1 /* HOISTED */),
+ // ]),
+ // )
+ // expect((container.firstChild!.firstChild as any)._value).toBe(true)
+ // })
+
+ // // #7203
+ // test('force hydrate custom element with dynamic props', () => {
+ // class MyElement extends HTMLElement {
+ // foo = ''
+ // constructor() {
+ // super()
+ // }
+ // }
+ // customElements.define('my-element-7203', MyElement)
+
+ // const msg = ref('bar')
+ // const container = document.createElement('div')
+ // container.innerHTML = '
+ //
+ //
+ // `,
+ // }).mount(container)
+
+ // expect(container.firstChild).toMatchInlineSnapshot(`
+ //
+ // `)
+
+ // triggerEvent('click', container.querySelector('button')!)
+ // await nextTick()
+ // expect(container.firstChild).toMatchInlineSnapshot(`
+ //
+ // `)
+ // })
+
+ // test('Suspense + transition appear', async () => {
+ // const { vnode, container } = mountWithHydration(
+ // ``
+ // const Comp = {
+ // render(this: any) {
+ // return (
+ // openBlock(),
+ // createElementBlock('div', null, [
+ // renderSlot(this.$slots, 'default'),
+ // ])
+ // )
+ // },
+ // }
+ // const show = ref(false)
+ // const clicked = ref(false)
+
+ // const Wrapper = {
+ // setup() {
+ // const items = ref([])
+ // onMounted(() => {
+ // items.value = [1]
+ // })
+ // return () => {
+ // return (
+ // openBlock(),
+ // createBlock(Comp, null, {
+ // default: withCtx(() => [
+ // createElementVNode('div', null, [
+ // createElementVNode('div', null, [
+ // clicked.value
+ // ? (openBlock(),
+ // createElementBlock('div', { key: 0 }, 'foo'))
+ // : createCommentVNode('v-if', true),
+ // ]),
+ // ]),
+ // createElementVNode(
+ // 'div',
+ // null,
+ // items.value.length,
+ // 1 /* TEXT */,
+ // ),
+ // ]),
+ // _: 1 /* STABLE */,
+ // })
+ // )
+ // }
+ // },
+ // }
+ // createSSRApp({
+ // components: { Wrapper },
+ // data() {
+ // return { show }
+ // },
+ // template: `
`, () =>
+ // h('select', { multiple: true }),
+ // )
+ // mountWithHydration(`{{ data }}
+ `)
+ expect(container.innerHTML).toMatchInlineSnapshot(
+ `"foo
"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(container.innerHTML).toMatchInlineSnapshot(
+ `""`,
+ )
+ })
+
+ test('element with elements children', async () => {
+ const { container } = await testHydration(`
+
+
+ {{ data }}
+
+
+
+ `)
+ expect(container.innerHTML).toMatchInlineSnapshot(
+ `"foo
"`,
+ )
+
+ // event handler
+ triggerEvent('click', container.querySelector('.foo')!)
+
+ await nextTick()
+ expect(container.innerHTML).toMatchInlineSnapshot(
+ `"bar
"`,
+ )
+ })
+
+ test('basic component', async () => {
+ const { container, data } = await testHydration(
+ `
+ foo
"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(container.innerHTML).toMatchInlineSnapshot(
+ `"bar
"`,
+ )
+ })
+
+ test('fragment component', async () => {
+ const { container, data } = await testHydration(
+ `
+ {{ data }}
-{{ data }}-` },
+ )
+ expect(container.innerHTML).toMatchInlineSnapshot(
+ `"foo
-foo-bar
-bar-{{ data }}
-{{ data }}-` },
+ )
+ expect(container.innerHTML).toMatchInlineSnapshot(
+ `"foo
-foo-bar
-bar-{{ data }}
-{{ data }}-`,
+ },
+ )
+ expect(container.innerHTML).toMatchInlineSnapshot(
+ `"foo
-foo-bar
-bar-
+
+
+
+ `,
+ {
+ Child: `{{ data }}`,
+ },
+ )
+ expect(container.innerHTML).toMatchInlineSnapshot()
+
+ data.value = 'bar'
+ await nextTick()
+ expect(container.innerHTML).toMatchInlineSnapshot()
+ })
+
+ test.todo('consecutive component with anchor insertion', async () => {
+ const { container, data } = await testHydration(
+ `
+
+
+
+
+ `,
+ {
+ Child: `{{ data }}`,
+ },
+ )
+ expect(container.innerHTML).toMatchInlineSnapshot()
+
+ data.value = 'bar'
+ await nextTick()
+ expect(container.innerHTML).toMatchInlineSnapshot()
+ })
+
+ test.todo('if')
+
+ test.todo('for')
+
+ test.todo('slots')
+
+ // test('element with ref', () => {
+ // const el = ref()
+ // const { vnode, container } = mountWithHydration('', () =>
+ // h('div', { ref: el }),
+ // )
+ // expect(vnode.el).toBe(container.firstChild)
+ // expect(el.value).toBe(vnode.el)
+ // })
+
+ // test('with data-allow-mismatch component when using onServerPrefetch', async () => {
+ // const Comp = {
+ // template: `
+ // Comp2
+ // `,
+ // }
+ // let foo: any
+ // const App = {
+ // setup() {
+ // const flag = ref(true)
+ // foo = () => {
+ // flag.value = false
+ // }
+ // onServerPrefetch(() => (flag.value = false))
+ // return { flag }
+ // },
+ // components: {
+ // Comp,
+ // },
+ // template: `
+ //
+ // Comp2
',
+ // )
+ // foo()
+ // await nextTick()
+ // expect(container.innerHTML).toBe(
+ // '',
+ // )
+ // })
+
+ // // compile SSR + client render fn from the same template & hydrate
+ // test('full compiler integration', async () => {
+ // const mounted: string[] = []
+ // const log = vi.fn()
+ // const toggle = ref(true)
+
+ // const Child = {
+ // data() {
+ // return {
+ // count: 0,
+ // text: 'hello',
+ // style: {
+ // color: 'red',
+ // },
+ // }
+ // },
+ // mounted() {
+ // mounted.push('child')
+ // },
+ // template: `
+ //
+ // {{ count }}
+ //
+ //
+ //
+ // {{ text }}
+ //
+ //
+ // `,
+ // }
+
+ // const App = {
+ // setup() {
+ // return { toggle }
+ // },
+ // mounted() {
+ // mounted.push('parent')
+ // },
+ // template: `
+ //
+ // hello
+ //
+ //
`,
+ // components: {
+ // Child,
+ // },
+ // methods: {
+ // log,
+ // },
+ // }
+
+ // const container = document.createElement('div')
+ // // server render
+ // container.innerHTML = await renderToString(h(App))
+ // // hydrate
+ // createSSRApp(App).mount(container)
+
+ // // assert interactions
+ // // 1. parent button click
+ // triggerEvent('click', container.querySelector('.parent-click')!)
+ // expect(log).toHaveBeenCalledWith('click')
+
+ // // 2. child inc click + text interpolation
+ // const count = container.querySelector('.count') as HTMLElement
+ // expect(count.textContent).toBe(`0`)
+ // triggerEvent('click', container.querySelector('.inc')!)
+ // await nextTick()
+ // expect(count.textContent).toBe(`1`)
+
+ // // 3. child color click + style binding
+ // expect(count.style.color).toBe('red')
+ // triggerEvent('click', container.querySelector('.change')!)
+ // await nextTick()
+ // expect(count.style.color).toBe('green')
+
+ // // 4. child event emit
+ // triggerEvent('click', container.querySelector('.emit')!)
+ // expect(log).toHaveBeenCalledWith('child')
+
+ // // 5. child v-model
+ // const text = container.querySelector('.text')!
+ // const input = container.querySelector('input')!
+ // expect(text.textContent).toBe('hello')
+ // input.value = 'bye'
+ // triggerEvent('input', input)
+ // await nextTick()
+ // expect(text.textContent).toBe('bye')
+ // })
+
+ // test('handle click error in ssr mode', async () => {
+ // const App = {
+ // setup() {
+ // const throwError = () => {
+ // throw new Error('Sentry Error')
+ // }
+ // return { throwError }
+ // },
+ // template: `
+ //
+ //
+ //
`,
+ // }
+
+ // const container = document.createElement('div')
+ // // server render
+ // container.innerHTML = await renderToString(h(App))
+ // // hydrate
+ // const app = createSSRApp(App)
+ // const handler = (app.config.errorHandler = vi.fn())
+ // app.mount(container)
+ // // assert interactions
+ // // parent button click
+ // triggerEvent('click', container.querySelector('.parent-click')!)
+ // expect(handler).toHaveBeenCalled()
+ // })
+
+ // test('handle blur error in ssr mode', async () => {
+ // const App = {
+ // setup() {
+ // const throwError = () => {
+ // throw new Error('Sentry Error')
+ // }
+ // return { throwError }
+ // },
+ // template: `
+ //
+ //
+ //
`,
+ // }
+
+ // const container = document.createElement('div')
+ // // server render
+ // container.innerHTML = await renderToString(h(App))
+ // // hydrate
+ // const app = createSSRApp(App)
+ // const handler = (app.config.errorHandler = vi.fn())
+ // app.mount(container)
+ // // assert interactions
+ // // parent blur event
+ // triggerEvent('blur', container.querySelector('.parent-click')!)
+ // expect(handler).toHaveBeenCalled()
+ // })
+
+ // test('async component', async () => {
+ // const spy = vi.fn()
+ // const Comp = () =>
+ // h(
+ // 'button',
+ // {
+ // onClick: spy,
+ // },
+ // 'hello!',
+ // )
+
+ // let serverResolve: any
+ // let AsyncComp = defineAsyncComponent(
+ // () =>
+ // new Promise(r => {
+ // serverResolve = r
+ // }),
+ // )
+
+ // const App = {
+ // render() {
+ // return ['hello', h(AsyncComp), 'world']
+ // },
+ // }
+
+ // // server render
+ // const htmlPromise = renderToString(h(App))
+ // serverResolve(Comp)
+ // const html = await htmlPromise
+ // expect(html).toMatchInlineSnapshot(
+ // `"helloworld"`,
+ // )
+
+ // // hydration
+ // let clientResolve: any
+ // AsyncComp = defineAsyncComponent(
+ // () =>
+ // new Promise(r => {
+ // clientResolve = r
+ // }),
+ // )
+
+ // const container = document.createElement('div')
+ // container.innerHTML = html
+ // createSSRApp(App).mount(container)
+
+ // // hydration not complete yet
+ // triggerEvent('click', container.querySelector('button')!)
+ // expect(spy).not.toHaveBeenCalled()
+
+ // // resolve
+ // clientResolve(Comp)
+ // await new Promise(r => setTimeout(r))
+
+ // // should be hydrated now
+ // triggerEvent('click', container.querySelector('button')!)
+ // expect(spy).toHaveBeenCalled()
+ // })
+
+ // test('update async wrapper before resolve', async () => {
+ // const Comp = {
+ // render() {
+ // return h('h1', 'Async component')
+ // },
+ // }
+ // let serverResolve: any
+ // let AsyncComp = defineAsyncComponent(
+ // () =>
+ // new Promise(r => {
+ // serverResolve = r
+ // }),
+ // )
+
+ // const toggle = ref(true)
+ // const App = {
+ // setup() {
+ // onMounted(() => {
+ // // change state, this makes updateComponent(AsyncComp) execute before
+ // // the async component is resolved
+ // toggle.value = false
+ // })
+
+ // return () => {
+ // return [toggle.value ? 'hello' : 'world', h(AsyncComp)]
+ // }
+ // },
+ // }
+
+ // // server render
+ // const htmlPromise = renderToString(h(App))
+ // serverResolve(Comp)
+ // const html = await htmlPromise
+ // expect(html).toMatchInlineSnapshot(
+ // `"helloAsync component
"`, + // ) + + // // hydration + // let clientResolve: any + // AsyncComp = defineAsyncComponent( + // () => + // new Promise(r => { + // clientResolve = r + // }), + // ) + + // const container = document.createElement('div') + // container.innerHTML = html + // createSSRApp(App).mount(container) + + // // resolve + // clientResolve(Comp) + // await new Promise(r => setTimeout(r)) + + // // should be hydrated now + // expect(`Hydration node mismatch`).not.toHaveBeenWarned() + // expect(container.innerHTML).toMatchInlineSnapshot( + // `"worldAsync component
"`, + // ) + // }) + + // test('hydrate safely when property used by async setup changed before render', async () => { + // const toggle = ref(true) + + // const AsyncComp = { + // async setup() { + // await new PromiseAsync component
Async component
Async component
Async component
async
hi
1
async
'
+
+ // createSSRApp({
+ // render() {
+ // return h('div', [show.value ? h(AsyncComp) : h('div', 'hi')])
+ // },
+ // }).mount(root)
+
+ // show.value = false
+ // await nextTick()
+ // expect(root.innerHTML).toBe('hi
foo
`,
+ // () =>
+ // h(
+ // Transition,
+ // { appear: true },
+ // {
+ // default: () => h('div', 'foo'),
+ // },
+ // ),
+ // )
+ // expect(container.firstChild).toMatchInlineSnapshot(`
+ //
+ // foo
+ //
+ // `)
+ // expect(vnode.el).toBe(container.firstChild)
+ // expect(`mismatch`).not.toHaveBeenWarned()
+ // })
+
+ // test('transition appear with v-if', () => {
+ // const show = false
+ // const { vnode, container } = mountWithHydration(
+ // ``,
+ // () =>
+ // h(
+ // Transition,
+ // { appear: true },
+ // {
+ // default: () => (show ? h('div', 'foo') : createCommentVNode('')),
+ // },
+ // ),
+ // )
+ // expect(container.firstChild).toMatchInlineSnapshot('')
+ // expect(vnode.el).toBe(container.firstChild)
+ // expect(`mismatch`).not.toHaveBeenWarned()
+ // })
+
+ // test('transition appear with v-show', () => {
+ // const show = false
+ // const { vnode, container } = mountWithHydration(
+ // ``,
+ // () =>
+ // h(
+ // Transition,
+ // { appear: true },
+ // {
+ // default: () =>
+ // withDirectives(createVNode('div', null, 'foo'), [[vShow, show]]),
+ // },
+ // ),
+ // )
+ // expect(container.firstChild).toMatchInlineSnapshot(`
+ //
+ // `)
+ // expect((container.firstChild as any)[vShowOriginalDisplay]).toBe('')
+ // expect(vnode.el).toBe(container.firstChild)
+ // expect(`mismatch`).not.toHaveBeenWarned()
+ // })
+
+ // test('transition appear w/ event listener', async () => {
+ // const container = document.createElement('div')
+ // container.innerHTML = ``
+ // createSSRApp({
+ // data() {
+ // return {
+ // count: 0,
+ // }
+ // },
+ // template: `
+ // foo
`,
+ // () =>
+ // h(Suspense, {}, () =>
+ // h(
+ // Transition,
+ // { appear: true },
+ // {
+ // default: () => h('div', 'foo'),
+ // },
+ // ),
+ // ),
+ // )
+
+ // expect(vnode.el).toBe(container.firstChild)
+ // // wait for hydration to finish
+ // await new Promise(r => setTimeout(r))
+
+ // expect(container.firstChild).toMatchInlineSnapshot(`
+ //
+ // foo
+ //
+ // `)
+ // await nextTick()
+ // expect(vnode.el).toBe(container.firstChild)
+ // })
+
+ // // #10607
+ // test('update component stable slot (prod + optimized mode)', async () => {
+ // __DEV__ = false
+ // try {
+ // const container = document.createElement('div')
+ // container.innerHTML = `0
1
foo
1
foo
`, () =>
+ // h('div', 'bar'),
+ // )
+ // expect(container.innerHTML).toBe('bar
')
+ // expect(`Hydration text content mismatch`).toHaveBeenWarned()
+ // })
+
+ // test('not enough children', () => {
+ // const { container } = mountWithHydration(``, () =>
+ // h('div', [h('span', 'foo'), h('span', 'bar')]),
+ // )
+ // expect(container.innerHTML).toBe(
+ // 'foobar
',
+ // )
+ // expect(`Hydration children mismatch`).toHaveBeenWarned()
+ // })
+
+ // test('too many children', () => {
+ // const { container } = mountWithHydration(
+ // `foobar
`,
+ // () => h('div', [h('span', 'foo')]),
+ // )
+ // expect(container.innerHTML).toBe('foo
')
+ // expect(`Hydration children mismatch`).toHaveBeenWarned()
+ // })
+
+ // test('complete mismatch', () => {
+ // const { container } = mountWithHydration(
+ // `foobar
`,
+ // () => h('div', [h('div', 'foo'), h('p', 'bar')]),
+ // )
+ // expect(container.innerHTML).toBe('foo
bar
foo
bar
replaced
')
+ // expect(`Hydration node mismatch`).toHaveBeenWarned()
+ // })
+
+ // test('fragment not enough children', () => {
+ // const { container } = mountWithHydration(
+ // `foo
baz
foo
bar
baz
foo
bar
baz
foo
baz
bar
+ // // as 2nd fragment child.
+ // expect(`Hydration text content mismatch`).toHaveBeenWarned()
+ // // excessive children removal
+ // expect(`Hydration children mismatch`).toHaveBeenWarned()
+ // })
+
+ // test('Teleport target has empty children', () => {
+ // const teleportContainer = document.createElement('div')
+ // teleportContainer.id = 'teleport'
+ // document.body.appendChild(teleportContainer)
+
+ // mountWithHydration('', () =>
+ // h(Teleport, { to: '#teleport' }, [h('span', 'value')]),
+ // )
+ // expect(teleportContainer.innerHTML).toBe(`value`)
+ // expect(`Hydration children mismatch`).toHaveBeenWarned()
+ // })
+
+ // test('comment mismatch (element)', () => {
+ // const { container } = mountWithHydration(``, () =>
+ // h('div', [createCommentVNode('hi')]),
+ // )
+ // expect(container.innerHTML).toBe('')
+ // expect(`Hydration node mismatch`).toHaveBeenWarned()
+ // })
+
+ // test('comment mismatch (text)', () => {
+ // const { container } = mountWithHydration(`
foobar
`, () =>
+ // h('div', [createCommentVNode('hi')]),
+ // )
+ // expect(container.innerHTML).toBe('')
+ // expect(`Hydration node mismatch`).toHaveBeenWarned()
+ // })
+
+ // test('class mismatch', () => {
+ // mountWithHydration(``, () =>
+ // h('div', { class: ['foo', 'bar'] }),
+ // )
+ // mountWithHydration(``, () =>
+ // h('div', { class: { foo: true, bar: true } }),
+ // )
+ // mountWithHydration(``, () =>
+ // h('div', { class: 'foo bar' }),
+ // )
+ // // SVG classes
+ // mountWithHydration(``, () =>
+ // h('svg', { class: 'foo bar' }),
+ // )
+ // // class with different order
+ // mountWithHydration(``, () =>
+ // h('div', { class: 'bar foo' }),
+ // )
+ // expect(`Hydration class mismatch`).not.toHaveBeenWarned()
+ // mountWithHydration(``, () =>
+ // h('div', { class: 'foo' }),
+ // )
+ // expect(`Hydration class mismatch`).toHaveBeenWarned()
+ // })
+
+ // test('style mismatch', () => {
+ // mountWithHydration(``, () =>
+ // h('div', { style: { color: 'red' } }),
+ // )
+ // mountWithHydration(``, () =>
+ // h('div', { style: `color:red;` }),
+ // )
+ // mountWithHydration(
+ // ``,
+ // () => h('div', { style: `font-size: 12px; color:red;` }),
+ // )
+ // mountWithHydration(``, () =>
+ // withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+ // [vShow, false],
+ // ]),
+ // )
+ // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ // mountWithHydration(``, () =>
+ // h('div', { style: { color: 'green' } }),
+ // )
+ // expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
+ // })
+
+ // test('style mismatch when no style attribute is present', () => {
+ // mountWithHydration(``, () =>
+ // h('div', { style: { color: 'red' } }),
+ // )
+ // expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
+ // })
+
+ // test('style mismatch w/ v-show', () => {
+ // mountWithHydration(``, () =>
+ // withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+ // [vShow, false],
+ // ]),
+ // )
+ // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ // mountWithHydration(``, () =>
+ // withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+ // [vShow, false],
+ // ]),
+ // )
+ // expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
+ // })
+
+ // test('attr mismatch', () => {
+ // mountWithHydration(``, () => h('div', { id: 'foo' }))
+ // mountWithHydration(``, () =>
+ // h('div', { spellcheck: '' }),
+ // )
+ // mountWithHydration(``, () => h('div', { id: undefined }))
+ // // boolean
+ // mountWithHydration(`