refactor(bundler-vite): split vite plugins

Author: meteorlxy

packages/bundler-vite/src/plugins/index.ts

@@ -1,3 +1,5 @@
-export * from './vuepressMainPlugin.js'
+export * from './vuepressBuildPlugin.js'
+export * from './vuepressConfigPlugin.js'
+export * from './vuepressDevPlugin.js'
 export * from './vuepressUserConfigPlugin.js'
 export * from './vuepressVuePlugin.js'

packages/bundler-vite/src/plugins/vuepressBuildPlugin.ts

@@ -0,0 +1,23 @@
+import type { Plugin } from 'vite'
+
+/**
+ * Configure build command for vuepress
+ */
+export const vuepressBuildPlugin = ({
+  isServer,
+}: {
+  isServer: boolean
+}): Plugin => ({
+  name: 'vuepress:build',
+
+  generateBundle(_, bundle) {
+    // delete all asset outputs in server build
+    if (isServer) {
+      Object.keys(bundle).forEach((key) => {
+        if (bundle[key].type === 'asset') {
+          delete bundle[key]
+        }
+      })
+    }
+  },
+})

packages/bundler-vite/src/plugins/vuepressMainPlugin.ts renamed to packages/bundler-vite/src/plugins/vuepressConfigPlugin.ts

@@ -1,10 +1,9 @@
 import type { App } from '@vuepress/core'
 import { fs, sanitizeFileName } from '@vuepress/utils'
 import autoprefixer from 'autoprefixer'
-import history from 'connect-history-api-fallback'
 import type { AcceptedPlugin } from 'postcss'
 import postcssrc from 'postcss-load-config'
-import type { AliasOptions, Connect, Plugin, UserConfig } from 'vite'
+import type { AliasOptions, Plugin, UserConfig } from 'vite'
 
 /**
  * Resolve vite config `resolve.alias`
@@ -93,9 +92,9 @@ const resolveDefine = async ({
 }
 
 /**
- * The main plugin to compat vuepress with vite
+ * Resolve and setup vite config
  */
