@swiftbrowser/web 0.9.0 → 0.9.2

package/src/playground/session.ts

@@ -0,0 +1,117 @@
+// The playground's compiles: an app's sources sent to the compiler's worker
+// (worker.ts), the module it links run by the renderer's own page in the
+// frame (`?module=`, a blob: URL), and what the page shows meanwhile. The
+// UI (app.tsx) reads `state` and calls `compile`; it hands over the frame
+// with `attachFrame` whenever it mounts one.
+
+import { frozenCopy, restoreScroll } from './freeze';
+import type { PlaygroundSource } from './files';
+import type { FromWorker, ToWorker } from './worker';
+
+export interface SessionState {
+  /** A compile is under way. */
+  busy: boolean;
+  /** One line on what the compiler is doing or did. */
+  status: string;
+  /** The compiler's diagnostics, or the error the worker failed with. */
+  output: string;
+  /** Whether the last compile failed (its output is errors). */
+  failed: boolean;
+  /** Why the kit may not suit this page's renderer, when it may not. */
+  warning: string | null;
+  /** How many compiles have linked an app. */
+  linked: number;
+}
+
+export class Session {
+  state: SessionState = { busy: false, status: 'Loading the compiler…', output: '', failed: false, warning: null, linked: 0 };
+  private readonly worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
+  private readonly listeners = new Set<() => void>();
+  private nextId = 1;
+  private started = 0;
+  private frame: HTMLIFrameElement | null = null;
+  /** The last linked app, and the still copy of it a compile shows instead (freeze.ts). */
+  private moduleUrl: string | null = null;
+  private frozenUrl: string | null = null;
+
+  /**
+   * `frame`: the app page in an embedded frame mode (its iPhone, without
+   * its toolbar) for the simulator to scale; `device`: full screen.
+   */
+  constructor(
+    private readonly source: PlaygroundSource,
+    private readonly appName: string,
+    private readonly appMode: 'frame' | 'device',
+  ) {
+    this.worker.onmessage = (event: MessageEvent<FromWorker>) => this.receive(event.data);
+  }
+
+  subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+
+  private set(changes: Partial<SessionState>): void {
+    this.state = { ...this.state, ...changes };
+    for (const listener of this.listeners) listener();
+  }
+
+  /** The frame the app runs in, or null when the UI unmounts it; a new one shows what the last had. */
+  attachFrame = (frame: HTMLIFrameElement | null): void => {
+    this.frame = frame;
+    if (!frame) return;
+    frame.addEventListener('load', () => {
+      if (this.frozenUrl && frame.contentDocument && frame.contentWindow?.location.href === this.frozenUrl) restoreScroll(frame.contentDocument);
+    });
+    const url = this.frozenUrl ?? (this.moduleUrl ? this.appUrl(this.moduleUrl) : null);
+    if (url) frame.src = url;
+  };
+
+  private appUrl(moduleUrl: string): string {
+    const mode = this.appMode === 'frame' ? 'mode=frame&embed=1' : 'mode=device';
+    return `${import.meta.env.BASE_URL}app/?app=${this.appName}&${mode}&module=${encodeURIComponent(moduleUrl)}`;
+  }
+
+  compile(files: Record<string, string>): void {
+    if (this.state.busy) return;
+    // 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.
+    if (this.moduleUrl) {
+      let copy: string | null = null;
+      try {
+        copy = this.frame?.contentDocument ? frozenCopy(this.frame.contentDocument) : null;
+      } catch {
+        // No copy: the frame goes blank.
+      }
+      if (this.frozenUrl) URL.revokeObjectURL(this.frozenUrl);
+      this.frozenUrl = copy ? URL.createObjectURL(new Blob([copy], { type: 'text/html' })) : null;
+      if (this.frame) this.frame.src = this.frozenUrl ?? 'about:blank';
+      URL.revokeObjectURL(this.moduleUrl);
+      this.moduleUrl = null;
+    }
+    this.started = performance.now();
+    this.set({ busy: true, status: 'Compiling…' });
+    const message: ToWorker = { type: 'compile', id: this.nextId++, source: this.source, app: { name: this.appName, files: { ...files } } };
+    this.worker.postMessage(message);
+  }
+
+  private receive(message: FromWorker): void {
+    if (message.type === 'progress') return this.set({ status: message.text });
+    if (message.type === 'warning') return this.set({ warning: message.text });
+    if (message.type === 'failure') return this.set({ busy: false, status: 'The compiler failed.', output: message.error, failed: true });
+    const seconds = (performance.now() - this.started) / 1000;
+    // 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('; ');
+    if (!message.ok || !message.wasm) {
+      return this.set({ busy: false, status: `Did not compile (${steps}).`, output: message.output, failed: true });
+    }
+    if (this.frozenUrl) URL.revokeObjectURL(this.frozenUrl);
+    this.frozenUrl = null;
+    this.moduleUrl = URL.createObjectURL(new Blob([message.wasm], { type: 'application/wasm' }));
+    if (this.frame) this.frame.src = this.appUrl(this.moduleUrl);
+    this.set({ busy: false, status: `Compiled and linked in ${seconds.toFixed(1)} s (${steps}).`, output: message.output, failed: false, linked: this.state.linked + 1 });
+  }
+}

