refactor: create @docusaurus/bundler and @docusaurus/babel packages (#10511)

packages/docusaurus-plugin-pwa/package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@babel/core": "^7.23.3",
     "@babel/preset-env": "^7.23.3",
+    "@docusaurus/bundler": "3.5.2",
     "@docusaurus/core": "3.5.2",
     "@docusaurus/logger": "3.5.2",
     "@docusaurus/theme-common": "3.5.2",
@@ -32,11 +33,9 @@
     "babel-loader": "^9.1.3",
     "clsx": "^2.0.0",
     "core-js": "^3.31.1",
-    "terser-webpack-plugin": "^5.3.9",
     "tslib": "^2.6.0",
     "webpack": "^5.88.1",
     "webpack-merge": "^5.9.0",
-    "webpackbar": "^5.0.2",
     "workbox-build": "^7.0.0",
     "workbox-precaching": "^7.0.0",
     "workbox-window": "^7.0.0"

packages/docusaurus-plugin-pwa/src/deps.d.ts

@@ -1,15 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// TODO incompatible declaration file: https://github.com/unjs/webpackbar/pull/108
-declare module 'webpackbar' {
-  import webpack from 'webpack';
-
-  export default class WebpackBarPlugin extends webpack.ProgressPlugin {
-    constructor(options: {name: string; color?: string});
-  }
-}

packages/docusaurus-plugin-pwa/src/index.ts

@@ -6,13 +6,15 @@
  */
 
 import path from 'path';
-import webpack, {type Configuration} from 'webpack';
-import WebpackBar from 'webpackbar';
-import Terser from 'terser-webpack-plugin';
+import {type Configuration} from 'webpack';
+import {
+  compile,
+  getProgressBarPlugin,
+  getMinimizers,
+} from '@docusaurus/bundler';
 import {injectManifest} from 'workbox-build';
 import {normalizeUrl} from '@docusaurus/utils';
 import logger from '@docusaurus/logger';
-import {compile} from '@docusaurus/core/lib/webpack/utils';
 import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
 import type {HtmlTags, LoadContext, Plugin} from '@docusaurus/types';
 import type {PluginOptions} from '@docusaurus/plugin-pwa';
@@ -89,10 +91,10 @@ export default function pluginPWA(
       });
     },
 
-    configureWebpack(config) {
+    configureWebpack(config, isServer, {currentBundler}) {
       return {
         plugins: [
-          new webpack.EnvironmentPlugin(
+          new currentBundler.instance.EnvironmentPlugin(
             // See https://github.com/facebook/docusaurus/pull/10455#issuecomment-2317593528
             // See https://github.com/webpack/webpack/commit/adf2a6b7c6077fd806ea0e378c1450cccecc9ed0#r145989788
             // @ts-expect-error: bad Webpack type?
@@ -139,6 +141,10 @@ export default function pluginPWA(
     async postBuild(props) {
       const swSourceFileTest = /\.m?js$/;
 
+      const ProgressBarPlugin = await getProgressBarPlugin({
+        currentBundler: props.currentBundler,
+      });
+
       const swWebpackConfig: Configuration = {
         entry: require.resolve('./sw.js'),
         output: {
@@ -155,18 +161,17 @@ export default function pluginPWA(
           // See https://developers.google.com/web/tools/workbox/guides/using-bundlers#webpack
           minimizer: debug
             ? []
-            : [
-                new Terser({
-                  test: swSourceFileTest,
-                }),
-              ],
+            : await getMinimizers({
+                faster: props.siteConfig.future.experimental_faster,
+                currentBundler: props.currentBundler,
+              }),
         },
         plugins: [
-          new webpack.EnvironmentPlugin({
+          new props.currentBundler.instance.EnvironmentPlugin({
             // Fallback value required with Webpack 5
             PWA_SW_CUSTOM: swCustom ?? '',
           }),
-          new WebpackBar({
+          new ProgressBarPlugin({
             name: 'Service Worker',
             color: 'red',
           }),
@@ -182,7 +187,10 @@ export default function pluginPWA(
         },
       };
 
-      await compile([swWebpackConfig]);
+      await compile({
+        configs: [swWebpackConfig],
+        currentBundler: props.currentBundler,
+      });
 
       const swDest = path.resolve(props.outDir, 'sw.js');