feat: prop and attr modifiers for v-bind

ygj6 · Dec 24, 2023 · 77c92b7 · 77c92b7
1 parent 597eae4
commit 77c92b7
Show file tree

Hide file tree

Showing 6 changed files with 309 additions and 35 deletions.
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
@@ -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
 }"
@@ -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
 }"