package/src/playground/tool-host.ts

@@ -0,0 +1,163 @@
+// Each tool run in a worker of its own, which loads the tool and the SDK's
+// and kit's files it reads from the cache (assets.ts), runs it over an
+// in-memory file system, sends back what it wrote and is ended. A phone's
+// browser runs out of memory where a desktop's does not: this way the
+// compiler's code, its memory and the Swift modules are gone before the
+// linker loads, with its own memory and the archives, and the page's worker
+// holds only the small files. A run compiles its tool again, which a
+// browser does fast enough (a WebAssembly.Module could be sent to the
+// worker instead, but its code would stay as long as the page kept it).
+
+import type { Directory } from '@bjorn3/browser_wasi_shim';
+import { type MemoryHost, type RunResult, type ToolName, directoryFiles, memoryDirectory, sdkPaths } from '@swiftbrowser/wasm-compiler';
+import type { Download } from './download';
+
+/** What a tool's worker runs. */
+export interface ToolJob {
+  /** argv, the program name first. */
+  args: string[];
+  env: Record<string, string>;
+  module: Download;
+  /** Guest directory → the files it holds, every mount the tool sees in order. */
+  files: Record<string, [string, Uint8Array][]>;
+  /** Guest directory → files of it the worker downloads. */
+  downloads: Record<string, [string, Download][]>;
+  /** The macro plugins, as guest paths of downloads. */
+  plugins: string[];
+  /** The mounts whose files the worker sends back: those a tool writes to. */
+  writable: string[];
+  /**
+   * Whether the downloads go once the tool has read them (read-once.ts): the
+   * linker's, which it keeps whole. Not those named in `keep` (file names).
+   */
+  readOnce: boolean;
+  keep: string[];
+}
+
+/** What a tool's worker is sent: a tool to run, or downloads to put in the cache. */
+export type ToToolWorker = { type: 'run'; job: ToolJob } | { type: 'prefetch'; files: Download[] };
+export type ToolReply =
+  /** `reopened`: a download the tool opened again after it was dropped (`readOnce`): it has to run again keeping them. */
+  | { type: 'done'; result: RunResult; files: Record<string, [string, Uint8Array][]>; reopened?: string }
+  /** One of a prefetch's files is in the cache, by its index. */
+  | { type: 'fetched'; index: number }
+  | { type: 'prefetched' }
+  | { type: 'error'; error: string };
+
+/**
+ * Whether a tool reads a file of the SDK or the kit: the linker their
+ * archives and objects, the compiler the rest.
+ */
+export const toolReads = (tool: ToolName, file: string): boolean => /\.[ao]$/.test(file) === (tool === 'wasm-ld');
+
+export interface ToolHostOptions {
+  tools: Partial<Record<ToolName, Download>>;
+  /** Guest directory → the files held here. */
+  mounts: Record<string, Directory>;
+  /** Guest directory → files of it a tool's worker downloads, those it reads (`toolReads`). */
+  downloads: Record<string, [string, Download][]>;
+  /** Macro plugins by guest path, for the compiler: its worker downloads them too. */
+  plugins: Record<string, Download>;
+  /** The Swift SDK's `wasm32-unknown-wasip1` directory, as a guest path. */
+  sdkRoot: string;
+  /** Clang's module cache to start from (memoryHost's). */
+  moduleCache?: Iterable<readonly [string, Uint8Array]>;
+}
+
+/** The module cache's directory under the host's /tmp, as memoryHost has it. */
+const MODULE_CACHE = 'module-cache';
+
+/**
+ * Sends `message` to a new tool worker and answers with its last reply (a
+ * `done` or `prefetched`), ending the worker then: with it goes whatever it
+ * loaded, which no browser frees as surely otherwise.
+ */
+function inWorker<Reply extends ToolReply>(message: ToToolWorker, onReply: (reply: ToolReply) => void = () => {}): Promise<Reply> {
+  const worker = new Worker(new URL('./tool-worker.ts', import.meta.url), { type: 'module' });
+  const name = message.type === 'run' ? message.job.args[0] : 'the download';
+  return new Promise<Reply>((resolve, reject) => {
+    worker.onmessage = (event: MessageEvent<ToolReply>) => {
+      const reply = event.data;
+      if (reply.type === 'error') reject(new Error(reply.error));
+      else if (reply.type === 'done' || reply.type === 'prefetched') resolve(reply as Reply);
+      else onReply(reply);
+    };
+    worker.onerror = (event) => {
+      event.preventDefault();
+      reject(new Error(`${name}'s worker failed: ${event.message || 'no message'}`));
+    };
+    worker.postMessage(message);
+  }).finally(() => worker.terminate());
+}
+
+/**
+ * Puts `files` in the cache from a worker of their own, calling `onFetched`
+ * with each one's index as it is in: the brotli decoder's memory, which only
+ * grows, goes with the worker.
+ */
+export async function prefetchInWorker(files: Download[], onFetched: (index: number) => void = () => {}): Promise<void> {
+  await inWorker({ type: 'prefetch', files }, (reply) => reply.type === 'fetched' && onFetched(reply.index));
+}
+
+/**
+ * The archives and objects a link names more than once, by file name: the
+ * linker reads such a file again each time (the SDK's flags and the
+ * objects' autolink entries both name -lwasi-emulated-mman, for one).
+ */
+export function namedTwice(args: readonly string[]): string[] {
+  const counts = new Map<string, number>();
+  for (const arg of args) {
+    const name = arg.startsWith('-l') ? `lib${arg.slice(2)}.a` : /\.[ao]$/.test(arg) ? arg.split('/').pop()! : null;
+    if (name) counts.set(name, (counts.get(name) ?? 0) + 1);
+  }
+  return [...counts].filter(([, count]) => count > 1).map(([name]) => name).sort();
+}
+
+/** A host like memoryHost (wasm-compiler) that runs each tool in its own worker. */
+export function toolHost(options: ToolHostOptions): MemoryHost {
+  const tmp = memoryDirectory(options.moduleCache ? [...options.moduleCache].map(([file, data]): [string, Uint8Array] => [`${MODULE_CACHE}/${file}`, data]) : []);
+  const plugins = Object.entries(options.plugins);
+  const pluginMounts = new Set(plugins.map(([guest]) => `/${guest.split('/')[1]}`));
+  const mounts: Record<string, Directory> = { '/': memoryDirectory([]), '/tmp': tmp, ...options.mounts };
+  for (const dir of [...Object.keys(options.downloads), ...pluginMounts]) mounts[dir] ??= memoryDirectory([]);
+  const downloads: Record<string, [string, Download][]> = { ...options.downloads };
+  for (const [guest, file] of plugins) {
+    const dir = `/${guest.split('/')[1]}`;
+    downloads[dir] = [...(downloads[dir] ?? []), [guest.slice(dir.length + 1), file]];
+  }
+  const writable = Object.keys(mounts).filter((dir) => !(dir in downloads));
+  return {
+    description: 'WebAssembly tools, each in a worker, over an in-memory file system',
+    sdk: sdkPaths(options.sdkRoot),
+    moduleCachePath: `/tmp/${MODULE_CACHE}`,
+    moduleCacheFiles() {
+      const prefix = `${MODULE_CACHE}/`;
+      return directoryFiles(mounts['/tmp']!).filter(([file]) => file.startsWith(prefix)).map(([file, data]) => [file.slice(prefix.length), data]);
+    },
+    async readFile(file: string): Promise<Uint8Array> {
+      const dir = Object.keys(mounts).filter((mount) => file.startsWith(mount === '/' ? '/' : `${mount}/`)).sort((a, b) => b.length - a.length)[0];
+      const data = dir === undefined ? undefined : directoryFiles(mounts[dir]!).find(([path]) => `${dir === '/' ? '' : dir}/${path}` === file)?.[1];
+      if (!data) throw new Error(`${file}: no such file`);
+      return data;
+    },
+    async run(tool: ToolName, args: readonly string[]): Promise<RunResult> {
+      const module = options.tools[tool];
+      if (!module) throw new Error(`no WebAssembly module for ${tool}`);
+      const job: ToolJob = {
+        args: [tool, ...args],
+        env: { TMPDIR: '/tmp' },
+        module,
+        files: Object.fromEntries(Object.entries(mounts).map(([dir, contents]) => [dir, directoryFiles(contents)])),
+        downloads: Object.fromEntries(Object.entries(downloads).map(([dir, list]) => [dir, list.filter(([file]) => toolReads(tool, file))])),
+        plugins: tool === 'swift-frontend' ? plugins.map(([guest]) => guest) : [],
+        writable,
+        readOnce: tool === 'wasm-ld',
+        keep: namedTwice(args),
+      };
+      let reply = await inWorker<Extract<ToolReply, { type: 'done' }>>({ type: 'run', job });
+      if (reply.reopened) reply = await inWorker<Extract<ToolReply, { type: 'done' }>>({ type: 'run', job: { ...job, readOnce: false } });
+      for (const [dir, files] of Object.entries(reply.files)) mounts[dir] = memoryDirectory(files);
+      return reply.result;
+    },
+  };
+}

