refactor(next-pwa, next-sw): use Next's swc bindings instead of @swc/core

.changeset/hungry-yaks-lay.md

@@ -0,0 +1,14 @@
+---
+"@ducanh2912/next-pwa": major
+"@ducanh2912/next-sw": minor
+---
+
+BREAKING CHANGE(next-pwa, next-sw): use next's swc bindings instead of swc/core
+
+What: From now on we will try to resolve `next/dist/build/swc` in `swc-loader` (needed to use `cacheOnFrontEndNav`, custom workers and offline fallbacks). If it can't be resolved, we will fallback to `@swc/core` (needed to be installed manually).
+
+Why: This is to save disk space (we don't need two `@swc/core`) and avoid exceeding Vercel's serverless size limit.
+
+Why use Next's `next/dist/build/swc`: it seems that `@next/mdx` is also doing the same for their `mdx` Rust compiler.
+
+How to upgrade: Usually you don't need to do anything. But if you see this line when you build your Next app: `Using @swc/core to compile next-pwa's features. Please install it if you haven't.`, please do as instructed.

.changeset/serious-dodos-complain.md

@@ -0,0 +1,11 @@
+---
+"@ducanh2912/next-pwa": major
+---
+
+BREAKING CHANGE(requirements): bump minimum Next.js version to v11
+
+What: `next-pwa`'s minimum supported Next.js version is now 11.0.0.
+
+Why: I noticed that `workbox-webpack-plugin` no longer works with Next.js 9 and 10, so this bumps the minimum supported Next.js version to v11.
+
+How to upgrade: Bump `next` to at least 11.0.0.

contributing/core/developing.md

@@ -29,6 +29,5 @@ To develop locally:
 1. When you are ready to push, make a fork and then run:
  ```
  git remote set-url origin https://github.com/YOUR_NAME/next-pwa
- git branch -m MY_BRANCH_NAME
  git push -u origin MY_BRANCH_NAME
  ```

packages/next-pwa/.eslintrc.cjs

@@ -1,4 +1,9 @@
+// @ts-check
+/** @type {import("eslint").Linter.BaseConfig} */
 module.exports = {
  extends: ["plugin:jsdoc/recommended"],
  plugins: ["jsdoc"],
+ rules: {
+ "jsdoc/require-param-type": "off",
+ },
 };

packages/next-pwa/package.json

@@ -56,11 +56,9 @@
  "typecheck": "tsc"
  },
  "dependencies": {
- "@swc/core": "1.3.62",
  "clean-webpack-plugin": "4.0.0",
  "fast-glob": "3.2.12",
  "semver": "7.5.1",
- "swc-loader": "0.2.3",
  "terser-webpack-plugin": "5.3.9",
  "workbox-build": "7.0.0",
  "workbox-core": "7.0.0",
@@ -87,7 +85,7 @@
  "webpack": "5.86.0"
  },
  "peerDependencies": {
- "next": ">=9.1.0",
+ "next": ">=11.0.0",
  "webpack": ">=5.9.0"
  }
 }

packages/next-pwa/rollup.config.js

@@ -68,6 +68,14 @@ const files = [
  format: "esm",
  },
  },
+ {
+ input: "src/swc-loader.ts",
+ output: {
+ file: "dist/swc-loader.cjs",
+ format: "cjs",
+ },
+ external: ["semver"],
+ },
 ];
 
 /** @type {FileEntry[]} */

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

@@ -1,5 +1,4 @@
 import fs from "node:fs";
-import { createRequire } from "node:module";
 import path from "node:path";
 
 import { CleanWebpackPlugin } from "clean-webpack-plugin";
@@ -11,8 +10,6 @@ import webpack from "webpack";
 
 import swcRc from "./.swcrc.json";
 
