feat: use Next's webpack instead of importing a new one

.eslintrc.cjs

@@ -1,4 +1,24 @@
 // @ts-check
+const path = require("node:path");
+
+const fg = require("fast-glob");
+
+const TSCONFIG_SOURCES = /** @type {const} */ ([
+  "tsconfig.json",
+  "tsconfig.eslint.json",
+  "docs/tsconfig.json",
+  "packages/*/tsconfig.json",
+  "packages/*/__tests__/tsconfig.json",
+  "examples/*/tsconfig.json",
+]);
+
+let packageDirs = fg
+  .sync("packages/*", {
+    cwd: __dirname,
+    onlyDirectories: true,
+  })
+  .map((dir) => path.join(__dirname, dir));
+
 /** @type {import("eslint").Linter.BaseConfig} */
 module.exports = {
   parser: "@typescript-eslint/parser",
@@ -11,29 +31,37 @@ module.exports = {
     "next/core-web-vitals",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
     "turbo",
     "prettier",
   ],
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: [
-      "tsconfig.json",
-      "tsconfig.eslint.json",
-      "docs/tsconfig.json",
-      "packages/*/tsconfig.json",
-      "packages/*/__tests__/tsconfig.json",
-      "examples/*/tsconfig.json",
-    ],
+    project: TSCONFIG_SOURCES,
     ecmaVersion: "latest",
     sourceType: "module",
+    warnOnUnsupportedTypeScriptVersion: false,
   },
   plugins: ["@typescript-eslint", "simple-import-sort"],
   rules: {
     "@typescript-eslint/ban-ts-comment": "error",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-var-requires": "off",
     "@typescript-eslint/consistent-type-imports": "warn",
-    "@typescript-eslint/no-unused-vars": ["warn", { ignoreRestSiblings: true }],
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        ignoreRestSiblings: true,
+        varsIgnorePattern: "^_",
+        argsIgnorePattern: "^_",
+      },
+    ],
+    "import/no-extraneous-dependencies": "off",
+    // Doesn't really work with VSCode...
+    "import/no-unresolved": "off",
+    "import/no-named-as-default": "off",
+    "import/no-named-as-default-member": "off",
     "no-unused-vars": "off",
     "no-extra-boolean-cast": "off",
     "simple-import-sort/imports": "warn",
@@ -45,4 +73,46 @@ module.exports = {
       },
     ],
   },
+  settings: {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx", ".mjs", ".cjs", ".js"],
+    },
+    "import/resolver": {
+      typescript: {
+        alwaysTryTypes: true,
+        project: TSCONFIG_SOURCES,
+      },
+    },
+    "import/internal-regex": "^@ducanh2912/",
+    "import/external-module-folders": [
+      "packages/next-pwa",
+      "packages/next-sw",
+      "packages/utils",
+      "packages/constants",
+      "node_modules",
+    ],
+    next: {
+      rootDir: ["./docs/", "./examples/*/"],
+    },
+  },
+  overrides: [
+    {
+      files: ["packages/*/__tests__/**"],
+      env: {
+        jest: true,
+      },
+    },
+    {
+      files: ["packages/**"],
+      rules: {
+        "import/no-extraneous-dependencies": [
+          "error",
+          {
+            devDependencies: ["__tests__/**", "**/*.config.{cjs,mjs,js,ts}"],
+            packageDir: [__dirname, ...packageDirs],
+          },
+        ],
+      },
+    },
+  ],
 };

docs/content/next-pwa/getting-started.mdx

@@ -123,7 +123,7 @@ export default nextConfigFunction;
 </Tabs>
 
 <Callout>
-  **Note**: This plugin is written in Typescript and supports JSDoc. It is
+  **Note**: This plugin is written in TypeScript and supports JSDoc. It is
   recommended to add `// @ts-check` to the top of your `next.config.js` file to
   leverage typechecking. This is especially useful when you use
   `PluginOptions.workboxOptions`, as you may unknowningly mix

docs/src/app/(home)/code-showcase.mdx

