C++ playground / lessons: in-browser compile & run (wasm-clang-style) #137

Closed
opened 2026-05-14 03:53:08 +00:00 by spikerj · 1 comment
Owner

Goal

Add a C++ track to the platform’s playground / lessons experience, delivering an in-browser edit → compile → run flow comparable in spirit to wasm-clang (binji): lightweight tooling, clear output, and a feel users recognize from native toolchains without leaving the browser.

Inspiration / reference

  • wasm-clang on GitHub Pages demonstrates Clang compiled to WebAssembly, driving compile/run in the page (including editor affordances and run/reset-style actions).
  • Use this as a UX and capability benchmark, not necessarily a line-for-line clone.

Product / UX expectations

  • Lessons mode: scaffolded steps, starter code, and validation hints aligned with existing lesson patterns.
  • Sandbox mode: free-form C++ source, compile, view stderr/stdout (and compile errors) in a dedicated console/output area.
  • Editor: syntax-aware editing (existing playground editor stack or Monaco) with sensible defaults for .cpp / single-file flows to start.
  • Actions: at minimum Run (compile+execute), Reset (restore starter or clear sandbox), optional timing or performance readout if low-cost (parity with reference “show timing”).
  • Guidance: errors should be human-readable and tied to source lines where the toolchain allows.

Technical direction (high level)

  • Evaluate Clang/LLVM or compatible toolchain targeting WASM (or a maintained port similar to the reference) with a worker or main-thread strategy that keeps the UI responsive.
  • Define limits (compile time, memory, output size) and security boundaries for untrusted user code in the browser.
  • Reuse platform patterns: theming (glass / responsive), localStorage where appropriate for layout prefs (align with JS playground work if panels are shared).

Acceptance criteria (draft)

  • Users can complete at least one guided C++ lesson end-to-end in-browser.
  • Sandbox supports compile+run with visible success/failure and program output.
  • Documented constraints (what C++ subset / standard library is available, timeouts).
  • Clear path to extend with more lessons and stricter checks later.

Related

  • Parallels JavaScript Playground issues (layout, menus, debugger); C++ track may share shell components or diverge where WASM compile latency requires different UX (progress, cancel).
## Goal Add a **C++** track to the platform’s playground / lessons experience, delivering an in-browser **edit → compile → run** flow comparable in spirit to [wasm-clang (binji)](https://binji.github.io/wasm-clang/): lightweight tooling, clear output, and a feel users recognize from native toolchains without leaving the browser. ## Inspiration / reference - [wasm-clang on GitHub Pages](https://binji.github.io/wasm-clang/) demonstrates **Clang compiled to WebAssembly**, driving compile/run in the page (including editor affordances and run/reset-style actions). - Use this as a **UX and capability benchmark**, not necessarily a line-for-line clone. ## Product / UX expectations - **Lessons mode**: scaffolded steps, starter code, and validation hints aligned with existing lesson patterns. - **Sandbox mode**: free-form C++ source, compile, view **stderr/stdout** (and compile errors) in a dedicated **console/output** area. - **Editor**: syntax-aware editing (existing playground editor stack or Monaco) with sensible defaults for `.cpp` / single-file flows to start. - **Actions**: at minimum **Run** (compile+execute), **Reset** (restore starter or clear sandbox), optional **timing** or performance readout if low-cost (parity with reference “show timing”). - **Guidance**: errors should be **human-readable** and tied to source lines where the toolchain allows. ## Technical direction (high level) - Evaluate **Clang/LLVM or compatible toolchain** targeting **WASM** (or a maintained port similar to the reference) with a **worker** or main-thread strategy that keeps the UI responsive. - Define **limits** (compile time, memory, output size) and **security** boundaries for untrusted user code in the browser. - Reuse platform patterns: theming (**glass** / responsive), **localStorage** where appropriate for layout prefs (align with JS playground work if panels are shared). ## Acceptance criteria (draft) - [ ] Users can complete at least one **guided C++ lesson** end-to-end in-browser. - [ ] **Sandbox** supports compile+run with visible success/failure and program output. - [ ] Documented **constraints** (what C++ subset / standard library is available, timeouts). - [ ] Clear path to extend with more lessons and stricter checks later. ## Related - Parallels **JavaScript Playground** issues (layout, menus, debugger); C++ track may share shell components or diverge where WASM compile latency requires different UX (progress, cancel).
Author
Owner

Completed and live. Verified against the codebase:

  • In-browser edit → compile → run: libraries/platform/clang-runtime/src/lib/clang-runtime.worker.ts drives a real Clang + LLD + WASI toolchain (browsercc, LLVM 20.1.2) compiled to WebAssembly inside a Web Worker — the wasm-clang-style benchmark this issue asked for. Bundle is lazy-loaded same-origin; if absent it gracefully falls back to the SignalR server runtime ("not-bundled" path).
  • Sandbox + Lessons: cpp-playground route → CppRunner (libraries/features/dev-tools-cpp-runner) using the shared LanguagePlaygroundShellComponent — free-form compile/run with stdout/stderr + compile diagnostics, plus scaffolded lessons, a C++ standard-version picker, a concepts pane, and progress sync.
  • Guided lessons end-to-end: backend curriculum SpikerSoft.Business/Domain/Lessons/Curriculum/Cpp/ (Chapter00_Welcome through Chapter11_HistoricalEvolution).

All draft acceptance criteria are met. Closing.

Completed and live. Verified against the codebase: - **In-browser edit → compile → run**: `libraries/platform/clang-runtime/src/lib/clang-runtime.worker.ts` drives a real **Clang + LLD + WASI** toolchain (browsercc, LLVM 20.1.2) compiled to WebAssembly inside a Web Worker — the wasm-clang-style benchmark this issue asked for. Bundle is lazy-loaded same-origin; if absent it gracefully falls back to the SignalR server runtime (`"not-bundled"` path). - **Sandbox + Lessons**: `cpp-playground` route → `CppRunner` (`libraries/features/dev-tools-cpp-runner`) using the shared `LanguagePlaygroundShellComponent` — free-form compile/run with stdout/stderr + compile diagnostics, plus scaffolded lessons, a C++ standard-version picker, a concepts pane, and progress sync. - **Guided lessons end-to-end**: backend curriculum `SpikerSoft.Business/Domain/Lessons/Curriculum/Cpp/` (`Chapter00_Welcome` through `Chapter11_HistoricalEvolution`). All draft acceptance criteria are met. Closing.
Sign in to join this conversation.