@serwist/vite 8.4.4 → 9.0.0-preview.1

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@serwist/vite",
-  "version": "8.4.4",
+  "version": "9.0.0-preview.1",
   "type": "module",
   "description": "A module that integrates Serwist into your Vite application.",
   "files": [
-    "dist",
-    "!dist/dts"
+    "src",
+    "dist"
   ],
   "keywords": [
     "react",
@@ -25,6 +25,9 @@
     "web",
     "service-worker"
   ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "author": "antfu <anthonyfu117@hotmail.com>, Serwist's Team",
   "license": "MIT",
   "repository": "serwist/serwist",
@@ -48,28 +51,20 @@
   },
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      }
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./browser": {
-      "import": {
-        "types": "./dist/index.browser.d.ts",
-        "default": "./dist/index.browser.js"
-      }
+      "types": "./dist/index.browser.d.ts",
+      "default": "./dist/index.browser.js"
     },
     "./worker": {
-      "import": {
-        "types": "./dist/index.worker.d.ts",
-        "default": "./dist/index.worker.js"
-      }
+      "types": "./dist/index.worker.d.ts",
+      "default": "./dist/index.worker.js"
     },
     "./integration-*": {
-      "import": {
-        "types": "./dist/integration/*/index.d.ts",
-        "default": "./dist/integration/*/index.js"
-      }
+      "types": "./dist/integration/*/index.d.ts",
+      "default": "./dist/integration/*/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -77,29 +72,30 @@
     "debug": "4.3.4",
     "fast-glob": "3.3.2",
     "pretty-bytes": "6.1.1",
-    "@serwist/build": "8.4.4",
-    "@serwist/window": "8.4.4"
+    "@serwist/build": "9.0.0-preview.1",
+    "@serwist/window": "9.0.0-preview.1"
   },
   "devDependencies": {
-    "@playwright/test": "1.40.1",
-    "@sveltejs/kit": "2.0.6",
+    "@playwright/test": "1.41.2",
+    "@sveltejs/kit": "2.5.0",
     "@types/debug": "4.1.12",
-    "@types/node": "20.10.5",
+    "@types/node": "20.11.16",
     "@types/prompts": "2.4.9",
-    "@types/react": "18.2.45",
-    "bumpp": "9.2.1",
+    "@types/react": "18.2.52",
+    "bumpp": "9.3.0",
     "kolorist": "1.8.0",
     "preact": "10.19.3",
     "prompts": "2.4.2",
     "publint": "0.2.7",
     "react": "18.2.0",
-    "rollup": "4.9.1",
-    "solid-js": "1.8.7",
-    "svelte": "5.0.0-next.26",
-    "typescript": "5.4.0-dev.20231226",
-    "vite": "5.0.10",
-    "vue": "3.3.13",
-    "@serwist/constants": "8.4.4"
+    "rollup": "4.9.6",
+    "solid-js": "1.8.12",
+    "svelte": "5.0.0-next.45",
+    "typescript": "5.4.0-dev.20240203",
+    "vite": "5.0.12",
+    "vue": "3.4.15",
+    "@serwist/constants": "9.0.0-preview.1",
+    "@serwist/sw": "9.0.0-preview.1"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^1.0.0 || ^2.0.0",
@@ -107,10 +103,15 @@
     "react": "^18.0.0",
     "solid-js": "^1.8.7",
     "svelte": "^4.0.0 || ^5.0.0",
+    "typescript": ">=5.0.0",
     "vite": "^5.0.0",
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "@serwist/sw": "9.0.0-preview.1"
   },
   "peerDependenciesMeta": {
+    "@serwist/sw": {
+      "optional": true
+    },
     "@sveltejs/kit": {
       "optional": true
     },
@@ -126,6 +127,9 @@
     "svelte": {
       "optional": true
     },
+    "typescript": {
+      "optional": true
+    },
     "vue": {
       "optional": true
     }

package/src/api.ts

@@ -0,0 +1,38 @@
+import { yellow } from "kolorist";
+
+import type { SerwistViteContext } from "./context.js";
+import { logSerwistResult } from "./log.js";
+import { generateServiceWorker } from "./modules.js";
+import type { ExtendManifestEntriesHook, SerwistViteApi } from "./types.js";
+
+export const createApi = (ctx: SerwistViteContext): SerwistViteApi => {
+  return {
+    get disabled() {
+      return ctx?.options?.disable;
+    },
+    async generateSW() {
+      if (ctx.options.disable) {
+        return undefined;
+      }
+      const buildResult = await generateServiceWorker(ctx);
+      if (buildResult) {
+        if (ctx.viteConfig.isProduction) {
+          // Log Serwist result
+          logSerwistResult(buildResult, ctx.viteConfig);
+        } else if (buildResult.warnings && buildResult.warnings.length > 0) {
+          console.warn(yellow(["[@serwist/vite] Warnings", ...buildResult.warnings.map((w) => ` - ${w}`), ""].join("\n")));
+        }
+      }
+    },
+    extendManifestEntries(fn: ExtendManifestEntriesHook) {
+      const { options } = ctx;
+      if (options.disable) return;
+
+      const result = fn(options.injectManifest.additionalPrecacheEntries || []);
+
+      if (result != null) {
+        options.injectManifest.additionalPrecacheEntries = result;
+      }
+    },
+  };
+};

package/src/assets.ts

@@ -0,0 +1,76 @@
+import crypto from "node:crypto";
+import fs from "node:fs";
+import { resolve as resolveFs } from "node:path";
+
+import type { InjectManifestOptions, ManifestEntry } from "@serwist/build";
+import fg from "fast-glob";
+import type { ResolvedConfig } from "vite";
+
+import type { ResolvedPluginOptions } from "./types.js";
+
+const buildManifestEntry = (publicDir: string, url: string): Promise<ManifestEntry> => {
+  return new Promise((resolve, reject) => {
+    const cHash = crypto.createHash("MD5");
+    const stream = fs.createReadStream(resolveFs(publicDir, url));
+    stream.on("error", (err) => {
+      reject(err);
+    });
+    stream.on("data", (chunk) => {
+      cHash.update(chunk);
+    });
+    stream.on("end", () => {
+      return resolve({
+        url,
+        revision: `${cHash.digest("hex")}`,
+      });
+    });
+  });
+};
+
+const lookupAdditionalPrecacheEntries = (serwistOptions: Partial<InjectManifestOptions>): (string | ManifestEntry)[] => {
+  return serwistOptions.additionalPrecacheEntries || [];
+};
+
+// we need to make icons relative, we can have for example icon entries with: /pwa.png
+// fast-glob will not resolve absolute paths
+const normalizeIconPath = (path: string) => {
+  return path.startsWith("/") ? path.substring(1) : path;
+};
+
+export const configureStaticAssets = async (resolvedPluginOptions: ResolvedPluginOptions, viteConfig: ResolvedConfig) => {
+  const { injectManifest, includeAssets } = resolvedPluginOptions;
+
+  const { publicDir } = viteConfig;
+  const globs: string[] = [];
+  const manifestEntries: (string | ManifestEntry)[] = lookupAdditionalPrecacheEntries(injectManifest);
+  if (includeAssets) {
+    // we need to make icons relative, we can have for example icon entries with: /pwa.png
+    // fast-glob will not resolve absolute paths
+    if (Array.isArray(includeAssets)) globs.push(...includeAssets.map(normalizeIconPath));
+    else globs.push(normalizeIconPath(includeAssets));
+  }
+  if (globs.length > 0) {
+    let assets = await fg(globs, {
+      cwd: publicDir,
+      onlyFiles: true,
+      unique: true,
+    });
+    // we also need to remove from the list existing included by the user
+    if (manifestEntries.length > 0) {
+      const included = manifestEntries.map((me) => {
+        if (typeof me === "string") return me;
+        return me.url;
+      });
+      assets = assets.filter((a) => !included.includes(a));
+    }
+    const assetsEntries = await Promise.all(
+      assets.map((a) => {
+        return buildManifestEntry(publicDir, a);
+      }),
+    );
+    manifestEntries.push(...assetsEntries);
+  }
+  if (manifestEntries.length > 0) {
+    injectManifest.additionalPrecacheEntries = manifestEntries;
+  }
+};

package/src/constants.ts

@@ -0,0 +1,2 @@
+export const INTERNAL_SERWIST_VIRTUAL = "virtual:internal-serwist";
+export const RESOLVED_INTERNAL_SERWIST_VIRTUAL = `\0${INTERNAL_SERWIST_VIRTUAL}`;

package/src/context.ts

@@ -0,0 +1,45 @@
+import type { ResolvedConfig } from "vite";
+
+import type { PluginOptions, ResolvedPluginOptions } from "./types.js";
+
+export type SerwistViteFrameworks = "nuxt" | "sveltekit";
+
+export interface SerwistViteContext {
+  /**
+   * Resolved Vite config.
+   *
+   * Note: This value is set by our main plugin, located at plugins/main.ts.
+   */
+  viteConfig: ResolvedConfig;
+  /**
+   * Provided options.
+   */
+  userOptions: PluginOptions;
+  /**
+   * Resolved options.
+   *
+   * Note: this is different from `userOptions` in that it has been parsed, whereas
+   * `userOptions` is the raw configuration that the user provides us.
+   */
+  options: ResolvedPluginOptions;
+  useImportRegister: boolean;
+  /**
+   * Is the plugin running on dev?
+   *
+   * Note: This value is set by our dev plugin, located at plugins/dev.ts.
+   */
+  devEnvironment: boolean;
+  /** To tailor our APIs to these frameworks. */
+  framework: SerwistViteFrameworks | undefined;
+}
+
+export const createContext = (userOptions: PluginOptions, framework: SerwistViteFrameworks | undefined): SerwistViteContext => {
+  return {
+    userOptions,
+    options: undefined!,
+    viteConfig: undefined!,
+    useImportRegister: false,
+    devEnvironment: false,
+    framework,
+  };
+};

package/src/index.browser.ts

@@ -0,0 +1,8 @@
+import { swScope, swType, swUrl } from "virtual:internal-serwist";
+
+export const getSerwist = async () => {
+  if ("serviceWorker" in navigator) {
+    return new (await import("@serwist/window")).Serwist(swUrl, { scope: swScope, type: swType });
+  }
+  return undefined;
+};

package/src/index.ts

@@ -0,0 +1,25 @@
+import type { Plugin } from "vite";
+
+import { createApi } from "./api.js";
+import { createContext } from "./context.js";
+import { buildPlugin } from "./plugins/build.js";
+import { devPlugin } from "./plugins/dev.js";
+import { mainPlugin } from "./plugins/main.js";
+import type { PluginOptions } from "./types.js";
+import { resolveEntry, toFs } from "./utils.js";
+
+/**
+ * Integrates Serwist into your Vite app.
+ * @param userOptions
+ * @returns
+ */
+export const serwist = (userOptions: PluginOptions): Plugin[] => {
+  const ctx = createContext(userOptions, undefined);
+  const api = createApi(ctx);
+  return [mainPlugin(ctx, api), buildPlugin(ctx, api), devPlugin(ctx, api)];
+};
+
+// This allows for customization.
+export { buildPlugin as build, createApi, createContext, devPlugin as dev, mainPlugin as main, resolveEntry, toFs };
+export type { SerwistViteContext } from "./context.js";
+export * from "./types.js";

package/src/index.worker.ts

@@ -0,0 +1,95 @@
+import type { RuntimeCaching } from "@serwist/sw";
+
+export const defaultCache: RuntimeCaching[] = [
+  {
+    urlPattern: /^https:\/\/fonts\.(?:googleapis|gstatic)\.com\/.*/i,
+    handler: "CacheFirst",
+    options: {
+      cacheName: "google-fonts",
+      expiration: {
+        maxEntries: 4,
+        maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
+      },
+    },
+  },
+  {
+    urlPattern: /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
+    handler: "StaleWhileRevalidate",
+    options: {
+      cacheName: "static-font-assets",
+      expiration: {
+        maxEntries: 4,
+        maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
+      },
+    },
+  },
+  {
+    urlPattern: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
+    handler: "StaleWhileRevalidate",
+    options: {
+      cacheName: "static-image-assets",
+      expiration: {
+        maxEntries: 64,
+        maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+    },
+  },
+  {
+    urlPattern: /\.(?:js)$/i,
+    handler: "StaleWhileRevalidate",
+    options: {
+      cacheName: "static-js-assets",
+      expiration: {
+        maxEntries: 32,
+        maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+    },
+  },
+  {
+    urlPattern: /\.(?:css|less)$/i,
+    handler: "StaleWhileRevalidate",
+    options: {
+      cacheName: "static-style-assets",
+      expiration: {
+        maxEntries: 32,
+        maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+    },
+  },
+  {
+    urlPattern: /\.(?:json|xml|csv)$/i,
+    handler: "NetworkFirst",
+    options: {
+      cacheName: "static-data-assets",
+      expiration: {
+        maxEntries: 32,
+        maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+    },
+  },
+  {
+    urlPattern: /\/api\/.*$/i,
+    handler: "NetworkFirst",
+    method: "GET",
+    options: {
+      cacheName: "apis",
+      expiration: {
+        maxEntries: 16,
+        maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+      networkTimeoutSeconds: 10, // fallback to cache if API does not response within 10 seconds
+    },
+  },
+  {
+    urlPattern: /.*/i,
+    handler: "NetworkFirst",
+    options: {
+      cacheName: "others",
+      expiration: {
+        maxEntries: 32,
+        maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+      networkTimeoutSeconds: 10,
+    },
+  },
+];

package/src/integration/svelte/build.ts

@@ -0,0 +1,21 @@
+import type { Plugin } from "vite";
+
+import type { SerwistViteContext } from "../../context.js";
+import type { SerwistViteApi } from "../../types.js";
+
+export const buildPlugin = (ctx: SerwistViteContext, api: SerwistViteApi) => {
+  return <Plugin>{
+    name: "@serwist/vite/integration-svelte:build",
+    apply: "build",
+    enforce: "pre",
+    closeBundle: {
+      sequential: true,
+      enforce: "pre",
+      async handler() {
+        if (api && !api.disabled && ctx.viteConfig.build.ssr) {
+          await api.generateSW();
+        }
+      },
+    },
+  };
+};

package/src/integration/svelte/config.ts

@@ -0,0 +1,141 @@
+import crypto from "node:crypto";
+import os from "node:os";
+import path from "node:path";
+
+import type { ManifestTransform } from "@serwist/build";
+import { errors } from "@serwist/build";
+import type { ResolvedConfig } from "vite";
+
+import type { PluginOptions as BasePluginOptions } from "../../types.js";
+import { resolveEntry } from "../../utils.js";
+import type { KitOptions } from "./types.js";
+
+export const configurateSvelteKitOptions = (viteConfig: ResolvedConfig, kit: KitOptions, options: BasePluginOptions) => {
+  const clientOutDir = path.resolve(viteConfig.root, viteConfig.build.outDir, "../client");
+
+  // Kit fixes the service worker's name to 'service-worker.js'
+  if (viteConfig.isProduction) {
+    options.swSrc = path.resolve(clientOutDir, "service-worker.js");
+    options.swDest = path.resolve(clientOutDir, "service-worker.js");
+  } else {
+    const swSrc = resolveEntry(path.join(viteConfig.root, kit.files?.serviceWorker ?? "src/service-worker"));
+    if (swSrc) {
+      options.swSrc = swSrc;
+      options.swDest = path.join(os.tmpdir(), `serwist-vite-integration-svelte-${crypto.randomUUID()}.js`);
+    } else {
+      throw new Error(errors["invalid-sw-src"]);
+    }
+  }
+  options.swUrl = "/service-worker.js";
+
+  // SvelteKit's outDir is `.svelte-kit/output/client`.
+  // We need to include the parent folder in globDirectory since SvelteKit will generate SSG in `.svelte-kit/output/prerendered` folder.
+  if (!options.globDirectory) {
+    options.globDirectory = path.resolve(clientOutDir, "..");
+  }
+  if (!options.manifestTransforms) {
+    options.manifestTransforms = [createManifestTransform(viteConfig.base, undefined, kit)];
+  }
+
+  let buildAssetsDir = kit.appDir ?? "_app/";
+  if (buildAssetsDir[0] === "/") buildAssetsDir = buildAssetsDir.slice(1);
+  if (buildAssetsDir[buildAssetsDir.length - 1] !== "/") buildAssetsDir += "/";
+
+  if (!options.modifyURLPrefix) {
+    options.globPatterns = buildGlobPatterns(options.globPatterns);
+    if (kit.includeVersionFile) {
+      options.globPatterns.push(`client/${buildAssetsDir}version.json`);
+    }
+  }
+
+  // Exclude server assets: sw is built on SSR build
+  options.globIgnores = buildGlobIgnores(options.globIgnores);
+
+  // Vite 5 support: allow override dontCacheBustURLsMatching
+  if (!("dontCacheBustURLsMatching" in options)) {
+    options.dontCacheBustURLsMatching = new RegExp(`${buildAssetsDir}immutable/`);
+  }
+
+  if (!options.injectionPoint) {
+    options.injectionPoint = "self.__SW_MANIFEST";
+  }
+};
+
+export function createManifestTransform(base: string, webManifestName?: string, options?: KitOptions): ManifestTransform {
+  return async (entries) => {
+    const defaultAdapterFallback = "prerendered/fallback.html";
+    const suffix = options?.trailingSlash === "always" ? "/" : "";
+    let adapterFallback = options?.adapterFallback;
+    let excludeFallback = false;
+    // the fallback will be always generated by SvelteKit.
+    // The adapter will copy the fallback only if it is provided in its options: we need to exclude it
+    if (!adapterFallback) {
+      adapterFallback = defaultAdapterFallback;
+      excludeFallback = true;
+    }
+
+    // the fallback will be always in .svelte-kit/output/prerendered/fallback.html
+    const manifest = entries
+      .filter(({ url }) => !(excludeFallback && url === defaultAdapterFallback))
+      .map((e) => {
+        let url = e.url;
+        // client assets in `.svelte-kit/output/client` folder.
+        // SSG pages in `.svelte-kit/output/prerendered/pages` folder.
+        // fallback page in `.svelte-kit/output/prerendered` folder (fallback.html is the default).
+        if (url.startsWith("client/")) url = url.slice(7);
+        else if (url.startsWith("prerendered/pages/")) url = url.slice(18);
+        else if (url === defaultAdapterFallback) url = adapterFallback!;
+
+        if (url.endsWith(".html")) {
+          if (url.startsWith("/")) url = url.slice(1);
+
+          if (url === "index.html") {
+            url = base;
+          } else {
+            const idx = url.lastIndexOf("/");
+            if (idx > -1) {
+              // abc/index.html -> abc/?
+              if (url.endsWith("/index.html")) url = `${url.slice(0, idx)}${suffix}`;
+              // abc/def.html -> abc/def/?
+              else url = `${url.substring(0, url.lastIndexOf("."))}${suffix}`;
+            } else {
+              // xxx.html -> xxx/?
+              url = `${url.substring(0, url.lastIndexOf("."))}${suffix}`;
+            }
+          }
+        }
+
+        e.url = url;
+
+        return e;
+      });
+
+    if (!webManifestName) return { manifest };
+
+    return { manifest: manifest.filter((e) => e.url !== webManifestName) };
+  };
+}
+
+export function buildGlobPatterns(globPatterns?: string[]) {
+  if (globPatterns) {
+    if (!globPatterns.some((g) => g.startsWith("prerendered/"))) globPatterns.push("prerendered/**/*.html");
+
+    if (!globPatterns.some((g) => g.startsWith("client/"))) globPatterns.push("client/**/*.{js,css,ico,png,svg,webp,webmanifest}");
+
+    if (!globPatterns.some((g) => g.includes("webmanifest"))) globPatterns.push("client/*.webmanifest");
+
+    return globPatterns;
+  }
+
+  return ["client/**/*.{js,css,ico,png,svg,webp,webmanifest}", "prerendered/**/*.html"];
+}
+
+export function buildGlobIgnores(globIgnores?: string[]) {
+  if (globIgnores) {
+    if (!globIgnores.some((g) => g.startsWith("server/"))) globIgnores.push("server/*.*");
+
+    return globIgnores;
+  }
+
+  return ["server/*.*"];
+}

package/src/integration/svelte/index.ts

@@ -0,0 +1,27 @@
+import type { Plugin } from "vite";
+
+import { createApi } from "../../api.js";
+import { createContext } from "../../context.js";
+import { devPlugin } from "../../plugins/dev.js";
+import { mainPlugin } from "../../plugins/main.js";
+import type { PluginOptions as BasePluginOptions } from "../../types.js";
+import { buildPlugin } from "./build.js";
+import { configurateSvelteKitOptions } from "./config.js";
+import type { PluginOptions } from "./types.js";
+
+// TODO: handle SvelteKit build errors.
+/**
+ * Integrates Serwist into your SvelteKit app.
+ * @param userOptions
+ * @returns
+ */
+export const serwist = (userOptions: PluginOptions = {}): Plugin[] => {
+  if (!userOptions.integration) userOptions.integration = {};
+  userOptions.integration.closeBundleOrder = "pre";
+  userOptions.integration.configureOptions = (viteConfig, options) => configurateSvelteKitOptions(viteConfig, userOptions.kit ?? {}, options);
+  const ctx = createContext(userOptions as BasePluginOptions, "sveltekit");
+  const api = createApi(ctx);
+  return [mainPlugin(ctx, api), devPlugin(ctx, api), buildPlugin(ctx, api)];
+};
+
+export * from "./types.js";

package/src/integration/svelte/types.ts

@@ -0,0 +1,26 @@
+import type { KitConfig } from "@sveltejs/kit";
+
+import type { PluginOptions as BasePluginOptions } from "../../types.js";
+import type { Optional } from "../../utils-types.js";
+
+export interface KitOptions extends Pick<KitConfig, "appDir" | "files"> {
+  /**
+   * @see https://kit.svelte.dev/docs/adapter-static#options-fallback
+   */
+  adapterFallback?: string;
+  /**
+   * `trailingSlash` in `+page.{ts,js}` or `+layout.{ts,js}` files.
+   * @default "never"
+   */
+  trailingSlash?: "never" | "always" | "ignore";
+  /**
+   * Should `"${appDir}/version.json"` be included in the service worker's precache manifest?
+   *
+   * @default false
+   */
+  includeVersionFile?: boolean;
+}
+
+export interface PluginOptions extends Optional<Omit<BasePluginOptions, "swSrc" | "swDest" | "swUrl">, "globDirectory"> {
+  kit?: KitOptions;
+}

package/src/log.ts

@@ -0,0 +1,25 @@
+import type { BuildResult } from "@serwist/build";
+import { cyan, dim, green, yellow } from "kolorist";
+import type { ResolvedConfig } from "vite";
+
+import { version } from "../package.json";
+
+export const logSerwistResult = (buildResult: Pick<BuildResult, "count" | "size" | "warnings">, viteOptions: ResolvedConfig) => {
+  const { logLevel = "info" } = viteOptions;
+
+  if (logLevel === "silent") return;
+
+  const { count, size, warnings } = buildResult;
+
+  if (logLevel === "info") {
+    console.info(
+      [
+        "",
+        `${cyan(`@serwist/vite v${version}`)} ${green("files generated.")}`,
+        `${green("✓")} ${count} precache entries ${dim(`(${(size / 1024).toFixed(2)} KiB)`)}`,
+        // log build warning
+        warnings && warnings.length > 0 ? yellow(["⚠ warnings", ...warnings.map((w) => `  ${w}`), ""].join("\n")) : "",
+      ].join("\n"),
+    );
+  }
+};