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

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

@@ -12,6 +12,18 @@ export function render(_ctx) {
 }"
 `;
 
+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, true))
+  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/vapor';
 const t0 = _template("<div></div>")
@@ -24,6 +36,42 @@ export function render(_ctx) {
 }"
 `;
 
+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, true))
+  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, true))
+  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, true))
+  return n0
+}"
+`;
+
 exports[`compiler v-bind > .camel modifier 1`] = `
 "import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
 const t0 = _template("<div></div>")
@@ -85,6 +133,66 @@ export function render(_ctx) {
 }"
 `;
 
+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, true))
+  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.fooBar, true))
+  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, true))
+  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, true))
+  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, true))
+  return n0
+}"
+`;
+
 exports[`compiler v-bind > .prop modifier 1`] = `
 "import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
 const t0 = _template("<div></div>")
@@ -109,6 +217,18 @@ 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, true))
+  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>")
@@ -121,6 +241,90 @@ export function render(_ctx) {
 }"
 `;
 
+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, true))
+  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, true))
+  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, true))
+  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, true))
+  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, true))
+  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, true))
+  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, true))
+  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/vapor';
 const t0 = _template("<div></div>")

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

@@ -454,7 +454,7 @@ describe('compiler v-bind', () => {
     expect(code).contains('_setDOMProp(n0, "fooBar", _ctx.id, true)')
   })
 
-  test('.prop modifier (shortband) w/ no expression', () => {
+  test('.prop modifier (shorthand) w/ no expression', () => {
     const { ir, code } = compileWithVBind(`<div .fooBar />`)
 
     expect(code).matchSnapshot()
@@ -478,6 +478,54 @@ describe('compiler v-bind', () => {
     expect(code).contains('_setDOMProp(n0, "fooBar", _ctx.fooBar, true)')
   })
 
+  test('.prop modifier w/ innerHTML', () => {
+    const { code } = compileWithVBind(`<div :innerHTML.prop="foo" />`)
+    expect(code).matchSnapshot()
+    expect(code).contains('_setHtml(n0, _ctx.foo, true)')
+  })
+
+  test('.prop modifier (shorthand) w/ innerHTML', () => {
+    const { code } = compileWithVBind(`<div .innerHTML="foo" />`)
+    expect(code).matchSnapshot()
+    expect(code).contains('_setHtml(n0, _ctx.foo, true)')
+  })
+
+  test('.prop modifier w/ textContent', () => {
+    const { code } = compileWithVBind(`<div :textContent.prop="foo" />`)
+    expect(code).matchSnapshot()
+    expect(code).contains('_setText(n0, _ctx.foo, true)')
+  })
+
+  test('.prop modifier (shorthand) w/ textContent', () => {
+    const { code } = compileWithVBind(`<div .textContent="foo" />`)
+    expect(code).matchSnapshot()
+    expect(code).contains('_setText(n0, _ctx.foo, true)')
+  })
+
+  test('.prop modifier w/ value', () => {
+    const { code } = compileWithVBind(`<div :value.prop="foo" />`)
+    expect(code).matchSnapshot()
+    expect(code).contains('_setValue(n0, _ctx.foo, true)')
+  })
+
+  test('.prop modifier (shorthand) w/ value', () => {
+    const { code } = compileWithVBind(`<div .value="foo" />`)
+    expect(code).matchSnapshot()
+    expect(code).contains('_setValue(n0, _ctx.foo, true)')
+  })
+
+  test('.prop modifier w/ progress value', () => {
+    const { code } = compileWithVBind(`<progress :value.prop="foo" />`)
+    expect(code).matchSnapshot()
+    expect(code).contains('_setDOMProp(n0, "value", _ctx.foo, true)')
+  })
+
+  test('.prop modifier (shorthand) w/ progress value', () => {
+    const { code } = compileWithVBind(`<progress .value="foo" />`)
+    expect(code).matchSnapshot()
+    expect(code).contains('_setDOMProp(n0, "value", _ctx.foo, true)')
+  })
+
   test('.attr modifier', () => {
     const { ir, code } = compileWithVBind(`<div v-bind:foo-bar.attr="id"/>`)
 
@@ -527,6 +575,30 @@ describe('compiler v-bind', () => {
     expect(code).contains('_setAttr(n0, "foo-bar", _ctx.fooBar, true)')
   })
 
+  test('.attr modifier w/ innerHTML', () => {
+    const { code } = compileWithVBind(`<div :innerHTML.attr="foo" />`)
+    expect(code).matchSnapshot()
+    expect(code).contains('_setAttr(n0, "innerHTML", _ctx.foo, true)')
+  })
+
+  test('.attr modifier w/ textContent', () => {
+    const { code } = compileWithVBind(`<div :textContent.attr="foo" />`)
+    expect(code).matchSnapshot()
+    expect(code).contains('_setAttr(n0, "textContent", _ctx.foo, true)')
+  })
+
+  test('.attr modifier w/ value', () => {
+    const { code } = compileWithVBind(`<div :value.attr="foo" />`)
+    expect(code).matchSnapshot()
+    expect(code).contains('_setAttr(n0, "value", _ctx.foo, true)')
+  })
+
+  test('.attr modifier w/ progress value', () => {
+    const { code } = compileWithVBind(`<progress :value.attr="foo" />`)
+    expect(code).matchSnapshot()
+    expect(code).contains('_setAttr(n0, "value", _ctx.foo, true)')
+  })
+
   test('attributes must be set as attribute', () => {
     const { code } = compileWithVBind(`
       <div :spellcheck :draggable :translate :form />
@@ -594,6 +666,38 @@ describe('compiler v-bind', () => {
     expect(code).contains('_setDOMProp(n0, "tabindex", _ctx.tabindex, true)')
   })
 
+  test(':innerHTML', () => {
+    const { code } = compileWithVBind(`
+      <div :innerHTML="foo"/>
+    `)
+    expect(code).matchSnapshot()
+    expect(code).contains('_setHtml(n0, _ctx.foo, true)')
+  })
+
+  test(':textContext', () => {
+    const { code } = compileWithVBind(`
+      <div :textContent="foo"/>
+    `)
+    expect(code).matchSnapshot()
+    expect(code).contains('_setText(n0, _ctx.foo, true)')
+  })
+
+  test(':value', () => {
+    const { code } = compileWithVBind(`
+      <input :value="foo"/>
+    `)
+    expect(code).matchSnapshot()
+    expect(code).contains('_setValue(n0, _ctx.foo, true)')
+  })
+
+  test(':value w/ progress', () => {
+    const { code } = compileWithVBind(`
+      <progress :value="foo"/>
+    `)
+    expect(code).matchSnapshot()
+    expect(code).contains('_setDynamicProp(n0, "value", _ctx.foo, true)')
+  })
+
   test('number value', () => {
     const { code } = compileWithVBind(`<Comp :depth="0" />`)
     expect(code).matchSnapshot()