refactor: reorganize the code and export a express server for fasting usage

Author: axiaoan

bin/vite-ssr.js

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
 'use strict'
-if (typeof __dirname !== 'undefined') require('../dist/node/cli.cjs')
+if (typeof __dirname !== 'undefined')
+  require('../dist/node/cli.cjs')
 else import('../dist/node/cli.mjs')

build.config.ts

@@ -4,6 +4,7 @@ export default defineBuildConfig({
   entries: [
     { input: 'src/index', name: 'index' },
     { input: 'src/node/cli', name: 'node/cli' },
+    { input: 'src/server/express', name: 'express' },
   ],
   clean: true,
   declaration: true,
@@ -12,6 +13,7 @@ export default defineBuildConfig({
     'vite',
     'vue/server-renderer',
     'vue/compiler-sfc',
+    'express-serve-static-core',
   ],
   rollup: {
     emitCJS: true,

src/config.ts

@@ -1,7 +1,8 @@
-import { join as _join, resolve as _resolve } from 'path'
+import path, { join as _join, resolve as _resolve } from 'path'
 import { resolveConfig } from 'vite'
 import type { ResolvedConfig } from 'vite'
 import fs from 'fs-extra'
+
 import type { ViteSSROptions } from './types'
 
 let __CONFIG__: ResolvedConfig
@@ -19,6 +20,7 @@ export async function getConfig(mode: string | undefined = process.env.NODE_ENV)
   }, __CONFIG__?.ssrOptions || {})
 
   const join = (dir: string) => _join(__CONFIG__.root, dir)
+
   const resolve = (dir: string) => _resolve(__CONFIG__.root, dir)
 
   return {
@@ -47,3 +49,24 @@ export async function getIndexTemplate(mode?: string | undefined) {
   const { join, ssrOptions } = await getConfig(mode)
   return fs.readFileSync(join(ssrOptions.input as string), 'utf-8')
 }
+
+// Get main entry file, `src/main`
+export async function getEntryPoint(
+  ssrOption: ViteSSROptions,
+  config?: ResolvedConfig,
+  indexHtml?: string,
+) {
+  if (!config)
+    config = await resolveViteConfig()
+  if (!indexHtml)
+    indexHtml = fs.readFileSync(ssrOption.input || path.resolve(config.root, 'index.html'), 'utf-8')
+  // <script type="module" src="/src/main.ts"></script>
+  const matches = indexHtml.match(/<script type="module" src="(.*)"/i)
+  const entryFile = matches?.[1] || 'src/main'
+  return path.join(config.root, entryFile)
+}
+
+// Get all vite configurations
+export function resolveViteConfig(mode?: string) {
+  return resolveConfig({}, 'build', mode || process.env.MODE || process.env.NODE_ENV)
+}

src/entry.ts

@@ -1,12 +1,10 @@
 import type { Component } from 'vue'
 import { createApp as createClientApp, createSSRApp } from 'vue'
 import { createMemoryHistory, createRouter, createWebHistory } from 'vue-router'
-import { provideContext } from './components'
 import type { RouterOptions, ViteSSRClientOptions, ViteSSRContext } from './types'
+import { provideContext } from './components'
 import { documentReady } from './utils/document-ready'
 import { deserializeState } from './utils/state'
-import { generateRenderFn } from './node/render'
-
 export { ClientOnly, useContext, useFetch } from './components'
 export * from './types'
 
@@ -15,11 +13,11 @@ export function ViteSSR(
   routerOptions: RouterOptions = { base: '/', routes: [] },
   fn?: (context: ViteSSRContext<true>) => Promise<void> | void,
   options: ViteSSRClientOptions = {},
-) {
+): (client: boolean, routePath?: string) => Promise<ViteSSRContext> {
   const { transformState, rootContainer = '#app' } = options
   const isClient = typeof window !== 'undefined'
 
-  // client - true is client side, false is server side
+  // client - `true` is client side, `false` is server side
   async function createApp(client = false, routePath?: string) {
     const app = client ? createClientApp(App) : createSSRApp(App)
 
@@ -74,7 +72,7 @@ export function ViteSSR(
 
       await router.isReady()
       context.initialState = router.currentRoute.value.meta.state as Record<string, any> || {}
-      context.render = generateRenderFn(app, router) as typeof context.render
+      // context.render = createRender(app, context) as any
     }
 
     const initialState = context.initialState

src/node/build.ts

@@ -1,7 +1,8 @@
 /* eslint-disable no-console */
 import { isAbsolute, join } from 'path'
+import type { ResolvedConfig, UserConfig } from 'vite'
 import { build as viteBuild } from 'vite'
-import { getConfig, getEntry } from '../config'
+import { getEntryPoint, resolveViteConfig } from '../config'
 import { buildLog } from './utils'
 
 export interface CliOptions {
@@ -11,49 +12,41 @@ export interface CliOptions {
 
 export async function build(cliOptions: CliOptions = {}) {
   const mode = process.env.MODE || process.env.NODE_ENV || cliOptions.mode || 'production'
-  const { config, ssrOptions } = await getConfig(mode)
+  const config: ResolvedConfig = await resolveViteConfig(mode)
 
   const cwd = process.cwd()
   const root = config.root || cwd
   const outDir = config.build.outDir || 'dist'
   const out = isAbsolute(outDir) ? outDir : join(root, outDir)
 
-  const { format = 'cjs' } = Object.assign({}, ssrOptions || {}, cliOptions)
-
-  // client
   buildLog('Build for client...')
   await viteBuild({
     build: {
       ssrManifest: true,
       outDir: join(out, 'client'),
       rollupOptions: {
         input: {
-          app: join(root, ssrOptions.input as string),
+          app: join(root, input || 'index.html'),
         },
       },
     },
     mode: config.mode,
-  })
+  } as UserConfig)
 
   buildLog('Build for server...')
   await viteBuild({
     build: {
-      ssr: await getEntry(),
+      ssr: await getEntryPoint(config.ssrOptions || {}, config),
       outDir: join(out, 'server'),
       minify: false,
       cssCodeSplit: false,
       rollupOptions: {
-        output: format === 'esm'
-          ? {
-            entryFileNames: '[name].mjs',
-            format: 'esm',
-          }
-          : {
-            entryFileNames: '[name].cjs',
-            format: 'cjs',
-          },
+        output: {
+          entryFileNames: '[name].cjs',
+          format: 'cjs',
+        },
       },
     },
     mode: config.mode,
-  })
+  } as UserConfig)
 }

src/node/cli.ts

@@ -3,7 +3,7 @@ import { bold, gray, red, reset, underline } from 'kolorist'
 import yargs from 'yargs'
 import { hideBin } from 'yargs/helpers'
 import { bugs } from '../../package.json'
-import { start } from './server'
+import { startServer } from './server'
 import { build } from './build'
 
 yargs(hideBin(process.argv))
@@ -13,17 +13,13 @@ yargs(hideBin(process.argv))
     'build',
     'Build SSR',
     args => args,
-    async(args) => {
-      await build(args as any)
-    },
+    args => build(args as any),
   )
   .command(
     '*',
     'development and production environment',
     args => args,
-    async(args) => {
-      await start(args)
-    },
+    async args => (await startServer)(args),
   )
   .fail((msg, err, yargs) => {
     console.error(`\n${gray('[vite-ssr]')} ${bold(red('An internal error occurred.'))}`)

src/node/render.ts

@@ -1,25 +1,109 @@
-import type { App } from 'vue'
-import type { Router } from 'vue-router'
+import path from 'path'
+import fs from 'fs-extra'
 import { renderToString } from 'vue/server-renderer'
+import { serializeState } from '../utils/state'
+import type { CreateRenderOptions, RenderOptions, ViteSSROptions } from '../types'
+
+/**
+ * Create a render function environment to avoid regenerate variables in request.
+ * it will returns a render function for every request.
+ *
+ * @returns a render function
+ */
+export async function createRender({
+  isProd = false,
+  root = process.cwd(),
+  outDir = 'dist',
+  context: _context,
+  viteServer,
+  ssrOptions = {},
+}: CreateRenderOptions) {
+  const out = path.isAbsolute(outDir) ? outDir : path.join(root, outDir)
+  const resolve = (dir: string) => path.resolve((isProd ? out : root) as string, dir)
+  const templatePath = resolve(isProd ? './client/index.html' : 'index.html')
+
+  const getTemplate = () => {
+    return fs.existsSync(templatePath)
+      ? fs.readFileSync(templatePath, 'utf-8')
+      : getDefaultTemplate(ssrOptions as ViteSSROptions)
+  }
+  const _template = getTemplate()
+  const manifest = isProd
+    ? (await fs.readJSON(resolve('./client/ssr-manifest.json')), 'utf-8')
+    : {}
+
+  // Polyfill window.fetch
+  if (!globalThis.fetch) {
+    const fetch = await import('node-fetch')
+    // @ts-expect-error global variable
+    globalThis.fetch = fetch.default || fetch
+  }
+
+  const render = async(url: string, opts?: RenderOptions) => {
+    const context = _context || opts?.context
+    if (!context)
+      throw new Error('context is required')
+
+    const {
+      router,
+      transformState = serializeState,
+      initialState,
+      onBeforePageRender,
+      onPageRender,
+      app,
+    } = context
 
-export function generateRenderFn(app: App, router: Router) {
-  return async(url: string, manifest: any) => {
     await router.push(url)
     await router.isReady()
 
+    // Before page render hook
+    await onBeforePageRender?.(context)
+
     const ctx: any = {}
-    const html = await renderToString(app, ctx)
-    const preloadLinks = await renderPreloadLinks(ctx.modules, manifest)
+    let appHtml = await renderToString(app, ctx)
 
-    return { appHtml: html, preloadLinks }
+    let preloadLinks = await renderPreloadLinks(ctx.modules, manifest)
+
+    let template = _template
+    if (!isProd) {
+      template = getTemplate()
+      template = (await viteServer?.transformIndexHtml(url, template)) as string
+    }
+
+    // After page render hook
+    const pageRenderResult = await onPageRender?.({
+      route: url,
+      appCtx: context,
+      appHtml,
+      preloadLinks,
+    })
+    appHtml = pageRenderResult?.appHtml || appHtml
+    preloadLinks = pageRenderResult?.preloadLinks || preloadLinks
+
+    const state = transformState(initialState)
+    const stateScript = state
+      ? `\n\t<script>window.__INITIAL_STATE__=${state}</script>`
+      : ''
+
+    const html = template
+      .replace('</title>', `</title>\n${preloadLinks}`)
+      .replace(
+        '<div id="app"></div>',
+        `<div id="app">${appHtml}</div>${stateScript}`,
+      )
+
+    return html
   }
+
+  return render
 }
 
 export async function renderPreloadLinks(modules: any, manifest: any) {
   let links = ''
   const seen = new Set()
   const { basename } = await import('path')
-  modules.forEach((id: any) => {
+
+  modules && modules.forEach((id: any) => {
     const files = manifest[id]
     if (files) {
       files.forEach((file: any) => {
@@ -67,3 +151,29 @@ function renderPreloadLink(file: string) {
     return ''
   }
 }
+
+function getDefaultTemplate(ssrOptions: ViteSSROptions) {
+  const { rootContainerId = 'app', entry = 'src/main.ts' } = ssrOptions
+  const template = `
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>Vite SSR</title>
+        <style>
+          body {
+            margin: 0;
+            padding: 0;
+          }
+        </style>
+      </head>
+      <body>
+        <div id="${rootContainerId}"></div>
+        <script type="module" src="${entry}"></script>
+      </body>
+    </html>
+  `
+  return template
+}