@serwist/turbopack 9.3.0

package/src/index.ts

@@ -0,0 +1,152 @@
+// Workaround for Next.js + Turbopack, while plugins are still
+// not supported. This relies on Next.js Route Handlers and file
+// name determinism.
+import path from "node:path";
+import { type BuildResult, getFileManifestEntries, rebasePath } from "@serwist/build";
+import { SerwistConfigError, validationErrorMap } from "@serwist/build/schema";
+import { cyan, dim, yellow } from "kolorist";
+import { NextResponse } from "next/server.js";
+import { z } from "zod";
+import { injectManifestOptions } from "./index.schema.js";
+import { logger } from "./lib/index.js";
+import type { InjectManifestOptions, InjectManifestOptionsComplete } from "./types.js";
+
+// TODO(workarond): `esbuild` doesn't load when in Turbopack production
+const esbuild = import("esbuild-wasm");
+
+const logSerwistResult = (filePath: string, buildResult: Pick<BuildResult, "count" | "size" | "warnings">) => {
+  const { count, size, warnings } = buildResult;
+  const hasWarnings = warnings && warnings.length > 0;
+  // The route is reinitiated for each `path` param, so we only log results
+  // if we're prerendering for sw.js.
+  if (filePath === "sw.js" && (hasWarnings || count > 0)) {
+    logger[hasWarnings ? "warn" : "event"](
+      `${cyan(count)} precache entries ${dim(`(${(size / 1024).toFixed(2)} KiB)`)}${
+        hasWarnings ? `\n${yellow(["⚠ warnings", ...warnings.map((w) => `  ${w}`), ""].join("\n"))}` : ""
+      }`,
+    );
+  }
+};
+
+const validateGetManifestOptions = async (input: unknown): Promise<InjectManifestOptionsComplete> => {
+  const result = await injectManifestOptions.spa(input, {
+    error: validationErrorMap,
+  });
+  if (!result.success) {
+    throw new SerwistConfigError({
+      moduleName: "@serwist/turbopack",
+      message: z.prettifyError(result.error),
+    });
+  }
+  return result.data;
+};
+
+const isDev = process.env.NODE_ENV === "development";
+
+const contentTypeMap: Record<string, string> = {
+  ".js": "application/javascript",
+  ".map": "application/json; charset=UTF-8",
+};
+
+/**
+ * Creates a Route Handler for Serwist files.
+ * @param options Options for {@linkcode getFileManifestEntries}.
+ */
+export const createSerwistRoute = (options: InjectManifestOptions) => {
+  const dynamic = "force-static" as const,
+    dynamicParams = false as const,
+    revalidate = false as const;
+  const validation = validateGetManifestOptions(options).then((config) => {
+    return {
+      ...config,
+      disablePrecacheManifest: isDev,
+      additionalPrecacheEntries: isDev ? [] : config.additionalPrecacheEntries,
+      globIgnores: [
+        ...config.globIgnores,
+        // Make sure we leave swSrc out of the precache manifest.
+        rebasePath({
+          file: config.swSrc,
+          baseDirectory: config.globDirectory,
+        }),
+      ],
+      manifestTransforms: [
+        ...(config.manifestTransforms ?? []),
+        (manifestEntries) => {
+          const manifest = manifestEntries.map((m) => {
+            // Replace all references to "$(distDir)" with "$(assetPrefix)/_next/".
+            if (m.url.startsWith(config.nextConfig.distDir)) {
+              m.url = `${config.nextConfig.assetPrefix ?? ""}/_next/${m.url.slice(config.nextConfig.distDir.length)}`;
+            }
+            // Replace all references to public/ with "$(basePath)/".
+            if (m.url.startsWith("public/")) {
+              m.url = path.posix.join(config.nextConfig.basePath, m.url.slice(7));
+            }
+            return m;
+          });
+          return { manifest, warnings: [] };
+        },
+      ],
+    };
+  });
+  let map: Map<string, string> | null = null;
+  // NOTE: ALL FILES MUST HAVE DETERMINISTIC NAMES. THIS IS BECAUSE
+  // THE FOLLOWING MAP IS LOADED SEPARATELY FOR `generateStaticParams`
+  // AND EVERY `GET` REQUEST TO EACH OF THE FILES.
+  const loadMap = async (filePath: string) => {
+    const config = await validation;
+    const { count, size, manifestEntries, warnings } = await getFileManifestEntries(config);
+    // See https://github.com/GoogleChrome/workbox/issues/2230
+    const injectionPoint = config.injectionPoint || "";
+    const manifestString = manifestEntries === undefined ? "undefined" : JSON.stringify(manifestEntries, null, 2);
+    logSerwistResult(filePath, { count, size, warnings });
+    const result = await (await esbuild).build({
+      sourcemap: true,
+      format: "esm",
+      target: ["chrome64", "edge79", "firefox67", "opera51", "safari12"],
+      treeShaking: true,
+      minify: !isDev,
+      bundle: true,
+      ...config.esbuildOptions,
+      platform: "browser",
+      define: {
+        ...config.esbuildOptions.define,
+        ...(injectionPoint ? { [injectionPoint]: manifestString } : {}),
+      },
+      outdir: config.cwd,
+      write: false,
+      entryNames: "[name]",
+      // Asset and chunk names must be at the top, as our path is `/serwist/[path]`,
+      // not `/serwist/[...path]`, meaning that we can't resolve paths deeper
+      // than one level.
+      assetNames: "[name]-[hash]",
+      chunkNames: "[name]-[hash]",
+      entryPoints: [{ in: config.swSrc, out: "sw" }],
+    });
+    if (result.errors.length) {
+      console.error("Failed to build the service worker.", result.errors);
+      throw new Error();
+    }
+    if (result.warnings.length) {
+      console.warn(result.warnings);
+    }
+    return new Map(result.outputFiles.map((e) => [e.path, e.text]));
+  };
+  const generateStaticParams = async () => {
+    const config = await validation;
+    if (!map) map = await loadMap("root");
+    return [...map.keys().map((e) => ({ path: path.relative(config.cwd, e) }))];
+  };
+  const GET = async (_: Request, { params }: { params: Promise<{ path: string }> }) => {
+    // TODO: obviously, files get stale in development when we pull this off.
+    const { path: filePath } = await params;
+    const config = await validation;
+    if (!map) map = await loadMap(filePath);
+    return new NextResponse(map.get(path.join(config.cwd, filePath)), {
+      headers: {
+        "Content-Type": contentTypeMap[path.extname(filePath)] || "text/plain",
+        "Service-Worker-Allowed": "/",
+      },
+    });
+  };
+  return { dynamic, dynamicParams, revalidate, generateStaticParams, GET };
+};