-export const vuepressMainPlugin = ({
+export const vuepressConfigPlugin = ({
   app,
   isBuild,
   isServer,
@@ -104,9 +103,11 @@ export const vuepressMainPlugin = ({
   isBuild: boolean
   isServer: boolean
 }): Plugin => ({
-  name: 'vuepress:main',
+  name: 'vuepress:config',
 
-  config: async () => {
+  enforce: 'pre',
+
+  async config() {
     // vuepress related packages that include pure esm client code,
     // which should not be optimized in dev mode, and should not be
     // externalized in build ssr mode
@@ -188,58 +189,4 @@ export const vuepressMainPlugin = ({
       },
     }
   },
-
-  generateBundle(_, bundle) {
-    // delete all asset outputs in server build
-    if (isServer) {
-      Object.keys(bundle).forEach((key) => {
-        if (bundle[key].type === 'asset') {
-          delete bundle[key]
-        }
-      })
-    }
-  },
-
-  configureServer(server) {
-    return () => {
-      // fallback all `.html` requests to `/index.html`
-      server.middlewares.use(
-        history({
-          rewrites: [
-            {
-              from: /\.html$/,
-              to: '/index.html',
-            },
-          ],
-        }) as Connect.NextHandleFunction,
-      )
-
-      // serve the dev template as `/index.html`
-      server.middlewares.use((req, res, next) => {
-        if (!req.url?.endsWith('.html')) {
-          next()
-          return
-        }
-
-        res.statusCode = 200
-        res.setHeader('Content-Type', 'text/html')
-        const indexHtml = fs
-          .readFileSync(app.options.templateDev)
-          .toString()
-          .replace(
-            /<\/body>/,
-            `\
-<script type="module">
-import 'vuepress/client-app'
-</script>
-</body>`,
-          )
-        void server
-          .transformIndexHtml(req.url, indexHtml, req.originalUrl)
-          .then((result) => {
-            res.end(result)
-          })
-      })
-    }
-  },
 })

packages/bundler-vite/src/plugins/vuepressDevPlugin.ts

@@ -0,0 +1,57 @@
+import type { App } from '@vuepress/core'
+import { fs } from '@vuepress/utils'
+import history from 'connect-history-api-fallback'
+import type { Connect, Plugin } from 'vite'
+
+/**
+ * Configure dev command for vuepress
+ */
+export const vuepressDevPlugin = ({ app }: { app: App }): Plugin => ({
+  name: 'vuepress:dev',
+
+  async configureServer(server) {
+    // inject vuepress client app script into dev template
+    const templateDevContent = await fs.readFile(app.options.templateDev, {
+      encoding: 'utf-8',
+    })
+    const indexHtml = templateDevContent.replace(
+      /<\/body>/,
+      `\
+<script type="module">
+import 'vuepress/client-app'
+</script>
+</body>`,
+    )
+
+    return () => {
+      server.middlewares
+        // fallback all `.html` requests to `/index.html`
+        .use(
+          history({
+            rewrites: [
+              {
+                from: /\.html$/,
+                to: '/index.html',
+              },
+            ],
+          }) as Connect.NextHandleFunction,
+        )
+        // serve virtual `/index.html`
+        .use((req, res, next) => {
+          if (!req.url?.endsWith('.html')) {
+            next()
+            return
+          }
+
+          res.statusCode = 200
+          res.setHeader('Content-Type', 'text/html')
+
+          void server
+            .transformIndexHtml(req.url, indexHtml, req.originalUrl)
+            .then((result) => {
+              res.end(result)
+            })
+        })
+    }
+  },
+})

packages/bundler-vite/src/plugins/vuepressUserConfigPlugin.ts

@@ -4,9 +4,14 @@ import type { ViteBundlerOptions } from '../types.js'
 /**
  * A plugin to allow user config to override vite config
  */
-export const vuepressUserConfigPlugin = (
-  options: ViteBundlerOptions,
-): Plugin => ({
+export const vuepressUserConfigPlugin = ({
+  options,
+}: {
+  options: ViteBundlerOptions
+}): Plugin => ({
   name: 'vuepress:user-config',
+
+  enforce: 'post',
+
   config: () => options.viteOptions ?? {},
 })

packages/bundler-vite/src/plugins/vuepressVuePlugin.ts

@@ -5,7 +5,11 @@ import type { ViteBundlerOptions } from '../types.js'
 /**
  * Wrapper of the official vue plugin
  */
-export const vuepressVuePlugin = (options: ViteBundlerOptions): Plugin =>
+export const vuepressVuePlugin = ({
+  options,
+}: {
+  options: ViteBundlerOptions
+}): Plugin =>
   vuePlugin({
     ...options.vuePluginOptions,
   })

packages/bundler-vite/src/resolveViteConfig.ts

@@ -2,7 +2,9 @@ import type { App } from '@vuepress/core'
 import type { InlineConfig } from 'vite'
 import { mergeConfig } from 'vite'
 import {
-  vuepressMainPlugin,
+  vuepressBuildPlugin,
+  vuepressConfigPlugin,
+  vuepressDevPlugin,
   vuepressUserConfigPlugin,
   vuepressVuePlugin,
 } from './plugins/index.js'
@@ -28,9 +30,11 @@ export const resolveViteConfig = ({
         charset: 'utf8',
       },
       plugins: [
-        vuepressMainPlugin({ app, isBuild, isServer }),
-        vuepressVuePlugin(options),
-        vuepressUserConfigPlugin(options),
+        vuepressConfigPlugin({ app, isBuild, isServer }),
+        vuepressDevPlugin({ app }),
+        vuepressBuildPlugin({ isServer }),
+        vuepressVuePlugin({ options }),
+        vuepressUserConfigPlugin({ options }),
       ],
     },
     // some vite options would not take effect inside a plugin, so we still need to merge them here in addition to userConfigPlugin