// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compile > bindings 1`] = `
-"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<div> </div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
- _renderEffect(() => _setText(n0, "count is ", _ctx.count, "."))
+ const x0 = _child(n0)
+ _renderEffect(() => _setText(x0, "count is " + _toDisplayString(_ctx.count) + "."))
return n0
}"
`;
`;
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 t1 = _template("<div></div>")
const n0 = t0()
const n3 = t1()
const n1 = _createComponentWithFallback(_component_Comp)
- const n2 = _createTextNode(() => [_ctx.bar])
+ const n2 = _createTextNode()
_insert([n1, n2], n3)
- _renderEffect(() => _setProp(n3, "id", _ctx.foo))
+ _renderEffect(() => {
+ _setText(n2, _toDisplayString(_ctx.bar))
+ _setProp(n3, "id", _ctx.foo)
+ })
return [n0, n3]
}"
`;
exports[`compile > dynamic root 1`] = `
-"import { createTextNode as _createTextNode } from 'vue';
+"import { createTextNode as _createTextNode, toDisplayString as _toDisplayString } from 'vue';
export function render(_ctx) {
- const n0 = _createTextNode(() => [1, 2])
+ const n0 = _createTextNode(_toDisplayString(1) + _toDisplayString(2))
return n0
}"
`;
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';
-const t0 = _template("<button></button>", true)
+"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)
_delegateEvents("click")
export function render(_ctx) {
const n0 = t0()
+ const x0 = _child(n0)
n0.$evtclick = e => _ctx.handleClick(e)
_renderEffect(() => {
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)
})
return n0
exports[`compile > expression parsing > interpolation 1`] = `
"
- const n0 = _createTextNode(() => [a + b.value])
+ const n0 = _createTextNode()
+ _renderEffect(() => _setText(n0, _toDisplayString(a + b.value)))
return n0
"
`;
`;
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) {
- 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
}"
`;
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
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) {
- const n0 = _createTextNode(() => [_ctx.a])
+ const n0 = _createTextNode()
+ _renderEffect(() => _setText(n0, _toDisplayString(_ctx.a)))
return n0
}"
`;
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) {
- const n0 = _createTextNode(() => [$props.foo])
+ const n0 = _createTextNode()
+ _renderEffect(() => _setText(n0, _toDisplayString($props.foo)))
return n0
}"
`;
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) {
- const n0 = _createTextNode(() => [$props['bar']])
+ const n0 = _createTextNode()
+ _renderEffect(() => _setText(n0, _toDisplayString($props['bar'])))
return n0
}"
`;
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
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';
-const t0 = _template("<div><p></p> <!><p></p></div>", true)
+"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)
export function render(_ctx) {
const n4 = t0()
const n0 = _child(n4)
const n3 = _nextn(n0, 2)
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)
_renderEffect(() => {
- _setText(n0, _ctx.first)
- _setText(n2, _ctx.forth)
+ _setText(x0, _toDisplayString(_ctx.first))
+ _setText(n1, _toDisplayString(_ctx.second) + " " + _toDisplayString(_ctx.third) + " ")
+ _setText(x2, _toDisplayString(_ctx.forth))
})
return n4
}"
`;
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';
-const t0 = _template("<div><div>x</div><div><span></span></div><div><span></span></div><div><span></span></div></div>", true)
+"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)
export function render(_ctx) {
const n3 = t0()
- const _n0 = _next(_child(n3))
- const n0 = _child(_n0)
- const _n1 = _next(_n0)
- const n1 = _child(_n1)
- const _n2 = _next(_n1)
- const n2 = _child(_n2)
+ const p0 = _next(_child(n3))
+ const n0 = _child(p0)
+ const p1 = _next(p0)
+ const n1 = _child(p1)
+ const p2 = _next(p1)
+ const n2 = _child(p2)
+ const x0 = _child(n0)
+ const x1 = _child(n1)
+ const x2 = _child(n2)
_renderEffect(() => {
const _msg = _ctx.msg
- _setText(n0, _msg)
- _setText(n1, _msg)
- _setText(n2, _msg)
+ _setText(x0, _toDisplayString(_msg))
+ _setText(x1, _toDisplayString(_msg))
+ _setText(x2, _toDisplayString(_msg))
})
return n3
}"
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
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) {
- const n0 = _createTextNode(() => [_ctx.msg])
+ const n0 = _createTextNode()
+ _renderEffect(() => _setText(n0, _toDisplayString(_ctx.msg)))
return n0
}"
`;
"import { createTextNode as _createTextNode } from 'vue';
export function render(_ctx) {
- const n0 = _createTextNode(["hello world"])
+ const n0 = _createTextNode("hello world")
return n0
}"
`;
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
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';
-const t0 = _template("<div></div>", true)
+"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)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
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
}, ([id, ...other], index) => (id))
return n0
`;
exports[`compiler: v-for > array de-structured value 1`] = `
-"import { setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+"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)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
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
}, ([id, other], index) => (id))
return n0
`;
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';
-const t0 = _template("<div></div>", true)
+"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)
_delegateEvents("click")
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
const n2 = t0()
+ const x2 = _child(n2)
n2.$evtclick = () => (_ctx.remove(_for_item0.value))
- _renderEffect(() => _setText(n2, _for_item0.value))
+ _renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value)))
return n2
}, (item) => (item.id))
return n0
`;
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';
-const t0 = _template("<span></span>")
+"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 t1 = _template("<div></div>", true)
export function render(_ctx) {
const n5 = t1()
const n2 = _createFor(() => (_for_item0.value), (_for_item1) => {
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
}, null, null, null, true)
_insert(n2, n5)
`;
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';
-const t0 = _template("<div></div>", true)
+"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)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
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
}, ({ id, ...other }, index) => (id))
return n0
`;
exports[`compiler: v-for > object de-structured value 1`] = `
-"import { setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<span></span>", true)
+"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)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
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
}, ({ id, value }) => (id))
return n0
`;
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';
-const t0 = _template("<div></div>", true)
+"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)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
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 n0
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: v-if > basic v-if 1`] = `
-"import { setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+"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)
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.ok), () => {
const n2 = t0()
- _renderEffect(() => _setText(n2, _ctx.msg))
+ const x2 = _child(n2)
+ _renderEffect(() => _setText(x2, _toDisplayString(_ctx.msg)))
return n2
})
return n0
`;
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 t1 = _template("<!--foo-->")
const t2 = _template("<p></p>")
const t3 = _template("<!--bar-->")
const t4 = _template("fine")
-const t5 = _template("<input>")
+const t5 = _template("<div> </div>")
export function render(_ctx) {
const n13 = t5()
const n11 = t4()
return [n10, n11]
}))
- _renderEffect(() => _setText(n13, _ctx.text))
+ const x13 = _child(n13)
+ _renderEffect(() => _setText(x13, _toDisplayString(_ctx.text)))
return [n0, n13]
}"
`;
`;
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 t1 = _template("hello")
-const t2 = _template("<p></p>", true)
+const t2 = _template("<p> </p>", true)
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.ok), () => {
const n2 = t0()
const n3 = t1()
const n4 = t2()
- _renderEffect(() => _setText(n4, _ctx.msg))
+ const x4 = _child(n4)
+ _renderEffect(() => _setText(x4, _toDisplayString(_ctx.msg)))
return [n2, n3, n4]
})
return n0
`;
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)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n2 = t0()
const n1 = _child(n2)
- const n0 = _createTextNode([_ctx.msg, " "])
+ const n0 = _createTextNode(_toDisplayString(_ctx.msg) + " ")
_setClass(n1, _ctx.clz)
_prepend(n2, n0)
return n2
`;
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) {
const _component_Comp = _resolveComponent("Comp")
() => (_createForSlots(_ctx.list, (item) => ({
name: item,
fn: (_slotProps0) => {
- const n0 = _createTextNode(() => [_slotProps0["bar"]])
+ const n0 = _createTextNode()
+ _renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["bar"])))
return n0
}
})))
`;
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(" ")
export function render(_ctx) {
const n2 = t0()
const n1 = _createComponentWithFallback(_component_Inner, null, {
"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
}
})
- 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]
}
}, true)
`;
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) {
const _component_Comp = _resolveComponent("Comp")
() => ({
name: _ctx.named,
fn: (_slotProps0) => {
- const n0 = _createTextNode(() => [_slotProps0["foo"] + _ctx.bar])
+ const n0 = _createTextNode()
+ _renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["foo"] + _ctx.bar)))
return n0
}
})
`;
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) {
const _component_Comp = _resolveComponent("Comp")
const n1 = _createComponentWithFallback(_component_Comp, null, {
"named": (_slotProps0) => {
- const n0 = _createTextNode(() => [_slotProps0["foo"] + _ctx.bar])
+ const n0 = _createTextNode()
+ _renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["foo"] + _ctx.bar)))
return n0
}
}, true)
`;
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) {
const _component_Comp = _resolveComponent("Comp")
const n1 = _createComponentWithFallback(_component_Comp, null, {
"default": (_slotProps0) => {
- const n0 = _createTextNode(() => [_slotProps0["foo"] + _ctx.bar])
+ const n0 = _createTextNode()
+ _renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["foo"] + _ctx.bar)))
return n0
}
}, true)
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`v-text > should convert v-text to textContent 1`] = `
-"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+exports[`v-text > should convert v-text to setText 1`] = `
+"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<div> </div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
- _renderEffect(() => _setText(n0, _ctx.str))
+ const x0 = _child(n0)
+ _renderEffect(() => _setText(x0, _toDisplayString(_ctx.str)))
return n0
}"
`;
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';
-const t0 = _template("<div></div>", true)
+"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<div> </div>", true)
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setText(n0, _ctx.test))
+ const x0 = _child(n0)
+ _renderEffect(() => _setText(x0, _toDisplayString(_ctx.test)))
return n0
}"
`;
isStatic: false,
},
],
- effect: false,
},
])
})
{
type: IRNodeTypes.CREATE_TEXT_NODE,
id: 0,
- values: [
- {
- type: IRNodeTypes.SET_TEXT,
- content: 'msg',
- isStatic: false,
- },
- ],
- effect: true,
+ values: undefined,
},
])
+ expect(ir.block.effect.length).toBe(1)
})
})
expect(code).matchSnapshot()
expect(helpers).contains('createFor')
- expect(ir.template).toEqual(['<div></div>'])
+ expect(ir.template).toEqual(['<div> </div>'])
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.FOR,
`_createFor(() => (_for_item0.value), (_for_item1) => {`,
)
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([
{
type: IRNodeTypes.FOR,
expect(helpers).contains('createIf')
- expect(ir.template).toEqual(['<div></div>'])
+ expect(ir.template).toEqual(['<div> </div>'])
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.IF,
)
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.operation[0] as IfIRNode).positive.effect).toMatchObject([
{
<p v-else-if="orNot"/>
<!--bar-->
<template v-else>fine</template>
- <input v-text="text" />
+ <div v-text="text" />
`)
expect(code).matchSnapshot()
expect(ir.template).toEqual([
'<!--bar-->',
'fine',
- '<input>',
+ '<div> </div>',
])
})
isStatic: true,
},
],
- effect: false,
},
{
element: 1,
expect(code).toMatchSnapshot()
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).toMatchObject([
})
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>`, {
bindingMetadata: {
str: BindingTypes.SETUP_REF,
})
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([
{
])
// children should have been removed
- expect(ir.template).toEqual(['<div></div>'])
+ expect(ir.template).toEqual(['<div> </div>'])
expect(ir.block.effect).toMatchObject([
{
expect(code).matchSnapshot()
// 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', () => {
import { genIf } from './if'
import { genDynamicProps, genSetProp } from './prop'
import { genDeclareOldRef, genSetTemplateRef } from './templateRef'
-import { genCreateTextNode, genSetText } from './text'
+import { genCreateTextNode, genGetTextChild, genSetText } from './text'
import {
type CodeFragment,
INDENT_END,
return genSlotOutlet(oper, context)
case IRNodeTypes.DIRECTIVE:
return genBuiltinDirective(oper, context)
+ case IRNodeTypes.GET_TEXT_CHILD:
+ return genGetTextChild(oper, context)
default:
const exhaustiveCheck: never = oper
throw new Error(
const elementIndex = Number(index) + offset
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} = `)
if (prev) {
+import type { SimpleExpressionNode } from '@vue/compiler-dom'
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 {
- type CodeFragment,
- DELIMITERS_ARRAY,
- NEWLINE,
- genCall,
- genMulti,
-} from './utils'
+import { type CodeFragment, NEWLINE, genCall } from './utils'
export function genSetText(
oper: SetTextIRNode,
context: CodegenContext,
): CodeFragment[] {
const { helper } = context
- const { element, values } = oper
- const texts = values.map(value => genExpression(value, context))
- return [NEWLINE, ...genCall(helper('setText'), `n${element}`, ...texts)]
+ const { element, values, generated } = oper
+ const texts = combineValues(values, context)
+ return [
+ NEWLINE,
+ ...genCall(helper('setText'), `${generated ? 'x' : 'n'}${element}`, texts),
+ ]
}
export function genCreateTextNode(
context: CodegenContext,
): CodeFragment[] {
const { helper } = context
- const { id, values, effect } = oper
+ const { id, values } = oper
return [
NEWLINE,
`const n${id} = `,
- ...genCall(helper('createTextNode'), [
- effect && '() => ',
- ...genMulti(
- DELIMITERS_ARRAY,
- ...values.map(value => genExpression(value, context)),
- ),
- ]),
+ ...genCall(
+ helper('createTextNode'),
+ values && combineValues(values, 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})`,
]
}
IF,
FOR,
+
+ GET_TEXT_CHILD,
}
export interface BaseIRNode {
type: IRNodeTypes.SET_TEXT
element: number
values: SimpleExpressionNode[]
+ generated?: boolean // whether this is a generated empty text node by `processTextLikeContainer`
}
export type KeyOverride = [find: string, replacement: string]
export interface CreateTextNodeIRNode extends BaseIRNode {
type: IRNodeTypes.CREATE_TEXT_NODE
id: number
- values: SimpleExpressionNode[]
- effect: boolean
+ values?: SimpleExpressionNode[]
}
export interface InsertNodeIRNode extends BaseIRNode {
fallback?: BlockIRNode
}
+export interface GetTextChildIRNode extends BaseIRNode {
+ type: IRNodeTypes.GET_TEXT_CHILD
+ parent: number
+}
+
export type IRNode = OperationNode | RootIRNode
export type OperationNode =
| SetPropIRNode
| CreateComponentIRNode
| DeclareOldRefIRNode
| SlotOutletIRNode
+ | GetTextChildIRNode
export enum DynamicFlag {
NONE = 0,
import {
type AllNode,
type TransformOptions as BaseTransformOptions,
- BindingTypes,
type CommentNode,
type CompilerCompatOptions,
type ElementNode,
type TemplateChildNode,
defaultOnError,
defaultOnWarn,
- isConstantNode,
isVSlot,
} from '@vue/compiler-dom'
import { EMPTY_OBJ, NOOP, extend, isArray, isString } from '@vue/shared'
type RootIRNode,
type VaporDirectiveNode,
} from './ir'
-import { isConstantExpression } from './utils'
+import { isConstantExpression, isStaticExpression } from './utils'
import { newBlock, newDynamic } from './transforms/utils'
export type NodeTransform = (
}
}
}
-
-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)
- }
- })
-}
} from '@vue/compiler-dom'
import type { NodeTransform, TransformContext } from '../transform'
import { DynamicFlag, IRNodeTypes } from '../ir'
-import { getLiteralExpressionValue, isConstantExpression } from '../utils'
+import {
+ getLiteralExpressionValue,
+ isConstantExpression,
+ isStaticExpression,
+} from '../utils'
type TextLike = TextNode | InterpolationNode
const seen = new WeakMap<
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({
type: IRNodeTypes.CREATE_TEXT_NODE,
id,
- values,
- effect: !values.every(isConstantExpression) && !context.inVOnce,
+ values: isStatic ? values : undefined,
})
+ if (!isStatic) {
+ context.registerEffect(values, {
+ type: IRNodeTypes.SET_TEXT,
+ element: id,
+ values,
+ })
+ }
}
function processTextLikeContainer(
if (literals.every(l => l != null)) {
context.childrenTemplate = literals.map(l => String(l))
} else {
+ context.childrenTemplate = [' ']
+ context.registerOperation({
+ type: IRNodeTypes.GET_TEXT_CHILD,
+ parent: context.reference(),
+ })
context.registerEffect(values, {
type: IRNodeTypes.SET_TEXT,
element: context.reference(),
values,
+ // indicates this node is generated, so prefix should be "x" instead of "n"
+ generated: true,
})
}
}
import { EMPTY_EXPRESSION } from './utils'
import type { DirectiveTransform } from '../transform'
import { getLiteralExpressionValue } from '../utils'
+import { isVoidTag } from '../../../shared/src'
export const transformVText: DirectiveTransform = (dir, node, context) => {
let { exp, loc } = dir
context.childrenTemplate.length = 0
}
+ // v-text on void tags do nothing
+ if (isVoidTag(context.node.tag)) {
+ return
+ }
+
const literal = getLiteralExpressionValue(exp)
if (literal != null) {
context.childrenTemplate = [String(literal)]
} else {
+ context.childrenTemplate = [' ']
+ context.registerOperation({
+ type: IRNodeTypes.GET_TEXT_CHILD,
+ parent: context.reference(),
+ })
context.registerEffect([exp], {
type: IRNodeTypes.SET_TEXT,
element: context.reference(),
values: [exp],
+ generated: true,
})
}
}
import { isGloballyAllowed } from '@vue/shared'
import {
type AttributeNode,
+ BindingTypes,
type ElementNode,
NodeTypes,
type SimpleExpressionNode,
findDir as _findDir,
findProp as _findProp,
createSimpleExpression,
+ isConstantNode,
isLiteralWhitelisted,
} from '@vue/compiler-dom'
import type { VaporDirectiveNode } from './ir'
import { EMPTY_EXPRESSION } from './transforms/utils'
+import type { TransformContext } from './transform'
export const findProp = _findProp as (
node: ElementNode,
)
}
+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(
exp: SimpleExpressionNode,
): SimpleExpressionNode {
count: { default: 0 },
},
setup(props) {
- return createTextNode(() => [props.count])
+ return createTextNode(String(props.count))
},
})
count: { default: 0 },
},
setup(props) {
- return createTextNode(() => [props.count])
+ return createTextNode(String(props.count))
},
})
try {
inject('__proto__')
} catch (e: any) {}
- return createTextNode([`${foo},${bar}`])
+ return createTextNode(`${foo},${bar}`)
},
})
},
}).create()
- const FooBar = () => createTextNode(['foobar!'])
+ const FooBar = () => createTextNode('foobar!')
app.component('FooBar', 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(
'Component "BarBaz" has already been registered in target app.',
).toHaveBeenWarnedTimes(1)
writable: false,
})
- app.component('div', () => createTextNode(['div']))
+ app.component('div', () => createTextNode('div'))
mount()
expect(
`Do not use built-in or reserved HTML elements as component id: div`,
reactive,
readonly,
ref,
+ toDisplayString,
} from '@vue/runtime-dom'
import {
createComponent,
createTextNode,
createVaporApp,
renderEffect,
- setText,
} from '../src'
import { makeRender } from './_utils'
+import { setElementText } from '../src/dom/prop'
const define = makeRender<any>()
const foo = inject('foo')
return (() => {
const n0 = createTextNode()
- setText(n0, foo)
+ setElementText(n0, foo)
return n0
})()
},
const foo = inject(key)
return (() => {
const n0 = createTextNode()
- setText(n0, foo)
+ setElementText(n0, foo)
return n0
})()
},
const bar = inject('bar', 'bar')
return (() => {
const n0 = createTextNode()
- setText(n0, foo + bar)
+ setElementText(n0, foo + bar)
return n0
})()
},
const baz = inject('baz')
return (() => {
const n0 = createTextNode()
- setText(n0, [foo, bar, baz].join(','))
+ setElementText(n0, [foo, bar, baz].join(','))
return n0
})()
},
return (() => {
const n0 = createTextNode()
renderEffect(() => {
- setText(n0, count.value)
+ setElementText(n0, count.value)
})
return n0
})()
return (() => {
const n0 = createTextNode()
renderEffect(() => {
- setText(n0, count.value)
+ setElementText(n0, count.value)
})
return n0
})()
return (() => {
const n0 = createTextNode()
renderEffect(() => {
- setText(n0, state.count)
+ setElementText(n0, state.count)
})
return n0
})()
return (() => {
const n0 = createTextNode()
renderEffect(() => {
- setText(n0, state.count)
+ setElementText(n0, state.count)
})
return n0
})()
expect(foo).toBeUndefined()
return (() => {
const n0 = createTextNode()
- setText(n0, foo)
+ setElementText(n0, foo)
return n0
})()
},
const foo = inject('foo', undefined)
return (() => {
const n0 = createTextNode()
- setText(n0, foo)
+ setElementText(n0, foo)
return n0
})()
},
setup() {
provide('foo', 'foo')
const injection = inject('foo', null)
- return createTextNode(() => [injection])
+ return createTextNode(toDisplayString(injection))
},
}).render()
expect(host.innerHTML).toBe('')
createTextNode,
insert,
renderEffect,
- setText,
template,
} from '../src'
import { makeRender } from './_utils'
import { ITERATE_KEY } from '@vue/reactivity'
+import { setElementText } from '../src/dom/prop'
const define = makeRender<any>()
onBeforeUpdate(fn)
const n0 = createTextNode()
renderEffect(() => {
- setText(n0, count.value)
+ setElementText(n0, count.value)
})
return n0
},
const n0 = createTextNode()
renderEffect(() => {
renderSpy()
- setText(n0, count.value)
+ setElementText(n0, count.value)
})
return n0
},
const n0 = createTextNode()
renderEffect(() => {
- setText(n0, count.value)
+ setElementText(n0, count.value)
})
return n0
},
const t0 = template('<div></div>')
const n0 = t0()
- renderEffect(() => setText(n0, props.count))
+ renderEffect(() => setElementText(n0, props.count))
return n0
},
}
const n0 = createTextNode()
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
},
const n0 = createTextNode()
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
},
onUpdated(() => handleUpdated())
const n0 = createTextNode()
- renderEffect(() => setText(n0, count.value))
+ renderEffect(() => setElementText(n0, count.value))
const n1 = createComponent(Child, { count: () => count.value })
return [n0, n1]
},
const props = currentInstance!.props
const n2 = createTextNode()
- renderEffect(() => setText(n2, props.count))
+ renderEffect(() => setElementText(n2, props.count))
return n2
},
}
onUpdated(() => handleUpdated())
const n0 = createTextNode()
- renderEffect(() => setText(n0, count.value))
+ renderEffect(() => setElementText(n0, count.value))
const n1 = createComponent(Child, { count: () => count.value })
return [n0, n1]
},
update = () => count.value++
const n2 = createTextNode()
- renderEffect(() => setText(n2, count.value))
+ renderEffect(() => setElementText(n2, count.value))
return n2
},
}
insert,
renderEffect,
setDynamicProps,
+ setText,
template,
} from '../src'
import { nextTick, reactive, ref, watchEffect } from '@vue/runtime-dom'
}
},
render(ctx) {
- return createTextNode([`${ctx.ref} ${ctx.object.msg} ${ctx.value}`])
+ return createTextNode(`${ctx.ref} ${ctx.object.msg} ${ctx.value}`)
},
}).render()
expect(html()).toMatch(`foo bar baz`)
it('should support returning render function', () => {
const { html } = define({
setup() {
- return createTextNode([`hello`])
+ return createTextNode(`hello`)
},
}).render()
expect(html()).toMatch(`hello`)
watchEffect(() => {
dummy = props.count
})
- return createTextNode(() => [props.count])
+ const n = createTextNode()
+ renderEffect(() => {
+ setText(n, props.count)
+ })
+ return n
},
})
$: [
() => ({
name: 'foo',
- fn: () => createTextNode(() => [id.value]),
+ fn: () => {
+ const n = createTextNode()
+ renderEffect(() => setText(n, id.value))
+ return n
+ },
}),
() => ({
name: 'bar',
- fn: () => createTextNode(['bar']),
+ fn: () => createTextNode('bar'),
}),
],
})
delegate(n0, 'click', () => {
emit('inc', props.count + 1)
})
- insert(
- createTextNode(() => [props.count]),
- n0,
- )
+ const n = createTextNode()
+ renderEffect(() => setText(n, props.count))
+ insert(n, n0)
return n0
},
})
createIf,
createTextNode,
renderEffect,
- setText,
template,
} from '../src'
import { makeRender } from './_utils'
import type { VaporComponentInstance } from '../src/component'
+import { setElementText, setText } from '../src/dom/prop'
const define = makeRender()
const n = inject<Ref<number>>('foo')!
n.value++
const n0 = template('<div></div>')()
- renderEffect(() => setText(n0, n.value))
+ renderEffect(() => setElementText(n0, n.value))
return n0
},
})
const n = ref(0)
provide('foo', n)
const n0 = template('<div></div>')()
- renderEffect(() => setText(n0, n.value))
+ renderEffect(() => setElementText(n0, n.value))
return [n0, createComponent(Child)]
},
}).render()
val => emit('update', val),
)
const n0 = template('<div></div>')()
- renderEffect(() => setText(n0, props.value))
+ renderEffect(() => setElementText(n0, props.value))
return n0
},
})
setup() {
const inner = ref(0)
const n0 = template('<div></div>')()
- renderEffect(() => setText(n0, inner.value))
+ renderEffect(() => setElementText(n0, inner.value))
const n1 = createComponent(Child, {
value: () => outer.value,
onUpdate: () => (val: number) => (inner.value = val),
props: ['count'],
setup(props: any) {
onUpdated(() => calls.push('update child'))
- return createTextNode(() => [`${props.count} - ${a.value}`])
+ const n = createTextNode()
+ renderEffect(() => {
+ setText(n, `${props.count} - ${a.value}`)
+ })
+ return n
},
})
props: ['count'],
setup(props: any) {
onUpdated(() => calls.push('update parent'))
- const n1 = createTextNode(() => [
- `${globalCount.value} - ${props.count}`,
- ])
+ const n1 = createTextNode()
const n2 = createComponent(Child, { count: () => parentCount.value })
+ renderEffect(() => {
+ setText(n1, `${globalCount.value} - ${props.count}`)
+ })
return [n1, n2]
},
})
const n1 = template('<h1></h1>')()
renderEffect(() => {
spy()
- setText(n1, props.text)
+ setElementText(n1, props.text)
})
return n1
},
const t0 = template('<div></div>')
const n0 = t0()
watchEffect(() => {
- setText(n0, count.value)
+ setElementText(n0, count.value)
})
renderEffect(() => {})
return n0
setDynamicProps,
setProp,
setStyle,
- setText,
template,
} from '../src'
import { makeRender } from './_utils'
import { stringifyStyle } from '@vue/shared'
+import { setElementText } from '../src/dom/prop'
const define = makeRender<any>()
props: ['foo'],
setup(props: any) {
const n0 = t0() as Element
- renderEffect(() => setText(n0, props.foo))
+ renderEffect(() => setElementText(n0, props.foo))
return n0
},
})
inheritAttrs: false,
setup(props: any) {
const n0 = t0() as Element
- renderEffect(() => setText(n0, props.foo))
+ renderEffect(() => setElementText(n0, props.foo))
return n0
},
})
props: ['custom-attr'],
setup(_: any, { attrs }: any) {
const n0 = t0() as Element
- renderEffect(() => setText(n0, attrs.foo))
+ renderEffect(() => setElementText(n0, attrs.foo))
return n0
},
})
createComponent,
defineVaporComponent,
renderEffect,
- setText,
template,
} from '../src'
import { makeRender } from './_utils'
+import { setElementText } from '../src/dom/prop'
const define = makeRender<any>()
props: ['foo'],
setup(props: any) {
const n0 = t0()
- renderEffect(() => setText(n0, props.foo))
+ renderEffect(() => setElementText(n0, props.foo))
return n0
},
})
},
setup(props: any) {
const n0 = t0()
- renderEffect(() => setText(n0, props.foo))
+ renderEffect(() => setElementText(n0, props.foo))
return n0
},
}).render({
const t0 = template('<h1></h1>')
const n0 = t0()
renderEffect(() => {
- setText(n0, props.foo.val, props.bar)
+ setElementText(n0, String(props.foo.val) + String(props.bar))
})
return n0
},
const t0 = template('<div></div>')
const n0 = t0()
renderEffect(() =>
- setText(n0, JSON.stringify(attrs) + Object.keys(attrs)),
+ setElementText(n0, JSON.stringify(attrs) + Object.keys(attrs)),
)
return n0
},
insert,
prepend,
renderEffect,
- setText,
template,
} from '../src'
import { currentInstance, nextTick, ref } from '@vue/runtime-dom'
import { makeRender } from './_utils'
import type { DynamicSlot } from '../src/componentSlots'
+import { setElementText } from '../src/dom/prop'
const define = makeRender<any>()
header: props => {
const el = template('<h1></h1>')()
renderEffect(() => {
- setText(el, props.title)
+ setElementText(el, props.title)
})
return el
},
fn: (props: any) => {
const el = template('<h1></h1>')()
renderEffect(() => {
- setText(el, props.title)
+ setElementText(el, props.title)
})
return el
},
setAttr,
setClass,
setDynamicProps,
+ setElementText,
setHtml,
setProp,
setText,
} from '../../src/dom/prop'
import { setStyle } from '../../src/dom/prop'
import { VaporComponentInstance } from '../../src/component'
-import { currentInstance, simpleSetCurrentInstance } from '@vue/runtime-dom'
+import {
+ currentInstance,
+ ref,
+ simpleSetCurrentInstance,
+} from '@vue/runtime-dom'
let removeComponentInstance = NOOP
beforeEach(() => {
expect((el as any)._value).toBe(obj)
const option = document.createElement('option')
- setText(option, 'foo')
+ setElementText(option, 'foo')
expect(option.value).toBe('foo')
expect(option.getAttribute('value')).toBe(null)
})
describe('setText', () => {
- test('should set textContent', () => {
- const el = document.createElement('div')
- setText(el, null)
+ test('should set nodeValue', () => {
+ const el = document.createTextNode('foo')
+ setText(el, '')
expect(el.textContent).toBe('')
setText(el, 'foo')
expect(el.textContent).toBe('foo')
})
})
+ 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', () => {
test('should set innerHTML', () => {
const el = document.createElement('div')
createTemplateRefSetter,
insert,
renderEffect,
- setText,
template,
} from '../../src'
import { makeRender } from '../_utils'
useTemplateRef,
watchEffect,
} from '@vue/runtime-dom'
+import { setElementText } from '../../src/dom/prop'
const define = makeRender()
const n0 = t0()
createTemplateRefSetter()(n0 as Element, el)
renderEffect(() => {
- setText(n0, el.value && el.value.getAttribute('id'))
+ setElementText(n0, el.value && el.value.getAttribute('id'))
})
return n0
},
true,
)
renderEffect(() => {
- setText(n1, item)
+ setElementText(n1, item)
})
return n1
},
true,
)
renderEffect(() => {
- setText(n1, item)
+ setElementText(n1, item)
})
return n1
},
true,
)
renderEffect(() => {
- setText(n4, item)
+ setElementText(n4, item)
})
return n4
},
)
insert(n3, n2 as unknown as ParentNode)
renderEffect(() => {
- setText(n1!, String(listRefs.value))
+ setElementText(n1!, String(listRefs.value))
})
return n0
},
createIf,
insert,
renderEffect,
- setText,
template,
// @ts-expect-error
withDirectives,
import type { Mock } from 'vitest'
import { makeRender } from './_utils'
import { unmountComponent } from '../src/component'
+import { setElementText } from '../src/dom/prop'
const define = makeRender()
(spyIfFn ||= vi.fn(() => {
const n2 = t1()
renderEffect(() => {
- setText(n2, count.value)
+ setElementText(n2, count.value)
})
return n2
})),
-import { isArray } from '@vue/shared'
-import { renderEffect } from '../renderEffect'
-import { setText } from './prop'
-
-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__ */
+export function createTextNode(value = ''): Text {
+ return document.createTextNode(value)
}
/*! #__NO_SIDE_EFFECTS__ */
}
}
-export function setText(el: Node & { $txt?: string }, ...values: any[]): void {
- const value =
- values.length > 1
- ? values.map(toDisplayString).join('')
- : toDisplayString(values[0])
+/**
+ * Only called on text nodes!
+ * Compiler should also ensure value passed here is already converted by
+ * `toDisplayString`
+ */
+export function setText(el: Text & { $txt?: string }, value: string): void {
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
}
}
if (key === 'innerHTML') {
setHtml(el, value)
} else if (key === 'textContent') {
- setText(el, value)
+ setElementText(el, value)
} else if (key === 'value' && canSetValueDirectly(el.tagName)) {
setValue(el, value)
} else {
projects / thirdparty / vuejs / core.git / commitdiff
