feat(utils-bundler): add utils-bundler package

CONTRIBUTING.md

@@ -17,10 +17,11 @@ Wrapper of core packages:
 
 - `vuepress`: A wrapper of the above packages, and provides `vuepress` command line tool. Users need to choose and install bundler and theme by themselves.
 
-Bundler packages:
+Bundler and related packages:
 
 - `bundler-vite`: The VuePress bundler package with vite. Use vite to `dev` and `build` VuePress app that generated by `@vuepress/core`.
 - `bundler-webpack`: The VuePress bundler package with webpack. Use webpack to `dev` and `build` VuePress app that generated by `@vuepress/core`.
+- `utils-bundler`: Utilities for bundler packages.
 
 ## Development Setup
 

CONTRIBUTING_zh.md

@@ -17,10 +17,11 @@ Core Packages 的封装：
 
 - `vuepress`: 是上述 Core Packages 的封装，提供了 `vuepress` 命令行工具。用户需要在此包的基础上自行选择并安装打包工具和主题。
 
-Bundler Packages ：
+Bundler 及其相关 Packages ：
 
 - `bundler-vite`: 基于 Vite 的 Bundler 模块。使用 Vite 对 VuePress App 执行 `dev` 和 `build` 操作。
 - `bundler-webpack`: 基于 Webpack 的 Bundler 模块。使用 Webpack 对 VuePress App 执行 `dev` 和 `build` 操作。
+- `utils-bundler`: 供 Bundler 模块使用的工具函数模块。
 
 ## 开发配置
 

packages/bundler-vite/package.json

@@ -40,6 +40,7 @@
     "@vuepress/core": "workspace:*",
     "@vuepress/shared": "workspace:*",
     "@vuepress/utils": "workspace:*",
+    "@vuepress/utils-bundler": "workspace:*",
     "autoprefixer": "^10.4.20",
     "connect-history-api-fallback": "^2.0.0",
     "postcss": "^8.4.45",

packages/bundler-vite/src/build/build.ts

@@ -1,6 +1,6 @@
-import type { CreateVueAppFunction } from '@vuepress/client'
 import type { App, Bundler } from '@vuepress/core'
-import { colors, debug, fs, importFile, withSpinner } from '@vuepress/utils'
+import { colors, debug, fs, withSpinner } from '@vuepress/utils'
+import { createVueServerApp, getSsrTemplate } from '@vuepress/utils-bundler'
 import type { OutputAsset, OutputChunk, RollupOutput } from 'rollup'
 import { build as viteBuild } from 'vite'
 import { resolveViteConfig } from '../resolveViteConfig.js'
@@ -58,19 +58,11 @@ export const build = async (
       (item) => item.type === 'chunk' && item.isEntry,
     ) as OutputChunk
 
