@swiftbrowser/web 0.8.0 → 0.9.1

package/src/playground/build.ts

@@ -1,6 +1,8 @@
 // An app compiled and linked in the browser: what the CLI does with
-// SWIFTBROWSER_COMPILER=wasm (packages/cli/src/wasmCompiler.ts), on the
-// in-memory host instead of the file system. The app's sources are staged
+// SWIFTBROWSER_COMPILER=wasm (packages/cli/src/wasmCompiler.ts), over an
+// in-memory file system instead of the real one: the toolchain makes the
+// host (the playground's runs each tool in a worker, tool-host.ts). The
+// app's sources are staged
 // for the shim with the CLI's own code (its browser entry) and compiled with
 // the CLI's flags against the kit, so a module built here is the module the
 // CLI builds. The playground's worker runs it, and so does the Node script
@@ -20,26 +22,35 @@ import {
   optionalRequirementNames,
   transformSource,
 } from '@swiftbrowser/cli/browser';
-import { type CompileStep, compile, dataObject, memoryDirectory, memoryHost } from '@swiftbrowser/wasm-compiler';
+import { type CompileStep, type MemoryHost, compile, dataObject, memoryDirectory } from '@swiftbrowser/wasm-compiler';
 
 /** Where the kit's modules and archives are, as the compiler sees them. */
 const KIT_ROOT = '/kit/wasm32-unknown-wasip1';
 
 /** What every compile shares, loaded once. */
 export interface Toolchain {
-  tools: { 'swift-frontend': WebAssembly.Module; 'wasm-ld': WebAssembly.Module };
-  /** Macro plugins by the module whose macros they expand, with their bytes (the compiler checks the file). */
-  plugins: Record<string, { module: WebAssembly.Module; bytes: Uint8Array }>;
-  /** The Swift SDK's `wasm32-unknown-wasip1` directory. */
-  sdk: Directory;
-  /** The kit's directory (its `wasm32-unknown-wasip1/Modules` and `lib`). */
-  kit: Directory;
+  /**
+   * The host the tools run on, over the build's own directories (/app,
+   * /work) and the toolchain's: the Swift SDK's `wasm32-unknown-wasip1`
+   * directory at /sdk, the kit's (its `wasm32-unknown-wasip1/Modules` and
+   * `lib`) at /kit, and each of `plugins` at /plugins/<name>.wasm.
+   */
+  host(options: HostOptions): MemoryHost;
+  /** The macro plugins a compile loads, by the module whose macros they expand. */
+  plugins: string[];
   /** kit.json's target and product graph. */
   kitManifest: { targets: Record<string, string[]>; products: Record<string, string[]> };
   /** Foundation's ICU data, trimmed, and the symbol it is read through. */
   icu: { symbol: string; data: Uint8Array };
 }
 
