@swiftbrowser/web 0.1.0 → 0.2.0

package/plugins/pdfImages.ts

@@ -0,0 +1,163 @@
+/**
+ * PDF image sets of an asset catalog (Xcode keeps vector artwork as PDF).
+ * Browsers cannot show a PDF in an `<img>`, so the build renders each one to
+ * a PNG at 3× (the scale of the iPhone the page stands for) with pdf.js and
+ * Node's canvas (`@napi-rs/canvas`, which pdf.js installs where it has a
+ * prebuilt binary); the page shows the PNG. The manifest's size is the PDF
+ * page's in points, read from its MediaBox without rendering.
+ *
+ * Rendered PNGs are kept in the OS temporary directory, keyed by the PDF's
+ * bytes, so a rebuild renders only what changed.
+ */
+
+import { createHash } from 'node:crypto';
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { deflateSync, inflateSync } from 'node:zlib';
+
+/** The scale PDFs are rendered at: points × 3 pixels. */
+export const PDF_RENDER_SCALE = 3;
+
+/** A page box (`/MediaBox [x0 y0 x1 y1]`) in some PDF text. */
+const MEDIA_BOX = /\/MediaBox\s*\[\s*(-?[\d.]+)\s+(-?[\d.]+)\s+(-?[\d.]+)\s+(-?[\d.]+)\s*\]/;
+
+/**
+ * The size in points of a PDF's first page box: its MediaBox, found in the
+ * file as written or, when the page objects are compressed (object
+ * streams), in its Flate streams; null when there is none.
+ */
+export function pdfSize(data: Buffer): { width: number; height: number } | null {
+  if (data.toString('latin1', 0, 5) !== '%PDF-') return null;
+  const text = data.toString('latin1');
+  const fromBox = (match: RegExpExecArray | null) => {
+    if (!match) return null;
+    const [x0, y0, x1, y1] = match.slice(1, 5).map(Number) as [number, number, number, number];
+    const width = Math.abs(x1 - x0);
+    const height = Math.abs(y1 - y0);
+    return width > 0 && height > 0 ? { width, height } : null;
+  };
+  const direct = fromBox(MEDIA_BOX.exec(text));
+  if (direct) return direct;
+  const stream = /stream\r?\n/g;
+  for (let match = stream.exec(text); match; match = stream.exec(text)) {
+    const start = match.index + match[0].length;
+    const end = text.indexOf('endstream', start);
+    if (end < 0) break;
+    try {
+      const size = fromBox(MEDIA_BOX.exec(inflateSync(data.subarray(start, end)).toString('latin1')));
+      if (size) return size;
+    } catch {
+      // Not a Flate stream (an image, say).
+    }
+  }
+  return null;
+}
+
+function cacheDir(): string {
+  const dir = path.join(os.tmpdir(), 'swiftbrowser-pdf-images');
+  mkdirSync(dir, { recursive: true });
+  return dir;
+}
+
+interface PdfJs {
+  getDocument(options: Record<string, unknown>): { promise: Promise<PdfDocument> };
+}
+interface PdfDocument {
+  getPage(index: number): Promise<PdfPage>;
+  canvasFactory: { create(width: number, height: number): { canvas: unknown; context: CanvasContext } };
+  destroy(): Promise<void>;
+}
+interface CanvasContext {
+  getImageData(x: number, y: number, width: number, height: number): { data: Uint8ClampedArray; width: number; height: number };
+}
+interface PdfPage {
+  getViewport(options: { scale: number }): { width: number; height: number };
+  render(options: Record<string, unknown>): { promise: Promise<void> };
+}
+
+let pdfjs: Promise<PdfJs> | null = null;
+
+/** pdf.js for Node (its legacy build), loaded on the first PDF. */
+function loadPdfJs(): Promise<PdfJs> {
+  pdfjs ??= import('pdfjs-dist/legacy/build/pdf.mjs').then((module) => module as unknown as PdfJs);
+  return pdfjs;
+}
+
+/** Renders queued one at a time: pdf.js shares one worker, and memory stays flat. */
+let queue: Promise<unknown> = Promise.resolve();
+
+/** The first page of the PDF at `file` as a PNG at {@link PDF_RENDER_SCALE}× (cached). */
+export function renderPdfImage(file: string): Promise<Buffer> {
+  const data = readFileSync(file);
+  const key = createHash('sha256').update(data).update(`@${PDF_RENDER_SCALE}x/rgba`).digest('hex').slice(0, 32);
+  const cached = path.join(cacheDir(), `${key}.png`);
+  if (existsSync(cached)) return Promise.resolve(readFileSync(cached));
+  const render = queue.then(async () => {
+    const { getDocument } = await loadPdfJs();
+    const doc = await getDocument({ data: new Uint8Array(data), isEvalSupported: false, disableFontFace: true, verbosity: 0 }).promise;
+    try {
+      const page = await doc.getPage(1);
+      const viewport = page.getViewport({ scale: PDF_RENDER_SCALE });
+      const width = Math.ceil(viewport.width);
+      const height = Math.ceil(viewport.height);
+      const { canvas, context } = doc.canvasFactory.create(width, height);
+      await page.render({ canvasContext: context, canvas, viewport, background: 'rgba(0, 0, 0, 0)' }).promise;
+      // Encoded from the pixels: the canvas's own PNG encoder writes
+      // transparent pixels as opaque white.
+      const png = encodePng(width, height, context.getImageData(0, 0, width, height).data);
+      writeFileSync(cached, png);
+      return png;
+    } finally {
+      await doc.destroy();
+    }
+  });
+  queue = render.catch(() => undefined);
+  return render;
+}
+
+const CRC_TABLE = (() => {
+  const table = new Uint32Array(256);
+  for (let n = 0; n < 256; n++) {
+    let c = n;
+    for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+    table[n] = c >>> 0;
+  }
+  return table;
+})();
+
+function crc32(data: Buffer): number {
+  let crc = 0xffffffff;
+  for (const byte of data) crc = CRC_TABLE[(crc ^ byte) & 0xff]! ^ (crc >>> 8);
+  return (crc ^ 0xffffffff) >>> 0;
+}
+
+function chunk(type: string, data: Buffer): Buffer {
+  const head = Buffer.alloc(8);
+  head.writeUInt32BE(data.length, 0);
+  head.write(type, 4, 'latin1');
+  const crc = Buffer.alloc(4);
+  crc.writeUInt32BE(crc32(Buffer.concat([head.subarray(4), data])), 0);
+  return Buffer.concat([head, data, crc]);
+}
+
+/** An 8-bit RGBA PNG of `rgba` (unpremultiplied, row by row). */
+export function encodePng(width: number, height: number, rgba: Uint8ClampedArray): Buffer {
+  const header = Buffer.alloc(13);
+  header.writeUInt32BE(width, 0);
+  header.writeUInt32BE(height, 4);
+  header[8] = 8; // bit depth
+  header[9] = 6; // RGBA
+  const stride = width * 4;
+  const rows = Buffer.alloc((stride + 1) * height);
+  for (let y = 0; y < height; y++) {
+    // Filter type 0 (none) on each row.
+    rows.set(rgba.subarray(y * stride, (y + 1) * stride), y * (stride + 1) + 1);
+  }
+  return Buffer.concat([
+    Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
+    chunk('IHDR', header),
+    chunk('IDAT', deflateSync(rows, { level: 9 })),
+    chunk('IEND', Buffer.alloc(0)),
+  ]);
+}

