Extract playground shell + IIFE runner (prep for ESM)#324
Conversation
Splits the 565-line playground.astro into compartmentalized pieces:
- styles.css: the CSS block, unchanged
- runner.ts: Runner interface (title, tabs, init, buildSrcdoc)
- shell.ts: runner-agnostic UI (editors, tabs, console, status, URL hash)
- runner-iife.ts: current esbuild.transform + IIFE srcdoc behavior
- entry-iife.ts: page entry; wires CodeMirror/esbuild URL imports + runner
- playground.astro: ~15 lines, just <head> + mount point + script
URL hash format preserved (flat {html, js}) so existing shared URLs keep
working. Dependency injection pattern keeps URL imports (esbuild-wasm,
CodeMirror, esm.sh) at the page entry; shell/runner modules stay pure TS
that Vite bundles cleanly.
No behavior change — prepares the ground for a separate /playground/esm
page that reuses shell.ts with a different runner.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 4 minutes and 35 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (6)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5d33bf63a8
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| <div class="editor-panel"> | ||
| <div class="tabs" role="tablist" data-role="tabs"></div> | ||
| <div data-role="editor-mounts"></div> |
There was a problem hiding this comment.
Wrapping the editor mounts in an unstyled <div data-role="editor-mounts"> breaks the previous flex sizing: .editor-mount { flex: 1 } only works when the parent is a flex container, and this new wrapper is a normal block element. As a result, CodeMirror no longer gets the full panel height and the editor area collapses to content height, which makes the playground editor effectively unusable on load. Please make the wrapper a flex/height container (or remove it) so the mounts remain full-height.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Pull request overview
Refactors the tko.io playground page into modular TypeScript + CSS pieces to create a clean runner boundary (via buildSrcdoc(files)) ahead of an upcoming ESM playground addition.
Changes:
- Extracted playground styling into
src/playground/styles.cssand simplifiedplayground.astroto a mount point + script. - Introduced a runner abstraction (
Runner, tabs, init, buildSrcdoc) and implemented the current IIFE/esbuild runner asrunner-iife.ts. - Added a runner-agnostic UI shell (
shell.ts) and a dedicated page entry (entry-iife.ts) that performs URL imports and mounts the app.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| tko.io/src/playground/styles.css | Moves inline playground CSS into a standalone stylesheet. |
| tko.io/src/playground/runner.ts | Defines shared runner/tab/status types to support multiple playground runners. |
| tko.io/src/playground/shell.ts | New runner-agnostic playground UI (editors/tabs/iframe/console/status) + hashing. |
| tko.io/src/playground/runner-iife.ts | IIFE runner implementation using esbuild.transform and srcdoc generation. |
| tko.io/src/playground/entry-iife.ts | Entry module that performs URL imports and wires deps into mount(...). |
| tko.io/src/pages/playground.astro | Replaces the large inline implementation with CSS import + mount + entry import. |
| const files = collectFiles() | ||
| saveToHash(files) | ||
| try { |
| await initEsbuild() | ||
| run() | ||
| <div id="app"></div> | ||
| <script> |
| const parsed = JSON.parse(json) | ||
| return typeof parsed === 'object' && parsed !== null ? parsed : null |
| window.addEventListener('message', (e) => { | ||
| const data = e.data | ||
| if (data?.type === 'console') { | ||
| addConsoleMsg(data.args.join(' '), data.method) | ||
| } else if (data?.type === 'error') { | ||
| addConsoleMsg(data.message, 'error') | ||
| } | ||
| }) |
Codex flagged: wrapping the editor mounts in a data-role="editor-mounts"
div broke .editor-mount { flex: 1 } because the wrapper is a plain block,
not a flex container. CodeMirror collapsed to content height (~27px)
instead of filling the panel.
Fix: drop the wrapper, append mounts directly to .editor-panel (which
is already display: flex, flex-direction: column). Matches the original
DOM layout exactly.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Summary
Splits the 565-line
playground.astrointo compartmentalized modules, setting up a clean boundary for adding an ESM playground in a follow-up PR.The wedge between IIFE and ESM is just one method —
buildSrcdoc(files) → string. Everything else (editors, tabs, console capture, URL hash, status bar, run button, keybinding) is genuinely shared. This PR extracts the shared bits now so the ESM PR is purely additive.Files
src/playground/styles.css— the CSS block, verbatimsrc/playground/runner.ts—Runnerinterface:{ title, tabs, init, buildSrcdoc }src/playground/shell.ts— runner-agnostic UI; builds DOM from a runner specsrc/playground/runner-iife.ts— currentesbuild.transform+ IIFE srcdoc logicsrc/playground/entry-iife.ts— page entry; URL imports for esbuild-wasm / CodeMirrorsrc/pages/playground.astro— ~15 lines:<head>+ mount point + one<script>Design notes
Dependency injection for URL imports. The page entry does the esm.sh imports and passes them into
mount(...). This keepsshell.ts/runner-iife.tsas pure TS that Vite bundles cleanly — no URL imports leaking into module code, no accidental coupling.URL hash format unchanged. Still flat
{ html, js }, so existing shared playground URLs keep working.No behavior change. This is a pure refactor; visual output and UX are identical.
Test plan
/playgroundloads🤖 Generated with Claude Code