@serwist/next 8.4.4 → 9.0.0-preview.1

package/src/index.ts

@@ -0,0 +1,241 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import type { NextInjectManifestOptions } from "@serwist/build";
+import { validateNextInjectManifestOptions } from "@serwist/build/next";
+import { InjectManifest } from "@serwist/webpack-plugin";
+import { ChildCompilationPlugin, relativeToOutputPath } from "@serwist/webpack-plugin/internal";
+import { CleanWebpackPlugin } from "clean-webpack-plugin";
+import fg from "fast-glob";
+import type { NextConfig } from "next";
+import type { Compilation, Configuration, default as Webpack } from "webpack";
+
+import type { ExcludeParams, SerwistNextOptions, SerwistNextOptionsKey } from "./internal-types.js";
+import { getContentHash, getFileHash, loadTSConfig, logger } from "./utils/index.js";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+
+const withSerwistInit = (pluginOptions: NextInjectManifestOptions): ((nextConfig?: NextConfig) => NextConfig) => {
+  return (nextConfig = {}) => ({
+    ...nextConfig,
+    webpack(config: Configuration, options) {
+      const webpack: typeof Webpack = options.webpack;
+      const { dev } = options;
+
+      const basePath = options.config.basePath || "/";
+
+      const tsConfigJson = loadTSConfig(options.dir, nextConfig?.typescript?.tsconfigPath);
+
+      const {
+        cacheOnNavigation,
+        disable,
+        scope = basePath,
+        swUrl,
+        register,
+        reloadOnOnline,
+        globPublicPatterns,
+        ...buildOptions
+      } = validateNextInjectManifestOptions(pluginOptions);
+
+      if (typeof nextConfig.webpack === "function") {
+        config = nextConfig.webpack(config, options);
+      }
+
+      if (disable) {
+        options.isServer && logger.info("Serwist is disabled.");
+        return config;
+      }
+
+      if (!config.plugins) {
+        config.plugins = [];
+      }
+
+      logger.event(`Compiling for ${options.isServer ? "server" : "client (static)"}...`);
+
+      const _sw = path.posix.join(basePath, swUrl);
+      const _scope = path.posix.join(scope, "/");
+
+      config.plugins.push(
+        new webpack.DefinePlugin({
+          "self.__SERWIST_SW_ENTRY.sw": `'${_sw}'`,
+          "self.__SERWIST_SW_ENTRY.scope": `'${_scope}'`,
+          "self.__SERWIST_SW_ENTRY.cacheOnNavigation": `${cacheOnNavigation}`,
+          "self.__SERWIST_SW_ENTRY.register": `${register}`,
+          "self.__SERWIST_SW_ENTRY.reloadOnOnline": `${reloadOnOnline}`,
+        } satisfies Record<`${SerwistNextOptionsKey}.${Exclude<keyof SerwistNextOptions, "swEntryWorker">}`, string | undefined>),
+      );
+
+      const swEntryJs = path.join(__dirname, "sw-entry.js");
+      const entry = config.entry as () => Promise<Record<string, string[] | string>>;
+      config.entry = async () => {
+        const entries = await entry();
+        if (entries["main.js"] && !entries["main.js"].includes(swEntryJs)) {
+          if (Array.isArray(entries["main.js"])) {
+            entries["main.js"].unshift(swEntryJs);
+          } else if (typeof entries["main.js"] === "string") {
+            entries["main.js"] = [swEntryJs, entries["main.js"]];
+          }
+        }
+        if (entries["main-app"] && !entries["main-app"].includes(swEntryJs)) {
+          if (Array.isArray(entries["main-app"])) {
+            entries["main-app"].unshift(swEntryJs);
+          } else if (typeof entries["main-app"] === "string") {
+            entries["main-app"] = [swEntryJs, entries["main-app"]];
+          }
+        }
+        return entries;
+      };
+
+      if (!options.isServer) {
+        if (!register) {
+          logger.info(
+            "Service worker won't be automatically registered as per the config, please call the following code in componentDidMount or useEffect:",
+          );
+
+          logger.info("  window.serwist.register()");
+
+          if (!tsConfigJson?.compilerOptions?.types?.includes("@serwist/next/typings")) {
+            logger.info("You may also want to add @serwist/next/typings to compilerOptions.types in your tsconfig.json/jsconfig.json.");
+          }
+        }
+
+        const {
+          swSrc: userSwSrc,
+          swDest: userSwDest,
+          additionalPrecacheEntries,
+          exclude,
+          manifestTransforms = [],
+          ...otherBuildOptions
+        } = buildOptions;
+
+        let swSrc = userSwSrc;
+        let swDest = userSwDest;
+
+        // If these two paths are not absolute, they will be resolved from `compilation.options.output.path`,
+        // which is `${options.dir}/${nextConfig.destDir}` for Next.js apps, rather than `${options.dir}`
+        // as an user would expect.
+        if (!path.isAbsolute(swSrc)) {
+          swSrc = path.join(options.dir, swSrc);
+        }
+        if (!path.isAbsolute(swDest)) {
+          swDest = path.join(options.dir, swDest);
+        }
+
+        const publicDir = path.resolve(options.dir, "public");
+        const destDir = path.dirname(swDest);
+
+        const shouldBuildSWEntryWorker = cacheOnNavigation;
+        let swEntryPublicPath: string | undefined = undefined;
+        let swEntryWorkerDest: string | undefined = undefined;
+
+        if (shouldBuildSWEntryWorker) {
+          const swEntryWorkerSrc = path.join(__dirname, "sw-entry-worker.js");
+          const swEntryName = `swe-worker-${getContentHash(swEntryWorkerSrc, dev)}.js`;
+          swEntryPublicPath = path.posix.join(basePath, swEntryName);
+          swEntryWorkerDest = path.join(destDir, swEntryName);
+          config.plugins.push(
+            new ChildCompilationPlugin({
+              src: swEntryWorkerSrc,
+              dest: swEntryWorkerDest,
+            }),
+          );
+        }
+        config.plugins.push(
+          new webpack.DefinePlugin({
+            "self.__SERWIST_SW_ENTRY.swEntryWorker": swEntryPublicPath && `'${swEntryPublicPath}'`,
+          } satisfies Record<`${SerwistNextOptionsKey}.${Extract<keyof SerwistNextOptions, "swEntryWorker">}`, string | undefined>),
+        );
+
+        logger.info(`Service worker: ${swDest}`);
+        logger.info(`  URL: ${_sw}`);
+        logger.info(`  Scope: ${_scope}`);
+
+        config.plugins.push(
+          new CleanWebpackPlugin({
+            cleanOnceBeforeBuildPatterns: [path.join(destDir, "swe-worker-*.js"), path.join(destDir, "swe-worker-*.js.map"), swDest],
+          }),
+        );
+
+        // Precache files in public folder
+        let resolvedManifestEntries = additionalPrecacheEntries;
+
+        if (!resolvedManifestEntries) {
+          const swDestFileName = path.basename(swDest);
+          const userPublicGlob = typeof globPublicPatterns === "string" ? [globPublicPatterns] : globPublicPatterns ?? ["**/*"];
+          const publicScan = fg.sync(
+            [
+              ...userPublicGlob,
+              // Forcibly include these in case the user outputs these files to `public`.
+              "!swe-worker-*.js",
+              "!swe-worker-*.js.map",
+              `!${swDestFileName.replace(/^\/+/, "")}`,
+              `!${swDestFileName.replace(/^\/+/, "")}.map`,
+            ],
+            {
+              cwd: publicDir,
+            },
+          );
+          resolvedManifestEntries = publicScan.map((f) => ({
+            url: path.posix.join(basePath, f),
+            revision: getFileHash(path.join(publicDir, f)),
+          }));
+        }
+
+        const publicPath = config.output?.publicPath;
+
+        config.plugins.push(
+          new InjectManifest({
+            swSrc,
+            swDest,
+            disablePrecacheManifest: dev,
+            additionalPrecacheEntries: dev ? [] : resolvedManifestEntries,
+            exclude: [
+              ...exclude,
+              ({ asset, compilation }: ExcludeParams) => {
+                // Same as how `@serwist/webpack-plugin` does it. It is always
+                // `relativeToOutputPath(compilation, originalSwDest)`.
+                const swDestRelativeOutput = relativeToOutputPath(compilation, swDest);
+                const swAsset = compilation.getAsset(swDestRelativeOutput);
+                return (
+                  // We don't need the service worker to be cached.
+                  asset.name === swAsset?.name ||
+                  asset.name.startsWith("server/") ||
+                  /^((app-|^)build-manifest\.json|react-loadable-manifest\.json)$/.test(asset.name) ||
+                  (dev && !asset.name.startsWith("static/runtime/"))
+                );
+              },
+            ],
+            manifestTransforms: [
+              ...manifestTransforms,
+              async (manifestEntries, compilation) => {
+                // This path always uses forward slashes, so it is safe to use it in the following string replace.
+                const publicDirRelativeOutput = relativeToOutputPath(compilation as Compilation, publicDir);
+                // `publicPath` is always `${assetPrefix}/_next/` for Next.js apps.
+                const publicFilesPrefix = `${publicPath}${publicDirRelativeOutput}`;
+                const manifest = manifestEntries.map((m) => {
+                  m.url = m.url.replace("/_next//static/image", "/_next/static/image").replace("/_next//static/media", "/_next/static/media");
+                  // We remove `${publicPath}/${publicDirRelativeOutput}` because `assetPrefix`
+                  // is not intended for files that are in the public directory and we also want
+                  // to remove `/_next/${publicDirRelativeOutput}` from the URL, since that is not how
+                  // we resolve files in the public directory.
+                  if (m.url.startsWith(publicFilesPrefix)) {
+                    m.url = path.posix.join(basePath, m.url.replace(publicFilesPrefix, ""));
+                  }
+                  m.url = m.url.replace(/\[/g, "%5B").replace(/\]/g, "%5D");
+                  return m;
+                });
+                return { manifest, warnings: [] };
+              },
+            ],
+            ...otherBuildOptions,
+          }),
+        );
+      }
+
+      return config;
+    },
+  });
+};
+
+export default withSerwistInit;
+export type { NextInjectManifestOptions as PluginOptions };

