perf(runtime-vapor): optimize setDOMProp on static tag + key

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

@@ -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
 }"
 `;

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

@@ -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
 }"
 `;
@@ -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
 }"
 `;
@@ -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
 }"
 `;
@@ -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
 }"
 `;
@@ -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
 }"
 `;
@@ -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
 }"
 `;
@@ -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
 }"
 `;
@@ -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
 }"
 `;
@@ -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
 }"
 `;
@@ -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
 }"
 `;
@@ -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
 }"
 `;
@@ -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
 }"
 `;

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

@@ -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

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

@@ -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
 }"