@pablozaiden/webapp 0.5.4 → 0.5.6

package/docs/server.md

@@ -129,7 +129,7 @@ For a functional PWA:
 | --- | --- | --- |
 | `web.entry` | `./web/main.tsx` | The app frontend entrypoint lives somewhere else, such as `./frontend.tsx` |
 | `web.shortName` | `appName` | The installed app label should be shorter than the full name |
-| `web.themeColor` | `#111827` | Browser chrome/install metadata should match product branding |
+| `web.themeColor` | Not emitted unless set | Browser chrome/install metadata should match product branding; the generated default icon still uses `#111827` when unset |
 | `web.backgroundColor` | `#ffffff` | The manifest background should match the app splash/background |
 | `web.icons.favicon` | Generated initials SVG | Browser tabs should use product artwork instead of initials |
 | `web.icons.appleTouch` | `favicon` or generated initials SVG | iOS home-screen/Dock should use product artwork |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pablozaiden/webapp",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "description": "Opinionated Bun + React webapp framework for single-server apps",
   "license": "MIT",
   "type": "module",
@@ -61,6 +61,6 @@
     "playwright": "1.61.0",
     "react": "19.2.7",
     "react-dom": "19.2.7",
-    "typescript": "6.0.3"
+    "typescript": "7.0.2"
   }
 }

package/src/server/auth/device-auth.ts

@@ -208,6 +208,35 @@ function createRefreshRecord(userId: string, clientId: string, scope: string, fa
   };
 }
 