package/plugins/swift-wasm.ts

@@ -19,15 +19,60 @@
  * `vite build`: copies each spec's `wasm` into the output directory as
  * `<name>.wasm` (building it first when it is missing and the spec can), so
  * nothing has to ride along in `public/`. Files that are there anyway are
- * still copied by Vite as before.
+ * still copied by Vite as before. A module larger than `MAX_FILE_BYTES` (hosts
+ * cap a file's size: 25 MiB on Cloudflare Pages) is written as parts,
+ * `<name>.wasm.0`, `.1`…, with a manifest `<name>.wasm.parts.json`
+ * (`{ size, parts }`); the page joins them (src/wasm.ts).
  */
 
-import { copyFileSync, createReadStream, existsSync, mkdirSync, readdirSync, rmSync, statSync } from 'node:fs';
+import { closeSync, copyFileSync, createReadStream, existsSync, mkdirSync, openSync, readSync, readdirSync, rmSync, statSync, writeFileSync } from 'node:fs';
 import path from 'node:path';
 import type { Plugin, ResolvedConfig, ViteDevServer } from 'vite';
 import type { AppSpec } from '../node/apps.js';
 import type { BuildEndPayload, BuildErrorPayload, BuildStartPayload } from '../src/devEvents.js';
 
+/** The largest file a site holds: under Cloudflare Pages' 25 MiB, with room to spare. */
+export const MAX_FILE_BYTES = 24 * 1024 * 1024;
+
+/** The manifest of a module written as parts (`<name>.wasm.parts.json`). */
+export interface WasmParts {
+  /** The module's size in bytes. */
+  size: number;
+  /** The parts' file names, in order, next to the manifest. */
+  parts: string[];
+}
+
+/**
+ * Writes `source` to `outDir` as `<name>.wasm`, or, when larger than
+ * `maxBytes`, as parts of at most `maxBytes` each plus their manifest.
+ * Returns the files written.
+ */
+export function writeModule(source: string, outDir: string, name: string, maxBytes = MAX_FILE_BYTES): string[] {
+  const dest = path.join(outDir, `${name}.wasm`);
+  const size = statSync(source).size;
+  if (size <= maxBytes) {
+    if (path.resolve(source) !== path.resolve(dest)) copyFileSync(source, dest);
+    return [dest];
+  }
+  rmSync(dest, { force: true });
+  const parts: string[] = [];
+  const fd = openSync(source, 'r');
+  try {
+    const buffer = Buffer.alloc(maxBytes);
+    for (let offset = 0, index = 0; offset < size; offset += maxBytes, index++) {
+      const length = readSync(fd, buffer, 0, Math.min(maxBytes, size - offset), offset);
+      const part = `${name}.wasm.${index}`;
+      writeFileSync(path.join(outDir, part), buffer.subarray(0, length));
+      parts.push(part);
+    }
+  } finally {
+    closeSync(fd);
+  }
+  const manifest: WasmParts = { size, parts };
+  writeFileSync(path.join(outDir, `${name}.wasm.parts.json`), JSON.stringify(manifest) + '\n');
+  return [...parts.map((part) => path.join(outDir, part)), path.join(outDir, `${name}.wasm.parts.json`)];
+}
+
 export interface SwiftWasmOptions {
   /** Debounce window for bursts of file changes, in ms. */
   debounceMs?: number;
@@ -190,14 +235,15 @@ export function swiftWasm(specs: readonly AppSpec[], options: SwiftWasmOptions =
         continue;
       }
       mkdirSync(outDir, { recursive: true });
-      const dest = path.join(outDir, `${spec.name}.wasm`);
-      if (path.resolve(spec.wasm) !== path.resolve(dest)) copyFileSync(spec.wasm, dest);
+      const written = writeModule(spec.wasm, outDir, spec.name);
+      if (written.length > 1) log(`${spec.name}: ${written.length - 1} parts of at most ${MAX_FILE_BYTES} bytes (the host's file size limit)`);
     }
     // Modules of apps outside the registry (the examples' `public/*.wasm`,
     // copied with the public dir) are not part of this site.
-    const known = new Set(specs.map((spec) => `${spec.name}.wasm`));
+    const known = new Set(specs.map((spec) => spec.name));
     for (const entry of readdirSync(outDir)) {
-      if (entry.endsWith('.wasm') && !known.has(entry)) rmSync(path.join(outDir, entry), { force: true });
+      const module = /^([A-Za-z0-9_-]+)\.wasm(?:\.\d+|\.parts\.json)?$/.exec(entry);
+      if (module && !known.has(module[1]!)) rmSync(path.join(outDir, entry), { force: true });
     }
   };
 

