René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Avoid passive esbuild-wasm loads in Charts docs","articleBody":"@tannerlinsley The new inline Charts documentation examples automatically load a browser compiler and execute as readers approach them. This needs a product/performance decision rather than an automatic behavior change.\n\n## Evidence\n\n- `ChartsCatalogDocExample` switches from its existing static SVG preview to the live client when the section enters a 320px root margin: [source](https://github.com/TanStack/tanstack.com/blob/9ab7a51c6b76945419369ad81150cf13f3d8a2e0/src/components/charts/ChartsCatalogDocExample.tsx#L33-L60).\n- The live client immediately fetches the complete example workspace: [source](https://github.com/TanStack/tanstack.com/blob/9ab7a51c6b76945419369ad81150cf13f3d8a2e0/src/components/charts/ChartsCatalogDocExample.client.tsx#L34-L49).\n- `ChartsCatalogResult` then calls `compileExampleWorkspace` without further user intent: [source](https://github.com/TanStack/tanstack.com/blob/9ab7a51c6b76945419369ad81150cf13f3d8a2e0/src/components/charts/ChartsCatalogResult.client.tsx#L33-L52).\n- The compiler is the pinned `esbuild-wasm@0.27.4`: [source](https://github.com/TanStack/tanstack.com/blob/9ab7a51c6b76945419369ad81150cf13f3d8a2e0/package.json#L109).\n- A production build emits `dist/client/assets/esbuild-*.wasm` at **13,539,721 bytes raw / 3,614,425 bytes gzip**. The shared browser compiler JS is another **74,128 bytes raw / 21,234 bytes gzip**. This excludes the fetched example source and esm.sh runtime modules.\n- Current `TanStack/charts` main contains **89 `::chart-example` directives across 29 docs pages**. The largest page, `docs/examples/polar-and-radar.md`, contains 15. Each newly approached example recompiles and mounts even when the reader does not select Run or Edit.\n- The static `ChartsCatalogPreview` is already rendered before the live client loads, so a compiler-free passive state exists.\n- This is distinct from #1091: that issue bounded landing-page catalog rotation. This path was added later for docs examples.\n\n## Expected impact\n\nKeeping passive docs examples static would avoid roughly 3.6 MB of first-visit compiler transfer plus WASM initialization/compile CPU and remote module requests for readers who only read or scroll the page. It would also prevent multi-example pages from progressively compiling and mounting every chart.\n\n## Proposed direction\n\nKeep the existing static preview until the reader selects **Run** or **Edit**. That action can load the current client, fetch the workspace, initialize the shared compiler once, and preserve the current editable/runnable experience from that point onward.\n\nAdd a focused component test asserting that visibility alone does not load the live client and that explicit activation does.\n\n## Alternatives and tradeoffs\n\n1. **Click to run/edit** — lowest passive cost and reuses the current static preview; live charts no longer start automatically.\n2. **Auto-run only the first example per page** — preserves one immediate live demonstration but adds page-level coordination and still pays the compiler cost.\n3. **Serve precompiled immutable catalog modules for passive rendering** — retains automatic interactivity without shipping the browser compiler, but restores publication/build machinery that the new source-driven path deleted.\n4. **Keep current behavior** — simplest and maximizes immediate interactivity, but explicitly accepts the compiler transfer and progressive compile/mount work on docs pages.\n\n## Decision needed\n\nShould Charts docs examples remain auto-running near the viewport, or should live compilation wait for Run/Edit? If auto-run is required, is restoring a precompiled passive-render path worth the added catalog publication complexity?\n\n## Validation\n\n- `pnpm build` completed and emitted the measured production assets.\n- Duplicate searches for `esbuild-wasm`, passive Charts docs, auto-run chart examples, and browser compiler docs found no matching open/closed issue or open PR.\n","author":{"url":"https://github.com/tannerlinsley","@type":"Person","name":"tannerlinsley"},"datePublished":"2026-08-09T14:10:43Z","url":"https://github.com/TanStack/tanstack.com/issues/1130"}