package/src/index.worker.ts

@@ -0,0 +1,274 @@
+import type { RuntimeCaching } from "serwist";
+import { CacheFirst, ExpirationPlugin, NetworkFirst, NetworkOnly, RangeRequestsPlugin, StaleWhileRevalidate } from "serwist";
+
+export const PAGES_CACHE_NAME = {
+  rscPrefetch: "pages-rsc-prefetch",
+  rsc: "pages-rsc",
+  html: "pages",
+} as const;
+
+/**
+ * The default, recommended list of caching strategies for applications
+ * built with Next.js.
+ *
+ * @see https://serwist.pages.dev/docs/next/worker-exports#default-cache
+ */
+export const defaultCache: RuntimeCaching[] =
+  process.env.NODE_ENV !== "production"
+    ? [
+        {
+          matcher: /.*/i,
+          handler: new NetworkOnly(),
+        },
+      ]
+    : [
+        {
+          matcher: /^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,
+          handler: new CacheFirst({
+            cacheName: "google-fonts-webfonts",
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 4,
+                maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
+                maxAgeFrom: "last-used",
+              }),
+            ],
+          }),
+        },
+        {
+          matcher: /^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,
+          handler: new StaleWhileRevalidate({
+            cacheName: "google-fonts-stylesheets",
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 4,
+                maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
+                maxAgeFrom: "last-used",
+              }),
+            ],
+          }),
+        },
+        {
+          matcher: /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
+          handler: new StaleWhileRevalidate({
+            cacheName: "static-font-assets",
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 4,
+                maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
+                maxAgeFrom: "last-used",
+              }),
+            ],
+          }),
+        },
+        {
+          matcher: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
+          handler: new StaleWhileRevalidate({
+            cacheName: "static-image-assets",
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 64,
+                maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
+                maxAgeFrom: "last-used",
+              }),
+            ],
+          }),
+        },
+        {
+          matcher: /\/_next\/static.+\.js$/i,
+          handler: new CacheFirst({
+            cacheName: "next-static-js-assets",
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 64,
+                maxAgeSeconds: 24 * 60 * 60, // 24 hours
+                maxAgeFrom: "last-used",
+              }),
+            ],
+          }),
+        },
+        {
+          matcher: /\/_next\/image\?url=.+$/i,
+          handler: new StaleWhileRevalidate({
+            cacheName: "next-image",
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 64,
+                maxAgeSeconds: 24 * 60 * 60, // 24 hours
+                maxAgeFrom: "last-used",
+              }),
+            ],
+          }),
+        },
+        {
+          matcher: /\.(?:mp3|wav|ogg)$/i,
+          handler: new CacheFirst({
+            cacheName: "static-audio-assets",
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 32,
+                maxAgeSeconds: 24 * 60 * 60, // 24 hours
+                maxAgeFrom: "last-used",
+              }),
+              new RangeRequestsPlugin(),
+            ],
+          }),
+        },
+        {
+          matcher: /\.(?:mp4|webm)$/i,
+          handler: new CacheFirst({
+            cacheName: "static-video-assets",
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 32,
+                maxAgeSeconds: 24 * 60 * 60, // 24 hours
+                maxAgeFrom: "last-used",
+              }),
+              new RangeRequestsPlugin(),
+            ],
+          }),
+        },
+        {
+          matcher: /\.(?:js)$/i,
+          handler: new StaleWhileRevalidate({
+            cacheName: "static-js-assets",
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 48,
+                maxAgeSeconds: 24 * 60 * 60, // 24 hours
+                maxAgeFrom: "last-used",
+              }),
+            ],
+          }),
+        },
+        {
+          matcher: /\.(?:css|less)$/i,
+          handler: new StaleWhileRevalidate({
+            cacheName: "static-style-assets",
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 32,
+                maxAgeSeconds: 24 * 60 * 60, // 24 hours
+                maxAgeFrom: "last-used",
+              }),
+            ],
+          }),
+        },
+        {
+          matcher: /\/_next\/data\/.+\/.+\.json$/i,
+          handler: new NetworkFirst({
+            cacheName: "next-data",
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 32,
+                maxAgeSeconds: 24 * 60 * 60, // 24 hours
+                maxAgeFrom: "last-used",
+              }),
+            ],
+          }),
+        },
+        {
+          matcher: /\.(?:json|xml|csv)$/i,
+          handler: new NetworkFirst({
+            cacheName: "static-data-assets",
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 32,
+                maxAgeSeconds: 24 * 60 * 60, // 24 hours
+                maxAgeFrom: "last-used",
+              }),
+            ],
+          }),
+        },
+        {
+          // Exclude /api/auth/* to fix auth callback
+          // https://github.com/serwist/serwist/discussions/28
+          matcher: /\/api\/auth\/.*/,
+          handler: new NetworkOnly({
+            networkTimeoutSeconds: 10, // fallback to cache if API does not response within 10 seconds
+          }),
+        },
+        {
+          matcher: ({ sameOrigin, url: { pathname } }) => sameOrigin && pathname.startsWith("/api/"),
+          method: "GET",
+          handler: new NetworkFirst({
+            cacheName: "apis",
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 16,
+                maxAgeSeconds: 24 * 60 * 60, // 24 hours
+                maxAgeFrom: "last-used",
+              }),
+            ],
+            networkTimeoutSeconds: 10, // fallback to cache if API does not response within 10 seconds
+          }),
+        },
+        {
+          matcher: ({ request, url: { pathname }, sameOrigin }) =>
+            request.headers.get("RSC") === "1" && request.headers.get("Next-Router-Prefetch") === "1" && sameOrigin && !pathname.startsWith("/api/"),
+          handler: new NetworkFirst({
+            cacheName: PAGES_CACHE_NAME.rscPrefetch,
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 32,
+                maxAgeSeconds: 24 * 60 * 60, // 24 hours
+              }),
+            ],
+          }),
+        },
+        {
+          matcher: ({ request, url: { pathname }, sameOrigin }) => request.headers.get("RSC") === "1" && sameOrigin && !pathname.startsWith("/api/"),
+          handler: new NetworkFirst({
+            cacheName: PAGES_CACHE_NAME.rsc,
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 32,
+                maxAgeSeconds: 24 * 60 * 60, // 24 hours
+              }),
+            ],
+          }),
+        },
+        {
+          matcher: ({ request, url: { pathname }, sameOrigin }) =>
+            request.headers.get("Content-Type")?.includes("text/html") && sameOrigin && !pathname.startsWith("/api/"),
+          handler: new NetworkFirst({
+            cacheName: PAGES_CACHE_NAME.html,
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 32,
+                maxAgeSeconds: 24 * 60 * 60, // 24 hours
+              }),
+            ],
+          }),
+        },
+        {
+          matcher: ({ url: { pathname }, sameOrigin }) => sameOrigin && !pathname.startsWith("/api/"),
+          handler: new NetworkFirst({
+            cacheName: "others",
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 32,
+                maxAgeSeconds: 24 * 60 * 60, // 24 hours
+              }),
+            ],
+          }),
+        },
+        {
+          matcher: ({ sameOrigin }) => !sameOrigin,
+          handler: new NetworkFirst({
+            cacheName: "cross-origin",
+            plugins: [
+              new ExpirationPlugin({
+                maxEntries: 32,
+                maxAgeSeconds: 60 * 60, // 1 hour
+              }),
+            ],
+            networkTimeoutSeconds: 10,
+          }),
+        },
+        {
+          matcher: /.*/i,
+          method: "GET",
+          handler: new NetworkOnly(),
+        },
+      ];