-    // load the compiled server bundle
-    const serverEntryPath = app.dir.temp('.server', serverEntryChunk.fileName)
-    const { createVueApp } = await importFile<{
-      createVueApp: CreateVueAppFunction
-    }>(serverEntryPath)
-    // create vue ssr app
-    const { app: vueApp, router: vueRouter } = await createVueApp()
-    const { renderToString } = await import('vue/server-renderer')
-
-    // load ssr template file
-    const ssrTemplate = await fs.readFile(app.options.templateBuild, {
-      encoding: 'utf8',
-    })
+    // create vue ssr app and get ssr template
+    const { vueApp, vueRouter } = await createVueServerApp(
+      app.dir.temp('.server', serverEntryChunk.fileName),
+    )
+    const ssrTemplate = await getSsrTemplate(app)
 
     // pre-render pages to html files
     for (const page of app.pages) {
@@ -80,7 +72,6 @@ export const build = async (
         page,
         vueApp,
         vueRouter,
-        renderToString,
         ssrTemplate,
         output: clientOutput.output,
         outputEntryChunk: clientEntryChunk,

packages/bundler-vite/src/build/renderPage.ts

@@ -1,10 +1,8 @@
 import type { App, Page } from '@vuepress/core'
-import type { VuepressSSRContext } from '@vuepress/shared'
 import { fs, renderHead } from '@vuepress/utils'
+import { renderPageToString } from '@vuepress/utils-bundler'
 import type { OutputAsset, OutputChunk, RollupOutput } from 'rollup'
 import type { App as VueApp } from 'vue'
-import { ssrContextKey } from 'vue'
-import type { SSRContext } from 'vue/server-renderer'
 import type { Router } from 'vue-router'
 import { renderPagePrefetchLinks } from './renderPagePrefetchLinks.js'
 import { renderPagePreloadLinks } from './renderPagePreloadLinks.js'
@@ -17,7 +15,6 @@ export const renderPage = async ({
   page,
   vueApp,
   vueRouter,
-  renderToString,
   ssrTemplate,
   output,
   outputEntryChunk,
@@ -27,32 +24,24 @@ export const renderPage = async ({
   page: Page
   vueApp: VueApp
   vueRouter: Router
-  renderToString: (input: VueApp, context: SSRContext) => Promise<string>
   ssrTemplate: string
   output: RollupOutput['output']
   outputEntryChunk: OutputChunk
   outputCssAsset: OutputAsset | undefined
 }): Promise<void> => {
-  // switch to current page route
-  await vueRouter.push(page.path)
-  await vueRouter.isReady()
-
-  // create vue ssr context with default values
-  delete vueApp._context.provides[ssrContextKey]
-  const ssrContext: VuepressSSRContext = {
-    lang: 'en',
-    head: [],
-  }
-
   // render current page to string
-  const pageRendered = await renderToString(vueApp, ssrContext)
+  const { ssrContext, ssrString } = await renderPageToString({
+    page,
+    vueApp,
+    vueRouter,
+  })
 
   // resolve page chunks
   const pageChunkFiles = resolvePageChunkFiles({ page, output })
 
   // generate html string
   const html = await app.options.templateBuildRenderer(ssrTemplate, {
-    content: pageRendered,
+    content: ssrString,
     head: ssrContext.head.map(renderHead).join(''),
     lang: ssrContext.lang,
     prefetch: renderPagePrefetchLinks({

packages/bundler-webpack/package.json

@@ -42,6 +42,7 @@
     "@vuepress/core": "workspace:*",
     "@vuepress/shared": "workspace:*",
     "@vuepress/utils": "workspace:*",
+    "@vuepress/utils-bundler": "workspace:*",
     "autoprefixer": "^10.4.20",
     "chokidar": "^3.6.0",
     "copy-webpack-plugin": "^12.0.2",

packages/bundler-webpack/src/build/build.ts

@@ -1,13 +1,6 @@
-import type { CreateVueAppFunction } from '@vuepress/client'
 import type { App, Bundler } from '@vuepress/core'
-import {
-  colors,
-  debug,
-  fs,
-  importFileDefault,
-  logger,
-  withSpinner,
-} from '@vuepress/utils'
+import { colors, debug, fs, logger, withSpinner } from '@vuepress/utils'
+import { createVueServerApp, getSsrTemplate } from '@vuepress/utils-bundler'
 import webpack from 'webpack'
 import { resolveWebpackConfig } from '../resolveWebpackConfig.js'
 import type { WebpackBundlerOptions } from '../types.js'
@@ -80,19 +73,11 @@ export const build = async (
     const { initialFilesMeta, asyncFilesMeta, moduleFilesMetaMap } =
       resolveClientManifestMeta(clientManifest)
 
-    // load the compiled server bundle
-    const serverEntryPath = app.dir.temp('.server/app.cjs')
-    const { createVueApp } = await importFileDefault<{
-      createVueApp: CreateVueAppFunction
-    }>(serverEntryPath)
-    // create vue ssr app
-    const { app: vueApp, router: vueRouter } = await createVueApp()
-    const { renderToString } = await import('vue/server-renderer')
-
-    // load ssr template file
-    const ssrTemplate = await fs.readFile(app.options.templateBuild, {
-      encoding: 'utf8',
-    })
+    // create vue ssr app and get ssr template
+    const { vueApp, vueRouter } = await createVueServerApp(
+      app.dir.temp('.server/app.cjs'),
+    )
+    const ssrTemplate = await getSsrTemplate(app)
 
     // pre-render pages to html files
     for (const page of app.pages) {
@@ -104,7 +89,6 @@ export const build = async (
         page,
         vueApp,
         vueRouter,
-        renderToString,
         ssrTemplate,
         initialFilesMeta,
         asyncFilesMeta,

packages/bundler-webpack/src/build/renderPage.ts

@@ -1,9 +1,8 @@
 import type { App, Page } from '@vuepress/core'
-import type { VuepressSSRContext } from '@vuepress/shared'
 import { fs, renderHead } from '@vuepress/utils'
+import type { PageSSRContext } from '@vuepress/utils-bundler'
+import { renderPageToString } from '@vuepress/utils-bundler'
 import type { App as VueApp } from 'vue'
-import { ssrContextKey } from 'vue'
-import type { SSRContext } from 'vue/server-renderer'
 import type { Router } from 'vue-router'
 import { renderPagePrefetchLinks } from './renderPagePrefetchLinks.js'
 import { renderPagePreloadLinks } from './renderPagePreloadLinks.js'
@@ -12,7 +11,7 @@ import { renderPageStyles } from './renderPageStyles.js'
 import { resolvePageClientFilesMeta } from './resolvePageClientFilesMeta.js'
 import type { FileMeta, ModuleFilesMetaMap } from './types.js'
 
-interface PageRenderContext extends SSRContext, VuepressSSRContext {
+interface WebpackPageSSRContext extends PageSSRContext {
   /**
    * Injected by vuepress-ssr-loader
    *
@@ -29,7 +28,6 @@ export const renderPage = async ({
   page,
   vueApp,
   vueRouter,
-  renderToString,
   ssrTemplate,
   initialFilesMeta,
   asyncFilesMeta,
@@ -39,26 +37,19 @@ export const renderPage = async ({
   page: Page
   vueApp: VueApp
   vueRouter: Router
-  renderToString: (input: VueApp, context: SSRContext) => Promise<string>
   ssrTemplate: string
   initialFilesMeta: FileMeta[]
   asyncFilesMeta: FileMeta[]
   moduleFilesMetaMap: ModuleFilesMetaMap
 }): Promise<void> => {
-  // switch to current page route
-  await vueRouter.push(page.path)
-  await vueRouter.isReady()
-
-  // create vue ssr context with default values
-  delete vueApp._context.provides[ssrContextKey]
-  const ssrContext: PageRenderContext = {
-    _registeredComponents: new Set(),
-    lang: 'en',
-    head: [],
-  }
-
   // render current page to string
-  const pageRendered = await renderToString(vueApp, ssrContext)
+  const { ssrContext, ssrString } =
+    await renderPageToString<WebpackPageSSRContext>({
+      page,
+      vueApp,
+      vueRouter,
+      ssrContextInit: { _registeredComponents: new Set() },
+    })
 
   // resolve client files that used by this page
   const pageClientFilesMeta = resolvePageClientFilesMeta({
@@ -68,7 +59,7 @@ export const renderPage = async ({
 
   // generate html string
   const html = await app.options.templateBuildRenderer(ssrTemplate, {
-    content: pageRendered,
+    content: ssrString,
     head: ssrContext.head.map(renderHead).join(''),
     lang: ssrContext.lang,
     prefetch: renderPagePrefetchLinks({

packages/utils-bundler/README.md

@@ -0,0 +1,12 @@
+# @vuepress/utils-bundler
+
+[![npm](https://badgen.net/npm/v/@vuepress/utils-bundler/next)](https://www.npmjs.com/package/@vuepress/utils-bundler)
+[![license](https://badgen.net/github/license/vuepress/core)](https://github.com/vuepress/core/blob/main/LICENSE)
+
+## Documentation
+
+https://vuepress.vuejs.org
+
+## License
+
+[MIT](https://github.com/vuepress/core/blob/main/LICENSE)

packages/utils-bundler/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@vuepress/utils-bundler",
+  "version": "2.0.0-rc.15",
+  "description": "Utils package of VuePress bundler",
+  "keywords": [
+    "bundler",
+    "vuepress",
+    "utils"
+  ],
+  "homepage": "https://github.com/vuepress",
+  "bugs": {
+    "url": "https://github.com/vuepress/core/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuepress/core.git"
+  },
+  "license": "MIT",
+  "author": "meteorlxy",
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "@vuepress/client": "workspace:*",
+    "@vuepress/core": "workspace:*",
+    "@vuepress/shared": "workspace:*",
+    "@vuepress/utils": "workspace:*",
+    "vue": "^3.5.3",
+    "vue-router": "^4.4.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "tsup": {
+    "clean": true,
+    "dts": "./src/index.ts",
+    "entry": [
+      "./src/index.ts"
+    ],
+    "format": [
+      "esm"
+    ],
+    "outDir": "./dist",
+    "sourcemap": false,
+    "target": "es2022",
+    "tsconfig": "../../tsconfig.dts.json"
+  }
+}

packages/utils-bundler/src/build/createVueServerApp.ts

@@ -0,0 +1,29 @@
+import type { CreateVueAppFunction } from '@vuepress/client'
+import { importFile, importFileDefault } from '@vuepress/utils'
+import type { App } from 'vue'
+import type { Router } from 'vue-router'
+
+/**
+ * Create vue app and router for server side rendering
+ */
+export const createVueServerApp = async (
+  serverAppPath: string,
+): Promise<{
+  vueApp: App
+  vueRouter: Router
+}> => {
+  // use different import function for cjs and esm
+  const importer = serverAppPath.endsWith('.cjs')
+    ? importFileDefault
+    : importFile
+
+  // import the server app entry file
+  const { createVueApp } = await importer<{
+    createVueApp: CreateVueAppFunction
+  }>(serverAppPath)
+
+  // create vue app
+  const { app, router } = await createVueApp()
+
+  return { vueApp: app, vueRouter: router }
+}

packages/utils-bundler/src/build/getSsrTemplate.ts

@@ -0,0 +1,8 @@
+import type { App } from '@vuepress/core'
+import { fs } from '@vuepress/utils'
+
+/**
+ * Util to read the ssr template file
+ */
+export const getSsrTemplate = async (app: App): Promise<string> =>
+  fs.readFile(app.options.templateBuild, { encoding: 'utf8' })

packages/utils-bundler/src/build/index.ts

@@ -0,0 +1,3 @@
+export * from './createVueServerApp'
+export * from './getSsrTemplate'
+export * from './renderPageToString'