refactor(compiler-vapor): import alias

diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
index 1682d354dab1e871aa700329afba2794960509db..74932f20d894f0661865b88e9ece33e49eea0c97 100644 (file)
--- 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('<div>count is <!>.</div>');
+"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('<div>count is <!>.</div>');
 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('<div></div>');
+"import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor';
+const t0 = _template('<div></div>');
 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('<div></div>');
+"import { template as _template, children as _children, effect as _effect, setHtml as _setHtml } from 'vue/vapor';
+const t0 = _template('<div></div>');
 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('<div></div>');
+"import { template as _template, children as _children, effect as _effect, setHtml as _setHtml } from 'vue/vapor';
+const t0 = _template('<div></div>');
 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('<div></div>');
+"import { template as _template, children as _children, effect as _effect, withModifiers as _withModifiers, on as _on } from 'vue/vapor';
+const t0 = _template('<div></div>');
 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('<div></div>');
+"import { template as _template, children as _children, effect as _effect, on as _on } from 'vue/vapor';
+const t0 = _template('<div></div>');
 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('<div></div>');
+"import { template as _template, children as _children, setAttr as _setAttr } from 'vue/vapor';
+const t0 = _template('<div></div>');
 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('<div> <span></span></div>');
+"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('<div> <span></span></div>');
 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('<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>');
+"import { template as _template } from 'vue/vapor';
+const t0 = _template('<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>');
 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('<div></div><div><Comp></Comp></div>');
+"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('<div></div><div><Comp></Comp></div>');
 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('<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div><div><Comp></Comp></div>');
+"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('<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div><div><Comp></Comp></div>');
 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('<div></div>');
+"import { template as _template, children as _children, effect as _effect, setText as _setText } from 'vue/vapor';
+const t0 = _template('<div></div>');
 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('<div></div>');
+"import { template as _template, children as _children, effect as _effect, setText as _setText } from 'vue/vapor';
+const t0 = _template('<div></div>');
 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('<button>foo<!>foo</button>');
+"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('<button>foo<!>foo</button>');
 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('<p></p><span></span><div></div>');
+"import { template as _template } from 'vue/vapor';
+const t0 = _template('<p></p><span></span><div></div>');
 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('3<!>6<!>9');
+"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('3<!>6<!>9');
 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('<div><p>hello</p><input><span></span></div>');
+"import { template as _template } from 'vue/vapor';
+const t0 = _template('<div><p>hello</p><input><span></span></div>');
 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 f2e8a3f9987113efce1db095b316768ff130559e..a4585b155d5b1779ea82a6106cdd9671dd136e3d 100644 (file)
--- 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(\\"<h1 id=\\\\\\"title\\\\\\">Counter</h1><p>Count: </p><p>Double: </p><button>Increment</button><div></div><input type=\\\\\\"text\\\\\\"><p>once: </p><p>{{ count }}</p>\\")
+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(\\"<h1 id=\\\\\\"title\\\\\\">Counter</h1><p>Count: </p><p>Double: </p><button>Increment</button><div></div><input type=\\\\\\"text\\\\\\"><p>once: </p><p>{{ count }}</p>\\")
 import { ref, computed } from 'vue'
 
 const html = '<b>HTML</b>'
@@ -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 71d83f6caab1a620853a1375549af0d378cd44a0..9c90002045da0adf6111cc818b9b9f494e2ca7a1 100644 (file)
--- 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})();`