Skip to content

Add client-side JS/TS code execution#3

Merged
dreamteam-mobile merged 1 commit intomainfrom
dev/run-your-code
Feb 19, 2026
Merged

Add client-side JS/TS code execution#3
dreamteam-mobile merged 1 commit intomainfrom
dev/run-your-code

Conversation

@dreamteam-mobile
Copy link
Collaborator

Summary

  • Run JS/TS code in-browser via Web Workers — sandboxed execution with console interception, 10s timeout, and 100KB output cap
  • Run/Stop button in the tab bar (green play / red stop) with Ctrl/Cmd + Enter keyboard shortcut
  • Collapsible output panel below the editor with color-coded stdout/stderr, execution duration, and auto-scroll
  • Execution results sync to all participants over the existing WebRTC DataChannel
  • Executable languages marked with ▶ icon in the language selector dropdown
  • Responsive layout for desktop, tablet, and mobile viewports

Implementation

Component Description
code-executor.worker.ts Web Worker with new Function() sandbox, console interception, TypeScript transpilation via transpileModule()
code-executor.ts Service layer managing Worker lifecycle (spawn/terminate/timeout)
executionStore.ts Zustand store for execution state (isRunning, output, panelExpanded)
useExecutionSync.ts Sync hook broadcasting execution-start / execution-result over DataChannel
OutputPanel.tsx Collapsible output panel with status indicators and color-coded output

Screenshot

DuoCode JS Execution

JavaScript fibonacci function executed with output panel showing results

Test plan

  • All 1214 unit tests pass
  • TypeScript typecheck passes
  • Write JS code → Ctrl+Enter → output appears in panel
  • Write TS code with type annotations → Run → transpilation + output works
  • Test while(true){} → 10s timeout triggers, stop button works
  • Test console.error() → red text in output panel
  • Select non-executable language → Run button hidden, output panel hidden
  • Two peers connected → execution results sync via WebRTC
  • Mobile viewport → output panel responsive, buttons right-aligned

Execute JS/TS code directly in the browser via Web Workers with sandboxed
console interception, 10s timeout, and 100KB output cap. Results sync to
all participants over the existing WebRTC DataChannel.

- Web Worker executor with TypeScript transpilation via transpileModule()
- Run/Stop button in tab bar with Ctrl/Cmd+Enter keyboard shortcut
- Collapsible output panel with color-coded stdout/stderr
- Execution sync hook broadcasting start/result events to peers
- Executable languages marked with play icon in language selector
- Responsive layout for desktop, tablet, and mobile
@dreamteam-mobile dreamteam-mobile merged commit f03cbdf into main Feb 19, 2026
2 checks passed
@dreamteam-mobile dreamteam-mobile deleted the dev/run-your-code branch February 19, 2026 16:49
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.

1 participant