package/src/index.worker.ts

@@ -0,0 +1,5 @@
+import { defaultCache } from "./worker/defaultCache.js";
+import { type DefinePageRuntimeCachingOptions, type PageRuntimeCaching, definePageRuntimeCaching } from "./worker/definePageRuntimeCaching.js";
+
+export { defaultCache, definePageRuntimeCaching };
+export type { DefinePageRuntimeCachingOptions, PageRuntimeCaching };

package/src/internal-types.ts

@@ -0,0 +1,17 @@
+import type { Asset, Compilation } from "webpack";
+
+export type SerwistNextOptionsKey = "self.__SERWIST_SW_ENTRY";
+
+export interface SerwistNextOptions {
+  sw: string;
+  scope: string;
+  cacheOnNavigation: boolean;
+  register: boolean;
+  reloadOnOnline: boolean;
+  swEntryWorker: string | undefined;
+}
+
+export interface ExcludeParams {
+  asset: Asset;
+  compilation: Compilation;
+}

package/src/sw-entry-worker.ts

@@ -0,0 +1,46 @@
+declare const self: WorkerGlobalScope & typeof globalThis;
+
+export type MessageType =
+  | {
+      type: "__FRONTEND_NAV_CACHE__";
+      url: URL | string;
+    }
+  | {
+      type: "__START_URL_CACHE__";
+      url: URL | string;
+    };
+
+self.onmessage = async (ev: MessageEvent<MessageType>) => {
+  switch (ev.data.type) {
+    case "__START_URL_CACHE__": {
+      const url = ev.data.url;
+      const response = await fetch(url);
+      if (!response.redirected) {
+        const startUrlCache = await caches.open("start-url");
+        return startUrlCache.put(url, response);
+      }
+      return Promise.resolve();
+    }
+    case "__FRONTEND_NAV_CACHE__": {
+      const url = ev.data.url;
+      const pagesCache = await caches.open("pages");
+
+      const isPageCached = !!(await pagesCache.match(url, {
+        ignoreSearch: true,
+      }));
+      if (isPageCached) {
+        return;
+      }
+
+      const page = await fetch(url);
+      if (!page.ok) {
+        return;
+      }
+      pagesCache.put(url, page.clone());
+
+      return Promise.resolve();
+    }
+    default:
+      return Promise.resolve();
+  }
+};