+function revokeExistingClientSessions(store: WebAppStore, userId: string, clientId: string, revokedAt: string): void {
+  for (const session of store.listRefreshSessions(userId)) {
+    if (session.clientId === clientId && !session.revokedAt && !isExpired(session.expiresAt)) {
+      store.revokeRefreshSession(session.id, revokedAt, userId);
+    }
+  }
+}
+
+function activeRefreshSessions(store: WebAppStore, userId: string): RefreshSessionRecord[] {
+  return store.listRefreshSessions(userId)
+    .filter((session) => !session.revokedAt && !isExpired(session.expiresAt))
+    .sort((left, right) => Date.parse(right.createdAt) - Date.parse(left.createdAt));
+}
+
+function uniqueActiveClientSessions(store: WebAppStore, userId: string): RefreshSessionRecord[] {
+  const seenClientIds = new Set<string>();
+  const sessions: RefreshSessionRecord[] = [];
+  const duplicateRevokedAt = nowIso();
+  for (const session of activeRefreshSessions(store, userId)) {
+    if (seenClientIds.has(session.clientId)) {
+      store.revokeRefreshSession(session.id, duplicateRevokedAt, userId);
+    } else {
+      seenClientIds.add(session.clientId);
+      sessions.push(session);
+    }
+  }
+  return sessions;
+}
+
 export async function exchangeDeviceCode(store: WebAppStore, config: RuntimeConfig, deviceCode: string, clientId?: string): Promise<TokenResponse> {
   store.deleteExpiredDeviceAuthRequests(nowIso());
   const record = store.getDeviceAuthByDeviceCodeHash(sha256(deviceCode));
@@ -237,6 +266,7 @@ export async function exchangeDeviceCode(store: WebAppStore, config: RuntimeConf
     throw new AuthError("invalid_grant", "Approving user no longer exists", 400);
   }
   const user = toCurrentUser(userRecord);
+  revokeExistingClientSessions(store, user.id, record.clientId, nowIso());
   const refresh = createRefreshRecord(user.id, record.clientId, record.scope);
   store.saveRefreshSession(refresh.record);
   const access = await issueAccessToken(store, config, {
@@ -305,8 +335,7 @@ export async function verifyAccessToken(store: WebAppStore, config: RuntimeConfi
 
 export function listAuthSessions(store: WebAppStore, userId: string): AuthSessionSummary[] {
   store.deleteExpiredRefreshSessions?.(nowIso());
-  return store.listRefreshSessions(userId)
-    .filter((session) => !session.revokedAt && !isExpired(session.expiresAt))
+  return uniqueActiveClientSessions(store, userId)
     .map((session) => ({
       id: session.id,
       clientId: session.clientId,

package/src/server/create-web-app-server.ts

@@ -413,13 +413,15 @@ function contentTypeForIcon(path: string, explicit?: string): string {
   return "application/octet-stream";
 }
 
-function themeBootScript(themeColor: string): string {
-  const darkThemeColor = JSON.stringify(themeColor);
-  const lightThemeColor = JSON.stringify(DEFAULT_BACKGROUND_COLOR);
+function themeBootScript(themeColor: string | undefined): string {
+  const themeColorUpdate = themeColor
+    ? `
+  const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+  if (metaThemeColor instanceof HTMLMetaElement) metaThemeColor.content = resolved === "dark" ? ${JSON.stringify(themeColor)} : ${JSON.stringify(DEFAULT_BACKGROUND_COLOR)};`
+    : "";
   return `(() => {
   const key = "webapp.theme";
   const root = document.documentElement;
-  const metaThemeColor = document.querySelector('meta[name="theme-color"]');
   const stored = window.localStorage.getItem(key);
   const preference = stored === "light" || stored === "dark" || stored === "system" ? stored : "system";
   const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -428,7 +430,7 @@ function themeBootScript(themeColor: string): string {
   root.style.colorScheme = resolved;
   root.dataset.theme = preference;
   root.dataset.resolvedTheme = resolved;
-  if (metaThemeColor instanceof HTMLMetaElement) metaThemeColor.content = resolved === "dark" ? ${darkThemeColor} : ${lightThemeColor};
+${themeColorUpdate}
 })();`;
 }
 
@@ -440,7 +442,7 @@ function pwaConfig(web: WebAppDocumentConfig): WebAppPwaConfig {
   return typeof web.pwa === "object" ? web.pwa : {};
 }
 
-function generatedManifest(config: RuntimeConfig, web: WebAppDocumentConfig, themeColor: string, backgroundColor: string, icons: WebAppIconConfig[]): string {
+function generatedManifest(config: RuntimeConfig, web: WebAppDocumentConfig, backgroundColor: string, icons: WebAppIconConfig[]): string {
   const pwa = pwaConfig(web);
   return JSON.stringify({
     name: config.appName,
@@ -449,7 +451,7 @@ function generatedManifest(config: RuntimeConfig, web: WebAppDocumentConfig, the
     scope: pwa.scope ?? "./",
     display: pwa.display ?? "standalone",
     background_color: backgroundColor,
-    theme_color: themeColor,
+    ...(web.themeColor ? { theme_color: web.themeColor } : {}),
     icons,
   }, null, 2);
 }
@@ -471,7 +473,7 @@ function generatedHtml(
   web: WebAppDocumentConfig,
   relativeEntry: string | undefined,
   relativePrelude: string | undefined,
-  themeColor: string,
+  themeColor: string | undefined,
   faviconPath: string,
   appleTouchPath: string,
   compiledAssets?: CompiledClientAsset[],
@@ -480,6 +482,7 @@ function generatedHtml(
   const shortName = escapeAttribute(web.shortName ?? config.appName);
   const htmlFaviconPath = faviconPath.replace(/^\//, "./");
   const htmlAppleTouchPath = appleTouchPath.replace(/^\//, "./");
+  const themeMetaTag = themeColor ? `    <meta name="theme-color" content="${escapeAttribute(themeColor)}" />\n` : "";
   const styleTags = compiledAssets?.filter((asset) => asset.role === "style").map((asset) => `    <link rel="stylesheet" href="${escapeAttribute(asset.path)}" />`).join("\n") ?? "";
   const scriptTags = compiledAssets
     ? compiledAssets
@@ -508,7 +511,7 @@ function generatedHtml(
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <meta name="theme-color" content="${escapeAttribute(themeColor)}" />
+${themeMetaTag}\
 ${manifestTags}    <title>${title}</title>
     <script>${themeBootScript(themeColor)}</script>
 ${styleTags}
@@ -525,13 +528,13 @@ async function createWebDocument(config: RuntimeConfig, webInput: WebAppDocument
   const web = webInput ?? {};
   const compiled = compiledClient();
   const entryFile = compiled ? undefined : resolveWebEntry(web.entry);
-  const themeColor = web.themeColor ?? DEFAULT_THEME_COLOR;
+  const iconThemeColor = web.themeColor ?? DEFAULT_THEME_COLOR;
   const backgroundColor = web.backgroundColor ?? DEFAULT_BACKGROUND_COLOR;
   const packageRoot = compiled?.packageRoot ?? findPackageRoot(dirname(resolve(Bun.main || process.argv[1] || (entryFile ?? "."))));
   const publicEntry = entryFile ? webEntryPublicPath(entryFile, packageRoot) : "";
   const cacheDir = createDocumentCacheDir(config.envPrefix);
   const htmlPath = resolve(cacheDir, `${config.envPrefix.toLowerCase()}-index.html`);
-  const icon = generatedIcon(config.appName, themeColor, backgroundColor);
+  const icon = generatedIcon(config.appName, iconThemeColor, backgroundColor);
   const favicon = iconConfig(web.icons?.favicon);
   const appleTouch = iconConfig(web.icons?.appleTouch) ?? favicon;
   const manifestIconConfigs = web.icons?.manifest?.length ? web.icons.manifest : undefined;
@@ -547,7 +550,7 @@ async function createWebDocument(config: RuntimeConfig, webInput: WebAppDocument
         };
       })
     : [{ src: "./webapp-icon.svg", sizes: "any", type: "image/svg+xml", purpose: "any maskable" }];
-  const manifest = pwaEnabled(web) ? generatedManifest(config, web, themeColor, backgroundColor, manifestIcons) : "";
+  const manifest = pwaEnabled(web) ? generatedManifest(config, web, backgroundColor, manifestIcons) : "";
   writeFileSync(resolve(cacheDir, "webapp-icon.svg"), icon);
   if (manifest) {
     writeFileSync(resolve(cacheDir, "site.webmanifest"), manifest);
@@ -578,7 +581,7 @@ configureWebAppRenderer(createRoot);
     }
   }
   const compiledAssets = compiled?.assets;
-  writeFileSync(htmlPath, generatedHtml(config, web, relativeEntry, relativePrelude, themeColor, faviconPath, appleTouchPath, compiledAssets));
+  writeFileSync(htmlPath, generatedHtml(config, web, relativeEntry, relativePrelude, web.themeColor, faviconPath, appleTouchPath, compiledAssets));
   const bundle = compiledAssets ? undefined : (await import(`${pathToFileURL(htmlPath).href}?v=${Date.now()}-${Math.random()}`)).default;
   if (!compiledAssets && !isHtmlBundleIndex(bundle)) {
     throw new Error("Generated web document did not produce a Bun HTMLBundle");