perf(vapor): optimize text bindings and v-text

This commit is contained in:
Evan You 2025-02-11 18:39:27 +08:00
parent a2fa0db998
commit 5d1c6ca5a9
No known key found for this signature in database
GPG Key ID: 00E9AB7A6704CE0A
36 changed files with 392 additions and 253 deletions

View File

@ -1,12 +1,13 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compile > bindings 1`] = ` exports[`compile > bindings 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue'; "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>", true) const t0 = _template("<div> </div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) { export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0() const n0 = t0()
_renderEffect(() => _setText(n0, "count is ", _ctx.count, ".")) const x0 = _child(n0)
_renderEffect(() => _setText(x0, "count is " + _toDisplayString(_ctx.count) + "."))
return n0 return n0
}" }"
`; `;
@ -148,7 +149,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
`; `;
exports[`compile > directives > v-pre > should not affect siblings after it 1`] = ` exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, createTextNode as _createTextNode, insert as _insert, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue'; "import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, createTextNode as _createTextNode, insert as _insert, toDisplayString as _toDisplayString, setText as _setText, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>") const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
const t1 = _template("<div></div>") const t1 = _template("<div></div>")
@ -157,33 +158,37 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0() const n0 = t0()
const n3 = t1() const n3 = t1()
const n1 = _createComponentWithFallback(_component_Comp) const n1 = _createComponentWithFallback(_component_Comp)
const n2 = _createTextNode(() => [_ctx.bar]) const n2 = _createTextNode()
_insert([n1, n2], n3) _insert([n1, n2], n3)
_renderEffect(() => _setProp(n3, "id", _ctx.foo)) _renderEffect(() => {
_setText(n2, _toDisplayString(_ctx.bar))
_setProp(n3, "id", _ctx.foo)
})
return [n0, n3] return [n0, n3]
}" }"
`; `;
exports[`compile > dynamic root 1`] = ` exports[`compile > dynamic root 1`] = `
"import { createTextNode as _createTextNode } from 'vue'; "import { createTextNode as _createTextNode, toDisplayString as _toDisplayString } from 'vue';
export function render(_ctx) { export function render(_ctx) {
const n0 = _createTextNode(() => [1, 2]) const n0 = _createTextNode(_toDisplayString(1) + _toDisplayString(2))
return n0 return n0
}" }"
`; `;
exports[`compile > dynamic root nodes and interpolation 1`] = ` exports[`compile > dynamic root nodes and interpolation 1`] = `
"import { setText as _setText, setProp as _setProp, renderEffect as _renderEffect, delegateEvents as _delegateEvents, template as _template } from 'vue'; "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, setProp as _setProp, renderEffect as _renderEffect, delegateEvents as _delegateEvents, template as _template } from 'vue';
const t0 = _template("<button></button>", true) const t0 = _template("<button> </button>", true)
_delegateEvents("click") _delegateEvents("click")
export function render(_ctx) { export function render(_ctx) {
const n0 = t0() const n0 = t0()
const x0 = _child(n0)
n0.$evtclick = e => _ctx.handleClick(e) n0.$evtclick = e => _ctx.handleClick(e)
_renderEffect(() => { _renderEffect(() => {
const _count = _ctx.count const _count = _ctx.count
_setText(n0, _count, "foo", _count, "foo", _count) _setText(x0, _toDisplayString(_count) + "foo" + _toDisplayString(_count) + "foo" + _toDisplayString(_count))
_setProp(n0, "id", _count) _setProp(n0, "id", _count)
}) })
return n0 return n0
@ -192,7 +197,8 @@ export function render(_ctx) {
exports[`compile > expression parsing > interpolation 1`] = ` exports[`compile > expression parsing > interpolation 1`] = `
" "
const n0 = _createTextNode(() => [a + b.value]) const n0 = _createTextNode()
_renderEffect(() => _setText(n0, _toDisplayString(a + b.value)))
return n0 return n0
" "
`; `;
@ -223,10 +229,10 @@ export function render(_ctx) {
`; `;
exports[`compile > static + dynamic root 1`] = ` exports[`compile > static + dynamic root 1`] = `
"import { createTextNode as _createTextNode } from 'vue'; "import { createTextNode as _createTextNode, toDisplayString as _toDisplayString } from 'vue';
export function render(_ctx) { export function render(_ctx) {
const n0 = _createTextNode(() => [1, 2, "3", 4, 5, "6", 7, 8, "9", 'A', 'B']) const n0 = _createTextNode(_toDisplayString(1) + _toDisplayString(2) + "3" + _toDisplayString(4) + _toDisplayString(5) + "6" + _toDisplayString(7) + _toDisplayString(8) + "9" + 'A' + 'B')
return n0 return n0
}" }"
`; `;

View File

@ -1,28 +1,31 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: expression > basic 1`] = ` exports[`compiler: expression > basic 1`] = `
"import { createTextNode as _createTextNode } from 'vue'; "import { createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect } from 'vue';
export function render(_ctx) { export function render(_ctx) {
const n0 = _createTextNode(() => [_ctx.a]) const n0 = _createTextNode()
_renderEffect(() => _setText(n0, _toDisplayString(_ctx.a)))
return n0 return n0
}" }"
`; `;
exports[`compiler: expression > props 1`] = ` exports[`compiler: expression > props 1`] = `
"import { createTextNode as _createTextNode } from 'vue'; "import { createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect } from 'vue';
export function render(_ctx, $props, $emit, $attrs, $slots) { export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = _createTextNode(() => [$props.foo]) const n0 = _createTextNode()
_renderEffect(() => _setText(n0, _toDisplayString($props.foo)))
return n0 return n0
}" }"
`; `;
exports[`compiler: expression > props aliased 1`] = ` exports[`compiler: expression > props aliased 1`] = `
"import { createTextNode as _createTextNode } from 'vue'; "import { createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect } from 'vue';
export function render(_ctx, $props, $emit, $attrs, $slots) { export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = _createTextNode(() => [$props['bar']]) const n0 = _createTextNode()
_renderEffect(() => _setText(n0, _toDisplayString($props['bar'])))
return n0 return n0
}" }"
`; `;

View File

@ -1,42 +1,48 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: children transform > children & sibling references 1`] = ` exports[`compiler: children transform > children & sibling references 1`] = `
"import { child as _child, nextn as _nextn, next as _next, createTextNode as _createTextNode, insert as _insert, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue'; "import { child as _child, nextn as _nextn, next as _next, createTextNode as _createTextNode, insert as _insert, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div><p></p> <!><p></p></div>", true) const t0 = _template("<div><p> </p> <!><p> </p></div>", true)
export function render(_ctx) { export function render(_ctx) {
const n4 = t0() const n4 = t0()
const n0 = _child(n4) const n0 = _child(n4)
const n3 = _nextn(n0, 2) const n3 = _nextn(n0, 2)
const n2 = _next(n3) const n2 = _next(n3)
const n1 = _createTextNode(() => [_ctx.second, " ", _ctx.third, " "]) const x0 = _child(n0)
const n1 = _createTextNode()
const x2 = _child(n2)
_insert(n1, n4, n3) _insert(n1, n4, n3)
_renderEffect(() => { _renderEffect(() => {
_setText(n0, _ctx.first) _setText(x0, _toDisplayString(_ctx.first))
_setText(n2, _ctx.forth) _setText(n1, _toDisplayString(_ctx.second) + " " + _toDisplayString(_ctx.third) + " ")
_setText(x2, _toDisplayString(_ctx.forth))
}) })
return n4 return n4
}" }"
`; `;
exports[`compiler: children transform > efficient traversal 1`] = ` exports[`compiler: children transform > efficient traversal 1`] = `
"import { child as _child, next as _next, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue'; "import { child as _child, next as _next, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div><div>x</div><div><span></span></div><div><span></span></div><div><span></span></div></div>", true) const t0 = _template("<div><div>x</div><div><span> </span></div><div><span> </span></div><div><span> </span></div></div>", true)
export function render(_ctx) { export function render(_ctx) {
const n3 = t0() const n3 = t0()
const _n0 = _next(_child(n3)) const p0 = _next(_child(n3))
const n0 = _child(_n0) const n0 = _child(p0)
const _n1 = _next(_n0) const p1 = _next(p0)
const n1 = _child(_n1) const n1 = _child(p1)
const _n2 = _next(_n1) const p2 = _next(p1)
const n2 = _child(_n2) const n2 = _child(p2)
const x0 = _child(n0)
const x1 = _child(n1)
const x2 = _child(n2)
_renderEffect(() => { _renderEffect(() => {
const _msg = _ctx.msg const _msg = _ctx.msg
_setText(n0, _msg) _setText(x0, _toDisplayString(_msg))
_setText(n1, _msg) _setText(x1, _toDisplayString(_msg))
_setText(n2, _msg) _setText(x2, _toDisplayString(_msg))
}) })
return n3 return n3
}" }"

View File

@ -1,10 +1,11 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: text transform > consecutive text 1`] = ` exports[`compiler: text transform > consecutive text 1`] = `
"import { createTextNode as _createTextNode } from 'vue'; "import { createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect } from 'vue';
export function render(_ctx) { export function render(_ctx) {
const n0 = _createTextNode(() => [_ctx.msg]) const n0 = _createTextNode()
_renderEffect(() => _setText(n0, _toDisplayString(_ctx.msg)))
return n0 return n0
}" }"
`; `;
@ -13,7 +14,7 @@ exports[`compiler: text transform > no consecutive text 1`] = `
"import { createTextNode as _createTextNode } from 'vue'; "import { createTextNode as _createTextNode } from 'vue';
export function render(_ctx) { export function render(_ctx) {
const n0 = _createTextNode(["hello world"]) const n0 = _createTextNode("hello world")
return n0 return n0
}" }"
`; `;

View File

@ -1,13 +1,14 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: v-for > array de-structured value (with rest) 1`] = ` exports[`compiler: v-for > array de-structured value (with rest) 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue'; "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
const t0 = _template("<div></div>", true) const t0 = _template("<div> </div>", true)
export function render(_ctx) { export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => { const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
const n2 = t0() const n2 = t0()
_renderEffect(() => _setText(n2, _for_item0.value[0] + _for_item0.value.slice(1) + _for_key0.value)) const x2 = _child(n2)
_renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value[0] + _for_item0.value.slice(1) + _for_key0.value)))
return n2 return n2
}, ([id, ...other], index) => (id)) }, ([id, ...other], index) => (id))
return n0 return n0
@ -15,13 +16,14 @@ export function render(_ctx) {
`; `;
exports[`compiler: v-for > array de-structured value 1`] = ` exports[`compiler: v-for > array de-structured value 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue'; "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
const t0 = _template("<div></div>", true) const t0 = _template("<div> </div>", true)
export function render(_ctx) { export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => { const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
const n2 = t0() const n2 = t0()
_renderEffect(() => _setText(n2, _for_item0.value[0] + _for_item0.value[1] + _for_key0.value)) const x2 = _child(n2)
_renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value[0] + _for_item0.value[1] + _for_key0.value)))
return n2 return n2
}, ([id, other], index) => (id)) }, ([id, other], index) => (id))
return n0 return n0
@ -29,15 +31,16 @@ export function render(_ctx) {
`; `;
exports[`compiler: v-for > basic v-for 1`] = ` exports[`compiler: v-for > basic v-for 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, createFor as _createFor, delegateEvents as _delegateEvents, template as _template } from 'vue'; "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, delegateEvents as _delegateEvents, template as _template } from 'vue';
const t0 = _template("<div></div>", true) const t0 = _template("<div> </div>", true)
_delegateEvents("click") _delegateEvents("click")
export function render(_ctx) { export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_for_item0) => { const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
const n2 = t0() const n2 = t0()
const x2 = _child(n2)
n2.$evtclick = () => (_ctx.remove(_for_item0.value)) n2.$evtclick = () => (_ctx.remove(_for_item0.value))
_renderEffect(() => _setText(n2, _for_item0.value)) _renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value)))
return n2 return n2
}, (item) => (item.id)) }, (item) => (item.id))
return n0 return n0
@ -62,8 +65,8 @@ export function render(_ctx) {
`; `;
exports[`compiler: v-for > nested v-for 1`] = ` exports[`compiler: v-for > nested v-for 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, createFor as _createFor, insert as _insert, template as _template } from 'vue'; "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, insert as _insert, template as _template } from 'vue';
const t0 = _template("<span></span>") const t0 = _template("<span> </span>")
const t1 = _template("<div></div>", true) const t1 = _template("<div></div>", true)
export function render(_ctx) { export function render(_ctx) {
@ -71,7 +74,8 @@ export function render(_ctx) {
const n5 = t1() const n5 = t1()
const n2 = _createFor(() => (_for_item0.value), (_for_item1) => { const n2 = _createFor(() => (_for_item0.value), (_for_item1) => {
const n4 = t0() const n4 = t0()
_renderEffect(() => _setText(n4, _for_item1.value+_for_item0.value)) const x4 = _child(n4)
_renderEffect(() => _setText(x4, _toDisplayString(_for_item1.value+_for_item0.value)))
return n4 return n4
}, null, null, null, true) }, null, null, null, true)
_insert(n2, n5) _insert(n2, n5)
@ -82,13 +86,14 @@ export function render(_ctx) {
`; `;
exports[`compiler: v-for > object de-structured value (with rest) 1`] = ` exports[`compiler: v-for > object de-structured value (with rest) 1`] = `
"import { getRestElement as _getRestElement, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue'; "import { getRestElement as _getRestElement, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
const t0 = _template("<div></div>", true) const t0 = _template("<div> </div>", true)
export function render(_ctx) { export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => { const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
const n2 = t0() const n2 = t0()
_renderEffect(() => _setText(n2, _for_item0.value.id + _getRestElement(_for_item0.value, ["id"]) + _for_key0.value)) const x2 = _child(n2)
_renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value.id + _getRestElement(_for_item0.value, ["id"]) + _for_key0.value)))
return n2 return n2
}, ({ id, ...other }, index) => (id)) }, ({ id, ...other }, index) => (id))
return n0 return n0
@ -96,13 +101,14 @@ export function render(_ctx) {
`; `;
exports[`compiler: v-for > object de-structured value 1`] = ` exports[`compiler: v-for > object de-structured value 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue'; "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
const t0 = _template("<span></span>", true) const t0 = _template("<span> </span>", true)
export function render(_ctx) { export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_for_item0) => { const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
const n2 = t0() const n2 = t0()
_renderEffect(() => _setText(n2, _for_item0.value.id, _for_item0.value.value)) const x2 = _child(n2)
_renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value.id) + _toDisplayString(_for_item0.value.value)))
return n2 return n2
}, ({ id, value }) => (id)) }, ({ id, value }) => (id))
return n0 return n0
@ -110,13 +116,14 @@ export function render(_ctx) {
`; `;
exports[`compiler: v-for > v-for aliases w/ complex expressions 1`] = ` exports[`compiler: v-for > v-for aliases w/ complex expressions 1`] = `
"import { getDefaultValue as _getDefaultValue, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue'; "import { getDefaultValue as _getDefaultValue, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
const t0 = _template("<div></div>", true) const t0 = _template("<div> </div>", true)
export function render(_ctx) { export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_for_item0) => { const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
const n2 = t0() const n2 = t0()
_renderEffect(() => _setText(n2, _getDefaultValue(_for_item0.value.foo, _ctx.bar) + _ctx.bar + _ctx.baz + _getDefaultValue(_for_item0.value.baz[0], _ctx.quux) + _ctx.quux)) const x2 = _child(n2)
_renderEffect(() => _setText(x2, _toDisplayString(_getDefaultValue(_for_item0.value.foo, _ctx.bar) + _ctx.bar + _ctx.baz + _getDefaultValue(_for_item0.value.baz[0], _ctx.quux) + _ctx.quux)))
return n2 return n2
}) })
return n0 return n0

View File

@ -1,13 +1,14 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: v-if > basic v-if 1`] = ` exports[`compiler: v-if > basic v-if 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue'; "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
const t0 = _template("<div></div>", true) const t0 = _template("<div> </div>", true)
export function render(_ctx) { export function render(_ctx) {
const n0 = _createIf(() => (_ctx.ok), () => { const n0 = _createIf(() => (_ctx.ok), () => {
const n2 = t0() const n2 = t0()
_renderEffect(() => _setText(n2, _ctx.msg)) const x2 = _child(n2)
_renderEffect(() => _setText(x2, _toDisplayString(_ctx.msg)))
return n2 return n2
}) })
return n0 return n0
@ -15,13 +16,13 @@ export function render(_ctx) {
`; `;
exports[`compiler: v-if > comment between branches 1`] = ` exports[`compiler: v-if > comment between branches 1`] = `
"import { createIf as _createIf, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue'; "import { createIf as _createIf, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>") const t0 = _template("<div></div>")
const t1 = _template("<!--foo-->") const t1 = _template("<!--foo-->")
const t2 = _template("<p></p>") const t2 = _template("<p></p>")
const t3 = _template("<!--bar-->") const t3 = _template("<!--bar-->")
const t4 = _template("fine") const t4 = _template("fine")
const t5 = _template("<input>") const t5 = _template("<div> </div>")
export function render(_ctx) { export function render(_ctx) {
const n13 = t5() const n13 = t5()
@ -37,7 +38,8 @@ export function render(_ctx) {
const n11 = t4() const n11 = t4()
return [n10, n11] return [n10, n11]
})) }))
_renderEffect(() => _setText(n13, _ctx.text)) const x13 = _child(n13)
_renderEffect(() => _setText(x13, _toDisplayString(_ctx.text)))
return [n0, n13] return [n0, n13]
}" }"
`; `;
@ -60,17 +62,18 @@ export function render(_ctx) {
`; `;
exports[`compiler: v-if > template v-if 1`] = ` exports[`compiler: v-if > template v-if 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue'; "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
const t0 = _template("<div></div>") const t0 = _template("<div></div>")
const t1 = _template("hello") const t1 = _template("hello")
const t2 = _template("<p></p>", true) const t2 = _template("<p> </p>", true)
export function render(_ctx) { export function render(_ctx) {
const n0 = _createIf(() => (_ctx.ok), () => { const n0 = _createIf(() => (_ctx.ok), () => {
const n2 = t0() const n2 = t0()
const n3 = t1() const n3 = t1()
const n4 = t2() const n4 = t2()
_renderEffect(() => _setText(n4, _ctx.msg)) const x4 = _child(n4)
_renderEffect(() => _setText(x4, _toDisplayString(_ctx.msg)))
return [n2, n3, n4] return [n2, n3, n4]
}) })
return n0 return n0

View File

@ -12,13 +12,13 @@ export function render(_ctx) {
`; `;
exports[`compiler: v-once > basic 1`] = ` exports[`compiler: v-once > basic 1`] = `
"import { child as _child, createTextNode as _createTextNode, setClass as _setClass, prepend as _prepend, template as _template } from 'vue'; "import { child as _child, createTextNode as _createTextNode, toDisplayString as _toDisplayString, setClass as _setClass, prepend as _prepend, template as _template } from 'vue';
const t0 = _template("<div><span></span></div>", true) const t0 = _template("<div><span></span></div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) { export function render(_ctx, $props, $emit, $attrs, $slots) {
const n2 = t0() const n2 = t0()
const n1 = _child(n2) const n1 = _child(n2)
const n0 = _createTextNode([_ctx.msg, " "]) const n0 = _createTextNode(_toDisplayString(_ctx.msg) + " ")
_setClass(n1, _ctx.clz) _setClass(n1, _ctx.clz)
_prepend(n2, n0) _prepend(n2, n0)
return n2 return n2

View File

@ -22,7 +22,7 @@ export function render(_ctx) {
`; `;
exports[`compiler: transform slot > dynamic slots name w/ v-for 1`] = ` exports[`compiler: transform slot > dynamic slots name w/ v-for 1`] = `
"import { resolveComponent as _resolveComponent, createTextNode as _createTextNode, createForSlots as _createForSlots, createComponentWithFallback as _createComponentWithFallback } from 'vue'; "import { resolveComponent as _resolveComponent, createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createForSlots as _createForSlots, createComponentWithFallback as _createComponentWithFallback } from 'vue';
export function render(_ctx) { export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp") const _component_Comp = _resolveComponent("Comp")
@ -31,7 +31,8 @@ export function render(_ctx) {
() => (_createForSlots(_ctx.list, (item) => ({ () => (_createForSlots(_ctx.list, (item) => ({
name: item, name: item,
fn: (_slotProps0) => { fn: (_slotProps0) => {
const n0 = _createTextNode(() => [_slotProps0["bar"]]) const n0 = _createTextNode()
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["bar"])))
return n0 return n0
} }
}))) })))
@ -157,7 +158,7 @@ export function render(_ctx) {
`; `;
exports[`compiler: transform slot > nested slots scoping 1`] = ` exports[`compiler: transform slot > nested slots scoping 1`] = `
"import { resolveComponent as _resolveComponent, createTextNode as _createTextNode, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue'; "import { resolveComponent as _resolveComponent, createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" ") const t0 = _template(" ")
export function render(_ctx) { export function render(_ctx) {
@ -168,11 +169,13 @@ export function render(_ctx) {
const n2 = t0() const n2 = t0()
const n1 = _createComponentWithFallback(_component_Inner, null, { const n1 = _createComponentWithFallback(_component_Inner, null, {
"default": (_slotProps1) => { "default": (_slotProps1) => {
const n0 = _createTextNode(() => [_slotProps0["foo"] + _slotProps1["bar"] + _ctx.baz]) const n0 = _createTextNode()
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["foo"] + _slotProps1["bar"] + _ctx.baz)))
return n0 return n0
} }
}) })
const n3 = _createTextNode(() => [_slotProps0["foo"] + _ctx.bar + _ctx.baz]) const n3 = _createTextNode()
_renderEffect(() => _setText(n3, _toDisplayString(_slotProps0["foo"] + _ctx.bar + _ctx.baz)))
return [n1, n2, n3] return [n1, n2, n3]
} }
}, true) }, true)
@ -181,7 +184,7 @@ export function render(_ctx) {
`; `;
exports[`compiler: transform slot > on component dynamically named slot 1`] = ` exports[`compiler: transform slot > on component dynamically named slot 1`] = `
"import { resolveComponent as _resolveComponent, createTextNode as _createTextNode, createComponentWithFallback as _createComponentWithFallback } from 'vue'; "import { resolveComponent as _resolveComponent, createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback } from 'vue';
export function render(_ctx) { export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp") const _component_Comp = _resolveComponent("Comp")
@ -190,7 +193,8 @@ export function render(_ctx) {
() => ({ () => ({
name: _ctx.named, name: _ctx.named,
fn: (_slotProps0) => { fn: (_slotProps0) => {
const n0 = _createTextNode(() => [_slotProps0["foo"] + _ctx.bar]) const n0 = _createTextNode()
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["foo"] + _ctx.bar)))
return n0 return n0
} }
}) })
@ -201,13 +205,14 @@ export function render(_ctx) {
`; `;
exports[`compiler: transform slot > on component named slot 1`] = ` exports[`compiler: transform slot > on component named slot 1`] = `
"import { resolveComponent as _resolveComponent, createTextNode as _createTextNode, createComponentWithFallback as _createComponentWithFallback } from 'vue'; "import { resolveComponent as _resolveComponent, createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback } from 'vue';
export function render(_ctx) { export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp") const _component_Comp = _resolveComponent("Comp")
const n1 = _createComponentWithFallback(_component_Comp, null, { const n1 = _createComponentWithFallback(_component_Comp, null, {
"named": (_slotProps0) => { "named": (_slotProps0) => {
const n0 = _createTextNode(() => [_slotProps0["foo"] + _ctx.bar]) const n0 = _createTextNode()
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["foo"] + _ctx.bar)))
return n0 return n0
} }
}, true) }, true)
@ -216,13 +221,14 @@ export function render(_ctx) {
`; `;
exports[`compiler: transform slot > on-component default slot 1`] = ` exports[`compiler: transform slot > on-component default slot 1`] = `
"import { resolveComponent as _resolveComponent, createTextNode as _createTextNode, createComponentWithFallback as _createComponentWithFallback } from 'vue'; "import { resolveComponent as _resolveComponent, createTextNode as _createTextNode, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback } from 'vue';
export function render(_ctx) { export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp") const _component_Comp = _resolveComponent("Comp")
const n1 = _createComponentWithFallback(_component_Comp, null, { const n1 = _createComponentWithFallback(_component_Comp, null, {
"default": (_slotProps0) => { "default": (_slotProps0) => {
const n0 = _createTextNode(() => [_slotProps0["foo"] + _ctx.bar]) const n0 = _createTextNode()
_renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["foo"] + _ctx.bar)))
return n0 return n0
} }
}, true) }, true)

View File

@ -1,23 +1,25 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`v-text > should convert v-text to textContent 1`] = ` exports[`v-text > should convert v-text to setText 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue'; "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>", true) const t0 = _template("<div> </div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) { export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0() const n0 = t0()
_renderEffect(() => _setText(n0, _ctx.str)) const x0 = _child(n0)
_renderEffect(() => _setText(x0, _toDisplayString(_ctx.str)))
return n0 return n0
}" }"
`; `;
exports[`v-text > should raise error and ignore children when v-text is present 1`] = ` exports[`v-text > should raise error and ignore children when v-text is present 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue'; "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>", true) const t0 = _template("<div> </div>", true)
export function render(_ctx) { export function render(_ctx) {
const n0 = t0() const n0 = t0()
_renderEffect(() => _setText(n0, _ctx.test)) const x0 = _child(n0)
_renderEffect(() => _setText(x0, _toDisplayString(_ctx.test)))
return n0 return n0
}" }"
`; `;

View File

@ -36,7 +36,6 @@ describe('compiler: text transform', () => {
isStatic: false, isStatic: false,
}, },
], ],
effect: false,
}, },
]) ])
}) })
@ -49,15 +48,9 @@ describe('compiler: text transform', () => {
{ {
type: IRNodeTypes.CREATE_TEXT_NODE, type: IRNodeTypes.CREATE_TEXT_NODE,
id: 0, id: 0,
values: [ values: undefined,
{
type: IRNodeTypes.SET_TEXT,
content: 'msg',
isStatic: false,
},
],
effect: true,
}, },
]) ])
expect(ir.block.effect.length).toBe(1)
}) })
}) })