package/src/lib/constants.ts

@@ -0,0 +1,61 @@
+import type { BuildOptions } from "esbuild-wasm";
+
+export const SUPPORTED_ESBUILD_OPTIONS = [
+  // CommonOptions
+  "sourcemap",
+  "legalComments",
+  "sourceRoot",
+  "sourcesContent",
+  "format",
+  "globalName",
+  "target",
+  "supported",
+  "define",
+  "treeShaking",
+  "minify",
+  "mangleProps",
+  "reserveProps",
+  "mangleQuoted",
+  "mangleCache",
+  "drop",
+  "dropLabels",
+  "minifyWhitespace",
+  "minifyIdentifiers",
+  "minifySyntax",
+  "lineLimit",
+  "charset",
+  "ignoreAnnotations",
+  "jsx",
+  "jsxFactory",
+  "jsxFragment",
+  "jsxImportSource",
+  "jsxDev",
+  "jsxSideEffects",
+  "pure",
+  "keepNames",
+  "absPaths",
+  "color",
+  "logLevel",
+  "logLimit",
+  "logOverride",
+  "tsconfigRaw",
+  // BuildOptions
+  "bundle",
+  "splitting",
+  "preserveSymlinks",
+  "external",
+  "packages",
+  "alias",
+  "loader",
+  "resolveExtensions",
+  "mainFields",
+  "conditions",
+  "allowOverwrite",
+  "tsconfig",
+  "outExtension",
+  "publicPath",
+  "inject",
+  "banner",
+  "footer",
+  "plugins",
+] as const satisfies readonly (keyof BuildOptions)[];

