mirror of https://github.com/vuejs/core.git
perf(vapor): optimize text bindings and v-text
This commit is contained in:
parent
a2fa0db998
commit
5d1c6ca5a9
|
@ -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
|
||||||
}"
|
}"
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -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
|
||||||
}"
|
}"
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -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
|
||||||
}"
|
}"
|
||||||
|
|
|
@ -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
|
||||||
}"
|
}"
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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
|
||||||
}"
|
}"
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -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)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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>',
|
||||||
])
|
])
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -42,7 +42,6 @@ describe('compiler: v-once', () => {
|
||||||
isStatic: true,
|
isStatic: true,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
effect: false,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
element: 1,
|
element: 1,
|
||||||
|
|
|
@ -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([
|
||||||
|
|
|
@ -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', () => {
|
||||||
|
|
|
@ -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(
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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})`,
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
|
@ -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,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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`,
|
||||||
|
|
|
@ -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('')
|
||||||
|
|
|
@ -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
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -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
|
||||||
},
|
},
|
||||||
|
|
|
@ -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
|
||||||
},
|
},
|
||||||
|
|
|
@ -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')
|
||||||
|
|
|
@ -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
|
||||||
},
|
},
|
||||||
|
|
|
@ -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
|
||||||
})),
|
})),
|
||||||
|
|
|
@ -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__ */
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue