@swiftbrowser/web 0.9.0 → 0.9.2

package/src/playground/app.tsx

@@ -0,0 +1,311 @@
+// The playground's window, drawn with @swiftbrowser/react's SwiftUI views
+// as Xcode lays one out: the project's files in a sidebar, then the editor
+// beside the simulator. In a compact width (a phone) the code is a stack's
+// root, the simulator a screen it pushes, and the files an inspector. The
+// editor and the frame the app runs in are ordinary DOM in `Host`s.
+
+import {
+  Button,
+  Divider,
+  HStack,
+  Host,
+  Label,
+  List,
+  NavigationSplitView,
+  NavigationStack,
+  Section,
+  ToolbarItem,
+  ZStack,
+  useHorizontalSizeClass,
+} from '@swiftbrowser/react';
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, type KeyboardEvent } from 'react';
+import type { Session, SessionState } from './session';
+
+/** The value a phone's stack pushes for the simulator's screen. */
+const SIMULATOR = 'simulator';
+
+export interface PlaygroundProps {
+  session: Session;
+  appName: string;
+  /** Path relative to the app's Sources/ → text. */
+  files: Record<string, string>;
+}
+
+export function Playground({ session, appName, files: initialFiles }: PlaygroundProps) {
+  const state = useSyncExternalStore(session.subscribe, () => session.state);
+  const [files, setFiles] = useState(initialFiles);
+  const names = Object.keys(files).sort();
+  const [selection, setSelection] = useState<string | null>(names[0] ?? null);
+  // The file the editor shows: the sidebar's selection, or the last one
+  // when it has none.
+  const [shown, setShown] = useState(names[0] ?? '');
+  const select = (file: string | null): void => {
+    setSelection(file);
+    if (file) setShown(file);
+  };
+  const compact = useHorizontalSizeClass() === 'compact';
+  // A phone's stack: empty, or the simulator pushed over the code.
+  const [path, setPath] = useState<readonly unknown[]>([]);
+  const [filesShown, setFilesShown] = useState(false);
+  const latest = useRef(files);
+  latest.current = files;
+  const run = (): void => session.compile(latest.current);
+
+  // The first run loads the compiler and the SDK too.
+  useEffect(() => run(), []);
+  // On a phone a linked app comes into view.
+  useEffect(() => {
+    if (state.linked > 0 && compact) setPath((stack) => (stack.length > 0 ? stack : [SIMULATOR]));
+  }, [state.linked]);
+
+  const editor = (
+    <Host sizing="fill" className="pg-pane" frame={{ maxWidth: Infinity, maxHeight: Infinity }}>
+      <Editor
+        file={shown}
+        text={files[shown] ?? ''}
+        onChange={(text) => setFiles((all) => ({ ...all, [shown]: text }))}
+        onRun={run}
+        state={state}
+      />
+    </Host>
+  );
+  const preview = (
+    <Host sizing="fill" className="pg-pane" frame={compact ? { maxWidth: Infinity, maxHeight: Infinity } : { width: 430, maxHeight: Infinity }}>
+      <Simulator session={session} state={state} />
+    </Host>
+  );
+  const runButton = (
+    <ToolbarItem placement="primaryAction">
+      <Button action={run} disabled={state.busy}>
+        <Label title="Run" systemImage="play.fill" labelStyle={compact ? 'iconOnly' : 'titleAndIcon'} />
+      </Button>
+    </ToolbarItem>
+  );
+
+  const sources = (
+    <Section header="Sources">
+      {names.map((name) => (
+        <Label key={name} tag={name} title={name} systemImage="swift" />
+      ))}
+    </Section>
+  );
+  // Picking a file in the phone's inspector opens it and closes the inspector.
+  const pick = (file: string | null): void => {
+    if (!file) return;
+    select(file);
+    setFilesShown(false);
+  };
+
+  if (compact) {
+    // A phone: one stack. The code is its root, with the files in an
+    // inspector (a sheet in a compact width) and the simulator a screen the
+    // bar's iPhone button pushes, as does a build that links. Popping back
+    // unloads the app, which leaves its memory to the compiler.
+    return (
+      <NavigationStack
+        path={[path, setPath]}
+        destination={() => (
+          <ZStack navigationTitle={appName} navigationBarTitleDisplayMode="inline" toolbar={runButton}>
+            {preview}
+          </ZStack>
+        )}
+      >
+        <ZStack
+          navigationTitle={shown}
+          navigationBarTitleDisplayMode="inline"
+          toolbar={
+            <>
+              <ToolbarItem placement="topBarLeading">
+                <Button action={() => setFilesShown(true)}>
+                  <Label title="Files" systemImage="folder" labelStyle="iconOnly" />
+                </Button>
+              </ToolbarItem>
+              {runButton}
+              <ToolbarItem placement="primaryAction">
+                <Button action={() => setPath([SIMULATOR])}>
+                  <Label title="Simulator" systemImage="iphone" labelStyle="iconOnly" />
+                </Button>
+              </ToolbarItem>
+            </>
+          }
+          inspector={{
+            isPresented: [filesShown, setFilesShown],
+            content: (
+              <NavigationStack>
+                <List
+                  selection={[shown, pick]}
+                  navigationTitle="Files"
+                  navigationBarTitleDisplayMode="inline"
+                  presentationDetents={['medium', 'large']}
+                  toolbar={
+                    <ToolbarItem placement="confirmationAction">
+                      <Button title="Done" action={() => setFilesShown(false)} />
+                    </ToolbarItem>
+                  }
+                >
+                  {sources}
+                </List>
+              </NavigationStack>
+            ),
+          }}
+        >
+          {editor}
+        </ZStack>
+      </NavigationStack>
+    );
+  }
+
+  return (
+    <NavigationSplitView
+      sidebar={
+        <List selection={[selection, select]} navigationTitle={appName}>
+          {sources}
+        </List>
+      }
+      detail={
+        <HStack spacing={0} navigationTitle={shown} navigationBarTitleDisplayMode="inline" toolbar={runButton}>
+          {editor}
+          <Divider />
+          {preview}
+        </HStack>
+      }
+    />
+  );
+}
+
+interface EditorProps {
+  file: string;
+  text: string;
+  onChange: (text: string) => void;
+  onRun: () => void;
+  state: SessionState;
+}
+
+/** The source editor: a textarea with a line-number gutter, the issues below it, and a status bar. */
+function Editor({ file, text, onChange, onRun, state }: EditorProps) {
+  const gutter = useRef<HTMLPreElement>(null);
+  const area = useRef<HTMLTextAreaElement>(null);
+  const [cursor, setCursor] = useState({ line: 1, column: 1 });
+  const lines = text.split('\n').length;
+  const syncScroll = (): void => {
+    if (gutter.current && area.current) gutter.current.scrollTop = area.current.scrollTop;
+  };
+  useLayoutEffect(syncScroll, [text, file]);
+  const track = (): void => {
+    const element = area.current;
+    if (!element) return;
+    const before = element.value.slice(0, element.selectionStart).split('\n');
+    setCursor({ line: before.length, column: before.at(-1)!.length + 1 });
+  };
+  const keyDown = (event: KeyboardEvent<HTMLTextAreaElement>): void => {
+    // ⌘R or ⌘↩ (Ctrl on other systems) runs, as in Xcode.
+    if ((event.metaKey || event.ctrlKey) && (event.key === 'r' || event.key === 'Enter')) {
+      event.preventDefault();
+      onRun();
+    } else if (event.key === 'Tab' && !event.shiftKey) {
+      event.preventDefault();
+      const element = event.currentTarget;
+      const { selectionStart, selectionEnd, value } = element;
+      onChange(`${value.slice(0, selectionStart)}    ${value.slice(selectionEnd)}`);
+      requestAnimationFrame(() => element.setSelectionRange(selectionStart + 4, selectionStart + 4));
+    }
+  };
+  const issues = state.output.trim();
+  const count = (kind: string): number => (issues.match(new RegExp(`^[^\\s:][^:]*:\\d+:\\d+: ${kind}:`, 'gm')) ?? []).length;
+  const errors = count('error');
+  const warnings = count('warning');
+  // Issues open by themselves when a build fails; warnings wait to be asked for.
+  const [open, setOpen] = useState(false);
+  useEffect(() => setOpen(state.failed), [state.output, state.failed]);
+  const summary = [errors && `${errors} error${errors === 1 ? '' : 's'}`, warnings && `${warnings} warning${warnings === 1 ? '' : 's'}`].filter(Boolean).join(', ') || (state.failed ? 'Failed' : 'Output');
+  return (
+    <div className="pg-editor">
+      {state.warning && (
+        <p id="warning" role="alert">
+          {state.warning}
+        </p>
+      )}
+      <div className="pg-code">
+        <pre ref={gutter} className="pg-gutter" aria-hidden="true">
+          {Array.from({ length: lines }, (_, index) => `${index + 1}\n`).join('')}
+        </pre>
+        <textarea
+          ref={area}
+          id="source"
+          aria-label={file}
+          spellCheck={false}
+          autoCapitalize="off"
+          autoComplete="off"
+          autoCorrect="off"
+          wrap="off"
+          value={text}
+          onChange={(event) => onChange(event.target.value)}
+          onScroll={syncScroll}
+          onKeyDown={keyDown}
+          onKeyUp={track}
+          onClick={track}
+        />
+      </div>
+      <pre id="diagnostics" className={state.failed ? 'pg-errors' : ''} hidden={issues === '' || !open}>
+        {issues}
+      </pre>
+      <div className="pg-statusbar">
+        <span id="status" role="status" className={state.busy ? 'pg-busy' : ''}>
+          {state.status}
+        </span>
+        {issues !== '' && (
+          <button type="button" className={`pg-issues${errors || state.failed ? ' pg-has-errors' : ''}`} aria-expanded={open} onClick={() => setOpen(!open)}>
+            {summary}
+          </button>
+        )}
+        <span className="pg-position">{`Line ${cursor.line}, Col ${cursor.column}`}</span>
+      </div>
+    </div>
+  );
+}
+
+/** Whether this is a touch device, where the app runs full screen in the simulator's pane. */
+export const TOUCH = matchMedia('(pointer: coarse)').matches;
+/**
+ * The embedded app page's size: its iPhone, bezel included (styles.css's
+ * --device-*), and 16 around it for the shadow (page.css).
+ */
+const DEVICE = { width: 417 + 32, height: 876 + 32 };
+/** The simulator's margin around that, beyond the shadow's room. */
+const MARGIN = 4;
+
+/**
+ * The simulator: the frame the app runs in, and the compiler's progress
+ * over it while it runs. Off a touch device the frame is the iPhone's size,
+ * scaled to fit the pane; the app inside never knows, so its taps and
+ * scrolling are exact.
+ */
+function Simulator({ session, state }: { session: Session; state: SessionState }) {
+  const box = useRef<HTMLDivElement>(null);
+  const [fit, setFit] = useState({ scale: 1, top: MARGIN });
+  useLayoutEffect(() => {
+    const element = box.current;
+    if (TOUCH || !element) return;
+    const observer = new ResizeObserver(() => {
+      const { clientWidth: width, clientHeight: height } = element;
+      const scale = Math.max(0.2, Math.min(1, (width - 2 * MARGIN) / DEVICE.width, (height - 2 * MARGIN) / DEVICE.height));
+      setFit({ scale, top: Math.max(MARGIN, (height - DEVICE.height * scale) / 2) });
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  const style = TOUCH
+    ? undefined
+    : { width: DEVICE.width, height: DEVICE.height, top: fit.top, transform: `translateX(-50%) scale(${fit.scale})` };
+  return (
+    <div ref={box} className={TOUCH ? 'pg-simulator pg-full' : 'pg-simulator'}>
+      <iframe ref={session.attachFrame} id="app" title="The app" src="about:blank" style={style} />
+      {state.busy && (
+        <div className="pg-activity" aria-hidden="true">
+          <span className="pg-spinner" />
+          {state.status}
+        </div>
+      )}
+    </div>
+  );
+}

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']),
     ],