@serwist/webpack-plugin 8.4.4 → 9.0.0-preview.1

package/dist/lib/get-sourcemap-asset-name.d.ts

@@ -16,4 +16,5 @@ import type { Compilation } from "webpack";
  * name of that asset. Otherwise, it will return undefined.
  * @private
  */
-export declare function getSourcemapAssetName(compilation: Compilation, swContents: string, swDest: string): string | undefined;
+export declare const getSourcemapAssetName: (compilation: Compilation, swContents: string, swDest: string) => string | undefined;
+//# sourceMappingURL=get-sourcemap-asset-name.d.ts.map

package/dist/lib/get-sourcemap-asset-name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-sourcemap-asset-name.d.ts","sourceRoot":"","sources":["../../src/lib/get-sourcemap-asset-name.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,qBAAqB,gBAAiB,WAAW,cAAc,MAAM,UAAU,MAAM,KAAG,MAAM,GAAG,SAiB7G,CAAC"}

package/dist/lib/relative-to-output-path.d.ts

@@ -1,11 +1,12 @@
 import type { Compilation } from "webpack";
 /**
  * @param compilation The webpack compilation.
- * @param swDest The original swDest value.
+ * @param path The original path value.
  *
- * @returns If swDest was not absolute, the returns swDest as-is.
- * Otherwise, returns swDest relative to the compilation's output path.
+ * @returns If path was not absolute, the returns path as-is.
+ * Otherwise, returns path relative to the compilation's output path.
  *
  * @private
  */
-export declare function relativeToOutputPath(compilation: Compilation, swDest: string): string;
+export declare const relativeToOutputPath: (compilation: Compilation, path: string) => string;
+//# sourceMappingURL=relative-to-output-path.d.ts.map

package/dist/lib/relative-to-output-path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-to-output-path.d.ts","sourceRoot":"","sources":["../../src/lib/relative-to-output-path.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,gBAAiB,WAAW,QAAQ,MAAM,KAAG,MAQ7E,CAAC"}

package/dist/lib/resolve-webpack-url.d.ts

@@ -9,4 +9,5 @@
  * @returns Joined file path
  * @private
  */
-export declare function resolveWebpackURL(publicPath: string, ...paths: Array<string>): string;
+export declare const resolveWebpackURL: (publicPath: string, ...paths: string[]) => string;
+//# sourceMappingURL=resolve-webpack-url.d.ts.map

package/dist/lib/resolve-webpack-url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-webpack-url.d.ts","sourceRoot":"","sources":["../../src/lib/resolve-webpack-url.ts"],"names":[],"mappings":"AAQA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,eAAgB,MAAM,YAAY,MAAM,EAAE,KAAG,MAO1E,CAAC"}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@serwist/webpack-plugin",
-  "version": "8.4.4",
+  "version": "9.0.0-preview.1",
   "type": "module",
   "description": "A plugin for your Webpack build process, helping you generate a manifest of local files that should be precached.",
   "files": [
-    "dist",
-    "!dist/**/dts"
+    "src",
+    "dist"
   ],
   "keywords": [
     "serwist",
@@ -18,15 +18,14 @@
     "file manifest"
   ],
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "author": "Google's Web DevRel Team, Serwist's Team",
   "license": "MIT",
   "repository": "serwist/serwist",
   "bugs": "https://github.com/serwist/serwist/issues",
   "homepage": "https://serwist.pages.dev",
-  "module": "./dist/index.js",
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
@@ -37,41 +36,37 @@
   },
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./internal": {
-      "import": {
-        "types": "./dist/index.internal.d.ts",
-        "default": "./dist/index.internal.js"
-      },
-      "require": {
-        "types": "./dist/index.internal.d.cts",
-        "default": "./dist/index.internal.cjs"
-      }
+      "types": "./dist/index.internal.d.ts",
+      "default": "./dist/index.internal.js"
     },
     "./package.json": "./package.json"
   },
   "dependencies": {
     "fast-json-stable-stringify": "2.1.0",
+    "pretty-bytes": "6.1.1",
     "upath": "2.0.1",
-    "@serwist/build": "8.4.4"
+    "@serwist/build": "9.0.0-preview.1"
+  },
+  "devDependencies": {
+    "@types/node": "20.11.16",
+    "@types/webpack": "5.28.5",
+    "rollup": "4.9.6",
+    "typescript": "5.4.0-dev.20240203",
+    "webpack": "5.90.1",
+    "@serwist/constants": "9.0.0-preview.1"
   },
   "peerDependencies": {
+    "typescript": ">=5.0.0",
     "webpack": "4.4.0 || ^5.9.0"
   },
