Skip to content

perf: use web workers for non-blocking builds#576

Merged
0xVida merged 1 commit into0xVida:mainfrom
daveades:feat/web-worker-compilation-bridge
Mar 30, 2026
Merged

perf: use web workers for non-blocking builds#576
0xVida merged 1 commit into0xVida:mainfrom
daveades:feat/web-worker-compilation-bridge

Conversation

@daveades
Copy link
Copy Markdown
Contributor

What

Refactors the compilation flow so that the API fetch and stream processing happen in a background Web Worker, keeping the main thread fully free for typing and UI interaction during long builds.

Files

ide/public/workers/compile.worker.js (new — Web Worker script)
Served as a static asset. Listens for compile messages, calls the configured compile endpoint via fetch(), and streams the response back chunk-by-chunk using postMessage. Supports cancellation through an AbortController keyed by job id; responds to cancel messages. Handles JSON and streaming responses identically to the old readCompileResponse logic.

ide/src/lib/compilationWorker.ts (new — Worker lifecycle manager)
CompilationWorker class: lazy spawn (never runs during SSR), typed message passing, cancellation forwarding, and automatic restart on crash (up to 3 attempts). All pending jobs are rejected immediately on crash so callers always get a definitive result.

ide/src/hooks/useCompilationWorker.ts (new — React hook)
Creates a CompilationWorker lazily on first use, tears it down on unmount. Returns compile(options) and cancel(). Applies formatTerminalChunk to each raw chunk before forwarding to the caller.

ide/src/features/ide/Index.tsx (modified)
handleCompile now delegates the fetch + stream to workerCompile(). Main thread only runs diagnostics parsing and Zustand state updates — both are lightweight. A new cancellation branch (error.cancelled) resets state to idle without logging a failure.

ide/src/components/ide/Toolbar.tsx (modified)
Added onCancelCompile prop. A Cancel button renders next to Build while isCompiling is true so users can abort a running build.

How it satisfies the acceptance criteria

Criterion How
Compilation status tracked via message passing Worker posts chunk, done, error, cancelled messages; main thread updates Zustand state accordingly
Main thread free during builds fetch + stream loop runs entirely inside the worker; main thread only receives postMessage callbacks
Cancel a build in progress cancel() sends an AbortController.abort() signal to the active fetch; toolbar exposes a Cancel button
Worker crash recovery CompilationWorker.handleCrash rejects all pending jobs and auto-restarts up to 3 times

closes #439

Move the compile API fetch and stream reading off the main thread into a
dedicated Web Worker so the UI stays fully responsive during long builds.

public/workers/compile.worker.js
  Plain-JS worker served statically. Receives a `compile` message, calls
  the compile endpoint with fetch(), streams the response chunk-by-chunk
  back to the main thread via postMessage, and posts a final `done` or
  `error` message. Cancellation is handled through an AbortController
  keyed by job id; the worker responds to a `cancel` message.

src/lib/compilationWorker.ts
  TypeScript class (CompilationWorker) that manages the worker lifecycle:
  lazy spawn, typed message passing, cancellation forwarding, and automatic
  restart (up to 3 times) after a crash. Crashing rejects all in-flight
  jobs immediately.

src/hooks/useCompilationWorker.ts
  React hook that creates a CompilationWorker lazily on first use,
  terminates it on unmount, and exposes compile() / cancel(). Applies
  formatTerminalChunk to each chunk before forwarding to the caller.

src/features/ide/Index.tsx
  handleCompile now delegates the fetch + stream to workerCompile(). The
  main thread only handles diagnostics parsing and state updates, both of
  which are lightweight. Cancellation path (error.cancelled) resets the
  build state to idle without writing an audit failure log.

src/components/ide/Toolbar.tsx
  Added onCancelCompile prop and a Cancel button that appears beside the
  Build button while isCompiling is true.

closes 0xVida#439
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 30, 2026

@daveades is attempting to deploy a commit to the vidatg's projects Team on Vercel.

A member of the Team first needs to authorize it.

@0xVida 0xVida merged commit 492bb43 into 0xVida:main Mar 30, 2026
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Infrastructure] Web Worker based Compilation Bridge

2 participants