@swiftbrowser/web 0.9.0 → 0.9.2

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.tsx

@@ -0,0 +1,45 @@
+/// <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 (session.ts, worker.ts), and run
+// by the renderer's own page in a frame. The page itself is SwiftUI views
+// from @swiftbrowser/react (app.tsx). Counter's sources come with the page,
+// so after the first visit's downloads nothing reaches a server.
+
+import '../styles.css';
+import './playground.css';
+import { SwiftUIView } from '@swiftbrowser/react';
+import { useSyncExternalStore } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Playground, TOUCH } from './app';
+import { Session } from './session';
+
+const sources = import.meta.glob('../../../Examples/Counter/Sources/**/*.swift', { query: '?raw', import: 'default', eager: true }) as Record<string, string>;
+const APP = 'Counter';
+
+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])) }
+    : {}),
+};
+const files = Object.fromEntries(Object.entries(sources).map(([file, text]) => [file.replace(/^.*\/Sources\//, ''), text]));
+// A touch device runs the app full screen in its pane; elsewhere the
+// simulator shows the app page's iPhone (app.tsx).
+const session = new Session(source, APP, TOUCH ? 'device' : 'frame');
+const scheme = matchMedia('(prefers-color-scheme: dark)');
+const watchScheme = (change: () => void): (() => void) => {
+  scheme.addEventListener('change', change);
+  return () => scheme.removeEventListener('change', change);
+};
+
+function Root() {
+  const dark = useSyncExternalStore(watchScheme, () => scheme.matches);
+  return (
+    <SwiftUIView className="pg-root" colorScheme={dark ? 'dark' : 'light'} safeArea={0}>
+      <Playground session={session} appName={APP} files={files} />
+    </SwiftUIView>
+  );
+}
+
+createRoot(document.getElementById('root')!).render(<Root />);

package/src/playground/playground.css

@@ -1,31 +1,194 @@
-:root {
-  --bg: #f5f5f7;
-  --panel: #ffffff;
-  --text: #1d1d1f;
-  --muted: #6e6e73;
-  --accent: #0071e3;
-  --error: #c62828;
-  --border: #d2d2d7;
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
+/* The playground's window (app.tsx): SwiftUI views fill it; the editor and
+   the simulator are DOM in their hosts, styled with the renderer's tokens so
+   they follow dark mode. */
+html,
+body,
+#root,
+.pg-root {
+  margin: 0;
+  height: 100%;
+}
+/* The page behind the views, which a phone's browser tints its bars with:
+   the system background of the appearance the views follow (main.tsx). The
+   tokens are the island's, so not the body's to read. */
+body {
+  background: #ffffff;
+  overscroll-behavior: none;
 }
 @media (prefers-color-scheme: dark) {
-  :root { --bg: #000; --panel: #1c1c1e; --text: #f5f5f7; --muted: #98989d; --accent: #2997ff; --error: #ff6b6b; --border: #38383a; }
-}
-body { margin: 0; background: var(--bg); color: var(--text); }
-header { padding: 20px 24px 8px; }
-header h1 { margin: 0; font-size: 22px; }
-header p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
-main { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; padding: 16px 24px 24px; }
-@media (max-width: 900px) { main { grid-template-columns: 1fr; } }
-.editor { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
-#files { display: flex; gap: 4px; flex-wrap: wrap; }
-#files button { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 6px; padding: 4px 10px; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
-#files button[aria-current='true'] { border-color: var(--accent); color: var(--accent); }
-#source { min-height: 480px; resize: vertical; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4; }
-.actions { display: flex; align-items: center; gap: 12px; }
-#run { background: var(--accent); color: white; border: none; border-radius: 8px; padding: 8px 20px; font-size: 15px; font-weight: 600; cursor: pointer; }
-#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); }
+  body {
+    background: #000000;
+  }
+}
+
+.pg-pane {
+  height: 100%;
+}
+
+/* The editor: a gutter and the text, issues below, a status bar at the foot. */
+.pg-editor {
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+  background: var(--sb-color-system-background);
+  color: var(--sb-color-primary);
+  --pg-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
+}
+.pg-code {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+.pg-gutter,
+.pg-code textarea {
+  margin: 0;
+  padding: 12px 0;
+  font: 13px/20px var(--pg-mono);
+}
+.pg-gutter {
+  flex: none;
+  width: 44px;
+  padding-right: 10px;
+  overflow: hidden;
+  text-align: right;
+  color: var(--sb-color-tertiary-label);
+  user-select: none;
+  white-space: pre;
+}
+.pg-code textarea {
+  flex: 1;
+  min-width: 0;
+  padding-left: 6px;
+  padding-right: 12px;
+  border: none;
+  outline: none;
+  resize: none;
+  background: transparent;
+  color: inherit;
+  tab-size: 4;
+  white-space: pre;
+  caret-color: var(--sb-color-accent);
+}
+#warning {
+  margin: 0;
+  padding: 8px 12px;
+  background: color-mix(in srgb, var(--sb-color-yellow) 18%, transparent);
+  border-bottom: 1px solid var(--sb-color-separator);
+  font-size: 13px;
+}
+#diagnostics {
+  flex: none;
+  max-height: 38%;
+  margin: 0;
+  padding: 10px 12px;
+  overflow: auto;
+  border-top: 1px solid var(--sb-color-separator);
+  background: var(--sb-color-secondary-system-background);
+  font: 12px/1.45 var(--pg-mono);
+  white-space: pre-wrap;
+}
+#diagnostics.pg-errors {
+  color: var(--sb-color-red);
+}
+.pg-statusbar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 26px;
+  padding: 0 12px;
+  border-top: 1px solid var(--sb-color-separator);
+  background: var(--sb-color-secondary-system-background);
+  color: var(--sb-color-secondary);
+  font-size: 11px;
+  white-space: nowrap;
+}
+#status {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pg-issues {
+  flex: none;
+  padding: 1px 8px;
+  border: none;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--sb-color-yellow) 28%, transparent);
+  color: var(--sb-color-primary);
+  font: inherit;
+  cursor: pointer;
+}
+.pg-issues.pg-has-errors {
+  background: color-mix(in srgb, var(--sb-color-red) 22%, transparent);
+}
+.pg-issues[aria-expanded='true'] {
+  outline: 1px solid var(--sb-color-separator);
+}
+.pg-position {
+  font-variant-numeric: tabular-nums;
+}
+
+/* The simulator: the app's own page (its iPhone, or full screen on a touch
+   device) in a frame, with the compiler's progress floating over it. */
+.pg-simulator {
+  position: relative;
+  height: 100%;
+  background: var(--sb-color-secondary-system-background);
+}
+.pg-simulator {
+  overflow: hidden;
+}
+.pg-simulator iframe {
+  position: absolute;
+  left: 50%;
+  display: block;
+  border: none;
+  transform-origin: top center;
+  color-scheme: normal;
+}
+.pg-simulator.pg-full iframe {
+  inset: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.pg-activity {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: calc(100% - 32px);
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: var(--sb-color-material-base, rgba(255, 255, 255, 0.8));
+  -webkit-backdrop-filter: blur(20px) saturate(1.8);
+  backdrop-filter: blur(20px) saturate(1.8);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  color: var(--sb-color-primary);
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+.pg-spinner {
+  flex: none;
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--sb-color-tertiary-label);
+  border-top-color: var(--sb-color-accent);
+  border-radius: 50%;
+  animation: pg-spin 0.8s linear infinite;
+}
+@keyframes pg-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

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();
+  }
+}