package/src/playground/tool-worker.ts

@@ -0,0 +1,67 @@
+// A tool's worker (tool-host.ts): loads the tool and the files it reads from
+// the cache, runs it once, sends back the files of the mounts it writes to.
+// Or it puts downloads in the cache. The page's worker ends it then, and with
+// it everything it loaded.
+
+import { Directory, File } from '@bjorn3/browser_wasi_shim';
+import { directoryFiles, memoryDirectory, runMemoryCommand } from '@swiftbrowser/wasm-compiler';
+import { CONCURRENCY, compileModule, download, downloadBytes, openCache, pooled, prefetch } from './download';
+import { ReadOnceFile } from './read-once';
+import type { ToToolWorker, ToolJob, ToolReply } from './tool-host';
+
+const post = (message: ToolReply, transfer: Transferable[] = []): void => (self as unknown as Worker).postMessage(message, transfer);
+
+/**
+ * The tool's mounts and its plugins compiled, with the downloads in their
+ * places; nothing else keeps the downloads' bytes once this returns. With
+ * `job.readOnce` the downloads (but `job.keep`) are dropped as soon as the
+ * tool has read them (read-once.ts), and `onReopen` hears of one opened
+ * again after.
+ */
+async function load(job: ToolJob, cache: Cache | null, onReopen: (path: string) => void): Promise<{ mounts: Record<string, Directory>; plugins: Record<string, WebAssembly.Module> }> {
+  const wanted = Object.entries(job.downloads).flatMap(([dir, list]) => list.map(([file, from]) => ({ dir, file, from })));
+  const downloaded = await pooled(wanted, CONCURRENCY, async ({ dir, file, from }) => ({ dir, file, data: await downloadBytes(cache, from) }));
+  const mounts = Object.fromEntries(Object.entries(job.files).map(([dir, list]) => [dir, memoryDirectory(list)]));
+  for (const { dir, file, data } of downloaded) {
+    const parts = file.split('/');
+    let parent = (mounts[dir] ??= memoryDirectory([]));
+    for (const part of parts.slice(0, -1)) {
+      const next = parent.contents.get(part) ?? new Directory(new Map());
+      parent.contents.set(part, next);
+      parent = next as Directory;
+    }
+    // The buffer (a download's bytes are all of it), so the File keeps it rather than a copy.
+    const once = job.readOnce && !job.keep.includes(parts.at(-1)!);
+    parent.contents.set(parts.at(-1)!, once ? new ReadOnceFile(data, () => onReopen(`${dir}/${file}`)) : new File(data.buffer));
+  }
+  const plugins = Object.fromEntries(await Promise.all(job.plugins.map(async (guest) => {
+    const { data } = downloaded.find(({ dir, file }) => `${dir}/${file}` === guest)!;
+    return [guest, await WebAssembly.compile(data)] as const;
+  })));
+  return { mounts, plugins };
+}
+
+async function run(job: ToolJob): Promise<void> {
+  const cache = await openCache();
+  let reopened: string | undefined;
+  const [module, { mounts, plugins }] = await Promise.all([download(cache, job.module).then(compileModule), load(job, cache, (path) => (reopened ??= path))]);
+  const result = await runMemoryCommand({ module, args: job.args, mounts, env: job.env, plugins });
+  const written = Object.fromEntries(job.writable.map((dir) => [dir, directoryFiles(mounts[dir]!)]));
+  const buffers = new Set(Object.values(written).flatMap((list) => list.map(([, data]) => data.buffer as ArrayBuffer)));
+  post({ type: 'done', result, files: written, ...(reopened ? { reopened } : {}) }, [...buffers]);
+}
+
+self.onmessage = async (event: MessageEvent<ToToolWorker>) => {
+  const message = event.data;
+  try {
+    if (message.type === 'run') return await run(message.job);
+    const cache = await openCache();
+    await pooled(message.files.map((file, index) => ({ file, index })), CONCURRENCY, async ({ file, index }) => {
+      await prefetch(cache, file);
+      post({ type: 'fetched', index });
+    });
+    post({ type: 'prefetched' });
+  } catch (error) {
+    post({ type: 'error', error: error instanceof Error ? (error.stack ?? error.message) : String(error) });
+  }
+};

