feat(vue-jsx-vapor): support SSR

Author: zhiyuanzmj

packages/vue-jsx-vapor/package.json

@@ -221,8 +221,11 @@
     "@vue-jsx-vapor/babel": "workspace:*",
     "@vue-jsx-vapor/compiler": "workspace:*",
     "@vue-jsx-vapor/macros": "workspace:*",
+    "@vue-macros/jsx-directive": "3.0.0-beta.7",
     "@vue-macros/volar": "catalog:",
+    "@vue/babel-plugin-jsx": "^1.4.0",
     "hash-sum": "catalog:",
+    "pathe": "^2.0.3",
     "ts-macro": "catalog:",
     "unplugin": "catalog:",
     "unplugin-utils": "catalog:"

packages/vue-jsx-vapor/src/core/hmr.ts

@@ -1,25 +1,34 @@
 import { isFunctionalNode } from '@vue-jsx-vapor/macros/api'
 import getHash from 'hash-sum'
+import { injectSSR } from './ssr'
 import type { BabelFileResult, types } from '@babel/core'
 
-interface HotComponent {
+export interface HotComponent {
   local: string
   exported: string
   id: string
 }
 
-export function registerHMR(
+export function injectHMRAndSSR(
   result: BabelFileResult,
   id: string,
-  defineComponentNames = ['defineComponent', 'defineVaporComponent'],
+  options?: {
+    ssr?: boolean
+    root?: string
+    defineComponentNames?: string[]
+  },
 ) {
+  const ssr = options?.ssr
+  const defineComponentNames = options?.defineComponentNames ?? [
+    'defineComponent',
+    'defineVaporComponent',
+  ]
   const { ast } = result
 
   // check for hmr injection
   const declaredComponents: string[] = []
   const hotComponents: HotComponent[] = []
   let hasDefaultExport = false
-  const ssr = false
 
   for (const node of ast!.program.body) {
     if (node.type === 'VariableDeclaration') {
@@ -112,16 +121,9 @@ if (import.meta.hot) {
       result.code = code
     }
 
-    // if (ssr) {
-    //   const normalizedId = normalizePath(path.relative(root, id))
-    //   let ssrInjectCode =
-    //     `\nimport { ssrRegisterHelper } from "${ssrRegisterHelperId}"` +
-    //     `\nconst __moduleId = ${JSON.stringify(normalizedId)}`
-    //   for (const { local } of hotComponents) {
-    //     ssrInjectCode += `\nssrRegisterHelper(${local}, __moduleId)`
-    //   }
-    //   result.code += ssrInjectCode
-    // }
+    if (ssr) {
+      result.code += injectSSR(id, hotComponents, options?.root)
+    }
   }
 }
 

packages/vue-jsx-vapor/src/core/index.ts

@@ -10,16 +10,17 @@ export function transformVueJsxVapor(
   code: string,
   id: string,
   options?: Options,
+  needSourceMap = false,
 ) {
   return transformSync(code, {
     plugins: [
       [jsx, { compile: options?.compile, interop: options?.interop }],
-      id.endsWith('.tsx')
-        ? [babelTypescript, { isTSX: true, allowExtensions: true }]
-        : null,
-    ].filter((i) => i !== null),
+      ...(id.endsWith('.tsx')
+        ? [[babelTypescript, { isTSX: true, allowExtensions: true }]]
+        : []),
+    ],
     filename: id,
-    sourceMaps: true,
+    sourceMaps: needSourceMap,
     sourceFileName: id,
     babelrc: false,
     configFile: false,

packages/vue-jsx-vapor/src/core/ssr.ts

@@ -0,0 +1,43 @@
+import { relative } from 'pathe'
+import { normalizePath } from 'unplugin-utils'
+import type { HotComponent } from './hmr'
+import type { ComponentOptions } from 'vue'
+
+export const ssrRegisterHelperId = '/__vue-jsx-ssr-register-helper'
+export const ssrRegisterHelperCode =
+  `import { useSSRContext } from "vue"\n` +
+  // the const here is just to work around the Bun bug where
+  // Function.toString() isn't working as intended
+  // https://github.com/oven-sh/bun/issues/9543
+  `export const ssrRegisterHelper = ${ssrRegisterHelper.toString()}`
+
+/**
+ * This function is serialized with toString() and evaluated as a virtual
+ * module during SSR
+ */
+function ssrRegisterHelper(comp: ComponentOptions, filename: string) {
+  const setup = comp.setup
+  comp.setup = (props, ctx) => {
+    // @ts-ignore
+    const ssrContext = useSSRContext()
+    ;(ssrContext.modules || (ssrContext.modules = new Set())).add(filename)
+    if (setup) {
+      return setup(props, ctx)
+    }
+  }
+}
+
+export function injectSSR(
+  id: string,
+  hotComponents: HotComponent[],
+  root = '',
+) {
+  const normalizedId = normalizePath(relative(root, id))
+  let ssrInjectCode =
+    `\nimport { ssrRegisterHelper } from "${ssrRegisterHelperId}"` +
+    `\nconst __moduleId = ${JSON.stringify(normalizedId)}`
+  for (const { local } of hotComponents) {
+    ssrInjectCode += `\nssrRegisterHelper(${local}, __moduleId)`
+  }
+  return ssrInjectCode
+}

packages/vue-jsx-vapor/src/core/vue-jsx.ts

@@ -0,0 +1,30 @@
+import { transformSync } from '@babel/core'
+// @ts-ignore missing type
+import babelTypescript from '@babel/plugin-transform-typescript'
+import jsx from '@vue/babel-plugin-jsx'
+
+export function transformVueJsx(
+  code: string,
+  id: string,
+  needSourceMap = false,
+) {
+  const result = transformSync(code, {
+    plugins: [
+      jsx,
+      ...(id.endsWith('.tsx')
+        ? [[babelTypescript, { isTSX: true, allowExtensions: true }]]
+        : []),
+    ],
+    filename: id,
+    sourceMaps: needSourceMap,
+    sourceFileName: id,
+    babelrc: false,
+    configFile: false,
+  })
+  if (result?.code) {
+    return {
+      code: result.code,
+      map: result.map,
+    }
+  }
+}

packages/vue-jsx-vapor/src/raw.ts

@@ -1,17 +1,22 @@
-import Macros from '@vue-jsx-vapor/macros/raw'
+import macros from '@vue-jsx-vapor/macros/raw'
+import { transformJsxDirective } from '@vue-macros/jsx-directive/api'
 import { createFilter, normalizePath } from 'unplugin-utils'
 import { transformVueJsxVapor } from './core'
-import { registerHMR } from './core/hmr'
+import { injectHMRAndSSR } from './core/hmr'
 import runtimeCode from './core/runtime?raw'
+import { ssrRegisterHelperCode, ssrRegisterHelperId } from './core/ssr'
+import { transformVueJsx } from './core/vue-jsx'
 import type { Options } from './options'
 import type { UnpluginOptions } from 'unplugin'
 
 const plugin = (options: Options = {}): UnpluginOptions[] => {
   const transformInclude = createFilter(
-    options?.include || /\.[cm]?[jt]sx?$/,
-    options?.exclude,
+    options?.include || /\.[cm]?[jt]sx$/,
+    options?.exclude || /node_modules/,
   )
+  let root = ''
   let needHMR = false
+  let needSourceMap = false
   return [
     {
       name: 'vue-jsx-vapor',
@@ -33,34 +38,62 @@ const plugin = (options: Options = {}): UnpluginOptions[] => {
           }
         },
         configResolved(config) {
+          root = config.root
           needHMR = config.command === 'serve'
+          needSourceMap = config.command === 'serve' || !!config.build.sourcemap
         },
       },
       resolveId(id) {
+        if (id === ssrRegisterHelperId) return id
         if (normalizePath(id) === 'vue-jsx-vapor/runtime') return id
       },
       loadInclude(id) {
+        if (id === ssrRegisterHelperId) return true
         return normalizePath(id) === 'vue-jsx-vapor/runtime'
       },
       load(id) {
+        if (id === ssrRegisterHelperId) return ssrRegisterHelperCode
         if (normalizePath(id) === 'vue-jsx-vapor/runtime') return runtimeCode
       },
       transformInclude,
-      transform(code, id) {
-        const result = transformVueJsxVapor(code, id, options)
+      transform(code, id, opt?: { ssr?: boolean }) {
+        const result = transformVueJsxVapor(code, id, options, needSourceMap)
         if (result?.code) {
-          needHMR && registerHMR(result, id)
+          ;(needHMR || opt?.ssr) &&
+            injectHMRAndSSR(result, id, { ssr: opt?.ssr, root })
           return {
             code: result.code,
             map: result.map,
           }
         }
       },
     },
+    {
+      name: '@vue-macros/jsx-directive',
+      transformInclude,
+      transform(code, id, opt?: { ssr?: boolean }) {
+        if (options.interop || opt?.ssr) {
+          return transformJsxDirective(code, id, {
+            lib: 'vue',
+            prefix: 'v-',
+            version: 3.6,
+          })
+        }
+      },
+    },
+    {
+      name: '@vitejs/plugin-vue-jsx',
+      transformInclude,
+      transform(code, id, opt?: { ssr?: boolean }) {
+        if (options.interop || opt?.ssr) {
+          return transformVueJsx(code, id, needSourceMap)
+        }
+      },
+    },
     ...(options.macros === false
       ? []
       : options.macros
-        ? [Macros(options.macros === true ? undefined : options.macros)]
+        ? [macros(options.macros === true ? undefined : options.macros)]
         : []),
   ]
 }

playground/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "node vite.js --port 5174"
+    "dev": "node vite.js --port 5174",
+    "build": "node vite.js build"
   },
   "devDependencies": {
     "@vitejs/plugin-vue-jsx": "^4.1.1",