test(compiler-vapor): v-bind="obj" (#119)

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap

@@ -27,3 +27,69 @@ export function render(_ctx) {
   return n0
 }"
 `;
+
+exports[`compiler: element transform > static props 1`] = `
+"import { template as _template } from 'vue/vapor';
+
+export function render(_ctx) {
+  const t0 = _template("<div id=\\"foo\\" class=\\"bar\\"></div>")
+  const n0 = t0()
+  return n0
+}"
+`;
+
+exports[`compiler: element transform > v-bind="obj" 1`] = `
+"import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps } from 'vue/vapor';
+
+export function render(_ctx) {
+  const t0 = _template("<div></div>")
+  const n0 = t0()
+  const { 0: [n1],} = _children(n0)
+  _renderEffect(() => {
+    _setDynamicProps(n1, _ctx.obj)
+  })
+  return n0
+}"
+`;
+
+exports[`compiler: element transform > v-bind="obj" after static prop 1`] = `
+"import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps } from 'vue/vapor';
+
+export function render(_ctx) {
+  const t0 = _template("<div></div>")
+  const n0 = t0()
+  const { 0: [n1],} = _children(n0)
+  _renderEffect(() => {
+    _setDynamicProps(n1, { id: "foo" }, _ctx.obj)
+  })
+  return n0
+}"
+`;
+
+exports[`compiler: element transform > v-bind="obj" before static prop 1`] = `
+"import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps } from 'vue/vapor';
+
+export function render(_ctx) {
+  const t0 = _template("<div></div>")
+  const n0 = t0()
+  const { 0: [n1],} = _children(n0)
+  _renderEffect(() => {
+    _setDynamicProps(n1, _ctx.obj, { id: "foo" })
+  })
+  return n0
+}"
+`;
+
+exports[`compiler: element transform > v-bind="obj" between static props 1`] = `
+"import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps } from 'vue/vapor';
+
+export function render(_ctx) {
+  const t0 = _template("<div></div>")
+  const n0 = t0()
+  const { 0: [n1],} = _children(n0)
+  _renderEffect(() => {
+    _setDynamicProps(n1, { id: "foo" }, _ctx.obj, { class: "bar" })
+  })
+  return n0
+}"
+`;

packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts

@@ -18,6 +18,207 @@ const compileWithElementTransform = makeCompile({
 describe('compiler: element transform', () => {
   test.todo('baisc')
 
+  test('static props', () => {
+    const { code, ir } = compileWithElementTransform(
+      `<div id="foo" class="bar" />`,
+    )
+    expect(code).toMatchSnapshot()
+    expect(code).contains('<div id=\\"foo\\" class=\\"bar\\"></div>"')
+    expect(ir.effect.length).toBe(0)
+  })
+
+  test('v-bind="obj"', () => {
+    const { code, ir } = compileWithElementTransform(`<div v-bind="obj" />`)
+    expect(code).toMatchSnapshot()
+    expect(ir.effect).toMatchObject([
+      {
+        expressions: [
+          {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: 'obj',
+            isStatic: false,
+          },
+        ],
+        operations: [
+          {
+            type: IRNodeTypes.SET_DYNAMIC_PROPS,
+            element: 1,
+            props: [
+              {
+                type: 4,
+                content: 'obj',
+                isStatic: false,
+              },
+            ],
+          },
+        ],
+      },
+    ])
+    expect(code).contains('_setDynamicProps(n1, _ctx.obj)')
+  })
+
+  test('v-bind="obj" after static prop', () => {
+    const { code, ir } = compileWithElementTransform(
+      `<div id="foo" v-bind="obj" />`,
+    )
+    expect(code).toMatchSnapshot()
+    expect(ir.effect).toMatchObject([
+      {
+        expressions: [
+          {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: 'obj',
+            isStatic: false,
+          },
+        ],
+        operations: [
+          {
+            type: IRNodeTypes.SET_DYNAMIC_PROPS,
+            element: 1,
+            props: [
+              [
+                {
+                  key: {
+                    type: NodeTypes.SIMPLE_EXPRESSION,
+                    content: 'id',
+                    isStatic: true,
+                  },
+                  values: [
+                    {
+                      type: NodeTypes.SIMPLE_EXPRESSION,
+                      content: 'foo',
+                      isStatic: true,
+                    },
+                  ],
+                },
+              ],
+              {
+                type: NodeTypes.SIMPLE_EXPRESSION,
+                content: 'obj',
+                isStatic: false,
+              },
+            ],
+          },
+        ],
+      },
+    ])
+    expect(code).contains('_setDynamicProps(n1, { id: "foo" }, _ctx.obj)')
+  })
+
+  test('v-bind="obj" before static prop', () => {
+    const { code, ir } = compileWithElementTransform(
+      `<div v-bind="obj" id="foo" />`,
+    )
+    expect(code).toMatchSnapshot()
+    expect(ir.effect).toMatchObject([
+      {
+        expressions: [
+          {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: 'obj',
+            isStatic: false,
+          },
+        ],
+        operations: [
+          {
+            type: IRNodeTypes.SET_DYNAMIC_PROPS,
+            element: 1,
+            props: [
+              {
+                type: NodeTypes.SIMPLE_EXPRESSION,
+                content: 'obj',
+                isStatic: false,
+              },
+              [
+                {
+                  key: {
+                    type: NodeTypes.SIMPLE_EXPRESSION,
+                    content: 'id',
+                    isStatic: true,
+                  },
+                  values: [
+                    {
+                      type: NodeTypes.SIMPLE_EXPRESSION,
+                      content: 'foo',
+                      isStatic: true,
+                    },
+                  ],
+                },
+              ],
+            ],
+          },
+        ],
+      },
+    ])
+    expect(code).contains('_setDynamicProps(n1, _ctx.obj, { id: "foo" })')
+  })
+
+  test('v-bind="obj" between static props', () => {
+    const { code, ir } = compileWithElementTransform(
+      `<div id="foo" v-bind="obj" class="bar" />`,
+    )
+    expect(code).toMatchSnapshot()
+    expect(ir.effect).toMatchObject([
+      {
+        expressions: [
+          {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: 'obj',
+            isStatic: false,
+          },
+        ],
+        operations: [
+          {
+            type: IRNodeTypes.SET_DYNAMIC_PROPS,
+            element: 1,
+            props: [
+              [
+                {
+                  key: {
+                    type: NodeTypes.SIMPLE_EXPRESSION,
+                    content: 'id',
+                    isStatic: true,
+                  },
+                  values: [
+                    {
+                      type: NodeTypes.SIMPLE_EXPRESSION,
+                      content: 'foo',
+                      isStatic: true,
+                    },
+                  ],
+                },
+              ],
+              {
+                type: NodeTypes.SIMPLE_EXPRESSION,
+                content: 'obj',
+                isStatic: false,
+              },
+              [
+                {
+                  key: {
+                    type: NodeTypes.SIMPLE_EXPRESSION,
+                    content: 'class',
+                    isStatic: true,
+                  },
+                  values: [
+                    {
+                      type: NodeTypes.SIMPLE_EXPRESSION,
+                      content: 'bar',
+                      isStatic: true,
+                    },
+                  ],
+                },
+              ],
+            ],
+          },
+        ],
+      },
+    ])
+    expect(code).contains(
+      '_setDynamicProps(n1, { id: "foo" }, _ctx.obj, { class: "bar" })',
+    )
+  })
+
   test.todo('props merging: event handlers', () => {
     const { code, ir } = compileWithElementTransform(
       `<div @click.foo="a" @click.bar="b" />`,