Skip to content

feat(embed): add iframe-embeddable REPL + event loop widget - #27

Merged
hoce1n merged 1 commit into
mainfrom
260810-feat-embed-widget
Aug 10, 2026
Merged

hoce1n merged 1 commit into
mainfrom
260810-feat-embed-widget

Conversation

@monkeycode-global

Copy link
Copy Markdown
Contributor

What

Adds a standalone, iframe-friendly /embed route that reuses the existing Workbench component (no fork) for dropping into a blog post or docs page.

  • Minimal shell — just the REPL/event-loop tool: a compact header with a brand link and a console/event-loop toggle, the Workbench itself, and a small "via runtime.js" footer badge linking back to /. No AppShell chrome (no Sources tab, no search, no theme toggle).
  • Example preloading — defaults to REPL_EXAMPLES[0]; ?example=<id> looks up either a REPL example id or an interview-pattern id (INTERVIEW_PATTERNS) and preloads its code, falling back to the default on unknown ids. ?view=loop opens the event-loop view.
  • Frame-friendly — no global frame-blocking headers existed; a new request middleware (embedFrameMiddleware in src/start.ts) explicitly strips X-Frame-Options and sets Content-Security-Policy: frame-ancestors * only on /embed, so third-party sites can embed it while the rest of the site keeps its normal frame protection.
  • Responsive — scrolls internally and stays usable in ~320px-wide / ~400–500px-tall iframes.
  • Docs — "Embed this" section in README with a copy-pasteable <iframe> snippet.

Verification

  • npm run typecheck — clean
  • npm run lint — 0 errors (8 pre-existing warnings, unrelated)
  • npm test — 45 pass
  • npm run build — succeeds; embed emitted as its own chunk
  • Headless-browser checks against the running app:
    • /embed preloads REPL_EXAMPLES[0]
    • ?example=event-loop-order and ?example=starvation preload their snippets
    • ?example=does-not-exist falls back to the default
    • /embed?view=loop renders
    • Real cross-origin <iframe> on a throwaway local page renders the tool with no framing block; response headers carry frame-ancestors * and no X-Frame-Options

Files

  • src/routes/embed.tsx (new)
  • src/start.ts (frame-exemption middleware)
  • src/routeTree.gen.ts (auto-regenerated with /embed)
  • README.md (embed docs)

Add a standalone /embed route that reuses the existing Workbench
(console or event-loop view) with no app shell chrome, preloads a
snippet via ?example=<id> (REPL examples or interview patterns),
and is explicitly exempted from frame-blocking headers so it can be
dropped into third-party iframes. Documents the embed in README.
Co-authored-by: monkeycode-ai <monkeycode-ai@chaitin.com>
@vercel

vercel Bot commented Aug 10, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
runtimejs Ready Ready Preview Aug 10, 2026 2:04pm

@hoce1n
hoce1n merged commit c7417be into main Aug 10, 2026
3 checks passed
@hoce1n
hoce1n deleted the 260810-feat-embed-widget branch August 10, 2026 14:06

This branch was successfully deployed

1 active deployment
Preview — 7569d474 Deployed Aug 10, 2026 by vercel[bot]
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.

2 participants