package/src/sw-entry.ts

@@ -0,0 +1,64 @@
+import { Serwist } from "@serwist/window";
+
+import type { SerwistNextOptions } from "./internal-types.js";
+import type { MessageType } from "./sw-entry-worker.js";
+
+declare global {
+  interface Window {
+    serwist: Serwist;
+  }
+}
+declare const self: Window &
+  typeof globalThis & {
+    // Do not dereference this, use its attributes directly or assign them to other variables.
+    // You should do the latter if you use an attribute multiple times.
+    __SERWIST_SW_ENTRY: SerwistNextOptions;
+  };
+
+if (typeof window !== "undefined" && "serviceWorker" in navigator && typeof caches !== "undefined") {
+  let swEntryWorker: Worker | undefined;
+
+  if (self.__SERWIST_SW_ENTRY.swEntryWorker) {
+    swEntryWorker = new Worker(self.__SERWIST_SW_ENTRY.swEntryWorker);
+  }
+
+  window.serwist = new Serwist(window.location.origin + self.__SERWIST_SW_ENTRY.sw, {
+    scope: self.__SERWIST_SW_ENTRY.scope,
+  });
+
+  if (self.__SERWIST_SW_ENTRY.register) {
+    window.serwist.register();
+  }
+
+  if (self.__SERWIST_SW_ENTRY.cacheOnNavigation) {
+    const cacheOnNavigation = async (url?: string | URL | null | undefined) => {
+      if (!window.navigator.onLine || !url) {
+        return;
+      }
+      swEntryWorker?.postMessage({
+        type: "__FRONTEND_NAV_CACHE__",
+        url,
+      } satisfies MessageType);
+    };
+
+    const pushState = history.pushState;
+    history.pushState = (...args) => {
+      pushState.apply(history, args);
+      cacheOnNavigation(args[2]);
+    };
+
+    const replaceState = history.replaceState;
+    history.replaceState = (...args) => {
+      replaceState.apply(history, args);
+      cacheOnNavigation(args[2]);
+    };
+
+    window.addEventListener("online", () => {
+      cacheOnNavigation(window.location.pathname);
+    });
+  }
+
+  if (self.__SERWIST_SW_ENTRY.reloadOnOnline) {
+    window.addEventListener("online", () => location.reload());
+  }
+}

