const n1 = _createTextNode(_ctx.count)
_insert(n1, n3, n2)
_renderEffect(() => {
- _setText(n1, undefined, _ctx.count)
+ _setText(n1, _ctx.count)
})
return n0
}"
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
}"
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
}"
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
}"
_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
}"
const n1 = _createTextNode(a + b.value)
_append(n0, n1)
_renderEffect(() => {
- _setText(n1, undefined, a + b.value)
+ _setText(n1, a + b.value)
})
return n0
})()"
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
})()"
_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
}"
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
- _setAttr(n1, "foo-bar", undefined, _ctx.id)
+ _setAttr(n1, "foo-bar", _ctx.id)
})
return n0
}"
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
- _setAttr(n1, "foo-bar", undefined, _ctx.fooBar)
+ _setAttr(n1, "foo-bar", _ctx.fooBar)
})
return n0
}"
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
- _setDynamicProp(n1, "fooBar", undefined, _ctx.id)
+ _setDynamicProp(n1, "fooBar", _ctx.id)
})
return n0
}"
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
}"
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
- _setDynamicProp(n1, "fooBar", undefined, _ctx.fooBar)
+ _setDynamicProp(n1, "fooBar", _ctx.fooBar)
})
return n0
}"
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
- _setDOMProp(n1, "fooBar", undefined, _ctx.fooBar)
+ _setDOMProp(n1, "fooBar", _ctx.fooBar)
})
return n0
}"
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
- _setDOMProp(n1, "fooBar", undefined, _ctx.id)
+ _setDOMProp(n1, "fooBar", _ctx.id)
})
return n0
}"
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
- _setDOMProp(n1, "fooBar", undefined, _ctx.id)
+ _setDOMProp(n1, "fooBar", _ctx.id)
})
return n0
}"
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
- _setDynamicProp(n1, \`.\${_ctx.fooBar}\`, undefined, _ctx.id)
+ _setDynamicProp(n1, \`.\${_ctx.fooBar}\`, _ctx.id)
})
return n0
}"
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
- _setDOMProp(n1, "fooBar", undefined, _ctx.fooBar)
+ _setDOMProp(n1, "fooBar", _ctx.fooBar)
})
return n0
}"
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
- _setDynamicProp(n1, "id", undefined, _ctx.id)
+ _setDynamicProp(n1, "id", _ctx.id)
})
return n0
}"
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
- _setDynamicProp(n1, _ctx.id, undefined, _ctx.id)
+ _setDynamicProp(n1, _ctx.id, _ctx.id)
})
return n0
}"
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
- _setDynamicProp(n1, "camel-case", undefined, _ctx.camelCase)
+ _setDynamicProp(n1, "camel-case", _ctx.camelCase)
})
return n0
}"
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
- _setDynamicProp(n1, "id", undefined, _ctx.id)
+ _setDynamicProp(n1, "id", _ctx.id)
})
return n0
}"
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
- _setHtml(n1, undefined, _ctx.code)
+ _setHtml(n1, _ctx.code)
})
return n0
}"
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
- _setHtml(n1, undefined, _ctx.test)
+ _setHtml(n1, _ctx.test)
})
return n0
}"
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
- _setHtml(n1, undefined, "")
+ _setHtml(n1, "")
return n0
}"
`;
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
}"
`;
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
}"
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
}"
`;
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
- _setText(n1, undefined, _ctx.str)
+ _setText(n1, _ctx.str)
})
return n0
}"
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
- _setText(n1, undefined, _ctx.test)
+ _setText(n1, _ctx.test)
})
return n0
}"
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
- _setText(n1, undefined, "")
+ _setText(n1, "")
return n0
}"
`;
})
expect(code).matchSnapshot()
- expect(code).contains('_setDynamicProp(n1, "id", undefined, _ctx.id)')
+ expect(code).contains('_setDynamicProp(n1, "id", _ctx.id)')
})
test('no expression', () => {
})
expect(code).matchSnapshot()
- expect(code).contains('_setDynamicProp(n1, "id", undefined, _ctx.id)')
+ expect(code).contains('_setDynamicProp(n1, "id", _ctx.id)')
})
test('no expression (shorthand)', () => {
})
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', () => {
})
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', () => {
})
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', () => {
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', () => {
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')
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', () => {
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', () => {
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')
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', () => {
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', () => {
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', () => {
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)')
})
})
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),
)
}
expr()
}
},
- 'undefined',
() => genExpression(oper.value, context),
)
return
genExpression(oper.key, context)
}
},
- 'undefined',
() => genExpression(oper.value, context),
)
}
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),
)
}
0: [n1],
} = children(n0)
watchEffect(() => {
- setText(n1, void 0, count.value)
+ setText(n1, count.value)
})
return n0
},
0: [n3],
} = children(n2)
renderEffect(() => {
- setText(n3, void 0, counter.value)
+ setText(n3, counter.value)
})
return n2
})),
}
}
-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 = {}
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
}
}
projects / thirdparty / vuejs / core.git / commitdiff
