@swiftbrowser/web 0.9.0 → 0.9.1

package/src/playground/assets.ts

@@ -1,122 +1,48 @@
 // The playground's downloads (files.ts): its manifest from
 // @swiftbrowser/playground, then the tools, the SDK's and the kit's files it
 // names, the ICU data and the module cache, every one a file of an npm
-// package, from the CDN at the source's version or from the site itself.
-// Each is 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.
+// package, from the CDN at the source's version or from the site itself,
+// into the cache (download.ts). The page's worker holds only the small
+// files: each tool's own worker reads the rest from the cache (tool-host.ts).
 
-import { memoryDirectory } from '@swiftbrowser/wasm-compiler';
 import type { Toolchain } from './build';
+import { type Download, cacheKey, downloadBytes, openCache } from './download';
 import {
   PLAYGROUND_ICU,
   PLAYGROUND_MANIFEST,
   PLAYGROUND_MODULE_CACHE,
   PLAYGROUND_PACKAGE,
   SITE_BROTLI,
-  isBrotli,
   type PackageFile,
   type PlaygroundManifest,
   type PlaygroundSource,
   packageUrl,
 } from './files';
 import { readPack } from './pack';
+import { prefetchInWorker } from './tool-host';
 
-const CACHE = 'swiftbrowser-playground';
-/** Requests in flight at once for the SDK's and kit's files. */
-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');
-    },
-  });
-}
-
-const openCache = async (): Promise<Cache | null> => (typeof caches === 'undefined' ? null : caches.open(CACHE).catch(() => null));
-
-/** The file at `url`, unpacked when it is brotli (`isBrotli`), from the cache when it has it. */
-async function download(cache: Cache | null, url: string): Promise<Response> {
-  const hit = await cache?.match(url);
-  if (hit) return hit;
-  const response = await fetch(url);
-  if (!response.ok || !response.body) throw new Error(`${url}: HTTP ${response.status}`);
-  let file = response;
-  if (isBrotli(url)) {
-    const decoder = await brotliDecoder();
-    const type = /\.wasm\.(br|brotli)$/.test(url) ? 'application/wasm' : 'application/octet-stream';
-    file = new Response(response.body.pipeThrough(brotliStream(decoder)), { headers: { 'content-type': type } });
-  }
-  if (cache) {
-    // The page reads one copy as the cache takes the other, unpacked: of the
-    // headers only the type goes with it (compileStreaming wants it).
-    const headers = { 'content-type': file.headers.get('content-type') ?? 'application/octet-stream' };
-    const [kept, used] = file.body!.tee();
-    void cache.put(url, new Response(kept, { headers })).catch(() => {});
-    return new Response(used, { headers });
-  }
-  return file;
-}
-
-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. */
-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;
-}
-
+/**
+ * What the playground's compiles read, downloaded into the cache. Only the
+ * small files are held here: each tool's worker takes the rest from the
+ * cache, those its tool reads (tool-host.ts).
+ */
 export interface LoadedToolchain {
-  /** The tools and files, without macro plugins until `plugins` settles. */
-  toolchain: Toolchain;
-  /**
-   * The macro plugins, downloading behind the first compile: most apps
-   * expand no macro, and the plugins are a fifth of the download.
-   */
-  plugins: Promise<Toolchain['plugins']>;
+  tools: Record<'swift-frontend' | 'wasm-ld', Download>;
+  /** The macro plugins by the module whose macros they expand: downloaded only by `prefetchPlugins`. */
+  plugins: Record<string, Download>;
+  /** The Swift SDK's files, relative to its `wasm32-unknown-wasip1` directory: to download, and those the manifest carries. */
+  sdk: { downloads: [string, Download][]; files: [string, Uint8Array][] };
+  /** The kit's files, relative to @swiftbrowser/kit. */
+  kit: [string, Download][];
+  kitManifest: Toolchain['kitManifest'];
+  icu: Toolchain['icu'];
   /** The module cache built with the playground's flags. */
   moduleCache: [string, Uint8Array][];
+  /**
+   * Downloads the plugins into the cache, keeping nothing: what the page
+   * does once a compile is done, and before a compile that expands a macro.
+   */
+  prefetchPlugins: () => Promise<void>;
   manifest: PlaygroundManifest;
   /** Why the kit may not suit this page's renderer, when it may not. */
   warning?: string;
@@ -133,8 +59,8 @@ export function kitWarning(manifest: Pick<PlaygroundManifest, 'shimSources'>, so
 
 export async function loadToolchain(source: PlaygroundSource, onProgress: (text: string) => void = () => {}): Promise<LoadedToolchain> {
   const cache = await openCache();
-  const url = ({ package: name, file }: PackageFile): string => packageUrl(source, name, file);
-  const bytes = async (file: PackageFile): Promise<Uint8Array<ArrayBuffer>> => new Uint8Array(await (await download(cache, url(file))).arrayBuffer());
+  const from = ({ package: name, file }: PackageFile, module = false): Download => ({ url: packageUrl(source, name, file), ...(module ? { module } : {}) });
+  const bytes = (file: PackageFile): Promise<Uint8Array<ArrayBuffer>> => downloadBytes(cache, from(file));
   const started = performance.now();
   const lap = (text: string): void => onProgress(`${text} (${((performance.now() - started) / 1000).toFixed(1)} s)`);
   const own = (file: string): PackageFile => ({ package: PLAYGROUND_PACKAGE, file });
@@ -144,54 +70,47 @@ export async function loadToolchain(source: PlaygroundSource, onProgress: (text:
   // What a site stores brotli-compressed it serves under another name.
   const brotli = new Set(manifest.brotli ?? []);
   const served = (name: string, file: string): PackageFile => ({ package: name, file: brotli.has(`${name}/${file}`) ? `${file}${SITE_BROTLI}` : file });
-  const sdkFiles = Object.entries(manifest.sdk).flatMap(([name, files]) => files.map((file) => ({ path: file, from: served(name, `wasm32-unknown-wasip1/${file}`) })));
-  const kitFiles = [...manifest.kit, 'kit.json'].map((file) => ({ path: file, from: served(kitPackage, file) }));
+  const sdk = Object.entries(manifest.sdk).flatMap(([name, files]) => files.map((file): [string, Download] => [file, from(served(name, `wasm32-unknown-wasip1/${file}`))]));
+  const kit = manifest.kit.map((file): [string, Download] => [file, from(served(kitPackage, file))]);
+  const tools = { 'swift-frontend': from(manifest.frontend, true), 'wasm-ld': from(manifest.linker, true) };
+  const plugins = Object.fromEntries(Object.entries(manifest.plugins).map(([name, file]) => [name, from(file, true)]));
+  // The tools first, which take longest; one worker downloads them all.
+  const downloads = [tools['swift-frontend'], tools['wasm-ld'], ...sdk.map(([, file]) => file), ...kit.map(([, file]) => file)];
   let done = 0;
-  const total = sdkFiles.length + kitFiles.length;
-  const files = pooled([...sdkFiles, ...kitFiles], CONCURRENCY, async ({ path, from }) => {
-    const data = await bytes(from);
+  const total = sdk.length + kit.length;
+  const fetched = (index: number): void => {
+    if (index < 2) return lap(index === 0 ? 'compiler ready' : 'linker ready');
     if (++done % 50 === 0 || done === total) onProgress(`SDK and kit: ${done} of ${total} files`);
-    return [path, data] as [string, Uint8Array];
-  });
-  const [frontend, linker, all, icu, moduleCacheBytes] = await Promise.all([
-    download(cache, url(manifest.frontend)).then(compileModule).then((module) => (lap('compiler ready'), module)),
-    download(cache, url(manifest.linker)).then(compileModule).then((module) => (lap('linker ready'), module)),
-    files.then((list) => (lap('SDK ready'), list)),
+  };
+  const [, kitJson, icu, moduleCacheBytes] = await Promise.all([
+    prefetchInWorker(downloads, fetched).then(() => lap('SDK ready')),
+    bytes(served(kitPackage, 'kit.json')),
     bytes(served(PLAYGROUND_PACKAGE, PLAYGROUND_ICU)),
     bytes(served(PLAYGROUND_PACKAGE, PLAYGROUND_MODULE_CACHE)),
   ]);
-  const sdk = all.slice(0, sdkFiles.length);
-  const kit = all.slice(sdkFiles.length);
-  const kitJson = kit.pop()![1];
+  const encoder = new TextEncoder();
+  const inline = Object.entries(manifest.inline ?? {}).map(([path, text]): [string, Uint8Array] => [path, encoder.encode(text)]);
 
-  const plugins = Promise.all(Object.entries(manifest.plugins).map(async ([name, file]) => {
-    const data = await bytes(file);
-    return [name, { module: await WebAssembly.compile(data), bytes: data }] as const;
-  })).then(Object.fromEntries<Toolchain['plugins'][string]>);
-  // A failed download surfaces when a compile needs the plugins.
-  plugins.catch(() => {});
   // Every file is named by its version: drop what an older one left.
-  void plugins.then(async () => {
+  void (async () => {
     const wanted = new Set([
-      ...[manifest.frontend, manifest.linker, ...Object.values(manifest.plugins), ...sdkFiles.map((f) => f.from), ...kitFiles.map((f) => f.from)].map(url),
-      url(own(PLAYGROUND_MANIFEST)),
-      ...[PLAYGROUND_ICU, PLAYGROUND_MODULE_CACHE].map((file) => url(served(PLAYGROUND_PACKAGE, file))),
+      ...[...Object.values(tools), ...Object.values(plugins), ...sdk.map(([, file]) => file), ...kit.map(([, file]) => file)].map(cacheKey),
+      ...[own(PLAYGROUND_MANIFEST), served(kitPackage, 'kit.json'), served(PLAYGROUND_PACKAGE, PLAYGROUND_ICU), served(PLAYGROUND_PACKAGE, PLAYGROUND_MODULE_CACHE)].map((file) => cacheKey(from(file))),
     ]);
     for (const request of (await cache?.keys()) ?? []) if (!wanted.has(request.url)) await cache!.delete(request);
-  }).catch(() => {});
+  })().catch(() => {});
 
+  const warning = kitWarning(manifest, source);
   return {
-    toolchain: {
-      tools: { 'swift-frontend': frontend, 'wasm-ld': linker },
-      plugins: {},
-      sdk: memoryDirectory(sdk),
-      kit: memoryDirectory(kit),
-      kitManifest: JSON.parse(new TextDecoder().decode(kitJson)) as Toolchain['kitManifest'],
-      icu: { symbol: manifest.icuSymbol, data: icu },
-    },
+    tools,
     plugins,
+    sdk: { downloads: sdk, files: inline },
+    kit,
+    kitManifest: JSON.parse(new TextDecoder().decode(kitJson)) as Toolchain['kitManifest'],
+    icu: { symbol: manifest.icuSymbol, data: icu },
     moduleCache: readPack(moduleCacheBytes).files('module-cache'),
+    prefetchPlugins: () => prefetchInWorker(Object.values(plugins)),
     manifest,
-    ...(kitWarning(manifest, source) ? { warning: kitWarning(manifest, source)! } : {}),
+    ...(warning ? { warning } : {}),
   };
 }

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

@@ -41,6 +41,12 @@ export interface PlaygroundManifest {
   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

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>;
@@ -58,6 +59,11 @@ const source = {
 };
 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>) => {
@@ -79,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) {
@@ -88,13 +97,30 @@ 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++;