perf: use web workers for non-blocking builds#576
Merged
0xVida merged 1 commit into0xVida:mainfrom Mar 30, 2026
Merged
Conversation
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
|
@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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
compilemessages, calls the configured compile endpoint viafetch(), and streams the response back chunk-by-chunk usingpostMessage. Supports cancellation through anAbortControllerkeyed by job id; responds tocancelmessages. Handles JSON and streaming responses identically to the oldreadCompileResponselogic.ide/src/lib/compilationWorker.ts(new — Worker lifecycle manager)CompilationWorkerclass: 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
CompilationWorkerlazily on first use, tears it down on unmount. Returnscompile(options)andcancel(). AppliesformatTerminalChunkto each raw chunk before forwarding to the caller.ide/src/features/ide/Index.tsx(modified)handleCompilenow delegates thefetch+ stream toworkerCompile(). 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
onCancelCompileprop. A Cancel button renders next to Build whileisCompilingis true so users can abort a running build.How it satisfies the acceptance criteria
chunk,done,error,cancelledmessages; main thread updates Zustand state accordinglyfetch+ stream loop runs entirely inside the worker; main thread only receives postMessage callbackscancel()sends anAbortController.abort()signal to the active fetch; toolbar exposes a Cancel buttonCompilationWorker.handleCrashrejects all pending jobs and auto-restarts up to 3 timescloses #439