feat(macros/defineComponent): support auto return functional component for SSR

Author: zhiyuanzmj

packages/macros/src/core/define-component/index.ts

@@ -3,13 +3,15 @@ import { walkIdentifiers } from '@vue/compiler-sfc'
 import { restructure } from '../restructure'
 import type { FunctionalNode, RootMapValue } from '..'
 import { transformAwait } from './await'
+import { transformReturn } from './return'
 import type { ObjectExpression } from '@babel/types'
 
 export function transformDefineComponent(
   root: FunctionalNode,
   propsName: string,
   map: RootMapValue,
   s: MagicStringAST,
+  autoReturnFunction = false,
 ): void {
   if (!map.defineComponent) return
 
@@ -94,6 +96,9 @@ export function transformDefineComponent(
   }
 
   transformAwait(root, s)
+  if (autoReturnFunction) {
+    transformReturn(root, s)
+  }
 }
 
 function prependObjectExpression(

packages/macros/src/core/define-component/return.ts

@@ -0,0 +1,15 @@
+import { isFunctionalNode, type FunctionalNode } from '..'
+import type { MagicStringAST } from '@vue-macros/common'
+
+export function transformReturn(root: FunctionalNode, s: MagicStringAST): void {
+  const node =
+    root.body.type === 'BlockStatement'
+      ? root.body.body.find((node) => node.type === 'ReturnStatement')?.argument
+      : root.body
+  if (!node || isFunctionalNode(node)) return
+
+  s.appendRight(
+    node.extra?.parenthesized ? (node.extra.parenStart as number) : node.start!,
+    '() => ',
+  )
+}

packages/macros/src/core/index.ts

@@ -95,7 +95,13 @@ export function transformJsxMacros(
     }
 
     if (map.defineComponent) {
-      transformDefineComponent(root, propsName, map, s)
+      transformDefineComponent(
+        root,
+        propsName,
+        map,
+        s,
+        options.defineComponent?.autoReturnFunction,
+      )
     }
     if (map.defineModel?.length) {
       map.defineModel.forEach(({ expression }) => {

packages/macros/src/options.ts

@@ -8,7 +8,7 @@ import {
 } from '@vue-macros/common'
 
 export type Options = BaseOptions & {
-  defineComponent?: { alias: string[] }
+  defineComponent?: { alias: string[]; autoReturnFunction?: boolean }
   defineModel?: { alias: string[] }
   defineExpose?: { alias: string[] }
   defineSlots?: { alias: string[] }

packages/macros/src/raw.ts

@@ -39,7 +39,10 @@ const plugin = (userOptions: Options = {}): UnpluginOptions => {
       if (importMap.get(id)) return true
       return filter(id)
     },
-    transform(code, id) {
+    transform(code, id, opt?: { ssr?: boolean }) {
+      if (opt?.ssr) {
+        options.defineComponent.autoReturnFunction = true
+      }
       if (importMap.get(id)) return transformStyle(code, id, options)
       return transformJsxMacros(code, id, importMap, options)
     },

packages/macros/tests/__snapshots__/fixtures.spec.ts.snap

@@ -1,5 +1,57 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`defineComponent autoReturnFunction fixtures > ./fixtures/define-component.tsx 1`] = `
+"
+import { createPropsDefaultProxy as __MACROS_createPropsDefaultProxy } from "vue-jsx-vapor/macros/with-defaults";
+import { useAttrs as __MACROS_useAttrs } from "vue";
+import { useModel as __MACROS_useModel } from "vue-jsx-vapor/macros/use-model";
+import { withAsyncContext as __MACROS_withAsyncContext } from "vue";import { defineComponent, nextTick } from 'vue'
+
+const Comp = defineComponent(
+  (__MACROS_props) => {
+const __MACROS_default_props = __MACROS_createPropsDefaultProxy(__MACROS_props, {'.bar': 'bar'!});const attrs = __MACROS_useAttrs();
+    __MACROS_useModel(__MACROS_props, 'modelValue',)
+    const foo = $(
+      __MACROS_useModel(__MACROS_props, 'foo', {
+        validator: (value) => {
+          return value === 'foo'
+        },
+        type: String,
+      })!,
+    )
+    return () => <div>{[foo, __MACROS_default_props.bar, attrs.baz]}</div>
+  },
+  {props: { 'bar': { required: true }, 'modelValue': null, 'onUpdate:modelValue': null, 'modelModifiers': null, 'foo': { required: true, validator: (value) => {
+          return value === 'foo'
+        }, type: String }, 'onUpdate:foo': null, 'fooModifiers': null },inheritAttrs: false, name: 'Comp' },
+)
+
+const Comp1 = defineComponent((props: { bar: 'bar'; 'onUpdate:bar': any }) => {
+  const foo = __MACROS_useModel(props, 'foo')
+  return () => <div>{[foo.value, props['bar'], props['onUpdate:bar']]}</div>
+}, { props: { 'bar': null, 'onUpdate:bar': null, 'foo': null, 'onUpdate:foo': null, 'fooModifiers': null } })
+
+const Comp2 = defineComponent(async (__MACROS_props) => {
+let __temp, __restore
+
+  ;(
+  ([__temp,__restore] = __MACROS_withAsyncContext(() => nextTick())),
+  await __temp,
+  __restore()
+)
+  let foo = (
+  ([__temp,__restore] = __MACROS_withAsyncContext(() => new Promise((resolve) => {
+    setTimeout(() => resolve('foo'), 1000)
+  }))),
+  __temp = await __temp,
+  __restore(),
+  __temp
+)
+  return () => <div>{foo}</div>
+})
+"
+`;
+
 exports[`fixtures > ./fixtures/define-component.tsx 1`] = `
 "
 import { createPropsDefaultProxy as __MACROS_createPropsDefaultProxy } from "vue-jsx-vapor/macros/with-defaults";

packages/macros/tests/fixtures.spec.ts

@@ -37,3 +37,22 @@ describe('fixtures', async () => {
       })?.code,
   )
 })
+
+describe('defineComponent autoReturnFunction fixtures', async () => {
+  await testFixtures(
+    import.meta.glob('./fixtures/**/define-component.tsx', {
+      eager: true,
+      as: 'raw',
+    }),
+    (args, id, code) =>
+      transformJsxMacros(code, id, new Map(), {
+        include: ['*.tsx'],
+        version: 3.6,
+        ...options,
+        defineComponent: {
+          alias: ['defineComponent', 'defineVaporComponent'],
+          autoReturnFunction: true,
+        },
+      })?.code,
+  )
+})