mirrors
/
vue3-core
mirror of https://mirror.osredm.com/root/vue3-core.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: get oldVal from metadata

This commit is contained in:
三咲智子 Kevin Deng 2024-01-25 16:38:56 +08:00
parent 8848d10522
commit 359a5dab19
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
13 changed files with 109 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

36
packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
View File

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

2
packages/compiler-vapor/src/generators/html.ts
View File

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

2
packages/compiler-vapor/src/generators/prop.ts
View File

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

2
packages/compiler-vapor/src/generators/text.ts
View File

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

2
packages/runtime-vapor/__tests__/component.spec.ts
View File

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

2
packages/runtime-vapor/__tests__/if.spec.ts
View File

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

12
packages/runtime-vapor/src/dom.ts
View File

@ -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]> type Children = Record<number, [ChildNode, Children]>
export function children(n: Node): Children { export function children(n: Node): Children {
const result: Children = {} const result: Children = {}

76
packages/runtime-vapor/src/dom/patchProp.ts
View File

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