+export interface HostOptions {
+  mounts: Record<string, Directory>;
+  moduleCache?: Iterable<readonly [string, Uint8Array]>;
+  /** Every path the tools open, as a guest path. */
+  onOpen?: (path: string) => void;
+}
+
 export interface AppSources {
   /** The module name (a Swift identifier). */
   name: string;
@@ -62,6 +73,8 @@ export interface BuildOptions {
   moduleCache?: Iterable<readonly [string, Uint8Array]>;
   /** Every path the tools open, as a guest path. */
   onOpen?: (path: string) => void;
+  /** Each tool as it starts. */
+  onStep?: (tool: string) => void;
 }
 
 /** The app's sources as the CLI stages them (stage.ts): adjusted for the shim, with the generated Foundation aliases. */
@@ -105,18 +118,11 @@ export async function buildApp(toolchain: Toolchain, app: AppSources, options: B
   const staged = stageSources(app);
   const encoder = new TextEncoder();
   const sources = Object.keys(staged).sort().map((file) => `/app/${file}`);
-  const plugins = Object.entries(toolchain.plugins);
-  const host = memoryHost({
-    tools: toolchain.tools,
+  const host = toolchain.host({
     mounts: {
-      '/sdk': toolchain.sdk,
-      '/kit': toolchain.kit,
       '/app': memoryDirectory(Object.entries(staged).map(([file, text]) => [file, encoder.encode(text)])),
       '/work': memoryDirectory([['icudt.o', dataObject(toolchain.icu.symbol, toolchain.icu.data)]]),
-      '/plugins': memoryDirectory(plugins.map(([name, plugin]) => [`${name}.wasm`, plugin.bytes])),
     },
-    sdkRoot: '/sdk',
-    plugins: Object.fromEntries(plugins.map(([name, plugin]) => [`/plugins/${name}.wasm`, plugin.module])),
     ...(options.moduleCache ? { moduleCache: options.moduleCache } : {}),
     ...(options.onOpen ? { onOpen: options.onOpen } : {}),
   });
@@ -125,16 +131,21 @@ export async function buildApp(toolchain: Toolchain, app: AppSources, options: B
   const result = await compile(host, {
     moduleName: app.name,
     sources,
+    ...(options.onStep ? { onStep: ({ tool }: { tool: string }) => options.onStep!(tool) } : {}),
     objectDir: '/work',
     output: `/work/${app.name}.wasm`,
     wholeModule: true,
     frontendFlags: [
       ...appFrontendFlags({ name: app.name, swiftLanguageMode: '5', defines: [] }, sources, `${KIT_ROOT}/Modules`),
-      ...plugins.flatMap(([name]) => ['-load-plugin-executable', `/plugins/${name}.wasm#${name}`]),
+      ...toolchain.plugins.flatMap((name) => ['-load-plugin-executable', `/plugins/${name}.wasm#${name}`]),
     ],
     objects: ['/work/icudt.o'],
     linkerFlags: [
       '--gc-sections',
+      // No DWARF, as the CLI's release builds have none (its wasm-opt pass
+      // drops it): the frame runs the app, nothing debugs it, and the linker
+      // needs less memory without copying it out (the names stay).
+      '--strip-debug',
       ...appLinkerFlags(),
       ...archives.flatMap((archive) => ['--whole-archive', archive, '--no-whole-archive']),
     ],

package/src/playground/download.ts

@@ -0,0 +1,125 @@
+// The playground's downloads, each kept in the Cache API under its URL,
+// which a version makes immutable, so a compile needs no request after the
+// first visit. The tools come brotli-compressed, as does a file too big for
+// the site, and no browser's DecompressionStream reads brotli: a small
+// WebAssembly decoder unpacks them as they arrive, and the cache keeps them
+// unpacked. Other files the server compresses in transit.
+
+import { isBrotli } from './files';
+import { withoutCustomSections } from './sections';
+
+const CACHE = 'swiftbrowser-playground';
+/** Requests in flight at once for the SDK's and kit's files. */
+export const CONCURRENCY = 24;
+
+type Brotli = typeof import('brotli-dec-wasm/web');
+let brotli: Promise<Brotli> | null = null;
+
+/** The brotli decoder, loaded on first use. */
+function brotliDecoder(): Promise<Brotli> {
+  brotli ??= Promise.all([import('brotli-dec-wasm/web'), import('brotli-dec-wasm/web/bg.wasm?url')]).then(async ([decoder, wasm]) => {
+    await decoder.default({ module_or_path: wasm.default });
+    return decoder;
+  });
+  return brotli;
+}
+
+/** A stream that unpacks brotli as its input arrives. */
+function brotliStream(decoder: Brotli): TransformStream<Uint8Array, Uint8Array> {
+  const stream = new decoder.BrotliDecStream();
+  let code: number = decoder.BrotliStreamResultCode.NeedsMoreInput;
+  return new TransformStream({
+    transform(chunk, controller) {
+      let input = chunk;
+      do {
+        const result = stream.dec(input, 1 << 22);
+        if (result.buf.length > 0) controller.enqueue(result.buf);
+        input = input.subarray(result.input_offset);
+        code = result.code;
+      } while (code === decoder.BrotliStreamResultCode.NeedsMoreOutput);
+    },
+    flush() {
+      stream.free();
+      if (code !== decoder.BrotliStreamResultCode.ResultSuccess) throw new Error('a brotli file ended early');
+    },
+  });
+}
+
+/**
+ * A file the playground downloads. A tool's or plugin's module is kept
+ * without its custom sections (sections.ts), under a key of its own.
+ */
+export interface Download {
+  url: string;
+  module?: boolean;
+}
+
+/** Where the cache keeps a download: its URL, which a version makes immutable. */
+export const cacheKey = (file: Download): string => (file.module ? `${file.url}?custom-sections=none` : file.url);
+
+export const openCache = async (): Promise<Cache | null> => (typeof caches === 'undefined' ? null : caches.open(CACHE).catch(() => null));
+
+/** A download from the network, unpacked as it arrives when it is brotli (`isBrotli`). */
+async function fetchFile(file: Download): Promise<Response> {
+  const response = await fetch(file.url);
+  if (!response.ok || !response.body) throw new Error(`${file.url}: HTTP ${response.status}`);
+  if (!isBrotli(file.url) && !file.module) return response;
+  let body: ReadableStream<Uint8Array> = response.body;
+  if (isBrotli(file.url)) body = body.pipeThrough(brotliStream(await brotliDecoder()));
+  if (file.module) body = body.pipeThrough(withoutCustomSections());
+  const type = file.module || /\.wasm\.(br|brotli)$/.test(file.url) ? 'application/wasm' : 'application/octet-stream';
+  return new Response(body, { headers: { 'content-type': type } });
+}
+
+/**
+ * A download, from the cache, which takes it from the network first when it
+ * has not got it. The cache writes it out as it arrives and the page reads
+ * it back, so a file is never held twice: a phone's browser runs out of
+ * memory long before a desktop's (a tee would buffer a whole compiler for
+ * the slower reader). Of the headers only the type is kept
+ * (compileStreaming wants it).
+ */
+export async function download(cache: Cache | null, file: Download): Promise<Response> {
+  const hit = await cache?.match(cacheKey(file));
+  if (hit) return hit;
+  const response = await fetchFile(file);
+  if (!cache) return response;
+  const headers = { 'content-type': response.headers.get('content-type') ?? 'application/octet-stream' };
+  const stored = await cache.put(cacheKey(file), new Response(response.body, { headers })).then(() => cache.match(cacheKey(file)), () => undefined);
+  // A cache that is full or refuses: the network again, straight to the page.
+  return stored ?? fetchFile(file);
+}
+
+export const downloadBytes = async (cache: Cache | null, file: Download): Promise<Uint8Array<ArrayBuffer>> => new Uint8Array(await (await download(cache, file)).arrayBuffer());
+
+/**
+ * Puts a download in the cache, without keeping it, unless the cache has it.
+ * A cache that refuses it leaves it to the network, where a tool's worker
+ * downloads it from (tool-host.ts).
+ */
+export async function prefetch(cache: Cache | null, file: Download): Promise<void> {
+  if (!cache || (await cache.match(cacheKey(file)))) return;
+  const response = await fetchFile(file);
+  const headers = { 'content-type': response.headers.get('content-type') ?? 'application/octet-stream' };
+  await cache.put(cacheKey(file), new Response(response.body, { headers })).catch(() => {});
+}
+
+export async function compileModule(response: Response): Promise<WebAssembly.Module> {
+  if (typeof WebAssembly.compileStreaming === 'function' && (response.headers.get('content-type') ?? '').includes('application/wasm')) {
+    return WebAssembly.compileStreaming(response);
+  }
+  return WebAssembly.compile(await response.arrayBuffer());
+}
+
+/** `work` over `items`, at most `limit` at once, in order. */
+export async function pooled<T, R>(items: readonly T[], limit: number, work: (item: T) => Promise<R>): Promise<R[]> {
+  const results: R[] = new Array(items.length);
+  let next = 0;
+  await Promise.all(Array.from({ length: Math.min(limit, items.length) }, async () => {
+    while (next < items.length) {
+      const index = next++;
+      results[index] = await work(items[index]!);
+    }
+  }));
+  return results;
+}

package/src/playground/files.ts

@@ -1,18 +1,93 @@
-// The playground's downloads by role, as playground/build-assets.ts names
-// them in assets.json: gzip files named by a hash of their contents, so any
-// cache may keep them forever and a new build is new names. The site's
-// build reads the manifest (plugins/playground.ts) and the page fetches
-// these names from the assets' base URL.
+// What the playground downloads, all from npm packages at one version (the
+// release's lockstep version), through a CDN that serves npm packages file by
+// file (jsDelivr): the compiler, the linker and the toolchain's macro plugins
+// from @swiftbrowser/wasm-tools, the Swift SDK's files from the
+// @swiftbrowser/wasm-sdk packages, the kit's from @swiftbrowser/kit, and what
+// only the playground needs from @swiftbrowser/playground: its manifest
+// (which files of those packages a compile reads), the trimmed ICU data and
+// the module cache. playground/build-assets.ts makes that package.
 
-export interface PlaygroundFiles {
-  /** The compiler (`swift-frontend-<hash>.wasm.gz`). */
-  frontend: string;
-  /** The linker (`wasm-ld-<hash>.wasm.gz`). */
-  linker: string;
-  /** The SDK and kit files, ICU data and module cache (`playground-<hash>.pack.gz`). */
-  pack: string;
+export const PLAYGROUND_PACKAGE = '@swiftbrowser/playground';
+export const PLAYGROUND_MANIFEST = 'playground.json';
+/** The trimmed ICU data, in @swiftbrowser/playground. */
+export const PLAYGROUND_ICU = 'icu.dat';
+/** The module cache, packed (pack.ts), in @swiftbrowser/playground. */
+export const PLAYGROUND_MODULE_CACHE = 'module-cache.pack';
+/** Where the npm packages are fetched from by default. */
+export const JSDELIVR = 'https://cdn.jsdelivr.net/npm/';
+
+/** A file of one of the packages. */
+export interface PackageFile {
+  package: string;
+  /** The path in the package; `.br` files are brotli-compressed. */
+  file: string;
+}
+
+/** @swiftbrowser/playground's playground.json. */
+export interface PlaygroundManifest {
+  /** The symbol Foundation's ICU reads its data through (`icudtNN_dat`). */
+  icuSymbol: string;
+  /** The apps whose compiles recorded the files. */
+  apps: string[];
+  frontend: PackageFile;
+  linker: PackageFile;
   /** The macro plugins by the module whose macros they expand. */
-  plugins: Record<string, string>;
+  plugins: Record<string, PackageFile>;
+  /**
+   * The Swift SDK's files a compile reads, by package, each relative to the
+   * SDK's `wasm32-unknown-wasip1` directory (the package's own
+   * `wasm32-unknown-wasip1/` holds it there).
+   */
+  sdk: Record<string, string[]>;
+  /** The kit's files a compile reads, relative to @swiftbrowser/kit (`wasm32-unknown-wasip1/...`). */
+  kit: string[];
+  /**
+   * SDK files (paths as in `sdk`) the manifest carries itself, as text: a
+   * CDN refuses some names (jsDelivr a `.lnk`, as the SDK names its
+   * static-executable flags).
+   */
+  inline?: Record<string, string>;
+  /**
+   * The SwiftBrowser sources the kit was built from (@swiftbrowser/swift's
+   * `sourcesHash`), when build-assets.ts could tell: the page compares it
+   * with the sources its own renderer was built from.
+   */
+  shimSources?: string;
+  /**
+   * Files, as `<package>/<path>`, that the site serving them stores
+   * brotli-compressed (`<path>.brotli`, SITE_BROTLI): an SDK or kit file,
+   * the ICU data or the module cache (plugins/playground.ts). A tool or
+   * plugin is named by its compressed file instead.
+   */
+  brotli?: string[];
+}
+
+/**
+ * The suffix of a file a site stores brotli-compressed. Not `.br`: a static
+ * server may send a `.br` file as `Content-Encoding: br`, which the browser
+ * unpacks before the page could.
+ */
+export const SITE_BROTLI = '.brotli';
+
+/** Whether a file is brotli-compressed by its name: an npm package's `.br`, or a site's. */
+export const isBrotli = (file: string): boolean => file.endsWith('.br') || file.endsWith(SITE_BROTLI);
+
+/** Where the packages come from. */
+export interface PlaygroundSource {
+  /** A CDN's npm base URL, which serves every package at `version`... */
+  npm: string;
+  version: string;
+  /**
+   * ...but those named here, each served from its own base URL: the site's
+   * copy, made from the same commit as its renderer (plugins/playground.ts).
+   */
+  packages?: Record<string, string>;
+  /** The SwiftBrowser sources the site's renderer was built from (`sourcesHash`). */
+  shimSources?: string;
 }
 
-export const PLAYGROUND_MANIFEST = 'assets.json';
+/** The URL of a package's file. */
+export function packageUrl(source: PlaygroundSource, name: string, file: string): string {
+  const base = source.packages?.[name];
+  return base ? new URL(file, base).href : new URL(`${name}@${source.version}/${file}`, source.npm).href;
+}

package/src/playground/freeze.ts

@@ -0,0 +1,105 @@
+// The app as it looks, without the app: what the frame shows while a
+// compile runs. The running app (its page, its module and its memory) would
+// stay beside the compiler's and the linker's, which a phone's browser has
+// not got room for; a copy of its document, scripts gone, takes next to
+// nothing. What a copy of the markup would lose is carried over: the rules
+// of the page's own sheets (a script may have inserted them), what the user
+// typed, canvases and images whose blob: URLs go with the app, and how far
+// each part scrolled.
+
+/** The attribute a frozen copy's scrolled elements carry their offsets in, `left,top`. */
+const SCROLL = 'data-sb-frozen-scroll';
+
+/** A document of `doc` as it is now, with no scripts, as HTML; null when there is no app in it. */
+export function frozenCopy(doc: Document): string | null {
+  if (!doc.body || doc.location.href === 'about:blank') return null;
+  const copy = doc.documentElement.cloneNode(true) as HTMLElement;
+  const pairs = (selector: string): [Element, Element][] => {
+    const live = [...doc.documentElement.querySelectorAll(selector)];
+    const copied = [...copy.querySelectorAll(selector)];
+    return live.map((element, index) => [element, copied[index]!]);
+  };
+
+  for (const [live, copied] of pairs('input, textarea, select')) {
+    if (live instanceof HTMLInputElement) {
+      copied.setAttribute('value', live.value);
+      if (live.checked) copied.setAttribute('checked', '');
+      else copied.removeAttribute('checked');
+    } else if (live instanceof HTMLTextAreaElement) {
+      copied.textContent = live.value;
+    } else if (live instanceof HTMLSelectElement) {
+      [...(copied as HTMLSelectElement).options].forEach((option, index) => option.toggleAttribute('selected', index === live.selectedIndex));
+    }
+  }
+  // A canvas's pixels and a blob: image are not in the markup.
+  const picture = (source: CanvasImageSource & { width: number; height: number }, width: number, height: number): string | null => {
+    try {
+      const canvas = doc.createElement('canvas');
+      canvas.width = width;
+      canvas.height = height;
+      canvas.getContext('2d')?.drawImage(source, 0, 0);
+      return canvas.toDataURL();
+    } catch {
+      return null;
+    }
+  };
+  for (const [live, copied] of pairs('canvas')) {
+    const url = picture(live as HTMLCanvasElement, (live as HTMLCanvasElement).width, (live as HTMLCanvasElement).height);
+    if (!url) continue;
+    const image = doc.createElement('img');
+    for (const { name, value } of [...copied.attributes]) image.setAttribute(name, value);
+    image.src = url;
+    copied.replaceWith(image);
+  }
+  for (const [live, copied] of pairs('img')) {
+    const image = live as HTMLImageElement;
+    if (!image.currentSrc.startsWith('blob:') || !image.complete || image.naturalWidth === 0) continue;
+    const url = picture(image, image.naturalWidth, image.naturalHeight);
+    if (url) {
+      copied.setAttribute('src', url);
+      copied.removeAttribute('srcset');
+    }
+  }
+  for (const [live, copied] of pairs('*')) {
+    if (live.scrollTop || live.scrollLeft) copied.setAttribute(SCROLL, `${live.scrollLeft},${live.scrollTop}`);
+  }
+
+  const root = doc.scrollingElement;
+  if (root && (root.scrollTop || root.scrollLeft)) copy.setAttribute(SCROLL, `${root.scrollLeft},${root.scrollTop}`);
+
+  // The rules of the sheets in the page, as they are now (a script may have
+  // inserted some), inline. A linked sheet stays a link: its relative URLs
+  // are its own, and the browser has it cached.
+  const rules: string[] = [];
+  const styles = [...doc.querySelectorAll('style')];
+  const copiedStyles = [...copy.querySelectorAll('style')];
+  for (const sheet of [...doc.styleSheets, ...doc.adoptedStyleSheets]) {
+    if (sheet.href) continue;
+    try {
+      rules.push([...sheet.cssRules].map((rule) => rule.cssText).join('\n'));
+      const index = styles.indexOf(sheet.ownerNode as HTMLStyleElement);
+      if (index >= 0) copiedStyles[index]!.remove();
+    } catch {
+      // A sheet whose rules cannot be read keeps its element.
+    }
+  }
+  for (const element of copy.querySelectorAll('script, link[rel="modulepreload"], link[rel="preload"]')) element.remove();
+  const head = copy.querySelector('head') ?? copy.insertBefore(doc.createElement('head'), copy.firstChild);
+  const style = doc.createElement('style');
+  style.textContent = rules.join('\n');
+  head.prepend(style);
+  // Its URLs as the app's page had them.
+  const base = doc.createElement('base');
+  base.href = doc.baseURI;
+  head.prepend(base);
+  copy.querySelector('body')?.setAttribute('inert', '');
+  return `<!doctype html>\n${copy.outerHTML}`;
+}
+
+/** Scrolls a frozen copy's elements back to where the app had them, once it has loaded. */
+export function restoreScroll(doc: Document): void {
+  for (const element of doc.querySelectorAll(`[${SCROLL}]`)) {
+    const [left, top] = element.getAttribute(SCROLL)!.split(',').map(Number);
+    element.scrollTo(left ?? 0, top ?? 0);
+  }
+}

package/src/playground/main.ts

@@ -5,6 +5,7 @@
 // (`?module=`, main.ts). Counter's sources come with the page, so after the
 // first visit's downloads nothing reaches a server.
 
+import { frozenCopy, restoreScroll } from './freeze';
 import type { FromWorker, ToWorker } from './worker';
 
 const sources = import.meta.glob('../../../Examples/Counter/Sources/**/*.swift', { query: '?raw', import: 'default', eager: true }) as Record<string, string>;
@@ -21,6 +22,7 @@ const run = $<HTMLButtonElement>('#run');
 const status = $<HTMLElement>('#status');
 const diagnostics = $<HTMLPreElement>('#diagnostics');
 const frame = $<HTMLIFrameElement>('#app');
+const warning = $<HTMLElement>('#warning');
 
 // Path relative to Sources/ → text, as edited.
 const files: Record<string, string> = Object.fromEntries(
@@ -48,9 +50,20 @@ editor.addEventListener('input', () => (files[current] = editor.value));
 showFiles();
 
 const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
-const base = new URL(__SB_PLAYGROUND_ASSETS__, location.href).href;
+const source = {
+  ...__SB_PLAYGROUND__,
+  npm: new URL(__SB_PLAYGROUND__.npm, location.href).href,
+  ...(__SB_PLAYGROUND__.packages
+    ? { packages: Object.fromEntries(Object.entries(__SB_PLAYGROUND__.packages).map(([name, base]) => [name, new URL(base, location.href).href])) }
+    : {}),
+};
 let nextId = 1;
 let moduleUrl: string | null = null;
+/** The still copy of the last app the frame shows while a compile runs. */
+let frozenUrl: string | null = null;
+frame.addEventListener('load', () => {
+  if (frozenUrl && frame.contentDocument && frame.contentWindow?.location.href === frozenUrl) restoreScroll(frame.contentDocument);
+});
 const started = new Map<number, number>();
 
 worker.onmessage = (event: MessageEvent<FromWorker>) => {
@@ -59,6 +72,11 @@ worker.onmessage = (event: MessageEvent<FromWorker>) => {
     status.textContent = message.text;
     return;
   }
+  if (message.type === 'warning') {
+    warning.hidden = false;
+    warning.textContent = message.text;
+    return;
+  }
   run.disabled = false;
   if (message.type === 'failure') {
     status.textContent = 'The compiler failed.';
@@ -67,7 +85,10 @@ worker.onmessage = (event: MessageEvent<FromWorker>) => {
     return;
   }
   const seconds = (performance.now() - (started.get(message.id) ?? performance.now())) / 1000;
-  const steps = message.steps.map((step) => `${step.tool} ${step.seconds.toFixed(1)} s`).join(', ');
+  // Each tool's memory too: what a phone's browser runs out of first.
+  const steps = message.steps
+    .map((step) => `${step.tool} ${step.seconds.toFixed(1)} s${step.memoryBytes ? `, ${Math.round(step.memoryBytes / 1e6)} MB` : ''}`)
+    .join('; ');
   diagnostics.hidden = message.ok || message.output === '';
   diagnostics.textContent = message.output;
   if (!message.ok || !message.wasm) {
@@ -76,18 +97,35 @@ worker.onmessage = (event: MessageEvent<FromWorker>) => {
     return;
   }
   status.textContent = `Compiled and linked in ${seconds.toFixed(1)} s (${steps}).`;
-  if (moduleUrl) URL.revokeObjectURL(moduleUrl);
+  if (frozenUrl) URL.revokeObjectURL(frozenUrl);
+  frozenUrl = null;
   moduleUrl = URL.createObjectURL(new Blob([message.wasm], { type: 'application/wasm' }));
   frame.src = `${import.meta.env.BASE_URL}app/?app=${APP}&module=${encodeURIComponent(moduleUrl)}`;
 };
 
 function compile(): void {
   run.disabled = true;
+  // The last build's app goes while the compiler runs: its page, its module
+  // and its memory would stay beside the linker's, which a phone has not got.
+  // A still copy of it stays in its place (freeze.ts).
+  if (moduleUrl) {
+    let copy: string | null = null;
+    try {
+      copy = frame.contentDocument ? frozenCopy(frame.contentDocument) : null;
+    } catch {
+      // No copy: the frame goes blank.
+    }
+    if (frozenUrl) URL.revokeObjectURL(frozenUrl);
+    frozenUrl = copy ? URL.createObjectURL(new Blob([copy], { type: 'text/html' })) : null;
+    frame.src = frozenUrl ?? 'about:blank';
+    URL.revokeObjectURL(moduleUrl);
+    moduleUrl = null;
+  }
   diagnostics.hidden = true;
   status.textContent = 'Compiling…';
   const id = nextId++;
   started.set(id, performance.now());
-  const message: ToWorker = { type: 'compile', id, base, files: __SB_PLAYGROUND_FILES__, app: { name: APP, files: { ...files } } };
+  const message: ToWorker = { type: 'compile', id, source, app: { name: APP, files: { ...files } } };
   worker.postMessage(message);
 }
 run.addEventListener('click', compile);

package/src/playground/playground.css

@@ -27,4 +27,5 @@ main { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; pa
 #run:disabled { opacity: 0.5; cursor: default; }
 #status { color: var(--muted); font-size: 13px; }
 #diagnostics { margin: 0; padding: 12px; border: 1px solid var(--error); border-radius: 8px; background: var(--panel); color: var(--error); font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow: auto; max-height: 320px; }
+#warning { margin: 0; padding: 8px 12px; border: 1px solid var(--error); border-radius: 8px; background: var(--panel); font-size: 13px; }
 .preview iframe { width: 100%; height: 860px; border: none; border-radius: 12px; background: var(--panel); }

package/src/playground/read-once.ts

@@ -0,0 +1,75 @@
+// Inputs a tool reads whole once, dropped as soon as it has. The linker
+// reads each archive into its own memory and keeps it there, so after that
+// the worker's copy is a second one, a hundred megabytes for an app's
+// archives, at the point where a phone's browser has least to spare.
+
+import { File, OpenFile, wasi } from '@bjorn3/browser_wasi_shim';
+
+/**
+ * A read-only file whose bytes go once every open of it is closed and one
+ * read all of them. Its size stays. Opening it after that fails
+ * (`onReopen` is told), since its bytes are gone: the tool has to run again
+ * with them kept.
+ */
+export class ReadOnceFile extends File {
+  private readonly length: bigint;
+  private open = 0;
+  private wholeRead = false;
+  released = false;
+
+  constructor(data: Uint8Array, private readonly onReopen: () => void) {
+    // The buffer, not the view, so the File keeps the bytes rather than a copy.
+    super(data.byteOffset === 0 && data.byteLength === data.buffer.byteLength ? data.buffer : data, { readonly: true });
+    this.length = BigInt(data.byteLength);
+  }
+
+  override get size(): bigint {
+    return this.length;
+  }
+
+  override path_open(oflags: number, fs_rights_base: bigint, fd_flags: number): { ret: number; fd_obj: OpenFile } {
+    if (this.released) {
+      this.onReopen();
+      return { ret: wasi.ERRNO_IO, fd_obj: null as unknown as OpenFile };
+    }
+    const opened = super.path_open(oflags, fs_rights_base, fd_flags);
+    if (opened.ret !== wasi.ERRNO_SUCCESS) return opened;
+    this.open += 1;
+    return { ret: opened.ret, fd_obj: new ReadOnceOpenFile(this) };
+  }
+
+  /** How an open of it ended: whether it read every byte. */
+  closed(readAll: boolean): void {
+    this.open -= 1;
+    this.wholeRead ||= readAll;
+    if (this.open === 0 && this.wholeRead) {
+      this.data = new Uint8Array(0);
+      this.released = true;
+    }
+  }
+}
+
+class ReadOnceOpenFile extends OpenFile {
+  private bytesRead = 0;
+
+  constructor(private readonly once: ReadOnceFile) {
+    super(once);
+  }
+
+  override fd_read(size: number): { ret: number; data: Uint8Array } {
+    const result = super.fd_read(size);
+    this.bytesRead += result.data.byteLength;
+    return result;
+  }
+
+  override fd_pread(size: number, offset: bigint): { ret: number; data: Uint8Array } {
+    const result = super.fd_pread(size, offset);
+    this.bytesRead += result.data.byteLength;
+    return result;
+  }
+
+  override fd_close(): number {
+    this.once.closed(BigInt(this.bytesRead) >= this.once.size);
+    return super.fd_close();
+  }
+}