exports[`compile > bindings 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > custom directive > basic 1`] = `
"import { resolveDirective as _resolveDirective, withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const _directive_test = _resolveDirective("test")
exports[`compile > directives > custom directive > basic 1`] = `
"import { withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > directives > custom directive > binding value 1`] = `
"import { withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > directives > custom directive > dynamic parameters 1`] = `
"import { withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > directives > custom directive > modifiers 1`] = `
"import { withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > directives > custom directive > modifiers w/o binding 1`] = `
"import { withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > directives > custom directive > static parameters 1`] = `
"import { withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > directives > custom directive > static parameters and modifiers 1`] = `
"import { withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > directives > v-cloak > basic 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<div>test</div>")
+const t0 = _template("<div>test</div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compile > directives > v-pre > basic 1`] = `
"import { 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>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > dynamic root nodes and interpolation 1`] = `
"import { delegate as _delegate, setText as _setText, setProp as _setProp, renderEffect as _renderEffect, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<button></button>")
+const t0 = _template("<button></button>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`compile > static template 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<div><p>hello</p><input><span></span></div>")
+const t0 = _template("<div><p>hello</p><input><span></span></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: children transform > children & sibling references 1`] = `
"import { 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>")
+const t0 = _template("<div><p></p> <!><p></p></div>", true)
export function render(_ctx) {
const n4 = t0()
exports[`compiler: element transform > props + children 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<div id=\\"foo\\"><span></span></div>")
+const t0 = _template("<div id=\\"foo\\"><span></span></div>", true)
export function render(_ctx) {
const n0 = t0()
`;
exports[`compiler: element transform > props merging: class 1`] = `
-"import { setClassIncremental as _setClassIncremental, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+"import { setClass as _setClass, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setClassIncremental(n0, ["foo", { bar: _ctx.isBar }]))
+ _renderEffect(() => _setClass(n0, ["foo", { bar: _ctx.isBar }]))
return n0
}"
`;
exports[`compiler: element transform > props merging: event handlers 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx) {
`;
exports[`compiler: element transform > props merging: style 1`] = `
-"import { setStyleIncremental as _setStyleIncremental, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+"import { setStyle as _setStyle, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setStyleIncremental(n0, ["color: green", { color: 'red' }]))
+ _renderEffect(() => _setStyle(n0, ["color: green", { color: 'red' }]))
return n0
}"
`;
exports[`compiler: element transform > static props 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<div id=\\"foo\\" class=\\"bar\\"></div>")
+const t0 = _template("<div id=\\"foo\\" class=\\"bar\\"></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: element transform > v-bind="obj" 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: element transform > v-bind="obj" after static prop 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: element transform > v-bind="obj" before static prop 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: element transform > v-bind="obj" between static props 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: element transform > v-on="obj" 1`] = `
"import { setDynamicEvents as _setDynamicEvents, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: transform <slot> outlets > default slot outlet with fallback 1`] = `
"import { createSlot as _createSlot, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createSlot("default", null, () => {
exports[`compiler: transform <slot> outlets > default slot outlet with props & fallback 1`] = `
"import { createSlot as _createSlot, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createSlot("default", { foo: () => (_ctx.bar) }, () => {
exports[`compiler: transform <slot> outlets > named slot outlet with fallback 1`] = `
"import { createSlot as _createSlot, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createSlot("foo", null, () => {
exports[`compiler: transform <slot> outlets > named slot outlet with props & fallback 1`] = `
"import { createSlot as _createSlot, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createSlot("foo", { foo: () => (_ctx.bar) }, () => {
exports[`compiler: template ref transform > dynamic ref 1`] = `
"import { createTemplateRefSetter as _createTemplateRefSetter, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const _setTemplateRef = _createTemplateRefSetter()
exports[`compiler: template ref transform > ref + v-for 1`] = `
"import { createTemplateRefSetter as _createTemplateRefSetter, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const _setTemplateRef = _createTemplateRefSetter()
exports[`compiler: template ref transform > ref + v-if 1`] = `
"import { createTemplateRefSetter as _createTemplateRefSetter, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const _setTemplateRef = _createTemplateRefSetter()
exports[`compiler: template ref transform > static ref 1`] = `
"import { createTemplateRefSetter as _createTemplateRefSetter, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const _setTemplateRef = _createTemplateRefSetter()
exports[`compiler v-bind > .attr modifier 1`] = `
"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .attr modifier w/ innerHTML 1`] = `
"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .attr modifier w/ no expression 1`] = `
"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .attr modifier w/ progress value 1`] = `
"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<progress></progress>")
+const t0 = _template("<progress></progress>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .attr modifier w/ textContent 1`] = `
"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .attr modifier w/ value 1`] = `
"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .camel modifier 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .camel modifier w/ dynamic arg 1`] = `
"import { camelize as _camelize, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .camel modifier w/ no expression 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier (shorthand) 1`] = `
"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier (shorthand) w/ innerHTML 1`] = `
"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier (shorthand) w/ no expression 1`] = `
"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier (shorthand) w/ progress value 1`] = `
"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<progress></progress>")
+const t0 = _template("<progress></progress>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier (shorthand) w/ textContent 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier (shorthand) w/ value 1`] = `
"import { setValue as _setValue, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier 1`] = `
"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier w/ dynamic arg 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier w/ innerHTML 1`] = `
"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier w/ no expression 1`] = `
"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier w/ progress value 1`] = `
"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<progress></progress>")
+const t0 = _template("<progress></progress>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier w/ textContent 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier w/ value 1`] = `
"import { setValue as _setValue, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > :innerHTML 1`] = `
"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > :textContext 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > :value 1`] = `
"import { setValue as _setValue, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<input>")
+const t0 = _template("<input>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > :value w/ progress 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<progress></progress>")
+const t0 = _template("<progress></progress>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > basic 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > dynamic arg 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > dynamic arg w/ static attribute 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > no expression (shorthand) 1`] = `
"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > no expression 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > should error if empty expression 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<div arg></div>")
+const t0 = _template("<div arg></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: v-for > array de-structured value 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, withDestructure as _withDestructure, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), _withDestructure(([[id, ...other], index]) => [id, other, index], (_ctx0) => {
exports[`compiler: v-for > basic v-for 1`] = `
"import { delegate as _delegate, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`compiler: v-for > function params w/ prefixIdentifiers: false 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createFor(() => (items), ([item, __, k]) => {
exports[`compiler: v-for > multi effect 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
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>")
-const t1 = _template("<div></div>")
+const t1 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
exports[`compiler: v-for > object de-structured value 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, withDestructure as _withDestructure, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), _withDestructure(([{ id, ...other }, index]) => [id, other, index], (_ctx0) => {
exports[`compiler: v-for > v-for aliases w/ complex expressions 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, withDestructure as _withDestructure, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), _withDestructure(([{ foo = bar, baz: [qux = quux] }]) => [foo, qux], (_ctx0) => {
exports[`compiler: v-for > w/o value 1`] = `
"import { createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div>item</div>")
+const t0 = _template("<div>item</div>", true)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
exports[`v-html > should convert v-html to innerHTML 1`] = `
"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`v-html > should raise error and ignore children when v-html is present 1`] = `
"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-html > should raise error if has no expression 1`] = `
"import { setHtml as _setHtml, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
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>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.ok), () => {
"import { 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>")
+const t2 = _template("<p></p>", true)
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.ok), () => {
exports[`compiler: vModel transform > modifiers > .lazy 1`] = `
"import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input>")
+const t0 = _template("<input>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: vModel transform > modifiers > .number 1`] = `
"import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input>")
+const t0 = _template("<input>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: vModel transform > modifiers > .trim 1`] = `
"import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input>")
+const t0 = _template("<input>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: vModel transform > should support input (checkbox) 1`] = `
"import { vModelCheckbox as _vModelCheckbox, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input type=\\"checkbox\\">")
+const t0 = _template("<input type=\\"checkbox\\">", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: vModel transform > should support input (dynamic type) 1`] = `
"import { vModelDynamic as _vModelDynamic, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input>")
+const t0 = _template("<input>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: vModel transform > should support input (radio) 1`] = `
"import { vModelRadio as _vModelRadio, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input type=\\"radio\\">")
+const t0 = _template("<input type=\\"radio\\">", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: vModel transform > should support input (text) 1`] = `
"import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input type=\\"text\\">")
+const t0 = _template("<input type=\\"text\\">", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: vModel transform > should support select 1`] = `
"import { vModelSelect as _vModelSelect, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<select></select>")
+const t0 = _template("<select></select>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: vModel transform > should support simple expression 1`] = `
"import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input>")
+const t0 = _template("<input>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: vModel transform > should support textarea 1`] = `
"import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<textarea></textarea>")
+const t0 = _template("<textarea></textarea>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: vModel transform > should support w/ dynamic v-bind 1`] = `
"import { vModelDynamic as _vModelDynamic, withDirectives as _withDirectives, delegate as _delegate, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<input>")
+const t0 = _template("<input>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: vModel transform > should support w/ dynamic v-bind 2`] = `
"import { vModelDynamic as _vModelDynamic, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input>")
+const t0 = _template("<input>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > complex member expression w/ prefixIdentifiers: true 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > dynamic arg 1`] = `
"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > dynamic arg with complex exp prefixing 1`] = `
"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > dynamic arg with prefixing 1`] = `
"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > function expression w/ prefixIdentifiers: true 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > inline statement w/ prefixIdentifiers: true 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > multiple inline statements w/ prefixIdentifiers: true 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should NOT add a prefix to $event if the expression is a function expression 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should NOT wrap as function if expression is already function expression (with Typescript) 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should NOT wrap as function if expression is already function expression (with newlines) 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should NOT wrap as function if expression is already function expression 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should NOT wrap as function if expression is complex member expression 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should delegate event 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should handle multi-line statement 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should handle multiple inline statement 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should not prefix member expression 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should not wrap keys guard if no key modifier is present 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("keyup")
export function render(_ctx) {
exports[`v-on > should support multiple events and modifiers options w/ prefixIdentifiers: true 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click", "keyup")
export function render(_ctx) {
exports[`v-on > should support multiple modifiers and event options w/ prefixIdentifiers: true 1`] = `
"import { on as _on, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > should transform click.middle 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("mouseup")
export function render(_ctx) {
exports[`v-on > should transform click.middle 2`] = `
"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > should transform click.right 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("contextmenu")
export function render(_ctx) {
exports[`v-on > should transform click.right 2`] = `
"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > should wrap as function if expression is inline statement 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should wrap both for dynamic key event w/ left/right modifiers 1`] = `
"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > should wrap keys guard for keyboard events or dynamic events 1`] = `
"import { on as _on, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > should wrap keys guard for static key event w/ left/right modifiers 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("keyup")
export function render(_ctx) {
exports[`v-on > simple expression 1`] = `
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
_delegateEvents("click")
export function render(_ctx, $props, $emit, $attrs, $slots) {
exports[`compiler: v-once > as root node 1`] = `
"import { setProp as _setProp, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: v-once > basic 1`] = `
"import { createTextNode as _createTextNode, setClass as _setClass, prepend as _prepend, template as _template } from 'vue';
-const t0 = _template("<div><span></span></div>")
+const t0 = _template("<div><span></span></div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n2 = t0()
exports[`compiler: v-once > inside v-once 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<div><div></div></div>")
+const t0 = _template("<div><div></div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: v-once > on component 1`] = `
"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, insert as _insert, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
exports[`compiler: v-once > on nested plain element 1`] = `
"import { setProp as _setProp, template as _template } from 'vue';
-const t0 = _template("<div><div></div></div>")
+const t0 = _template("<div><div></div></div>", true)
export function render(_ctx) {
const n1 = t0()
exports[`compiler: v-once > with v-for 1`] = `
"import { createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
exports[`compiler: v-once > with v-if 1`] = `
"import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.expr), () => {
exports[`compiler: v-show transform > simple expression 1`] = `
"import { vShow as _vShow, withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
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>")
+const t0 = _template("<div></div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
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>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-text > should raise error if has no expression 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
export function render(_ctx) {
const n0 = t0()
expect(code).matchSnapshot()
// children should have been removed
- expect(code).contains('template("<div></div>")')
+ expect(code).contains('template("<div></div>", true)')
})
test('should raise error if has no expression', () => {
expect(code).matchSnapshot()
// children should have been removed
- expect(code).contains('template("<div></div>")')
+ expect(code).contains('template("<div></div>", true)')
})
test('should raise error if has no expression', () => {
}
const delegates = genDelegates(context)
- const templates = genTemplates(ir.template, context)
+ const templates = genTemplates(ir.template, ir.rootTemplateIndex, context)
const imports = genHelperImports(context)
const preamble = imports + templates + delegates
setText: { name: 'setText' },
setHtml: { name: 'setHtml' },
setClass: { name: 'setClass' },
- setClassIncremental: { name: 'setClassIncremental' },
setStyle: { name: 'setStyle' },
- setStyleIncremental: { name: 'setStyleIncremental' },
setValue: { name: 'setValue' },
setAttr: { name: 'setAttr', needKey: true },
setProp: { name: 'setProp', needKey: true },
setDOMProp: { name: 'setDOMProp', needKey: true },
- setDynamicProps: { name: 'setDynamicProps', acceptRoot: true },
+ setDynamicProps: { name: 'setDynamicProps' },
} as const satisfies Partial<Record<VaporHelper, HelperConfig>>
// only the static key prop will reach here
const {
prop: { key, values, modifier },
tag,
- root,
} = oper
- const resolvedHelper = getRuntimeHelper(tag, key.content, modifier, root)
+ const resolvedHelper = getRuntimeHelper(tag, key.content, modifier)
const propValue = genPropValue(values, context)
return [
NEWLINE,
`n${oper.element}`,
resolvedHelper.needKey ? genExpression(key, context) : false,
propValue,
- root && resolvedHelper.acceptRoot ? 'true' : undefined,
),
]
}
tag: string,
key: string,
modifier: '.' | '^' | undefined,
- root: boolean,
): HelperConfig {
const tagName = tag.toUpperCase()
if (modifier) {
if (modifier === '.') {
- return getSpecialHelper(key, tagName, root) || helpers.setDOMProp
+ return getSpecialHelper(key, tagName) || helpers.setDOMProp
} else {
return helpers.setAttr
}
}
// 1. special handling for value / style / class / textContent / innerHTML
- const helper = getSpecialHelper(key, tagName, root)
+ const helper = getSpecialHelper(key, tagName)
if (helper) {
return helper
}
function getSpecialHelper(
keyName: string,
tagName: string,
- root: boolean,
): HelperConfig | undefined {
// special case for 'value' property
if (keyName === 'value' && canSetValueDirectly(tagName)) {
return helpers.setValue
- }
-
- if (root) {
- if (keyName === 'class') {
- return helpers.setClassIncremental
- } else if (keyName === 'style') {
- return helpers.setStyleIncremental
- }
- }
-
- if (keyName === 'class') {
+ } else if (keyName === 'class') {
return helpers.setClass
} else if (keyName === 'style') {
return helpers.setStyle
export function genTemplates(
templates: string[],
+ rootIndex: number | undefined,
{ helper }: CodegenContext,
): string {
return templates
.map(
(template, i) =>
- `const t${i} = ${helper('template')}(${JSON.stringify(template)})\n`,
+ `const t${i} = ${helper('template')}(${JSON.stringify(
+ template,
+ )}${i === rootIndex ? ', true' : ''})\n`,
)
.join('')
}
node: RootNode
source: string
template: string[]
+ rootTemplateIndex?: number
component: Set<string>
directive: Set<string>
block: BlockIRNode
template += `</${tag}>`
}
+ if (singleRoot) {
+ context.ir.rootTemplateIndex = context.ir.template.length
+ }
+
if (
context.parent &&
context.parent.node.type === NodeTypes.ELEMENT &&
-import { type Ref, nextTick, ref, watchEffect } from '@vue/runtime-dom'
+import { type Ref, nextTick, ref } from '@vue/runtime-dom'
import {
createComponent,
defineVaporComponent,
renderEffect,
- setClassIncremental,
- setStyleIncremental,
+ setClass,
+ setDynamicProps,
+ setProp,
+ setStyle,
setText,
template,
} from '../src'
describe('attribute fallthrough', () => {
it('should allow attrs to fallthrough', async () => {
- const t0 = template('<div>')
+ const t0 = template('<div>', true)
const { component: Child } = define({
props: ['foo'],
setup(props: any) {
const n0 = t0() as Element
- watchEffect(() => setText(n0, props.foo))
+ renderEffect(() => setText(n0, props.foo))
return n0
},
})
})
it('should not fallthrough if explicitly pass inheritAttrs: false', async () => {
- const t0 = template('<div>')
+ const t0 = template('<div>', true)
const { component: Child } = define({
props: ['foo'],
inheritAttrs: false,
setup(props: any) {
const n0 = t0() as Element
- watchEffect(() => setText(n0, props.foo))
+ renderEffect(() => setText(n0, props.foo))
return n0
},
})
})
it('should pass through attrs in nested single root components', async () => {
- const t0 = template('<div>')
+ const t0 = template('<div>', true)
const { component: Grandson } = define({
props: ['custom-attr'],
setup(_: any, { attrs }: any) {
const n0 = t0() as Element
- watchEffect(() => setText(n0, attrs.foo))
+ renderEffect(() => setText(n0, attrs.foo))
return n0
},
})
const parentClass = ref('parent')
const childClass = ref('child')
+ const t0 = template('<div>', true /* root */)
const Child = defineVaporComponent({
setup() {
- const n = document.createElement('div')
+ const n = t0() as Element
renderEffect(() => {
// binding on template root generates incremental class setter
- setClassIncremental(n, childClass.value)
+ setClass(n, childClass.value)
})
return n
},
const parentStyle: Ref<string | null> = ref('font-size:12px')
const childStyle = ref('font-weight:bold')
+ const t0 = template('<div>', true /* root */)
const Child = defineVaporComponent({
setup() {
- const n = document.createElement('div')
+ const n = t0() as Element
renderEffect(() => {
// binding on template root generates incremental class setter
- setStyleIncremental(n, childStyle.value)
+ setStyle(n, childStyle.value)
})
return n
},
assertStyles()
expect(getCSS()).not.toContain('font-size:bold')
})
+
+ test('parent value should take priority', async () => {
+ const parentVal = ref('parent')
+ const childVal = ref('child')
+
+ const t0 = template('<div>', true /* root */)
+ const Child = defineVaporComponent({
+ setup() {
+ const n = t0()
+ renderEffect(() => {
+ // prop bindings on template root generates extra `root: true` flag
+ setProp(n, 'id', childVal.value)
+ setProp(n, 'aria-x', childVal.value)
+ setDynamicProps(n, [{ 'aria-y': childVal.value }])
+ })
+ return n
+ },
+ })
+
+ const { host } = define({
+ setup() {
+ return createComponent(Child, {
+ id: () => parentVal.value,
+ 'aria-x': () => parentVal.value,
+ 'aria-y': () => parentVal.value,
+ })
+ },
+ }).render()
+
+ const el = host.children[0]
+ expect(el.id).toBe(parentVal.value)
+ expect(el.getAttribute('aria-x')).toBe(parentVal.value)
+ expect(el.getAttribute('aria-y')).toBe(parentVal.value)
+
+ childVal.value = 'child1'
+ await nextTick()
+ expect(el.id).toBe(parentVal.value)
+ expect(el.getAttribute('aria-x')).toBe(parentVal.value)
+ expect(el.getAttribute('aria-y')).toBe(parentVal.value)
+
+ parentVal.value = 'parent1'
+ await nextTick()
+ expect(el.id).toBe(parentVal.value)
+ expect(el.getAttribute('aria-x')).toBe(parentVal.value)
+ expect(el.getAttribute('aria-y')).toBe(parentVal.value)
+ })
})
expect(root2).not.toBe(root)
})
+ test('create root element', () => {
+ const t = template('<div>', true)
+ const root = t()
+ expect(root.$root).toBe(true)
+ })
+
test('children', () => {
const t = template('<div><span><b>nested</b></span><p></p></div>')
const root = t()
Object.keys(instance.attrs).length
) {
renderEffect(() => {
- setDynamicProps(
- instance.block as Element,
- [instance.attrs],
- true, // root
- true, // fallthrough
- )
+ isApplyingFallthroughProps = true
+ setDynamicProps(instance.block as Element, [instance.attrs])
+ isApplyingFallthroughProps = false
})
}
return instance
}
+export let isApplyingFallthroughProps = false
+
/**
* dev only
*/
// eslint-disable-next-line no-restricted-globals
const el = document.createElement(comp)
+ // mark single root
+ ;(el as any).$root = isSingleRoot
if (rawProps) {
renderEffect(() => {
- setDynamicProps(el, [resolveDynamicProps(rawProps)], isSingleRoot)
+ setDynamicProps(el, [resolveDynamicProps(rawProps)])
})
}
toDisplayString,
} from '@vue/shared'
import { on } from './event'
-import { mergeProps, patchStyle, shouldSetAsProp, warn } from '@vue/runtime-dom'
+import {
+ currentInstance,
+ mergeProps,
+ patchStyle,
+ shouldSetAsProp,
+ warn,
+} from '@vue/runtime-dom'
+import {
+ type VaporComponentInstance,
+ isApplyingFallthroughProps,
+} from '../component'
type TargetElement = Element & {
+ $root?: true
$html?: string
$cls?: string
$sty?: NormalizedStyle | string | undefined
+ value?: string
+ _value?: any
}
-export function setText(el: Node & { $txt?: string }, ...values: any[]): void {
- const value =
- values.length > 1
- ? values.map(toDisplayString).join('')
- : toDisplayString(values[0])
- if (el.$txt !== value) {
- el.textContent = el.$txt = value
+const hasFallthroughKey = (key: string) =>
+ (currentInstance as VaporComponentInstance).hasFallthrough &&
+ key in currentInstance!.attrs
+
+export function setProp(el: any, key: string, value: any): void {
+ if (key in el) {
+ setDOMProp(el, key, value)
+ } else {
+ setAttr(el, key, value)
}
}
-export function setHtml(el: TargetElement, value: any): void {
- value = value == null ? '' : value
- if (el.$html !== value) {
- el.innerHTML = el.$html = value
+export function setAttr(el: any, key: string, value: any): void {
+ if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
+ return
+ }
+
+ if (value !== el[`$${key}`]) {
+ el[`$${key}`] = value
+ if (value != null) {
+ el.setAttribute(key, value)
+ } else {
+ el.removeAttribute(key)
+ }
}
}
+export function setDOMProp(el: any, key: string, value: any): void {
+ if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
+ return
+ }
+
+ const prev = el[key]
+ if (value === prev) {
+ return
+ }
+
+ let needRemove = false
+ if (value === '' || value == null) {
+ const type = typeof prev
+ if (value == null && type === 'string') {
+ // e.g. <div :id="null">
+ value = ''
+ needRemove = true
+ } else if (type === 'number') {
+ // e.g. <img :width="null">
+ value = 0
+ needRemove = true
+ }
+ }
+
+ // some properties perform value validation and throw,
+ // some properties has getter, no setter, will error in 'use strict'
+ // eg. <select :type="null"></select> <select :willValidate="null"></select>
+ try {
+ el[key] = value
+ } catch (e: any) {
+ // do not warn if value is auto-coerced from nullish values
+ if (__DEV__ && !needRemove) {
+ warn(
+ `Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: ` +
+ `value ${value} is invalid.`,
+ e,
+ )
+ }
+ }
+ needRemove && el.removeAttribute(key)
+}
+
export function setClass(el: TargetElement, value: any): void {
- if ((value = normalizeClass(value)) !== el.$cls) {
+ if (el.$root) {
+ setClassIncremental(el, value)
+ } else if ((value = normalizeClass(value)) !== el.$cls) {
el.className = el.$cls = value
}
}
-/**
- * A version of setClass that does not overwrite pre-existing classes.
- * Used on single root elements so it can patch class independent of fallthrough
- * attributes.
- */
-export function setClassIncremental(
- el: any,
- value: any,
- fallthrough?: boolean,
-): void {
- const cacheKey = `$clsi${fallthrough ? '$' : ''}`
+function setClassIncremental(el: any, value: any): void {
+ const cacheKey = `$clsi${isApplyingFallthroughProps ? '$' : ''}`
const prev = el[cacheKey]
if ((value = el[cacheKey] = normalizeClass(value)) !== prev) {
const nextList = value.split(/\s+/)
}
export function setStyle(el: TargetElement, value: any): void {
- const prev = el.$sty
- value = el.$sty = normalizeStyle(value)
- patchStyle(el, prev, value)
+ if (el.$root) {
+ setStyleIncremental(el, value)
+ } else {
+ const prev = el.$sty
+ value = el.$sty = normalizeStyle(value)
+ patchStyle(el, prev, value)
+ }
}
-/**
- * A version of setStyle that does not overwrite pre-existing styles.
- * Used on single root elements so it can patch class independent of fallthrough
- * attributes.
- */
-export function setStyleIncremental(
- el: any,
- value: any,
- fallthrough?: boolean,
-): NormalizedStyle | undefined {
- const cacheKey = `$styi${fallthrough ? '$' : ''}`
+function setStyleIncremental(el: any, value: any): NormalizedStyle | undefined {
+ const cacheKey = `$styi${isApplyingFallthroughProps ? '$' : ''}`
const prev = el[cacheKey]
value = el[cacheKey] = isString(value)
? parseStringStyle(value)
return value
}
-export function setAttr(el: any, key: string, value: any): void {
- if (value !== el[`$${key}`]) {
- el[`$${key}`] = value
- if (value != null) {
- el.setAttribute(key, value)
- } else {
- el.removeAttribute(key)
- }
+export function setValue(el: TargetElement, value: any): void {
+ if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey('value')) {
+ return
}
-}
-export function setValue(
- el: Element & { value?: string; _value?: any },
- value: any,
-): void {
// store value as _value as well since
// non-string values will be stringified.
el._value = value
}
}
-export function setProp(el: any, key: string, value: any): void {
- if (key in el) {
- setDOMProp(el, key, value)
- } else {
- setAttr(el, key, value)
+export function setText(el: Node & { $txt?: string }, ...values: any[]): void {
+ const value =
+ values.length > 1
+ ? values.map(toDisplayString).join('')
+ : toDisplayString(values[0])
+ if (el.$txt !== value) {
+ el.textContent = el.$txt = value
}
}
-export function setDOMProp(el: any, key: string, value: any): void {
- const prev = el[key]
- if (value === prev) {
- return
- }
-
- let needRemove = false
- if (value === '' || value == null) {
- const type = typeof prev
- if (value == null && type === 'string') {
- // e.g. <div :id="null">
- value = ''
- needRemove = true
- } else if (type === 'number') {
- // e.g. <img :width="null">
- value = 0
- needRemove = true
- }
- }
-
- // some properties perform value validation and throw,
- // some properties has getter, no setter, will error in 'use strict'
- // eg. <select :type="null"></select> <select :willValidate="null"></select>
- try {
- el[key] = value
- } catch (e: any) {
- // do not warn if value is auto-coerced from nullish values
- if (__DEV__ && !needRemove) {
- warn(
- `Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: ` +
- `value ${value} is invalid.`,
- e,
- )
- }
+export function setHtml(el: TargetElement, value: any): void {
+ value = value == null ? '' : value
+ if (el.$html !== value) {
+ el.innerHTML = el.$html = value
}
- needRemove && el.removeAttribute(key)
}
-export function setDynamicProps(
- el: any,
- args: any[],
- root = false,
- fallthrough = false,
-): void {
+export function setDynamicProps(el: any, args: any[]): void {
const props = args.length > 1 ? mergeProps(...args) : args[0]
- const cacheKey = `$dprops${fallthrough ? '$' : ''}`
+ const cacheKey = `$dprops${isApplyingFallthroughProps ? '$' : ''}`
const prevKeys = el[cacheKey] as string[]
if (prevKeys) {
for (const key of prevKeys) {
if (!(key in props)) {
- setDynamicProp(el, key, null, root, fallthrough)
+ setDynamicProp(el, key, null)
}
}
}
for (const key of (el[cacheKey] = Object.keys(props))) {
- setDynamicProp(el, key, props[key], root, fallthrough)
+ setDynamicProp(el, key, props[key])
}
}
el: TargetElement,
key: string,
value: any,
- root?: boolean,
- fallthrough?: boolean,
-): any {
+): void {
// TODO
const isSVG = false
if (key === 'class') {
- if (root) {
- return setClassIncremental(el, value, fallthrough)
- } else {
- setClass(el, value)
- }
+ setClass(el, value)
} else if (key === 'style') {
- if (root) {
- return setStyleIncremental(el, value, fallthrough)
- } else {
- setStyle(el, value)
- }
+ setStyle(el, value)
} else if (isOn(key)) {
on(el, key[2].toLowerCase() + key.slice(3), () => value, { effect: true })
} else if (
/*! #__NO_SIDE_EFFECTS__ */
-export function template(html: string) {
+export function template(html: string, root?: boolean) {
let node: ChildNode
const create = () => {
// eslint-disable-next-line no-restricted-globals
t.innerHTML = html
return t.content.firstChild!
}
- return (): Node => (node || (node = create())).cloneNode(true)
+ return (): Node & { $root?: true } => {
+ const ret = (node || (node = create())).cloneNode(true)
+ if (root) (ret as any).$root = true
+ return ret
+ }
}
/*! #__NO_SIDE_EFFECTS__ */
setHtml,
setClass,
setStyle,
- setClassIncremental,
- setStyleIncremental,
setAttr,
setValue,
setProp,
projects / thirdparty / vuejs / core.git / commitdiff