package/src/utils/find-first-truthy.ts

@@ -0,0 +1,15 @@
+/**
+ * Find the first truthy value in an array.
+ * @param arr
+ * @param fn
+ * @returns
+ */
+export const findFirstTruthy = <T, U>(arr: T[], fn: (elm: T) => U) => {
+  for (const i of arr) {
+    const resolved = fn(i);
+    if (resolved) {
+      return resolved;
+    }
+  }
+  return undefined;
+};

package/src/utils/get-content-hash.ts

@@ -0,0 +1,10 @@
+import type fs from "node:fs";
+
+import { getFileHash } from "./get-file-hash.js";
+
+export const getContentHash = (file: fs.PathOrFileDescriptor, isDev: boolean) => {
+  if (isDev) {
+    return "development";
+  }
+  return getFileHash(file).slice(0, 16);
+};

package/src/utils/get-file-hash.ts

@@ -0,0 +1,4 @@
+import crypto from "node:crypto";
+import fs from "node:fs";
+
+export const getFileHash = (file: fs.PathOrFileDescriptor) => crypto.createHash("md5").update(fs.readFileSync(file)).digest("hex");

package/src/utils/get-package-version.ts

@@ -0,0 +1,16 @@
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+
+/**
+ * Get a package's version
+ * @param packageName
+ * @returns
+ */
+export const getPackageVersion = (packageName: string): string | undefined => {
+  try {
+    return require(`${packageName}/package.json`).version;
+  } catch {
+    return undefined;
+  }
+};