package/plugins/symbolTemplates.ts

@@ -0,0 +1,88 @@
+/**
+ * Custom symbols (`.symbolset`) are SF Symbols templates: one SVG sheet
+ * holding notes, guides and the glyph in every weight and scale
+ * (`<g id="Regular-M">`, `<g id="Bold-L">`…). Drawn as a mask, the whole
+ * sheet shows as a gray smear. The page needs one glyph, so the build
+ * publishes the Regular-M variant (else another Regular one) on its own: its
+ * group, in a view box from the template's left to right margin lines for it
+ * (`left-margin-Regular-M`; older templates have one plain `left-margin`
+ * pair, Regular-M's) and the height of those lines, which is the symbol's box.
+ *
+ * An SVG that is not a template is published as it is.
+ */
+
+/** The variants tried, in order. */
+const VARIANTS = ['Regular-M', 'Regular-S', 'Regular-L', 'Medium-M', 'Semibold-M', 'Light-M'];
+
+export interface SymbolGlyph {
+  /** A standalone SVG of the glyph. */
+  svg: string;
+  /** The glyph's box in template units (100 per point at the template's point size). */
+  width: number;
+  height: number;
+}
+
+/** The glyph of an SF Symbols template, or null when `svg` is not one. */
+export function symbolTemplateGlyph(svg: string): SymbolGlyph | null {
+  for (const variant of VARIANTS) {
+    const glyph = extractVariant(svg, variant);
+    if (glyph) return glyph;
+  }
+  return null;
+}
+
+function extractVariant(svg: string, variant: string): SymbolGlyph | null {
+  const open = new RegExp(`<g\\s[^>]*id="${variant}"[^>]*>`).exec(svg);
+  if (!open) return null;
+  const transform = /transform="([^"]*)"/.exec(open[0])?.[1];
+  const inner = groupContents(svg, open.index + open[0].length);
+  // Older templates have one pair of margins, `left-margin` and `right-margin`, for Regular-M.
+  const plain = variant === 'Regular-M';
+  const left = marginLine(svg, `left-margin-${variant}`) ?? (plain ? marginLine(svg, 'left-margin') : null);
+  const right = marginLine(svg, `right-margin-${variant}`) ?? (plain ? marginLine(svg, 'right-margin') : null);
+  if (inner === null || !left || !right) return null;
+  const x = left.x;
+  const y = Math.min(left.y1, left.y2);
+  const width = right.x - left.x;
+  const height = Math.abs(left.y2 - left.y1);
+  if (!(width > 0 && height > 0)) return null;
+  // The template's classes style its preview; a mask needs only the shapes.
+  const shapes = inner.replace(/\sclass="[^"]*"/g, '').trim();
+  const n = (v: number) => String(Math.round(v * 1000) / 1000);
+  const box = `${n(x)} ${n(y)} ${n(width)} ${n(height)}`;
+  const group = transform ? `<g transform="${transform}">${shapes}</g>` : `<g>${shapes}</g>`;
+  return {
+    svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${box}" width="${n(width)}" height="${n(height)}">${group}</svg>\n`,
+    width,
+    height,
+  };
+}
+
+/** What lies between `start` (just after a `<g …>`) and its matching `</g>`. */
+function groupContents(svg: string, start: number): string | null {
+  const tag = /<g[\s>]|<\/g>|<g\/>/g;
+  tag.lastIndex = start;
+  let depth = 1;
+  for (let match = tag.exec(svg); match; match = tag.exec(svg)) {
+    if (match[0] === '</g>') depth--;
+    else if (match[0] !== '<g/>' && !isSelfClosing(svg, match.index)) depth++;
+    if (depth === 0) return svg.slice(start, match.index);
+  }
+  return null;
+}
+
+function isSelfClosing(svg: string, index: number): boolean {
+  const end = svg.indexOf('>', index);
+  return end > 0 && svg[end - 1] === '/';
+}
+
+/** A margin `<line>`'s x and vertical extent. */
+function marginLine(svg: string, id: string): { x: number; y1: number; y2: number } | null {
+  const line = new RegExp(`<line\\s[^>]*id="${id}"[^>]*>`).exec(svg)?.[0];
+  if (!line) return null;
+  const attr = (name: string) => Number(new RegExp(`\\s${name}="(-?[\\d.]+)"`).exec(line)?.[1]);
+  const x = attr('x1');
+  const y1 = attr('y1');
+  const y2 = attr('y2');
+  return [x, y1, y2].every(Number.isFinite) ? { x, y1, y2 } : null;
+}

