Skip to content

Commit

Permalink
perf(runtime-vapor): optimize setDOMProp on static tag + key (#294)
Browse files Browse the repository at this point in the history
  • Loading branch information
@edison1105
edison1105 authored Dec 1, 2024
1 parent 842f94c commit 0196e1a
Show file tree
Hide file tree
Showing 10 changed files with 483 additions and 146 deletions.
2 changes: 1 addition & 1 deletion packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ export function render(_ctx) {
_delegate(n0, "click", () => _ctx.handleClick)
_setInheritAttrs(["id"])
_renderEffect(() => _setText(n0, _ctx.count, "foo", _ctx.count, "foo", _ctx.count))
_renderEffect(() => _setDOMProp(n0, "id", _ctx.count, true))
_renderEffect(() => _setDOMProp(n0, "id", _ctx.count))
return n0
}"
`;
Expand Down
244 changes: 218 additions & 26 deletions packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,19 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["foo-bar"])
_renderEffect(() => _setAttr(n0, "foo-bar", _ctx.id, true))
_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/vapor';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["innerHTML"])
_renderEffect(() => _setAttr(n0, "innerHTML", _ctx.foo))
return n0
}"
`;
Expand All @@ -19,7 +31,43 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["foo-bar"])
_renderEffect(() => _setAttr(n0, "foo-bar", _ctx.fooBar, true))
_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/vapor';
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/vapor';
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/vapor';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["value"])
_renderEffect(() => _setAttr(n0, "value", _ctx.foo))
return n0
}"
`;
Expand All @@ -31,7 +79,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["fooBar"])
_renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.id, true))
_renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.id))
return n0
}"
`;
Expand All @@ -56,31 +104,79 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["fooBar"])
_renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.fooBar, true))
_renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.fooBar))
return n0
}"
`;

exports[`compiler v-bind > .prop modifier (shortband) w/ no expression 1`] = `
exports[`compiler v-bind > .prop modifier (shorthand) 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["fooBar"])
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar, true))
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id))
return n0
}"
`;

exports[`compiler v-bind > .prop modifier (shorthand) 1`] = `
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/vapor';
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/vapor';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["fooBar"])
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id, true))
_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/vapor';
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/vapor';
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/vapor';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["value"])
_renderEffect(() => _setValue(n0, _ctx.foo))
return n0
}"
`;
Expand All @@ -92,7 +188,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["fooBar"])
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id, true))
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id))
return n0
}"
`;
Expand All @@ -109,14 +205,110 @@ export function render(_ctx) {
}"
`;

exports[`compiler v-bind > .prop modifier w/ innerHTML 1`] = `
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue/vapor';
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/vapor';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["fooBar"])
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar, true))
_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/vapor';
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/vapor';
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/vapor';
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/vapor';
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/vapor';
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/vapor';
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/vapor';
const t0 = _template("<progress></progress>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["value"])
_renderEffect(() => _setDynamicProp(n0, "value", _ctx.foo))
return n0
}"
`;
Expand All @@ -128,11 +320,11 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["id", "title", "lang", "dir", "tabindex"])
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id, true))
_renderEffect(() => _setDOMProp(n0, "title", _ctx.title, true))
_renderEffect(() => _setDOMProp(n0, "lang", _ctx.lang, true))
_renderEffect(() => _setDOMProp(n0, "dir", _ctx.dir, true))
_renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex, true))
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id))
_renderEffect(() => _setDOMProp(n0, "title", _ctx.title))
_renderEffect(() => _setDOMProp(n0, "lang", _ctx.lang))
_renderEffect(() => _setDOMProp(n0, "dir", _ctx.dir))
_renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex))
return n0
}"
`;
Expand All @@ -144,11 +336,11 @@ const t0 = _template("<math></math>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["autofucus", "dir", "displaystyle", "mathcolor", "tabindex"])
_renderEffect(() => _setDOMProp(n0, "autofucus", _ctx.autofucus, true))
_renderEffect(() => _setDOMProp(n0, "dir", _ctx.dir, true))
_renderEffect(() => _setDOMProp(n0, "displaystyle", _ctx.displaystyle, true))
_renderEffect(() => _setDOMProp(n0, "mathcolor", _ctx.mathcolor, true))
_renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex, true))
_renderEffect(() => _setDOMProp(n0, "autofucus", _ctx.autofucus))
_renderEffect(() => _setDOMProp(n0, "dir", _ctx.dir))
_renderEffect(() => _setDOMProp(n0, "displaystyle", _ctx.displaystyle))
_renderEffect(() => _setDOMProp(n0, "mathcolor", _ctx.mathcolor))
_renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex))
return n0
}"
`;
Expand All @@ -160,9 +352,9 @@ const t0 = _template("<svg></svg>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["id", "lang", "tabindex"])
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id, true))
_renderEffect(() => _setDOMProp(n0, "lang", _ctx.lang, true))
_renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex, true))
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id))
_renderEffect(() => _setDOMProp(n0, "lang", _ctx.lang))
_renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex))
return n0
}"
`;
Expand Down Expand Up @@ -214,7 +406,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["id"])
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id, true))
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id))
return n0
}"
`;
Expand Down Expand Up @@ -250,7 +442,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["camel-case"])
_renderEffect(() => _setDynamicProp(n0, "camel-case", _ctx.camelCase, true))
_renderEffect(() => _setDynamicProp(n0, "camel-case", _ctx.camelCase))
return n0
}"
`;
Expand All @@ -262,7 +454,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setInheritAttrs(["id"])
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id, true))
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id))
return n0
}"
`;
Expand Down
4 changes: 2 additions & 2 deletions packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
const n2 = t0()
_setInheritAttrs(["item", "index"])
_renderEffect(() => _setDynamicProp(n2, "item", _ctx0[0].value, true))
_renderEffect(() => _setDynamicProp(n2, "index", _ctx0[1].value, true))
_renderEffect(() => _setDynamicProp(n2, "item", _ctx0[0].value))
_renderEffect(() => _setDynamicProp(n2, "index", _ctx0[1].value))
return n2
})
return n0
Expand Down
2 changes: 1 addition & 1 deletion packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
_setDOMProp(n0, "id", _ctx.foo, true)
_setDOMProp(n0, "id", _ctx.foo)
_setInheritAttrs(["id"])
return n0
}"
Expand Down
Loading

0 comments on commit 0196e1a

Please sign in to comment.