@serwist/vite 9.0.0-preview.9 → 9.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serwist/vite",
-  "version": "9.0.0-preview.9",
+  "version": "9.0.0",
   "type": "module",
   "description": "A module that integrates Serwist into your Vite application.",
   "files": [
@@ -30,7 +30,7 @@
   },
   "author": "antfu <anthonyfu117@hotmail.com>, Serwist's Team",
   "license": "MIT",
-  "repository": "serwist/serwist",
+  "repository": "https://github.com/serwist/serwist",
   "bugs": "https://github.com/serwist/serwist/issues",
   "homepage": "https://serwist.pages.dev",
   "sideEffects": false,
@@ -38,11 +38,14 @@
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
-      "browser": [
-        "./dist/index.browser.d.ts"
-      ],
       "worker": [
         "./dist/index.worker.d.ts"
+      ],
+      "schema": [
+        "./dist/index.schema.d.ts"
+      ],
+      "typings": [
+        "./typings.d.ts"
       ]
     }
   },
@@ -51,82 +54,43 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./browser": {
-      "types": "./dist/index.browser.d.ts",
-      "default": "./dist/index.browser.js"
-    },
     "./worker": {
       "types": "./dist/index.worker.d.ts",
       "default": "./dist/index.worker.js"
     },
+    "./schema": {
+      "types": "./dist/index.schema.d.ts",
+      "default": "./dist/index.schema.js"
+    },
+    "./typings": {
+      "types": "./typings.d.ts"
+    },
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "debug": "4.3.4",
-    "fast-glob": "3.3.2",
-    "pretty-bytes": "6.1.1",
-    "@serwist/build": "9.0.0-preview.9",
-    "@serwist/expiration": "9.0.0-preview.9",
-    "@serwist/strategies": "9.0.0-preview.9",
-    "@serwist/window": "9.0.0-preview.9"
+    "glob": "10.3.12",
+    "kolorist": "1.8.0",
+    "zod": "3.22.4",
+    "@serwist/build": "9.0.0",
+    "serwist": "9.0.0",
+    "@serwist/window": "9.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "1.41.2",
-    "@sveltejs/kit": "2.5.0",
-    "@types/debug": "4.1.12",
-    "@types/node": "20.11.16",
-    "@types/prompts": "2.4.9",
-    "@types/react": "18.2.54",
-    "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.6",
-    "solid-js": "1.8.14",
-    "svelte": "5.0.0-next.48",
-    "typescript": "5.4.0-dev.20240206",
-    "vite": "5.0.12",
-    "vue": "3.4.15",
-    "@serwist/constants": "9.0.0-preview.9",
-    "@serwist/sw": "9.0.0-preview.9"
+    "@types/node": "20.12.7",
+    "rollup": "4.14.3",
+    "typescript": "5.5.0-dev.20240415",
+    "vite": "5.2.8",
+    "@serwist/configs": "9.0.0",
+    "@serwist/utils": "9.0.0",
+    "serwist": "9.0.0"
   },
   "peerDependencies": {
-    "@sveltejs/kit": "^1.0.0 || ^2.0.0",
-    "preact": "^10.0.0",
-    "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",
-    "@serwist/sw": "9.0.0-preview.9"
+    "vite": "^5.0.0"
   },
   "peerDependenciesMeta": {
-    "@serwist/sw": {
-      "optional": true
-    },
-    "@sveltejs/kit": {
-      "optional": true
-    },
-    "preact": {
-      "optional": true
-    },
-    "react": {
-      "optional": true
-    },
-    "solid-js": {
-      "optional": true
-    },
-    "svelte": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
-    },
-    "vue": {
-      "optional": true
     }
   },
   "scripts": {

package/src/index.schema.ts

@@ -0,0 +1,3 @@
+import { devOptions, hooks, injectManifestOptions, injectManifestPartial } from "./lib/schema.js";
+
+export { hooks, devOptions, injectManifestPartial, injectManifestOptions };

package/src/index.ts

@@ -1,12 +1,13 @@
 import type { Plugin } from "vite";
 
-import { createApi } from "./api.js";
-import { createContext } from "./context.js";
+import { createApi } from "./lib/api.js";
+import { createContext } from "./lib/context.js";
+import type { DevOptions, ExtendManifestEntriesHook, Hooks, PluginOptions, PluginOptionsComplete, SerwistViteApi } from "./lib/types.js";
+import { resolveEntry, toFs } from "./lib/utils.js";
+import { validateInjectManifestOptions } from "./lib/validator.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.
@@ -20,6 +21,6 @@ export const serwist = (userOptions: PluginOptions): Plugin[] => {
 };
 
 // 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";
+export { buildPlugin as build, createApi, createContext, devPlugin as dev, mainPlugin as main, resolveEntry, toFs, validateInjectManifestOptions };
+export type { SerwistViteContext } from "./lib/context.js";
+export type { PluginOptions, PluginOptionsComplete, Hooks, ExtendManifestEntriesHook, DevOptions, SerwistViteApi };

package/src/index.worker.ts

@@ -1,105 +1,120 @@
-import { ExpirationPlugin } from "@serwist/expiration";
-import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from "@serwist/strategies";
-import type { RuntimeCaching } from "@serwist/sw";
+import type { RuntimeCaching } from "serwist";
+import { CacheFirst, ExpirationPlugin, NetworkFirst, StaleWhileRevalidate } from "serwist";
 
-export const defaultCache = [
-  {
-    matcher: /^https:\/\/fonts\.(?:googleapis|gstatic)\.com\/.*/i,
-    handler: new CacheFirst({
-      cacheName: "google-fonts",
-      plugins: [
-        new ExpirationPlugin({
-          maxEntries: 4,
-          maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
+/**
+ * The default, recommended list of caching strategies for applications
+ * built with Vite.
+ *
+ * @see https://serwist.pages.dev/docs/vite/worker-exports#default-cache
+ */
+export const defaultCache: RuntimeCaching[] = import.meta.env.DEV
+  ? []
+  : [
+      {
+        matcher: /^https:\/\/fonts\.(?:googleapis|gstatic)\.com\/.*/i,
+        handler: new CacheFirst({
+          cacheName: "google-fonts",
+          plugins: [
+            new ExpirationPlugin({
+              maxEntries: 4,
+              maxAgeSeconds: 365 * 24 * 60 * 60, // 365 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
+      },
+      {
+        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: 24 * 60 * 60, // 24 hours
+      },
+      {
+        matcher: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
+        handler: new StaleWhileRevalidate({
+          cacheName: "static-image-assets",
+          plugins: [
+            new ExpirationPlugin({
+              maxEntries: 64,
+              maxAgeSeconds: 24 * 60 * 60, // 24 hours
+              maxAgeFrom: "last-used",
+            }),
+          ],
         }),
-      ],
-    }),
-  },
-  {
-    matcher: /\.(?:js)$/i,
-    handler: new StaleWhileRevalidate({
-      cacheName: "static-js-assets",
-      plugins: [
-        new ExpirationPlugin({
-          maxEntries: 32,
-          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+      {
+        matcher: /\.(?:js)$/i,
+        handler: new StaleWhileRevalidate({
+          cacheName: "static-js-assets",
+          plugins: [
+            new ExpirationPlugin({
+              maxEntries: 32,
+              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
+      },
+      {
+        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: /\.(?:json|xml|csv)$/i,
-    handler: new NetworkFirst({
-      cacheName: "static-data-assets",
-      plugins: [
-        new ExpirationPlugin({
-          maxEntries: 32,
-          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+      {
+        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",
+            }),
+          ],
         }),
-      ],
-    }),
-  },
-  {
-    matcher: /\/api\/.*$/i,
-    method: "GET",
-    handler: new NetworkFirst({
-      cacheName: "apis",
-      plugins: [
-        new ExpirationPlugin({
-          maxEntries: 16,
-          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+      {
+        matcher: /\/api\/.*$/i,
+        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
         }),
-      ],
-      networkTimeoutSeconds: 10, // fallback to cache if API does not response within 10 seconds
-    }),
-  },
-  {
-    matcher: /.*/i,
-    handler: new NetworkFirst({
-      cacheName: "others",
-      plugins: [
-        new ExpirationPlugin({
-          maxEntries: 32,
-          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+      {
+        matcher: /.*/i,
+        handler: new NetworkFirst({
+          cacheName: "others",
+          plugins: [
+            new ExpirationPlugin({
+              maxEntries: 32,
+              maxAgeSeconds: 24 * 60 * 60, // 24 hours
+              maxAgeFrom: "last-used",
+            }),
+          ],
+          networkTimeoutSeconds: 10,
         }),
-      ],
-      networkTimeoutSeconds: 10,
-    }),
-  },
-] satisfies RuntimeCaching[];
+      },
+    ];

package/src/lib/constants.ts

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

package/src/{context.ts → lib/context.ts}

@@ -1,6 +1,6 @@
 import type { ResolvedConfig } from "vite";
 
-import type { PluginOptions, ResolvedPluginOptions } from "./types.js";
+import type { PluginOptions, PluginOptionsComplete } from "./types.js";
 
 export type SerwistViteFrameworks = "nuxt";
 
@@ -21,7 +21,7 @@ export interface SerwistViteContext {
    * 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;
+  options: PluginOptionsComplete;
   useImportRegister: boolean;
   /**
    * Is the plugin running on dev?

package/src/{log.ts → lib/log.ts}

@@ -2,7 +2,7 @@ import type { BuildResult } from "@serwist/build";
 import { cyan, dim, green, yellow } from "kolorist";
 import type { ResolvedConfig } from "vite";
 
-import { version } from "../package.json";
+import { version } from "../../package.json";
 
 export const logSerwistResult = (buildResult: Pick<BuildResult, "count" | "size" | "warnings">, viteOptions: ResolvedConfig) => {
   const { logLevel = "info" } = viteOptions;

package/src/{modules.ts → lib/modules.ts}

@@ -21,9 +21,8 @@ interface BuildResult extends SerwistBuild.GetManifestResult {
   manifestString: string;
 }
 
-export const injectManifest = async (config: SerwistBuild.ViteInjectManifestOptions): Promise<BuildResult> => {
-  const { validateViteInjectManifestOptions, getFileManifestEntries, stringify } = await loadSerwistBuild();
-  const options = await validateViteInjectManifestOptions(config);
+export const injectManifest = async (options: SerwistBuild.GetManifestOptionsComplete): Promise<BuildResult> => {
+  const { getFileManifestEntries, stringify } = await loadSerwistBuild();
   const { count, size, manifestEntries, warnings } = await getFileManifestEntries(options);
   const manifestString = manifestEntries === undefined ? "undefined" : stringify(manifestEntries);
   return {
@@ -36,7 +35,7 @@ export const injectManifest = async (config: SerwistBuild.ViteInjectManifestOpti
 };
 
 export const generateServiceWorker = async (ctx: SerwistViteContext) => {
-  const { format, plugins, rollupOptions } = ctx.options.injectManifestRollupOptions;
+  const { plugins, rollupOptions, rollupFormat } = ctx.options;
 
   const parsedSwDest = path.parse(ctx.options.injectManifest.swDest);
 
@@ -152,7 +151,7 @@ export const generateServiceWorker = async (ctx: SerwistViteContext) => {
         lib: {
           entry: ctx.options.injectManifest.swSrc,
           name: "app",
-          formats: [format],
+          formats: [rollupFormat],
         },
         rollupOptions: {
           ...rollupOptions,

package/src/lib/options.ts

@@ -0,0 +1,76 @@
+import path from "node:path";
+import process from "node:process";
+
+import type { ResolvedConfig } from "vite";
+
+import type { PluginOptions, PluginOptionsComplete } from "./types.js";
+import { resolveBasePath, slash } from "./utils.js";
+import { validateInjectManifestOptions } from "./validator.js";
+
+const prepareConfigForValidation = (
+  viteConfig: ResolvedConfig,
+  {
+    mode = process.env.NODE_ENV === "production" || process.env.NODE_ENV === "development" ? process.env.NODE_ENV : "production",
+    base = viteConfig.base,
+    scope: _scope,
+    devOptions,
+    ...injectManifest
+  }: PluginOptions,
+) => {
+  const basePath = resolveBasePath(base);
+  return {
+    mode,
+    base: basePath,
+    scope: _scope || basePath,
+    devOptions,
+    ...injectManifest,
+  };
+};
+
+export const resolveOptions = async (options: PluginOptions, viteConfig: ResolvedConfig): Promise<PluginOptionsComplete> => {
+  const {
+    mode,
+    type,
+    scope,
+    base,
+    disable,
+    integration,
+    swUrl,
+    swSrc,
+    swDest,
+    plugins,
+    rollupFormat,
+    rollupOptions,
+    devOptions,
+    ...userInjectManifest
+  } = await validateInjectManifestOptions(prepareConfigForValidation(viteConfig, options));
+
+  let assetsDir = slash(viteConfig.build.assetsDir ?? "assets");
+  if (assetsDir[assetsDir.length - 1] !== "/") assetsDir += "/";
+
+  // remove './' prefix from assetsDir
+  const dontCacheBustURLsMatching = new RegExp(`^${assetsDir.replace(/^\.*?\//, "")}`);
+
+  const resolvedPluginOptions = {
+    mode,
+    type,
+    scope,
+    base,
+    disable,
+    integration,
+    swUrl,
+    plugins,
+    rollupFormat,
+    rollupOptions,
+    devOptions,
+    injectManifest: {
+      dontCacheBustURLsMatching,
+      ...userInjectManifest,
+      swSrc: path.resolve(viteConfig.root, swSrc),
+      swDest: path.resolve(viteConfig.root, viteConfig.build.outDir, swDest),
+      disablePrecacheManifest: !viteConfig.isProduction,
+    },
+  } satisfies PluginOptionsComplete;
+
+  return resolvedPluginOptions;
+};

package/src/lib/schema.ts

@@ -0,0 +1,35 @@
+import { basePartial, globPartial, injectPartial, requiredGlobDirectoryPartial, requiredSwDestPartial } from "@serwist/build/schema";
+import { z } from "zod";
+
+export const hooks = z.object({
+  beforeBuildServiceWorker: z.function(z.tuple([z.any()]), z.union([z.promise(z.void()), z.void()])).optional(),
+  closeBundleOrder: z.union([z.literal("pre"), z.literal("post"), z.null()]).optional(),
+  configureOptions: z.function(z.tuple([z.any(), z.any()]), z.union([z.promise(z.void()), z.void()])).optional(),
+});
+
+export const devOptions = z.object({
+  bundle: z.boolean().default(true),
+  minify: z.union([z.boolean(), z.literal("terser"), z.literal("esbuild")]).default(false),
+});
+
+export const injectManifestPartial = z.object({
+  mode: z.union([z.literal("development"), z.literal("production")]),
+  type: z.union([z.literal("classic"), z.literal("module")]).default("classic"),
+  scope: z.string(),
+  base: z.string(),
+  disable: z.boolean().default(false),
+  integration: hooks.default({}),
+  swUrl: z.string().default("/sw.js"),
+  plugins: z.array(z.any()).default([]),
+  rollupFormat: z.union([z.literal("es"), z.literal("iife")]).default("es"),
+  rollupOptions: z.record(z.string(), z.any()).default({}),
+  devOptions: devOptions.default({}),
+});
+
+export const injectManifestOptions = basePartial
+  .merge(globPartial)
+  .merge(injectPartial)
+  .merge(requiredSwDestPartial)
+  .merge(requiredGlobDirectoryPartial)
+  .merge(injectManifestPartial)
+  .strict("Do not pass invalid properties to InjectManifestOptions!");