REPL/Playground, Let's do it Live!
summary
A working Ember playground is built that compiles and renders editable single-file components in the browser using a Babel-based gjs single-file components + strict-mode compilation pipeline, then evaluates code by hijacking AMD require.js so imports resolve at runtime; live demos update faster than full HMR and preserve the last valid render on compile errors. Editors compared: Monaco ~9MB vs CodeMirror 550KB (~6%). Shadow DOM, StackBlitz web containers (Chrome only), and contextual compiler errors are implemented.
AI-written summary · about
chapters (16)
- 0:00Introduction and background
- 1:05What is a REPL or playground
- 3:11Why REPLs matter in Ember
- 4:13Demo setup and tools
- 5:17Live demo of REPL features
- 7:25GJS format benefits
- 8:28Shadow DOM in design systems
- 9:55Editor performance considerations
- 13:05Building a REPL from scratch
- 15:15How REPL compilation works
- 18:26Evaluating code safely
- 20:51Error handling in REPLs
- 21:33Improving error messages
- 23:16Security and containerization
- 24:57Editor support and future plans
- 26:41Closing thoughts
