Merge branch 'main' into resolve-route

package.json

@@ -43,7 +43,7 @@
     "eslint-config-vuepress": "^4.10.1",
     "eslint-config-vuepress-typescript": "^4.10.1",
     "husky": "^9.0.11",
-    "lint-staged": "^15.2.2",
+    "lint-staged": "^15.2.4",
     "prettier": "^3.2.5",
     "prettier-config-vuepress": "^4.4.0",
     "rimraf": "^5.0.7",
@@ -55,7 +55,7 @@
     "vitest": "^1.6.0",
     "vue-tsc": "^2.0.19"
   },
-  "packageManager": "[email protected].1",
+  "packageManager": "[email protected].2",
   "engines": {
     "node": ">=18.16.0"
   }

packages/bundler-webpack/package.json

@@ -50,7 +50,7 @@
     "esbuild-loader": "~4.1.0",
     "express": "^4.19.2",
     "html-webpack-plugin": "^5.6.0",
-    "lightningcss": "^1.24.1",
+    "lightningcss": "^1.25.0",
     "mini-css-extract-plugin": "^2.9.0",
     "postcss": "^8.4.38",
     "postcss-loader": "^8.1.1",
@@ -59,7 +59,7 @@
     "vue-loader": "^17.4.2",
     "vue-router": "^4.3.2",
     "webpack": "^5.91.0",
-    "webpack-chain": "^6.5.1",
+    "webpack-5-chain": "^8.0.2",
     "webpack-dev-server": "^5.0.4",
     "webpack-merge": "^5.10.0"
   },

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

@@ -3,8 +3,9 @@ import type { App } from '@vuepress/core'
 import { fs } from '@vuepress/utils'
 import CopyWebpackPlugin from 'copy-webpack-plugin'
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'
+import type { CssModule } from 'mini-css-extract-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import { createClientBaseConfig } from '../config/index.js'
 import type { WebpackBundlerOptions } from '../types.js'
 import { createClientPlugin } from './ssr/index.js'
