Skip to content

Commit

Permalink
feat: prop and attr modifiers for v-bind
Browse files Browse the repository at this point in the history
  • Loading branch information
@ygj6
ygj6 committed Dec 24, 2023
1 parent 597eae4 commit 9806d8a
Show file tree
Hide file tree
Showing 8 changed files with 322 additions and 48 deletions.
14 changes: 7 additions & 7 deletions packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export function render(_ctx) {
`;

exports[`compile > directives > v-pre > self-closing v-pre 1`] = `
"import { template as _template, children as _children, createTextNode as _createTextNode, append as _append, effect as _effect, setText as _setText, setAttr as _setAttr } from 'vue/vapor';
"import { template as _template, children as _children, createTextNode as _createTextNode, append as _append, effect as _effect, setText as _setText, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div><div><Comp></Comp></div>")
Expand All @@ -133,14 +133,14 @@ export function render(_ctx) {
_setText(n1, undefined, _ctx.bar)
})
_effect(() => {
_setAttr(n2, "id", undefined, _ctx.foo)
_setDynamicProp(n2, "id", undefined, _ctx.foo)
})
return n0
}"
`;

exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
"import { template as _template, children as _children, createTextNode as _createTextNode, append as _append, effect as _effect, setText as _setText, setAttr as _setAttr } from 'vue/vapor';
"import { template as _template, children as _children, createTextNode as _createTextNode, append as _append, effect as _effect, setText as _setText, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div><div><Comp></Comp></div>")
Expand All @@ -152,7 +152,7 @@ export function render(_ctx) {
_setText(n1, undefined, _ctx.bar)
})
_effect(() => {
_setAttr(n2, "id", undefined, _ctx.foo)
_setDynamicProp(n2, "id", undefined, _ctx.foo)
})
return n0
}"
Expand All @@ -179,7 +179,7 @@ export function render(_ctx) {
`;

exports[`compile > dynamic root nodes and interpolation 1`] = `
"import { template as _template, children as _children, createTextNode as _createTextNode, prepend as _prepend, insert as _insert, append as _append, on as _on, effect as _effect, setText as _setText, setAttr as _setAttr } from 'vue/vapor';
"import { template as _template, children as _children, createTextNode as _createTextNode, prepend as _prepend, insert as _insert, append as _append, on as _on, effect as _effect, setText as _setText, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<button>foo<!>foo</button>")
Expand All @@ -196,7 +196,7 @@ export function render(_ctx) {
_setText(n1, undefined, _ctx.count)
_setText(n2, undefined, _ctx.count)
_setText(n3, undefined, _ctx.count)
_setAttr(n4, "id", undefined, _ctx.count)
_setDynamicProp(n4, "id", undefined, _ctx.count)
})
return n0
}"
Expand All @@ -220,7 +220,7 @@ exports[`compile > expression parsing > v-bind 1`] = `
const n0 = t0()
const { 0: [n1],} = _children(n0)
_effect(() => {
_setAttr(n1, key.value+1, undefined, _unref(foo)[key.value+1]())
_setDynamicProp(n1, key.value+1, undefined, _unref(foo)[key.value+1]())
})
return n0
})()"
Expand Down
124 changes: 111 additions & 13 deletions packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,42 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`compiler v-bind > .attr modifier 1`] = `
"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_effect(() => {
_setDynamicProp(n1, "^foo-bar", undefined, _ctx.id)
})
return n0
}"
`;

exports[`compiler v-bind > .attr modifier w/ no expression 1`] = `
"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_effect(() => {
_setDynamicProp(n1, "^foo-bar", undefined, _ctx.fooBar)
})
return n0
}"
`;

exports[`compiler v-bind > .camel modifier 1`] = `
"import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor';
"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_effect(() => {
_setAttr(n1, "fooBar", undefined, _ctx.id)
_setDynamicProp(n1, "fooBar", undefined, _ctx.id)
})
return n0
}"
Expand All @@ -22,77 +50,147 @@ export function render(_ctx) {
const n0 = t0()
const { 0: [n1],} = _children(n0)
_effect(() => {
_setAttr(n1, _camelize(_ctx.foo), undefined, _ctx.id)
_setDynamicProp(n1, _camelize(_ctx.foo), undefined, _ctx.id)
})
return n0
}"
`;