package/public/_headers

@@ -5,6 +5,13 @@
   Cache-Control: no-cache
   Content-Type: application/wasm
 
+# A module over the host's file size limit is published as parts and a
+# manifest (plugins/swift-wasm.ts); not content-hashed either.
+/*.wasm.parts.json
+  Cache-Control: no-cache
+/*.wasm.*
+  Cache-Control: no-cache
+
 # Vite's hashed bundles can be cached forever.
 /assets/*
   Cache-Control: public, max-age=31536000, immutable

package/public/app/oauth-callback.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light dark" />
+    <meta name="referrer" content="no-referrer" />
+    <title>Signing in…</title>
+    <style>
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font: 17px/1.4 -apple-system, system-ui, sans-serif;
+        background: Canvas;
+        color: CanvasText;
+      }
+      p {
+        margin: 16px;
+        text-align: center;
+        opacity: 0.7;
+      }
+    </style>
+  </head>
+  <body>
+    <p id="status">Signing in…</p>
+    <script>
+      // The end of a sign-in (docs/ops-protocol.md, "Signing in"). The app's
+      // OAuth redirect (`icecubesapp://`) was swapped for this page, so the
+      // provider sent the sign-in window here, with `code` (or `error`) in the
+      // query. Hand the URL to the app's page (src/webAuth.ts) and close: by
+      // postMessage to the opener, and on a BroadcastChannel for when a
+      // provider's Cross-Origin-Opener-Policy cut the window off from it.
+      (function () {
+        var message = { type: 'sb-web-auth-callback', url: location.href };
+        var delivered = false;
+        try {
+          if (window.opener && !window.opener.closed) {
+            window.opener.postMessage(message, location.origin);
+            delivered = true;
+          }
+        } catch (error) {}
+        try {
+          var channel = new BroadcastChannel('sb-web-auth');
+          channel.postMessage(message);
+          channel.close();
+          delivered = true;
+        } catch (error) {}
+        // The code is single-use and the app has it now; keep it out of history.
+        try {
+          history.replaceState(null, '', location.pathname);
+        } catch (error) {}
+        document.getElementById('status').textContent = delivered
+          ? 'You can close this window.'
+          : 'Return to the app to finish signing in.';
+        if (delivered) setTimeout(function () { window.close(); }, 50);
+      })();
+    </script>
+  </body>
+</html>