package/src/playground/worker.ts

@@ -1,46 +1,70 @@
 // The playground's compiler, in a worker: the page sends an app's sources,
-// the worker answers with the linked module or the diagnostics. The tools
-// and files are loaded once and kept, and each compile starts from the
-// module cache the previous one left. The macro plugins arrive after the
-// tools: a compile that expands a macro before then waits for them and
-// runs again.
+// the worker answers with the linked module or the diagnostics. The files
+// are downloaded once, and each compile starts from the module cache the
+// previous one left; each tool runs in a worker of its own (tool-host.ts).
+// The macro plugins load only when a compile expands a macro: it fails for
+// want of them, waits for them and runs again. Until then they are only
+// downloaded into the cache, once a compile is done.
 
-import { type AppSources, missingPlugin, buildApp } from './build';
+import { memoryDirectory } from '@swiftbrowser/wasm-compiler';
 import { type LoadedToolchain, loadToolchain } from './assets';
+import { type AppSources, type Toolchain, buildApp, missingPlugin } from './build';
 import type { PlaygroundSource } from './files';
+import { toolHost } from './tool-host';
 
 export type ToWorker = { type: 'compile'; id: number; source: PlaygroundSource; app: AppSources };
 export type FromWorker =
   | { type: 'progress'; text: string }
   | { type: 'warning'; text: string }
