refactor: get oldVal from metadata

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

@@ -10,7 +10,7 @@ export function render(_ctx) {
   const n1 = _createTextNode(_ctx.count)
   _insert(n1, n3, n2)
   _renderEffect(() => {
-    _setText(n1, undefined, _ctx.count)
+    _setText(n1, _ctx.count)
   })
   return n0
 }"
@@ -130,10 +130,10 @@ export function render(_ctx) {
   const n1 = _createTextNode(_ctx.bar)
   _append(n2, n1)
   _renderEffect(() => {
-    _setText(n1, undefined, _ctx.bar)
+    _setText(n1, _ctx.bar)
   })
   _renderEffect(() => {
-    _setDynamicProp(n2, "id", undefined, _ctx.foo)
+    _setDynamicProp(n2, "id", _ctx.foo)
   })
   return n0
 }"
@@ -149,10 +149,10 @@ export function render(_ctx) {
   const n1 = _createTextNode(_ctx.bar)
   _append(n2, n1)
   _renderEffect(() => {
-    _setText(n1, undefined, _ctx.bar)
+    _setText(n1, _ctx.bar)
   })
   _renderEffect(() => {
-    _setDynamicProp(n2, "id", undefined, _ctx.foo)
+    _setDynamicProp(n2, "id", _ctx.foo)
   })
   return n0
 }"
@@ -169,10 +169,10 @@ export function render(_ctx) {
   const n2 = _createTextNode(2)
   _append(n0, n1, n2)
   _renderEffect(() => {
-    _setText(n1, undefined, 1)
+    _setText(n1, 1)
   })
   _renderEffect(() => {
-    _setText(n2, undefined, 2)
+    _setText(n2, 2)
   })
   return n0
 }"
@@ -193,10 +193,10 @@ export function render(_ctx) {
   _append(n4, n3)
   _on(n4, "click", (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
   _renderEffect(() => {
-    _setText(n1, undefined, _ctx.count)
-    _setText(n2, undefined, _ctx.count)
-    _setText(n3, undefined, _ctx.count)
-    _setDynamicProp(n4, "id", undefined, _ctx.count)
+    _setText(n1, _ctx.count)
+    _setText(n2, _ctx.count)
+    _setText(n3, _ctx.count)
+    _setDynamicProp(n4, "id", _ctx.count)
   })
   return n0
 }"
@@ -210,7 +210,7 @@ exports[`compile > expression parsing > interpolation 1`] = `
   const n1 = _createTextNode(a + b.value)
   _append(n0, n1)
   _renderEffect(() => {
-    _setText(n1, undefined, a + b.value)
+    _setText(n1, a + b.value)
   })
   return n0
 })()"
@@ -222,7 +222,7 @@ exports[`compile > expression parsing > v-bind 1`] = `
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setDynamicProp(n1, key.value+1, undefined, _unref(foo)[key.value+1]())
+    _setDynamicProp(n1, key.value+1, _unref(foo)[key.value+1]())
   })
   return n0
 })()"
@@ -258,28 +258,28 @@ export function render(_ctx) {
   _insert([n5, n6], n0, n10)
   _append(n0, n7, n8)
   _renderEffect(() => {
-    _setText(n1, undefined, 1)
+    _setText(n1, 1)
   })
   _renderEffect(() => {
-    _setText(n2, undefined, 2)
+    _setText(n2, 2)
   })
   _renderEffect(() => {
-    _setText(n3, undefined, 4)
+    _setText(n3, 4)
   })
   _renderEffect(() => {
-    _setText(n4, undefined, 5)
+    _setText(n4, 5)
   })
   _renderEffect(() => {
-    _setText(n5, undefined, 7)
+    _setText(n5, 7)
   })
   _renderEffect(() => {
-    _setText(n6, undefined, 8)
+    _setText(n6, 8)
   })
   _renderEffect(() => {
-    _setText(n7, undefined, 'A')
+    _setText(n7, 'A')
   })
   _renderEffect(() => {
-    _setText(n8, undefined, 'B')
+    _setText(n8, 'B')
   })
   return n0
 }"

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

@@ -8,7 +8,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setAttr(n1, "foo-bar", undefined, _ctx.id)
+    _setAttr(n1, "foo-bar", _ctx.id)
   })
   return n0
 }"
@@ -22,7 +22,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setAttr(n1, "foo-bar", undefined, _ctx.fooBar)
+    _setAttr(n1, "foo-bar", _ctx.fooBar)
   })
   return n0
 }"
