feat(compiler): support spread attribute

Author: zhiyuanzmj

playground/package.json

@@ -6,7 +6,7 @@
     "dev": "nodemon -w '../../src/**/*.ts' -e .ts -x vite --port 5174"
   },
   "dependencies": {
-    "@vue-macros/define-render": "^1.5.5",
+    "unplugin-vue-macros": "^2.9.5",
     "vite-plugin-vue-devtools": "^7.3.4",
     "vue": "npm:@vue-vapor/vue@3.2024.0-4c28469"
   },

playground/tsconfig.json

@@ -8,7 +8,7 @@
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "types": ["vite/client"],
+    "types": ["vite/client", "unplugin-vue-macros/macros-global"],
     "strict": true,
     "strictNullChecks": true,
     "esModuleInterop": true

playground/vite.config.ts

@@ -1,10 +1,10 @@
 import { defineConfig } from 'vite'
 import Inspect from 'vite-plugin-inspect'
 import Vue from '@vitejs/plugin-vue'
-import defineRender from '@vue-macros/define-render/vite'
+import VueMacros from 'unplugin-vue-macros/vite'
 import Devtools from 'vite-plugin-vue-devtools'
 import VueJsxVapor from '../src/vite'
 
 export default defineConfig({
-  plugins: [Vue(), VueJsxVapor(), defineRender(), Inspect(), Devtools()],
+  plugins: [Vue(), VueJsxVapor(), VueMacros(), Inspect(), Devtools()],
 })

pnpm-lock.yaml

@@ -16,7 +16,11 @@ import {
   type IRPropsDynamicAttribute,
   type IRPropsStatic,
 } from '../ir'
-import { isComponentNode, resolveSimpleExpression } from '../utils'
+import {
+  isComponentNode,
+  resolveExpression,
+  resolveSimpleExpression,
+} from '../utils'
 import { EMPTY_EXPRESSION } from './utils'
 import type { SimpleExpressionNode } from '@vue-vapor/compiler-dom'
 import type { JSXAttribute, JSXElement, JSXSpreadAttribute } from '@babel/types'
@@ -205,6 +209,17 @@ export function buildProps(
   }
 
   for (const prop of props) {
+    if (prop.type === 'JSXSpreadAttribute' && prop.argument) {
+      const value = resolveExpression(prop.argument, context)
+      dynamicExpr.push(value)
+      pushMergeArg()
+      dynamicArgs.push({
+        kind: IRDynamicPropsKind.EXPRESSION,
+        value,
+      })
+      continue
+    }
+
     const result = transformProp(prop, node, context)
     if (result) {
       dynamicExpr.push(result.key, result.value)

src/core/compiler/transforms/transformElement.ts

@@ -1,9 +1,12 @@
 import { describe, expect, test } from 'vitest'
 
+import { NodeTypes } from '@vue-vapor/compiler-core'
+import { IRDynamicPropsKind, IRNodeTypes } from '@vue-vapor/compiler-vapor'
 import {
   transformChildren,
   transformElement,
   transformText,
+  transformVBind,
   // transformVIf,
 } from '../../src/core/compiler'
 import { makeCompile } from './_utils'
@@ -15,6 +18,7 @@ const compileWithElementTransform = makeCompile({
     transformElement,
     transformChildren,
   ],
+  directiveTransforms: { bind: transformVBind },
 })
 
 describe('compiler: children transform', () => {
@@ -52,4 +56,46 @@ describe('compiler: children transform', () => {
       'template',
     ])
   })
+
+  test.only('v-bind="obj"', () => {
+    const { code, ir } = compileWithElementTransform(`<div {...obj} />`)
+    expect(code).toMatchInlineSnapshot(`
+      "import { renderEffect as _renderEffect, setDynamicProps as _setDynamicProps, template as _template } from 'vue/vapor';
+      const t0 = _template("<div></div>")
+
+      export function render(_ctx) {
+        const n0 = t0()
+        _renderEffect(() => _setDynamicProps(n0, _ctx.obj))
+        return n0
+      }"
+    `)
+    expect(ir.block.effect).toMatchObject([
+      {
+        expressions: [
+          {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: 'obj',
+            isStatic: false,
+          },
+        ],
+        operations: [
+          {
+            type: IRNodeTypes.SET_DYNAMIC_PROPS,
+            element: 0,
+            props: [
+              {
+                kind: IRDynamicPropsKind.EXPRESSION,
+                value: {
+                  type: NodeTypes.SIMPLE_EXPRESSION,
+                  content: 'obj',
+                  isStatic: false,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ])
+    expect(code).contains('_setDynamicProps(n0, _ctx.obj)')
+  })
 })

test/transforms/transformChildren.spec.ts

@@ -38,96 +38,6 @@ describe('compiler v-bind', () => {
     expect(ir.block.effect).lengthOf(1)
     expect(ir.block.effect[0].expressions).lengthOf(1)
     expect(ir.block.effect[0].operations).lengthOf(1)
-    expect(ir.block.effect[0].operations).toMatchInlineSnapshot(`
-      [
-        {
-          "element": 0,
-          "prop": {
-            "key": {
-              "ast": null,
-              "constType": 3,
-              "content": "id",
-              "isStatic": true,
-              "loc": {
-                "end": {
-                  "column": 8,
-                  "line": 1,
-                  "offset": 7,
-                },
-                "source": "id",
-                "start": {
-                  "column": 6,
-                  "line": 1,
-                  "offset": 5,
-                },
-              },
-              "type": 4,
-            },
-            "loc": SourceLocation {
-              "end": Position {
-                "column": 12,
-                "index": 12,
-                "line": 1,
-              },
-              "filename": undefined,
-              "identifierName": undefined,
-              "start": Position {
-                "column": 5,
-                "index": 5,
-                "line": 1,
-              },
-            },
-            "modifier": undefined,
-            "runtimeCamelize": false,
-            "value": undefined,
-            "values": [
-              {
-                "ast": Node {
-                  "comments": [],
-                  "end": 3,
-                  "errors": [],
-                  "loc": SourceLocation {
-                    "end": Position {
-                      "column": 3,
-                      "index": 3,
-                      "line": 1,
-                    },
-                    "filename": undefined,
-                    "identifierName": "id",
-                    "start": Position {
-                      "column": 1,
-                      "index": 1,
-                      "line": 1,
-                    },
-                  },
-                  "name": "id",
-                  "start": 1,
-                  "type": "Identifier",
-                },
-                "constType": 0,
-                "content": "id",
-                "isStatic": false,
-                "loc": {
-                  "end": {
-                    "column": 13,
-                    "line": 1,
-                    "offset": 12,
-                  },
-                  "source": "id",
-                  "start": {
-                    "column": 9,
-                    "line": 1,
-                    "offset": 8,
-                  },
-                },
-                "type": 4,
-              },
-            ],
-          },
-          "type": 2,
-        },
-      ]
-    `)
     expect(ir.block.effect[0]).toMatchObject({
       expressions: [
         {