-  | { type: 'result'; id: number; ok: boolean; output: string; wasm?: Uint8Array<ArrayBuffer>; steps: { tool: string; seconds: number }[] }
+  | { type: 'result'; id: number; ok: boolean; output: string; wasm?: Uint8Array<ArrayBuffer>; steps: { tool: string; seconds: number; memoryBytes?: number }[] }
   | { type: 'failure'; id: number; error: string };
 
 const post = (message: FromWorker, transfer: Transferable[] = []): void => (self as unknown as Worker).postMessage(message, transfer);
 let loaded: Promise<LoadedToolchain> | null = null;
 let moduleCache: [string, Uint8Array][] | null = null;
+/** Whether compiles load the macro plugins: once one has wanted them. */
+let withPlugins = false;
+
+/** The toolchain the compiles run on, with or without the plugins. */
+function toolchain(loaded: LoadedToolchain, plugins: boolean): Toolchain {
+  const names = plugins ? Object.keys(loaded.plugins) : [];
+  return {
+    host: ({ mounts, moduleCache }) =>
+      toolHost({
+        tools: loaded.tools,
+        mounts: { ...mounts, '/sdk': memoryDirectory(loaded.sdk.files) },
+        downloads: { '/sdk': loaded.sdk.downloads, '/kit': loaded.kit },
+        plugins: Object.fromEntries(names.map((name) => [`/plugins/${name}.wasm`, loaded.plugins[name]!])),
+        sdkRoot: '/sdk',
+        ...(moduleCache ? { moduleCache } : {}),
+      }),
+    plugins: names,
+    kitManifest: loaded.kitManifest,
+    icu: loaded.icu,
+  };
+}
 
 self.onmessage = async (event: MessageEvent<ToWorker>) => {
   const { id, source, app } = event.data;
   try {
     loaded ??= loadToolchain(source, (text) => post({ type: 'progress', text })).then((toolchain) => {
-      // Later compiles use the plugins as soon as they are in.
-      toolchain.plugins.then((plugins) => (toolchain.toolchain.plugins = plugins), () => {});
       if (toolchain.warning) post({ type: 'warning', text: toolchain.warning });
       return toolchain;
     });
-    const { toolchain, plugins, moduleCache: prebuilt } = await loaded;
-    post({ type: 'progress', text: `compiling ${app.name}…` });
-    let result = await buildApp(toolchain, app, { moduleCache: moduleCache ?? prebuilt });
+    const files = await loaded;
+    const onStep = (tool: string): void => post({ type: 'progress', text: `${tool === 'wasm-ld' ? 'linking' : 'compiling'} ${app.name}${withPlugins ? ' with the macro plugins' : ''}…` });
+    let result = await buildApp(toolchain(files, withPlugins), app, { moduleCache: moduleCache ?? files.moduleCache, onStep });
     moduleCache = result.moduleCache;
-    if (!result.ok && Object.keys(toolchain.plugins).length === 0 && missingPlugin(result.output)) {
+    if (!result.ok && !withPlugins && missingPlugin(result.output)) {
       post({ type: 'progress', text: 'waiting for the macro plugins…' });
-      toolchain.plugins = await plugins;
-      post({ type: 'progress', text: `compiling ${app.name} with the macro plugins…` });
-      result = await buildApp(toolchain, app, { moduleCache });
+      await files.prefetchPlugins();
+      withPlugins = true;
+      result = await buildApp(toolchain(files, withPlugins), app, { moduleCache, onStep });
       moduleCache = result.moduleCache;
     }
-    const steps = result.steps.map(({ tool, seconds }) => ({ tool, seconds }));
+    // Behind the result: a macro later finds its plugin downloaded.
+    if (!withPlugins) void files.prefetchPlugins().catch(() => {});
+    const steps = result.steps.map(({ tool, seconds, memoryBytes }) => ({ tool, seconds, ...(memoryBytes !== undefined ? { memoryBytes } : {}) }));
     if (result.wasm) {
       const wasm = new Uint8Array(result.wasm);
       post({ type: 'result', id, ok: result.ok, output: result.output, wasm, steps }, [wasm.buffer]);

package/src/playground/main.ts

@@ -1,107 +0,0 @@
-/// <reference path="../vite-env.d.ts" />
-// The playground page: an app's sources in an editor, compiled and linked in
-// a worker by the WebAssembly Swift compiler (worker.ts), and run by the
-// renderer's own page in the frame, which takes the module as a blob: URL
-// (`?module=`, main.ts). Counter's sources come with the page, so after the
-// first visit's downloads nothing reaches a server.
-
-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>;
-const APP = 'Counter';
-
-function $<T extends HTMLElement>(selector: string): T {
-  const element = document.querySelector<T>(selector);
-  if (!element) throw new Error(`missing ${selector}`);
-  return element;
-}
-const filesNav = $<HTMLElement>('#files');
-const editor = $<HTMLTextAreaElement>('#source');
-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(
-  Object.entries(sources).map(([file, text]) => [file.replace(/^.*\/Sources\//, ''), text]),
-);
-let current = Object.keys(files).sort()[0]!;
-
-function showFiles(): void {
-  filesNav.replaceChildren(...Object.keys(files).sort().map((file) => {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.textContent = file;
-    button.setAttribute('aria-current', String(file === current));
-    button.addEventListener('click', () => {
-      files[current] = editor.value;
-      current = file;
-      editor.value = files[file]!;
-      showFiles();
-    });
-    return button;
-  }));
-}
-editor.value = files[current]!;
-editor.addEventListener('input', () => (files[current] = editor.value));
-showFiles();
-
-const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
-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;
-const started = new Map<number, number>();
-
-worker.onmessage = (event: MessageEvent<FromWorker>) => {
-  const message = event.data;
-  if (message.type === 'progress') {
-    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.';
-    diagnostics.hidden = false;
-    diagnostics.textContent = message.error;
-    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(', ');
-  diagnostics.hidden = message.ok || message.output === '';
-  diagnostics.textContent = message.output;
-  if (!message.ok || !message.wasm) {
-    status.textContent = `Did not compile (${steps}).`;
-    diagnostics.hidden = false;
-    return;
-  }
-  status.textContent = `Compiled and linked in ${seconds.toFixed(1)} s (${steps}).`;
-  if (moduleUrl) URL.revokeObjectURL(moduleUrl);
-  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;
-  diagnostics.hidden = true;
-  status.textContent = 'Compiling…';
-  const id = nextId++;
-  started.set(id, performance.now());
-  const message: ToWorker = { type: 'compile', id, source, app: { name: APP, files: { ...files } } };
-  worker.postMessage(message);
-}
-run.addEventListener('click', compile);
-// The first run loads the compiler and the SDK too.
-compile();