Assets & Workers

esdev owns browser assets and worker bundling. The AFW plugin compiles framework modules; it does not install the retired CLI's asset-rewriting pipeline.

Public assets

Configure a public directory on the browser target:

JSON

"web": { "entry": "index.html", "outdir": "dist", "assets": ["public"] }

Reference copied files with their served URL, such as /icon.svg or /add.wasm:

JavaScript

const { instance } = await WebAssembly.instantiateStreaming(fetch("/add.wasm"));

The host must serve WebAssembly with its appropriate MIME type.

Module workers

The native browser build recognizes this pattern and emits the worker module:

JavaScript

const worker = new Worker(new URL("./search-worker.js", import.meta.url), {
  type: "module",
});

For components used in static or request rendering, start workers from client lifecycle callbacks rather than during server rendering:

JSX

import { onMount, onCleanup } from "@opentf/afw";

export default function WorkerStatus() {
  let worker;
  let status = $state("Starting");
  onMount(() => {
    worker = new Worker(new URL("./worker.js", import.meta.url), { type: "module" });
    worker.onmessage = (event) => { status = event.data; };
  });
  onCleanup(() => worker?.terminate());
  return <p>{status}</p>;
}

Ordinary files referenced from JavaScript

Name a file relative to the module with new URL("./icon.svg", import.meta.url). esdev (0.17 or newer) copies it into the output with a content hash and rewrites the URL to the copy. The path must be a literal starting with ./ or ../. See files named by URL.

JSX

const icon = new URL("./icon.svg", import.meta.url).href;

export default function Logo() {
  return <img src={icon} alt="" />;
}

HTML/CSS references use esdev's own browser pipeline. See the official browser build guide.