-  "devDependencies": {
-    "@types/node": "20.10.5",
-    "@types/webpack": "5.28.5",
-    "pretty-bytes": "6.1.1",
-    "rollup": "4.9.1",
-    "@serwist/constants": "8.4.4"
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
   },
   "scripts": {
     "build": "rimraf dist && cross-env NODE_ENV=production rollup --config rollup.config.js",

package/src/index.internal.ts

@@ -0,0 +1,4 @@
+import { ChildCompilationPlugin } from "./lib/child-compilation-plugin.js";
+import { relativeToOutputPath } from "./lib/relative-to-output-path.js";
+
+export { ChildCompilationPlugin, relativeToOutputPath };

package/src/index.ts

@@ -0,0 +1,11 @@
+/*
+  Copyright 2018 Google LLC
+
+  Use of this source code is governed by an MIT-style
+  license that can be found in the LICENSE file or at
+  https://opensource.org/licenses/MIT.
+*/
+
+import { InjectManifest } from "./inject-manifest.js";
+
+export { InjectManifest };

package/src/inject-manifest.ts

@@ -0,0 +1,287 @@
+/*
+  Copyright 2018 Google LLC
+
+  Use of this source code is governed by an MIT-style
+  license that can be found in the LICENSE file or at
+  https://opensource.org/licenses/MIT.
+*/
+import type { WebpackInjectManifestOptions } from "@serwist/build";
+import { escapeRegExp, replaceAndUpdateSourceMap, validateWebpackInjectManifestOptions } from "@serwist/build";
+import stringify from "fast-json-stable-stringify";
+import prettyBytes from "pretty-bytes";
+import upath from "upath";
+import type { Compilation } from "webpack";
+import webpack from "webpack";
+
+import { getManifestEntriesFromCompilation } from "./lib/get-manifest-entries-from-compilation.js";
+import { getSourcemapAssetName } from "./lib/get-sourcemap-asset-name.js";
+import { relativeToOutputPath } from "./lib/relative-to-output-path.js";
+
+// Used to keep track of swDest files written by *any* instance of this plugin.
+// See https://github.com/GoogleChrome/workbox/issues/2181
+const _generatedAssetNames = new Set<string>();
+
+/**
+ * This class supports compiling a service worker file provided via `swSrc`,
+ * and injecting into that service worker a list of URLs and revision
+ * information for precaching based on the webpack asset pipeline.
+ *
+ * Use an instance of `InjectManifest` in the
+ * [`plugins` array](https://webpack.js.org/concepts/plugins/#usage) of a
+ * webpack config.
+ *
+ * In addition to injecting the manifest, this plugin will perform a compilation
+ * of the `swSrc` file, using the options from the main webpack configuration.
+ *
+ * ```
+ * // The following lists some common options; see the rest of the documentation
+ * // for the full set of options and defaults.
+ * new InjectManifest({
+ *   exclude: [/.../, '...'],
+ *   maximumFileSizeToCacheInBytes: ...,
+ *   swSrc: '...',
+ * });
+ * ```
+ */
+export class InjectManifest {
+  protected config: WebpackInjectManifestOptions;
+  private alreadyCalled: boolean;
+
+  /**
+   * Creates an instance of InjectManifest.
+   */
+  constructor(config: WebpackInjectManifestOptions) {
+    this.config = config;
+    this.alreadyCalled = false;
+  }
+
+  /**
+   * @param compiler default compiler object passed from webpack
+   *
+   * @private
+   */
+  propagateWebpackConfig(compiler: webpack.Compiler): void {
+    const parsedSwSrc = upath.parse(this.config.swSrc);
+    // Because this.config is listed last, properties that are already set
+    // there take precedence over derived properties from the compiler.
+    this.config = Object.assign(
+      {
+        mode: compiler.options.mode,
+        // Use swSrc with a hardcoded .js extension, in case swSrc is a .ts file.
+        swDest: `${parsedSwSrc.name}.js`,
+      },
+      this.config,
+    );
+  }
+
+  /**
+   * `getManifestEntriesFromCompilation` with a few additional checks.
+   *
+   * @private
+   */
+  async getManifestEntries(compilation: webpack.Compilation, config: WebpackInjectManifestOptions) {
+    if (config.disablePrecacheManifest) {
+      return {
+        size: 0,
+        sortedEntries: undefined,
+        manifestString: "undefined",
+      };
+    }
+
+    // See https://github.com/GoogleChrome/workbox/issues/1790
+    if (this.alreadyCalled) {
+      const warningMessage = `${this.constructor.name} has been called multiple times, perhaps due to running webpack in --watch mode. The precache manifest generated after the first call may be inaccurate! Please see https://github.com/GoogleChrome/workbox/issues/1790 for more information.`;
+
+      if (!compilation.warnings.some((warning) => warning instanceof Error && warning.message === warningMessage)) {
+        compilation.warnings.push(new Error(warningMessage) as webpack.WebpackError);
+      }
+    } else {
+      this.alreadyCalled = true;
+    }
+
+    // Ensure that we don't precache any of the assets generated by *any*
+    // instance of this plugin.
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    config.exclude!.push(({ asset }) => _generatedAssetNames.has(asset.name));
+
+    const { size, sortedEntries } = await getManifestEntriesFromCompilation(compilation, config);
+
+    let manifestString = stringify(sortedEntries);
+    if (
+      this.config.compileSrc &&
+      // See https://github.com/GoogleChrome/workbox/issues/2729
+      !(compilation.options?.devtool === "eval-cheap-source-map" && compilation.options.optimization?.minimize)
+    ) {
+      // See https://github.com/GoogleChrome/workbox/issues/2263
+      manifestString = manifestString.replace(/"/g, `'`);
+    }
+
+    return { size, sortedEntries, manifestString };
+  }
+
+  /**
+   * @param compiler default compiler object passed from webpack
+   *
+   * @private
+   */
+  apply(compiler: webpack.Compiler): void {
+    this.propagateWebpackConfig(compiler);
+
+    compiler.hooks.make.tapPromise(this.constructor.name, (compilation) =>
+      this.handleMake(compilation, compiler).catch((error: webpack.WebpackError) => {
+        compilation.errors.push(error);
+      }),
+    );
+
+    const { PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER } = webpack.Compilation;
+    // Specifically hook into thisCompilation, as per
+    // https://github.com/webpack/webpack/issues/11425#issuecomment-690547848
+    compiler.hooks.thisCompilation.tap(this.constructor.name, (compilation) => {
+      compilation.hooks.processAssets.tapPromise(
+        {
+          name: this.constructor.name,
+          // TODO(jeffposnick): This may need to change eventually.
+          // See https://github.com/webpack/webpack/issues/11822#issuecomment-726184972
+          stage: PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER - 10,
+        },
+        () =>
+          this.addAssets(compilation).catch((error: webpack.WebpackError) => {
+            compilation.errors.push(error);
+          }),
+      );
+    });
+  }
+
+  /**
+   * @param compilation The webpack compilation.
+   * @param parentCompiler The webpack parent compiler.
+   *
+   * @private
+   */
+  async performChildCompilation(compilation: webpack.Compilation, parentCompiler: webpack.Compiler): Promise<void> {
+    const outputOptions: Parameters<Compilation["createChildCompiler"]>["1"] = {
+      filename: this.config.swDest,
+    };
+
+    const childCompiler = compilation.createChildCompiler(this.constructor.name, outputOptions, []);
+
+    childCompiler.context = parentCompiler.context;
+    childCompiler.inputFileSystem = parentCompiler.inputFileSystem;
+    childCompiler.outputFileSystem = parentCompiler.outputFileSystem;
+
+    if (Array.isArray(this.config.webpackCompilationPlugins)) {
+      for (const plugin of this.config.webpackCompilationPlugins) {
+        plugin.apply(childCompiler);
+      }
+    }
+
+    new webpack.EntryPlugin(parentCompiler.context, this.config.swSrc, this.constructor.name).apply(childCompiler);
+
+    await new Promise<void>((resolve, reject) => {
+      childCompiler.runAsChild((error, _entries, childCompilation) => {
+        if (error) {
+          reject(error);
+        } else {
+          compilation.warnings = compilation.warnings.concat(childCompilation?.warnings ?? []);
+          compilation.errors = compilation.errors.concat(childCompilation?.errors ?? []);
+
+          resolve();
+        }
+      });
+    });
+  }
+
+  /**
+   * @param compilation The webpack compilation.
+   * @param parentCompiler The webpack parent compiler.
+   *
+   * @private
+   */
+  addSrcToAssets(compilation: webpack.Compilation, parentCompiler: webpack.Compiler): void {
+    // eslint-disable-next-line
+    const source = (parentCompiler.inputFileSystem as any).readFileSync(this.config.swSrc);
+    compilation.emitAsset(this.config.swDest!, new webpack.sources.RawSource(source));
+  }
+
+  /**
+   * @param compilation The webpack compilation.
+   * @param parentCompiler The webpack parent compiler.
+   *
+   * @private
+   */
+  async handleMake(compilation: webpack.Compilation, parentCompiler: webpack.Compiler): Promise<void> {
+    this.config = await validateWebpackInjectManifestOptions(this.config);
+    this.config.swDest = relativeToOutputPath(compilation, this.config.swDest!);
+    _generatedAssetNames.add(this.config.swDest);
+
+    if (this.config.compileSrc) {
+      await this.performChildCompilation(compilation, parentCompiler);
+    } else {
+      this.addSrcToAssets(compilation, parentCompiler);
+      // This used to be a fatal error, but just warn at runtime because we
+      // can't validate it easily.
+      if (Array.isArray(this.config.webpackCompilationPlugins) && this.config.webpackCompilationPlugins.length > 0) {
+        compilation.warnings.push(
+          new Error("compileSrc is false, so the " + "webpackCompilationPlugins option will be ignored.") as webpack.WebpackError,
+        );
+      }
+    }
+  }
+
+  /**
+   * @param compilation The webpack compilation.
+   *
+   * @private
+   */
+  async addAssets(compilation: webpack.Compilation): Promise<void> {
+    const config = Object.assign({}, this.config);
+
+    const { size, sortedEntries, manifestString } = await this.getManifestEntries(compilation, config);
+
+    // See https://webpack.js.org/contribute/plugin-patterns/#monitoring-the-watch-graph
+    const absoluteSwSrc = upath.resolve(config.swSrc);
+    compilation.fileDependencies.add(absoluteSwSrc);
+
+    const swAsset = compilation.getAsset(config.swDest!);
+    const swAssetString = swAsset!.source.source().toString();
+
+    const globalRegexp = new RegExp(escapeRegExp(config.injectionPoint!), "g");
+    const injectionResults = swAssetString.match(globalRegexp);
+
+    if (!injectionResults) {
+      throw new Error(`Can't find ${config.injectionPoint} in your SW source.`);
+    }
+    if (injectionResults.length !== 1) {
+      throw new Error(
+        `Multiple instances of ${config.injectionPoint} were found in your SW source. Include it only once. For more info, see https://github.com/GoogleChrome/workbox/issues/2681`,
+      );
+    }
+
+    const sourcemapAssetName = getSourcemapAssetName(compilation, swAssetString, config.swDest!);
+
+    if (sourcemapAssetName) {
+      _generatedAssetNames.add(sourcemapAssetName);
+      const sourcemapAsset = compilation.getAsset(sourcemapAssetName);
+      const { source, map } = await replaceAndUpdateSourceMap({
+        jsFilename: config.swDest!,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        originalMap: JSON.parse(sourcemapAsset!.source.source().toString()),
+        originalSource: swAssetString,
+        replaceString: manifestString,
+        searchString: config.injectionPoint!,
+      });
+
+      compilation.updateAsset(sourcemapAssetName, new webpack.sources.RawSource(map));
+      compilation.updateAsset(config.swDest!, new webpack.sources.RawSource(source));
+    } else {
+      // If there's no sourcemap associated with swDest, a simple string
+      // replacement will suffice.
+      compilation.updateAsset(config.swDest!, new webpack.sources.RawSource(swAssetString.replace(config.injectionPoint!, manifestString)));
+    }
+
+    if (compilation.getLogger) {
+      const logger = compilation.getLogger(this.constructor.name);
+      logger.info(`The service worker at ${config.swDest ?? ""} will precache ${sortedEntries?.length ?? 0} URLs, totaling ${prettyBytes(size)}.`);
+    }
+  }
+}

package/src/lib/child-compilation-plugin.ts

@@ -0,0 +1,66 @@
+import type { Compilation, WebpackPluginInstance } from "webpack";
+import webpack from "webpack";
+
+import { relativeToOutputPath } from "./relative-to-output-path.js";
+
+export interface ChildCompilationPluginOptions {
+  src: string;
+  dest: string;
+  plugins?: WebpackPluginInstance[];
+}
+
+/**
+ * Compile a file by creating a child of the hooked compiler.
+ *
+ * @private
+ */
+export class ChildCompilationPlugin implements WebpackPluginInstance {
+  src: string;
+  dest: string;
+  plugins: WebpackPluginInstance[] | undefined;
+  constructor({ src, dest, plugins }: ChildCompilationPluginOptions) {
+    this.src = src;
+    this.dest = dest;
+    this.plugins = plugins;
+  }
+  apply(compiler: webpack.Compiler) {
+    compiler.hooks.make.tapPromise(this.constructor.name, (compilation) =>
+      this.performChildCompilation(compilation, compiler).catch((error: webpack.WebpackError) => {
+        compilation.errors.push(error);
+      }),
+    );
+  }
+  async performChildCompilation(compilation: webpack.Compilation, parentCompiler: webpack.Compiler): Promise<void> {
+    const resolvedDest = relativeToOutputPath(compilation, this.dest);
+    const outputOptions: Parameters<Compilation["createChildCompiler"]>["1"] = {
+      filename: resolvedDest,
+    };
+
+    const childCompiler = compilation.createChildCompiler(this.constructor.name, outputOptions, []);
+
+    childCompiler.context = parentCompiler.context;
+    childCompiler.inputFileSystem = parentCompiler.inputFileSystem;
+    childCompiler.outputFileSystem = parentCompiler.outputFileSystem;
+
+    if (this.plugins !== undefined) {
+      for (const plugin of this.plugins) {
+        plugin?.apply(childCompiler);
+      }
+    }
+
+    new webpack.EntryPlugin(parentCompiler.context, this.src, this.constructor.name).apply(childCompiler);
+
+    await new Promise<void>((resolve, reject) => {
+      childCompiler.runAsChild((error, _entries, childCompilation) => {
+        if (error) {
+          reject(error);
+        } else {
+          compilation.warnings = compilation.warnings.concat(childCompilation?.warnings ?? []);
+          compilation.errors = compilation.errors.concat(childCompilation?.errors ?? []);
+
+          resolve();
+        }
+      });
+    });
+  }
+}

package/src/lib/get-asset-hash.ts

@@ -0,0 +1,27 @@
+/*
+  Copyright 2018 Google LLC
+
+  Use of this source code is governed by an MIT-style
+  license that can be found in the LICENSE file or at
+  https://opensource.org/licenses/MIT.
+*/
+
+import crypto from "crypto";
+import type { Asset } from "webpack";
+
+/**
+ * @param asset
+ * @returns The MD5 hash of the asset's source.
+ *
+ * @private
+ */
+export const getAssetHash = (asset: Asset): string | null => {
+  // If webpack has the asset marked as immutable, then we don't need to
+  // use an out-of-band revision for it.
+  // See https://github.com/webpack/webpack/issues/9038
+  if (asset.info?.immutable) {
+    return null;
+  }
+
+  return crypto.createHash("md5").update(Buffer.from(asset.source.source())).digest("hex");
+};