@@ -35,9 +35,9 @@ module.exports = withPWA({
 });
 ```
 
-## Typescript support
+## TypeScript support
 
-`next-pwa` is built with Typescript. As you configure `next-pwa`, you will get type hints and detailed description of its options. If you directly wrap your
+`next-pwa` is built with TypeScript. As you configure `next-pwa`, you will get type hints and detailed description of its options. If you directly wrap your
 Next config with `withPWA`, it will automatically be typed with `NextConfig`!
 
 </CodeShowcase>

docs/src/app/(home)/constants.ts

@@ -30,6 +30,6 @@ export const FEATURES_LIST: Feature[] = [
     icon: "🚀",
     label: "Developer experience",
     description:
-      "Built-in Typescript definitions and JSDoc to enable the best DX.",
+      "Built-in TypeScript definitions and JSDoc to enable the best DX.",
   },
 ];

examples/basic/package.json

@@ -19,7 +19,6 @@
     "@types/node": "20.3.2",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
-    "typescript": "5.1.6",
-    "webpack": "5.88.1"
+    "typescript": "5.1.6"
   }
 }

examples/custom-server/package.json

@@ -26,7 +26,6 @@
     "nodemon": "2.0.22",
     "rimraf": "5.0.1",
     "ts-node": "10.9.1",
-    "typescript": "5.1.6",
-    "webpack": "5.88.1"
+    "typescript": "5.1.6"
   }
 }

examples/custom-worker/package.json

@@ -19,7 +19,6 @@
     "@types/node": "20.3.2",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
-    "typescript": "5.1.6",
-    "webpack": "5.88.1"
+    "typescript": "5.1.6"
   }
 }

examples/lifecycle/package.json

@@ -19,7 +19,6 @@
     "@types/node": "20.3.2",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
-    "typescript": "5.1.6",
-    "webpack": "5.88.1"
+    "typescript": "5.1.6"
   }
 }

examples/next-i18next/package.json

@@ -25,7 +25,6 @@
     "@types/node": "20.3.2",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
-    "typescript": "5.1.6",
-    "webpack": "5.88.1"
+    "typescript": "5.1.6"
   }
 }

examples/next-image/package.json

@@ -19,7 +19,6 @@
     "@types/node": "20.3.2",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
-    "typescript": "5.1.6",
-    "webpack": "5.88.1"
+    "typescript": "5.1.6"
   }
 }

examples/offline-fallback-v2/package.json

@@ -20,7 +20,6 @@
     "@types/node": "20.3.2",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
-    "typescript": "5.1.6",
-    "webpack": "5.88.1"
+    "typescript": "5.1.6"
   }
 }

examples/web-push/package.json

@@ -22,7 +22,6 @@
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "@types/web-push": "3.3.2",
-    "typescript": "5.1.6",
-    "webpack": "5.88.1"
+    "typescript": "5.1.6"
   }
 }

package.json

@@ -43,6 +43,7 @@
     "eslint-config-next": "13.4.7",
     "eslint-config-prettier": "8.8.0",
     "eslint-config-turbo": "1.10.6",
+    "eslint-plugin-import": "2.27.5",
     "eslint-plugin-simple-import-sort": "10.0.0",
     "fast-glob": "3.2.12",
     "husky": "8.0.3",
@@ -55,8 +56,7 @@
     "shell-quote": "1.8.1",
     "tslib": "2.6.0",
     "turbo": "1.10.3",
-    "typescript": "5.2.0-dev.20230628",
-    "webpack": "5.88.1"
+    "typescript": "5.2.0-dev.20230628"
   },
   "packageManager": "pnpm@8.6.2"
 }

packages/constants/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "constants",
+  "name": "@ducanh2912/constants",
   "version": "0.0.0",
   "private": true,
   "license": "MIT",

packages/next-pwa/README.md

@@ -13,7 +13,7 @@ This plugin is powered by [Workbox](https://developer.chrome.com/docs/workbox/)
 - 🎈 Easy-to-understand examples.
 - 📴 Offline support [(you can also provide fallbacks for when fetching fails)](/examples/offline-fallback-v2).
 - 🔉 Default range requests for audios and videos.
-- 📐 [Custom worker to run your own code (also supports path aliases, Typescript and code splitting!).](/examples/custom-worker)
+- 📐 [Custom worker to run your own code (also supports path aliases, TypeScript and code splitting!).](/examples/custom-worker)
 - 📜 [Public environment variables](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables) are available in custom workers.
 - 🐞 Debug service worker in development mode.
 - 🌏 [Internationalization support with `next-i18next`.](/examples/next-i18next)

packages/next-pwa/package.json

@@ -67,6 +67,8 @@
     "workbox-window": "7.0.0"
   },
   "devDependencies": {
+    "@ducanh2912/constants": "workspace:*",
+    "@ducanh2912/utils": "workspace:*",
     "@rollup/plugin-alias": "5.0.0",
     "@rollup/plugin-json": "6.0.0",
     "@rollup/plugin-node-resolve": "15.1.0",
@@ -75,19 +77,16 @@
     "@types/node": "20.3.2",
     "@types/semver": "7.5.0",
     "chalk": "5.2.0",
-    "constants": "workspace:*",
     "next": "13.4.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rollup": "3.25.3",
     "rollup-plugin-dts": "5.3.0",
     "type-fest": "3.12.0",
     "typescript": "5.2.0-dev.20230628",
-    "utils": "workspace:*",
     "webpack": "5.88.1"
   },
   "peerDependencies": {
-    "next": ">=11.0.0",
-    "webpack": ">=5.9.0"
+    "next": ">=11.0.0"
   }
 }

packages/next-pwa/rollup.config.js

@@ -5,12 +5,12 @@
  *   "input" | "output" | "external" | "plugins"
  * >} FileEntry
  */
+import { swcConfig } from "@ducanh2912/constants/swc-config";
 import alias from "@rollup/plugin-alias";
 import json from "@rollup/plugin-json";
 import nodeResolve from "@rollup/plugin-node-resolve";
 import swc from "@rollup/plugin-swc";
 import typescript from "@rollup/plugin-typescript";
-import { swcConfig } from "constants/swc-config";
 import { defineConfig } from "rollup";
 import dts from "rollup-plugin-dts";
 
@@ -39,7 +39,6 @@ const files = [
       "terser-webpack-plugin",
       "workbox-webpack-plugin",
       "typescript",
-      "webpack",
       "crypto",
       "fs",
       "path",

packages/next-pwa/src/index.ts

@@ -3,12 +3,12 @@ import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
+import { loadTSConfig, logger } from "@ducanh2912/utils";
 import { CleanWebpackPlugin } from "clean-webpack-plugin";
 import fg from "fast-glob";
 import type { NextConfig } from "next";
 import type NextConfigShared from "next/dist/server/config-shared.js";
-import { loadTSConfig, logger } from "utils";
-import type { Configuration, default as WebpackType } from "webpack";
+import type { Configuration, default as Webpack } from "webpack";
 import type { RuntimeCaching } from "workbox-build";
 import WorkboxPlugin from "workbox-webpack-plugin";
 
@@ -51,7 +51,7 @@ const withPWAInit = (
         nextDefConfig?.experimental?.appDir ??
         true;
 
-      const webpack: typeof WebpackType = options.webpack;
+      const webpack: typeof Webpack = options.webpack;
       const {
         buildId,
         dev,
@@ -176,6 +176,7 @@ const withPWAInit = (
 
         const _dest = path.join(options.dir, dest);
         const sweWorkerName = buildSWEntryWorker({
+          webpack,
           id: buildId,
           destDir: _dest,
           shouldGenSWEWorker: cacheOnFrontEndNav,
@@ -188,6 +189,7 @@ const withPWAInit = (
         );
 
         const customWorkerScriptName = buildCustomWorker({
+          webpack,
           id: buildId,
           baseDir: options.dir,
           customWorkerDir,
@@ -288,6 +290,7 @@ const withPWAInit = (
             );
           }
           const res = buildFallbackWorker({
+            webpack,
             id: buildId,
             fallbacks,
             destDir: _dest,

packages/next-pwa/src/resolve-runtime-caching.ts

@@ -1,4 +1,4 @@
-import { logger } from "utils";
+import { logger } from "@ducanh2912/utils";
 import type { RuntimeCaching } from "workbox-build";
 
 import defaultCache from "./cache.js";

packages/next-pwa/src/swc-loader.ts

@@ -1 +1 @@
-export { swcLoader as default } from "utils";
+export { swcLoader as default } from "@ducanh2912/utils";

packages/next-pwa/src/webpack-builders/build-custom-worker.ts

@@ -1,24 +1,25 @@
 import fs from "node:fs";
 import path from "node:path";
 
+import { addPathAliasesToSWC, logger } from "@ducanh2912/utils";
 import { CleanWebpackPlugin } from "clean-webpack-plugin";
 import type { TsConfigJson as TSConfigJSON } from "type-fest";
-import { addPathAliasesToSWC, logger } from "utils";
-import type { Configuration } from "webpack";
-import webpack from "webpack";
+import type { Configuration, default as Webpack } from "webpack";
 
 import defaultSwcRc from "../.swcrc.json";
 import { NextPWAContext } from "./context.js";
 import { getSharedWebpackConfig } from "./utils.js";
 
 export const buildCustomWorker = ({
+  webpack,
   id,
   baseDir,
   customWorkerDir,
   destDir,
   plugins = [],
   tsconfig,
 }: {
+  webpack: typeof Webpack;
   id: string;
   baseDir: string;
   customWorkerDir: string;