@swiftbrowser/web 0.1.0

package/node/dist/src/devEvents.js

@@ -0,0 +1,9 @@
+/**
+ * Custom Vite websocket events exchanged between the dev-server plugin
+ * (plugins/swift-wasm.ts) and the page (src/main.ts) for hot reload.
+ *
+ * This file is imported by both sides, so it must stay free of DOM and Node
+ * types.
+ */
+import 'vite/types/customEvent.d.ts';
+//# sourceMappingURL=devEvents.js.map

package/node/dist/src/devEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devEvents.js","sourceRoot":"","sources":["../../../src/devEvents.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,6BAA6B,CAAC"}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@swiftbrowser/web",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "SwiftBrowser web renderer and dev server: applies render ops from a Swift/Wasm app to the DOM inside an iPhone frame.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dabbott/SwiftBrowser.git",
+    "directory": "Web"
+  },
+  "main": "./node/dist/node/index.js",
+  "types": "./node/dist/node/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./node/dist/node/index.d.ts",
+      "default": "./node/dist/node/index.js"
+    }
+  },
+  "files": [
+    "node/dist",
+    "!node/dist/**/__tests__",
+    "plugins",
+    "!plugins/__tests__",
+    "src",
+    "!src/**/__tests__",
+    "app",
+    "index.html",
+    "public/_headers",
+    "public/apple-touch-icon.png",
+    "public/icon.svg",
+    "public/manifest.webmanifest",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit -p tsconfig.json && vite build && npm run build:node",
+    "build:node": "tsc -p tsconfig.node-build.json",
+    "preview": "vite preview",
+    "test:e2e": "playwright test",
+    "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p e2e/tsconfig.json && tsc --noEmit -p tsconfig.node.json && tsc --noEmit -p tsconfig.node-build.json",
+    "test:unit": "vitest run"
+  },
+  "dependencies": {
+    "@bjorn3/browser_wasi_shim": "^0.4.2",
+    "lucide": "^1.50.0",
+    "qrcode": "^1.5.4",
+    "vite": "^7.1.7"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.56.0",
+    "@types/node": "^26.6.4",
+    "@types/qrcode": "^1.5.6",
+    "typescript": "^5.9.2",
+    "vitest": "^5.0.3"
+  }
+}

package/plugins/app-manifests.ts