package/src/utils/load-tsconfig.ts

@@ -0,0 +1,27 @@
+import fs from "node:fs";
+import path from "node:path";
+
+import type { TsConfigJson as TSConfigJSON } from "type-fest";
+
+import { findFirstTruthy } from "./find-first-truthy.js";
+
+export const loadTSConfig = (baseDir: string, relativeTSConfigPath: string | undefined): TSConfigJSON | undefined => {
+  try {
+    // Find tsconfig.json file
+    const tsConfigPath = findFirstTruthy([relativeTSConfigPath ?? "tsconfig.json", "jsconfig.json"], (filePath) => {
+      const resolvedPath = path.join(baseDir, filePath);
+      return fs.existsSync(resolvedPath) ? resolvedPath : undefined;
+    });
+
+    if (!tsConfigPath) {
+      return undefined;
+    }
+
+    // Read tsconfig.json file
+    const tsConfigFile = JSON.parse(fs.readFileSync(tsConfigPath, "utf-8"));
+
+    return tsConfigFile;
+  } catch {
+    return undefined;
+  }
+};

package/src/utils/logger.ts

@@ -0,0 +1,57 @@
+import chalk from "chalk";
+
+const LOGGING_METHOD = ["wait", "error", "warn", "info", "event"] as const;
+
+type LoggingMethods = (typeof LOGGING_METHOD)[number];
+
+const mapLoggingMethodToConsole: Record<LoggingMethods, "log" | "error" | "warn" | "log"> = {
+  wait: "log",
+  error: "error",
+  warn: "warn",
+  info: "log",
+  event: "log",
+};
+
+const prefixes = {
+  wait: `${chalk.white(chalk.bold("○"))} (serwist)`,
+  error: `${chalk.red(chalk.bold("X"))} (serwist)`,
+  warn: `${chalk.yellow(chalk.bold("⚠"))} (serwist)`,
+  info: `${chalk.white(chalk.bold("○"))} (serwist)`,
+  event: `${chalk.green(chalk.bold("✓"))} (serwist)`,
+};
+
+const prefixedLog = (prefixType: LoggingMethods, ...message: any[]) => {
+  const consoleMethod = mapLoggingMethodToConsole[prefixType];
+  const prefix = prefixes[prefixType];
+
+  if ((message[0] === "" || message[0] === undefined) && message.length === 1) {
+    message.shift();
+  }
+
+  // If there's no message, don't print the prefix but a new line
+  if (message.length === 0) {
+    console[consoleMethod]("");
+  } else {
+    console[consoleMethod](` ${prefix}`, ...message);
+  }
+};
+
+export const wait = (...message: any[]) => {
+  prefixedLog("wait", ...message);
+};
+
+export const error = (...message: any[]) => {
+  prefixedLog("error", ...message);
+};
+
+export const warn = (...message: any[]) => {
+  prefixedLog("warn", ...message);
+};
+
+export const info = (...message: any[]) => {
+  prefixedLog("info", ...message);
+};
+
+export const event = (...message: any[]) => {
+  prefixedLog("event", ...message);
+};

package/src/utils.ts

@@ -0,0 +1,11 @@
+import crypto from "node:crypto";
+import fs from "node:fs";
+
+export const getFileHash = (file: fs.PathOrFileDescriptor) => crypto.createHash("md5").update(fs.readFileSync(file)).digest("hex");
+
+export const getContentHash = (file: fs.PathOrFileDescriptor, isDev: boolean) => {
+  if (isDev) {
+    return "development";
+  }
+  return getFileHash(file).slice(0, 16);
+};