export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
- let _count
- _renderEffect(() => _count !== _ctx.count && _setText(n0, "count is ", (_count = _ctx.count), "."))
+ _renderEffect(() => _setText(n0, "count is ", _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, setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, createTextNode as _createTextNode, insert as _insert, 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 n1 = _createComponentWithFallback(_component_Comp)
const n2 = _createTextNode(() => [_ctx.bar])
_insert([n1, n2], n3)
- let _foo
- _renderEffect(() => _foo !== _ctx.foo && _setDOMProp(n3, "id", (_foo = _ctx.foo)))
+ _renderEffect(() => _setProp(n3, "id", _ctx.foo))
return [n0, n3]
}"
`;
`;
exports[`compile > dynamic root nodes and interpolation 1`] = `
-"import { delegate as _delegate, setText as _setText, setDOMProp as _setDOMProp, renderEffect as _renderEffect, delegateEvents as _delegateEvents, template as _template } from 'vue';
+"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>")
_delegateEvents("click")
export function render(_ctx) {
const n0 = t0()
_delegate(n0, "click", () => _ctx.handleClick)
- let _count
_renderEffect(() => {
- if(_count !== _ctx.count) {
- _setText(n0, _ctx.count, "foo", _ctx.count, "foo", _ctx.count)
- _setDOMProp(n0, "id", _ctx.count)
- _count = _ctx.count
- }
+ _setText(n0, _ctx.count, "foo", _ctx.count, "foo", _ctx.count)
+ _setProp(n0, "id", _ctx.count)
})
return n0
}"
exports[`compile > expression parsing > v-bind 1`] = `
"
const n0 = t0()
- let _key_value, _foo, _key_value_foo
- _renderEffect(() => (_key_value !== key.value || _foo !== _unref(foo)) && (_key_value_foo = _setDynamicProps(n0, _key_value_foo, [{ [key.value+1]: _unref(foo)[key.value+1]() }], true)))
+ _renderEffect(() => _setDynamicProps(n0, [{ [key.value+1]: _unref(foo)[key.value+1]() }], true))
return n0
"
`;
expect(code).matchSnapshot()
expect(code).contains('key.value+1')
expect(code).contains(
- '(_key_value !== key.value || _foo !== _unref(foo)) && (_key_value_foo = _setDynamicProps(n0, _key_value_foo, [{ [key.value+1]: _unref(foo)[key.value+1]() }], true))',
+ '_setDynamicProps(n0, [{ [key.value+1]: _unref(foo)[key.value+1]() }], true)',
)
})
const n2 = n3.nextSibling
const n1 = _createTextNode(() => [_ctx.second, " ", _ctx.third, " "])
_insert(n1, n4, n3)
- let _first, _forth
_renderEffect(() => {
- _first !== _ctx.first && _setText(n0, (_first = _ctx.first))
- _forth !== _ctx.forth && _setText(n2, (_forth = _ctx.forth))
+ _setText(n0, _ctx.first)
+ _setText(n2, _ctx.forth)
})
return n4
}"
`;
exports[`compiler: element transform > props merging: class 1`] = `
-"import { setClass as _setClass, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setClassIncremental as _setClassIncremental, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- let _isBar
- _renderEffect(() => _isBar !== _ctx.isBar && _setClass(n0, ["foo", { bar: (_isBar = _ctx.isBar) }], true))
+ _renderEffect(() => _setClassIncremental(n0, ["foo", { bar: _ctx.isBar }]))
return n0
}"
`;
`;
exports[`compiler: element transform > props merging: style 1`] = `
-"import { setStyle as _setStyle, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setStyleIncremental as _setStyleIncremental, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setStyle(n0, ["color: green", { color: 'red' }], true))
+ _renderEffect(() => _setStyleIncremental(n0, ["color: green", { color: 'red' }]))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _obj
- _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [_ctx.obj], true)))
+ _renderEffect(() => _setDynamicProps(n0, [_ctx.obj], true))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _obj
- _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [{ id: "foo" }, _ctx.obj], true)))
+ _renderEffect(() => _setDynamicProps(n0, [{ id: "foo" }, _ctx.obj], true))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _obj
- _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [_ctx.obj, { id: "foo" }], true)))
+ _renderEffect(() => _setDynamicProps(n0, [_ctx.obj, { id: "foo" }], true))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _obj
- _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true)))
+ _renderEffect(() => _setDynamicProps(n0, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _id
- _renderEffect(() => _id !== _ctx.id && _setAttr(n0, "foo-bar", (_id = _ctx.id)))
+ _renderEffect(() => _setAttr(n0, "foo-bar", _ctx.id))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _foo
- _renderEffect(() => _foo !== _ctx.foo && _setAttr(n0, "innerHTML", (_foo = _ctx.foo)))
+ _renderEffect(() => _setAttr(n0, "innerHTML", _ctx.foo))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _fooBar
- _renderEffect(() => _fooBar !== _ctx.fooBar && _setAttr(n0, "foo-bar", (_fooBar = _ctx.fooBar)))
+ _renderEffect(() => _setAttr(n0, "foo-bar", _ctx.fooBar))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _foo
- _renderEffect(() => _foo !== _ctx.foo && _setAttr(n0, "value", (_foo = _ctx.foo)))
+ _renderEffect(() => _setAttr(n0, "value", _ctx.foo))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _foo
- _renderEffect(() => _foo !== _ctx.foo && _setAttr(n0, "textContent", (_foo = _ctx.foo)))
+ _renderEffect(() => _setAttr(n0, "textContent", _ctx.foo))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _foo
- _renderEffect(() => _foo !== _ctx.foo && _setAttr(n0, "value", (_foo = _ctx.foo)))
+ _renderEffect(() => _setAttr(n0, "value", _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > .camel modifier 1`] = `
-"import { setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- let _id
- _renderEffect(() => _id !== _ctx.id && (_id = _setDynamicProp(n0, "fooBar", _id, _ctx.id)))
+ _renderEffect(() => _setProp(n0, "fooBar", _ctx.id))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _foo, _id, _foo_id
- _renderEffect(() => (_foo !== _ctx.foo || _id !== _ctx.id) && (_foo_id = _setDynamicProps(n0, _foo_id, [{ [_camelize(_ctx.foo)]: _ctx.id }], true)))
+ _renderEffect(() => _setDynamicProps(n0, [{ [_camelize(_ctx.foo)]: _ctx.id }], true))
return n0
}"
`;
exports[`compiler v-bind > .camel modifier w/ no expression 1`] = `
-"import { setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- let _fooBar
- _renderEffect(() => _fooBar !== _ctx.fooBar && (_fooBar = _setDynamicProp(n0, "fooBar", _fooBar, _ctx.fooBar)))
+ _renderEffect(() => _setProp(n0, "fooBar", _ctx.fooBar))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _id
- _renderEffect(() => _id !== _ctx.id && _setDOMProp(n0, "fooBar", (_id = _ctx.id)))
+ _renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _foo
- _renderEffect(() => _foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo)))
+ _renderEffect(() => _setHtml(n0, _ctx.foo))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _fooBar
- _renderEffect(() => _fooBar !== _ctx.fooBar && _setDOMProp(n0, "fooBar", (_fooBar = _ctx.fooBar)))
+ _renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _foo
- _renderEffect(() => _foo !== _ctx.foo && _setDOMProp(n0, "value", (_foo = _ctx.foo)))
+ _renderEffect(() => _setDOMProp(n0, "value", _ctx.foo))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _foo
- _renderEffect(() => _foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo)))
+ _renderEffect(() => _setText(n0, _ctx.foo))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _foo
- _renderEffect(() => _foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo)))
+ _renderEffect(() => _setValue(n0, _ctx.foo))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _id
- _renderEffect(() => _id !== _ctx.id && _setDOMProp(n0, "fooBar", (_id = _ctx.id)))
+ _renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _fooBar, _id, _fooBar_id
- _renderEffect(() => (_fooBar !== _ctx.fooBar || _id !== _ctx.id) && (_fooBar_id = _setDynamicProps(n0, _fooBar_id, [{ ["." + _ctx.fooBar]: _ctx.id }], true)))
+ _renderEffect(() => _setDynamicProps(n0, [{ ["." + _ctx.fooBar]: _ctx.id }], true))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _foo
- _renderEffect(() => _foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo)))
+ _renderEffect(() => _setHtml(n0, _ctx.foo))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _fooBar
- _renderEffect(() => _fooBar !== _ctx.fooBar && _setDOMProp(n0, "fooBar", (_fooBar = _ctx.fooBar)))
+ _renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _foo
- _renderEffect(() => _foo !== _ctx.foo && _setDOMProp(n0, "value", (_foo = _ctx.foo)))
+ _renderEffect(() => _setDOMProp(n0, "value", _ctx.foo))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _foo
- _renderEffect(() => _foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo)))
+ _renderEffect(() => _setText(n0, _ctx.foo))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _foo
- _renderEffect(() => _foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo)))
+ _renderEffect(() => _setValue(n0, _ctx.foo))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _foo
- _renderEffect(() => _foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo)))
+ _renderEffect(() => _setHtml(n0, _ctx.foo))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _foo
- _renderEffect(() => _foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo)))
+ _renderEffect(() => _setText(n0, _ctx.foo))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _foo
- _renderEffect(() => _foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo)))
+ _renderEffect(() => _setValue(n0, _ctx.foo))
return n0
}"
`;
exports[`compiler v-bind > :value w/ progress 1`] = `
-"import { setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<progress></progress>")
export function render(_ctx) {
const n0 = t0()
- let _foo
- _renderEffect(() => _foo !== _ctx.foo && (_foo = _setDynamicProp(n0, "value", _foo, _ctx.foo)))
- return n0
-}"
-`;
-
-exports[`compiler v-bind > HTML global attributes should set as dom prop 1`] = `
-"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
-
-export function render(_ctx) {
- const n0 = t0()
- let _id, _title, _lang, _dir, _tabindex
- _renderEffect(() => {
- _id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id))
- _title !== _ctx.title && _setDOMProp(n0, "title", (_title = _ctx.title))
- _lang !== _ctx.lang && _setDOMProp(n0, "lang", (_lang = _ctx.lang))
- _dir !== _ctx.dir && _setDOMProp(n0, "dir", (_dir = _ctx.dir))
- _tabindex !== _ctx.tabindex && _setDOMProp(n0, "tabindex", (_tabindex = _ctx.tabindex))
- })
- return n0
-}"
-`;
-
-exports[`compiler v-bind > MathML global attributes should set as attribute 1`] = `
-"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<math></math>")
-
-export function render(_ctx) {
- const n0 = t0()
- _renderEffect(() => {
- _setAttr(n0, "autofucus", _ctx.autofucus)
- _setAttr(n0, "dir", _ctx.dir)
- _setAttr(n0, "displaystyle", _ctx.displaystyle)
- _setAttr(n0, "mathcolor", _ctx.mathcolor)
- _setAttr(n0, "tabindex", _ctx.tabindex)
- })
- return n0
-}"
-`;
-
-exports[`compiler v-bind > MathML global attributes should set as dom prop 1`] = `
-"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<math></math>")
-
-export function render(_ctx) {
- const n0 = t0()
- let _autofucus, _dir, _displaystyle, _mathcolor, _tabindex
- _renderEffect(() => {
- _autofucus !== _ctx.autofucus && _setDOMProp(n0, "autofucus", (_autofucus = _ctx.autofucus))
- _dir !== _ctx.dir && _setDOMProp(n0, "dir", (_dir = _ctx.dir))
- _displaystyle !== _ctx.displaystyle && _setDOMProp(n0, "displaystyle", (_displaystyle = _ctx.displaystyle))
- _mathcolor !== _ctx.mathcolor && _setDOMProp(n0, "mathcolor", (_mathcolor = _ctx.mathcolor))
- _tabindex !== _ctx.tabindex && _setDOMProp(n0, "tabindex", (_tabindex = _ctx.tabindex))
- })
- return n0
-}"
-`;
-
-exports[`compiler v-bind > SVG global attributes should set as attribute 1`] = `
-"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<svg></svg>")
-
-export function render(_ctx) {
- const n0 = t0()
- _renderEffect(() => {
- _setAttr(n0, "id", _ctx.id)
- _setAttr(n0, "lang", _ctx.lang)
- _setAttr(n0, "tabindex", _ctx.tabindex)
- })
- return n0
-}"
-`;
-
-exports[`compiler v-bind > SVG global attributes should set as dom prop 1`] = `
-"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<svg></svg>")
-
-export function render(_ctx) {
- const n0 = t0()
- let _id, _lang, _tabindex
- _renderEffect(() => {
- _id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id))
- _lang !== _ctx.lang && _setDOMProp(n0, "lang", (_lang = _ctx.lang))
- _tabindex !== _ctx.tabindex && _setDOMProp(n0, "tabindex", (_tabindex = _ctx.tabindex))
- })
+ _renderEffect(() => _setProp(n0, "value", _ctx.foo))
return n0
}"
`;
const n4 = t4()
const n5 = t5()
const n6 = t6()
- let _spellcheck, _draggable, _translate, _form, _list, _type, _width, _height
_renderEffect(() => {
- _spellcheck !== _ctx.spellcheck && _setAttr(n0, "spellcheck", (_spellcheck = _ctx.spellcheck))
- _draggable !== _ctx.draggable && _setAttr(n0, "draggable", (_draggable = _ctx.draggable))
- _translate !== _ctx.translate && _setAttr(n0, "translate", (_translate = _ctx.translate))
- _form !== _ctx.form && _setAttr(n0, "form", (_form = _ctx.form))
- _list !== _ctx.list && _setAttr(n1, "list", (_list = _ctx.list))
- _type !== _ctx.type && _setAttr(n2, "type", (_type = _ctx.type))
- if(_width !== _ctx.width) {
- _setAttr(n3, "width", _ctx.width)
- _setAttr(n4, "width", _ctx.width)
- _setAttr(n5, "width", _ctx.width)
- _setAttr(n6, "width", _ctx.width)
- _width = _ctx.width
- }
- if(_height !== _ctx.height) {
- _setAttr(n3, "height", _ctx.height)
- _setAttr(n4, "height", _ctx.height)
- _setAttr(n5, "height", _ctx.height)
- _setAttr(n6, "height", _ctx.height)
- _height = _ctx.height
- }
+ _setAttr(n0, "spellcheck", _ctx.spellcheck)
+ _setAttr(n0, "draggable", _ctx.draggable)
+ _setAttr(n0, "translate", _ctx.translate)
+ _setAttr(n0, "form", _ctx.form)
+ _setAttr(n1, "list", _ctx.list)
+ _setAttr(n2, "type", _ctx.type)
+
+ _setAttr(n3, "width", _ctx.width)
+ _setAttr(n4, "width", _ctx.width)
+ _setAttr(n5, "width", _ctx.width)
+ _setAttr(n6, "width", _ctx.width)
+
+ _setAttr(n3, "height", _ctx.height)
+ _setAttr(n4, "height", _ctx.height)
+ _setAttr(n5, "height", _ctx.height)
+ _setAttr(n6, "height", _ctx.height)
})
return [n0, n1, n2, n3, n4, n5, n6]
}"
`;
exports[`compiler v-bind > basic 1`] = `
-"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- let _id
- _renderEffect(() => _id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id)))
+ _renderEffect(() => _setProp(n0, "id", _ctx.id))
return n0
}"
`;
-exports[`compiler v-bind > bind member expression 1`] = `
-"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
-
-export function render(_ctx) {
- const n0 = t0()
- let _obj
- _renderEffect(() => _obj !== _ctx.obj.count.bar && _setDOMProp(n0, "id", (_obj = _ctx.obj.count.bar)))
- return [n0, n1]
-}"
-`;
-
exports[`compiler v-bind > dynamic arg 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- let _id, _title, _id_title
- _renderEffect(() => (_id !== _ctx.id || _title !== _ctx.title) && (_id_title = _setDynamicProps(n0, _id_title, [{ [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title }], true)))
+ _renderEffect(() => _setDynamicProps(n0, [{ [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title }], true))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _id
- _renderEffect(() => _id !== _ctx.id && (_id = _setDynamicProps(n0, _id, [{ [_ctx.id]: _ctx.id, foo: "bar", checked: "" }], true)))
+ _renderEffect(() => _setDynamicProps(n0, [{ [_ctx.id]: _ctx.id, foo: "bar", checked: "" }], true))
return n0
}"
`;
exports[`compiler v-bind > no expression (shorthand) 1`] = `
-"import { setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- let _camelCase
- _renderEffect(() => _camelCase !== _ctx.camelCase && (_camelCase = _setDynamicProp(n0, "camel-case", _camelCase, _ctx.camelCase)))
+ _renderEffect(() => _setAttr(n0, "camel-case", _ctx.camelCase))
return n0
}"
`;
exports[`compiler v-bind > no expression 1`] = `
-"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- let _id
- _renderEffect(() => _id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id)))
+ _renderEffect(() => _setProp(n0, "id", _ctx.id))
return n0
}"
`;
`;
exports[`compiler: v-for > multi effect 1`] = `
-"import { setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
+"import { setProp as _setProp, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
const n2 = t0()
_renderEffect(() => {
- _setDynamicProp(n2, "item", _ctx0[0].value)
- _setDynamicProp(n2, "index", _ctx0[1].value)
+ _setProp(n2, "item", _ctx0[0].value)
+ _setProp(n2, "index", _ctx0[1].value)
})
return n2
})
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
- let _code
- _renderEffect(() => _code !== _ctx.code && _setHtml(n0, (_code = _ctx.code)))
+ _renderEffect(() => _setHtml(n0, _ctx.code))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _test
- _renderEffect(() => _test !== _ctx.test && _setHtml(n0, (_test = _ctx.test)))
+ _renderEffect(() => _setHtml(n0, _ctx.test))
return n0
}"
`;
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.ok), () => {
const n2 = t0()
- let _msg
- _renderEffect(() => _msg !== _ctx.msg && _setText(n2, (_msg = _ctx.msg)))
+ _renderEffect(() => _setText(n2, _ctx.msg))
return n2
})
return n0
const n11 = t4()
return [n10, n11]
}))
- let _text
- _renderEffect(() => _text !== _ctx.text && _setText(n13, (_text = _ctx.text)))
+ _renderEffect(() => _setText(n13, _ctx.text))
return [n0, n13]
}"
`;
const n2 = t0()
const n3 = t1()
const n4 = t2()
- let _msg
- _renderEffect(() => _msg !== _ctx.msg && _setText(n4, (_msg = _ctx.msg)))
+ _renderEffect(() => _setText(n4, _ctx.msg))
return [n2, n3, n4]
})
return n0
const n0 = t0()
_withDirectives(n0, [[_vModelDynamic, () => _ctx.model]])
_delegate(n0, "update:modelValue", () => $event => (_ctx.model = $event))
- let _obj
- _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [_ctx.obj], true)))
+ _renderEffect(() => _setDynamicProps(n0, [_ctx.obj], true))
return n0
}"
`;
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: v-once > as root node 1`] = `
-"import { setDOMProp as _setDOMProp, template as _template } from 'vue';
+"import { setProp as _setProp, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _setDOMProp(n0, "id", _ctx.foo)
+ _setProp(n0, "id", _ctx.foo)
return n0
}"
`;
`;
exports[`compiler: v-once > on nested plain element 1`] = `
-"import { setDOMProp as _setDOMProp, template as _template } from 'vue';
+"import { setProp as _setProp, template as _template } from 'vue';
const t0 = _template("<div><div></div></div>")
export function render(_ctx) {
const n1 = t0()
const n0 = n1.firstChild
- _setDOMProp(n0, "id", _ctx.foo)
+ _setProp(n0, "id", _ctx.foo)
return n1
}"
`;
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
- let _str
- _renderEffect(() => _str !== _ctx.str && _setText(n0, (_str = _ctx.str)))
+ _renderEffect(() => _setText(n0, _ctx.str))
return n0
}"
`;
export function render(_ctx) {
const n0 = t0()
- let _test
- _renderEffect(() => _test !== _ctx.test && _setText(n0, (_test = _ctx.test)))
+ _renderEffect(() => _setText(n0, _ctx.test))
return n0
}"
`;
],
},
])
- expect(code).contains(
- '_obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [_ctx.obj], true))',
- )
+ expect(code).contains('_setDynamicProps(n0, [_ctx.obj], true)')
})
test('v-bind="obj" after static prop', () => {
},
])
expect(code).contains(
- '_obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [{ id: "foo" }, _ctx.obj], true))',
+ '_setDynamicProps(n0, [{ id: "foo" }, _ctx.obj], true)',
)
})
},
])
expect(code).contains(
- '_obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [_ctx.obj, { id: "foo" }], true))',
+ '_setDynamicProps(n0, [_ctx.obj, { id: "foo" }], true)',
)
})
},
])
expect(code).contains(
- '_obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true))',
+ '_setDynamicProps(n0, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true)',
)
})
})
expect(code).matchSnapshot()
- expect(code).contains(
- '_id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id))',
- )
+ expect(code).contains('_setProp(n0, "id", _ctx.id')
})
test('no expression', () => {
],
},
})
- expect(code).contains(
- '_id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id))',
- )
+ expect(code).contains('_setProp(n0, "id", _ctx.id)')
})
test('no expression (shorthand)', () => {
],
},
})
- expect(code).contains(
- '_camelCase !== _ctx.camelCase && (_camelCase = _setDynamicProp(n0, "camel-case", _camelCase, _ctx.camelCase))',
- )
+ expect(code).contains('_setAttr(n0, "camel-case", _ctx.camelCase)')
})
test('dynamic arg', () => {
],
})
expect(code).contains(
- '(_id !== _ctx.id || _title !== _ctx.title) && (_id_title = _setDynamicProps(n0, _id_title, [{ [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title }], true))',
+ '_setDynamicProps(n0, [{ [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title }], true)',
)
})
],
})
expect(code).contains(
- '_id !== _ctx.id && (_id = _setDynamicProps(n0, _id, [{ [_ctx.id]: _ctx.id, foo: "bar", checked: "" }], true))',
+ '_setDynamicProps(n0, [{ [_ctx.id]: _ctx.id, foo: "bar", checked: "" }], true)',
)
})
})
expect(code).matchSnapshot()
- expect(code).contains(
- '_id !== _ctx.id && (_id = _setDynamicProp(n0, "fooBar", _id, _ctx.id))',
- )
+ expect(code).contains('_setProp(n0, "fooBar", _ctx.id)')
})
test('.camel modifier w/ no expression', () => {
},
})
expect(code).contains('renderEffect')
- expect(code).contains(
- '_fooBar !== _ctx.fooBar && (_fooBar = _setDynamicProp(n0, "fooBar", _fooBar, _ctx.fooBar))',
- )
+ expect(code).contains('_setProp(n0, "fooBar", _ctx.fooBar)')
})
test('.camel modifier w/ dynamic arg', () => {
expect(code).matchSnapshot()
expect(code).contains('renderEffect')
expect(code).contains(
- `(_foo !== _ctx.foo || _id !== _ctx.id) && (_foo_id = _setDynamicProps(n0, _foo_id, [{ [_camelize(_ctx.foo)]: _ctx.id }], true))`,
+ `_setDynamicProps(n0, [{ [_camelize(_ctx.foo)]: _ctx.id }], true)`,
)
})
},
})
expect(code).contains('renderEffect')
- expect(code).contains(
- '_id !== _ctx.id && _setDOMProp(n0, "fooBar", (_id = _ctx.id))',
- )
+ expect(code).contains('_setDOMProp(n0, "fooBar", _ctx.id)')
})
test('.prop modifier w/ no expression', () => {
},
})
expect(code).contains('renderEffect')
- expect(code).contains(
- '_fooBar !== _ctx.fooBar && _setDOMProp(n0, "fooBar", (_fooBar = _ctx.fooBar))',
- )
+ expect(code).contains('_setDOMProp(n0, "fooBar", _ctx.fooBar)')
})
test('.prop modifier w/ dynamic arg', () => {
})
expect(code).contains('renderEffect')
expect(code).contains(
- `(_fooBar !== _ctx.fooBar || _id !== _ctx.id) && (_fooBar_id = _setDynamicProps(n0, _fooBar_id, [{ ["." + _ctx.fooBar]: _ctx.id }], true))`,
+ `_setDynamicProps(n0, [{ ["." + _ctx.fooBar]: _ctx.id }], true)`,
)
})
},
})
expect(code).contains('renderEffect')
- expect(code).contains(
- '_id !== _ctx.id && _setDOMProp(n0, "fooBar", (_id = _ctx.id))',
- )
+ expect(code).contains(' _setDOMProp(n0, "fooBar", _ctx.id)')
})
test('.prop modifier (shorthand) w/ no expression', () => {
},
})
expect(code).contains('renderEffect')
- expect(code).contains(
- '_fooBar !== _ctx.fooBar && _setDOMProp(n0, "fooBar", (_fooBar = _ctx.fooBar))',
- )
+ expect(code).contains('_setDOMProp(n0, "fooBar", _ctx.fooBar)')
})
test('.prop modifier w/ innerHTML', () => {
const { code } = compileWithVBind(`<div :innerHTML.prop="foo" />`)
expect(code).matchSnapshot()
- expect(code).contains(
- '_foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo))',
- )
+ expect(code).contains('_setHtml(n0, _ctx.foo)')
})
test('.prop modifier (shorthand) w/ innerHTML', () => {
const { code } = compileWithVBind(`<div .innerHTML="foo" />`)
expect(code).matchSnapshot()
- expect(code).contains(
- '_foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo))',
- )
+ expect(code).contains('_setHtml(n0, _ctx.foo)')
})
test('.prop modifier w/ textContent', () => {
const { code } = compileWithVBind(`<div :textContent.prop="foo" />`)
expect(code).matchSnapshot()
- expect(code).contains(
- '_foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo))',
- )
+ expect(code).contains('_setText(n0, _ctx.foo)')
})
test('.prop modifier (shorthand) w/ textContent', () => {
const { code } = compileWithVBind(`<div .textContent="foo" />`)
expect(code).matchSnapshot()
- expect(code).contains(
- '_foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo))',
- )
+ expect(code).contains('_setText(n0, _ctx.foo)')
})
test('.prop modifier w/ value', () => {
const { code } = compileWithVBind(`<div :value.prop="foo" />`)
expect(code).matchSnapshot()
- expect(code).contains(
- '_foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo))',
- )
+ expect(code).contains('_setValue(n0, _ctx.foo)')
})
test('.prop modifier (shorthand) w/ value', () => {
const { code } = compileWithVBind(`<div .value="foo" />`)
expect(code).matchSnapshot()
- expect(code).contains(
- '_foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo))',
- )
+ expect(code).contains('_setValue(n0, _ctx.foo)')
})
test('.prop modifier w/ progress value', () => {
const { code } = compileWithVBind(`<progress :value.prop="foo" />`)
expect(code).matchSnapshot()
- expect(code).contains(
- '_foo !== _ctx.foo && _setDOMProp(n0, "value", (_foo = _ctx.foo))',
- )
+ expect(code).contains('_setDOMProp(n0, "value", _ctx.foo)')
})
test('.prop modifier (shorthand) w/ progress value', () => {
const { code } = compileWithVBind(`<progress .value="foo" />`)
expect(code).matchSnapshot()
- expect(code).contains(
- '_foo !== _ctx.foo && _setDOMProp(n0, "value", (_foo = _ctx.foo))',
- )
+ expect(code).contains('_setDOMProp(n0, "value", _ctx.foo)')
})
test('.attr modifier', () => {
},
})
expect(code).contains('renderEffect')
- expect(code).contains(
- '_id !== _ctx.id && _setAttr(n0, "foo-bar", (_id = _ctx.id))',
- )
+ expect(code).contains('_setAttr(n0, "foo-bar", _ctx.id)')
})
test('.attr modifier w/ no expression', () => {
})
expect(code).contains('renderEffect')
- expect(code).contains(
- '_fooBar !== _ctx.fooBar && _setAttr(n0, "foo-bar", (_fooBar = _ctx.fooBar))',
- )
+ expect(code).contains('_setAttr(n0, "foo-bar", _ctx.fooBar)')
})
test('.attr modifier w/ innerHTML', () => {
const { code } = compileWithVBind(`<div :innerHTML.attr="foo" />`)
expect(code).matchSnapshot()
- expect(code).contains(
- '_foo !== _ctx.foo && _setAttr(n0, "innerHTML", (_foo = _ctx.foo))',
- )
+ expect(code).contains('_setAttr(n0, "innerHTML", _ctx.foo)')
})
test('.attr modifier w/ textContent', () => {
const { code } = compileWithVBind(`<div :textContent.attr="foo" />`)
expect(code).matchSnapshot()
- expect(code).contains(
- '_foo !== _ctx.foo && _setAttr(n0, "textContent", (_foo = _ctx.foo))',
- )
+ expect(code).contains('_setAttr(n0, "textContent", _ctx.foo)')
})
test('.attr modifier w/ value', () => {
const { code } = compileWithVBind(`<div :value.attr="foo" />`)
expect(code).matchSnapshot()
- expect(code).contains(
- '_foo !== _ctx.foo && _setAttr(n0, "value", (_foo = _ctx.foo))',
- )
+ expect(code).contains('_setAttr(n0, "value", _ctx.foo)')
})
test('.attr modifier w/ progress value', () => {
const { code } = compileWithVBind(`<progress :value.attr="foo" />`)
expect(code).matchSnapshot()
- expect(code).contains(
- '_foo !== _ctx.foo && _setAttr(n0, "value", (_foo = _ctx.foo))',
- )
+ expect(code).contains('_setAttr(n0, "value", _ctx.foo)')
})
test('attributes must be set as attribute', () => {
`)
expect(code).matchSnapshot()
- expect(code).contains(
- '_spellcheck !== _ctx.spellcheck && _setAttr(n0, "spellcheck", (_spellcheck = _ctx.spellcheck))',
- )
- expect(code).contains(
- '_draggable !== _ctx.draggable && _setAttr(n0, "draggable", (_draggable = _ctx.draggable))',
- )
- expect(code).contains(
- '_translate !== _ctx.translate && _setAttr(n0, "translate", (_translate = _ctx.translate))',
- )
- expect(code).contains(
- '_form !== _ctx.form && _setAttr(n0, "form", (_form = _ctx.form))',
- )
- expect(code).contains(
- '_list !== _ctx.list && _setAttr(n1, "list", (_list = _ctx.list))',
- )
- expect(code).contains(
- '_type !== _ctx.type && _setAttr(n2, "type", (_type = _ctx.type))',
- )
- expect(code).contains('if(_width !== _ctx.width) {')
- expect(code).contains('if(_height !== _ctx.height) {')
- expect(code).contains('_height = _ctx.height')
- expect(code).contains('_height = _ctx.height')
+ expect(code).contains('_setAttr(n0, "spellcheck", _ctx.spellcheck)')
+ expect(code).contains('_setAttr(n0, "draggable", _ctx.draggable)')
+ expect(code).contains('_setAttr(n0, "translate", _ctx.translate)')
+ expect(code).contains('_setAttr(n0, "form", _ctx.form)')
+ expect(code).contains('_setAttr(n1, "list", _ctx.list)')
+ expect(code).contains('_setAttr(n2, "type", _ctx.type)')
expect(code).contains('_setAttr(n3, "width", _ctx.width)')
expect(code).contains('_setAttr(n3, "height", _ctx.height)')
expect(code).contains('_setAttr(n4, "width", _ctx.width)')
<div :innerHTML="foo"/>
`)
expect(code).matchSnapshot()
- expect(code).contains('let _foo')
- expect(code).contains(
- '_foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo))',
- )
+ expect(code).contains('_setHtml(n0, _ctx.foo)')
})
test(':textContext', () => {
<div :textContent="foo"/>
`)
expect(code).matchSnapshot()
- expect(code).contains('let _foo')
- expect(code).contains(
- '_foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo))',
- )
+ expect(code).contains('_setText(n0, _ctx.foo)')
})
test(':value', () => {
<input :value="foo"/>
`)
expect(code).matchSnapshot()
- expect(code).contains('let _foo')
- expect(code).contains(
- '_foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo))',
- )
+ expect(code).contains('_setValue(n0, _ctx.foo)')
})
test(':value w/ progress', () => {
<progress :value="foo"/>
`)
expect(code).matchSnapshot()
- expect(code).contains(
- '_foo !== _ctx.foo && (_foo = _setDynamicProp(n0, "value", _foo, _ctx.foo))',
- )
- })
-
- test('bind member expression', () => {
- const { code } = compileWithVBind(`
- <div :id="obj.count.bar"></div>/>
- `)
- expect(code).matchSnapshot()
- expect(code).contains(
- '_obj !== _ctx.obj.count.bar && _setDOMProp(n0, "id", (_obj = _ctx.obj.count.bar))',
- )
+ expect(code).contains('_setProp(n0, "value", _ctx.foo)')
})
test('number value', () => {
},
})
- console.log(code)
-
expect(code).matchSnapshot()
})
} from './utils'
import {
canSetValueDirectly,
- isHTMLGlobalAttr,
+ isSVGTag,
+ shouldSetAsAttr,
toHandlerKey,
} from '@vue/shared'
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 },
} as const satisfies Partial<Record<VaporHelper, HelperConfig>>
)
}
-// TODO
-// - 1. textContent + innerHTML Known base dom properties in https://developer.mozilla.org/en-US/docs/Web/API/Element
-// - 2. special handling (class / style)
-// - 3. SVG: always attribute
-// - 4. Custom Elements
-// - always properties unless known global attr or has hyphen (aria- / data-)
-// - 5. Normal Elements
-// - 1. Known shared dom properties:
-// - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
-// - 2. Each element's known dom properties
-// - 3. Fallback to attribute
-
function getRuntimeHelper(
tag: string,
- keyName: string,
+ key: string,
modifier: '.' | '^' | undefined,
root: boolean,
): HelperConfig {
const tagName = tag.toUpperCase()
if (modifier) {
if (modifier === '.') {
- return getSpecialHelper(keyName, tagName, root) || helpers.setDOMProp
- } else {
- return helpers.setAttr
- }
- } else {
- const helper = getSpecialHelper(keyName, tagName, root)
- if (helper) {
- return helper
- } else if (tagName.includes('-')) {
- // custom element
- if (isHTMLGlobalAttr(keyName) || keyName.includes('-')) {
- return helpers.setAttr
- } else {
- return helpers.setDOMProp
- }
- } else if (/[A-Z]/.test(keyName)) {
- return helpers.setDOMProp
+ return getSpecialHelper(key, tagName, root) || helpers.setDOMProp
} else {
return helpers.setAttr
}
}
+
+ // 1. special handling for value / style / class / textContent / innerHTML
+ const helper = getSpecialHelper(key, tagName, root)
+ if (helper) {
+ return helper
+ }
+
+ // 2. Aria DOM properties shared between all Elements in
+ // https://developer.mozilla.org/en-US/docs/Web/API/Element
+ if (/aria[A-Z]/.test(key)) {
+ return helpers.setDOMProp
+ }
+
+ // 3. SVG: always attribute
+ if (isSVGTag(tag)) {
+ // TODO pass svg flag
+ return helpers.setAttr
+ }
+
+ // 4. respect shouldSetAsAttr used in vdom and setDynamicProp for consistency
+ // also fast path for presence of hyphen (covers data-* and aria-*)
+ if (shouldSetAsAttr(tagName, key) || key.includes('-')) {
+ return helpers.setAttr
+ }
+
+ // 5. Fallback to setDOMProp, which has a runtime `key in el` check to
+ // ensure behavior consistency with vdom
+ return helpers.setProp
}
-const getSpecialHelper = (
+function getSpecialHelper(
keyName: string,
tagName: string,
root: boolean,
-): HelperConfig | undefined => {
+): HelperConfig | undefined {
// special case for 'value' property
if (keyName === 'value' && canSetValueDirectly(tagName)) {
return helpers.setValue
setDynamicProp as _setDynamicProp,
setAttr,
setClass,
- setDOMProp,
setDynamicProps,
setHtml,
+ setProp,
setText,
setValue,
} from '../../src/dom/prop'
// In vapor static attrs are part of the template and this never happens
// setDOMProp(el, 'multiple', '')
// expect(el.multiple).toBe(true)
- setDOMProp(el, 'multiple', null)
+ setProp(el, 'multiple', null)
expect(el.multiple).toBe(false)
- setDOMProp(el, 'multiple', true)
+ setProp(el, 'multiple', true)
expect(el.multiple).toBe(true)
- setDOMProp(el, 'multiple', 0)
+ setProp(el, 'multiple', 0)
expect(el.multiple).toBe(false)
- setDOMProp(el, 'multiple', '0')
+ setProp(el, 'multiple', '0')
expect(el.multiple).toBe(true)
- setDOMProp(el, 'multiple', false)
+ setProp(el, 'multiple', false)
expect(el.multiple).toBe(false)
- setDOMProp(el, 'multiple', 1)
+ setProp(el, 'multiple', 1)
expect(el.multiple).toBe(true)
- setDOMProp(el, 'multiple', undefined)
+ setProp(el, 'multiple', undefined)
expect(el.multiple).toBe(false)
})
test('should remove attribute when value is falsy', () => {
const el = document.createElement('div')
el.setAttribute('id', '')
- setDOMProp(el, 'id', null)
+ setProp(el, 'id', null)
expect(el.hasAttribute('id')).toBe(false)
el.setAttribute('id', '')
- setDOMProp(el, 'id', undefined)
+ setProp(el, 'id', undefined)
expect(el.hasAttribute('id')).toBe(false)
- setDOMProp(el, 'id', '')
+ setProp(el, 'id', '')
expect(el.hasAttribute('id')).toBe(false)
const img = document.createElement('img')
- setDOMProp(img, 'width', 0)
+ setProp(img, 'width', 0)
expect(img.hasAttribute('width')).toBe(false) // skipped
- setDOMProp(img, 'width', null)
+ setProp(img, 'width', null)
expect(img.hasAttribute('width')).toBe(false)
- setDOMProp(img, 'width', 1)
+ setProp(img, 'width', 1)
expect(img.hasAttribute('width')).toBe(true)
- setDOMProp(img, 'width', undefined)
+ setProp(img, 'width', undefined)
expect(img.hasAttribute('width')).toBe(false)
- setDOMProp(img, 'width', 1)
+ setProp(img, 'width', 1)
expect(img.hasAttribute('width')).toBe(true)
})
throw new TypeError('Invalid type')
},
})
- setDOMProp(el, 'someProp', 'foo')
+ setProp(el, 'someProp', 'foo')
expect(
`Failed setting prop "someProp" on <div>: value foo is invalid.`,
}
export function setText(el: Node & { $txt?: string }, ...values: any[]): void {
- const value = values.map(v => toDisplayString(v)).join('')
+ const value =
+ values.length > 1
+ ? values.map(toDisplayString).join('')
+ : toDisplayString(values[0])
if (el.$txt !== value) {
el.textContent = el.$txt = 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 setDOMProp(el: any, key: string, value: any): void {
const prev = el[key]
if (value === prev) {
setStyleIncremental,
setAttr,
setValue,
+ setProp,
setDOMProp,
setDynamicProps,
} from './dom/prop'
`value,width,wrap`,
)
-/**
- * Generated from https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
- */
-export const isHTMLGlobalAttr: (key: string) => boolean = /*@__PURE__*/ makeMap(
- `accesskey,anchor,autocapitalize,autocorrect,autofocus,class,contenteditable,` +
- `dir,draggable,enterkeyhint,exportparts,hidden,id,inert,inputmode,is,` +
- `itemid,itemprop,itemref,itemscope,itemtype,lang,nonce,part,popover,role,slot,` +
- `spellcheck,style,tabindex,title,translate,virtualkeyboardpolicy,writingsuggestions`,
-)
-
/**
* Generated from https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
*/
`xml:space,y,y1,y2,yChannelSelector,z,zoomAndPan`,
)
-/**
- * Generated from https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#generic_attributes
- */
-export const isSvgGlobalAttr: (key: string) => boolean = /*@__PURE__*/ makeMap(
- `id,class,style,lang,tabindex,xml:base,xml:lang,xml:space,requiredExtensions,` +
- `requiredFeatures,systemLanguage`,
-)
-
/**
* Generated from https://developer.mozilla.org/en-US/docs/Web/MathML/Attribute
*/
`voffset,width,widths,xlink:href,xlink:show,xlink:type,xmlns`,
)
-/**
- * Generated from https://developer.mozilla.org/en-US/docs/Web/MathML/Global_Attributes
- */
-export const isMathMLGlobalAttr: (key: string) => boolean =
- /*@__PURE__*/ makeMap(
- `autofucus,class,dir,displaystyle,id,mathbackground,mathcolor,mathsize,nonce,scriptlevel,` +
- `style,tabindex`,
- )
-
/**
* Shared between server-renderer and runtime-core hydration logic
*/
}
// #8780 the width or height of embedded tags must be set as attribute
- if (key === 'width' || key === 'height') {
- const tag = tagName
- if (
- tag === 'IMG' ||
- tag === 'VIDEO' ||
- tag === 'CANVAS' ||
- tag === 'SOURCE'
- ) {
- return true
- }
+ if (
+ (key === 'width' || key === 'height') &&
+ (tagName === 'IMG' ||
+ tagName === 'VIDEO' ||
+ tagName === 'CANVAS' ||
+ tagName === 'SOURCE')
+ ) {
+ return true
}
return false
projects / thirdparty / vuejs / core.git / commitdiff