@@ -0,0 +1,192 @@
+/**
+ * One web app manifest per registered app, served at
+ * `/manifests/<name>.webmanifest` (dev server and `vite build`), plus the
+ * app's own icon at `/manifests/<name>-icon.png` when its spec has one.
+ *
+ * "Add to Home Screen" in Safari takes the start URL from the page's manifest,
+ * not from the page's own URL. With the single `/manifest.webmanifest`
+ * (`start_url: /app/`) every home-screen icon therefore launched the default
+ * app, whichever one was open when it was added. `app/index.html` points
+ * `<link rel="manifest">` at the manifest of the app named by `?app=`, so each
+ * icon reopens its own app and is labelled with the app's display name.
+ *
+ * Safari takes the home-screen image from `<link rel="apple-touch-icon">`
+ * rather than from the manifest, so for apps with an icon the plugin also
+ * injects `window.__SB_APP_ICONS__` (name -> icon URL) into the app page; the
+ * inline script in app/index.html repoints that link.
+ */
+
+import { existsSync, readFileSync } from 'node:fs';
+import type { Plugin } from 'vite';
+import { APP_NAME, displayNameOf, type AppSpec } from '../node/apps.js';
+import { readImageSize } from './asset-catalogs.js';
+
+export const MANIFEST_DIR = 'manifests';
+
+/** The fields of an {@link AppSpec} a manifest is made from. */
+export type ManifestSpec = Pick<AppSpec, 'name' | 'displayName' | 'description' | 'icon'>;
+
+export interface AppManifest {
+  id: string;
+  name: string;
+  short_name: string;
+  description: string;
+  start_url: string;
+  scope: string;
+  display: 'standalone';
+  orientation: 'portrait';
+  background_color: string;
+  icons: { src: string; sizes: string; type: string }[];
+}
+
+/** URL path of an app's manifest, as the app page links it. */
+export function manifestPath(app: string): string {
+  return `/${MANIFEST_DIR}/${app}.webmanifest`;
+}
+
+/** URL path of an app's own icon (only served for specs with `icon`). */
+export function manifestIconPath(app: string): string {
+  return `/${MANIFEST_DIR}/${app}-icon.png`;
+}
+
+/** The app page URL that runs `app` (matches `appPath` in src/landing.ts). */
+export function appStartUrl(app: string): string {
+  return `/app/?app=${encodeURIComponent(app)}`;
+}
+
+/** Default description, for a spec without one. */
+export function defaultDescription(spec: ManifestSpec): string {
+  return `The ${displayNameOf(spec)} app, compiled to WebAssembly and rendered in the browser.`;
+}
+
+/** `WxH` of a PNG on disk, or `any` when it cannot be read. */
+function iconSizes(file: string): string {
+  try {
+    const size = readImageSize(readFileSync(file), 'png');
+    return size ? `${size.width}x${size.height}` : 'any';
+  } catch {
+    return 'any';
+  }
+}
+
+/**
+ * The manifest for one app. No `theme_color`: the status bar is translucent
+ * and the page draws its own background under it, and the light/dark
+ * `theme-color` metas in app/index.html cover the browser UI.
+ */
+export function appManifest(spec: ManifestSpec | string): AppManifest {
+  const app: ManifestSpec = typeof spec === 'string' ? { name: spec } : spec;
+  if (!APP_NAME.test(app.name)) throw new Error(`Invalid app name: ${JSON.stringify(app.name)}`);
+  const start = appStartUrl(app.name);
+  const displayName = displayNameOf(app);
+  return {
+    id: start,
+    name: displayName,
+    short_name: displayName,
+    description: app.description ?? defaultDescription(app),
+    start_url: start,
+    scope: '/app/',
+    display: 'standalone',
+    orientation: 'portrait',
+    background_color: '#000000',
+    icons: app.icon
+      ? [{ src: manifestIconPath(app.name), sizes: iconSizes(app.icon), type: 'image/png' }]
+      : [
+          { src: '/icon.svg', sizes: 'any', type: 'image/svg+xml' },
+          { src: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
+        ],
+  };
+}
+
+export function appManifestJson(spec: ManifestSpec | string): string {
+  return JSON.stringify(appManifest(spec), null, 2) + '\n';
+}
+
+/** The app named by a manifest request URL, or null for any other URL. */
+export function manifestRequestApp(url: string): string | null {
+  const match = new RegExp(`^/${MANIFEST_DIR}/([A-Za-z0-9_-]+)\\.webmanifest(?:\\?|$)`).exec(url);
+  return match?.[1] ?? null;
+}
+
+/** The app named by an icon request URL (`/manifests/<name>-icon.png`), or null. */
+export function iconRequestApp(url: string): string | null {
+  const match = new RegExp(`^/${MANIFEST_DIR}/([A-Za-z0-9_-]+)-icon\\.png(?:\\?|$)`).exec(url);
+  return match?.[1] ?? null;
+}
+
+/** `name -> icon URL` for the specs that bring their own icon (what the app page reads). */
+export function appIconUrls(specs: readonly ManifestSpec[]): Record<string, string> {
+  const icons: Record<string, string> = {};
+  for (const spec of specs) if (spec.icon) icons[spec.name] = manifestIconPath(spec.name);
+  return icons;
+}
+
+export function appManifests(specs: readonly ManifestSpec[]): Plugin {
+  const byName = new Map(specs.map((spec) => [spec.name, spec]));
+  const icons = appIconUrls(specs);
+  const isAppPage = (pathname: string): boolean => /(^|\/)app\/(index\.html)?$/.test(pathname.split('?')[0] ?? '');
+
+  return {
+    name: 'swiftbrowser:app-manifests',
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        const url = req.url ?? '';
+        const app = manifestRequestApp(url);
+        if (app !== null) {
+          const spec = byName.get(app);
+          if (!spec) {
+            res.statusCode = 404;
+            res.end();
+            return;
+          }
+          res.setHeader('Content-Type', 'application/manifest+json');
+          res.setHeader('Cache-Control', 'no-cache');
+          res.end(appManifestJson(spec));
+          return;
+        }
+        const iconApp = iconRequestApp(url);
+        if (iconApp === null) return next();
+        const icon = byName.get(iconApp)?.icon;
+        if (!icon || !existsSync(icon)) {
+          res.statusCode = 404;
+          res.end();
+          return;
+        }
+        res.setHeader('Content-Type', 'image/png');
+        res.setHeader('Cache-Control', 'no-cache');
+        res.end(readFileSync(icon));
+      });
+    },
+    transformIndexHtml(_html, ctx) {
+      // Only the app page needs the icon map, and only when some app has one.
+      if (Object.keys(icons).length === 0 || !isAppPage(ctx.path)) return;
+      return [
+        {
+          tag: 'script',
+          injectTo: 'head-prepend',
+          children: `window.__SB_APP_ICONS__ = ${JSON.stringify(icons)};`,
+        },
+      ];
+    },
+    generateBundle() {
+      for (const spec of specs) {
+        this.emitFile({
+          type: 'asset',
+          fileName: `${MANIFEST_DIR}/${spec.name}.webmanifest`,
+          source: appManifestJson(spec),
+        });
+        if (spec.icon) {
+          if (!existsSync(spec.icon)) {
+            this.warn(`${spec.name}: icon ${spec.icon} does not exist, skipped`);
+            continue;
+          }
+          this.emitFile({
+            type: 'asset',
+            fileName: `${MANIFEST_DIR}/${spec.name}-icon.png`,
+            source: readFileSync(spec.icon),
+          });
+        }
+      }
+    },
+  };
+}