test: compound expression for `v-bind` (#36)

packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap

@@ -16,6 +16,44 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compile > directives > v-bind > .camel modifier 1`] = `
+"import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor';
+
+export function render(_ctx) {
+  const t0 = _template("<div></div>")
+  const n0 = t0()
+  const { 0: [n1],} = _children(n0)
+  _effect(() => {
+    _setAttr(n1, "foo-bar", undefined, _ctx.id)
+  })
+  return n0
+}"
+`;
+
+exports[`compile > directives > v-bind > dynamic arg 1`] = `
+"import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } 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)
+  })
+  return n0
+}"
+`;
+
+exports[`compile > directives > v-bind > should error if no expression 1`] = `
+"import { template as _template } from 'vue/vapor';
+
+export function render(_ctx) {
+  const t0 = _template("<div></div>")
+  const n0 = t0()
+  return n0
+}"
+`;
+
 exports[`compile > directives > v-bind > simple expression 1`] = `
 "import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor';
 
@@ -276,6 +314,30 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compile > expression parsing > interpolation 1`] = `
+"(() => {
+  const t0 = _fragment()
+
+  const n0 = t0()
+  _effect(() => {
+    _setText(n0, undefined, a + b.value)
+  })
+  return n0
+})()"
+`;
+
+exports[`compile > expression parsing > v-bind 1`] = `
+"(() => {
+  const t0 = _template("<div></div>")
+  const n0 = t0()
+  const { 0: [n1],} = _children(n0)
+  _effect(() => {
+    _setAttr(n1, key.value+1, undefined, _unref(foo)[key.value+1]())
+  })
+  return n0
+})()"
+`;
+
 exports[`compile > fragment 1`] = `
 "import { template as _template } from 'vue/vapor';
 

packages/compiler-vapor/__tests__/compile.test.ts

@@ -71,9 +71,10 @@ describe('compile', () => {
         expect(code).matchSnapshot()
       })
 
-      test('should error if no expression', async () => {
+      // TODO: fix this test
+      test.fails('should error if no expression', async () => {
         const onError = vi.fn()
-        await compile(`<div v-bind:arg />`, { onError })
+        const code = await compile(`<div v-bind:arg="" />`, { onError })
 
         expect(onError.mock.calls[0][0]).toMatchObject({
           code: ErrorCodes.X_V_BIND_NO_EXPRESSION,
@@ -84,10 +85,57 @@ describe('compile', () => {
             },
             end: {
               line: 1,
-              column: 16,
+              column: 19,
             },
           },
         })
+
+        expect(code).matchSnapshot()
+        // the arg is static
+        expect(code).contains(JSON.stringify('<div arg="" ></div>'))
+      })
+
+      // TODO: support shorthand syntax for v-bind #9451
+      test.fails('no expression', async () => {
+        const code = await compile('<div v-bind:id />', {
+          bindingMetadata: {
+            id: BindingTypes.SETUP_REF,
+          },
+        })
+
+        expect(code).matchSnapshot()
+        expect(code).contains('_setAttr(n1, "id", undefined, _ctx.id)')
+      })
+
+      // TODO: support shorthand syntax for v-bind #9451
+      test.fails('no expression (shorthand)', async () => {
+        const code = await compile('<div :id />', {
+          bindingMetadata: {
+            id: BindingTypes.SETUP_REF,
+          },
+        })
+
+        expect(code).matchSnapshot()
+        expect(code).contains('_setAttr(n1, "id", undefined, _ctx.id)')
+      })
+
+      test('dynamic arg', async () => {
+        const code = await compile('<div v-bind:[id]="id"/>', {
+          bindingMetadata: {
+            id: BindingTypes.SETUP_REF,
+          },
+        })
+
+        expect(code).matchSnapshot()
+        expect(code).contains('_setAttr(n1, _ctx.id, undefined, _ctx.id)')
+      })
+
+      // TODO: camel modifier for v-bind
+      test.fails('.camel modifier', async () => {
+        const code = await compile(`<div v-bind:foo-bar.camel="id"/>`)
+
+        expect(code).matchSnapshot()
+        expect(code).contains('fooBar')
       })
     })
 
@@ -124,8 +172,8 @@ describe('compile', () => {
           `<a @click.stop="handleEvent"></a>
             <form @submit.prevent="handleEvent"></form>
             <a @click.stop.prevent="handleEvent"></a>
-            <div @click.self="handleEvent"></div> 
-            <div @click.capture="handleEvent"></div> 
+            <div @click.self="handleEvent"></div>
+            <div @click.capture="handleEvent"></div>
             <a @click.once="handleEvent"></a>
             <div @scroll.passive="handleEvent"></div>
             <input @click.right="handleEvent" />
@@ -286,4 +334,32 @@ describe('compile', () => {
       })
     })
   })
+
+  describe('expression parsing', () => {
+    test('interpolation', async () => {
+      const code = await compile(`{{ a + b }}`, {
+        inline: true,
+        bindingMetadata: {
+          b: BindingTypes.SETUP_REF,
+        },
+      })
+      expect(code).matchSnapshot()
+      expect(code).contains('a + b.value')
+    })
+
+    test('v-bind', async () => {
+      const code = compile(`<div :[key+1]="foo[key+1]()" />`, {
+        inline: true,
+        bindingMetadata: {
+          key: BindingTypes.SETUP_REF,
+          foo: BindingTypes.SETUP_MAYBE_REF,
+        },
+      })
+      expect(code).matchSnapshot()
+      expect(code).contains('key.value+1')
+      expect(code).contains('_unref(foo)[key.value+1]()')
+    })
+
+    // TODO: add more test for expression parsing (v-on, v-slot, v-for)
+  })
 })