@@ -36,7 +36,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setDynamicProp(n1, "fooBar", undefined, _ctx.id)
+    _setDynamicProp(n1, "fooBar", _ctx.id)
   })
   return n0
 }"
@@ -50,7 +50,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setDynamicProp(n1, _camelize(_ctx.foo), undefined, _ctx.id)
+    _setDynamicProp(n1, _camelize(_ctx.foo), _ctx.id)
   })
   return n0
 }"
@@ -64,7 +64,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setDynamicProp(n1, "fooBar", undefined, _ctx.fooBar)
+    _setDynamicProp(n1, "fooBar", _ctx.fooBar)
   })
   return n0
 }"
@@ -78,7 +78,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setDOMProp(n1, "fooBar", undefined, _ctx.fooBar)
+    _setDOMProp(n1, "fooBar", _ctx.fooBar)
   })
   return n0
 }"
@@ -92,7 +92,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setDOMProp(n1, "fooBar", undefined, _ctx.id)
+    _setDOMProp(n1, "fooBar", _ctx.id)
   })
   return n0
 }"
@@ -106,7 +106,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setDOMProp(n1, "fooBar", undefined, _ctx.id)
+    _setDOMProp(n1, "fooBar", _ctx.id)
   })
   return n0
 }"
@@ -120,7 +120,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setDynamicProp(n1, \`.\${_ctx.fooBar}\`, undefined, _ctx.id)
+    _setDynamicProp(n1, \`.\${_ctx.fooBar}\`, _ctx.id)
   })
   return n0
 }"
@@ -134,7 +134,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setDOMProp(n1, "fooBar", undefined, _ctx.fooBar)
+    _setDOMProp(n1, "fooBar", _ctx.fooBar)
   })
   return n0
 }"
@@ -148,7 +148,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setDynamicProp(n1, "id", undefined, _ctx.id)
+    _setDynamicProp(n1, "id", _ctx.id)
   })
   return n0
 }"
@@ -162,7 +162,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setDynamicProp(n1, _ctx.id, undefined, _ctx.id)
+    _setDynamicProp(n1, _ctx.id, _ctx.id)
   })
   return n0
 }"
@@ -176,7 +176,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setDynamicProp(n1, "camel-case", undefined, _ctx.camelCase)
+    _setDynamicProp(n1, "camel-case", _ctx.camelCase)
   })
   return n0
 }"
@@ -190,7 +190,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setDynamicProp(n1, "id", undefined, _ctx.id)
+    _setDynamicProp(n1, "id", _ctx.id)
   })
   return n0
 }"

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

@@ -8,7 +8,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setHtml(n1, undefined, _ctx.code)
+    _setHtml(n1, _ctx.code)
   })
   return n0
 }"
@@ -22,7 +22,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setHtml(n1, undefined, _ctx.test)
+    _setHtml(n1, _ctx.test)
   })
   return n0
 }"
@@ -35,7 +35,7 @@ export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _setHtml(n1, undefined, "")
+  _setHtml(n1, "")
   return n0
 }"
 `;

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

@@ -7,7 +7,7 @@ export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _setDynamicProp(n1, "id", undefined, _ctx.foo)
+  _setDynamicProp(n1, "id", _ctx.foo)
   return n0
 }"
 `;
@@ -20,8 +20,8 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n3, { 1: [n2],}],} = _children(n0)
   const n1 = _createTextNode(_ctx.msg)
-  _setText(n1, undefined, _ctx.msg)
-  _setClass(n2, "class", undefined, _ctx.clz)
+  _setText(n1, _ctx.msg)
+  _setClass(n2, _ctx.clz)
   _prepend(n3, n1)
   return n0
 }"
@@ -44,7 +44,7 @@ export function render(_ctx) {
   const t0 = _template("<div><div></div></div>")
   const n0 = t0()
   const { 0: [, { 0: [n1],}],} = _children(n0)
-  _setDynamicProp(n1, "id", undefined, _ctx.foo)
+  _setDynamicProp(n1, "id", _ctx.foo)
   return n0
 }"
 `;

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

@@ -8,7 +8,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setText(n1, undefined, _ctx.str)
+    _setText(n1, _ctx.str)
   })
   return n0
 }"
@@ -22,7 +22,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
-    _setText(n1, undefined, _ctx.test)
+    _setText(n1, _ctx.test)
   })
   return n0
 }"