-const require = createRequire(import.meta.url);
-
 export const buildCustomWorker = ({
  id,
  baseDir,
@@ -103,7 +100,7 @@ export const buildCustomWorker = ({
  },
  resolveLoader: {
  alias: {
- "swc-loader": require.resolve("swc-loader"),
+ "swc-loader": path.join(__dirname, "swc-loader.cjs"),
  },
  },
  module: {

packages/next-pwa/src/build-fallback-worker/index.ts

@@ -1,4 +1,3 @@
-import { createRequire } from "node:module";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -12,7 +11,6 @@ import type { FallbackRoutes } from "../types.js";
 import { getFallbackEnvs } from "./get-fallback-envs.js";
 
 const __dirname = fileURLToPath(new URL(".", import.meta.url));
-const require = createRequire(import.meta.url);
 
 export const buildFallbackWorker = ({
  id,
@@ -63,7 +61,7 @@ export const buildFallbackWorker = ({
  },
  resolveLoader: {
  alias: {
- "swc-loader": require.resolve("swc-loader"),
+ "swc-loader": path.join(__dirname, "swc-loader.cjs"),
  },
  },
  module: {

packages/next-pwa/src/build-sw-entry-worker.ts

@@ -1,4 +1,3 @@
-import { createRequire } from "node:module";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -10,7 +9,6 @@ import webpack from "webpack";
 import swcRc from "./.swcrc.json";
 
 const __dirname = fileURLToPath(new URL(".", import.meta.url));
-const require = createRequire(import.meta.url);
 
 export const buildSWEntryWorker = ({
  id,
@@ -55,7 +53,7 @@ export const buildSWEntryWorker = ({
  },
  resolveLoader: {
  alias: {
- "swc-loader": require.resolve("swc-loader"),
+ "swc-loader": path.join(__dirname, "swc-loader.cjs"),
  },
  },
  module: {

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

@@ -0,0 +1 @@
+export { swcLoader as default } from "utils";

packages/next-sw/package.json

@@ -39,9 +39,7 @@
  "typecheck": "tsc"
  },
  "dependencies": {
- "@swc/core": "1.3.62",
  "clean-webpack-plugin": "4.0.0",
- "swc-loader": "0.2.3",
  "terser-webpack-plugin": "5.3.9"
  },
  "devDependencies": {

packages/next-sw/rollup.config.js

@@ -52,6 +52,14 @@ const files = [
  },
  external: ["workbox-window"],
  },
+ {
+ input: "src/swc-loader.ts",
+ output: {
+ file: "dist/swc-loader.cjs",
+ format: "cjs",
+ },
+ external: ["semver"],
+ },
 ];
 
 /** @type {FileEntry[]} */

packages/next-sw/src/build/generate-sw/core.ts

@@ -1,4 +1,3 @@
-import { createRequire } from "node:module";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -14,7 +13,6 @@ import { getFallbackEnvs } from "./core-utils.js";
 import { runtimeCachingConverter } from "./runtime-caching-converter.js";
 
 const __dirname = fileURLToPath(new URL(".", import.meta.url));
-const require = createRequire(import.meta.url);
 
 export type ImportScripts = string[] | undefined;
 
@@ -94,7 +92,7 @@ export const generateSW = ({
  },
  resolveLoader: {
  alias: {
- "swc-loader": require.resolve("swc-loader"),
+ "swc-loader": path.join(__dirname, "swc-loader.cjs"),
  },
  },
  module: {

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

@@ -0,0 +1 @@
+export { swcLoader as default } from "utils";

packages/utils/package.json

@@ -24,6 +24,7 @@
  "devDependencies": {
  "@rollup/plugin-node-resolve": "15.1.0",
  "@rollup/plugin-typescript": "11.1.1",
+ "@swc/core": "1.3.62",
  "@types/semver": "7.5.0",
  "rollup": "3.24.1",
  "type-fest": "3.11.1",

packages/utils/src/index.ts

@@ -3,3 +3,4 @@ export { findFirstTruthy } from "./find-first-truthy.js";
 export { getPackageVersion } from "./get-package-version.js";
 export { loadTSConfig } from "./load-tsconfig.js";
 export * as logger from "./logger.js";
+export { swcLoader } from "./swc-loader.js";

packages/utils/src/swc-loader.ts

@@ -0,0 +1,133 @@
+import { createRequire } from "node:module";
+
+import type { Compiler } from "@swc/core";
+
+import * as logger from "./logger.js";
+
+const require = createRequire(import.meta.url);
+
+/**
+ * swc-loader
+ * @param source Source code
+ * @param inputSourceMap Source map
+ */
+export function swcLoader(this: any, source: string, inputSourceMap: string) {
+ // Make the loader async
+ const callback = this.async();
+ const filename = this.resourcePath;
+
+ let loaderOptions =
+ (typeof this.getOptions === "function"
+ ? this.getOptions()
+ : require("loader-utils").getOptions(this)) || {};
+
+ // Standardize on 'sourceMaps' as the key passed through to Webpack, so that
+ // users may safely use either one alongside our default use of
+ // 'this.sourceMap' below without getting error about conflicting aliases.
+ if (
+ Object.prototype.hasOwnProperty.call(loaderOptions, "sourceMap") &&
+ !Object.prototype.hasOwnProperty.call(loaderOptions, "sourceMaps")
+ ) {
+ loaderOptions = Object.assign({}, loaderOptions, {
+ sourceMaps: loaderOptions.sourceMap,
+ });
+ delete loaderOptions.sourceMap;
+ }
+
+ if (inputSourceMap && typeof inputSourceMap === "object") {
+ inputSourceMap = JSON.stringify(inputSourceMap);
+ }
+
+ const programmaticOptions = Object.assign({}, loaderOptions, {
+ filename,
+ inputSourceMap: inputSourceMap || undefined,
+
+ // Set the default sourcemap behavior based on Webpack's mapping flag,
+ // but allow users to override if they want.
+ sourceMaps:
+ loaderOptions.sourceMaps === undefined
+ ? this.sourceMap
+ : loaderOptions.sourceMaps,
+
+ // Ensure that Webpack will get a full absolute path in the sourcemap
+ // so that it can properly map the module back to its internal cached
+ // modules.
+ sourceFileName: filename,
+ });
+ if (!programmaticOptions.inputSourceMap) {
+ delete programmaticOptions.inputSourceMap;
+ }
+ const sync = programmaticOptions.sync;
+ const parseMap = programmaticOptions.parseMap;
+
+ let swc: Compiler;
+ try {
+ // avoid installing @swc/core
+ swc = require("next/dist/build/swc");
+ } catch {
+ logger.info(
+ "Using @swc/core to compile next-pwa's features. Please install it if you haven't."
+ );
+ swc = require("@swc/core");
+ }
+
+ // Remove loader related options
+ delete programmaticOptions.sync;
+ delete programmaticOptions.parseMap;
+ delete programmaticOptions.customize;
+ delete programmaticOptions.cacheDirectory;
+ delete programmaticOptions.cacheIdentifier;
+ delete programmaticOptions.cacheCompression;
+ delete programmaticOptions.metadataSubscribers;
+
+ // auto detect development mode
+ if (
+ this.mode &&
+ programmaticOptions.jsc &&
+ programmaticOptions.jsc.transform &&
+ programmaticOptions.jsc.transform.react &&
+ !Object.prototype.hasOwnProperty.call(
+ programmaticOptions.jsc.transform.react,
+ "development"
+ )
+ ) {
+ programmaticOptions.jsc.transform.react.development =
+ this.mode === "development";
+ }
+
+ if (programmaticOptions.sourceMaps === "inline") {
+ // Babel has this weird behavior where if you set "inline", we
+ // inline the sourcemap, and set 'result.map = null'. This results
+ // in bad behavior from Babel since the maps get put into the code,
+ // which Webpack does not expect, and because the map we return to
+ // Webpack is null, which is also bad. To avoid that, we override the
+ // behavior here so "inline" just behaves like 'true'.
+ programmaticOptions.sourceMaps = true;
+ }
+
+ try {
+ if (sync) {
+ const output = swc.transformSync(source, programmaticOptions);
+ callback(
+ null,
+ output.code,
+ parseMap && output.map ? JSON.parse(output.map) : output.map
+ );
+ } else {
+ swc.transform(source, programmaticOptions).then(
+ (output) => {
+ callback(
+ null,
+ output.code,
+ parseMap && output.map ? JSON.parse(output.map) : output.map
+ );
+ },
+ (err) => {
+ callback(err);
+ }
+ );
+ }
+ } catch (e) {
+ callback(e);
+ }
+}