diff --git a/build.ts b/build.ts index 15778df..10a2dc8 100644 --- a/build.ts +++ b/build.ts @@ -1,24 +1,108 @@ import tailwind from "bun-plugin-tailwind"; import { rm } from "node:fs/promises"; import path from "node:path"; +import { normalizeBase } from "./src/ui/basePath.ts"; +const basePath = normalizeBase(process.env.BUN_PUBLIC_BASE_PATH); const outdir = path.join(process.cwd(), "dist"); +const version = process.env.BUILD_VERSION ?? String(Date.now()); + await rm(outdir, { recursive: true, force: true }); -const entrypoints = [...new Bun.Glob("src/**/*.html").scanSync()]; - const result = await Bun.build({ - entrypoints, + entrypoints: [...new Bun.Glob("src/**/*.html").scanSync()], outdir, plugins: [tailwind], minify: true, target: "browser", sourcemap: "linked", + // publicPath prefixes asset and chunk imports, which is what makes a subpath + // deploy work without hardcoding it anywhere. + publicPath: basePath, + naming: { + // NOTE: the brief specified "[dir]/[name].[ext]" here. With a single HTML + // entrypoint at src/index.html, [dir] resolves to "src", which puts the + // built file at dist/src/index.html instead of dist/index.html. That + // breaks the dist/404.html copy below (it reads dist/index.html) and the + // Task 25 static server (which must find index.html at the dist root). + // Verified by building with both values and inspecting `ls -R dist`. + entry: "[name].[ext]", + chunk: "[name]-[hash].[ext]", + asset: "[name]-[hash].[ext]", + }, + // index.html references manifest.webmanifest and icon.svg via plain + // hrefs. Bun's HTML bundler otherwise treats every as a module + // reference to resolve, bundle, and (for assets) hash — which both fails + // outright for manifest.webmanifest (it doesn't exist as a source file; it + // is generated below, after this build step) and would hash icon.svg, + // breaking the fixed "icon.svg" paths that manifest.webmanifest and the + // service worker precache list depend on. Marking these globs external + // leaves both hrefs untouched in the output HTML, so they resolve as plain + // relative URLs against the page, exactly as the spec intends. + external: ["*.webmanifest", "*.svg"], define: { "process.env.NODE_ENV": JSON.stringify("production"), + "process.env.BUN_PUBLIC_BASE_PATH": JSON.stringify(basePath), }, }); +if (!result.success) { + for (const log of result.logs) console.error(log); + throw new Error("Build failed"); +} + +// The precache list comes from the build's own outputs, so hashed filenames can +// never drift out of sync with the service worker. +const precache = result.outputs + .filter((output) => !output.path.endsWith(".map")) + .map((output) => basePath + path.relative(outdir, output.path).replaceAll(path.sep, "/")); + +const swResult = await Bun.build({ + entrypoints: ["src/sw.ts"], + outdir, + target: "browser", + minify: true, + naming: "sw.js", // must be a stable URL, so no hash + define: { + "process.env.PRECACHE_MANIFEST": JSON.stringify(JSON.stringify(precache)), + "process.env.SW_VERSION": JSON.stringify(version), + "process.env.BUN_PUBLIC_BASE_PATH": JSON.stringify(basePath), + }, +}); + +if (!swResult.success) { + for (const log of swResult.logs) console.error(log); + throw new Error("Service worker build failed"); +} + +export function buildManifest(base: string): string { + return JSON.stringify( + { + name: "Budget 2.0", + short_name: "Budget", + start_url: base, + scope: base, + display: "standalone", + background_color: "#0f172a", + theme_color: "#0f172a", + icons: [{ src: `${base}icon.svg`, sizes: "any", type: "image/svg+xml" }], + }, + null, + 2, + ); +} + +await Bun.write(path.join(outdir, "manifest.webmanifest"), buildManifest(basePath)); +await Bun.write(path.join(outdir, "icon.svg"), Bun.file("src/icon.svg")); + +// GitHub Pages has no rewrite rules, so a deep link on a cold load lands on +// 404.html. Serving the shell from there makes client-side routing work. +const indexHtml = await Bun.file(path.join(outdir, "index.html")).text(); +await Bun.write(path.join(outdir, "404.html"), indexHtml); + +console.log(`Built for base path ${basePath}`); for (const output of result.outputs) { - console.log(` ${path.relative(process.cwd(), output.path)} ${(output.size / 1024).toFixed(1)} KB`); + console.log( + ` ${path.relative(process.cwd(), output.path)} ${(output.size / 1024).toFixed(1)} KB`, + ); } diff --git a/bun.lock b/bun.lock index dedbb77..7b1ec1b 100644 --- a/bun.lock +++ b/bun.lock @@ -21,6 +21,7 @@ "tw-animate-css": "^1.4.0", }, "devDependencies": { + "@happy-dom/global-registrator": "^20.12.0", "@types/bun": "latest", "@types/react": "^19", "@types/react-dom": "^19", @@ -37,6 +38,8 @@ "@floating-ui/utils": ["@floating-ui/utils@0.2.12", "", {}, "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww=="], + "@happy-dom/global-registrator": ["@happy-dom/global-registrator@20.12.0", "", { "dependencies": { "@types/node": ">=20.0.0", "happy-dom": "^20.12.0" } }, "sha512-BUE55Rew3oMwBzwCwmUnV+Oxk51V3xolM39Ts6kGiBXNELjujiESwk9qc99JRr6cVrj3OTd9MJ5zQ2fpn+jy6g=="], + "@oven/bun-darwin-aarch64": ["@oven/bun-darwin-aarch64@1.4.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-GCpf8QuFLsyioVawP5HrMxA1ZRBlu6Hq9RNnSc3UTUWAzIxBso9trjoZczw1HdgpqSssFkszfIV2zmOzFTjhkw=="], "@oven/bun-darwin-x64": ["@oven/bun-darwin-x64@1.4.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-cIrhwOr0SPEraewznhC+c/k6TG8bwFn5uZ4EJuXwjiKJLcAF36q7/bGjWkeXSe48JwMcPRUR054JXF7+cRwSSA=="], @@ -189,8 +192,14 @@ "@types/react-dom": ["@types/react-dom@19.2.5", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-fMPwH9v7r/pp43yUd2/Mbiex5KouJwwR3dzHkhLREUC6764VyDsqxhAxv6OFEYR1RhjOyD1naqba8ECDBe7ZQg=="], + "@types/whatwg-mimetype": ["@types/whatwg-mimetype@3.0.2", "", {}, "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA=="], + + "@types/ws": ["@types/ws@8.18.1", "", { "dependencies": { "@types/node": "*" } }, "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg=="], + "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="], + "buffer-image-size": ["buffer-image-size@0.6.4", "", { "dependencies": { "@types/node": "*" } }, "sha512-nEh+kZOPY1w+gcCMobZ6ETUp9WfibndnosbpwB1iJk/8Gt5ZF2bhS6+B6bPYz424KtwsR6Rflc3tCz1/ghX2dQ=="], + "bun": ["bun@1.4.0", "", { "optionalDependencies": { "@oven/bun-darwin-aarch64": "1.4.0", "@oven/bun-darwin-x64": "1.4.0", "@oven/bun-freebsd-aarch64": "1.4.0", "@oven/bun-freebsd-x64": "1.4.0", "@oven/bun-linux-aarch64": "1.4.0", "@oven/bun-linux-aarch64-android": "1.4.0", "@oven/bun-linux-aarch64-musl": "1.4.0", "@oven/bun-linux-x64": "1.4.0", "@oven/bun-linux-x64-android": "1.4.0", "@oven/bun-linux-x64-musl": "1.4.0", "@oven/bun-windows-aarch64": "1.4.0", "@oven/bun-windows-x64": "1.4.0" }, "os": [ "!aix", "!sunos", "!openbsd", ], "cpu": [ "x64", "arm64", ], "bin": { "bun": "bin/bun.exe", "bunx": "bin/bunx.exe" } }, "sha512-iRiFkc2W7UVpCyZXO9tod45TP9QCyN19fWqbpeN/jaM/K7uzeHYx/OSPsahMJazGKBgPsnxRt+4Jc43d8BcHZw=="], "bun-plugin-tailwind": ["bun-plugin-tailwind@0.1.2", "", { "peerDependencies": { "bun": ">=1.0.0" } }, "sha512-41jNC1tZRSK3s1o7pTNrLuQG8kL/0vR/JgiTmZAJ1eHwe0w5j6HFPKeqEk0WAD13jfrUC7+ULuewFBBCoADPpg=="], @@ -207,10 +216,14 @@ "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="], + "entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="], + "fflate": ["fflate@0.8.3", "", {}, "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA=="], "get-nonce": ["get-nonce@1.0.1", "", {}, "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="], + "happy-dom": ["happy-dom@20.12.0", "", { "dependencies": { "@types/node": ">=20.0.0", "@types/whatwg-mimetype": "^3.0.2", "@types/ws": "^8.18.1", "buffer-image-size": "^0.6.4", "entities": "^7.0.1", "whatwg-mimetype": "^3.0.0", "ws": "^8.21.0" } }, "sha512-7uMYJu2SEwwL8vVcKp0C0lnt6d2LSGGe+T+oY79PiCJNNSgFpbxW8n5KuzpDQvrU4mt+fYiK1+Jy7Z2v39YR6g=="], + "lucide-react": ["lucide-react@1.39.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-y8nXoEwvqqIsF927NBWXODa4bfMrcUeEb/9sgpwFqg0gUjgn3j5Hznk+v7STmPgZ2iQ11JKlbQGdFRuTOwvYkA=="], "radix-ui": ["radix-ui@1.6.7", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-accessible-icon": "1.1.15", "@radix-ui/react-accordion": "1.2.20", "@radix-ui/react-alert-dialog": "1.1.23", "@radix-ui/react-arrow": "1.1.15", "@radix-ui/react-aspect-ratio": "1.1.15", "@radix-ui/react-avatar": "1.2.6", "@radix-ui/react-checkbox": "1.3.11", "@radix-ui/react-collapsible": "1.1.20", "@radix-ui/react-collection": "1.1.15", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-context-menu": "2.3.7", "@radix-ui/react-dialog": "1.1.23", "@radix-ui/react-direction": "1.1.4", "@radix-ui/react-dismissable-layer": "1.1.19", "@radix-ui/react-dropdown-menu": "2.1.24", "@radix-ui/react-focus-guards": "1.1.6", "@radix-ui/react-focus-scope": "1.1.16", "@radix-ui/react-form": "0.1.16", "@radix-ui/react-hover-card": "1.1.23", "@radix-ui/react-label": "2.1.15", "@radix-ui/react-menu": "2.1.24", "@radix-ui/react-menubar": "1.1.24", "@radix-ui/react-navigation-menu": "1.2.22", "@radix-ui/react-one-time-password-field": "0.1.16", "@radix-ui/react-password-toggle-field": "0.1.11", "@radix-ui/react-popover": "1.1.23", "@radix-ui/react-popper": "1.3.7", "@radix-ui/react-portal": "1.1.17", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-progress": "1.1.16", "@radix-ui/react-radio-group": "1.4.7", "@radix-ui/react-roving-focus": "1.1.19", "@radix-ui/react-scroll-area": "1.2.18", "@radix-ui/react-select": "2.3.7", "@radix-ui/react-separator": "1.1.15", "@radix-ui/react-slider": "1.4.7", "@radix-ui/react-slot": "1.3.3", "@radix-ui/react-switch": "1.3.7", "@radix-ui/react-tabs": "1.1.21", "@radix-ui/react-toast": "1.2.23", "@radix-ui/react-toggle": "1.1.18", "@radix-ui/react-toggle-group": "1.1.19", "@radix-ui/react-toolbar": "1.1.19", "@radix-ui/react-tooltip": "1.2.16", "@radix-ui/react-use-callback-ref": "1.1.4", "@radix-ui/react-use-controllable-state": "1.2.6", "@radix-ui/react-use-effect-event": "0.0.5", "@radix-ui/react-use-escape-keydown": "1.1.5", "@radix-ui/react-use-is-hydrated": "0.1.3", "@radix-ui/react-use-layout-effect": "1.1.4", "@radix-ui/react-use-size": "1.1.4", "@radix-ui/react-visually-hidden": "1.2.11" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-QBdhh1arIEUvPC0dQ5+nwWAxt7+N+oP/9jPwjJkGFoSk/sqxg32gJtSXGtFh8frAIcS6oC9cx2Q+7KYCQLOAeA=="], @@ -242,5 +255,9 @@ "use-callback-ref": ["use-callback-ref@1.3.3", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg=="], "use-sidecar": ["use-sidecar@1.1.3", "", { "dependencies": { "detect-node-es": "^1.1.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ=="], + + "whatwg-mimetype": ["whatwg-mimetype@3.0.0", "", {}, "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q=="], + + "ws": ["ws@8.21.3", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw=="], } } diff --git a/package.json b/package.json index 69d9596..1b956aa 100644 --- a/package.json +++ b/package.json @@ -25,9 +25,10 @@ "tw-animate-css": "^1.4.0" }, "devDependencies": { + "@happy-dom/global-registrator": "^20.12.0", + "@types/bun": "latest", "@types/react": "^19", "@types/react-dom": "^19", - "@types/bun": "latest", "tailwindcss": "^4.1.11" } } diff --git a/src/icon.svg b/src/icon.svg new file mode 100644 index 0000000..abd29e3 --- /dev/null +++ b/src/icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/index.html b/src/index.html index e0fc781..8616dfb 100644 --- a/src/index.html +++ b/src/index.html @@ -4,6 +4,9 @@ Budget 2.0 + + + diff --git a/src/sw.ts b/src/sw.ts new file mode 100644 index 0000000..89bc08c --- /dev/null +++ b/src/sw.ts @@ -0,0 +1,71 @@ +/// +declare const self: ServiceWorkerGlobalScope; + +// Both are replaced at build time by Bun.build's `define`. +const PRECACHE: string[] = JSON.parse(process.env.PRECACHE_MANIFEST ?? "[]"); +const VERSION = process.env.SW_VERSION ?? "dev"; +const BASE = process.env.BUN_PUBLIC_BASE_PATH ?? "/"; + +const CACHE = `budget2-${VERSION}`; +const SHELL = `${BASE}index.html`; + +self.addEventListener("install", (event) => { + event.waitUntil( + caches.open(CACHE).then((cache) => cache.addAll([...PRECACHE, SHELL])), + ); +}); + +self.addEventListener("activate", (event) => { + event.waitUntil( + (async () => { + // Drop caches from previous versions. + for (const key of await caches.keys()) { + if (key !== CACHE) await caches.delete(key); + } + await self.clients.claim(); + })(), + ); +}); + +self.addEventListener("message", (event) => { + // Sent by applyUpdate() when the user accepts a new version. + if ((event.data as { type?: string } | undefined)?.type === "SKIP_WAITING") { + void self.skipWaiting(); + } +}); + +self.addEventListener("fetch", (event) => { + const request = event.request; + if (request.method !== "GET") return; + + const url = new URL(request.url); + if (url.origin !== self.location.origin) return; // never cache the rate API + + // Navigations fall back to the cached shell, which also covers deep links. + if (request.mode === "navigate") { + event.respondWith( + (async () => { + try { + return await fetch(request); + } catch { + return (await caches.match(SHELL)) ?? Response.error(); + } + })(), + ); + return; + } + + // Hashed assets: cache-first, since a changed file gets a new name. + event.respondWith( + (async () => { + const cached = await caches.match(request); + if (cached) return cached; + const response = await fetch(request); + if (response.ok) { + const cache = await caches.open(CACHE); + void cache.put(request, response.clone()); + } + return response; + })(), + ); +}); diff --git a/src/ui/App.tsx b/src/ui/App.tsx index 43afa38..cd9cbbe 100644 --- a/src/ui/App.tsx +++ b/src/ui/App.tsx @@ -7,6 +7,7 @@ import { PostMonthRoute } from "./routes/PostMonthRoute.tsx"; import { PostYearRoute } from "./routes/PostYearRoute.tsx"; import { SummaryRoute } from "./routes/SummaryRoute.tsx"; import { SettingsRoute } from "./routes/SettingsRoute.tsx"; +import { UpdatePrompt } from "./components/UpdatePrompt.tsx"; export function AppRoutes() { const year = currentMonth.slice(0, 4); @@ -37,6 +38,7 @@ export function AppRoutes() { } /> + ); } diff --git a/src/ui/components/UpdatePrompt.tsx b/src/ui/components/UpdatePrompt.tsx new file mode 100644 index 0000000..3447bd6 --- /dev/null +++ b/src/ui/components/UpdatePrompt.tsx @@ -0,0 +1,25 @@ +import { useEffect, useState } from "react"; +import { Button } from "@/components/ui/button"; +import { applyUpdate, registerServiceWorker } from "../registerSw.ts"; + +export function UpdatePrompt() { + const [ready, setReady] = useState(false); + + useEffect(() => { + registerServiceWorker(() => setReady(true)); + }, []); + + if (!ready) return null; + + return ( +
+ A new version is ready. + + +
+ ); +} diff --git a/src/ui/registerSw.test.ts b/src/ui/registerSw.test.ts new file mode 100644 index 0000000..d4c17ea --- /dev/null +++ b/src/ui/registerSw.test.ts @@ -0,0 +1,12 @@ +import { GlobalRegistrator } from "@happy-dom/global-registrator"; +GlobalRegistrator.register(); + +import { test, expect } from "bun:test"; +import { registerServiceWorker } from "./registerSw.ts"; + +test("registration is a no-op when the browser has no service worker support", () => { + // happy-dom's navigator has no serviceWorker, which is the case under test. + // (happy-dom exposes `navigator` as a getter-only global, so there is + // nothing to save/restore here — reassigning it would throw.) + expect(() => registerServiceWorker(() => {})).not.toThrow(); +}); diff --git a/src/ui/registerSw.ts b/src/ui/registerSw.ts new file mode 100644 index 0000000..fb89983 --- /dev/null +++ b/src/ui/registerSw.ts @@ -0,0 +1,39 @@ +import { BASE_PATH, withBase } from "./basePath.ts"; + +let waiting: ServiceWorker | null = null; + +/** + * Registers the worker and calls `onUpdateReady` when a new version is waiting. + * Without an explicit update path, a stale worker can pin the user to an old + * build indefinitely. + */ +export function registerServiceWorker(onUpdateReady: () => void): void { + if (typeof navigator === "undefined" || !("serviceWorker" in navigator)) return; + + void navigator.serviceWorker + .register(withBase("sw.js"), { scope: BASE_PATH }) + .then((registration) => { + if (registration.waiting) { + waiting = registration.waiting; + onUpdateReady(); + } + registration.addEventListener("updatefound", () => { + const installing = registration.installing; + installing?.addEventListener("statechange", () => { + if (installing.state === "installed" && navigator.serviceWorker.controller) { + waiting = installing; + onUpdateReady(); + } + }); + }); + }) + .catch(() => { + // An unavailable worker must never break the app; it just means no offline. + }); +} + +export function applyUpdate(): void { + waiting?.postMessage({ type: "SKIP_WAITING" }); + waiting = null; + window.location.reload(); +}