root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(compiler-vapor): import alias

This commit is contained in:
三咲智子 Kevin Deng 2023-12-01 08:26:01 +08:00
parent d28d57bd3f
commit fe1780d9ff
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
3 changed files with 162 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

266
packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
View File

@ -1,8 +1,8 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compile > bindings 1`] = ` exports[`compile > bindings 1`] = `
"import { template, children, createTextNode, insert, effect, setText } from 'vue/vapor'; "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>'); const t0 = _template('<div>count is <!>.</div>');
export function render(_ctx) { export function render(_ctx) {
const n0 = t0(); const n0 = t0();
const { const {
@ -12,11 +12,11 @@ export function render(_ctx) {
1: [n2], 1: [n2],
}, },
], ],
} = children(n0); } = _children(n0);
const n1 = createTextNode(count.value); const n1 = _createTextNode(count.value);
insert(n1, n3, n2); _insert(n1, n3, n2);
effect(() => { _effect(() => {
setText(n1, undefined, count.value); _setText(n1, undefined, count.value);
}); });
return n0; return n0;
} }
@ -24,15 +24,15 @@ export function render(_ctx) {
`; `;
exports[`compile > directives > v-bind > simple expression 1`] = ` exports[`compile > directives > v-bind > simple expression 1`] = `
"import { template, children, effect, setAttr } from 'vue/vapor'; "import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor';
const t0 = template('<div></div>'); const t0 = _template('<div></div>');
export function render(_ctx) { export function render(_ctx) {
const n0 = t0(); const n0 = t0();
const { const {
0: [n1], 0: [n1],
} = children(n0); } = _children(n0);
effect(() => { _effect(() => {
setAttr(n1, 'id', undefined, id.value); _setAttr(n1, 'id', undefined, id.value);
}); });
return n0; return n0;
} }
@ -40,15 +40,15 @@ export function render(_ctx) {
`; `;
exports[`compile > directives > v-html > no expression 1`] = ` exports[`compile > directives > v-html > no expression 1`] = `
"import { template, children, effect, setHtml } from 'vue/vapor'; "import { template as _template, children as _children, effect as _effect, setHtml as _setHtml } from 'vue/vapor';
const t0 = template('<div></div>'); const t0 = _template('<div></div>');
export function render(_ctx) { export function render(_ctx) {
const n0 = t0(); const n0 = t0();
const { const {
0: [n1], 0: [n1],
} = children(n0); } = _children(n0);
effect(() => { _effect(() => {
setHtml(n1, undefined, ''); _setHtml(n1, undefined, '');
}); });
return n0; return n0;
} }
@ -56,15 +56,15 @@ export function render(_ctx) {
`; `;
exports[`compile > directives > v-html > simple expression 1`] = ` exports[`compile > directives > v-html > simple expression 1`] = `
"import { template, children, effect, setHtml } from 'vue/vapor'; "import { template as _template, children as _children, effect as _effect, setHtml as _setHtml } from 'vue/vapor';
const t0 = template('<div></div>'); const t0 = _template('<div></div>');
export function render(_ctx) { export function render(_ctx) {
const n0 = t0(); const n0 = t0();
const { const {
0: [n1], 0: [n1],
} = children(n0); } = _children(n0);
effect(() => { _effect(() => {
setHtml(n1, undefined, code.value); _setHtml(n1, undefined, code.value);
}); });
return n0; return n0;
} }
@ -72,15 +72,15 @@ export function render(_ctx) {
`; `;
exports[`compile > directives > v-on > event modifier 1`] = ` exports[`compile > directives > v-on > event modifier 1`] = `
"import { template, children, effect, withModifiers, on } from 'vue/vapor'; "import { template as _template, children as _children, effect as _effect, withModifiers as _withModifiers, on as _on } from 'vue/vapor';
const t0 = template('<div></div>'); const t0 = _template('<div></div>');
export function render(_ctx) { export function render(_ctx) {
const n0 = t0(); const n0 = t0();
const { const {
0: [n1], 0: [n1],
} = children(n0); } = _children(n0);
effect(() => { _effect(() => {
on(n1, 'click', withModifiers(handleClick, ['prevent', 'stop'])); _on(n1, 'click', _withModifiers(handleClick, ['prevent', 'stop']));
}); });
return n0; return n0;
} }
@ -88,15 +88,15 @@ export function render(_ctx) {
`; `;
exports[`compile > directives > v-on > simple expression 1`] = ` exports[`compile > directives > v-on > simple expression 1`] = `
"import { template, children, effect, on } from 'vue/vapor'; "import { template as _template, children as _children, effect as _effect, on as _on } from 'vue/vapor';
const t0 = template('<div></div>'); const t0 = _template('<div></div>');
export function render(_ctx) { export function render(_ctx) {
const n0 = t0(); const n0 = t0();
const { const {
0: [n1], 0: [n1],
} = children(n0); } = _children(n0);
effect(() => { _effect(() => {
on(n1, 'click', handleClick); _on(n1, 'click', handleClick);
}); });
return n0; return n0;
} }
@ -104,22 +104,22 @@ export function render(_ctx) {
`; `;
exports[`compile > directives > v-once > as root node 1`] = ` exports[`compile > directives > v-once > as root node 1`] = `
"import { template, children, setAttr } from 'vue/vapor'; "import { template as _template, children as _children, setAttr as _setAttr } from 'vue/vapor';
const t0 = template('<div></div>'); const t0 = _template('<div></div>');
export function render(_ctx) { export function render(_ctx) {
const n0 = t0(); const n0 = t0();
const { const {
0: [n1], 0: [n1],
} = children(n0); } = _children(n0);
setAttr(n1, 'id', undefined, foo); _setAttr(n1, 'id', undefined, foo);
return n0; return n0;
} }
" "
`; `;
exports[`compile > directives > v-once > basic 1`] = ` exports[`compile > directives > v-once > basic 1`] = `
"import { template, children, createTextNode, setText, setAttr, prepend } from 'vue/vapor'; "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>'); const t0 = _template('<div> <span></span></div>');
export function render(_ctx) { export function render(_ctx) {
const n0 = t0(); const n0 = t0();
const { const {
@ -129,19 +129,19 @@ export function render(_ctx) {
1: [n2], 1: [n2],
}, },
], ],
} = children(n0); } = _children(n0);
const n1 = createTextNode(msg.value); const n1 = _createTextNode(msg.value);
setText(n1, undefined, msg.value); _setText(n1, undefined, msg.value);
setAttr(n2, 'class', undefined, clz.value); _setAttr(n2, 'class', undefined, clz.value);
prepend(n3, n1); _prepend(n3, n1);
return n0; return n0;
} }
" "
`; `;
exports[`compile > directives > v-pre > basic 1`] = ` exports[`compile > directives > v-pre > basic 1`] = `
"import { template } from 'vue/vapor'; "import { template as _template } from 'vue/vapor';
const t0 = template('<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>'); const t0 = _template('<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>');
export function render(_ctx) { export function render(_ctx) {
const n0 = t0(); const n0 = t0();
return n0; return n0;
@ -150,20 +150,20 @@ export function render(_ctx) {
`; `;
exports[`compile > directives > v-pre > self-closing v-pre 1`] = ` exports[`compile > directives > v-pre > self-closing v-pre 1`] = `
"import { template, children, createTextNode, append, effect, setAttr, setText } from 'vue/vapor'; "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>'); const t0 = _template('<div></div><div><Comp></Comp></div>');
export function render(_ctx) { export function render(_ctx) {
const n0 = t0(); const n0 = t0();
const { const {
1: [n1], 1: [n1],
} = children(n0); } = _children(n0);
const n2 = createTextNode(bar); const n2 = _createTextNode(bar);
append(n1, n2); _append(n1, n2);
effect(() => { _effect(() => {
setAttr(n1, 'id', undefined, foo); _setAttr(n1, 'id', undefined, foo);
}); });
effect(() => { _effect(() => {
setText(n2, undefined, bar); _setText(n2, undefined, bar);
}); });
return n0; return n0;
} }
@ -171,20 +171,20 @@ export function render(_ctx) {
`; `;
exports[`compile > directives > v-pre > should not affect siblings after it 1`] = ` exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
"import { template, children, createTextNode, append, effect, setAttr, setText } from 'vue/vapor'; "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>'); const t0 = _template('<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div><div><Comp></Comp></div>');
export function render(_ctx) { export function render(_ctx) {
const n0 = t0(); const n0 = t0();
const { const {
1: [n1], 1: [n1],
} = children(n0); } = _children(n0);
const n2 = createTextNode(bar.value); const n2 = _createTextNode(bar.value);
append(n1, n2); _append(n1, n2);
effect(() => { _effect(() => {
setAttr(n1, 'id', undefined, foo.value); _setAttr(n1, 'id', undefined, foo.value);
}); });
effect(() => { _effect(() => {
setText(n2, undefined, bar.value); _setText(n2, undefined, bar.value);
}); });
return n0; return n0;
} }
@ -192,15 +192,15 @@ export function render(_ctx) {
`; `;
exports[`compile > directives > v-text > no expression 1`] = ` exports[`compile > directives > v-text > no expression 1`] = `
"import { template, children, effect, setText } from 'vue/vapor'; "import { template as _template, children as _children, effect as _effect, setText as _setText } from 'vue/vapor';
const t0 = template('<div></div>'); const t0 = _template('<div></div>');
export function render(_ctx) { export function render(_ctx) {
const n0 = t0(); const n0 = t0();
const { const {
0: [n1], 0: [n1],
} = children(n0); } = _children(n0);
effect(() => { _effect(() => {
setText(n1, undefined, ''); _setText(n1, undefined, '');
}); });
return n0; return n0;
} }
@ -208,15 +208,15 @@ export function render(_ctx) {
`; `;
exports[`compile > directives > v-text > simple expression 1`] = ` exports[`compile > directives > v-text > simple expression 1`] = `
"import { template, children, effect, setText } from 'vue/vapor'; "import { template as _template, children as _children, effect as _effect, setText as _setText } from 'vue/vapor';
const t0 = template('<div></div>'); const t0 = _template('<div></div>');
export function render(_ctx) { export function render(_ctx) {
const n0 = t0(); const n0 = t0();
const { const {
0: [n1], 0: [n1],
} = children(n0); } = _children(n0);
effect(() => { _effect(() => {
setText(n1, undefined, str.value); _setText(n1, undefined, str.value);
}); });
return n0; return n0;
} }
@ -224,18 +224,18 @@ export function render(_ctx) {
`; `;
exports[`compile > dynamic root 1`] = ` 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) { export function render(_ctx) {
const t0 = fragment(); const t0 = _fragment();
const n0 = t0(); const n0 = t0();
const n1 = createTextNode(1); const n1 = _createTextNode(1);
const n2 = createTextNode(2); const n2 = _createTextNode(2);
append(n0, n1, n2); _append(n0, n1, n2);
effect(() => { _effect(() => {
setText(n1, undefined, 1); _setText(n1, undefined, 1);
}); });
effect(() => { _effect(() => {
setText(n2, undefined, 2); _setText(n2, undefined, 2);
}); });
return n0; return n0;
} }
@ -243,8 +243,8 @@ export function render(_ctx) {
`; `;
exports[`compile > dynamic root nodes and interpolation 1`] = ` exports[`compile > dynamic root nodes and interpolation 1`] = `
"import { template, children, createTextNode, prepend, insert, append, effect, on, setAttr, setText } from 'vue/vapor'; "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>'); const t0 = _template('<button>foo<!>foo</button>');
export function render(_ctx) { export function render(_ctx) {
const n0 = t0(); const n0 = t0();
const { const {
@ -254,21 +254,21 @@ export function render(_ctx) {
1: [n5], 1: [n5],
}, },
], ],
} = children(n0); } = _children(n0);
const n2 = createTextNode(count); const n2 = _createTextNode(count);
const n3 = createTextNode(count); const n3 = _createTextNode(count);
const n4 = createTextNode(count); const n4 = _createTextNode(count);
prepend(n1, n2); _prepend(n1, n2);
insert(n3, n1, n5); _insert(n3, n1, n5);
append(n1, n4); _append(n1, n4);
effect(() => { _effect(() => {
on(n1, 'click', handleClick); _on(n1, 'click', handleClick);
}); });
effect(() => { _effect(() => {
setAttr(n1, 'id', undefined, count); _setAttr(n1, 'id', undefined, count);
setText(n2, undefined, count); _setText(n2, undefined, count);
setText(n3, undefined, count); _setText(n3, undefined, count);
setText(n4, undefined, count); _setText(n4, undefined, count);
}); });
return n0; return n0;
} }
@ -276,8 +276,8 @@ export function render(_ctx) {
`; `;
exports[`compile > fragment 1`] = ` exports[`compile > fragment 1`] = `
"import { template } from 'vue/vapor'; "import { template as _template } from 'vue/vapor';
const t0 = template('<p></p><span></span><div></div>'); const t0 = _template('<p></p><span></span><div></div>');
export function render(_ctx) { export function render(_ctx) {
const n0 = t0(); const n0 = t0();
return n0; return n0;
@ -286,49 +286,49 @@ export function render(_ctx) {
`; `;
exports[`compile > static + dynamic root 1`] = ` exports[`compile > static + dynamic root 1`] = `
"import { template, children, createTextNode, prepend, insert, append, effect, setText } from 'vue/vapor'; "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'); const t0 = _template('3<!>6<!>9');
export function render(_ctx) { export function render(_ctx) {
const n0 = t0(); const n0 = t0();
const { const {
1: [n9], 1: [n9],
3: [n10], 3: [n10],
} = children(n0); } = _children(n0);
const n1 = createTextNode(1); const n1 = _createTextNode(1);
const n2 = createTextNode(2); const n2 = _createTextNode(2);
const n3 = createTextNode(4); const n3 = _createTextNode(4);
const n4 = createTextNode(5); const n4 = _createTextNode(5);
const n5 = createTextNode(7); const n5 = _createTextNode(7);
const n6 = createTextNode(8); const n6 = _createTextNode(8);
const n7 = createTextNode('A'); const n7 = _createTextNode('A');
const n8 = createTextNode('B'); const n8 = _createTextNode('B');
prepend(n0, n1, n2); _prepend(n0, n1, n2);
insert([n3, n4], n0, n9); _insert([n3, n4], n0, n9);
insert([n5, n6], n0, n10); _insert([n5, n6], n0, n10);
append(n0, n7, n8); _append(n0, n7, n8);
effect(() => { _effect(() => {
setText(n1, undefined, 1); _setText(n1, undefined, 1);
}); });
effect(() => { _effect(() => {
setText(n2, undefined, 2); _setText(n2, undefined, 2);
}); });
effect(() => { _effect(() => {
setText(n3, undefined, 4); _setText(n3, undefined, 4);
}); });
effect(() => { _effect(() => {
setText(n4, undefined, 5); _setText(n4, undefined, 5);
}); });
effect(() => { _effect(() => {
setText(n5, undefined, 7); _setText(n5, undefined, 7);
}); });
effect(() => { _effect(() => {
setText(n6, undefined, 8); _setText(n6, undefined, 8);
}); });
effect(() => { _effect(() => {
setText(n7, undefined, 'A'); _setText(n7, undefined, 'A');
}); });
effect(() => { _effect(() => {
setText(n8, undefined, 'B'); _setText(n8, undefined, 'B');
}); });
return n0; return n0;
} }
@ -336,8 +336,8 @@ export function render(_ctx) {
`; `;
exports[`compile > static template 1`] = ` exports[`compile > static template 1`] = `
"import { template } from 'vue/vapor'; "import { template as _template } from 'vue/vapor';
const t0 = template('<div><p>hello</p><input><span></span></div>'); const t0 = _template('<div><p>hello</p><input><span></span></div>');
export function render(_ctx) { export function render(_ctx) {
const n0 = t0(); const n0 = t0();
return n0; return n0;

36
packages/compiler-vapor/__tests__/__snapshots__/fixtures.test.ts.snap
View File

@ -2,8 +2,8 @@
exports[`fixtures 1`] = ` exports[`fixtures 1`] = `
"import { defineComponent as _defineComponent } from 'vue' "import { defineComponent as _defineComponent } from 'vue'
import { template, children, createTextNode, append, setText, effect, on, setHtml } from 'vue/vapor' 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>\\") 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' import { ref, computed } from 'vue'
const html = '<b>HTML</b>' const html = '<b>HTML</b>'
@ -19,25 +19,25 @@ const increment = () => count.value++
return (() => { return (() => {
const n0 = t0() const n0 = t0()
const { 1: [n2], 2: [n4], 3: [n5], 4: [n6], 6: [n8],} = children(n0) const { 1: [n2], 2: [n4], 3: [n5], 4: [n6], 6: [n8],} = _children(n0)
const n1 = createTextNode(count.value) const n1 = _createTextNode(count.value)
append(n2, n1) _append(n2, n1)
const n3 = createTextNode(double.value) const n3 = _createTextNode(double.value)
append(n4, n3) _append(n4, n3)
const n7 = createTextNode(count.value) const n7 = _createTextNode(count.value)
setText(n7, undefined, count.value) _setText(n7, undefined, count.value)
append(n8, n7) _append(n8, n7)
effect(() => { _effect(() => {
setText(n1, undefined, count.value) _setText(n1, undefined, count.value)
}) })
effect(() => { _effect(() => {
setText(n3, undefined, double.value) _setText(n3, undefined, double.value)
}) })
effect(() => { _effect(() => {
on(n5, \\"click\\", increment) _on(n5, \\"click\\", increment)
}) })
effect(() => { _effect(() => {
setHtml(n6, undefined, html) _setHtml(n6, undefined, html)
}) })
return n0 return n0

16
packages/compiler-vapor/src/generate.ts
View File

@ -26,11 +26,11 @@ function createCodegenContext(ir: RootIRNode, options: CodegenOptions) {
vaporHelpers, vaporHelpers,
helper(name: string) { helper(name: string) {
helpers.add(name) helpers.add(name)
return name return `_${name}`
}, },
vaporHelper(name: VaporHelper) { vaporHelper(name: VaporHelper) {
vaporHelpers.add(name) vaporHelpers.add(name)
return name return `_${name}`
}, },
} }
} }
@ -84,12 +84,18 @@ export function generate(
} }
if (vaporHelpers.size) if (vaporHelpers.size)
// TODO: extract
preamble = 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) 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 const isSetupInlined = !!options.inline
if (isSetupInlined) { if (isSetupInlined) {
code = `(() => {\n${code}\n})();` code = `(() => {\n${code}\n})();`