package/src/playground/sections.ts

@@ -0,0 +1,77 @@
+// A WebAssembly module without its custom sections, as it streams in. A
+// tool's or plugin's run reads none of them, but a browser keeps them beside
+// the compiled code: the function names are a quarter of the compiler and of
+// the linker, and a macro plugin carries its DWARF.
+
+/** Passes a module through, dropping each custom section (id 0). */
+export function withoutCustomSections(): TransformStream<Uint8Array, Uint8Array> {
+  // The preamble's bytes still to pass, then a section header's bytes so far
+  // (its id and LEB128 size), then the section's bytes to pass or to drop.
+  let preamble = 8;
+  let header: number[] = [];
+  let pass = 0;
+  let drop = 0;
+  return new TransformStream({
+    transform(chunk, controller) {
+      let at = 0;
+      while (at < chunk.length) {
+        if (preamble > 0 || pass > 0) {
+          const count = Math.min(preamble > 0 ? preamble : pass, chunk.length - at);
+          controller.enqueue(chunk.subarray(at, at + count));
+          if (preamble > 0) preamble -= count;
+          else pass -= count;
+          at += count;
+        } else if (drop > 0) {
+          const count = Math.min(drop, chunk.length - at);
+          drop -= count;
+          at += count;
+        } else {
+          const byte = chunk[at++]!;
+          header.push(byte);
+          if (header.length === 1 || byte & 0x80) {
+            if (header.length > 6) throw new Error('a WebAssembly section size is longer than five bytes');
+            continue;
+          }
+          let size = 0;
+          for (let i = header.length - 1; i >= 1; i--) size = size * 128 + (header[i]! & 0x7f);
+          if (header[0] === 0) drop = size;
+          else {
+            controller.enqueue(new Uint8Array(header));
+            pass = size;
+          }
+          header = [];
+        }
+      }
+    },
+    flush() {
+      if (preamble > 0 || pass > 0 || drop > 0 || header.length > 0) throw new Error('a WebAssembly module ended early');
+    },
+  });
+}
+
+/** `module` without its custom sections, at once: what `withoutCustomSections` streams. */
+export function stripCustomSections(module: Uint8Array): Uint8Array {
+  const kept: Uint8Array[] = [module.subarray(0, 8)];
+  let at = 8;
+  while (at < module.length) {
+    const start = at;
+    const id = module[at++]!;
+    let size = 0;
+    for (let shift = 0; ; shift += 7) {
+      if (at >= module.length) throw new Error('a WebAssembly module ended early');
+      const byte = module[at++]!;
+      size += (byte & 0x7f) * 2 ** shift;
+      if (!(byte & 0x80)) break;
+    }
+    if (at + size > module.length) throw new Error('a WebAssembly module ended early');
+    if (id !== 0) kept.push(module.subarray(start, at + size));
+    at += size;
+  }
+  const out = new Uint8Array(kept.reduce((total, part) => total + part.length, 0));
+  let offset = 0;
+  for (const part of kept) {
+    out.set(part, offset);
+    offset += part.length;
+  }
+  return out;
+}