diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap index 1682d354d..74932f20d 100644 --- a/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap +++ b/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap @@ -1,8 +1,8 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`compile > bindings 1`] = ` -"import { template, children, createTextNode, insert, effect, setText } from 'vue/vapor'; -const t0 = template('
count is .
'); +"import { template as _template, children as _children, createTextNode as _createTextNode, insert as _insert, effect as _effect, setText as _setText } from 'vue/vapor'; +const t0 = _template('
count is .
'); export function render(_ctx) { const n0 = t0(); const { @@ -12,11 +12,11 @@ export function render(_ctx) { 1: [n2], }, ], - } = children(n0); - const n1 = createTextNode(count.value); - insert(n1, n3, n2); - effect(() => { - setText(n1, undefined, count.value); + } = _children(n0); + const n1 = _createTextNode(count.value); + _insert(n1, n3, n2); + _effect(() => { + _setText(n1, undefined, count.value); }); return n0; } @@ -24,15 +24,15 @@ export function render(_ctx) { `; exports[`compile > directives > v-bind > simple expression 1`] = ` -"import { template, children, effect, setAttr } from 'vue/vapor'; -const t0 = template('
'); +"import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor'; +const t0 = _template('
'); export function render(_ctx) { const n0 = t0(); const { 0: [n1], - } = children(n0); - effect(() => { - setAttr(n1, 'id', undefined, id.value); + } = _children(n0); + _effect(() => { + _setAttr(n1, 'id', undefined, id.value); }); return n0; } @@ -40,15 +40,15 @@ export function render(_ctx) { `; exports[`compile > directives > v-html > no expression 1`] = ` -"import { template, children, effect, setHtml } from 'vue/vapor'; -const t0 = template('
'); +"import { template as _template, children as _children, effect as _effect, setHtml as _setHtml } from 'vue/vapor'; +const t0 = _template('
'); export function render(_ctx) { const n0 = t0(); const { 0: [n1], - } = children(n0); - effect(() => { - setHtml(n1, undefined, ''); + } = _children(n0); + _effect(() => { + _setHtml(n1, undefined, ''); }); return n0; } @@ -56,15 +56,15 @@ export function render(_ctx) { `; exports[`compile > directives > v-html > simple expression 1`] = ` -"import { template, children, effect, setHtml } from 'vue/vapor'; -const t0 = template('
'); +"import { template as _template, children as _children, effect as _effect, setHtml as _setHtml } from 'vue/vapor'; +const t0 = _template('
'); export function render(_ctx) { const n0 = t0(); const { 0: [n1], - } = children(n0); - effect(() => { - setHtml(n1, undefined, code.value); + } = _children(n0); + _effect(() => { + _setHtml(n1, undefined, code.value); }); return n0; } @@ -72,15 +72,15 @@ export function render(_ctx) { `; exports[`compile > directives > v-on > event modifier 1`] = ` -"import { template, children, effect, withModifiers, on } from 'vue/vapor'; -const t0 = template('
'); +"import { template as _template, children as _children, effect as _effect, withModifiers as _withModifiers, on as _on } from 'vue/vapor'; +const t0 = _template('
'); export function render(_ctx) { const n0 = t0(); const { 0: [n1], - } = children(n0); - effect(() => { - on(n1, 'click', withModifiers(handleClick, ['prevent', 'stop'])); + } = _children(n0); + _effect(() => { + _on(n1, 'click', _withModifiers(handleClick, ['prevent', 'stop'])); }); return n0; } @@ -88,15 +88,15 @@ export function render(_ctx) { `; exports[`compile > directives > v-on > simple expression 1`] = ` -"import { template, children, effect, on } from 'vue/vapor'; -const t0 = template('
'); +"import { template as _template, children as _children, effect as _effect, on as _on } from 'vue/vapor'; +const t0 = _template('
'); export function render(_ctx) { const n0 = t0(); const { 0: [n1], - } = children(n0); - effect(() => { - on(n1, 'click', handleClick); + } = _children(n0); + _effect(() => { + _on(n1, 'click', handleClick); }); return n0; } @@ -104,22 +104,22 @@ export function render(_ctx) { `; exports[`compile > directives > v-once > as root node 1`] = ` -"import { template, children, setAttr } from 'vue/vapor'; -const t0 = template('
'); +"import { template as _template, children as _children, setAttr as _setAttr } from 'vue/vapor'; +const t0 = _template('
'); export function render(_ctx) { const n0 = t0(); const { 0: [n1], - } = children(n0); - setAttr(n1, 'id', undefined, foo); + } = _children(n0); + _setAttr(n1, 'id', undefined, foo); return n0; } " `; exports[`compile > directives > v-once > basic 1`] = ` -"import { template, children, createTextNode, setText, setAttr, prepend } from 'vue/vapor'; -const t0 = template('
'); +"import { template as _template, children as _children, createTextNode as _createTextNode, setText as _setText, setAttr as _setAttr, prepend as _prepend } from 'vue/vapor'; +const t0 = _template('
'); export function render(_ctx) { const n0 = t0(); const { @@ -129,19 +129,19 @@ export function render(_ctx) { 1: [n2], }, ], - } = children(n0); - const n1 = createTextNode(msg.value); - setText(n1, undefined, msg.value); - setAttr(n2, 'class', undefined, clz.value); - prepend(n3, n1); + } = _children(n0); + const n1 = _createTextNode(msg.value); + _setText(n1, undefined, msg.value); + _setAttr(n2, 'class', undefined, clz.value); + _prepend(n3, n1); return n0; } " `; exports[`compile > directives > v-pre > basic 1`] = ` -"import { template } from 'vue/vapor'; -const t0 = template('
{{ bar }}
'); +"import { template as _template } from 'vue/vapor'; +const t0 = _template('
{{ bar }}
'); export function render(_ctx) { const n0 = t0(); return n0; @@ -150,20 +150,20 @@ export function render(_ctx) { `; exports[`compile > directives > v-pre > self-closing v-pre 1`] = ` -"import { template, children, createTextNode, append, effect, setAttr, setText } from 'vue/vapor'; -const t0 = template('
'); +"import { template as _template, children as _children, createTextNode as _createTextNode, append as _append, effect as _effect, setAttr as _setAttr, setText as _setText } from 'vue/vapor'; +const t0 = _template('
'); export function render(_ctx) { const n0 = t0(); const { 1: [n1], - } = children(n0); - const n2 = createTextNode(bar); - append(n1, n2); - effect(() => { - setAttr(n1, 'id', undefined, foo); + } = _children(n0); + const n2 = _createTextNode(bar); + _append(n1, n2); + _effect(() => { + _setAttr(n1, 'id', undefined, foo); }); - effect(() => { - setText(n2, undefined, bar); + _effect(() => { + _setText(n2, undefined, bar); }); return n0; } @@ -171,20 +171,20 @@ export function render(_ctx) { `; exports[`compile > directives > v-pre > should not affect siblings after it 1`] = ` -"import { template, children, createTextNode, append, effect, setAttr, setText } from 'vue/vapor'; -const t0 = template('
{{ bar }}
'); +"import { template as _template, children as _children, createTextNode as _createTextNode, append as _append, effect as _effect, setAttr as _setAttr, setText as _setText } from 'vue/vapor'; +const t0 = _template('
{{ bar }}
'); export function render(_ctx) { const n0 = t0(); const { 1: [n1], - } = children(n0); - const n2 = createTextNode(bar.value); - append(n1, n2); - effect(() => { - setAttr(n1, 'id', undefined, foo.value); + } = _children(n0); + const n2 = _createTextNode(bar.value); + _append(n1, n2); + _effect(() => { + _setAttr(n1, 'id', undefined, foo.value); }); - effect(() => { - setText(n2, undefined, bar.value); + _effect(() => { + _setText(n2, undefined, bar.value); }); return n0; } @@ -192,15 +192,15 @@ export function render(_ctx) { `; exports[`compile > directives > v-text > no expression 1`] = ` -"import { template, children, effect, setText } from 'vue/vapor'; -const t0 = template('
'); +"import { template as _template, children as _children, effect as _effect, setText as _setText } from 'vue/vapor'; +const t0 = _template('
'); export function render(_ctx) { const n0 = t0(); const { 0: [n1], - } = children(n0); - effect(() => { - setText(n1, undefined, ''); + } = _children(n0); + _effect(() => { + _setText(n1, undefined, ''); }); return n0; } @@ -208,15 +208,15 @@ export function render(_ctx) { `; exports[`compile > directives > v-text > simple expression 1`] = ` -"import { template, children, effect, setText } from 'vue/vapor'; -const t0 = template('
'); +"import { template as _template, children as _children, effect as _effect, setText as _setText } from 'vue/vapor'; +const t0 = _template('
'); export function render(_ctx) { const n0 = t0(); const { 0: [n1], - } = children(n0); - effect(() => { - setText(n1, undefined, str.value); + } = _children(n0); + _effect(() => { + _setText(n1, undefined, str.value); }); return n0; } @@ -224,18 +224,18 @@ export function render(_ctx) { `; exports[`compile > dynamic root 1`] = ` -"import { fragment, createTextNode, append, effect, setText } from 'vue/vapor'; +"import { fragment as _fragment, createTextNode as _createTextNode, append as _append, effect as _effect, setText as _setText } from 'vue/vapor'; export function render(_ctx) { - const t0 = fragment(); + const t0 = _fragment(); const n0 = t0(); - const n1 = createTextNode(1); - const n2 = createTextNode(2); - append(n0, n1, n2); - effect(() => { - setText(n1, undefined, 1); + const n1 = _createTextNode(1); + const n2 = _createTextNode(2); + _append(n0, n1, n2); + _effect(() => { + _setText(n1, undefined, 1); }); - effect(() => { - setText(n2, undefined, 2); + _effect(() => { + _setText(n2, undefined, 2); }); return n0; } @@ -243,8 +243,8 @@ export function render(_ctx) { `; exports[`compile > dynamic root nodes and interpolation 1`] = ` -"import { template, children, createTextNode, prepend, insert, append, effect, on, setAttr, setText } from 'vue/vapor'; -const t0 = template(''); +"import { template as _template, children as _children, createTextNode as _createTextNode, prepend as _prepend, insert as _insert, append as _append, effect as _effect, on as _on, setAttr as _setAttr, setText as _setText } from 'vue/vapor'; +const t0 = _template(''); export function render(_ctx) { const n0 = t0(); const { @@ -254,21 +254,21 @@ export function render(_ctx) { 1: [n5], }, ], - } = children(n0); - const n2 = createTextNode(count); - const n3 = createTextNode(count); - const n4 = createTextNode(count); - prepend(n1, n2); - insert(n3, n1, n5); - append(n1, n4); - effect(() => { - on(n1, 'click', handleClick); + } = _children(n0); + const n2 = _createTextNode(count); + const n3 = _createTextNode(count); + const n4 = _createTextNode(count); + _prepend(n1, n2); + _insert(n3, n1, n5); + _append(n1, n4); + _effect(() => { + _on(n1, 'click', handleClick); }); - effect(() => { - setAttr(n1, 'id', undefined, count); - setText(n2, undefined, count); - setText(n3, undefined, count); - setText(n4, undefined, count); + _effect(() => { + _setAttr(n1, 'id', undefined, count); + _setText(n2, undefined, count); + _setText(n3, undefined, count); + _setText(n4, undefined, count); }); return n0; } @@ -276,8 +276,8 @@ export function render(_ctx) { `; exports[`compile > fragment 1`] = ` -"import { template } from 'vue/vapor'; -const t0 = template('

'); +"import { template as _template } from 'vue/vapor'; +const t0 = _template('

'); export function render(_ctx) { const n0 = t0(); return n0; @@ -286,49 +286,49 @@ export function render(_ctx) { `; exports[`compile > static + dynamic root 1`] = ` -"import { template, children, createTextNode, prepend, insert, append, effect, setText } from 'vue/vapor'; -const t0 = template('369'); +"import { template as _template, children as _children, createTextNode as _createTextNode, prepend as _prepend, insert as _insert, append as _append, effect as _effect, setText as _setText } from 'vue/vapor'; +const t0 = _template('369'); export function render(_ctx) { const n0 = t0(); const { 1: [n9], 3: [n10], - } = children(n0); - const n1 = createTextNode(1); - const n2 = createTextNode(2); - const n3 = createTextNode(4); - const n4 = createTextNode(5); - const n5 = createTextNode(7); - const n6 = createTextNode(8); - const n7 = createTextNode('A'); - const n8 = createTextNode('B'); - prepend(n0, n1, n2); - insert([n3, n4], n0, n9); - insert([n5, n6], n0, n10); - append(n0, n7, n8); - effect(() => { - setText(n1, undefined, 1); + } = _children(n0); + const n1 = _createTextNode(1); + const n2 = _createTextNode(2); + const n3 = _createTextNode(4); + const n4 = _createTextNode(5); + const n5 = _createTextNode(7); + const n6 = _createTextNode(8); + const n7 = _createTextNode('A'); + const n8 = _createTextNode('B'); + _prepend(n0, n1, n2); + _insert([n3, n4], n0, n9); + _insert([n5, n6], n0, n10); + _append(n0, n7, n8); + _effect(() => { + _setText(n1, undefined, 1); }); - effect(() => { - setText(n2, undefined, 2); + _effect(() => { + _setText(n2, undefined, 2); }); - effect(() => { - setText(n3, undefined, 4); + _effect(() => { + _setText(n3, undefined, 4); }); - effect(() => { - setText(n4, undefined, 5); + _effect(() => { + _setText(n4, undefined, 5); }); - effect(() => { - setText(n5, undefined, 7); + _effect(() => { + _setText(n5, undefined, 7); }); - effect(() => { - setText(n6, undefined, 8); + _effect(() => { + _setText(n6, undefined, 8); }); - effect(() => { - setText(n7, undefined, 'A'); + _effect(() => { + _setText(n7, undefined, 'A'); }); - effect(() => { - setText(n8, undefined, 'B'); + _effect(() => { + _setText(n8, undefined, 'B'); }); return n0; } @@ -336,8 +336,8 @@ export function render(_ctx) { `; exports[`compile > static template 1`] = ` -"import { template } from 'vue/vapor'; -const t0 = template('

hello

'); +"import { template as _template } from 'vue/vapor'; +const t0 = _template('

hello

'); export function render(_ctx) { const n0 = t0(); return n0; diff --git a/packages/compiler-vapor/__tests__/__snapshots__/fixtures.test.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/fixtures.test.ts.snap index f2e8a3f99..a4585b155 100644 --- a/packages/compiler-vapor/__tests__/__snapshots__/fixtures.test.ts.snap +++ b/packages/compiler-vapor/__tests__/__snapshots__/fixtures.test.ts.snap @@ -2,8 +2,8 @@ exports[`fixtures 1`] = ` "import { defineComponent as _defineComponent } from 'vue' -import { template, children, createTextNode, append, setText, effect, on, setHtml } from 'vue/vapor' -const t0 = template(\\"