exports[`compiler v-bind > .camel modifier w/ no expression 1`] = `
"import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor';
"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_effect(() => {
_setDynamicProp(n1, "fooBar", undefined, _ctx.fooBar)
})
return n0
}"
`;

exports[`compiler v-bind > .prop modifier (shortband) w/ no expression 1`] = `
"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_effect(() => {
_setDynamicProp(n1, ".fooBar", undefined, _ctx.fooBar)
})
return n0
}"
`;

exports[`compiler v-bind > .prop modifier (shorthand) 1`] = `
"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_effect(() => {
_setDynamicProp(n1, ".fooBar", undefined, _ctx.id)
})
return n0
}"
`;

exports[`compiler v-bind > .prop modifier 1`] = `
"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_effect(() => {
_setDynamicProp(n1, ".fooBar", undefined, _ctx.id)
})
return n0
}"
`;

exports[`compiler v-bind > .prop modifier w/ dynamic arg 1`] = `
"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_effect(() => {
_setDynamicProp(n1, \`.\${_ctx.fooBar}\`, undefined, _ctx.id)
})
return n0
}"
`;
exports[`compiler v-bind > .prop modifier w/ no expression 1`] = `
"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_effect(() => {
_setAttr(n1, "fooBar", undefined, _ctx.fooBar)
_setDynamicProp(n1, ".fooBar", undefined, _ctx.fooBar)
})
return n0
}"
`;
exports[`compiler v-bind > basic 1`] = `
"import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor';
"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_effect(() => {
_setAttr(n1, "id", undefined, _ctx.id)
_setDynamicProp(n1, "id", undefined, _ctx.id)
})
return n0
}"
`;
exports[`compiler v-bind > dynamic arg 1`] = `
"import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor';
"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_effect(() => {
_setAttr(n1, _ctx.id, undefined, _ctx.id)
_setDynamicProp(n1, _ctx.id, undefined, _ctx.id)
})
return n0
}"
`;
exports[`compiler v-bind > no expression (shorthand) 1`] = `
"import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor';
"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_effect(() => {
_setAttr(n1, "camel-case", undefined, _ctx.camelCase)
_setDynamicProp(n1, "camel-case", undefined, _ctx.camelCase)
})
return n0
}"
`;
exports[`compiler v-bind > no expression 1`] = `
"import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor';
"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_effect(() => {
_setAttr(n1, "id", undefined, _ctx.id)
_setDynamicProp(n1, "id", undefined, _ctx.id)
})
return n0
}"
Expand Down
12 changes: 6 additions & 6 deletions packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`compiler: v-once > as root node 1`] = `
"import { template as _template, children as _children, setAttr as _setAttr } from 'vue/vapor';
"import { template as _template, children as _children, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_setAttr(n1, "id", undefined, _ctx.foo)
_setDynamicProp(n1, "id", undefined, _ctx.foo)
return n0
}"
`;

exports[`compiler: v-once > basic 1`] = `
"import { template as _template, children as _children, createTextNode as _createTextNode, setText as _setText, setAttr as _setAttr, prepend as _prepend } from 'vue/vapor';
"import { template as _template, children as _children, createTextNode as _createTextNode, setText as _setText, setDynamicProp as _setDynamicProp, prepend as _prepend } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div> <span></span></div>")
const n0 = t0()
const { 0: [n3, { 1: [n2],}],} = _children(n0)
const n1 = _createTextNode(_ctx.msg)
_setText(n1, undefined, _ctx.msg)
_setAttr(n2, "class", undefined, _ctx.clz)
_setDynamicProp(n2, "class", undefined, _ctx.clz)
_prepend(n3, n1)
return n0
}"
Expand All @@ -38,13 +38,13 @@ export function render(_ctx) {
`;

exports[`compiler: v-once > on nested plain element 1`] = `
"import { template as _template, children as _children, setAttr as _setAttr } from 'vue/vapor';
"import { template as _template, children as _children, setDynamicProp as _setDynamicProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div><div></div></div>")
const n0 = t0()
const { 0: [, { 0: [n1],}],} = _children(n0)
_setAttr(n1, "id", undefined, _ctx.foo)
_setDynamicProp(n1, "id", undefined, _ctx.foo)
return n0
}"
`;

0 comments on commit 9806d8a

Please sign in to comment.