package/src/lib/context.ts

@@ -0,0 +1,16 @@
+import type { Serwist } from "@serwist/window";
+import { createContext, useContext } from "react";
+
+export interface SerwistContextValues {
+  serwist: Serwist | null;
+}
+
+export const SerwistContext = createContext<SerwistContextValues>(null!);
+
+export const useSerwist = () => {
+  const context = useContext(SerwistContext);
+  if (!context) {
+    throw new Error("[useSerwist]: 'SerwistContext' is not available.");
+  }
+  return context;
+};

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+import * as logger from "./logger.js";
+
+export { logger };

package/src/lib/logger.ts

@@ -0,0 +1,58 @@
+import { createRequire } from "node:module";
+import { bold, green, red, white, yellow } from "kolorist";
+import semver from "semver";
+
+const require = createRequire(import.meta.url);
+
+const LOGGING_SPACE_PREFIX = semver.gte(require("next/package.json").version, "16.0.0") ? "" : " ";
+
+export type LoggingMethods = "wait" | "error" | "warn" | "info" | "event";
+
+const prefixedLog = (prefixType: LoggingMethods, ...message: any[]) => {
+  let prefix: string;
+  let consoleMethod: keyof Console;
+
+  switch (prefixType) {
+    case "wait":
+      prefix = `${white(bold("○"))} (serwist)`;
+      consoleMethod = "log";
+      break;
+    case "error":
+      prefix = `${red(bold("X"))} (serwist)`;
+      consoleMethod = "error";
+      break;
+    case "warn":
+      prefix = `${yellow(bold("⚠"))} (serwist)`;
+      consoleMethod = "warn";
+      break;
+    case "info":
+      prefix = `${white(bold("○"))} (serwist)`;
+      consoleMethod = "log";
+      break;
+    case "event":
+      prefix = `${green(bold("✓"))} (serwist)`;
+      consoleMethod = "log";
+      break;
+  }
+
+  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](`${LOGGING_SPACE_PREFIX}${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/lib/utils.ts

@@ -0,0 +1,4 @@
+export const generateGlobPatterns = (distDir: string) => [
+  `${distDir}static/**/*.{js,css,html,ico,apng,png,avif,jpg,jpeg,jfif,pjpeg,pjp,gif,svg,webp,json,webmanifest}`,
+  "public/**/*",
+];

package/src/types.ts

@@ -0,0 +1,79 @@
+import type {
+  BasePartial,
+  BaseResolved,
+  GlobPartial,
+  GlobResolved,
+  InjectPartial,
+  InjectResolved,
+  OptionalGlobDirectoryPartial,
+  RequiredGlobDirectoryResolved,
+} from "@serwist/build";
+import type { Prettify, Require } from "@serwist/utils";
+import type { BuildOptions } from "esbuild-wasm";
+import type { SUPPORTED_ESBUILD_OPTIONS } from "./lib/constants.js";
+import type { NextConfig as CompleteNextConfig } from "next";
+
+export type EsbuildSupportedOptions = (typeof SUPPORTED_ESBUILD_OPTIONS)[number];
+
+export type EsbuildOptions = Pick<BuildOptions, EsbuildSupportedOptions>;
+
+export interface NextConfig extends Pick<CompleteNextConfig, "basePath" | "distDir"> {
+  /**
+   * The Next.js `assetPrefix` config option.
+   *
+   * @see https://nextjs.org/docs/app/api-reference/config/next-config-js/assetPrefix
+   */
+  assetPrefix?: string;
+  /**
+   * The Next.js `basePath` config option.
+   *
+   * @default "/"
+   * @see https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath
+   */
+  basePath?: string;
+  /**
+   * The Next.js `distDir` config option.
+   *
+   * @default ".next"
+   * @see https://nextjs.org/docs/app/api-reference/config/next-config-js/distDir
+   */
+  distDir?: string;
+}
+
+export interface TurboPartial {
+  /**
+   * The path to your working directory.
+   *
+   * @default process.cwd()
+   */
+  cwd?: string;
+  /**
+   * A copy of your Next.js configuration. You must check
+   * if any option you've configured is needed by Serwist
+   * to ensure expected behavior.
+   *
+   * The following options are currently needed: `assetPrefix`,
+   * `basePath`, `distDir`.
+   */
+  nextConfig: Prettify<NextConfig>;
+  /**
+   * Options to configure the esbuild instance used to bundle
+   * the service worker.
+   */
+  esbuildOptions?: EsbuildOptions;
+}
+
+export interface TurboResolved extends Require<TurboPartial, "cwd" | "esbuildOptions"> {
+  nextConfig: Require<NextConfig, "basePath" | "distDir">;
+}
+
+export type InjectManifestOptions = Prettify<
+  Omit<BasePartial & GlobPartial & InjectPartial & OptionalGlobDirectoryPartial & TurboPartial, "disablePrecacheManifest">
+>;
+
+export type InjectManifestOptionsComplete = Prettify<
+  Omit<
+    Require<BaseResolved, "dontCacheBustURLsMatching"> & GlobResolved & InjectResolved & RequiredGlobDirectoryResolved & TurboResolved,
+    "disablePrecacheManifest"
+  >
+>;