@@ -65,7 +66,7 @@ export const createClientConfig = async (
       styles: {
         idHint: 'styles',
         // necessary to ensure async chunks are also extracted
-        test: (m) => /css\/mini-extract/.test(m.type),
+        test: (m: CssModule) => /css\/mini-extract/.test(m.type),
         chunks: 'all',
         enforce: true,
         reuseExistingChunk: true,

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

@@ -1,6 +1,6 @@
 import { createRequire } from 'node:module'
 import type { App } from '@vuepress/core'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import { createBaseConfig } from '../config/index.js'
 import type { WebpackBundlerOptions } from '../types.js'
 

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

@@ -1,6 +1,5 @@
 import { fs } from '@vuepress/utils'
-import type { WebpackPluginInstance } from 'webpack'
-import type { FnModules, StatsToJsonOutput } from '../../types.webpack.js'
+import type { StatsModule, WebpackPluginInstance } from 'webpack'
 import { isCSS, isJS } from './utils.js'
 
 export interface ClientManifest {
@@ -29,17 +28,17 @@ export const createClientPlugin = (
             modules = [],
             entrypoints = {},
             chunks = [],
-          }: StatsToJsonOutput = compilation
-            .getStats()
-            .toJson() as unknown as StatsToJsonOutput
+          } = compilation.getStats().toJson()
 
           // get all files
           const allFiles = assets.map((a) => a.name)
 
           // get initial entry files
           const initialFiles = Object.keys(entrypoints)
-            .map((name) => entrypoints[name].assets.map((item) => item.name))
-            .reduce((assets, all) => all.concat(assets), [])
+            .flatMap(
+              (name) =>
+                entrypoints[name].assets?.map((item) => item.name) ?? [],
+            )
             .filter((file) => isJS(file) || isCSS(file))
 
           // get files that should be loaded asynchronously
@@ -51,18 +50,19 @@ export const createClientPlugin = (
 
           // get asset modules
           const assetModules = modules.filter(
-            (m): m is FnModules & Required<Pick<FnModules, 'assets'>> =>
-              !!(m.assets && m.assets.length),
+            (m): m is StatsModule & Required<Pick<StatsModule, 'assets'>> =>
+              Boolean(m.assets?.length),
           )
 
           // get modules for client manifest
           const manifestModules: ClientManifest['modules'] = {}
 
-          const fileToIndex = (file: string): number => allFiles.indexOf(file)
+          const fileToIndex = (file: number | string): number =>
+            allFiles.indexOf(file.toString())
 
           modules.forEach((m) => {
             // ignore modules duplicated in multiple chunks
-            if (m.chunks.length !== 1) {
+            if (m.chunks?.length !== 1) {
               return
             }
 
@@ -75,21 +75,21 @@ export const createClientPlugin = (
 
             // remove appended hash of module identifier
             // which is the request string of the module
-            const request = m.identifier.replace(/\|\w+$/, '')
+            const request = m.identifier?.replace(/\|\w+$/, '')
 
             // get chunk files index
             const files = [...chunk.files.map(fileToIndex)]
 
             // find all asset modules associated with the same chunk
             assetModules.forEach((m) => {
-              if (m.chunks.some((id) => id === cid)) {
+              if (m.chunks?.some((id) => id === cid)) {
                 // get asset files
                 files.push(...m.assets.map(fileToIndex))
               }
             })
 
             // map the module request to files index
-            manifestModules[request] = files
+            if (request) manifestModules[request] = files
           })
 
           // generate client manifest json file

packages/bundler-webpack/src/config/createBaseConfig.ts

@@ -1,5 +1,5 @@
 import type { App } from '@vuepress/core'
-import Config from 'webpack-chain'
+import Config from 'webpack-5-chain'
 import type { WebpackBundlerOptions } from '../types.js'
 import { handleDevtool } from './handleDevtool.js'
 import { handleEntry } from './handleEntry.js'
@@ -21,7 +21,7 @@ export const createBaseConfig = async ({
   isBuild: boolean
   isServer: boolean
 }): Promise<Config> => {
-  // create new webpack-chain config
+  // create new webpack-5-chain config
   const config = new Config()
 
   /**

packages/bundler-webpack/src/config/createClientBaseConfig.ts

@@ -1,5 +1,5 @@
 import type { App } from '@vuepress/core'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import type { WebpackBundlerOptions } from '../types.js'
 import { createBaseConfig } from './createBaseConfig.js'
 

packages/bundler-webpack/src/config/handleDevtool.ts

@@ -1,5 +1,5 @@
 import type { App } from '@vuepress/core'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 /**
  * Set webpack devtool
@@ -18,7 +18,6 @@ export const handleDevtool = ({
     config.devtool('source-map')
   } else if (!isBuild) {
     // only enable eval-source-map in dev mode
-    // TODO: remove type assertion when webpack-chain updates its types for webpack 5
-    config.devtool('eval-cheap-module-source-map' as Config.DevTool)
+    config.devtool('eval-cheap-module-source-map')
   }
 }

packages/bundler-webpack/src/config/handleEntry.ts

@@ -1,6 +1,6 @@
 import type { App } from '@vuepress/core'
 import { fs } from '@vuepress/utils'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 /**
  * Set webpack entry

packages/bundler-webpack/src/config/handleMode.ts

@@ -1,5 +1,5 @@
 import type { App } from '@vuepress/core'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 /**
  * Set webpack mode

packages/bundler-webpack/src/config/handleModule.ts

@@ -1,5 +1,5 @@
 import type { App } from '@vuepress/core'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import type { WebpackBundlerOptions } from '../types.js'
 import { handleModuleAssets } from './handleModuleAssets.js'
 import { handleModuleJs } from './handleModuleJs.js'

packages/bundler-webpack/src/config/handleModuleAssets.ts

@@ -1,5 +1,5 @@
 import type { App } from '@vuepress/core'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 /**
  * Set webpack config to handle assets files
@@ -15,8 +15,8 @@ export const handleModuleAssets = ({
   config.module
     .rule('images')
     .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
-    .type('asset' as any)
-    .set('generator', {
+    .type('asset')
+    .generator({
       filename: 'assets/img/[name].[contenthash:8][ext]',
     })
 
@@ -26,26 +26,26 @@ export const handleModuleAssets = ({
   config.module
     .rule('svg')
     .test(/\.(svg)(\?.*)?$/)
-    .type('asset/resource' as any)
-    .set('generator', {
+    .type('asset/resource')
+    .generator({
       filename: 'assets/img/[name].[contenthash:8][ext]',
     })
 
   // media
   config.module
     .rule('media')
     .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
-    .type('asset/resource' as any)
-    .set('generator', {
+    .type('asset/resource')
+    .generator({
       filename: 'assets/media/[name].[contenthash:8][ext]',
     })
 
   // fonts
   config.module
     .rule('fonts')
     .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
-    .type('asset/resource' as any)
-    .set('generator', {
+    .type('asset/resource')
+    .generator({
       filename: 'assets/fonts/[name].[contenthash:8][ext]',
     })
 }

packages/bundler-webpack/src/config/handleModuleJs.ts

@@ -1,5 +1,5 @@
 import { createRequire } from 'node:module'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import type { WebpackBundlerOptions } from '../types.js'
 import { resolveEsbuildJsxOptions } from './resolveEsbuildJsxOptions.js'
 

packages/bundler-webpack/src/config/handleModulePug.ts

@@ -1,4 +1,4 @@
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 /**
  * Set webpack module to handle pug files

packages/bundler-webpack/src/config/handleModuleStyles.ts

@@ -1,7 +1,7 @@
 import { createRequire } from 'node:module'
 import autoprefixer from 'autoprefixer'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import type {
   LessLoaderOptions,
   LoaderOptions,

packages/bundler-webpack/src/config/handleModuleTs.ts

@@ -1,6 +1,6 @@
 import { createRequire } from 'node:module'
 import type { App } from '@vuepress/core'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import { resolveEsbuildJsxOptions } from './resolveEsbuildJsxOptions.js'
 
 const require = createRequire(import.meta.url)

packages/bundler-webpack/src/config/handleModuleVue.ts

@@ -2,7 +2,7 @@ import { createRequire } from 'node:module'
 import type { App } from '@vuepress/core'
 import { VueLoaderPlugin } from 'vue-loader'
 import type { VueLoaderOptions } from 'vue-loader'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import type { WebpackBundlerOptions } from '../types.js'
 
 const require = createRequire(import.meta.url)

packages/bundler-webpack/src/config/handleNode.ts

@@ -1,4 +1,4 @@
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 /**
  * Set webpack node config

packages/bundler-webpack/src/config/handleOtherOptions.ts

@@ -1,7 +1,6 @@
 import { createRequire } from 'node:module'
 import type { App } from '@vuepress/core'
-import type { Configuration } from 'webpack'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 const require = createRequire(import.meta.url)
 
@@ -22,12 +21,12 @@ export const handleOtherOptions = ({
   isServer: boolean
 }): void => {
   // set infrastructureLogging options
-  config.set('infrastructureLogging', {
+  config.infrastructureLogging({
     level: app.env.isDebug ? 'info' : 'error',
-  } as Configuration['infrastructureLogging'])
+  })
 
   // set cache options
-  config.set('cache', {
+  config.cache({
     type: 'filesystem',
     cacheDirectory: app.dir.cache(),
     version: JSON.stringify({
@@ -40,5 +39,5 @@ export const handleOtherOptions = ({
       'vue-loader': require('vue-loader/package.json').version,
       'webpack': require('webpack/package.json').version,
     }),
-  } as Configuration['cache'])
+  })
 }

packages/bundler-webpack/src/config/handlePluginDefine.ts

@@ -1,6 +1,6 @@
 import type { App } from '@vuepress/core'
 import webpack from 'webpack'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 /**
  * Set webpack DefinePlugin

packages/bundler-webpack/src/config/handleResolve.ts

@@ -1,5 +1,5 @@
 import type { App } from '@vuepress/core'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 /**
  * Set webpack resolve

packages/bundler-webpack/src/dev/createDevConfig.ts

@@ -1,7 +1,7 @@
 import type { App } from '@vuepress/core'
 import HtmlPlugin from 'html-webpack-plugin'
 import webpack from 'webpack'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import { createClientBaseConfig } from '../config/index.js'
 import type { WebpackBundlerOptions } from '../types.js'
 

packages/bundler-webpack/src/resolveWebpackConfig.ts

@@ -1,5 +1,5 @@
 import type { Configuration } from 'webpack'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import { merge } from 'webpack-merge'
 import type { WebpackBundlerOptions } from './types.js'
 
@@ -17,7 +17,7 @@ export const resolveWebpackConfig = ({
   // allow modifying webpack config via `chainWebpack`
   options.chainWebpack?.(config, isServer, isBuild)
 
-  // generate webpack config from webpack-chain
+  // generate webpack config from webpack-5-chain
   const webpackConfig = config.toConfig()
 
   // allow modifying webpack config via `configureWebpack`