// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compile > bindings 1`] = `
- "import { renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue';
-"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx, $props, $emit, $attrs, $slots) {
`;
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, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
-"import { resolveComponent as _resolveComponent, createComponent as _createComponent, createTextNode as _createTextNode, insert as _insert, setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, createTextNode as _createTextNode, insert as _insert, setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
const t1 = _template("<div></div>")
const _component_Comp = _resolveComponent("Comp")
const n0 = t0()
const n3 = t1()
- const n1 = _createComponent(_component_Comp)
+ const n1 = _createComponentWithFallback(_component_Comp)
const n2 = _createTextNode(() => [_ctx.bar])
_insert([n1, n2], n3)
- _renderEffect(() => _setDOMProp(n3, "id", _ctx.foo))
+ let _foo
+ _renderEffect(() => _foo !== _ctx.foo && _setDOMProp(n3, "id", (_foo = _ctx.foo)))
return [n0, n3]
}"
`;
`;
exports[`compile > dynamic root nodes and interpolation 1`] = `
- "import { delegate as _delegate, renderEffect as _renderEffect, setText as _setText, setDOMProp as _setDOMProp, delegateEvents as _delegateEvents, template as _template } from 'vue';
-"import { delegate as _delegate, setInheritAttrs as _setInheritAttrs, setText as _setText, setDOMProp as _setDOMProp, renderEffect as _renderEffect, delegateEvents as _delegateEvents, template as _template } from 'vue/vapor';
++"import { delegate as _delegate, setText as _setText, setDOMProp as _setDOMProp, 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)
- _renderEffect(() => _setText(n0, _ctx.count, "foo", _ctx.count, "foo", _ctx.count))
- _renderEffect(() => _setDOMProp(n0, "id", _ctx.count))
- _setInheritAttrs(["id"])
+ 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
+ }
+ })
return n0
}"
`;
`;
exports[`compile > expression parsing > v-bind 1`] = `
-"((_ctx) => {
+"
const n0 = t0()
- _renderEffect(() => _setDynamicProps(n0, [{ [key.value+1]: _unref(foo)[key.value+1]() }], true))
- _setInheritAttrs(true)
+ 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)))
return n0
-})()"
+"
`;
exports[`compile > fragment 1`] = `
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: children transform > children & sibling references 1`] = `
- "import { next as _next, createTextNode as _createTextNode, insert as _insert, renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue';
-"import { next as _next, createTextNode as _createTextNode, insert as _insert, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"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>")
export function render(_ctx) {
`;
exports[`compiler: element transform > props merging: class 1`] = `
- "import { renderEffect as _renderEffect, setClass as _setClass, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setClass as _setClass, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setClass as _setClass, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setClass(n0, ["foo", { bar: _ctx.isBar }], true))
- _setInheritAttrs(["class"])
+ let _isBar
+ _renderEffect(() => _isBar !== _ctx.isBar && _setClass(n0, ["foo", { bar: (_isBar = _ctx.isBar) }], true))
return n0
}"
`;
`;
exports[`compiler: element transform > props merging: style 1`] = `
- "import { renderEffect as _renderEffect, setStyle as _setStyle, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setStyle as _setStyle, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setStyle as _setStyle, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
`;
exports[`compiler: element transform > v-bind="obj" 1`] = `
- "import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDynamicProps(n0, [_ctx.obj], true))
- _setInheritAttrs(true)
+ let _obj
+ _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [_ctx.obj], true)))
return n0
}"
`;
exports[`compiler: element transform > v-bind="obj" after static prop 1`] = `
- "import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDynamicProps(n0, [{ id: "foo" }, _ctx.obj], true))
- _setInheritAttrs(true)
+ let _obj
+ _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [{ id: "foo" }, _ctx.obj], true)))
return n0
}"
`;
exports[`compiler: element transform > v-bind="obj" before static prop 1`] = `
- "import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDynamicProps(n0, [_ctx.obj, { id: "foo" }], true))
- _setInheritAttrs(true)
+ let _obj
+ _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [_ctx.obj, { id: "foo" }], true)))
return n0
}"
`;
exports[`compiler: element transform > v-bind="obj" between static props 1`] = `
- "import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDynamicProps(n0, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true))
- _setInheritAttrs(true)
+ let _obj
+ _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true)))
return n0
}"
`;
exports[`compiler: element transform > v-on="obj" 1`] = `
- "import { renderEffect as _renderEffect, setDynamicEvents as _setDynamicEvents, template as _template } from 'vue';
-"import { setDynamicEvents as _setDynamicEvents, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDynamicEvents as _setDynamicEvents, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: template ref transform > dynamic ref 1`] = `
--"import { renderEffect as _renderEffect, setRef as _setRef, template as _template } from 'vue/vapor';
++"import { renderEffect as _renderEffect, setRef as _setRef, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
_renderEffect(() => r0 = _setRef(n0, _ctx.foo, r0))
return n0
}"
--`;
++`
exports[`compiler: template ref transform > ref + v-for 1`] = `
--"import { setRef as _setRef, createFor as _createFor, template as _template } from 'vue/vapor';
++"import { setRef as _setRef, createFor as _createFor, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
})
return n0
}"
--`;
++`
exports[`compiler: template ref transform > ref + v-if 1`] = `
--"import { setRef as _setRef, createIf as _createIf, template as _template } from 'vue/vapor';
++"import { setRef as _setRef, createIf as _createIf, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
})
return n0
}"
--`;
++`
exports[`compiler: template ref transform > static ref 1`] = `
--"import { setRef as _setRef, template as _template } from 'vue/vapor';
++"import { setRef as _setRef, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
_setRef(n0, "foo")
return n0
}"
--`;
++`
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: template ref transform > dynamic ref 1`] = `
- "import { renderEffect as _renderEffect, setRef as _setRef, template as _template } from 'vue';
-"import { setRef as _setRef, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setRef as _setRef, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler v-bind > .attr modifier 1`] = `
- "import { renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setAttr(n0, "foo-bar", _ctx.id))
- _setInheritAttrs(["foo-bar"])
+ let _id
+ _renderEffect(() => _id !== _ctx.id && _setAttr(n0, "foo-bar", (_id = _ctx.id)))
return n0
}"
`;
exports[`compiler v-bind > .attr modifier w/ innerHTML 1`] = `
- "import { renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setAttr(n0, "innerHTML", _ctx.foo))
- _setInheritAttrs(["innerHTML"])
+ let _foo
+ _renderEffect(() => _foo !== _ctx.foo && _setAttr(n0, "innerHTML", (_foo = _ctx.foo)))
return n0
}"
`;
exports[`compiler v-bind > .attr modifier w/ no expression 1`] = `
- "import { renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setAttr(n0, "foo-bar", _ctx.fooBar))
- _setInheritAttrs(["foo-bar"])
+ let _fooBar
+ _renderEffect(() => _fooBar !== _ctx.fooBar && _setAttr(n0, "foo-bar", (_fooBar = _ctx.fooBar)))
return n0
}"
`;
exports[`compiler v-bind > .attr modifier w/ progress value 1`] = `
- "import { renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<progress></progress>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setAttr(n0, "value", _ctx.foo))
- _setInheritAttrs(["value"])
+ let _foo
+ _renderEffect(() => _foo !== _ctx.foo && _setAttr(n0, "value", (_foo = _ctx.foo)))
return n0
}"
`;
exports[`compiler v-bind > .attr modifier w/ textContent 1`] = `
- "import { renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setAttr(n0, "textContent", _ctx.foo))
- _setInheritAttrs(["textContent"])
+ let _foo
+ _renderEffect(() => _foo !== _ctx.foo && _setAttr(n0, "textContent", (_foo = _ctx.foo)))
return n0
}"
`;
exports[`compiler v-bind > .attr modifier w/ value 1`] = `
- "import { renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setAttr(n0, "value", _ctx.foo))
- _setInheritAttrs(["value"])
+ let _foo
+ _renderEffect(() => _foo !== _ctx.foo && _setAttr(n0, "value", (_foo = _ctx.foo)))
return n0
}"
`;
exports[`compiler v-bind > .camel modifier 1`] = `
- "import { renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.id))
- _setInheritAttrs(["fooBar"])
+ let _id
+ _renderEffect(() => _id !== _ctx.id && (_id = _setDynamicProp(n0, "fooBar", _id, _ctx.id)))
return n0
}"
`;
exports[`compiler v-bind > .camel modifier w/ dynamic arg 1`] = `
- "import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, camelize as _camelize, template as _template } from 'vue';
-"import { camelize as _camelize } from 'vue';
-import { setInheritAttrs as _setInheritAttrs, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { camelize as _camelize, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDynamicProps(n0, [{ [_camelize(_ctx.foo)]: _ctx.id }], true))
- _setInheritAttrs(true)
+ let _foo, _id, _foo_id
+ _renderEffect(() => (_foo !== _ctx.foo || _id !== _ctx.id) && (_foo_id = _setDynamicProps(n0, _foo_id, [{ [_camelize(_ctx.foo)]: _ctx.id }], true)))
return n0
}"
`;
exports[`compiler v-bind > .camel modifier w/ no expression 1`] = `
- "import { renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.fooBar))
- _setInheritAttrs(["fooBar"])
+ let _fooBar
+ _renderEffect(() => _fooBar !== _ctx.fooBar && (_fooBar = _setDynamicProp(n0, "fooBar", _fooBar, _ctx.fooBar)))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier (shorthand) 1`] = `
- "import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id))
- _setInheritAttrs(["fooBar"])
+ let _id
+ _renderEffect(() => _id !== _ctx.id && _setDOMProp(n0, "fooBar", (_id = _ctx.id)))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier (shorthand) w/ innerHTML 1`] = `
- "import { renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setHtml(n0, _ctx.foo))
- _setInheritAttrs(["innerHTML"])
+ let _foo
+ _renderEffect(() => _foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo)))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier (shorthand) w/ no expression 1`] = `
- "import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar))
- _setInheritAttrs(["fooBar"])
+ let _fooBar
+ _renderEffect(() => _fooBar !== _ctx.fooBar && _setDOMProp(n0, "fooBar", (_fooBar = _ctx.fooBar)))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier (shorthand) w/ progress value 1`] = `
- "import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<progress></progress>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDOMProp(n0, "value", _ctx.foo))
- _setInheritAttrs(["value"])
+ let _foo
+ _renderEffect(() => _foo !== _ctx.foo && _setDOMProp(n0, "value", (_foo = _ctx.foo)))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier (shorthand) w/ textContent 1`] = `
- "import { renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setText(n0, _ctx.foo))
- _setInheritAttrs(["textContent"])
+ let _foo
+ _renderEffect(() => _foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo)))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier (shorthand) w/ value 1`] = `
- "import { renderEffect as _renderEffect, setValue as _setValue, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setValue as _setValue, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setValue as _setValue, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setValue(n0, _ctx.foo))
- _setInheritAttrs(["value"])
+ let _foo
+ _renderEffect(() => _foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo)))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier 1`] = `
- "import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id))
- _setInheritAttrs(["fooBar"])
+ let _id
+ _renderEffect(() => _id !== _ctx.id && _setDOMProp(n0, "fooBar", (_id = _ctx.id)))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier w/ dynamic arg 1`] = `
- "import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDynamicProps(n0, [{ ["." + _ctx.fooBar]: _ctx.id }], true))
- _setInheritAttrs(true)
+ let _fooBar, _id, _fooBar_id
+ _renderEffect(() => (_fooBar !== _ctx.fooBar || _id !== _ctx.id) && (_fooBar_id = _setDynamicProps(n0, _fooBar_id, [{ ["." + _ctx.fooBar]: _ctx.id }], true)))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier w/ innerHTML 1`] = `
- "import { renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setHtml(n0, _ctx.foo))
- _setInheritAttrs(["innerHTML"])
+ let _foo
+ _renderEffect(() => _foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo)))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier w/ no expression 1`] = `
- "import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar))
- _setInheritAttrs(["fooBar"])
+ let _fooBar
+ _renderEffect(() => _fooBar !== _ctx.fooBar && _setDOMProp(n0, "fooBar", (_fooBar = _ctx.fooBar)))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier w/ progress value 1`] = `
- "import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<progress></progress>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDOMProp(n0, "value", _ctx.foo))
- _setInheritAttrs(["value"])
+ let _foo
+ _renderEffect(() => _foo !== _ctx.foo && _setDOMProp(n0, "value", (_foo = _ctx.foo)))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier w/ textContent 1`] = `
- "import { renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setText(n0, _ctx.foo))
- _setInheritAttrs(["textContent"])
+ let _foo
+ _renderEffect(() => _foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo)))
return n0
}"
`;
exports[`compiler v-bind > .prop modifier w/ value 1`] = `
- "import { renderEffect as _renderEffect, setValue as _setValue, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setValue as _setValue, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setValue as _setValue, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setValue(n0, _ctx.foo))
- _setInheritAttrs(["value"])
+ let _foo
+ _renderEffect(() => _foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo)))
return n0
}"
`;
exports[`compiler v-bind > :innerHTML 1`] = `
- "import { renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setHtml(n0, _ctx.foo))
- _setInheritAttrs(["innerHTML"])
+ let _foo
+ _renderEffect(() => _foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo)))
return n0
}"
`;
exports[`compiler v-bind > :textContext 1`] = `
- "import { renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setText(n0, _ctx.foo))
- _setInheritAttrs(["textContent"])
+ let _foo
+ _renderEffect(() => _foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo)))
return n0
}"
`;
exports[`compiler v-bind > :value 1`] = `
- "import { renderEffect as _renderEffect, setValue as _setValue, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setValue as _setValue, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setValue as _setValue, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<input>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setValue(n0, _ctx.foo))
- _setInheritAttrs(["value"])
+ let _foo
+ _renderEffect(() => _foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo)))
return n0
}"
`;
exports[`compiler v-bind > :value w/ progress 1`] = `
- "import { renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<progress></progress>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDynamicProp(n0, "value", _ctx.foo))
- _setInheritAttrs(["value"])
+ 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 { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDOMProp(n0, "id", _ctx.id))
- _renderEffect(() => _setDOMProp(n0, "title", _ctx.title))
- _renderEffect(() => _setDOMProp(n0, "lang", _ctx.lang))
- _renderEffect(() => _setDOMProp(n0, "dir", _ctx.dir))
- _renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex))
- _setInheritAttrs(["id", "title", "lang", "dir", "tabindex"])
+ 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 dom prop 1`] = `
- "import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<math></math>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDOMProp(n0, "autofucus", _ctx.autofucus))
- _renderEffect(() => _setDOMProp(n0, "dir", _ctx.dir))
- _renderEffect(() => _setDOMProp(n0, "displaystyle", _ctx.displaystyle))
- _renderEffect(() => _setDOMProp(n0, "mathcolor", _ctx.mathcolor))
- _renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex))
- _setInheritAttrs(["autofucus", "dir", "displaystyle", "mathcolor", "tabindex"])
+ 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 dom prop 1`] = `
- "import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<svg></svg>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDOMProp(n0, "id", _ctx.id))
- _renderEffect(() => _setDOMProp(n0, "lang", _ctx.lang))
- _renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex))
- _setInheritAttrs(["id", "lang", "tabindex"])
+ 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))
+ })
return n0
}"
`;
exports[`compiler v-bind > attributes must be set as attribute 1`] = `
- "import { renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue';
-"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
const t1 = _template("<input>")
const t2 = _template("<textarea></textarea>")
`;
exports[`compiler v-bind > basic 1`] = `
- "import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDOMProp(n0, "id", _ctx.id))
- _setInheritAttrs(["id"])
+ let _id
+ _renderEffect(() => _id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id)))
return n0
}"
`;
-"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
+ 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 { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDynamicProps(n0, [{ [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title }], true))
- _setInheritAttrs(true)
+ 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)))
return n0
}"
`;
exports[`compiler v-bind > dynamic arg w/ static attribute 1`] = `
- "import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDynamicProps(n0, [{ [_ctx.id]: _ctx.id, foo: "bar", checked: "" }], true))
- _setInheritAttrs(true)
+ let _id
+ _renderEffect(() => _id !== _ctx.id && (_id = _setDynamicProps(n0, _id, [{ [_ctx.id]: _ctx.id, foo: "bar", checked: "" }], true)))
return n0
}"
`;
exports[`compiler v-bind > no expression (shorthand) 1`] = `
- "import { renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDynamicProp(n0, "camel-case", _ctx.camelCase))
- _setInheritAttrs(["camel-case"])
+ let _camelCase
+ _renderEffect(() => _camelCase !== _ctx.camelCase && (_camelCase = _setDynamicProp(n0, "camel-case", _camelCase, _ctx.camelCase)))
return n0
}"
`;
exports[`compiler v-bind > no expression 1`] = `
- "import { renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
const n0 = t0()
- _renderEffect(() => _setDOMProp(n0, "id", _ctx.id))
- _setInheritAttrs(["id"])
+ let _id
+ _renderEffect(() => _id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id)))
return n0
}"
`;
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: v-for > array de-structured value 1`] = `
- "import { renderEffect as _renderEffect, setText as _setText, withDestructure as _withDestructure, createFor as _createFor, template as _template } from 'vue';
-"import { setText as _setText, renderEffect as _renderEffect, withDestructure as _withDestructure, createFor as _createFor, template as _template } from 'vue/vapor';
++"import { setText as _setText, renderEffect as _renderEffect, withDestructure as _withDestructure, createFor as _createFor, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
`;
exports[`compiler: v-for > basic v-for 1`] = `
- "import { delegate as _delegate, renderEffect as _renderEffect, setText as _setText, createFor as _createFor, delegateEvents as _delegateEvents, template as _template } from 'vue';
-"import { delegate as _delegate, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, delegateEvents as _delegateEvents, template as _template } from 'vue/vapor';
++"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>")
_delegateEvents("click")
`;
exports[`compiler: v-for > function params w/ prefixIdentifiers: false 1`] = `
- "import { renderEffect as _renderEffect, setText as _setText, createFor as _createFor, template as _template } from 'vue';
-"import { setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue/vapor';
++"import { setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
`;
exports[`compiler: v-for > multi effect 1`] = `
- "import { renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, createFor as _createFor, template as _template } from 'vue';
-"import { setInheritAttrs as _setInheritAttrs, setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue/vapor';
++"import { setDynamicProp as _setDynamicProp, 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))
- _renderEffect(() => _setDynamicProp(n2, "index", _ctx0[1].value))
- _setInheritAttrs(["item", "index"])
+ _renderEffect(() => {
+ _setDynamicProp(n2, "item", _ctx0[0].value)
+ _setDynamicProp(n2, "index", _ctx0[1].value)
+ })
return n2
})
return n0
`;
exports[`compiler: v-for > nested v-for 1`] = `
- "import { renderEffect as _renderEffect, setText as _setText, createFor as _createFor, insert as _insert, template as _template } from 'vue';
-"import { setText as _setText, renderEffect as _renderEffect, createFor as _createFor, insert as _insert, template as _template } from 'vue/vapor';
++"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>")
`;
exports[`compiler: v-for > object de-structured value 1`] = `
- "import { renderEffect as _renderEffect, setText as _setText, withDestructure as _withDestructure, createFor as _createFor, template as _template } from 'vue';
-"import { setText as _setText, renderEffect as _renderEffect, withDestructure as _withDestructure, createFor as _createFor, template as _template } from 'vue/vapor';
++"import { setText as _setText, renderEffect as _renderEffect, withDestructure as _withDestructure, createFor as _createFor, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
`;
exports[`compiler: v-for > v-for aliases w/ complex expressions 1`] = `
- "import { renderEffect as _renderEffect, setText as _setText, withDestructure as _withDestructure, createFor as _createFor, template as _template } from 'vue';
-"import { setText as _setText, renderEffect as _renderEffect, withDestructure as _withDestructure, createFor as _createFor, template as _template } from 'vue/vapor';
++"import { setText as _setText, renderEffect as _renderEffect, withDestructure as _withDestructure, createFor as _createFor, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`v-html > should convert v-html to innerHTML 1`] = `
- "import { renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue';
-"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx, $props, $emit, $attrs, $slots) {
`;
exports[`v-html > should raise error and ignore children when v-html is present 1`] = `
- "import { renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue';
-"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: v-if > basic v-if 1`] = `
- "import { renderEffect as _renderEffect, setText as _setText, createIf as _createIf, template as _template } from 'vue';
-"import { setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue/vapor';
++"import { setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
`;
exports[`compiler: v-if > comment between branches 1`] = `
- "import { createIf as _createIf, renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue';
-"import { createIf as _createIf, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { createIf as _createIf, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
const t1 = _template("<!--foo-->")
const t2 = _template("<p></p>")
`;
exports[`compiler: v-if > template v-if 1`] = `
- "import { renderEffect as _renderEffect, setText as _setText, createIf as _createIf, template as _template } from 'vue';
-"import { setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue/vapor';
++"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>")
`;
exports[`compiler: vModel transform > should support w/ dynamic v-bind 1`] = `
- "import { vModelDynamic as _vModelDynamic, withDirectives as _withDirectives, delegate as _delegate, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue';
-"import { vModelDynamic as _vModelDynamic, withDirectives as _withDirectives, delegate as _delegate, setInheritAttrs as _setInheritAttrs, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"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>")
export function render(_ctx) {
const n0 = t0()
_withDirectives(n0, [[_vModelDynamic, () => _ctx.model]])
_delegate(n0, "update:modelValue", () => $event => (_ctx.model = $event))
- _renderEffect(() => _setDynamicProps(n0, [_ctx.obj], true))
- _setInheritAttrs(true)
+ let _obj
+ _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [_ctx.obj], true)))
return n0
}"
`;
`;
exports[`v-on > dynamic arg 1`] = `
- "import { renderEffect as _renderEffect, on as _on, template as _template } from 'vue';
-"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
`;
exports[`v-on > dynamic arg with complex exp prefixing 1`] = `
- "import { renderEffect as _renderEffect, on as _on, template as _template } from 'vue';
-"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
`;
exports[`v-on > dynamic arg with prefixing 1`] = `
- "import { renderEffect as _renderEffect, on as _on, template as _template } from 'vue';
-"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
`;
exports[`v-on > should transform click.middle 2`] = `
- "import { renderEffect as _renderEffect, on as _on, template as _template } from 'vue';
-"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
`;
exports[`v-on > should transform click.right 2`] = `
- "import { renderEffect as _renderEffect, on as _on, template as _template } from 'vue';
-"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
`;
exports[`v-on > should wrap both for dynamic key event w/ left/right modifiers 1`] = `
- "import { renderEffect as _renderEffect, on as _on, template as _template } from 'vue';
-"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`v-text > should convert v-text to textContent 1`] = `
- "import { renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue';
-"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx, $props, $emit, $attrs, $slots) {
`;
exports[`v-text > should raise error and ignore children when v-text is present 1`] = `
- "import { renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue';
-"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue/vapor';
++"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div></div>")
export function render(_ctx) {
CodegenOptions as BaseCodegenOptions,
BaseCodegenResult,
} from '@vue/compiler-dom'
- import type { BlockIRNode, CoreHelper, RootIRNode, VaporHelper } from './ir'
-import type { BlockIRNode, IREffect, RootIRNode, VaporHelper } from './ir'
++import type {
++ BlockIRNode,
++ CoreHelper,
++ IREffect,
++ RootIRNode,
++ VaporHelper,
++} from './ir'
import { extend, remove } from '@vue/shared'
import { genBlockContent } from './generators/block'
import { genTemplates } from './generators/template'
oper: SetHtmlIRNode,
context: CodegenContext,
): CodeFragment[] {
- const { helper } = context
- return [
- NEWLINE,
- ...genCall(
- helper('setHtml'),
- `n${oper.element}`,
- genExpression(oper.value, context),
- ),
- ]
- const { vaporHelper, shouldCacheRenderEffectDeps } = context
++ const { helper, shouldCacheRenderEffectDeps } = context
+ const { value, element } = oper
+ let html = genExpression(value, context)
+ if (shouldCacheRenderEffectDeps()) {
+ processValues(context, [html])
+ }
- return [NEWLINE, ...genCall(vaporHelper('setHtml'), `n${element}`, html)]
++ return [NEWLINE, ...genCall(helper('setHtml'), `n${element}`, html)]
}
effects: IREffect[],
context: CodegenContext,
): CodeFragment[] {
- const [frag, push] = buildCodeFragment()
- for (const effect of effects) {
- push(...genEffect(effect, context))
- const { vaporHelper } = context
++ const { helper } = context
+ const [frag, push, unshift] = buildCodeFragment()
+ const declareNames = new Set<string>()
+ let operationsCount = 0
+ for (let i = 0; i < effects.length; i++) {
+ const effect = (context.processingRenderEffect = effects[i])
+ operationsCount += effect.operations.length
+ const frags = genEffect(effect, context, declareNames)
+ const needSemi = frag[frag.length - 1] === ')' && frags[0] === '('
+ i > 0 && push(NEWLINE)
+ push(needSemi ? ';' : undefined, ...frags)
+ }
+
+ const newLineCount = frag.filter(frag => frag === NEWLINE).length
+ if (newLineCount > 1 || operationsCount > 1) {
+ unshift(`{`, INDENT_START, NEWLINE)
+ push(INDENT_END, NEWLINE, '}')
+ }
+
+ if (effects.length) {
- unshift(NEWLINE, `${vaporHelper('renderEffect')}(() => `)
++ unshift(NEWLINE, `${helper('renderEffect')}(() => `)
+ push(`)`)
+ }
+
+ // declare variables: let _foo, _bar
+ if (declareNames.size) {
+ frag.splice(1, 0, `let ${[...declareNames].join(', ')}`, NEWLINE)
}
return frag
}
prop: { key, values, modifier },
tag,
} = oper
-
const { helperName, omitKey } = getRuntimeHelper(tag, key.content, modifier)
+ const propValue = genPropValue(values, context)
+ const { prevValueName, shouldWrapInParentheses } = processPropValues(
+ context,
+ helperName,
+ [propValue],
+ )
return [
NEWLINE,
+ ...(prevValueName
+ ? [shouldWrapInParentheses ? `(` : undefined, `${prevValueName} = `]
+ : []),
...genCall(
- [vaporHelper(helperName), null],
+ [helper(helperName), null],
`n${oper.element}`,
omitKey ? false : genExpression(key, context),
- genPropValue(values, context),
+ ...(prevValueName ? [`${prevValueName}`] : []),
+ propValue,
// only `setClass` and `setStyle` need merge inherit attr
oper.root && (helperName === 'setClass' || helperName === 'setStyle')
? 'true'
oper: SetDynamicPropsIRNode,
context: CodegenContext,
): CodeFragment[] {
- const { vaporHelper } = context
+ const { helper } = context
+ const values = oper.props.map(props =>
+ Array.isArray(props)
+ ? genLiteralObjectProps(props, context) // static and dynamic arg props
+ : props.kind === IRDynamicPropsKind.ATTRIBUTE
+ ? genLiteralObjectProps([props], context) // dynamic arg props
+ : genExpression(props.value, context),
+ ) // v-bind=""
+ const { prevValueName, shouldWrapInParentheses } = processPropValues(
+ context,
+ 'setDynamicProps',
+ values,
+ )
return [
NEWLINE,
+ ...(prevValueName
+ ? [shouldWrapInParentheses ? `(` : undefined, `${prevValueName} = `]
+ : []),
...genCall(
- vaporHelper('setDynamicProps'),
+ helper('setDynamicProps'),
`n${oper.element}`,
- genMulti(
- DELIMITERS_ARRAY,
- ...oper.props.map(
- props =>
- Array.isArray(props)
- ? genLiteralObjectProps(props, context) // static and dynamic arg props
- : props.kind === IRDynamicPropsKind.ATTRIBUTE
- ? genLiteralObjectProps([props], context) // dynamic arg props
- : genExpression(props.value, context), // v-bind=""
- ),
- ),
+ ...(prevValueName ? [`${prevValueName}`] : []),
+ genMulti(DELIMITERS_ARRAY, ...values),
oper.root && 'true',
),
+ ...(prevValueName && shouldWrapInParentheses ? [`)`] : []),
]
}
oper: SetTextIRNode,
context: CodegenContext,
): CodeFragment[] {
- const { helper } = context
- const { vaporHelper, shouldCacheRenderEffectDeps } = context
++ const { helper, shouldCacheRenderEffectDeps } = context
const { element, values } = oper
- return [
- NEWLINE,
- ...genCall(
- helper('setText'),
- `n${element}`,
- ...values.map(value => genExpression(value, context)),
- ),
- ]
+ const texts = values.map(value => genExpression(value, context))
+ if (shouldCacheRenderEffectDeps()) {
+ processValues(context, texts)
+ }
- return [NEWLINE, ...genCall(vaporHelper('setText'), `n${element}`, ...texts)]
++ return [NEWLINE, ...genCall(helper('setText'), `n${element}`, ...texts)]
}
export function genCreateTextNode(
setValue,
} from '../../src/dom/prop'
import { setStyle } from '../../src/dom/style'
-import {
- ComponentInternalInstance,
- setCurrentInstance,
-} from '../../src/component'
-import { getCurrentScope } from '@vue/reactivity'
+import { VaporComponentInstance } from '../../src/component'
+import { currentInstance, simpleSetCurrentInstance } from '@vue/runtime-dom'
- import { getMetadata, recordPropMetadata } from '../../src/componentMetadata'
let removeComponentInstance = NOOP
beforeEach(() => {
-import { EffectScope, isRef } from '@vue/reactivity'
-import { EMPTY_OBJ, isArray, isBuiltInTag, isFunction } from '@vue/shared'
-import type { Block } from './block'
import {
+ type ComponentInternalOptions,
type ComponentPropsOptions,
+ EffectScope,
+ type EmitFn,
+ type EmitsOptions,
+ ErrorCodes,
+ type GenericAppContext,
+ type GenericComponentInstance,
+ type LifecycleHook,
type NormalizedPropsOptions,
- type NormalizedRawProps,
+ type ObjectEmitsOptions,
+ type SuspenseBoundary,
+ callWithErrorHandling,
+ currentInstance,
+ endMeasure,
+ expose,
+ nextUid,
+ popWarningContext,
+ pushWarningContext,
+ queuePostFlushCb,
+ registerHMR,
+ simpleSetCurrentInstance,
+ startMeasure,
+ unregisterHMR,
+ warn,
+} from '@vue/runtime-dom'
+import { type Block, insert, isBlock, remove } from './block'
+import {
+ markRaw,
+ pauseTracking,
+ proxyRefs,
+ resetTracking,
+} from '@vue/reactivity'
- import { EMPTY_OBJ, invokeArrayFns, isFunction, isString } from '@vue/shared'
++import {
++ EMPTY_OBJ,
++ extend,
++ invokeArrayFns,
++ isFunction,
++ isString,
++} from '@vue/shared'
+import {
+ type DynamicPropsSource,
type RawProps,
- initProps,
+ getPropsProxyHandlers,
+ hasFallthroughAttrs,
normalizePropsOptions,
+ resolveDynamicProps,
+ setupPropsValidation,
} from './componentProps'
- import { setClass, setDynamicProp } from './dom/prop'
+import { renderEffect } from './renderEffect'
+import { emit, normalizeEmitsOptions } from './componentEmits'
+import { setStyle } from './dom/style'
++import { setClass, setDynamicProp, setDynamicProps } from './dom/prop'
import {
- type EmitFn,
- type EmitsOptions,
- type ObjectEmitsOptions,
- emit,
- normalizeEmitsOptions,
-} from './componentEmits'
-import { type RawSlots, type StaticSlots, initSlots } from './componentSlots'
-import { VaporLifecycleHooks } from './enums'
-import { warn } from './warning'
-import {
- type AppConfig,
- type AppContext,
- createAppContext,
-} from './apiCreateVaporApp'
-import type { Data } from '@vue/runtime-shared'
-
-export type Component = FunctionalComponent | ObjectComponent
-
-export type SetupFn = (props: any, ctx: SetupContext) => Block | Data | void
-export type FunctionalComponent = SetupFn &
- Omit<ObjectComponent, 'setup'> & {
+ type DynamicSlotSource,
+ type RawSlots,
+ type Slot,
+ type StaticSlots,
+ dynamicSlotsProxyHandlers,
+ getSlot,
+} from './componentSlots'
+import { hmrReload, hmrRerender } from './hmr'
+
+export { currentInstance } from '@vue/runtime-dom'
+
+export type VaporComponent = FunctionalVaporComponent | ObjectVaporComponent
+
+export type VaporSetupFn = (
+ props: any,
+ ctx: Pick<VaporComponentInstance, 'slots' | 'attrs' | 'emit' | 'expose'>,
+) => Block | Record<string, any> | undefined
+
+export type FunctionalVaporComponent = VaporSetupFn &
+ Omit<ObjectVaporComponent, 'setup'> & {
displayName?: string
- }
-
-export class SetupContext<E = EmitsOptions> {
- attrs: Data
- emit: EmitFn<E>
- slots: Readonly<StaticSlots>
- expose: (exposed?: Record<string, any>) => void
-
- constructor(instance: ComponentInternalInstance) {
- this.attrs = instance.attrs
- this.emit = instance.emit as EmitFn<E>
- this.slots = instance.slots
- this.expose = (exposed = {}) => {
- instance.exposed = exposed
- }
- }
-}
-
-export function createSetupContext(
- instance: ComponentInternalInstance,
-): SetupContext {
- if (__DEV__) {
- // We use getters in dev in case libs like test-utils overwrite instance
- // properties (overwrites should not be done in prod)
- return Object.freeze({
- get attrs() {
- return getAttrsProxy(instance)
- },
- get slots() {
- return getSlotsProxy(instance)
- },
- get emit() {
- return (event: string, ...args: any[]) => instance.emit(event, ...args)
- },
- expose: (exposed?: Record<string, any>) => {
- if (instance.exposed) {
- warn(`expose() should be called only once per setup().`)
- }
- if (exposed != null) {
- let exposedType: string = typeof exposed
- if (exposedType === 'object') {
- if (isArray(exposed)) {
- exposedType = 'array'
- } else if (isRef(exposed)) {
- exposedType = 'ref'
- }
- }
- if (exposedType !== 'object') {
- warn(
- `expose() should be passed a plain object, received ${exposedType}.`,
- )
- }
- }
- instance.exposed = exposed || {}
- },
- }) as SetupContext
- } else {
- return new SetupContext(instance)
- }
-}
+ } & SharedInternalOptions
-export interface ObjectComponent extends ComponentInternalOptions {
- setup?: SetupFn
+export interface ObjectVaporComponent
+ extends ComponentInternalOptions,
+ SharedInternalOptions {
+ setup?: VaporSetupFn
inheritAttrs?: boolean
props?: ComponentPropsOptions
emits?: EmitsOptions
vapor?: boolean
}
-// Note: can't mark this whole interface internal because some public interfaces
-// extend it.
-export interface ComponentInternalOptions {
+interface SharedInternalOptions {
/**
- * @internal
+ * Cached normalized props options.
+ * In vapor mode there are no mixins so normalized options can be cached
+ * directly on the component
*/
- __scopeId?: string
+ __propsOptions?: NormalizedPropsOptions
/**
- * @internal
+ * Cached normalized props proxy handlers.
*/
- __cssModules?: Data
+ __propsHandlers?: [ProxyHandler<any> | null, ProxyHandler<any>]
/**
- * @internal
+ * Cached normalized emits options.
*/
- __hmrId?: string
- /**
- * Compat build only, for bailing out of certain compatibility behavior
- */
- __isBuiltIn?: boolean
- /**
- * This one should be exposed so that devtools can make use of it
- */
- __file?: string
- /**
- * name inferred from filename
- */
- __name?: string
+ __emitsOptions?: ObjectEmitsOptions
+}
+
+// In TypeScript, it is actually impossible to have a record type with only
+// specific properties that have a different type from the indexed type.
+// This makes our rawProps / rawSlots shape difficult to satisfy when calling
+// `createComponent` - luckily this is not user-facing, so we don't need to be
+// 100% strict. Here we use intentionally wider types to make `createComponent`
+// more ergonomic in tests and internal call sites, where we immediately cast
+// them into the stricter types.
+export type LooseRawProps = Record<
+ string,
+ (() => unknown) | DynamicPropsSource[]
+> & {
+ $?: DynamicPropsSource[]
}
-type LifecycleHook<TFn = Function> = TFn[] | null
+type LooseRawSlots = Record<string, Slot | DynamicSlotSource[]> & {
+ $?: DynamicSlotSource[]
+}
+
+export function createComponent(
+ component: VaporComponent,
+ rawProps?: LooseRawProps | null,
+ rawSlots?: LooseRawSlots | null,
+ isSingleRoot?: boolean,
+ appContext?: GenericAppContext,
+): VaporComponentInstance {
+ // check if we are the single root of the parent
+ // if yes, inject parent attrs as dynamic props source
+ if (
+ isSingleRoot &&
+ component.inheritAttrs !== false &&
+ isVaporComponent(currentInstance) &&
+ currentInstance.hasFallthrough
+ ) {
+ const attrs = currentInstance.attrs
+ if (rawProps) {
+ ;((rawProps as RawProps).$ || ((rawProps as RawProps).$ = [])).push(
+ () => attrs,
+ )
+ } else {
+ rawProps = { $: [() => attrs] } as RawProps
+ }
+ }
-export let currentInstance: ComponentInternalInstance | null = null
+ const instance = new VaporComponentInstance(
+ component,
+ rawProps as RawProps,
+ rawSlots as RawSlots,
+ appContext,
+ )
-export const getCurrentInstance: () => ComponentInternalInstance | null = () =>
- currentInstance
+ if (__DEV__) {
+ pushWarningContext(instance)
+ startMeasure(instance, `init`)
+ }
-export const setCurrentInstance = (instance: ComponentInternalInstance) => {
const prev = currentInstance
- currentInstance = instance
- return (): void => {
- currentInstance = prev
+ simpleSetCurrentInstance(instance)
+ pauseTracking()
+
+ const setupFn = isFunction(component) ? component : component.setup
+ const setupResult = setupFn
+ ? callWithErrorHandling(setupFn, instance, ErrorCodes.SETUP_FUNCTION, [
+ instance.props,
+ instance,
+ ]) || EMPTY_OBJ
+ : EMPTY_OBJ
+
+ if (__DEV__ && !isBlock(setupResult)) {
+ if (isFunction(component)) {
+ warn(`Functional vapor component must return a block directly.`)
+ instance.block = []
+ } else if (!component.render) {
+ warn(
+ `Vapor component setup() returned non-block value, and has no render function.`,
+ )
+ instance.block = []
+ } else {
+ instance.devtoolsRawSetupState = setupResult
+ instance.setupState = proxyRefs(setupResult)
+ devRender(instance)
+
+ // HMR
+ if (component.__hmrId) {
+ registerHMR(instance)
+ instance.isSingleRoot = isSingleRoot
+ instance.hmrRerender = hmrRerender.bind(null, instance)
+ instance.hmrReload = hmrReload.bind(null, instance)
+ }
+ }
+ } else {
+ // in prod result can only be block
+ instance.block = setupResult as Block
}
-}
-export const unsetCurrentInstance = (): void => {
- currentInstance && currentInstance.scope.off()
- currentInstance = null
+ // single root, inherit attrs
+ if (
+ instance.hasFallthrough &&
+ component.inheritAttrs !== false &&
+ instance.block instanceof Element &&
+ Object.keys(instance.attrs).length
+ ) {
++ let prevProps: any
+ renderEffect(() => {
- for (const key in instance.attrs) {
- setDynamicProp(instance.block as Element, key, instance.attrs[key])
- }
++ setDynamicProps(instance.block as Element, prevProps, [
++ (prevProps = extend({}, instance.attrs)),
++ ])
+ })
+ }
+
+ resetTracking()
+ simpleSetCurrentInstance(prev, instance)
+
+ if (__DEV__) {
+ popWarningContext()
+ endMeasure(instance, 'init')
+ }
+
+ return instance
}
-const emptyAppContext = createAppContext()
+/**
+ * dev only
+ */
+export function devRender(instance: VaporComponentInstance): void {
+ instance.block =
+ callWithErrorHandling(
+ instance.type.render!,
+ instance,
+ ErrorCodes.RENDER_FUNCTION,
+ [
+ instance.setupState,
+ instance.props,
+ instance.emit,
+ instance.attrs,
+ instance.slots,
+ ],
+ ) || []
+}
-let uid = 0
-export class ComponentInternalInstance {
- vapor = true
+const emptyContext: GenericAppContext = {
+ app: null as any,
+ config: {},
+ provides: /*@__PURE__*/ Object.create(null),
+}
+export class VaporComponentInstance implements GenericComponentInstance {
+ vapor: true
uid: number
- appContext: AppContext
-
- type: Component
- block: Block | null
- container: ParentNode
- parent: ComponentInternalInstance | null
- root: ComponentInternalInstance
+ type: VaporComponent
+ parent: GenericComponentInstance | null
+ children: VaporComponentInstance[] // TODO handle vdom children
+ appContext: GenericAppContext
- provides: Data
+ block: Block
scope: EffectScope
- comps: Set<ComponentInternalInstance>
- scopeIds: string[]
- rawProps: NormalizedRawProps
- propsOptions: NormalizedPropsOptions
- emitsOptions: ObjectEmitsOptions | null
+ rawProps: RawProps
+ rawSlots: RawSlots
+
+ props: Record<string, any>
+ attrs: Record<string, any>
+ propsDefaults: Record<string, any> | null
+
+ slots: StaticSlots
- // state
- setupState: Data
- setupContext: SetupContext | null
- props: Data
emit: EmitFn
emitted: Record<string, boolean> | null
- attrs: Data
- /**
- * - `undefined` : no props
- * - `false` : all props are static
- * - `string[]` : list of props are dynamic
- * - `true` : all props as dynamic
- */
- dynamicAttrs?: string[] | boolean
- slots: StaticSlots
- refs: Data
- // exposed properties via expose()
- exposed?: Record<string, any>
- attrsProxy?: Data
- slotsProxy?: StaticSlots
+ expose: (exposed: Record<string, any>) => void
+ exposed: Record<string, any> | null
+ exposeProxy: Record<string, any> | null
+
+ // for useTemplateRef()
+ refs: Record<string, any>
+ // for provide / inject
+ provides: Record<string, any>
+ // for useId
+ ids: [string, number, number]
+ // for suspense
+ suspense: SuspenseBoundary | null
+
+ hasFallthrough: boolean
- // lifecycle
+ // lifecycle hooks
isMounted: boolean
isUnmounted: boolean
+ isDeactivated: boolean
isUpdating: boolean
- // TODO: registory of provides, lifecycles, ...
- /**
- * @internal
- */
- // [VaporLifecycleHooks.BEFORE_MOUNT]: LifecycleHook;
- bm: LifecycleHook
- /**
- * @internal
- */
- // [VaporLifecycleHooks.MOUNTED]: LifecycleHook;
- m: LifecycleHook
- /**
- * @internal
- */
- // [VaporLifecycleHooks.BEFORE_UPDATE]: LifecycleHook;
- bu: LifecycleHook
- /**
- * @internal
- */
- // [VaporLifecycleHooks.UPDATED]: LifecycleHook;
- u: LifecycleHook
- /**
- * @internal
- */
- // [VaporLifecycleHooks.BEFORE_UNMOUNT]: LifecycleHook;
- bum: LifecycleHook
- /**
- * @internal
- */
- // [VaporLifecycleHooks.UNMOUNTED]: LifecycleHook;
- um: LifecycleHook
- /**
- * @internal
- */
- // [VaporLifecycleHooks.RENDER_TRACKED]: LifecycleHook;
- rtc: LifecycleHook
- /**
- * @internal
- */
- // [VaporLifecycleHooks.RENDER_TRIGGERED]: LifecycleHook;
- rtg: LifecycleHook
- /**
- * @internal
- */
- // [VaporLifecycleHooks.ACTIVATED]: LifecycleHook;
- a: LifecycleHook
- /**
- * @internal
- */
- // [VaporLifecycleHooks.DEACTIVATED]: LifecycleHook;
- da: LifecycleHook
- /**
- * @internal
- */
- // [VaporLifecycleHooks.ERROR_CAPTURED]: LifecycleHook
- ec: LifecycleHook
+
+ bc?: LifecycleHook // LifecycleHooks.BEFORE_CREATE
+ c?: LifecycleHook // LifecycleHooks.CREATED
+ bm?: LifecycleHook // LifecycleHooks.BEFORE_MOUNT
+ m?: LifecycleHook // LifecycleHooks.MOUNTED
+ bu?: LifecycleHook // LifecycleHooks.BEFORE_UPDATE
+ u?: LifecycleHook // LifecycleHooks.UPDATED
+ um?: LifecycleHook // LifecycleHooks.BEFORE_UNMOUNT
+ bum?: LifecycleHook // LifecycleHooks.UNMOUNTED
+ da?: LifecycleHook // LifecycleHooks.DEACTIVATED
+ a?: LifecycleHook // LifecycleHooks.ACTIVATED
+ rtg?: LifecycleHook // LifecycleHooks.RENDER_TRACKED
+ rtc?: LifecycleHook // LifecycleHooks.RENDER_TRIGGERED
+ ec?: LifecycleHook // LifecycleHooks.ERROR_CAPTURED
+ sp?: LifecycleHook<() => Promise<unknown>> // LifecycleHooks.SERVER_PREFETCH
+
+ // dev only
+ setupState?: Record<string, any>
+ devtoolsRawSetupState?: any
+ hmrRerender?: () => void
+ hmrReload?: (newComp: VaporComponent) => void
+ propsOptions?: NormalizedPropsOptions
+ emitsOptions?: ObjectEmitsOptions | null
+ isSingleRoot?: boolean
constructor(
- component: Component,
- rawProps: RawProps | null,
- slots: RawSlots | null,
- once: boolean = false,
- // application root node only
- appContext?: AppContext,
+ comp: VaporComponent,
+ rawProps?: RawProps | null,
+ rawSlots?: RawSlots | null,
+ appContext?: GenericAppContext,
) {
- this.uid = uid++
- const parent = (this.parent = currentInstance)
- this.root = parent ? parent.root : this
- const _appContext = (this.appContext =
- (parent ? parent.appContext : appContext) || emptyAppContext)
- this.block = null
- this.container = null!
- this.root = null!
+ this.vapor = true
+ this.uid = nextUid()
+ this.type = comp
+ this.parent = currentInstance // TODO proper parent source when inside vdom instance
+ this.children = []
+
+ if (currentInstance) {
+ if (isVaporComponent(currentInstance)) {
+ currentInstance.children.push(this)
+ }
+ this.appContext = currentInstance.appContext
+ this.provides = currentInstance.provides
+ this.ids = currentInstance.ids
+ } else {
+ this.appContext = appContext || emptyContext
+ this.provides = Object.create(this.appContext.provides)
+ this.ids = ['', 0, 0]
+ }
+
+ this.block = null! // to be set
this.scope = new EffectScope(true)
- this.provides = parent
- ? parent.provides
- : Object.create(_appContext.provides)
- this.type = component
- this.comps = new Set()
- this.scopeIds = []
- this.rawProps = null!
- this.propsOptions = normalizePropsOptions(component)
- this.emitsOptions = normalizeEmitsOptions(component)
-
- // state
- this.setupState = EMPTY_OBJ
- this.setupContext = null
- this.props = EMPTY_OBJ
+
this.emit = emit.bind(null, this)
- this.emitted = null
- this.attrs = EMPTY_OBJ
- this.slots = EMPTY_OBJ
+ this.expose = expose.bind(null, this)
this.refs = EMPTY_OBJ
+ this.emitted =
+ this.exposed =
+ this.exposeProxy =
+ this.propsDefaults =
+ this.suspense =
+ null
+
+ this.isMounted =
+ this.isUnmounted =
+ this.isUpdating =
+ this.isDeactivated =
+ false
+
+ // init props
+ this.rawProps = rawProps || EMPTY_OBJ
+ this.hasFallthrough = hasFallthroughAttrs(comp, rawProps)
+ if (rawProps || comp.props) {
+ const [propsHandlers, attrsHandlers] = getPropsProxyHandlers(comp)
+ this.attrs = new Proxy(this, attrsHandlers)
+ this.props = comp.props
+ ? new Proxy(this, propsHandlers!)
+ : isFunction(comp)
+ ? this.attrs
+ : EMPTY_OBJ
+ } else {
+ this.props = this.attrs = EMPTY_OBJ
+ }
- // lifecycle
- this.isMounted = false
- this.isUnmounted = false
- this.isUpdating = false
- this[VaporLifecycleHooks.BEFORE_MOUNT] = null
- this[VaporLifecycleHooks.MOUNTED] = null
- this[VaporLifecycleHooks.BEFORE_UPDATE] = null
- this[VaporLifecycleHooks.UPDATED] = null
- this[VaporLifecycleHooks.BEFORE_UNMOUNT] = null
- this[VaporLifecycleHooks.UNMOUNTED] = null
- this[VaporLifecycleHooks.RENDER_TRACKED] = null
- this[VaporLifecycleHooks.RENDER_TRIGGERED] = null
- this[VaporLifecycleHooks.ACTIVATED] = null
- this[VaporLifecycleHooks.DEACTIVATED] = null
- this[VaporLifecycleHooks.ERROR_CAPTURED] = null
-
- initProps(this, rawProps, !isFunction(component), once)
- initSlots(this, slots)
+ // init slots
+ this.rawSlots = rawSlots || EMPTY_OBJ
+ this.slots = rawSlots
+ ? rawSlots.$
+ ? new Proxy(rawSlots, dynamicSlotsProxyHandlers)
+ : rawSlots
+ : EMPTY_OBJ
+
+ if (__DEV__) {
+ // validate props
+ if (rawProps) setupPropsValidation(this)
+ // cache normalized options for dev only emit check
+ this.propsOptions = normalizePropsOptions(comp)
+ this.emitsOptions = normalizeEmitsOptions(comp)
+ }
}
}
}
/**
- * Dev-only
+ * Used when a component cannot be resolved at compile time
+ * and needs rely on runtime resolution - where it might fallback to a plain
+ * element if the resolution fails.
*/
-export function getAttrsProxy(instance: ComponentInternalInstance): Data {
- return (
- instance.attrsProxy ||
- (instance.attrsProxy = new Proxy(instance.attrs, {
- get(target, key: string) {
- return target[key]
- },
- set() {
- warn(`setupContext.attrs is readonly.`)
- return false
- },
- deleteProperty() {
- warn(`setupContext.attrs is readonly.`)
- return false
- },
- }))
- )
-}
+export function createComponentWithFallback(
+ comp: VaporComponent | string,
+ rawProps: RawProps | null | undefined,
+ rawSlots: RawSlots | null | undefined,
+ isSingleRoot?: boolean,
+): HTMLElement | VaporComponentInstance {
+ if (!isString(comp)) {
+ return createComponent(comp, rawProps, rawSlots, isSingleRoot)
+ }
-/**
- * Dev-only
- */
-export function getSlotsProxy(
- instance: ComponentInternalInstance,
-): StaticSlots {
- return (
- instance.slotsProxy ||
- (instance.slotsProxy = new Proxy(instance.slots, {
- get(target, key: string) {
- return target[key]
- },
- }))
- )
-}
+ // eslint-disable-next-line no-restricted-globals
+ const el = document.createElement(comp)
+
+ if (rawProps) {
++ let prevProps: any, prevStyle: any
+ renderEffect(() => {
+ let classes: unknown[] | undefined
+ let styles: unknown[] | undefined
+ const resolved = resolveDynamicProps(rawProps)
+ for (const key in resolved) {
+ const value = resolved[key]
- if (key === 'class') (classes ||= []).push(value)
- else if (key === 'style') (styles ||= []).push(value)
- else setDynamicProp(el, key, value)
++ if (key === 'class') {
++ ;(classes ||= []).push(value)
++ } else if (key === 'style') {
++ ;(styles ||= []).push(value)
++ } else if (value !== prevProps) {
++ setDynamicProp(el, key, prevProps, (prevProps = value))
++ }
+ }
- if (classes) setClass(el, classes)
- if (styles) setStyle(el, styles)
++ if (classes) setClass(el, classes, isSingleRoot)
++ if (styles) setStyle(el, prevStyle, (prevStyle = styles), isSingleRoot)
+ })
+ }
-export function getComponentName(
- Component: Component,
-): string | false | undefined {
- return isFunction(Component)
- ? Component.displayName || Component.name
- : Component.name || Component.__name
+ if (rawSlots) {
+ if (rawSlots.$) {
+ // TODO dynamic slot fragment
+ } else {
+ insert(getSlot(rawSlots, 'default')!(), el)
+ }
+ }
+
+ return el
}
-export function formatComponentName(
- instance: ComponentInternalInstance | null,
- Component: Component,
- isRoot = false,
-): string {
- let name = getComponentName(Component)
- if (!name && Component.__file) {
- const match = Component.__file.match(/([^/\\]+)\.\w+$/)
- if (match) {
- name = match[1]
- }
+export function mountComponent(
+ instance: VaporComponentInstance,
+ parent: ParentNode,
+ anchor?: Node | null | 0,
+): void {
+ if (__DEV__) {
+ startMeasure(instance, `mount`)
+ }
+ if (!instance.isMounted) {
+ if (instance.bm) invokeArrayFns(instance.bm)
+ insert(instance.block, parent, anchor)
+ if (instance.m) queuePostFlushCb(() => invokeArrayFns(instance.m!))
+ instance.isMounted = true
+ } else {
+ insert(instance.block, parent, anchor)
}
+ if (__DEV__) {
+ endMeasure(instance, `mount`)
+ }
+}
- if (!name && instance && instance.parent) {
- // try to infer the name based on reverse resolution
- const inferFromRegistry = (registry: Record<string, any> | undefined) => {
- for (const key in registry) {
- if (registry[key] === Component) {
- return key
- }
- }
+export function unmountComponent(
+ instance: VaporComponentInstance,
+ parent?: ParentNode,
+): void {
+ if (instance.isMounted && !instance.isUnmounted) {
+ if (__DEV__ && instance.type.__hmrId) {
+ unregisterHMR(instance)
+ }
+ if (instance.bum) invokeArrayFns(instance.bum)
+ instance.scope.stop()
+ for (const c of instance.children) {
+ unmountComponent(c)
+ }
+ if (parent) remove(instance.block, parent)
+ if (instance.um) {
+ queuePostFlushCb(() => invokeArrayFns(instance.um!))
}
- name = inferFromRegistry(instance.appContext.components)
+ instance.isUnmounted = true
+ } else if (parent) {
+ remove(instance.block, parent)
}
-
- return name ? classify(name) : isRoot ? `App` : `Anonymous`
}
-const classifyRE = /(?:^|[-_])(\w)/g
-const classify = (str: string): string =>
- str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '')
+export function getExposed(
+ instance: GenericComponentInstance,
+): Record<string, any> | undefined {
+ if (instance.exposed) {
+ return (
+ instance.exposeProxy ||
+ (instance.exposeProxy = proxyRefs(markRaw(instance.exposed)))
+ )
+ }
+}
shouldSetAsAttr,
toDisplayString,
} from '@vue/shared'
-import { warn } from '../warning'
import { setStyle } from './style'
- import {
- MetadataKind,
- getMetadata,
- recordPropMetadata,
- } from '../componentMetadata'
import { on } from './event'
-import type { Data } from '@vue/runtime-shared'
import { currentInstance } from '../component'
+import { warn } from '@vue/runtime-dom'
export function mergeInheritAttr(key: string, value: any): unknown {
const instance = currentInstance!
args: any[],
root?: boolean,
): void {
- const oldProps = getMetadata(el)[MetadataKind.prop]
- // const oldProps = getMetadata(el)[MetadataKind.prop]
if (root) {
args.unshift(currentInstance!.attrs)
}
isString,
normalizeStyle,
} from '@vue/shared'
-import { warn } from '../warning'
+import { warn } from '@vue/runtime-dom'
- import { recordPropMetadata } from '../componentMetadata'
import { mergeInheritAttr } from './prop'
- export function setStyle(el: HTMLElement, value: any, root?: boolean): void {
- const prev = recordPropMetadata(
- el,
- 'style',
- (value = normalizeStyle(root ? mergeInheritAttr('style', value) : value)),
- )
+ export function setStyle(
+ el: HTMLElement,
+ prev: any,
+ value: any,
+ root?: boolean,
+ ): any {
+ value = normalizeStyle(root ? mergeInheritAttr('style', value) : value)
patchStyle(el, prev, value)
+ return value
}
// TODO copied from packages/runtime-dom/src/modules/style.ts
projects / thirdparty / vuejs / core.git / commitdiff