View File

@ -32,7 +32,7 @@ describe('compiler: v-for', () => {
expect(code).matchSnapshot() expect(code).matchSnapshot()
expect(helpers).contains('createFor') expect(helpers).contains('createFor')
expect(ir.template).toEqual(['<div></div>']) expect(ir.template).toEqual(['<div> </div>'])
expect(ir.block.operation).toMatchObject([ expect(ir.block.operation).toMatchObject([
{ {
type: IRNodeTypes.FOR, type: IRNodeTypes.FOR,
@ -89,7 +89,7 @@ describe('compiler: v-for', () => {
`_createFor(() => (_for_item0.value), (_for_item1) => {`, `_createFor(() => (_for_item0.value), (_for_item1) => {`,
) )
expect(code).contains(`_for_item1.value+_for_item0.value`) expect(code).contains(`_for_item1.value+_for_item0.value`)
expect(ir.template).toEqual(['<span></span>', '<div></div>']) expect(ir.template).toEqual(['<span> </span>', '<div></div>'])
expect(ir.block.operation).toMatchObject([ expect(ir.block.operation).toMatchObject([
{ {
type: IRNodeTypes.FOR, type: IRNodeTypes.FOR,

View File

@ -32,7 +32,7 @@ describe('compiler: v-if', () => {
expect(helpers).contains('createIf') expect(helpers).contains('createIf')
expect(ir.template).toEqual(['<div></div>']) expect(ir.template).toEqual(['<div> </div>'])
expect(ir.block.operation).toMatchObject([ expect(ir.block.operation).toMatchObject([
{ {
type: IRNodeTypes.IF, type: IRNodeTypes.IF,
@ -68,7 +68,7 @@ describe('compiler: v-if', () => {
) )
expect(code).matchSnapshot() expect(code).matchSnapshot()
expect(ir.template).toEqual(['<div></div>', 'hello', '<p></p>']) expect(ir.template).toEqual(['<div></div>', 'hello', '<p> </p>'])
expect(ir.block.effect).toEqual([]) expect(ir.block.effect).toEqual([])
expect((ir.block.operation[0] as IfIRNode).positive.effect).toMatchObject([ expect((ir.block.operation[0] as IfIRNode).positive.effect).toMatchObject([
{ {
@ -227,7 +227,7 @@ describe('compiler: v-if', () => {
<p v-else-if="orNot"/> <p v-else-if="orNot"/>
<!--bar--> <!--bar-->
<template v-else>fine</template> <template v-else>fine</template>
<input v-text="text" /> <div v-text="text" />
`) `)
expect(code).matchSnapshot() expect(code).matchSnapshot()
expect(ir.template).toEqual([ expect(ir.template).toEqual([
@ -237,7 +237,7 @@ describe('compiler: v-if', () => {
'<!--bar-->', '<!--bar-->',
'fine', 'fine',
'<input>', '<div> </div>',
]) ])
}) })

View File

@ -42,7 +42,6 @@ describe('compiler: v-once', () => {
isStatic: true, isStatic: true,
}, },
], ],
effect: false,
}, },
{ {
element: 1, element: 1,

View File

@ -297,7 +297,7 @@ describe('compiler: transform slot', () => {
expect(code).toMatchSnapshot() expect(code).toMatchSnapshot()
expect(code).contains(`fn: (_slotProps0) =>`) expect(code).contains(`fn: (_slotProps0) =>`)
expect(code).contains(`_createTextNode(() => [_slotProps0["bar"]])`) expect(code).contains(`_setText(n0, _toDisplayString(_slotProps0["bar"]))`)
expect(ir.block.operation[0].type).toBe(IRNodeTypes.CREATE_COMPONENT_NODE) expect(ir.block.operation[0].type).toBe(IRNodeTypes.CREATE_COMPONENT_NODE)
expect(ir.block.operation).toMatchObject([ expect(ir.block.operation).toMatchObject([

View File

@ -15,7 +15,7 @@ const compileWithVText = makeCompile({
}) })
describe('v-text', () => { describe('v-text', () => {
test('should convert v-text to textContent', () => { test('should convert v-text to setText', () => {
const { code, ir, helpers } = compileWithVText(`<div v-text="str"></div>`, { const { code, ir, helpers } = compileWithVText(`<div v-text="str"></div>`, {
bindingMetadata: { bindingMetadata: {
str: BindingTypes.SETUP_REF, str: BindingTypes.SETUP_REF,
@ -23,7 +23,12 @@ describe('v-text', () => {
}) })
expect(helpers).contains('setText') expect(helpers).contains('setText')
expect(ir.block.operation).toMatchObject([]) expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.GET_TEXT_CHILD,
parent: 0,
},
])
expect(ir.block.effect).toMatchObject([ expect(ir.block.effect).toMatchObject([
{ {
@ -63,7 +68,7 @@ describe('v-text', () => {
]) ])
// children should have been removed // children should have been removed
expect(ir.template).toEqual(['<div></div>']) expect(ir.template).toEqual(['<div> </div>'])
expect(ir.block.effect).toMatchObject([ expect(ir.block.effect).toMatchObject([
{ {
@ -92,7 +97,7 @@ describe('v-text', () => {
expect(code).matchSnapshot() expect(code).matchSnapshot()
// children should have been removed // children should have been removed
expect(code).contains('template("<div></div>", true)') expect(code).contains('template("<div> </div>", true)')
}) })
test('should raise error if has no expression', () => { test('should raise error if has no expression', () => {

View File

@ -7,7 +7,7 @@ import { genSetHtml } from './html'
import { genIf } from './if' import { genIf } from './if'
import { genDynamicProps, genSetProp } from './prop' import { genDynamicProps, genSetProp } from './prop'
import { genDeclareOldRef, genSetTemplateRef } from './templateRef' import { genDeclareOldRef, genSetTemplateRef } from './templateRef'
import { genCreateTextNode, genSetText } from './text' import { genCreateTextNode, genGetTextChild, genSetText } from './text'
import { import {
type CodeFragment, type CodeFragment,
INDENT_END, INDENT_END,
@ -68,6 +68,8 @@ export function genOperation(
return genSlotOutlet(oper, context) return genSlotOutlet(oper, context)
case IRNodeTypes.DIRECTIVE: case IRNodeTypes.DIRECTIVE:
return genBuiltinDirective(oper, context) return genBuiltinDirective(oper, context)
case IRNodeTypes.GET_TEXT_CHILD:
return genGetTextChild(oper, context)
default: default:
const exhaustiveCheck: never = oper const exhaustiveCheck: never = oper
throw new Error( throw new Error(

View File

@ -60,7 +60,9 @@ export function genChildren(
const elementIndex = Number(index) + offset const elementIndex = Number(index) + offset
const newPath = [...path, elementIndex] const newPath = [...path, elementIndex]
const variable = id === undefined ? `_n${context.block.tempId++}` : `n${id}` // p for "placeholder" variables that are meant for possible reuse by
// other access paths
const variable = id === undefined ? `p${context.block.tempId++}` : `n${id}`
push(NEWLINE, `const ${variable} = `) push(NEWLINE, `const ${variable} = `)
if (prev) { if (prev) {

View File

@ -1,22 +1,25 @@
import type { SimpleExpressionNode } from '@vue/compiler-dom'
import type { CodegenContext } from '../generate' import type { CodegenContext } from '../generate'
import type { CreateTextNodeIRNode, SetTextIRNode } from '../ir' import type {
CreateTextNodeIRNode,
GetTextChildIRNode,
SetTextIRNode,
} from '../ir'
import { getLiteralExpressionValue } from '../utils'
import { genExpression } from './expression' import { genExpression } from './expression'
import { import { type CodeFragment, NEWLINE, genCall } from './utils'
type CodeFragment,
DELIMITERS_ARRAY,
NEWLINE,
genCall,
genMulti,
} from './utils'
export function genSetText( export function genSetText(
oper: SetTextIRNode, oper: SetTextIRNode,
context: CodegenContext, context: CodegenContext,
): CodeFragment[] { ): CodeFragment[] {
const { helper } = context const { helper } = context
const { element, values } = oper const { element, values, generated } = oper
const texts = values.map(value => genExpression(value, context)) const texts = combineValues(values, context)
return [NEWLINE, ...genCall(helper('setText'), `n${element}`, ...texts)] return [
NEWLINE,
...genCall(helper('setText'), `${generated ? 'x' : 'n'}${element}`, texts),
]
} }
export function genCreateTextNode( export function genCreateTextNode(
@ -24,16 +27,40 @@ export function genCreateTextNode(
context: CodegenContext, context: CodegenContext,
): CodeFragment[] { ): CodeFragment[] {
const { helper } = context const { helper } = context
const { id, values, effect } = oper const { id, values } = oper
return [ return [
NEWLINE, NEWLINE,
`const n${id} = `, `const n${id} = `,
...genCall(helper('createTextNode'), [ ...genCall(
effect && '() => ', helper('createTextNode'),
...genMulti( values && combineValues(values, context),
DELIMITERS_ARRAY,
...values.map(value => genExpression(value, context)),
), ),
]), ]
}
function combineValues(
values: SimpleExpressionNode[],
context: CodegenContext,
): CodeFragment[] {
return values.flatMap((value, i) => {
let exp = genExpression(value, context)
if (getLiteralExpressionValue(value) == null) {
// dynamic, wrap with toDisplayString
exp = genCall(context.helper('toDisplayString'), exp)
}
if (i > 0) {
exp.unshift(' + ')
}
return exp
})
}
export function genGetTextChild(
oper: GetTextChildIRNode,
context: CodegenContext,
): CodeFragment[] {
return [
NEWLINE,
`const x${oper.parent} = ${context.helper('child')}(n${oper.parent})`,
] ]
} }

View File

@ -34,6 +34,8 @@ export enum IRNodeTypes {
IF, IF,
FOR, FOR,
GET_TEXT_CHILD,
} }
export interface BaseIRNode { export interface BaseIRNode {
@ -118,6 +120,7 @@ export interface SetTextIRNode extends BaseIRNode {
type: IRNodeTypes.SET_TEXT type: IRNodeTypes.SET_TEXT
element: number element: number
values: SimpleExpressionNode[] values: SimpleExpressionNode[]
generated?: boolean // whether this is a generated empty text node by `processTextLikeContainer`
} }
export type KeyOverride = [find: string, replacement: string] export type KeyOverride = [find: string, replacement: string]
@ -157,8 +160,7 @@ export interface SetTemplateRefIRNode extends BaseIRNode {
export interface CreateTextNodeIRNode extends BaseIRNode { export interface CreateTextNodeIRNode extends BaseIRNode {
type: IRNodeTypes.CREATE_TEXT_NODE type: IRNodeTypes.CREATE_TEXT_NODE
id: number id: number
values: SimpleExpressionNode[] values?: SimpleExpressionNode[]
effect: boolean
} }
export interface InsertNodeIRNode extends BaseIRNode { export interface InsertNodeIRNode extends BaseIRNode {
@ -209,6 +211,11 @@ export interface SlotOutletIRNode extends BaseIRNode {
fallback?: BlockIRNode fallback?: BlockIRNode
} }
export interface GetTextChildIRNode extends BaseIRNode {
type: IRNodeTypes.GET_TEXT_CHILD
parent: number
}
export type IRNode = OperationNode | RootIRNode export type IRNode = OperationNode | RootIRNode
export type OperationNode = export type OperationNode =
| SetPropIRNode | SetPropIRNode
@ -227,6 +234,7 @@ export type OperationNode =
| CreateComponentIRNode | CreateComponentIRNode
| DeclareOldRefIRNode | DeclareOldRefIRNode
| SlotOutletIRNode | SlotOutletIRNode
| GetTextChildIRNode
export enum DynamicFlag { export enum DynamicFlag {
NONE = 0, NONE = 0,

View File

@ -1,7 +1,6 @@
import { import {
type AllNode, type AllNode,
type TransformOptions as BaseTransformOptions, type TransformOptions as BaseTransformOptions,
BindingTypes,
type CommentNode, type CommentNode,
type CompilerCompatOptions, type CompilerCompatOptions,
type ElementNode, type ElementNode,
@ -12,7 +11,6 @@ import {
type TemplateChildNode, type TemplateChildNode,
defaultOnError, defaultOnError,
defaultOnWarn, defaultOnWarn,
isConstantNode,
isVSlot, isVSlot,
} from '@vue/compiler-dom' } from '@vue/compiler-dom'
import { EMPTY_OBJ, NOOP, extend, isArray, isString } from '@vue/shared' import { EMPTY_OBJ, NOOP, extend, isArray, isString } from '@vue/shared'
@ -27,7 +25,7 @@ import {
type RootIRNode, type RootIRNode,
type VaporDirectiveNode, type VaporDirectiveNode,
} from './ir' } from './ir'
import { isConstantExpression } from './utils' import { isConstantExpression, isStaticExpression } from './utils'
import { newBlock, newDynamic } from './transforms/utils' import { newBlock, newDynamic } from './transforms/utils'
export type NodeTransform = ( export type NodeTransform = (
@ -307,21 +305,3 @@ export function createStructuralDirectiveTransform(
} }
} }
} }
function isStaticExpression(
context: TransformContext,
expressions: SimpleExpressionNode[],
) {
const {
options: { bindingMetadata },
} = context
const isLiteralConst = (name: string) =>
bindingMetadata[name] === BindingTypes.LITERAL_CONST
return expressions.every(node => {
if (node.ast) {
return isConstantNode(node.ast, isLiteralConst)
} else if (node.ast === null) {
return isLiteralConst(node.content)
}
})
}

View File

@ -11,7 +11,11 @@ import {
} from '@vue/compiler-dom' } from '@vue/compiler-dom'
import type { NodeTransform, TransformContext } from '../transform' import type { NodeTransform, TransformContext } from '../transform'
import { DynamicFlag, IRNodeTypes } from '../ir' import { DynamicFlag, IRNodeTypes } from '../ir'
import { getLiteralExpressionValue, isConstantExpression } from '../utils' import {
getLiteralExpressionValue,
isConstantExpression,
isStaticExpression,
} from '../utils'
type TextLike = TextNode | InterpolationNode type TextLike = TextNode | InterpolationNode
const seen = new WeakMap< const seen = new WeakMap<
@ -52,12 +56,24 @@ function processTextLike(context: TransformContext<InterpolationNode>) {
context.dynamic.flags |= DynamicFlag.INSERT | DynamicFlag.NON_TEMPLATE context.dynamic.flags |= DynamicFlag.INSERT | DynamicFlag.NON_TEMPLATE
const nonConstantExps = values.filter(v => !isConstantExpression(v))
const isStatic =
!nonConstantExps.length ||
isStaticExpression(context, nonConstantExps) ||
context.inVOnce
context.registerOperation({ context.registerOperation({
type: IRNodeTypes.CREATE_TEXT_NODE, type: IRNodeTypes.CREATE_TEXT_NODE,
id, id,
values, values: isStatic ? values : undefined,
effect: !values.every(isConstantExpression) && !context.inVOnce,
}) })
if (!isStatic) {
context.registerEffect(values, {
type: IRNodeTypes.SET_TEXT,
element: id,
values,
})
}
} }
function processTextLikeContainer( function processTextLikeContainer(
@ -69,10 +85,17 @@ function processTextLikeContainer(
if (literals.every(l => l != null)) { if (literals.every(l => l != null)) {
context.childrenTemplate = literals.map(l => String(l)) context.childrenTemplate = literals.map(l => String(l))
} else { } else {
context.childrenTemplate = [' ']
context.registerOperation({
type: IRNodeTypes.GET_TEXT_CHILD,
parent: context.reference(),
})
context.registerEffect(values, { context.registerEffect(values, {
type: IRNodeTypes.SET_TEXT, type: IRNodeTypes.SET_TEXT,
element: context.reference(), element: context.reference(),
values, values,
// indicates this node is generated, so prefix should be "x" instead of "n"
generated: true,
}) })
} }
} }

View File

@ -3,6 +3,7 @@ import { IRNodeTypes } from '../ir'
import { EMPTY_EXPRESSION } from './utils' import { EMPTY_EXPRESSION } from './utils'
import type { DirectiveTransform } from '../transform' import type { DirectiveTransform } from '../transform'
import { getLiteralExpressionValue } from '../utils' import { getLiteralExpressionValue } from '../utils'
import { isVoidTag } from '../../../shared/src'
export const transformVText: DirectiveTransform = (dir, node, context) => { export const transformVText: DirectiveTransform = (dir, node, context) => {
let { exp, loc } = dir let { exp, loc } = dir
@ -19,14 +20,25 @@ export const transformVText: DirectiveTransform = (dir, node, context) => {
context.childrenTemplate.length = 0 context.childrenTemplate.length = 0
} }
// v-text on void tags do nothing
if (isVoidTag(context.node.tag)) {
return
}
const literal = getLiteralExpressionValue(exp) const literal = getLiteralExpressionValue(exp)
if (literal != null) { if (literal != null) {
context.childrenTemplate = [String(literal)] context.childrenTemplate = [String(literal)]
} else { } else {
context.childrenTemplate = [' ']
context.registerOperation({
type: IRNodeTypes.GET_TEXT_CHILD,
parent: context.reference(),
})
context.registerEffect([exp], { context.registerEffect([exp], {
type: IRNodeTypes.SET_TEXT, type: IRNodeTypes.SET_TEXT,
element: context.reference(), element: context.reference(),
values: [exp], values: [exp],
generated: true,
}) })
} }
} }

View File

@ -2,16 +2,19 @@ import type { BigIntLiteral, NumericLiteral, StringLiteral } from '@babel/types'
import { isGloballyAllowed } from '@vue/shared' import { isGloballyAllowed } from '@vue/shared'
import { import {
type AttributeNode, type AttributeNode,
BindingTypes,
type ElementNode, type ElementNode,
NodeTypes, NodeTypes,
type SimpleExpressionNode, type SimpleExpressionNode,
findDir as _findDir, findDir as _findDir,
findProp as _findProp, findProp as _findProp,
createSimpleExpression, createSimpleExpression,
isConstantNode,
isLiteralWhitelisted, isLiteralWhitelisted,
} from '@vue/compiler-dom' } from '@vue/compiler-dom'
import type { VaporDirectiveNode } from './ir' import type { VaporDirectiveNode } from './ir'
import { EMPTY_EXPRESSION } from './transforms/utils' import { EMPTY_EXPRESSION } from './transforms/utils'
import type { TransformContext } from './transform'
export const findProp = _findProp as ( export const findProp = _findProp as (
node: ElementNode, node: ElementNode,
@ -45,6 +48,24 @@ export function isConstantExpression(exp: SimpleExpressionNode): boolean {
) )
} }
export function isStaticExpression(
context: TransformContext,
expressions: SimpleExpressionNode[],
): boolean {
const {
options: { bindingMetadata },
} = context
const isLiteralConst = (name: string) =>
bindingMetadata[name] === BindingTypes.LITERAL_CONST
return expressions.every(node => {
if (node.ast) {
return isConstantNode(node.ast, isLiteralConst)
} else if (node.ast === null) {
return isLiteralConst(node.content)
}
})
}
export function resolveExpression( export function resolveExpression(
exp: SimpleExpressionNode, exp: SimpleExpressionNode,
): SimpleExpressionNode { ): SimpleExpressionNode {

View File

@ -28,7 +28,7 @@ describe('api: createVaporApp', () => {
count: { default: 0 }, count: { default: 0 },
}, },
setup(props) { setup(props) {
return createTextNode(() => [props.count]) return createTextNode(String(props.count))
}, },
}) })
@ -60,7 +60,7 @@ describe('api: createVaporApp', () => {
count: { default: 0 }, count: { default: 0 },
}, },
setup(props) { setup(props) {
return createTextNode(() => [props.count]) return createTextNode(String(props.count))
}, },
}) })
@ -93,7 +93,7 @@ describe('api: createVaporApp', () => {
try { try {
inject('__proto__') inject('__proto__')
} catch (e: any) {} } catch (e: any) {}
return createTextNode([`${foo},${bar}`]) return createTextNode(`${foo},${bar}`)
}, },
}) })
@ -142,12 +142,12 @@ describe('api: createVaporApp', () => {
}, },
}).create() }).create()
const FooBar = () => createTextNode(['foobar!']) const FooBar = () => createTextNode('foobar!')
app.component('FooBar', FooBar) app.component('FooBar', FooBar)
expect(app.component('FooBar')).toBe(FooBar) expect(app.component('FooBar')).toBe(FooBar)
app.component('BarBaz', () => createTextNode(['barbaz!'])) app.component('BarBaz', () => createTextNode('barbaz!'))
app.component('BarBaz', () => createTextNode(['barbaz!'])) app.component('BarBaz', () => createTextNode('barbaz!'))
expect( expect(
'Component "BarBaz" has already been registered in target app.', 'Component "BarBaz" has already been registered in target app.',
).toHaveBeenWarnedTimes(1) ).toHaveBeenWarnedTimes(1)
@ -309,7 +309,7 @@ describe('api: createVaporApp', () => {
writable: false, writable: false,
}) })
app.component('div', () => createTextNode(['div'])) app.component('div', () => createTextNode('div'))
mount() mount()
expect( expect(
`Do not use built-in or reserved HTML elements as component id: div`, `Do not use built-in or reserved HTML elements as component id: div`,

View File

@ -8,15 +8,16 @@ import {
reactive, reactive,
readonly, readonly,
ref, ref,
toDisplayString,
} from '@vue/runtime-dom' } from '@vue/runtime-dom'
import { import {
createComponent, createComponent,
createTextNode, createTextNode,
createVaporApp, createVaporApp,
renderEffect, renderEffect,
setText,
} from '../src' } from '../src'
import { makeRender } from './_utils' import { makeRender } from './_utils'
import { setElementText } from '../src/dom/prop'
const define = makeRender<any>() const define = makeRender<any>()
@ -41,7 +42,7 @@ describe('api: provide/inject', () => {
const foo = inject('foo') const foo = inject('foo')
return (() => { return (() => {
const n0 = createTextNode() const n0 = createTextNode()
setText(n0, foo) setElementText(n0, foo)
return n0 return n0
})() })()
}, },
@ -71,7 +72,7 @@ describe('api: provide/inject', () => {
const foo = inject(key) const foo = inject(key)
return (() => { return (() => {
const n0 = createTextNode() const n0 = createTextNode()
setText(n0, foo) setElementText(n0, foo)
return n0 return n0
})() })()
}, },
@ -101,7 +102,7 @@ describe('api: provide/inject', () => {
const bar = inject('bar', 'bar') const bar = inject('bar', 'bar')
return (() => { return (() => {
const n0 = createTextNode() const n0 = createTextNode()
setText(n0, foo + bar) setElementText(n0, foo + bar)
return n0 return n0
})() })()
}, },
@ -139,7 +140,7 @@ describe('api: provide/inject', () => {
const baz = inject('baz') const baz = inject('baz')
return (() => { return (() => {
const n0 = createTextNode() const n0 = createTextNode()
setText(n0, [foo, bar, baz].join(',')) setElementText(n0, [foo, bar, baz].join(','))
return n0 return n0
})() })()
}, },
@ -169,7 +170,7 @@ describe('api: provide/inject', () => {
return (() => { return (() => {
const n0 = createTextNode() const n0 = createTextNode()
renderEffect(() => { renderEffect(() => {
setText(n0, count.value) setElementText(n0, count.value)
}) })
return n0 return n0
})() })()
@ -206,7 +207,7 @@ describe('api: provide/inject', () => {
return (() => { return (() => {
const n0 = createTextNode() const n0 = createTextNode()
renderEffect(() => { renderEffect(() => {
setText(n0, count.value) setElementText(n0, count.value)
}) })
return n0 return n0
})() })()
@ -245,7 +246,7 @@ describe('api: provide/inject', () => {
return (() => { return (() => {
const n0 = createTextNode() const n0 = createTextNode()
renderEffect(() => { renderEffect(() => {
setText(n0, state.count) setElementText(n0, state.count)
}) })
return n0 return n0
})() })()
@ -282,7 +283,7 @@ describe('api: provide/inject', () => {
return (() => { return (() => {
const n0 = createTextNode() const n0 = createTextNode()
renderEffect(() => { renderEffect(() => {
setText(n0, state.count) setElementText(n0, state.count)
}) })
return n0 return n0
})() })()
@ -318,7 +319,7 @@ describe('api: provide/inject', () => {
expect(foo).toBeUndefined() expect(foo).toBeUndefined()
return (() => { return (() => {
const n0 = createTextNode() const n0 = createTextNode()
setText(n0, foo) setElementText(n0, foo)
return n0 return n0
})() })()
}, },
@ -345,7 +346,7 @@ describe('api: provide/inject', () => {
const foo = inject('foo', undefined) const foo = inject('foo', undefined)
return (() => { return (() => {
const n0 = createTextNode() const n0 = createTextNode()
setText(n0, foo) setElementText(n0, foo)
return n0 return n0
})() })()
}, },
@ -361,7 +362,7 @@ describe('api: provide/inject', () => {
setup() { setup() {
provide('foo', 'foo') provide('foo', 'foo')
const injection = inject('foo', null) const injection = inject('foo', null)
return createTextNode(() => [injection]) return createTextNode(toDisplayString(injection))
}, },
}).render() }).render()
expect(host.innerHTML).toBe('') expect(host.innerHTML).toBe('')

View File

@ -26,11 +26,11 @@ import {
createTextNode, createTextNode,
insert, insert,
renderEffect, renderEffect,
setText,
template, template,
} from '../src' } from '../src'
import { makeRender } from './_utils' import { makeRender } from './_utils'
import { ITERATE_KEY } from '@vue/reactivity' import { ITERATE_KEY } from '@vue/reactivity'
import { setElementText } from '../src/dom/prop'
const define = makeRender<any>() const define = makeRender<any>()
@ -73,7 +73,7 @@ describe('api: lifecycle hooks', () => {
onBeforeUpdate(fn) onBeforeUpdate(fn)
const n0 = createTextNode() const n0 = createTextNode()
renderEffect(() => { renderEffect(() => {
setText(n0, count.value) setElementText(n0, count.value)
}) })
return n0 return n0
}, },
@ -99,7 +99,7 @@ describe('api: lifecycle hooks', () => {
const n0 = createTextNode() const n0 = createTextNode()
renderEffect(() => { renderEffect(() => {
renderSpy() renderSpy()
setText(n0, count.value) setElementText(n0, count.value)
}) })
return n0 return n0
}, },
@ -120,7 +120,7 @@ describe('api: lifecycle hooks', () => {
const n0 = createTextNode() const n0 = createTextNode()
renderEffect(() => { renderEffect(() => {
setText(n0, count.value) setElementText(n0, count.value)
}) })
return n0 return n0
}, },
@ -282,7 +282,7 @@ describe('api: lifecycle hooks', () => {
const t0 = template('<div></div>') const t0 = template('<div></div>')
const n0 = t0() const n0 = t0()
renderEffect(() => setText(n0, props.count)) renderEffect(() => setElementText(n0, props.count))
return n0 return n0
}, },
} }
@ -334,7 +334,7 @@ describe('api: lifecycle hooks', () => {
const n0 = createTextNode() const n0 = createTextNode()
renderEffect(() => { renderEffect(() => {
setText(n0, [obj.foo, 'bar' in obj, Object.keys(obj).join('')]) setElementText(n0, [obj.foo, 'bar' in obj, Object.keys(obj).join('')])
}) })
return n0 return n0
}, },
@ -377,7 +377,7 @@ describe('api: lifecycle hooks', () => {
const n0 = createTextNode() const n0 = createTextNode()
renderEffect(() => { renderEffect(() => {
setText(n0, [obj.foo, 'bar' in obj, Object.keys(obj).join('')]) setElementText(n0, [obj.foo, 'bar' in obj, Object.keys(obj).join('')])
}) })
return n0 return n0
}, },
@ -451,7 +451,7 @@ describe('api: lifecycle hooks', () => {
onUpdated(() => handleUpdated()) onUpdated(() => handleUpdated())
const n0 = createTextNode() const n0 = createTextNode()
renderEffect(() => setText(n0, count.value)) renderEffect(() => setElementText(n0, count.value))
const n1 = createComponent(Child, { count: () => count.value }) const n1 = createComponent(Child, { count: () => count.value })
return [n0, n1] return [n0, n1]
}, },
@ -464,7 +464,7 @@ describe('api: lifecycle hooks', () => {
const props = currentInstance!.props const props = currentInstance!.props
const n2 = createTextNode() const n2 = createTextNode()
renderEffect(() => setText(n2, props.count)) renderEffect(() => setElementText(n2, props.count))
return n2 return n2
}, },
} }
@ -496,7 +496,7 @@ describe('api: lifecycle hooks', () => {
onUpdated(() => handleUpdated()) onUpdated(() => handleUpdated())
const n0 = createTextNode() const n0 = createTextNode()
renderEffect(() => setText(n0, count.value)) renderEffect(() => setElementText(n0, count.value))
const n1 = createComponent(Child, { count: () => count.value }) const n1 = createComponent(Child, { count: () => count.value })
return [n0, n1] return [n0, n1]
}, },
@ -511,7 +511,7 @@ describe('api: lifecycle hooks', () => {
update = () => count.value++ update = () => count.value++
const n2 = createTextNode() const n2 = createTextNode()
renderEffect(() => setText(n2, count.value)) renderEffect(() => setElementText(n2, count.value))
return n2 return n2
}, },
} }

View File

@ -8,6 +8,7 @@ import {
insert, insert,
renderEffect, renderEffect,
setDynamicProps, setDynamicProps,
setText,
template, template,
} from '../src' } from '../src'
import { nextTick, reactive, ref, watchEffect } from '@vue/runtime-dom' import { nextTick, reactive, ref, watchEffect } from '@vue/runtime-dom'
@ -26,7 +27,7 @@ describe('api: setup context', () => {
} }
}, },
render(ctx) { render(ctx) {
return createTextNode([`${ctx.ref} ${ctx.object.msg} ${ctx.value}`]) return createTextNode(`${ctx.ref} ${ctx.object.msg} ${ctx.value}`)
}, },
}).render() }).render()
expect(html()).toMatch(`foo bar baz`) expect(html()).toMatch(`foo bar baz`)
@ -35,7 +36,7 @@ describe('api: setup context', () => {
it('should support returning render function', () => { it('should support returning render function', () => {
const { html } = define({ const { html } = define({
setup() { setup() {
return createTextNode([`hello`]) return createTextNode(`hello`)
}, },
}).render() }).render()
expect(html()).toMatch(`hello`) expect(html()).toMatch(`hello`)
@ -51,7 +52,11 @@ describe('api: setup context', () => {
watchEffect(() => { watchEffect(() => {
dummy = props.count dummy = props.count
}) })
return createTextNode(() => [props.count]) const n = createTextNode()
renderEffect(() => {
setText(n, props.count)
})
return n
}, },
}) })
@ -148,11 +153,15 @@ describe('api: setup context', () => {
$: [ $: [
() => ({ () => ({
name: 'foo', name: 'foo',
fn: () => createTextNode(() => [id.value]), fn: () => {
const n = createTextNode()
renderEffect(() => setText(n, id.value))
return n
},
}), }),
() => ({ () => ({
name: 'bar', name: 'bar',
fn: () => createTextNode(['bar']), fn: () => createTextNode('bar'),
}), }),
], ],
}) })
@ -181,10 +190,9 @@ describe('api: setup context', () => {
delegate(n0, 'click', () => { delegate(n0, 'click', () => {
emit('inc', props.count + 1) emit('inc', props.count + 1)
}) })
insert( const n = createTextNode()
createTextNode(() => [props.count]), renderEffect(() => setText(n, props.count))
n0, insert(n, n0)
)
return n0 return n0
}, },
}) })

View File

@ -13,11 +13,11 @@ import {
createIf, createIf,
createTextNode, createTextNode,
renderEffect, renderEffect,
setText,
template, template,
} from '../src' } from '../src'
import { makeRender } from './_utils' import { makeRender } from './_utils'
import type { VaporComponentInstance } from '../src/component' import type { VaporComponentInstance } from '../src/component'
import { setElementText, setText } from '../src/dom/prop'
const define = makeRender() const define = makeRender()
@ -100,7 +100,7 @@ describe('component', () => {
const n = inject<Ref<number>>('foo')! const n = inject<Ref<number>>('foo')!
n.value++ n.value++
const n0 = template('<div></div>')() const n0 = template('<div></div>')()
renderEffect(() => setText(n0, n.value)) renderEffect(() => setElementText(n0, n.value))
return n0 return n0
}, },
}) })
@ -110,7 +110,7 @@ describe('component', () => {
const n = ref(0) const n = ref(0)
provide('foo', n) provide('foo', n)
const n0 = template('<div></div>')() const n0 = template('<div></div>')()
renderEffect(() => setText(n0, n.value)) renderEffect(() => setElementText(n0, n.value))
return [n0, createComponent(Child)] return [n0, createComponent(Child)]
}, },
}).render() }).render()
@ -129,7 +129,7 @@ describe('component', () => {
val => emit('update', val), val => emit('update', val),
) )
const n0 = template('<div></div>')() const n0 = template('<div></div>')()
renderEffect(() => setText(n0, props.value)) renderEffect(() => setElementText(n0, props.value))
return n0 return n0
}, },
}) })
@ -139,7 +139,7 @@ describe('component', () => {
setup() { setup() {
const inner = ref(0) const inner = ref(0)
const n0 = template('<div></div>')() const n0 = template('<div></div>')()
renderEffect(() => setText(n0, inner.value)) renderEffect(() => setElementText(n0, inner.value))
const n1 = createComponent(Child, { const n1 = createComponent(Child, {
value: () => outer.value, value: () => outer.value,
onUpdate: () => (val: number) => (inner.value = val), onUpdate: () => (val: number) => (inner.value = val),
@ -162,7 +162,11 @@ describe('component', () => {
props: ['count'], props: ['count'],
setup(props: any) { setup(props: any) {
onUpdated(() => calls.push('update child')) onUpdated(() => calls.push('update child'))
return createTextNode(() => [`${props.count} - ${a.value}`]) const n = createTextNode()
renderEffect(() => {
setText(n, `${props.count} - ${a.value}`)
})
return n
}, },
}) })
@ -206,10 +210,11 @@ describe('component', () => {
props: ['count'], props: ['count'],
setup(props: any) { setup(props: any) {
onUpdated(() => calls.push('update parent')) onUpdated(() => calls.push('update parent'))
const n1 = createTextNode(() => [ const n1 = createTextNode()
`${globalCount.value} - ${props.count}`,
])
const n2 = createComponent(Child, { count: () => parentCount.value }) const n2 = createComponent(Child, { count: () => parentCount.value })
renderEffect(() => {
setText(n1, `${globalCount.value} - ${props.count}`)
})
return [n1, n2] return [n1, n2]
}, },
}) })
@ -240,7 +245,7 @@ describe('component', () => {
const n1 = template('<h1></h1>')() const n1 = template('<h1></h1>')()
renderEffect(() => { renderEffect(() => {
spy() spy()
setText(n1, props.text) setElementText(n1, props.text)
}) })
return n1 return n1
}, },
@ -267,7 +272,7 @@ describe('component', () => {
const t0 = template('<div></div>') const t0 = template('<div></div>')
const n0 = t0() const n0 = t0()
watchEffect(() => { watchEffect(() => {
setText(n0, count.value) setElementText(n0, count.value)
}) })
renderEffect(() => {}) renderEffect(() => {})
return n0 return n0

View File

@ -7,11 +7,11 @@ import {
setDynamicProps, setDynamicProps,
setProp, setProp,
setStyle, setStyle,
setText,
template, template,
} from '../src' } from '../src'
import { makeRender } from './_utils' import { makeRender } from './_utils'
import { stringifyStyle } from '@vue/shared' import { stringifyStyle } from '@vue/shared'
import { setElementText } from '../src/dom/prop'
const define = makeRender<any>() const define = makeRender<any>()
@ -24,7 +24,7 @@ describe('attribute fallthrough', () => {
props: ['foo'], props: ['foo'],
setup(props: any) { setup(props: any) {
const n0 = t0() as Element const n0 = t0() as Element
renderEffect(() => setText(n0, props.foo)) renderEffect(() => setElementText(n0, props.foo))
return n0 return n0
}, },
}) })
@ -62,7 +62,7 @@ describe('attribute fallthrough', () => {
inheritAttrs: false, inheritAttrs: false,
setup(props: any) { setup(props: any) {
const n0 = t0() as Element const n0 = t0() as Element
renderEffect(() => setText(n0, props.foo)) renderEffect(() => setElementText(n0, props.foo))
return n0 return n0
}, },
}) })
@ -99,7 +99,7 @@ describe('attribute fallthrough', () => {
props: ['custom-attr'], props: ['custom-attr'],
setup(_: any, { attrs }: any) { setup(_: any, { attrs }: any) {
const n0 = t0() as Element const n0 = t0() as Element
renderEffect(() => setText(n0, attrs.foo)) renderEffect(() => setElementText(n0, attrs.foo))
return n0 return n0
}, },
}) })

View File

@ -13,10 +13,10 @@ import {
createComponent, createComponent,
defineVaporComponent, defineVaporComponent,
renderEffect, renderEffect,
setText,
template, template,
} from '../src' } from '../src'
import { makeRender } from './_utils' import { makeRender } from './_utils'
import { setElementText } from '../src/dom/prop'
const define = makeRender<any>() const define = makeRender<any>()
@ -243,7 +243,7 @@ describe('component: props', () => {
props: ['foo'], props: ['foo'],
setup(props: any) { setup(props: any) {
const n0 = t0() const n0 = t0()
renderEffect(() => setText(n0, props.foo)) renderEffect(() => setElementText(n0, props.foo))
return n0 return n0
}, },
}) })
@ -396,7 +396,7 @@ describe('component: props', () => {
}, },
setup(props: any) { setup(props: any) {
const n0 = t0() const n0 = t0()
renderEffect(() => setText(n0, props.foo)) renderEffect(() => setElementText(n0, props.foo))
return n0 return n0
}, },
}).render({ }).render({
@ -428,7 +428,7 @@ describe('component: props', () => {
const t0 = template('<h1></h1>') const t0 = template('<h1></h1>')
const n0 = t0() const n0 = t0()
renderEffect(() => { renderEffect(() => {
setText(n0, props.foo.val, props.bar) setElementText(n0, String(props.foo.val) + String(props.bar))
}) })
return n0 return n0
}, },
@ -503,7 +503,7 @@ describe('component: props', () => {
const t0 = template('<div></div>') const t0 = template('<div></div>')
const n0 = t0() const n0 = t0()
renderEffect(() => renderEffect(() =>
setText(n0, JSON.stringify(attrs) + Object.keys(attrs)), setElementText(n0, JSON.stringify(attrs) + Object.keys(attrs)),
) )
return n0 return n0
}, },

View File

@ -10,12 +10,12 @@ import {
insert, insert,
prepend, prepend,
renderEffect, renderEffect,
setText,
template, template,
} from '../src' } from '../src'
import { currentInstance, nextTick, ref } from '@vue/runtime-dom' import { currentInstance, nextTick, ref } from '@vue/runtime-dom'
import { makeRender } from './_utils' import { makeRender } from './_utils'
import type { DynamicSlot } from '../src/componentSlots' import type { DynamicSlot } from '../src/componentSlots'
import { setElementText } from '../src/dom/prop'
const define = makeRender<any>() const define = makeRender<any>()
@ -186,7 +186,7 @@ describe('component: slots', () => {
header: props => { header: props => {
const el = template('<h1></h1>')() const el = template('<h1></h1>')()
renderEffect(() => { renderEffect(() => {
setText(el, props.title) setElementText(el, props.title)
}) })
return el return el
}, },
@ -273,7 +273,7 @@ describe('component: slots', () => {
fn: (props: any) => { fn: (props: any) => {
const el = template('<h1></h1>')() const el = template('<h1></h1>')()
renderEffect(() => { renderEffect(() => {
setText(el, props.title) setElementText(el, props.title)
}) })
return el return el
}, },

View File

@ -4,6 +4,7 @@ import {
setAttr, setAttr,
setClass, setClass,
setDynamicProps, setDynamicProps,
setElementText,
setHtml, setHtml,
setProp, setProp,
setText, setText,
@ -11,7 +12,11 @@ import {
} from '../../src/dom/prop' } from '../../src/dom/prop'
import { setStyle } from '../../src/dom/prop' import { setStyle } from '../../src/dom/prop'
import { VaporComponentInstance } from '../../src/component' import { VaporComponentInstance } from '../../src/component'
import { currentInstance, simpleSetCurrentInstance } from '@vue/runtime-dom' import {
currentInstance,
ref,
simpleSetCurrentInstance,
} from '@vue/runtime-dom'
let removeComponentInstance = NOOP let removeComponentInstance = NOOP
beforeEach(() => { beforeEach(() => {
@ -227,7 +232,7 @@ describe('patchProp', () => {
expect((el as any)._value).toBe(obj) expect((el as any)._value).toBe(obj)
const option = document.createElement('option') const option = document.createElement('option')
setText(option, 'foo') setElementText(option, 'foo')
expect(option.value).toBe('foo') expect(option.value).toBe('foo')
expect(option.getAttribute('value')).toBe(null) expect(option.getAttribute('value')).toBe(null)
@ -412,9 +417,9 @@ describe('patchProp', () => {
}) })
describe('setText', () => { describe('setText', () => {
test('should set textContent', () => { test('should set nodeValue', () => {
const el = document.createElement('div') const el = document.createTextNode('foo')
setText(el, null) setText(el, '')
expect(el.textContent).toBe('') expect(el.textContent).toBe('')
setText(el, 'foo') setText(el, 'foo')
expect(el.textContent).toBe('foo') expect(el.textContent).toBe('foo')
@ -423,6 +428,18 @@ describe('patchProp', () => {
}) })
}) })
describe('setElementText', () => {
test('should set textContent w/ toDisplayString', () => {
const el = document.createElement('div')
setElementText(el, null)
expect(el.textContent).toBe('')
setElementText(el, { a: 1 })
expect(el.textContent).toBe(JSON.stringify({ a: 1 }, null, 2))
setElementText(el, ref('bar'))
expect(el.textContent).toBe('bar')
})
})
describe('setHtml', () => { describe('setHtml', () => {
test('should set innerHTML', () => { test('should set innerHTML', () => {
const el = document.createElement('div') const el = document.createElement('div')

View File

@ -7,7 +7,6 @@ import {
createTemplateRefSetter, createTemplateRefSetter,
insert, insert,
renderEffect, renderEffect,
setText,
template, template,
} from '../../src' } from '../../src'
import { makeRender } from '../_utils' import { makeRender } from '../_utils'
@ -20,6 +19,7 @@ import {
useTemplateRef, useTemplateRef,
watchEffect, watchEffect,
} from '@vue/runtime-dom' } from '@vue/runtime-dom'
import { setElementText } from '../../src/dom/prop'
const define = makeRender() const define = makeRender()
@ -292,7 +292,7 @@ describe('api: template ref', () => {
const n0 = t0() const n0 = t0()
createTemplateRefSetter()(n0 as Element, el) createTemplateRefSetter()(n0 as Element, el)
renderEffect(() => { renderEffect(() => {
setText(n0, el.value && el.value.getAttribute('id')) setElementText(n0, el.value && el.value.getAttribute('id'))
}) })
return n0 return n0
}, },
@ -431,7 +431,7 @@ describe('api: template ref', () => {
true, true,
) )
renderEffect(() => { renderEffect(() => {
setText(n1, item) setElementText(n1, item)
}) })
return n1 return n1
}, },
@ -493,7 +493,7 @@ describe('api: template ref', () => {
true, true,
) )
renderEffect(() => { renderEffect(() => {
setText(n1, item) setElementText(n1, item)
}) })
return n1 return n1
}, },
@ -553,14 +553,14 @@ describe('api: template ref', () => {
true, true,
) )
renderEffect(() => { renderEffect(() => {
setText(n4, item) setElementText(n4, item)
}) })
return n4 return n4
}, },
) )
insert(n3, n2 as unknown as ParentNode) insert(n3, n2 as unknown as ParentNode)
renderEffect(() => { renderEffect(() => {
setText(n1!, String(listRefs.value)) setElementText(n1!, String(listRefs.value))
}) })
return n0 return n0
}, },

View File

@ -3,7 +3,6 @@ import {
createIf, createIf,
insert, insert,
renderEffect, renderEffect,
setText,
template, template,
// @ts-expect-error // @ts-expect-error
withDirectives, withDirectives,
@ -12,6 +11,7 @@ import { nextTick, ref } from '@vue/runtime-dom'
import type { Mock } from 'vitest' import type { Mock } from 'vitest'
import { makeRender } from './_utils' import { makeRender } from './_utils'
import { unmountComponent } from '../src/component' import { unmountComponent } from '../src/component'
import { setElementText } from '../src/dom/prop'
const define = makeRender() const define = makeRender()
@ -44,7 +44,7 @@ describe('createIf', () => {
(spyIfFn ||= vi.fn(() => { (spyIfFn ||= vi.fn(() => {
const n2 = t1() const n2 = t1()
renderEffect(() => { renderEffect(() => {
setText(n2, count.value) setElementText(n2, count.value)
}) })
return n2 return n2
})), })),

View File

@ -1,17 +1,6 @@
import { isArray } from '@vue/shared' /*! #__NO_SIDE_EFFECTS__ */
import { renderEffect } from '../renderEffect' export function createTextNode(value = ''): Text {
import { setText } from './prop' return document.createTextNode(value)
export function createTextNode(values?: any[] | (() => any[])): Text {
const node = document.createTextNode('')
if (values) {
if (isArray(values)) {
setText(node, ...values)
} else {
renderEffect(() => setText(node, ...values()))
}
}
return node
} }
/*! #__NO_SIDE_EFFECTS__ */ /*! #__NO_SIDE_EFFECTS__ */

View File

@ -171,13 +171,26 @@ export function setValue(el: TargetElement, value: any): void {
} }
} }
export function setText(el: Node & { $txt?: string }, ...values: any[]): void { /**
const value = * Only called on text nodes!
values.length > 1 * Compiler should also ensure value passed here is already converted by
? values.map(toDisplayString).join('') * `toDisplayString`
: toDisplayString(values[0]) */
export function setText(el: Text & { $txt?: string }, value: string): void {
if (el.$txt !== value) { if (el.$txt !== value) {
el.textContent = el.$txt = value el.nodeValue = el.$txt = value
}
}
/**
* Used by setDynamicProps only, so need to guard with `toDisplayString`
*/
export function setElementText(
el: Node & { $txt?: string },
value: unknown,
): void {
if (el.$txt !== (value = toDisplayString(value))) {
el.textContent = el.$txt = value as string
} }
} }
@ -232,7 +245,7 @@ export function setDynamicProp(
if (key === 'innerHTML') { if (key === 'innerHTML') {
setHtml(el, value) setHtml(el, value)
} else if (key === 'textContent') { } else if (key === 'textContent') {
setText(el, value) setElementText(el, value)
} else if (key === 'value' && canSetValueDirectly(el.tagName)) { } else if (key === 'value' && canSetValueDirectly(el.tagName)) {
setValue(el, value) setValue(el, value)
} else { } else {