Fix stale/mismatched engine cache causing "ASM_CONSTS[...] is not a function" live

The service worker's engine cache key relied on a manual CACHE_VERSION
bump that was forgotten across the last two @valknar/vpinball-wasm
version bumps, so returning visitors kept getting served old cached
vpinball.js/.wasm/.data via cache-first with no revalidation — the origin
server itself was serving a correct, matching 0.3.4 set the whole time
(verified via headers/sizes against the local build).

Split CACHE_VERSION into a manually-bumped SHELL_VERSION and an
ENGINE_VERSION that copy-engine-assets.mjs now writes automatically from
the installed engine's package.json on every build, so the engine cache
always busts in lockstep with the dependency version — no step to forget.

lib/pinball/usePinballInstance.ts

@@ -61,32 +61,6 @@ export function usePinballInstance(
     const canvas = canvasRef.current;
     if (!canvas || !webgl2Supported) return;
 
-    // The engine sets a table-supplied image as the page favicon via a
-    // blob: URL (see vpinball.js's rel~='icon' link handling) — undesirable
-    // here, where the app's own favicon should stay put. Snapshot the
-    // current icon links up front and revert any blob: href the moment it
-    // appears, rather than patching the (compiled) engine itself.
-    const originalIconHrefs = new Map<HTMLLinkElement, string>();
-    document.querySelectorAll<HTMLLinkElement>("link[rel~='icon']").forEach((link) => {
-      originalIconHrefs.set(link, link.href);
-    });
-    const faviconObserver = new MutationObserver(() => {
-      document.querySelectorAll<HTMLLinkElement>("link[rel~='icon']").forEach((link) => {
-        if (!link.href.startsWith("blob:")) return;
-        const blobUrl = link.href;
-        const original = originalIconHrefs.get(link);
-        if (original) link.href = original;
-        else link.remove();
-        URL.revokeObjectURL(blobUrl);
-      });
-    });
-    faviconObserver.observe(document.head, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ["href"],
-    });
-
     setStatus("loading");
     const startedAt = performance.now();
 
