feat!: refine bundler options

packages/bundler-vite/src/resolveViteConfig.ts

@@ -22,8 +22,9 @@ export const resolveViteConfig = ({
   options: ViteBundlerOptions
   isBuild: boolean
   isServer: boolean
-}): InlineConfig =>
-  mergeConfig(
+}): InlineConfig => {
+  // generate base vite config
+  let viteConfig = mergeConfig(
     {
       clearScreen: false,
       configFile: false,
@@ -43,3 +44,19 @@ export const resolveViteConfig = ({
     // some vite options would not take effect inside a plugin, so we still need to merge them here in addition to userConfigPlugin
     options.viteOptions ?? {},
   )
+
+  // allow modifying vite config via `configureVite`
+  const configureViteResult = options.configureVite?.(
+    viteConfig,
+    isServer,
+    isBuild,
+    mergeConfig,
+  )
+
+  // if `configureVite` returns a configuration object, use it as the new vite config
+  if (configureViteResult) {
+    viteConfig = configureViteResult
+  }
+
+  return viteConfig
+}

packages/bundler-vite/src/types.ts

@@ -6,6 +6,36 @@ import type { InlineConfig } from 'vite'
  * Options for bundler-vite
  */
 export interface ViteBundlerOptions extends BundlerOptions {
+  /**
+   * Vite options
+   */
+  /**
+   * Vite options
+   */
   viteOptions?: InlineConfig
+  /**
+   * Options for @vitejs/plugin-vue
+   */
+  /**
+   * Options for @vitejs/plugin-vue
+   */
   vuePluginOptions?: VuePluginOptions
+  /**
+   * Modify Vite config
+   *
+   * @param config - Vite config
+   * @param isServer - Whether it is server bundle
+   * @param isBuild - Whether in build mode
+   * @param mergeConfig - Vite's mergeConfig function, in case you want to use it to merge config
+   * @returns New Vite config
+   */
+  configureVite?: (
+    config: InlineConfig,
+    isServer: boolean,
+    isBuild: boolean,
+    mergeConfig: (
+      defaultConfig: InlineConfig,
+      overrideConfig: InlineConfig,
+    ) => InlineConfig,
+  ) => InlineConfig | undefined
 }

packages/bundler-vite/src/viteBundler.ts

@@ -1,11 +1,14 @@
 import type { Bundler } from '@vuepress/core'
+import { mergeConfig } from 'vite'
 
 import { build } from './build/index.js'
 import { dev } from './dev.js'
 import type { ViteBundlerOptions } from './types.js'
 
 export const viteBundler = (options: ViteBundlerOptions = {}): Bundler => ({
   name: '@vuepress/bundler-vite',
+  type: 'vite',
   dev: async (app) => dev(options, app),
   build: async (app) => build(options, app),
+  mergeConfig: mergeConfig as Bundler['mergeConfig'],
 })

packages/bundler-webpack/src/resolveWebpackConfig.ts

@@ -19,19 +19,19 @@ export const resolveWebpackConfig = ({
   options.chainWebpack?.(config, isServer, isBuild)
 
   // generate webpack config from webpack-v5-chain
-  const webpackConfig = config.toConfig()
+  let webpackConfig = config.toConfig()
 
   // allow modifying webpack config via `configureWebpack`
   const configureWebpackResult = options.configureWebpack?.(
     webpackConfig,
     isServer,
     isBuild,
+    merge,
   )
 
-  // if `configureWebpack` returns a configuration object,
-  // use webpack-merge to merge it
+  // if `configureWebpack` returns a configuration object, use this object as the new webpack config
   if (configureWebpackResult) {
-    return merge(webpackConfig, configureWebpackResult)
+    webpackConfig = configureWebpackResult
   }
 
   return webpackConfig

packages/bundler-webpack/src/types.ts

@@ -25,7 +25,11 @@ export interface WebpackBundlerOptions extends BundlerOptions {
     config: WebpackConfiguration,
     isServer: boolean,
     isBuild: boolean,
-  ) => WebpackConfiguration | void
+    mergeConfig: <Config extends object>(
+      firstConfiguration: Config,
+      ...configurations: Config[]
+    ) => Config,
+  ) => WebpackConfiguration | undefined
 
   /**
    * use webpack-v5-chain to set webpack config

packages/bundler-webpack/src/webpackBundler.ts

@@ -1,4 +1,5 @@
 import type { Bundler } from '@vuepress/core'
+import { merge } from 'webpack-merge'
 
 import { build } from './build/index.js'
 import { dev } from './dev/index.js'
@@ -8,6 +9,8 @@ export const webpackBundler = (
   options: WebpackBundlerOptions = {},
 ): Bundler => ({
   name: '@vuepress/bundler-webpack',
+  type: 'webpack',
   dev: async (app) => dev(options, app),
   build: async (app) => build(options, app),
+  mergeConfig: merge,
 })

packages/core/src/app/resolveAppMarkdown.ts

@@ -19,7 +19,7 @@ export const resolveAppMarkdown = async (app: App): Promise<Markdown> => {
   if (app.options.markdown.assets !== false) {
     app.options.markdown.assets ??= {}
     app.options.markdown.assets.absolutePathPrependBase ??=
-      app.options.bundler.name === '@vuepress/bundler-webpack'
+      app.options.bundler.type === 'webpack'
   }
 
   const markdown = createMarkdown(app.options.markdown)

packages/core/src/types/bundler.ts

@@ -1,4 +1,5 @@
 import type { App } from './app/index.js'
+import type { DeepPartial } from './helpers.js'
 
 /**
  * Vuepress bundler
@@ -13,6 +14,11 @@ export interface Bundler {
    */
   name: string
 
+  /**
+   * Type of the bundler, e.g. 'vite' or 'webpack'
+   */
+  type: string
+
   /**
    * Method to run vuepress app in dev mode, starting dev server
    */
@@ -22,6 +28,15 @@ export interface Bundler {
    * Method to run vuepress app in build mode, generating static pages and assets
    */
   build: (app: App) => Promise<void>
+
+  /**
+   * Merge helper for current bundler.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  mergeConfig: <Config extends Record<string, any> = Record<string, any>>(
+    currentConfig: Config,
+    newConfig: DeepPartial<Config>,
+  ) => Config
 }
 
 export type BundlerOptions = Record<string, unknown>

packages/core/src/types/helpers.ts

@@ -0,0 +1,14 @@
+type DeepPartialArray<T> = DeepPartial<T>[]
+
+type DeepPartialObject<T> = {
+  [P in keyof T]?: DeepPartial<T[P]>
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+export type DeepPartial<T> = T extends Function
+  ? T
+  : T extends (infer U)[]
+    ? DeepPartialArray<U>
+    : T extends object
+      ? DeepPartialObject<T>
+      : T | undefined

packages/core/tests/app/resolveAppOptions.spec.ts

@@ -11,7 +11,7 @@ it('should create app options with default values', () => {
     resolveAppOptions({
       source,
       theme: { name: 'theme' },
-      bundler: { name: 'bundler' } as Bundler,
+      bundler: { name: 'bundler', type: 'vite' } as Bundler,
     }),
   ).toEqual({
     base: '/',
@@ -23,7 +23,7 @@ it('should create app options with default values', () => {
       '/': { lang: 'en-US', title: '', description: '' },
     },
     theme: { name: 'theme' },
-    bundler: { name: 'bundler' },
+    bundler: { name: 'bundler', type: 'vite' },
     source,
     dest: path.resolve(source, '.vuepress/dist'),
     temp: path.resolve(source, '.vuepress/.temp'),