Counter

Count:

Double:

once:

{{ count }}

\\") +import { template as _template, children as _children, createTextNode as _createTextNode, append as _append, setText as _setText, effect as _effect, on as _on, setHtml as _setHtml } from 'vue/vapor' +const t0 = _template(\\"

Counter

Count:

Double:

once:

{{ count }}

\\") import { ref, computed } from 'vue' const html = 'HTML' @@ -19,25 +19,25 @@ const increment = () => count.value++ return (() => { const n0 = t0() -const { 1: [n2], 2: [n4], 3: [n5], 4: [n6], 6: [n8],} = children(n0) -const n1 = createTextNode(count.value) -append(n2, n1) -const n3 = createTextNode(double.value) -append(n4, n3) -const n7 = createTextNode(count.value) -setText(n7, undefined, count.value) -append(n8, n7) -effect(() => { -setText(n1, undefined, count.value) +const { 1: [n2], 2: [n4], 3: [n5], 4: [n6], 6: [n8],} = _children(n0) +const n1 = _createTextNode(count.value) +_append(n2, n1) +const n3 = _createTextNode(double.value) +_append(n4, n3) +const n7 = _createTextNode(count.value) +_setText(n7, undefined, count.value) +_append(n8, n7) +_effect(() => { +_setText(n1, undefined, count.value) }) -effect(() => { -setText(n3, undefined, double.value) +_effect(() => { +_setText(n3, undefined, double.value) }) -effect(() => { -on(n5, \\"click\\", increment) +_effect(() => { +_on(n5, \\"click\\", increment) }) -effect(() => { -setHtml(n6, undefined, html) +_effect(() => { +_setHtml(n6, undefined, html) }) return n0 diff --git a/packages/compiler-vapor/src/generate.ts b/packages/compiler-vapor/src/generate.ts index 71d83f6ca..9c9000204 100644 --- a/packages/compiler-vapor/src/generate.ts +++ b/packages/compiler-vapor/src/generate.ts @@ -26,11 +26,11 @@ function createCodegenContext(ir: RootIRNode, options: CodegenOptions) { vaporHelpers, helper(name: string) { helpers.add(name) - return name + return `_${name}` }, vaporHelper(name: VaporHelper) { vaporHelpers.add(name) - return name + return `_${name}` }, } } @@ -84,12 +84,18 @@ export function generate( } if (vaporHelpers.size) + // TODO: extract preamble = - `import { ${[...vaporHelpers].join(', ')} } from 'vue/vapor'\n` + preamble + `import { ${[...vaporHelpers] + .map((h) => `${h} as _${h}`) + .join(', ')} } from 'vue/vapor'\n` + preamble if (helpers.size) - preamble = `import { ${[...helpers].join(', ')} } from 'vue'\n` + preamble + preamble = + `import { ${[...helpers] + .map((h) => `${h} as _${h}`) + .join(', ')} } from 'vue'\n` + preamble - const functionName = options.ssr ? `ssrRender` : `render` + const functionName = 'render' const isSetupInlined = !!options.inline if (isSetupInlined) { code = `(() => {\n${code}\n})();`