@@ -35,7 +35,7 @@ export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _setText(n1, undefined, "")
+  _setText(n1, "")
   return n0
 }"
 `;

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

@@ -83,7 +83,7 @@ describe('compiler v-bind', () => {
     })
 
     expect(code).matchSnapshot()
-    expect(code).contains('_setDynamicProp(n1, "id", undefined, _ctx.id)')
+    expect(code).contains('_setDynamicProp(n1, "id", _ctx.id)')
   })
 
   test('no expression', () => {
@@ -110,7 +110,7 @@ describe('compiler v-bind', () => {
     })
 
     expect(code).matchSnapshot()
-    expect(code).contains('_setDynamicProp(n1, "id", undefined, _ctx.id)')
+    expect(code).contains('_setDynamicProp(n1, "id", _ctx.id)')
   })
 
   test('no expression (shorthand)', () => {
@@ -129,9 +129,7 @@ describe('compiler v-bind', () => {
     })
 
     expect(code).matchSnapshot()
-    expect(code).contains(
-      '_setDynamicProp(n1, "camel-case", undefined, _ctx.camelCase)',
-    )
+    expect(code).contains('_setDynamicProp(n1, "camel-case", _ctx.camelCase)')
   })
 
   test('dynamic arg', () => {
@@ -152,7 +150,7 @@ describe('compiler v-bind', () => {
     })
 
     expect(code).matchSnapshot()
-    expect(code).contains('_setDynamicProp(n1, _ctx.id, undefined, _ctx.id)')
+    expect(code).contains('_setDynamicProp(n1, _ctx.id, _ctx.id)')
   })
 
   test('should error if empty expression', () => {
@@ -194,7 +192,7 @@ describe('compiler v-bind', () => {
     })
 
     expect(code).matchSnapshot()
-    expect(code).contains('_setDynamicProp(n1, "fooBar", undefined, _ctx.id)')
+    expect(code).contains('_setDynamicProp(n1, "fooBar", _ctx.id)')
   })
 
   test('.camel modifier w/ no expression', () => {
@@ -215,9 +213,7 @@ describe('compiler v-bind', () => {
 
     expect(code).matchSnapshot()
     expect(code).contains('renderEffect')
-    expect(code).contains(
-      '_setDynamicProp(n1, "fooBar", undefined, _ctx.fooBar)',
-    )
+    expect(code).contains('_setDynamicProp(n1, "fooBar", _ctx.fooBar)')
   })
 
   test('.camel modifier w/ dynamic arg', () => {
@@ -238,9 +234,7 @@ describe('compiler v-bind', () => {
 
     expect(code).matchSnapshot()
     expect(code).contains('renderEffect')
-    expect(code).contains(
-      `_setDynamicProp(n1, _camelize(_ctx.foo), undefined, _ctx.id)`,
-    )
+    expect(code).contains(`_setDynamicProp(n1, _camelize(_ctx.foo), _ctx.id)`)
   })
 
   test.todo('.camel modifier w/ dynamic arg + prefixIdentifiers')
@@ -263,7 +257,7 @@ describe('compiler v-bind', () => {
 
     expect(code).matchSnapshot()
     expect(code).contains('renderEffect')
-    expect(code).contains('_setDOMProp(n1, "fooBar", undefined, _ctx.id)')
+    expect(code).contains('_setDOMProp(n1, "fooBar", _ctx.id)')
   })
 
   test('.prop modifier w/ no expression', () => {
@@ -284,7 +278,7 @@ describe('compiler v-bind', () => {
 
     expect(code).matchSnapshot()
     expect(code).contains('renderEffect')
-    expect(code).contains('_setDOMProp(n1, "fooBar", undefined, _ctx.fooBar)')
+    expect(code).contains('_setDOMProp(n1, "fooBar", _ctx.fooBar)')
   })
 
   test('.prop modifier w/ dynamic arg', () => {
@@ -305,9 +299,7 @@ describe('compiler v-bind', () => {
 
     expect(code).matchSnapshot()
     expect(code).contains('renderEffect')
-    expect(code).contains(
-      '_setDynamicProp(n1, `.${_ctx.fooBar}`, undefined, _ctx.id)',
-    )
+    expect(code).contains('_setDynamicProp(n1, `.${_ctx.fooBar}`, _ctx.id)')
   })
 
   test.todo('.prop modifier w/ dynamic arg + prefixIdentifiers')
@@ -330,7 +322,7 @@ describe('compiler v-bind', () => {
 
     expect(code).matchSnapshot()
     expect(code).contains('renderEffect')
-    expect(code).contains('_setDOMProp(n1, "fooBar", undefined, _ctx.id)')
+    expect(code).contains('_setDOMProp(n1, "fooBar", _ctx.id)')
   })
 
   test('.prop modifier (shortband) w/ no expression', () => {
@@ -351,7 +343,7 @@ describe('compiler v-bind', () => {
 
     expect(code).matchSnapshot()
     expect(code).contains('renderEffect')
-    expect(code).contains('_setDOMProp(n1, "fooBar", undefined, _ctx.fooBar)')
+    expect(code).contains('_setDOMProp(n1, "fooBar", _ctx.fooBar)')
   })
 
   test('.attr modifier', () => {
@@ -372,7 +364,7 @@ describe('compiler v-bind', () => {
 
     expect(code).matchSnapshot()
     expect(code).contains('renderEffect')
-    expect(code).contains('_setAttr(n1, "foo-bar", undefined, _ctx.id)')
+    expect(code).contains('_setAttr(n1, "foo-bar", _ctx.id)')
   })
 
   test('.attr modifier w/ no expression', () => {
@@ -393,6 +385,6 @@ describe('compiler v-bind', () => {
 
     expect(code).matchSnapshot()
     expect(code).contains('renderEffect')
-    expect(code).contains('_setAttr(n1, "foo-bar", undefined, _ctx.fooBar)')
+    expect(code).contains('_setAttr(n1, "foo-bar", _ctx.fooBar)')
   })
 })

packages/compiler-vapor/src/generators/html.ts

@@ -5,7 +5,7 @@ import { genExpression } from './expression'
 export function genSetHtml(oper: SetHtmlIRNode, context: CodegenContext) {
   const { newline, pushFnCall, vaporHelper } = context
   newline()
-  pushFnCall(vaporHelper('setHtml'), `n${oper.element}`, 'undefined', () =>
+  pushFnCall(vaporHelper('setHtml'), `n${oper.element}`, () =>
     genExpression(oper.value, context),
   )
 }

packages/compiler-vapor/src/generators/prop.ts

@@ -40,7 +40,6 @@ export function genSetProp(oper: SetPropIRNode, context: CodegenContext) {
                 expr()
               }
             },
-        'undefined',
         () => genExpression(oper.value, context),
       )
       return
@@ -62,7 +61,6 @@ export function genSetProp(oper: SetPropIRNode, context: CodegenContext) {
         genExpression(oper.key, context)
       }
     },
-    'undefined',
     () => genExpression(oper.value, context),
   )
 }

packages/compiler-vapor/src/generators/text.ts

@@ -5,7 +5,7 @@ import { genExpression } from './expression'
 export function genSetText(oper: SetTextIRNode, context: CodegenContext) {
   const { pushFnCall, newline, vaporHelper } = context
   newline()
-  pushFnCall(vaporHelper('setText'), `n${oper.element}`, 'undefined', () =>
+  pushFnCall(vaporHelper('setText'), `n${oper.element}`, () =>
     genExpression(oper.value, context),
   )
 }

packages/runtime-vapor/__tests__/component.spec.ts

@@ -34,7 +34,7 @@ describe('component', () => {
           0: [n1],
         } = children(n0)
         watchEffect(() => {
-          setText(n1, void 0, count.value)
+          setText(n1, count.value)
         })
         return n0
       },

packages/runtime-vapor/__tests__/if.spec.ts

@@ -69,7 +69,7 @@ describe('createIf', () => {
                   0: [n3],
                 } = children(n2)
                 renderEffect(() => {
-                  setText(n3, void 0, counter.value)
+                  setText(n3, counter.value)
                 })
                 return n2
               })),

packages/runtime-vapor/src/dom.ts

@@ -49,18 +49,6 @@ export function remove(block: Block, parent: ParentNode) {
   }
 }
 
-export function setText(el: Node, oldVal: any, newVal: any) {
-  if ((newVal = toDisplayString(newVal)) !== oldVal) {
-    el.textContent = newVal
-  }
-}
-
-export function setHtml(el: Element, oldVal: any, newVal: any) {
-  if (newVal !== oldVal) {
-    el.innerHTML = newVal
-  }
-}
-
 type Children = Record<number, [ChildNode, Children]>
 export function children(n: Node): Children {
   const result: Children = {}

packages/runtime-vapor/src/dom/patchProp.ts

@@ -3,79 +3,95 @@ import {
   isString,
   normalizeClass,
   normalizeStyle,
+  toDisplayString,
 } from '@vue/shared'
 import { currentInstance } from '../component'
 
-export function setClass(el: Element, oldVal: any, newVal: any) {
-  if ((newVal = normalizeClass(newVal)) !== oldVal && (newVal || oldVal)) {
-    recordPropMetadata(el, 'class', newVal)
-    el.className = newVal
+export function setClass(el: Element, value: any) {
+  const prev = recordPropMetadata(el, 'class', (value = normalizeClass(value)))
+  if (value !== prev && (value || prev)) {
+    el.className = value
   }
 }
 
-export function setStyle(el: HTMLElement, oldVal: any, newVal: any) {
-  if ((newVal = normalizeStyle(newVal)) !== oldVal && (newVal || oldVal)) {
-    recordPropMetadata(el, 'style', newVal)
-    if (typeof newVal === 'string') {
-      el.style.cssText = newVal
+export function setStyle(el: HTMLElement, value: any) {
+  const prev = recordPropMetadata(el, 'style', (value = normalizeStyle(value)))
+  if (value !== prev && (value || prev)) {
+    if (typeof value === 'string') {
+      el.style.cssText = value
     } else {
       // TODO
     }
   }
 }
 
-export function setAttr(el: Element, key: string, oldVal: any, newVal: any) {
-  if (newVal !== oldVal) {
-    recordPropMetadata(el, key, newVal)
-    if (newVal != null) {
-      el.setAttribute(key, newVal)
+export function setAttr(el: Element, key: string, value: any) {
+  const oldVal = recordPropMetadata(el, key, value)
+  if (value !== oldVal) {
+    if (value != null) {
+      el.setAttribute(key, value)
     } else {
       el.removeAttribute(key)
     }
   }
 }
 
-export function setDOMProp(el: any, key: string, oldVal: any, newVal: any) {
+export function setDOMProp(el: any, key: string, value: any) {
+  const oldVal = recordPropMetadata(el, key, value)
   // TODO special checks
-  if (newVal !== oldVal) {
-    recordPropMetadata(el, key, newVal)
-    el[key] = newVal
+  if (value !== oldVal) {
+    el[key] = value
   }
 }
 
-export function setDynamicProp(
-  el: Element,
-  key: string,
-  oldVal: any,
-  newVal: any,
-) {
+export function setDynamicProp(el: Element, key: string, value: any) {
   // TODO
   const isSVG = false
   if (key === 'class') {
-    setClass(el, oldVal, newVal)
+    setClass(el, value)
   } else if (key === 'style') {
-    setStyle(el as HTMLElement, oldVal, newVal)
+    setStyle(el as HTMLElement, value)
   } else if (
     key[0] === '.'
       ? ((key = key.slice(1)), true)
       : key[0] === '^'
         ? ((key = key.slice(1)), false)
-        : shouldSetAsProp(el, key, newVal, isSVG)
+        : shouldSetAsProp(el, key, value, isSVG)
   ) {
-    setDOMProp(el, key, oldVal, newVal)
+    setDOMProp(el, key, value)
   } else {
     // TODO special case for <input v-model type="checkbox">
-    setAttr(el, key, oldVal, newVal)
+    setAttr(el, key, value)
   }
 }
 
-export function recordPropMetadata(el: Node, key: string, value: any) {
+export function recordPropMetadata(el: Node, key: string, value: any): any {
   if (currentInstance) {
     let metadata = currentInstance.metadata.get(el)
     if (!metadata) {
       currentInstance.metadata.set(el, (metadata = { props: {} }))
     }
+    const prev = metadata.props[key]
     metadata.props[key] = value
+    return prev
+  }
+}
+
+export function setText(el: Node, value: any) {
+  const oldVal = recordPropMetadata(
+    el,
+    'textContent',
+    (value = toDisplayString(value)),
+  )
+  if (value !== oldVal) {
+    el.textContent = value
+  }
+}
+
+export function setHtml(el: Element, value: any) {
+  const oldVal = recordPropMetadata(el, 'innerHTML', value)
+  if (value !== oldVal) {
+    el.innerHTML = value
   }
 }