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

wip: remove setInheritAttrs codegen

This commit is contained in:
Evan You 2024-12-09 17:19:16 +08:00
parent edde81cf67
commit 2b05c1e906
No known key found for this signature in database
GPG Key ID: 00E9AB7A6704CE0A
38 changed files with 245 additions and 507 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
View File

@ -138,12 +138,11 @@ export function render(_ctx) {
`;
exports[`compile > directives > v-pre > basic 1`] = `
"import { setInheritAttrs as _setInheritAttrs, template as _template } from 'vue';
"import { template as _template } from 'vue';
const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
_setInheritAttrs(false)
return n0
}"
`;
@ -175,14 +174,13 @@ export function render(_ctx) {
`;
exports[`compile > dynamic root nodes and interpolation 1`] = `
"import { delegate as _delegate, setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setText as _setText, setDOMProp as _setDOMProp, delegateEvents as _delegateEvents, template as _template } from 'vue';
"import { delegate as _delegate, renderEffect as _renderEffect, setText as _setText, setDOMProp as _setDOMProp, delegateEvents as _delegateEvents, template as _template } from 'vue';
const t0 = _template("<button></button>")
_delegateEvents("click")
export function render(_ctx) {
const n0 = t0()
_delegate(n0, "click", () => _ctx.handleClick)
_setInheritAttrs(["id"])
_renderEffect(() => _setText(n0, _ctx.count, "foo", _ctx.count, "foo", _ctx.count))
_renderEffect(() => _setDOMProp(n0, "id", _ctx.count))
return n0
@ -199,7 +197,6 @@ exports[`compile > expression parsing > interpolation 1`] = `
exports[`compile > expression parsing > v-bind 1`] = `
"((_ctx) => {
const n0 = t0()
_setInheritAttrs(true)
_renderEffect(() => _setDynamicProps(n0, [{ [key.value+1]: _unref(foo)[key.value+1]() }], true))
return n0
})()"

27
packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
View File

@ -187,8 +187,7 @@ export function render(_ctx) {
`;
exports[`compiler: element transform > component with dynamic event arguments 1`] = `
"import { toHandlerKey as _toHandlerKey } from 'vue';
import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
"import { resolveComponent as _resolveComponent, toHandlerKey as _toHandlerKey, createComponentWithFallback as _createComponentWithFallback } from 'vue';
export function render(_ctx) {
const _component_Foo = _resolveComponent("Foo")
@ -284,23 +283,21 @@ export function render(_ctx) {
`;
exports[`compiler: element transform > props + children 1`] = `
"import { setInheritAttrs as _setInheritAttrs, template as _template } from 'vue';
"import { template as _template } from 'vue';
const t0 = _template("<div id=\\"foo\\"><span></span></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(false)
return n0
}"
`;
exports[`compiler: element transform > props merging: class 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setClass as _setClass, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setClass as _setClass, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["class"])
_renderEffect(() => _setClass(n0, ["foo", { bar: _ctx.isBar }], true))
return n0
}"
@ -324,71 +321,65 @@ export function render(_ctx) {
`;
exports[`compiler: element transform > props merging: style 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setStyle as _setStyle, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setStyle as _setStyle, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["style"])
_renderEffect(() => _setStyle(n0, ["color: green", { color: 'red' }], true))
return n0
}"
`;
exports[`compiler: element transform > static props 1`] = `
"import { setInheritAttrs as _setInheritAttrs, template as _template } from 'vue';
"import { template as _template } from 'vue';
const t0 = _template("<div id=\\"foo\\" class=\\"bar\\"></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(false)
return n0
}"
`;
exports[`compiler: element transform > v-bind="obj" 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(true)
_renderEffect(() => _setDynamicProps(n0, [_ctx.obj], true))
return n0
}"
`;
exports[`compiler: element transform > v-bind="obj" after static prop 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(true)
_renderEffect(() => _setDynamicProps(n0, [{ id: "foo" }, _ctx.obj], true))
return n0
}"
`;
exports[`compiler: element transform > v-bind="obj" before static prop 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(true)
_renderEffect(() => _setDynamicProps(n0, [_ctx.obj, { id: "foo" }], true))
return n0
}"
`;
exports[`compiler: element transform > v-bind="obj" between static props 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(true)
_renderEffect(() => _setDynamicProps(n0, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true))
return n0
}"

106
packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
View File

@ -1,325 +1,297 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler v-bind > .attr modifier 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["foo-bar"])
_renderEffect(() => _setAttr(n0, "foo-bar", _ctx.id))
return n0
}"
`;
exports[`compiler v-bind > .attr modifier w/ innerHTML 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["innerHTML"])
_renderEffect(() => _setAttr(n0, "innerHTML", _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > .attr modifier w/ no expression 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["foo-bar"])
_renderEffect(() => _setAttr(n0, "foo-bar", _ctx.fooBar))
return n0
}"
`;
exports[`compiler v-bind > .attr modifier w/ progress value 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
const t0 = _template("<progress></progress>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["value"])
_renderEffect(() => _setAttr(n0, "value", _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > .attr modifier w/ textContent 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["textContent"])
_renderEffect(() => _setAttr(n0, "textContent", _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > .attr modifier w/ value 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["value"])
_renderEffect(() => _setAttr(n0, "value", _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > .camel modifier 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["fooBar"])
_renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.id))
return n0
}"
`;
exports[`compiler v-bind > .camel modifier w/ dynamic arg 1`] = `
"import { camelize as _camelize } from 'vue';
import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, camelize as _camelize, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(true)
_renderEffect(() => _setDynamicProps(n0, [{ [_camelize(_ctx.foo)]: _ctx.id }], true))
return n0
}"
`;
exports[`compiler v-bind > .camel modifier w/ no expression 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["fooBar"])
_renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.fooBar))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier (shorthand) 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["fooBar"])
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier (shorthand) w/ innerHTML 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["innerHTML"])
_renderEffect(() => _setHtml(n0, _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier (shorthand) w/ no expression 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["fooBar"])
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier (shorthand) w/ progress value 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
const t0 = _template("<progress></progress>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["value"])
_renderEffect(() => _setDOMProp(n0, "value", _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier (shorthand) w/ textContent 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["textContent"])
_renderEffect(() => _setText(n0, _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier (shorthand) w/ value 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setValue as _setValue, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setValue as _setValue, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["value"])
_renderEffect(() => _setValue(n0, _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["fooBar"])
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier w/ dynamic arg 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(true)
_renderEffect(() => _setDynamicProps(n0, [{ ["." + _ctx.fooBar]: _ctx.id }], true))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier w/ innerHTML 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["innerHTML"])
_renderEffect(() => _setHtml(n0, _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier w/ no expression 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["fooBar"])
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier w/ progress value 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
const t0 = _template("<progress></progress>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["value"])
_renderEffect(() => _setDOMProp(n0, "value", _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier w/ textContent 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["textContent"])
_renderEffect(() => _setText(n0, _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier w/ value 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setValue as _setValue, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setValue as _setValue, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["value"])
_renderEffect(() => _setValue(n0, _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > :innerHTML 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["innerHTML"])
_renderEffect(() => _setHtml(n0, _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > :textContext 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["textContent"])
_renderEffect(() => _setText(n0, _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > :value 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setValue as _setValue, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setValue as _setValue, template as _template } from 'vue';
const t0 = _template("<input>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["value"])
_renderEffect(() => _setValue(n0, _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > :value w/ progress 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue';
const t0 = _template("<progress></progress>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["value"])
_renderEffect(() => _setDynamicProp(n0, "value", _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > HTML global attributes should set as dom prop 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["id", "title", "lang", "dir", "tabindex"])
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id))
_renderEffect(() => _setDOMProp(n0, "title", _ctx.title))
_renderEffect(() => _setDOMProp(n0, "lang", _ctx.lang))
@ -330,12 +302,11 @@ export function render(_ctx) {
`;
exports[`compiler v-bind > MathML global attributes should set as dom prop 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
const t0 = _template("<math></math>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["autofucus", "dir", "displaystyle", "mathcolor", "tabindex"])
_renderEffect(() => _setDOMProp(n0, "autofucus", _ctx.autofucus))
_renderEffect(() => _setDOMProp(n0, "dir", _ctx.dir))
_renderEffect(() => _setDOMProp(n0, "displaystyle", _ctx.displaystyle))
@ -346,12 +317,11 @@ export function render(_ctx) {
`;
exports[`compiler v-bind > SVG global attributes should set as dom prop 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
const t0 = _template("<svg></svg>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["id", "lang", "tabindex"])
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id))
_renderEffect(() => _setDOMProp(n0, "lang", _ctx.lang))
_renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex))
@ -400,60 +370,55 @@ export function render(_ctx) {
`;
exports[`compiler v-bind > basic 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["id"])
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id))
return n0
}"
`;
exports[`compiler v-bind > dynamic arg 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(true)
_renderEffect(() => _setDynamicProps(n0, [{ [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title }], true))
return n0
}"
`;
exports[`compiler v-bind > dynamic arg w/ static attribute 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(true)
_renderEffect(() => _setDynamicProps(n0, [{ [_ctx.id]: _ctx.id, foo: "bar", checked: "" }], true))
return n0
}"
`;
exports[`compiler v-bind > no expression (shorthand) 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["camel-case"])
_renderEffect(() => _setDynamicProp(n0, "camel-case", _ctx.camelCase))
return n0
}"
`;
exports[`compiler v-bind > no expression 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["id"])
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id))
return n0
}"
@ -470,12 +435,11 @@ export function render(_ctx) {
`;
exports[`compiler v-bind > should error if empty expression 1`] = `
"import { setInheritAttrs as _setInheritAttrs, template as _template } from 'vue';
"import { template as _template } from 'vue';
const t0 = _template("<div arg></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(false)
return n0
}"
`;

3
packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
View File

@ -45,13 +45,12 @@ export function render(_ctx) {
`;
exports[`compiler: v-for > multi effect 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, createFor as _createFor, template as _template } from 'vue';
"import { renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, createFor as _createFor, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
const n2 = t0()
_setInheritAttrs(["item", "index"])
_renderEffect(() => _setDynamicProp(n2, "item", _ctx0[0].value))
_renderEffect(() => _setDynamicProp(n2, "index", _ctx0[1].value))
return n2

12
packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
View File

@ -118,14 +118,13 @@ export function render(_ctx) {
`;
exports[`compiler: vModel transform > should support input (checkbox) 1`] = `
"import { vModelCheckbox as _vModelCheckbox, withDirectives as _withDirectives, delegate as _delegate, setInheritAttrs as _setInheritAttrs, template as _template } from 'vue';
"import { vModelCheckbox as _vModelCheckbox, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
const t0 = _template("<input type=\\"checkbox\\">")
export function render(_ctx) {
const n0 = t0()
_withDirectives(n0, [[_vModelCheckbox, () => _ctx.model]])
_delegate(n0, "update:modelValue", () => $event => (_ctx.model = $event))
_setInheritAttrs(false)
return n0
}"
`;
@ -143,27 +142,25 @@ export function render(_ctx) {
`;
exports[`compiler: vModel transform > should support input (radio) 1`] = `
"import { vModelRadio as _vModelRadio, withDirectives as _withDirectives, delegate as _delegate, setInheritAttrs as _setInheritAttrs, template as _template } from 'vue';
"import { vModelRadio as _vModelRadio, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
const t0 = _template("<input type=\\"radio\\">")
export function render(_ctx) {
const n0 = t0()
_withDirectives(n0, [[_vModelRadio, () => _ctx.model]])
_delegate(n0, "update:modelValue", () => $event => (_ctx.model = $event))
_setInheritAttrs(false)
return n0
}"
`;
exports[`compiler: vModel transform > should support input (text) 1`] = `
"import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, setInheritAttrs as _setInheritAttrs, template as _template } from 'vue';
"import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
const t0 = _template("<input type=\\"text\\">")
export function render(_ctx) {
const n0 = t0()
_withDirectives(n0, [[_vModelText, () => _ctx.model]])
_delegate(n0, "update:modelValue", () => $event => (_ctx.model = $event))
_setInheritAttrs(false)
return n0
}"
`;
@ -238,14 +235,13 @@ export function render(_ctx) {
`;
exports[`compiler: vModel transform > should support w/ dynamic v-bind 1`] = `
"import { vModelDynamic as _vModelDynamic, withDirectives as _withDirectives, delegate as _delegate, setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
"import { vModelDynamic as _vModelDynamic, withDirectives as _withDirectives, delegate as _delegate, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
const t0 = _template("<input>")
export function render(_ctx) {
const n0 = t0()
_withDirectives(n0, [[_vModelDynamic, () => _ctx.model]])
_delegate(n0, "update:modelValue", () => $event => (_ctx.model = $event))
_setInheritAttrs(true)
_renderEffect(() => _setDynamicProps(n0, [_ctx.obj], true))
return n0
}"

3
packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
View File

@ -1,13 +1,12 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: v-once > as root node 1`] = `
"import { setDOMProp as _setDOMProp, setInheritAttrs as _setInheritAttrs, template as _template } from 'vue';
"import { setDOMProp as _setDOMProp, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setDOMProp(n0, "id", _ctx.foo)
_setInheritAttrs(["id"])
return n0
}"
`;

6
packages/compiler-vapor/__tests__/transforms/_utils.ts
View File

@ -16,7 +16,7 @@ export function makeCompile(options: CompilerOptions = {}) {
ir: RootIRNode
code: string
helpers: Set<string>
vaporHelpers: Set<string>
helpers: Set<string>
} => {
const ast = parse(template, {
prefixIdentifiers: true,
@ -28,11 +28,11 @@ export function makeCompile(options: CompilerOptions = {}) {
...options,
...overrideOptions,
})
const { code, helpers, vaporHelpers } = generate(ir, {
const { code, helpers } = generate(ir, {
prefixIdentifiers: true,
...options,
...overrideOptions,
})
return { ast, ir, code, helpers, vaporHelpers }
return { ast, ir, code, helpers }
}
}

4
packages/compiler-vapor/__tests__/transforms/transformChildren.spec.ts
View File

@ -19,7 +19,7 @@ describe('compiler: children transform', () => {
test.todo('basic')
test('children & sibling references', () => {
const { code, vaporHelpers } = compileWithElementTransform(
const { code, helpers } = compileWithElementTransform(
`<div>
<p>{{ first }}</p>
{{ second }}
@ -28,7 +28,7 @@ describe('compiler: children transform', () => {
</div>`,
)
expect(code).toMatchSnapshot()
expect(Array.from(vaporHelpers)).containSubset([
expect(Array.from(helpers)).containSubset([
'next',
'setText',
'createTextNode',

127
packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
View File

@ -25,12 +25,10 @@ const compileWithElementTransform = makeCompile({
describe('compiler: element transform', () => {
describe('component', () => {
test('import + resolve component', () => {
const { code, ir, vaporHelpers } = compileWithElementTransform(`<Foo/>`)
const { code, ir, helpers } = compileWithElementTransform(`<Foo/>`)
expect(code).toMatchSnapshot()
expect(vaporHelpers).contains.all.keys(
'resolveComponent',
'createComponentWithFallback',
)
expect(helpers).contains.all.keys('resolveComponent')
expect(helpers).contains.all.keys('createComponentWithFallback')
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.CREATE_COMPONENT_NODE,
@ -44,24 +42,21 @@ describe('compiler: element transform', () => {
})
test.todo('resolve implicitly self-referencing component', () => {
const { code, vaporHelpers } = compileWithElementTransform(`<Example/>`, {
const { code, helpers } = compileWithElementTransform(`<Example/>`, {
filename: `/foo/bar/Example.vue?vue&type=template`,
})
expect(code).toMatchSnapshot()
expect(vaporHelpers).toContain('resolveComponent')
expect(helpers).toContain('resolveComponent')
})
test('resolve component from setup bindings', () => {
const { code, ir, vaporHelpers } = compileWithElementTransform(
`<Example/>`,
{
bindingMetadata: {
Example: BindingTypes.SETUP_MAYBE_REF,
},
const { code, ir, helpers } = compileWithElementTransform(`<Example/>`, {
bindingMetadata: {
Example: BindingTypes.SETUP_MAYBE_REF,
},
)
})
expect(code).toMatchSnapshot()
expect(vaporHelpers).not.toContain('resolveComponent')
expect(helpers).not.toContain('resolveComponent')
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.CREATE_COMPONENT_NODE,
@ -72,7 +67,7 @@ describe('compiler: element transform', () => {
})
test('resolve component from setup bindings (inline)', () => {
const { code, vaporHelpers } = compileWithElementTransform(`<Example/>`, {
const { code, helpers } = compileWithElementTransform(`<Example/>`, {
inline: true,
bindingMetadata: {
Example: BindingTypes.SETUP_MAYBE_REF,
@ -80,78 +75,66 @@ describe('compiler: element transform', () => {
})
expect(code).toMatchSnapshot()
expect(code).contains(`unref(Example)`)
expect(vaporHelpers).not.toContain('resolveComponent')
expect(vaporHelpers).toContain('unref')
expect(helpers).not.toContain('resolveComponent')
expect(helpers).toContain('unref')
})
test('resolve component from setup bindings (inline const)', () => {
const { code, vaporHelpers } = compileWithElementTransform(`<Example/>`, {
const { code, helpers } = compileWithElementTransform(`<Example/>`, {
inline: true,
bindingMetadata: {
Example: BindingTypes.SETUP_CONST,
},
})
expect(code).toMatchSnapshot()
expect(vaporHelpers).not.toContain('resolveComponent')
expect(helpers).not.toContain('resolveComponent')
})
test('resolve namespaced component from setup bindings', () => {
const { code, vaporHelpers } = compileWithElementTransform(
`<Foo.Example/>`,
{
bindingMetadata: {
Foo: BindingTypes.SETUP_MAYBE_REF,
},
const { code, helpers } = compileWithElementTransform(`<Foo.Example/>`, {
bindingMetadata: {
Foo: BindingTypes.SETUP_MAYBE_REF,
},
)
})
expect(code).toMatchSnapshot()
expect(code).contains(`_ctx.Foo.Example`)
expect(vaporHelpers).not.toContain('resolveComponent')
expect(helpers).not.toContain('resolveComponent')
})
test('resolve namespaced component from setup bindings (inline const)', () => {
const { code, vaporHelpers } = compileWithElementTransform(
`<Foo.Example/>`,
{
inline: true,
bindingMetadata: {
Foo: BindingTypes.SETUP_CONST,
},
const { code, helpers } = compileWithElementTransform(`<Foo.Example/>`, {
inline: true,
bindingMetadata: {
Foo: BindingTypes.SETUP_CONST,
},
)
})
expect(code).toMatchSnapshot()
expect(code).contains(`Foo.Example`)
expect(vaporHelpers).not.toContain('resolveComponent')
expect(helpers).not.toContain('resolveComponent')
})
test('resolve namespaced component from props bindings (inline)', () => {
const { code, vaporHelpers } = compileWithElementTransform(
`<Foo.Example/>`,
{
inline: true,
bindingMetadata: {
Foo: BindingTypes.PROPS,
},
const { code, helpers } = compileWithElementTransform(`<Foo.Example/>`, {
inline: true,
bindingMetadata: {
Foo: BindingTypes.PROPS,
},
)
})
expect(code).toMatchSnapshot()
expect(code).contains(`Foo.Example`)
expect(vaporHelpers).not.toContain('resolveComponent')
expect(helpers).not.toContain('resolveComponent')
})
test('resolve namespaced component from props bindings (non-inline)', () => {
const { code, vaporHelpers } = compileWithElementTransform(
`<Foo.Example/>`,
{
inline: false,
bindingMetadata: {
Foo: BindingTypes.PROPS,
},
const { code, helpers } = compileWithElementTransform(`<Foo.Example/>`, {
inline: false,
bindingMetadata: {
Foo: BindingTypes.PROPS,
},
)
})
expect(code).toMatchSnapshot()
expect(code).contains('_ctx.Foo.Example')
expect(vaporHelpers).not.toContain('resolveComponent')
expect(helpers).not.toContain('resolveComponent')
})
test('do not resolve component from non-script-setup bindings', () => {
@ -161,12 +144,11 @@ describe('compiler: element transform', () => {
Object.defineProperty(bindingMetadata, '__isScriptSetup', {
value: false,
})
const { code, ir, vaporHelpers } = compileWithElementTransform(
`<Example/>`,
{ bindingMetadata },
)
const { code, ir, helpers } = compileWithElementTransform(`<Example/>`, {
bindingMetadata,
})
expect(code).toMatchSnapshot()
expect(vaporHelpers).toContain('resolveComponent')
expect(helpers).toContain('resolveComponent')
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.CREATE_COMPONENT_NODE,
@ -427,11 +409,11 @@ describe('compiler: element transform', () => {
describe('dynamic component', () => {
test('static binding', () => {
const { code, ir, vaporHelpers } = compileWithElementTransform(
const { code, ir, helpers } = compileWithElementTransform(
`<component is="foo" />`,
)
expect(code).toMatchSnapshot()
expect(vaporHelpers).toContain('resolveDynamicComponent')
expect(helpers).toContain('resolveDynamicComponent')
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.CREATE_COMPONENT_NODE,
@ -449,11 +431,11 @@ describe('compiler: element transform', () => {
})
test('capitalized version w/ static binding', () => {
const { code, ir, vaporHelpers } = compileWithElementTransform(
const { code, ir, helpers } = compileWithElementTransform(
`<Component is="foo" />`,
)
expect(code).toMatchSnapshot()
expect(vaporHelpers).toContain('resolveDynamicComponent')
expect(helpers).toContain('resolveDynamicComponent')
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.CREATE_COMPONENT_NODE,
@ -471,11 +453,11 @@ describe('compiler: element transform', () => {
})
test('dynamic binding', () => {
const { code, ir, vaporHelpers } = compileWithElementTransform(
const { code, ir, helpers } = compileWithElementTransform(
`<component :is="foo" />`,
)
expect(code).toMatchSnapshot()
expect(vaporHelpers).toContain('resolveDynamicComponent')
expect(helpers).toContain('resolveDynamicComponent')
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.CREATE_COMPONENT_NODE,
@ -493,10 +475,10 @@ describe('compiler: element transform', () => {
})
test('dynamic binding shorthand', () => {
const { code, ir, vaporHelpers } =
const { code, ir, helpers } =
compileWithElementTransform(`<component :is />`)
expect(code).toMatchSnapshot()
expect(vaporHelpers).toContain('resolveDynamicComponent')
expect(helpers).toContain('resolveDynamicComponent')
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.CREATE_COMPONENT_NODE,
@ -515,15 +497,15 @@ describe('compiler: element transform', () => {
// #3934
test('normal component with is prop', () => {
const { code, ir, vaporHelpers } = compileWithElementTransform(
const { code, ir, helpers } = compileWithElementTransform(
`<custom-input is="foo" />`,
{
isNativeTag: () => false,
},
)
expect(code).toMatchSnapshot()
expect(vaporHelpers).toContain('resolveComponent')
expect(vaporHelpers).not.toContain('resolveDynamicComponent')
expect(helpers).toContain('resolveComponent')
expect(helpers).not.toContain('resolveDynamicComponent')
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.CREATE_COMPONENT_NODE,
@ -729,9 +711,6 @@ describe('compiler: element transform', () => {
delegate: true,
effect: false,
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
})

4
packages/compiler-vapor/__tests__/transforms/transformSlotOutlet.spec.ts
View File

@ -27,9 +27,9 @@ const compileWithSlotsOutlet = makeCompile({
describe('compiler: transform <slot> outlets', () => {
test('default slot outlet', () => {
const { ir, code, vaporHelpers } = compileWithSlotsOutlet(`<slot />`)
const { ir, code, helpers } = compileWithSlotsOutlet(`<slot />`)
expect(code).toMatchSnapshot()
expect(vaporHelpers).toContain('createSlot')
expect(helpers).toContain('createSlot')
expect(ir.block.effect).toEqual([])
expect(ir.block.operation).toMatchObject([
{

9
packages/compiler-vapor/__tests__/transforms/transformTemplateRef.spec.ts
View File

@ -30,8 +30,8 @@ describe('compiler: template ref transform', () => {
flags: DynamicFlag.REFERENCED,
})
expect(ir.template).toEqual(['<div></div>'])
expect(ir.block.operation).lengthOf(2)
expect(ir.block.operation[1]).toMatchObject({
expect(ir.block.operation).lengthOf(1)
expect(ir.block.operation[0]).toMatchObject({
type: IRNodeTypes.SET_TEMPLATE_REF,
element: 0,
value: {
@ -56,9 +56,6 @@ describe('compiler: template ref transform', () => {
})
expect(ir.template).toEqual(['<div></div>'])
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
{
type: IRNodeTypes.DECLARE_OLD_REF,
id: 0,
@ -92,7 +89,6 @@ describe('compiler: template ref transform', () => {
const { positive } = ir.block.operation[0] as IfIRNode
expect(positive.operation).toMatchObject([
{ type: IRNodeTypes.SET_INHERIT_ATTRS },
{
type: IRNodeTypes.SET_TEMPLATE_REF,
element: 2,
@ -114,7 +110,6 @@ describe('compiler: template ref transform', () => {
const { render } = ir.block.operation[0] as ForIRNode
expect(render.operation).toMatchObject([
{ type: IRNodeTypes.SET_INHERIT_ATTRS },
{
type: IRNodeTypes.SET_TEMPLATE_REF,
element: 2,

8
packages/compiler-vapor/__tests__/transforms/transformText.spec.ts
View File

@ -20,11 +20,11 @@ const compileWithTextTransform = makeCompile({
describe('compiler: text transform', () => {
it('no consecutive text', () => {
const { code, ir, vaporHelpers } = compileWithTextTransform(
const { code, ir, helpers } = compileWithTextTransform(
'{{ "hello world" }}',
)
expect(code).toMatchSnapshot()
expect(vaporHelpers).contains.all.keys('createTextNode')
expect(helpers).contains.all.keys('createTextNode')
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.CREATE_TEXT_NODE,
@ -42,9 +42,9 @@ describe('compiler: text transform', () => {
})
it('consecutive text', () => {
const { code, ir, vaporHelpers } = compileWithTextTransform('{{ msg }}')
const { code, ir, helpers } = compileWithTextTransform('{{ msg }}')
expect(code).toMatchSnapshot()
expect(vaporHelpers).contains.all.keys('createTextNode')
expect(helpers).contains.all.keys('createTextNode')
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.CREATE_TEXT_NODE,

5
packages/compiler-vapor/__tests__/transforms/vFor.spec.ts
View File

@ -26,13 +26,12 @@ const compileWithVFor = makeCompile({
describe('compiler: v-for', () => {
test('basic v-for', () => {
const { code, ir, vaporHelpers, helpers } = compileWithVFor(
const { code, ir, helpers } = compileWithVFor(
`<div v-for="item of items" :key="item.id" @click="remove(item)">{{ item }}</div>`,
)
expect(code).matchSnapshot()
expect(vaporHelpers).contains('createFor')
expect(helpers.size).toBe(0)
expect(helpers).contains('createFor')
expect(ir.template).toEqual(['<div></div>'])
expect(ir.block.operation).toMatchObject([
{

22
packages/compiler-vapor/__tests__/transforms/vHtml.spec.ts
View File

@ -16,7 +16,7 @@ const compileWithVHtml = makeCompile({
describe('v-html', () => {
test('should convert v-html to innerHTML', () => {
const { code, ir, helpers, vaporHelpers } = compileWithVHtml(
const { code, ir, helpers } = compileWithVHtml(
`<div v-html="code"></div>`,
{
bindingMetadata: {
@ -25,14 +25,9 @@ describe('v-html', () => {
},
)
expect(vaporHelpers).contains('setHtml')
expect(helpers.size).toBe(0)
expect(helpers).contains('setHtml')
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(ir.block.operation).toMatchObject([])
expect(ir.block.effect).toMatchObject([
{
expressions: [
@ -61,24 +56,19 @@ describe('v-html', () => {
test('should raise error and ignore children when v-html is present', () => {
const onError = vi.fn()
const { code, ir, helpers, vaporHelpers } = compileWithVHtml(
const { code, ir, helpers } = compileWithVHtml(
`<div v-html="test">hello</div>`,
{
onError,
},
)
expect(vaporHelpers).contains('setHtml')
expect(helpers.size).toBe(0)
expect(helpers).contains('setHtml')
// children should have been removed
expect(ir.template).toEqual(['<div></div>'])
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(ir.block.operation).toMatchObject([])
expect(ir.block.effect).toMatchObject([
{
expressions: [

14
packages/compiler-vapor/__tests__/transforms/vIf.spec.ts
View File

@ -28,12 +28,9 @@ const compileWithVIf = makeCompile({
describe('compiler: v-if', () => {
test('basic v-if', () => {
const { code, vaporHelpers, ir, helpers } = compileWithVIf(
`<div v-if="ok">{{msg}}</div>`,
)
const { code, helpers, ir } = compileWithVIf(`<div v-if="ok">{{msg}}</div>`)
expect(vaporHelpers).contains('createIf')
expect(helpers.size).toBe(0)
expect(helpers).contains('createIf')
expect(ir.template).toEqual(['<div></div>'])
expect(ir.block.operation).toMatchObject([
@ -113,15 +110,12 @@ describe('compiler: v-if', () => {
test.todo('component v-if')
test('v-if + v-else', () => {
const { code, ir, vaporHelpers, helpers } = compileWithVIf(
`<div v-if="ok"/><p v-else/>`,
)
const { code, ir, helpers } = compileWithVIf(`<div v-if="ok"/><p v-else/>`)
expect(code).matchSnapshot()
expect(ir.template).toEqual(['<div></div>', '<p></p>'])
expect(vaporHelpers).contains('createIf')
expect(helpers).contains('createIf')
expect(ir.block.effect).lengthOf(0)
expect(helpers).lengthOf(0)
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.IF,

40
packages/compiler-vapor/__tests__/transforms/vModel.spec.ts
View File

@ -16,71 +16,65 @@ const compileWithVModel = makeCompile({
describe('compiler: vModel transform', () => {
test('should support simple expression', () => {
const { code, vaporHelpers } = compileWithVModel(
'<input v-model="model" />',
)
const { code, helpers } = compileWithVModel('<input v-model="model" />')
expect(code).toMatchSnapshot()
expect(vaporHelpers).toContain('vModelText')
expect(helpers).toContain('vModelText')
})
test('should support input (text)', () => {
const { code, vaporHelpers } = compileWithVModel(
const { code, helpers } = compileWithVModel(
'<input type="text" v-model="model" />',
)
expect(code).toMatchSnapshot()
expect(vaporHelpers).toContain('vModelText')
expect(helpers).toContain('vModelText')
})
test('should support input (radio)', () => {
const { code, vaporHelpers } = compileWithVModel(
const { code, helpers } = compileWithVModel(
'<input type="radio" v-model="model" />',
)
expect(code).toMatchSnapshot()
expect(vaporHelpers).toContain('vModelRadio')
expect(helpers).toContain('vModelRadio')
})
test('should support input (checkbox)', () => {
const { code, vaporHelpers } = compileWithVModel(
const { code, helpers } = compileWithVModel(
'<input type="checkbox" v-model="model" />',
)
expect(code).toMatchSnapshot()
expect(vaporHelpers).toContain('vModelCheckbox')
expect(helpers).toContain('vModelCheckbox')
})
test('should support select', () => {
const { code, vaporHelpers } = compileWithVModel(
'<select v-model="model" />',
)
const { code, helpers } = compileWithVModel('<select v-model="model" />')
expect(code).toMatchSnapshot()
expect(vaporHelpers).toContain('vModelSelect')
expect(helpers).toContain('vModelSelect')
})
test('should support textarea', () => {
const { code, vaporHelpers } = compileWithVModel(
'<textarea v-model="model" />',
)
const { code, helpers } = compileWithVModel('<textarea v-model="model" />')
expect(code).toMatchSnapshot()
expect(vaporHelpers).toContain('vModelText')
expect(helpers).toContain('vModelText')
})
test('should support input (dynamic type)', () => {
const { code, vaporHelpers } = compileWithVModel(
const { code, helpers } = compileWithVModel(
'<input :type="foo" v-model="model" />',
)
expect(code).toMatchSnapshot()
expect(vaporHelpers).toContain('vModelDynamic')
expect(helpers).toContain('vModelDynamic')
})
test('should support w/ dynamic v-bind', () => {
const root1 = compileWithVModel('<input v-bind="obj" v-model="model" />')
expect(root1.code).toMatchSnapshot()
expect(root1.vaporHelpers).toContain('vModelDynamic')
expect(root1.helpers).toContain('vModelDynamic')
const root2 = compileWithVModel(
'<input v-bind:[key]="val" v-model="model" />',
)
expect(root2.code).toMatchSnapshot()
expect(root2.vaporHelpers).toContain('vModelDynamic')
expect(root2.helpers).toContain('vModelDynamic')
})
describe('errors', () => {
@ -109,7 +103,7 @@ describe('compiler: vModel transform', () => {
})
// TODO: component
test.fails('should allow usage on custom element', () => {
test.todo('should allow usage on custom element', () => {
const onError = vi.fn()
const root = compileWithVModel('<my-input v-model="model" />', {
onError,

110
packages/compiler-vapor/__tests__/transforms/vOn.spec.ts
View File

@ -16,7 +16,7 @@ const compileWithVOn = makeCompile({
describe('v-on', () => {
test('simple expression', () => {
const { code, ir, helpers, vaporHelpers } = compileWithVOn(
const { code, ir, helpers } = compileWithVOn(
`<div @click="handleClick"></div>`,
{
bindingMetadata: {
@ -26,8 +26,7 @@ describe('v-on', () => {
)
expect(code).matchSnapshot()
expect(vaporHelpers).contains('delegate')
expect(helpers.size).toBe(0)
expect(helpers).contains('delegate')
expect(ir.block.effect).toEqual([])
expect(ir.block.operation).toMatchObject([
{
@ -47,9 +46,6 @@ describe('v-on', () => {
keyOverride: undefined,
delegate: true,
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
})
@ -87,18 +83,13 @@ describe('v-on', () => {
})
test('dynamic arg', () => {
const { code, ir, helpers, vaporHelpers } = compileWithVOn(
const { code, ir, helpers } = compileWithVOn(
`<div v-on:[event]="handler"/>`,
)
expect(vaporHelpers).contains('on')
expect(vaporHelpers).contains('renderEffect')
expect(helpers.size).toBe(0)
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(helpers).contains('on')
expect(helpers).contains('renderEffect')
expect(ir.block.operation).toMatchObject([])
expect(ir.block.effect[0].operations[0]).toMatchObject({
type: IRNodeTypes.SET_EVENT,
@ -127,21 +118,16 @@ describe('v-on', () => {
})
test('dynamic arg with complex exp prefixing', () => {
const { ir, code, helpers, vaporHelpers } = compileWithVOn(
const { ir, code, helpers } = compileWithVOn(
`<div v-on:[event(foo)]="handler"/>`,
{
prefixIdentifiers: true,
},
)
expect(vaporHelpers).contains('on')
expect(vaporHelpers).contains('renderEffect')
expect(helpers.size).toBe(0)
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(helpers).contains('on')
expect(helpers).contains('renderEffect')
expect(ir.block.operation).toMatchObject([])
expect(ir.block.effect[0].operations[0]).toMatchObject({
type: IRNodeTypes.SET_EVENT,
@ -162,12 +148,10 @@ describe('v-on', () => {
})
test('should wrap as function if expression is inline statement', () => {
const { code, ir, helpers, vaporHelpers } =
compileWithVOn(`<div @click="i++"/>`)
const { code, ir, helpers } = compileWithVOn(`<div @click="i++"/>`)
expect(code).matchSnapshot()
expect(vaporHelpers).contains('delegate')
expect(helpers.size).toBe(0)
expect(helpers).contains('delegate')
expect(ir.block.effect).toEqual([])
expect(ir.block.operation).toMatchObject([
{
@ -180,15 +164,12 @@ describe('v-on', () => {
},
delegate: true,
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(code).contains(`_delegate(n0, "click", () => $event => (_ctx.i++))`)
})
test('should wrap in unref if identifier is setup-maybe-ref w/ inline: true', () => {
const { code, helpers, vaporHelpers } = compileWithVOn(
const { code, helpers } = compileWithVOn(
`<div @click="x=y"/><div @click="x++"/><div @click="{ x } = y"/>`,
{
mode: 'module',
@ -200,8 +181,7 @@ describe('v-on', () => {
},
)
expect(code).matchSnapshot()
expect(vaporHelpers).contains('unref')
expect(helpers.size).toBe(0)
expect(helpers).contains('unref')
expect(code).contains(
`_delegate(n0, "click", () => $event => (x.value=_unref(y)))`,
)
@ -220,9 +200,6 @@ describe('v-on', () => {
type: IRNodeTypes.SET_EVENT,
value: { content: 'foo();bar()' },
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
// should wrap with `{` for multiple statements
// in this case the return value is discarded and the behavior is
@ -241,9 +218,6 @@ describe('v-on', () => {
type: IRNodeTypes.SET_EVENT,
value: { content: '\nfoo();\nbar()\n' },
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
// should wrap with `{` for multiple statements
// in this case the return value is discarded and the behavior is
@ -264,9 +238,6 @@ describe('v-on', () => {
type: IRNodeTypes.SET_EVENT,
value: { content: 'foo($event)' },
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
// should NOT prefix $event
expect(code).contains(
@ -285,9 +256,6 @@ describe('v-on', () => {
type: IRNodeTypes.SET_EVENT,
value: { content: 'foo($event);bar()' },
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
// should NOT prefix $event
expect(code).contains(
@ -304,9 +272,6 @@ describe('v-on', () => {
type: IRNodeTypes.SET_EVENT,
value: { content: '$event => foo($event)' },
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(code).contains(
`_delegate(n0, "click", () => $event => _ctx.foo($event))`,
@ -325,9 +290,6 @@ describe('v-on', () => {
type: IRNodeTypes.SET_EVENT,
value: { content: '(e: any): any => foo(e)' },
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(code).contains(
`_delegate(n0, "click", () => (e: any): any => _ctx.foo(e))`,
@ -355,9 +317,6 @@ describe('v-on', () => {
`,
},
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
})
@ -384,9 +343,6 @@ describe('v-on', () => {
type: IRNodeTypes.SET_EVENT,
value: { content: `a['b' + c]` },
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(code).matchSnapshot()
@ -399,9 +355,6 @@ describe('v-on', () => {
type: IRNodeTypes.SET_EVENT,
value: { content: `a['b' + c]` },
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(code).matchSnapshot()
@ -419,9 +372,6 @@ describe('v-on', () => {
type: IRNodeTypes.SET_EVENT,
value: { content: `e => foo(e)` },
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(code).contains(`_delegate(n0, "click", () => e => _ctx.foo(e))`)
})
@ -451,7 +401,7 @@ describe('v-on', () => {
})
test('should support multiple modifiers and event options w/ prefixIdentifiers: true', () => {
const { code, ir, vaporHelpers } = compileWithVOn(
const { code, ir, helpers } = compileWithVOn(
`<div @click.stop.prevent.capture.once="test"/>`,
{
prefixIdentifiers: true,
@ -459,7 +409,7 @@ describe('v-on', () => {
)
expect(code).matchSnapshot()
expect(vaporHelpers).contains('on')
expect(helpers).contains('on')
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.SET_EVENT,
@ -476,9 +426,6 @@ describe('v-on', () => {
keyOverride: undefined,
delegate: false,
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(code).contains(
`_on(n0, "click", () => _ctx.test, {
@ -534,9 +481,6 @@ describe('v-on', () => {
options: [],
},
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(code).matchSnapshot()
@ -579,9 +523,6 @@ describe('v-on', () => {
options: ['capture'],
},
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(code).matchSnapshot()
@ -596,9 +537,6 @@ describe('v-on', () => {
type: IRNodeTypes.SET_EVENT,
modifiers: { nonKeys: ['exact'] },
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(code).matchSnapshot()
@ -618,9 +556,6 @@ describe('v-on', () => {
options: [],
},
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(code).matchSnapshot()
@ -663,9 +598,6 @@ describe('v-on', () => {
modifiers: { nonKeys: ['right'] },
keyOverride: undefined,
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(code).matchSnapshot()
@ -707,9 +639,6 @@ describe('v-on', () => {
modifiers: { nonKeys: ['middle'] },
keyOverride: undefined,
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(code).matchSnapshot()
@ -749,19 +678,16 @@ describe('v-on', () => {
})
test('should delegate event', () => {
const { code, ir, vaporHelpers } = compileWithVOn(`<div @click="test"/>`)
const { code, ir, helpers } = compileWithVOn(`<div @click="test"/>`)
expect(code).matchSnapshot()
expect(code).contains('_delegateEvents("click")')
expect(vaporHelpers).contains('delegateEvents')
expect(helpers).contains('delegateEvents')
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.SET_EVENT,
delegate: true,
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
})
})

37
packages/compiler-vapor/__tests__/transforms/vOnce.spec.ts
View File

@ -11,7 +11,7 @@ const compileWithOnce = makeCompile({
describe('compiler: v-once', () => {
test('basic', () => {
const { ir, code, helpers } = compileWithOnce(
const { ir, code } = compileWithOnce(
`<div v-once>
{{ msg }}
<span :class="clz" />
@ -25,7 +25,6 @@ describe('compiler: v-once', () => {
)
expect(code).toMatchSnapshot()
expect(helpers).lengthOf(0)
expect(ir.block.effect).lengthOf(0)
expect(ir.block.operation).toMatchObject([
{
@ -68,15 +67,14 @@ describe('compiler: v-once', () => {
elements: [0],
parent: 2,
},
{ type: IRNodeTypes.SET_INHERIT_ATTRS },
])
})
test('as root node', () => {
const { ir, code, helpers } = compileWithOnce(`<div :id="foo" v-once />`)
const { ir, code } = compileWithOnce(`<div :id="foo" v-once />`)
expect(code).toMatchSnapshot()
expect(helpers).lengthOf(0)
expect(ir.block.effect).lengthOf(0)
expect(ir.block.operation).toMatchObject([
{
@ -97,20 +95,15 @@ describe('compiler: v-once', () => {
],
},
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(code).not.contains('effect')
})
test('on nested plain element', () => {
const { ir, code, helpers } = compileWithOnce(
`<div><div :id="foo" v-once /></div>`,
)
const { ir, code } = compileWithOnce(`<div><div :id="foo" v-once /></div>`)
expect(code).toMatchSnapshot()
expect(helpers).lengthOf(0)
expect(ir.block.effect).lengthOf(0)
expect(ir.block.operation).toMatchObject([
{
@ -132,9 +125,6 @@ describe('compiler: v-once', () => {
],
},
},
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
})
@ -154,29 +144,26 @@ describe('compiler: v-once', () => {
elements: [0],
parent: 1,
},
{ type: IRNodeTypes.SET_INHERIT_ATTRS },
])
})
test.todo('on slot outlet')
test('inside v-once', () => {
const { ir, code, helpers } = compileWithOnce(
`<div v-once><div v-once/></div>`,
)
const { ir, code } = compileWithOnce(`<div v-once><div v-once/></div>`)
expect(code).toMatchSnapshot()
expect(helpers).lengthOf(0)
expect(ir.block.effect).lengthOf(0)
expect(ir.block.operation).lengthOf(1)
expect(ir.block.operation).lengthOf(0)
})
test.todo('with hoistStatic: true')
test('with v-if', () => {
const { ir, code, helpers } = compileWithOnce(`<div v-if="expr" v-once />`)
const { ir, code } = compileWithOnce(`<div v-if="expr" v-once />`)
expect(code).toMatchSnapshot()
expect(helpers).lengthOf(0)
expect(ir.block.effect).lengthOf(0)
expect(ir.block.operation).toMatchObject([
{
@ -199,11 +186,11 @@ describe('compiler: v-once', () => {
})
test('with v-if/else', () => {
const { ir, code, helpers } = compileWithOnce(
const { ir, code } = compileWithOnce(
`<div v-if="expr" v-once /><p v-else/>`,
)
expect(code).toMatchSnapshot()
expect(helpers).lengthOf(0)
expect(ir.block.effect).lengthOf(0)
expect(ir.block.operation).toMatchObject([
{

21
packages/compiler-vapor/__tests__/transforms/vText.spec.ts
View File

@ -16,23 +16,14 @@ const compileWithVText = makeCompile({
describe('v-text', () => {
test('should convert v-text to textContent', () => {
const { code, ir, helpers, vaporHelpers } = compileWithVText(
`<div v-text="str"></div>`,
{
bindingMetadata: {
str: BindingTypes.SETUP_REF,
},
const { code, ir, helpers } = compileWithVText(`<div v-text="str"></div>`, {
bindingMetadata: {
str: BindingTypes.SETUP_REF,
},
)
})
expect(vaporHelpers).contains('setText')
expect(helpers.size).toBe(0)
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.SET_INHERIT_ATTRS,
},
])
expect(helpers).contains('setText')
expect(ir.block.operation).toMatchObject([])
expect(ir.block.effect).toMatchObject([
{

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

@ -2,7 +2,7 @@ import type {
CodegenOptions as BaseCodegenOptions,
BaseCodegenResult,
} from '@vue/compiler-dom'
import type { BlockIRNode, RootIRNode, VaporHelper } from './ir'
import type { BlockIRNode, CoreHelper, RootIRNode, VaporHelper } from './ir'
import { extend, remove } from '@vue/shared'
import { genBlockContent } from './generators/block'
import { genTemplates } from './generators/template'
@ -23,15 +23,11 @@ export class CodegenContext {
options: Required<CodegenOptions>
helpers: Set<string> = new Set<string>([])
vaporHelpers: Set<string> = new Set<string>([])
helper = (name: string) => {
helper = (name: CoreHelper | VaporHelper) => {
this.helpers.add(name)
return `_${name}`
}
vaporHelper = (name: VaporHelper) => {
this.vaporHelpers.add(name)
return `_${name}`
}
delegates: Set<string> = new Set<string>()
@ -92,7 +88,6 @@ export class CodegenContext {
export interface VaporCodegenResult extends BaseCodegenResult {
ast: RootIRNode
helpers: Set<string>
vaporHelpers: Set<string>
}
// IR -> JS codegen
@ -102,7 +97,7 @@ export function generate(
): VaporCodegenResult {
const [frag, push] = buildCodeFragment()
const context = new CodegenContext(ir, options)
const { helpers, vaporHelpers } = context
const { helpers } = context
const { inline, bindingMetadata } = options
const functionName = 'render'
@ -152,30 +147,24 @@ export function generate(
preamble,
map: map && map.toJSON(),
helpers,
vaporHelpers,
}
}
function genDelegates({ delegates, vaporHelper }: CodegenContext) {
function genDelegates({ delegates, helper }: CodegenContext) {
return delegates.size
? genCall(
vaporHelper('delegateEvents'),
helper('delegateEvents'),
...Array.from(delegates).map(v => `"${v}"`),
).join('') + '\n'
: ''
}
function genHelperImports({ helpers, vaporHelpers, options }: CodegenContext) {
function genHelperImports({ helpers, helper, options }: CodegenContext) {
let imports = ''
if (helpers.size) {
imports += `import { ${[...helpers]
.map(h => `${h} as _${h}`)
.join(', ')} } from '${options.runtimeModuleName}';\n`
}
if (vaporHelpers.size) {
imports += `import { ${[...vaporHelpers]
.map(h => `${h} as _${h}`)
.join(', ')} } from 'vue';\n`
}
return imports
}

6
packages/compiler-vapor/src/generators/block.ts
View File

@ -1,4 +1,4 @@
import type { BlockIRNode, VaporHelper } from '../ir'
import type { BlockIRNode, CoreHelper } from '../ir'
import {
type CodeFragment,
DELIMITERS_ARRAY,
@ -69,13 +69,13 @@ export function genBlockContent(
function genResolveAssets(
kind: 'component' | 'directive',
helper: VaporHelper,
helper: CoreHelper,
) {
for (const name of context.ir[kind]) {
push(
NEWLINE,
`const ${toValidAssetId(name, kind)} = `,
...genCall(context.vaporHelper(helper), JSON.stringify(name)),
...genCall(context.helper(helper), JSON.stringify(name)),
)
}
}

15
packages/compiler-vapor/src/generators/component.ts
View File

@ -17,7 +17,6 @@ import {
} from '../ir'
import {
type CodeFragment,
DELIMITERS_ARRAY,
DELIMITERS_ARRAY_NEWLINE,
DELIMITERS_OBJECT,
DELIMITERS_OBJECT_NEWLINE,
@ -43,7 +42,7 @@ export function genCreateComponent(
operation: CreateComponentIRNode,
context: CodegenContext,
): CodeFragment[] {
const { vaporHelper } = context
const { helper } = context
const tag = genTag()
const { root, props, slots, once } = operation
@ -55,8 +54,8 @@ export function genCreateComponent(
`const n${operation.id} = `,
...genCall(
operation.asset
? vaporHelper('createComponentWithFallback')
: vaporHelper('createComponent'),
? helper('createComponentWithFallback')
: helper('createComponent'),
tag,
rawProps,
rawSlots,
@ -69,7 +68,7 @@ export function genCreateComponent(
function genTag() {
if (operation.dynamic) {
return genCall(
vaporHelper('resolveDynamicComponent'),
helper('resolveDynamicComponent'),
genExpression(operation.dynamic, context),
)
} else if (operation.asset) {
@ -122,7 +121,7 @@ function genDynamicProps(
props: IRProps[],
context: CodegenContext,
): CodeFragment[] | undefined {
const { vaporHelper } = context
const { helper } = context
const frags: CodeFragment[][] = []
for (const p of props) {
let expr: CodeFragment[]
@ -136,7 +135,7 @@ function genDynamicProps(
expr = genMulti(DELIMITERS_OBJECT, genProp(p, context))
else {
expr = genExpression(p.value, context)
if (p.handler) expr = genCall(vaporHelper('toHandlers'), expr)
if (p.handler) expr = genCall(helper('toHandlers'), expr)
}
}
frags.push(['() => (', ...expr, ')'])
@ -294,7 +293,7 @@ function genLoopSlot(
)
return [
...genCall(
context.vaporHelper('createForSlots'),
context.helper('createForSlots'),
genExpression(source, context),
[
...genMulti(

9
packages/compiler-vapor/src/generators/directive.ts
View File

@ -32,16 +32,13 @@ export function genWithDirective(
opers: WithDirectiveIRNode[],
context: CodegenContext,
): CodeFragment[] {
const { vaporHelper } = context
const { helper } = context
const element = `n${opers[0].element}`
const directiveItems = opers.map(genDirective)
const directives = genMulti(DELIMITERS_ARRAY, ...directiveItems)
return [
NEWLINE,
...genCall(vaporHelper('withDirectives'), element, directives),
]
return [NEWLINE, ...genCall(helper('withDirectives'), element, directives)]
function genDirective({
dir,
@ -68,7 +65,7 @@ export function genWithDirective(
function genDirective() {
if (builtin) {
return vaporHelper(name as any)
return helper(name as any)
} else if (asset) {
return toValidAssetId(name, 'directive')
} else {

8
packages/compiler-vapor/src/generators/dom.ts
View File

@ -4,14 +4,14 @@ import { type CodeFragment, NEWLINE, genCall } from './utils'
export function genInsertNode(
{ parent, elements, anchor }: InsertNodeIRNode,
{ vaporHelper }: CodegenContext,
{ helper }: CodegenContext,
): CodeFragment[] {
let element = elements.map(el => `n${el}`).join(', ')
if (elements.length > 1) element = `[${element}]`
return [
NEWLINE,
...genCall(
vaporHelper('insert'),
helper('insert'),
element,
`n${parent}`,
anchor === undefined ? undefined : `n${anchor}`,
@ -21,12 +21,12 @@ export function genInsertNode(
export function genPrependNode(
oper: PrependNodeIRNode,
{ vaporHelper }: CodegenContext,
{ helper }: CodegenContext,
): CodeFragment[] {
return [
NEWLINE,
...genCall(
vaporHelper('prepend'),
helper('prepend'),
`n${oper.parent}`,
...oper.elements.map(el => `n${el}`),
),

8
packages/compiler-vapor/src/generators/event.ts
View File

@ -18,7 +18,7 @@ export function genSetEvent(
oper: SetEventIRNode,
context: CodegenContext,
): CodeFragment[] {
const { vaporHelper } = context
const { helper } = context
const { element, key, keyOverride, value, modifiers, delegate, effect } = oper
const name = genName()
@ -33,7 +33,7 @@ export function genSetEvent(
return [
NEWLINE,
...genCall(
vaporHelper(delegate ? 'delegate' : 'on'),
helper(delegate ? 'delegate' : 'on'),
`n${element}`,
name,
handler,
@ -72,11 +72,11 @@ export function genSetDynamicEvents(
oper: SetDynamicEventsIRNode,
context: CodegenContext,
): CodeFragment[] {
const { vaporHelper } = context
const { helper } = context
return [
NEWLINE,
...genCall(
vaporHelper('setDynamicEvents'),
helper('setDynamicEvents'),
`n${oper.element}`,
genExpression(oper.event, context),
),

6
packages/compiler-vapor/src/generators/expression.ts
View File

@ -110,7 +110,7 @@ export function genExpression(
function genIdentifier(
raw: string,
{ options, vaporHelper, identifiers }: CodegenContext,
{ options, helper, identifiers }: CodegenContext,
loc?: SourceLocation,
assignment?: string,
id?: Identifier,
@ -161,7 +161,7 @@ function genIdentifier(
isAssignmentLVal || isUpdateArg || isDestructureAssignment
? (name = `${raw}.value`)
: assignment
? `${vaporHelper('isRef')}(${raw}) ? (${raw}.value = ${assignment}) : null`
? `${helper('isRef')}(${raw}) ? (${raw}.value = ${assignment}) : null`
: unref()
break
default:
@ -183,7 +183,7 @@ function genIdentifier(
return assignment ? `${s} = ${assignment}` : s
}
function unref() {
return `${vaporHelper('unref')}(${raw})`
return `${helper('unref')}(${raw})`
}
}

6
packages/compiler-vapor/src/generators/for.ts
View File

@ -15,7 +15,7 @@ export function genFor(
oper: ForIRNode,
context: CodegenContext,
): CodeFragment[] {
const { vaporHelper } = context
const { helper } = context
const { source, value, key, index, render, keyProp, once, id, container } =
oper
@ -47,7 +47,7 @@ export function genFor(
]
blockFn = genCall(
vaporHelper('withDestructure'),
helper('withDestructure'),
destructureAssignmentFn,
blockFn,
)
@ -57,7 +57,7 @@ export function genFor(
NEWLINE,
`const n${id} = `,
...genCall(
vaporHelper('createFor'),
helper('createFor'),
sourceExpr,
blockFn,
genCallback(keyProp),

4
packages/compiler-vapor/src/generators/html.ts
View File

@ -7,11 +7,11 @@ export function genSetHtml(
oper: SetHtmlIRNode,
context: CodegenContext,
): CodeFragment[] {
const { vaporHelper } = context
const { helper } = context
return [
NEWLINE,
...genCall(
vaporHelper('setHtml'),
helper('setHtml'),
`n${oper.element}`,
genExpression(oper.value, context),
),

4
packages/compiler-vapor/src/generators/if.ts
View File

@ -9,7 +9,7 @@ export function genIf(
context: CodegenContext,
isNested = false,
): CodeFragment[] {
const { vaporHelper } = context
const { helper } = context
const { condition, positive, negative, once } = oper
const [frag, push] = buildCodeFragment()
@ -33,7 +33,7 @@ export function genIf(
if (!isNested) push(NEWLINE, `const n${oper.id} = `)
push(
...genCall(
vaporHelper('createIf'),
helper('createIf'),
conditionExpr,
positiveArg,
negativeArg,

4
packages/compiler-vapor/src/generators/modelValue.ts
View File

@ -9,7 +9,7 @@ export function genSetModelValue(
oper: SetModelValueIRNode,
context: CodegenContext,
): CodeFragment[] {
const { vaporHelper } = context
const { helper } = context
const name = oper.key.isStatic
? [JSON.stringify(`update:${camelize(oper.key.content)}`)]
: ['`update:${', ...genExpression(oper.key, context), '}`']
@ -18,7 +18,7 @@ export function genSetModelValue(
return [
NEWLINE,
...genCall(vaporHelper('delegate'), `n${oper.element}`, name, handler),
...genCall(helper('delegate'), `n${oper.element}`, name, handler),
]
}

8
packages/compiler-vapor/src/generators/operation.ts
View File

@ -6,7 +6,7 @@ import { genFor } from './for'
import { genSetHtml } from './html'
import { genIf } from './if'
import { genSetModelValue } from './modelValue'
import { genDynamicProps, genSetInheritAttrs, genSetProp } from './prop'
import { genDynamicProps, genSetProp } from './prop'
import { genDeclareOldRef, genSetTemplateRef } from './templateRef'
import { genCreateTextNode, genSetText } from './text'
import {
@ -67,8 +67,6 @@ export function genOperation(
return genDeclareOldRef(oper)
case IRNodeTypes.SLOT_OUTLET_NODE:
return genSlotOutlet(oper, context)
case IRNodeTypes.SET_INHERIT_ATTRS:
return genSetInheritAttrs(oper, context)
}
return []
@ -89,10 +87,10 @@ export function genEffect(
{ operations }: IREffect,
context: CodegenContext,
): CodeFragment[] {
const { vaporHelper } = context
const { helper } = context
const [frag, push] = buildCodeFragment(
NEWLINE,
`${vaporHelper('renderEffect')}(() => `,
`${helper('renderEffect')}(() => `,
)
const [operationsExps, pushOps] = buildCodeFragment()

34
packages/compiler-vapor/src/generators/prop.ts
View File

@ -8,7 +8,6 @@ import {
IRDynamicPropsKind,
type IRProp,
type SetDynamicPropsIRNode,
type SetInheritAttrsIRNode,
type SetPropIRNode,
type VaporHelper,
} from '../ir'
@ -39,7 +38,7 @@ export function genSetProp(
oper: SetPropIRNode,
context: CodegenContext,
): CodeFragment[] {
const { vaporHelper } = context
const { helper } = context
const {
prop: { key, values, modifier },
tag,
@ -49,7 +48,7 @@ export function genSetProp(
return [
NEWLINE,
...genCall(
[vaporHelper(helperName), null],
[helper(helperName), null],
`n${oper.element}`,
omitKey ? false : genExpression(key, context),
genPropValue(values, context),
@ -66,11 +65,11 @@ export function genDynamicProps(
oper: SetDynamicPropsIRNode,
context: CodegenContext,
): CodeFragment[] {
const { vaporHelper } = context
const { helper } = context
return [
NEWLINE,
...genCall(
vaporHelper('setDynamicProps'),
helper('setDynamicProps'),
`n${oper.element}`,
genMulti(
DELIMITERS_ARRAY,
@ -144,31 +143,6 @@ export function genPropValue(
)
}
export function genSetInheritAttrs(
{ staticProps, dynamicProps }: SetInheritAttrsIRNode,
context: CodegenContext,
): CodeFragment[] {
const { vaporHelper } = context
// - `undefined` : no props
// - `false` : all props are static
// - `string[]` : list of props are dynamic
// - `true` : all props as dynamic
const value =
dynamicProps === true
? 'true'
: dynamicProps.length
? genMulti(
DELIMITERS_ARRAY,
...dynamicProps.map(p => JSON.stringify(p)),
)
: staticProps
? 'false'
: null
if (value == null) return []
return [NEWLINE, ...genCall(vaporHelper('setInheritAttrs'), value)]
}
function getRuntimeHelper(
tag: string,
keyName: string,

4
packages/compiler-vapor/src/generators/slotOutlet.ts
View File

@ -9,7 +9,7 @@ export function genSlotOutlet(
oper: SlotOutletIRNode,
context: CodegenContext,
): CodeFragment[] {
const { vaporHelper } = context
const { helper } = context
const { id, name, fallback } = oper
const [frag, push] = buildCodeFragment()
@ -26,7 +26,7 @@ export function genSlotOutlet(
NEWLINE,
`const n${id} = `,
...genCall(
vaporHelper('createSlot'),
helper('createSlot'),
nameExpr,
genRawProps(oper.props, context) || 'null',
fallbackArg,

14
packages/compiler-vapor/src/generators/template.ts
View File

@ -5,12 +5,12 @@ import { type CodeFragment, NEWLINE, buildCodeFragment, genCall } from './utils'
export function genTemplates(
templates: string[],
{ vaporHelper }: CodegenContext,
{ helper }: CodegenContext,
): string {
return templates
.map(
(template, i) =>
`const t${i} = ${vaporHelper('template')}(${JSON.stringify(template)})\n`,
`const t${i} = ${helper('template')}(${JSON.stringify(template)})\n`,
)
.join('')
}
@ -21,7 +21,7 @@ export function genChildren(
from: number,
paths: number[] = [],
): CodeFragment[] {
const { vaporHelper } = context
const { helper } = context
const [frag, push] = buildCodeFragment()
let offset = 0
const { children, id, template } = dynamic
@ -58,18 +58,14 @@ export function genChildren(
if (offset === 1) {
push(`n${prev[0]}.nextSibling`)
} else {
push(...genCall(vaporHelper('next'), `n${prev[0]}`, String(offset)))
push(...genCall(helper('next'), `n${prev[0]}`, String(offset)))
}
} else {
if (newPaths.length === 1 && newPaths[0] === 0) {
push(`n${from}.firstChild`)
} else {
push(
...genCall(
vaporHelper('children'),
`n${from}`,
...newPaths.map(String),
),
...genCall(helper('children'), `n${from}`, ...newPaths.map(String)),
)
}
}

4
packages/compiler-vapor/src/generators/templateRef.ts
View File

@ -7,12 +7,12 @@ export function genSetTemplateRef(
oper: SetTemplateRefIRNode,
context: CodegenContext,
): CodeFragment[] {
const { vaporHelper } = context
const { helper } = context
return [
NEWLINE,
oper.effect && `r${oper.element} = `,
...genCall(
vaporHelper('setRef'),
helper('setRef'),
`n${oper.element}`,
genExpression(oper.value, context),
oper.effect ? `r${oper.element}` : oper.refFor ? 'void 0' : undefined,

8
packages/compiler-vapor/src/generators/text.ts
View File

@ -13,12 +13,12 @@ export function genSetText(
oper: SetTextIRNode,
context: CodegenContext,
): CodeFragment[] {
const { vaporHelper } = context
const { helper } = context
const { element, values } = oper
return [
NEWLINE,
...genCall(
vaporHelper('setText'),
helper('setText'),
`n${element}`,
...values.map(value => genExpression(value, context)),
),
@ -29,12 +29,12 @@ export function genCreateTextNode(
oper: CreateTextNodeIRNode,
context: CodegenContext,
): CodeFragment[] {
const { vaporHelper } = context
const { helper } = context
const { id, values, effect } = oper
return [
NEWLINE,
`const n${id} = `,
...genCall(vaporHelper('createTextNode'), [
...genCall(helper('createTextNode'), [
effect && '() => ',
...genMulti(
DELIMITERS_ARRAY,

10
packages/compiler-vapor/src/ir/index.ts
View File

@ -24,7 +24,6 @@ export enum IRNodeTypes {
SET_HTML,
SET_TEMPLATE_REF,
SET_MODEL_VALUE,
SET_INHERIT_ATTRS,
INSERT_NODE,
PREPEND_NODE,
@ -43,6 +42,8 @@ export interface BaseIRNode {
type: IRNodeTypes
}
export type CoreHelper = keyof typeof import('packages/runtime-core/src')
export type VaporHelper = keyof typeof import('packages/runtime-vapor/src')
export interface BlockIRNode extends BaseIRNode {
@ -159,12 +160,6 @@ export interface SetModelValueIRNode extends BaseIRNode {
isComponent: boolean
}
export interface SetInheritAttrsIRNode extends BaseIRNode {
type: IRNodeTypes.SET_INHERIT_ATTRS
staticProps: boolean
dynamicProps: true | string[]
}
export interface CreateTextNodeIRNode extends BaseIRNode {
type: IRNodeTypes.CREATE_TEXT_NODE
id: number
@ -229,7 +224,6 @@ export type OperationNode =
| SetHtmlIRNode
| SetTemplateRefIRNode
| SetModelValueIRNode
| SetInheritAttrsIRNode
| CreateTextNodeIRNode
| InsertNodeIRNode
| PrependNodeIRNode

10
packages/compiler-vapor/src/transforms/transformElement.ts
View File

@ -186,7 +186,6 @@ function transformNativeElement(
template += `<${tag}`
if (scopeId) template += ` ${scopeId}`
let staticProps = false
const dynamicProps: string[] = []
if (propsResult[0] /* dynamic props */) {
const [, dynamicArgs, expressions] = propsResult
@ -200,7 +199,6 @@ function transformNativeElement(
for (const prop of propsResult[1]) {
const { key, values } = prop
if (key.isStatic && values.length === 1 && values[0].isStatic) {
staticProps = true
template += ` ${key.content}`
if (values[0].content) template += `="${values[0].content}"`
} else {
@ -216,14 +214,6 @@ function transformNativeElement(
}
}
if (singleRoot) {
context.registerOperation({
type: IRNodeTypes.SET_INHERIT_ATTRS,
staticProps: staticProps,
dynamicProps: propsResult[0] ? true : dynamicProps,
})
}
template += `>` + context.childrenTemplate.join('')
// TODO remove unnecessary close tag, e.g. if it's the last element of the template
if (!isVoidTag(tag)) {