@@ -129,7 +103,6 @@ export function usePinballInstance(
     })();
 
     return () => {
-      faviconObserver.disconnect();
       disposedRef.current = true;
       const instance = instanceRef.current;
       instanceRef.current = null;

package.json

@@ -12,7 +12,7 @@
     "lint": "eslint"
   },
   "dependencies": {
-    "@valknar/vpinball-wasm": "0.3.3",
+    "@valknar/vpinball-wasm": "0.3.4",
     "next": "16.3.2",
     "react": "19.2.8",
     "react-dom": "19.2.8"

pnpm-lock.yaml

@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@valknar/vpinball-wasm':
-        specifier: 0.3.3
-        version: 0.3.3
+        specifier: 0.3.4
+        version: 0.3.4
       next:
         specifier: 16.3.2
         version: 16.3.2(@babel/core@7.29.7(supports-color@7.2.0))(@types/node@20.19.43)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -754,8 +754,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@valknar/vpinball-wasm@0.3.3':
-    resolution: {integrity: sha512-It2VO8FrmBa7u+aom4m+JCWaVv6ZOhRn0x8BqqrFbGo2ptTb64G8SgqRXuGU8GldhIvgl3/ug+PsSg3EhETZpg==, tarball: https://dev.pivoine.art/api/packages/valknar/npm/%40valknar%2Fvpinball-wasm/-/0.3.3/vpinball-wasm-0.3.3.tgz}
+  '@valknar/vpinball-wasm@0.3.4':
+    resolution: {integrity: sha512-ULJ8jF3Q8sxmkkSdC70SSKzkvaNHORPZEFuJzQbmfH9aeqh4kYmqj59KX7bNywmAxLz4yLtr8r4i/oWEo8bbSw==, tarball: https://dev.pivoine.art/api/packages/valknar/npm/%40valknar%2Fvpinball-wasm/-/0.3.4/vpinball-wasm-0.3.4.tgz}
 
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@@ -2645,7 +2645,7 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.12.2':
     optional: true
 
-  '@valknar/vpinball-wasm@0.3.3': {}
+  '@valknar/vpinball-wasm@0.3.4': {}
 
   acorn-jsx@5.3.2(acorn@8.18.0):
     dependencies:

pnpm-workspace.yaml

@@ -2,5 +2,5 @@ allowBuilds:
   sharp: false
   unrs-resolver: false
 minimumReleaseAgeExclude:
-  - '@valknar/vpinball-wasm@0.2.0 || 0.3.1 || 0.3.2 || 0.3.3'
+  - '@valknar/vpinball-wasm@0.2.0 || 0.3.1 || 0.3.2 || 0.3.3 || 0.3.4'
 updateNotifier: false

public/sw.js

@@ -1,9 +1,16 @@
-// Bump this on every release that changes the app shell or the vendored
-// engine build — it's the only thing that invalidates old caches, since
+// Bump manually (via `pnpm sw:bump`) whenever SHELL_ASSETS or the shell's
+// caching behavior changes — nothing else invalidates the shell cache, since
 // none of the cached URLs below are content-hashed by us.
-const CACHE_VERSION = "v2";
-const SHELL_CACHE = `shell-${CACHE_VERSION}`;
-const ENGINE_CACHE = `engine-${CACHE_VERSION}`;
+const SHELL_VERSION = "v2";
+// Written automatically by scripts/copy-engine-assets.mjs from the installed
+// @valknar/vpinball-wasm version — do not edit by hand. Ties the engine
+// cache key to the actual engine build, so a version bump always busts
+// stale caches instead of relying on a human to remember a separate step
+// (which is exactly how returning visitors ended up on a stale, and
+// possibly internally inconsistent, engine bundle before this existed).
+const ENGINE_VERSION = "0.3.4";
+const SHELL_CACHE = `shell-${SHELL_VERSION}`;
+const ENGINE_CACHE = `engine-${ENGINE_VERSION}`;
 
 const SHELL_ASSETS = [
   "/",

scripts/bump-sw-version.mjs

@@ -1,7 +1,8 @@
 #!/usr/bin/env node
-// Bumps public/sw.js's CACHE_VERSION so a deploy invalidates old caches —
-// run this before cutting a release that changes the app shell or updates
-// the vendored vpinball-wasm engine build.
+// Bumps public/sw.js's SHELL_VERSION so a deploy invalidates old shell
+// caches — run this before cutting a release that changes SHELL_ASSETS or
+// the shell's caching behavior. (The engine cache busts itself automatically
+// from the installed vpinball-wasm version — see copy-engine-assets.mjs.)
 import { readFile, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
@@ -10,12 +11,12 @@ const rootDir = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
 const swPath = path.join(rootDir, "public", "sw.js");
 
 const contents = await readFile(swPath, "utf8");
-const match = contents.match(/CACHE_VERSION = "v(\d+)"/);
+const match = contents.match(/SHELL_VERSION = "v(\d+)"/);
 if (!match) {
-  console.error(`Couldn't find CACHE_VERSION in ${swPath}`);
+  console.error(`Couldn't find SHELL_VERSION in ${swPath}`);
   process.exit(1);
 }
 const next = Number(match[1]) + 1;
-const updated = contents.replace(/CACHE_VERSION = "v\d+"/, `CACHE_VERSION = "v${next}"`);
+const updated = contents.replace(/SHELL_VERSION = "v\d+"/, `SHELL_VERSION = "v${next}"`);
 await writeFile(swPath, updated);
-console.log(`Bumped service worker CACHE_VERSION to v${next}`);
+console.log(`Bumped service worker SHELL_VERSION to v${next}`);

scripts/copy-engine-assets.mjs

@@ -3,13 +3,14 @@
 // so it's served as plain static files (see lib/pinball/usePinballInstance.ts for why:
 // the package's own loadPinball() does a dynamic import() of its glue script that must
 // never pass through webpack's module graph).
-import { cp, mkdir, rm } from "node:fs/promises";
+import { cp, mkdir, readFile, rm, writeFile } from "node:fs/promises";
 import { existsSync } from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
 const rootDir = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
-const pkgDistDir = path.join(rootDir, "node_modules", "@valknar", "vpinball-wasm", "dist");
+const pkgDir = path.join(rootDir, "node_modules", "@valknar", "vpinball-wasm");
+const pkgDistDir = path.join(pkgDir, "dist");
 const targetDir = path.join(rootDir, "public", "vendor", "vpinball-wasm");
 
 if (!existsSync(pkgDistDir)) {
@@ -24,3 +25,16 @@ await mkdir(targetDir, { recursive: true });
 await cp(pkgDistDir, targetDir, { recursive: true });
 
 console.log(`Copied vpinball-wasm engine assets to ${path.relative(rootDir, targetDir)}/`);
+
+// Keep the service worker's engine cache key in lockstep with the installed
+// engine version, so a version bump always busts stale caches for returning
+// visitors — see sw.js's ENGINE_VERSION comment for why this must not be a
+// manual step.
+const { version: engineVersion } = JSON.parse(await readFile(path.join(pkgDir, "package.json"), "utf8"));
+const swPath = path.join(rootDir, "public", "sw.js");
+const swContents = await readFile(swPath, "utf8");
+const updatedSw = swContents.replace(/ENGINE_VERSION = "[^"]*"/, `ENGINE_VERSION = "${engineVersion}"`);
+if (updatedSw !== swContents) {
+  await writeFile(swPath, updatedSw);
+  console.log(`Set sw.js ENGINE_VERSION to ${engineVersion}`);
+}