spikerj/spikersoft-issues
1
0
Fork 0
Code Issues 196 Pull Requests Actions Packages Projects Releases Wiki Activity

[Playgrounds P1] Migrate JavaScript playground onto LanguagePlaygroundShellComponent #324

New Issue
Closed
opened 2026-07-02 00:49:59 +00:00 by spikerj · 2 comments
spikerj commented 2026-07-02 00:49:59 +00:00
Owner
Copy Link
Copy Source

Phase P1 of epic #323.

JavaScript is the only core-language playground still on the old direct-LanguageRunner wrapper. libraries/features/dev-tools-javascript-runner/src/lib/javascript-runner.ts imports LanguageRunner, JsDebuggerToolbarComponent, JsDebugVarsPanelComponent, JsDebugConsolePanelComponent, and CodeSubmissionHistory directly — so JS students get none of the shared shell chrome (File/View/Mode/Lessons/Help menus, lesson/sandbox toggle, status chips, guided tour, curriculum pane, Concepts/Submissions/Results tabs).

Migration template: the Python runner (libraries/features/dev-tools-python-runner/src/lib/python-runner.ts) already projects a debugger toolbar + vars/console panels into the shell, so the pattern is proven.

  • Replace the direct app-language-runner template with <lib-language-playground-shell storageKey="spikersoft.javascript-runner.shell.v1" submissionLanguage="javascript">
  • Project JsDebuggerToolbarComponent / JsDebugVarsPanelComponent / JsDebugConsolePanelComponent through the shell's projection slots (mirror the Python provider/imports wiring)
  • Wire the concept pane: provide LANGUAGE_CONCEPT_REGISTRY with JS concepts + LANGUAGE_CONCEPT_TRANSLATIONS (es), LanguageConceptRegistryService, LanguageHighlightService, KEYWORD_HIGHLIGHT_HANDLER — authoring the JS concept registry content is in scope
  • Preserve Prettier formatting support and move submission history into the shell's Submissions tab (drop the bespoke side pane)
  • Verify the existing JS guided tour (buildJavaScriptTour in language-runner-config.ts) still anchors correctly inside the shell
  • Confirm lesson mode, sandbox mode, and offline behavior match the other four playgrounds

Acceptance: /tools JavaScript playground renders the same shell chrome as C/C++/Python/C#; JS debugger features keep working; no regression in the anonymous-walk E2E.

Phase P1 of epic #323. JavaScript is the only core-language playground still on the old direct-`LanguageRunner` wrapper. `libraries/features/dev-tools-javascript-runner/src/lib/javascript-runner.ts` imports `LanguageRunner`, `JsDebuggerToolbarComponent`, `JsDebugVarsPanelComponent`, `JsDebugConsolePanelComponent`, and `CodeSubmissionHistory` directly — so JS students get none of the shared shell chrome (File/View/Mode/Lessons/Help menus, lesson/sandbox toggle, status chips, guided tour, curriculum pane, Concepts/Submissions/Results tabs). **Migration template:** the Python runner (`libraries/features/dev-tools-python-runner/src/lib/python-runner.ts`) already projects a debugger toolbar + vars/console panels into the shell, so the pattern is proven. - [ ] Replace the direct `app-language-runner` template with `<lib-language-playground-shell storageKey="spikersoft.javascript-runner.shell.v1" submissionLanguage="javascript">` - [ ] Project `JsDebuggerToolbarComponent` / `JsDebugVarsPanelComponent` / `JsDebugConsolePanelComponent` through the shell's projection slots (mirror the Python provider/imports wiring) - [ ] Wire the concept pane: provide `LANGUAGE_CONCEPT_REGISTRY` with JS concepts + `LANGUAGE_CONCEPT_TRANSLATIONS` (es), `LanguageConceptRegistryService`, `LanguageHighlightService`, `KEYWORD_HIGHLIGHT_HANDLER` — authoring the JS concept registry content is in scope - [ ] Preserve Prettier formatting support and move submission history into the shell's Submissions tab (drop the bespoke side pane) - [ ] Verify the existing JS guided tour (`buildJavaScriptTour` in `language-runner-config.ts`) still anchors correctly inside the shell - [ ] Confirm lesson mode, sandbox mode, and offline behavior match the other four playgrounds **Acceptance:** `/tools` JavaScript playground renders the same shell chrome as C/C++/Python/C#; JS debugger features keep working; no regression in the anonymous-walk E2E.
spikerj added the enhancement label 2026-07-02 00:49:59 +00:00
spikerj commented 2026-07-02 01:08:34 +00:00
Author
Owner
Copy Link
Copy Source

PR open: spikersoft-angular#94 (spikerj/spikersoft-angular#94), branch feat/issue-324-js-playground-shell off master.

Against this issue's checklist:

  • Direct app-language-runner template replaced with <lib-language-playground-shell storageKey="spikersoft.javascript-runner.shell.v1" submissionLanguage="javascript">
  • Debugger toolbar / vars / console panels projected through the shell slots (Python pattern)
  • Concept pane wired: 30-entry JAVASCRIPT_CONCEPTS registry authored (Tier00–Tier16 vocabulary) + full es overlay; "javascript" added to LanguageConceptLanguage; highlight services provided
  • Prettier preserved (registers on first shell-re-emitted editorReady); submission history moved into the shell's Submissions tab, bespoke pane deleted
  • Tour: buildJavaScriptTour targets data-tour attrs inside the (unchanged) runner — compiles and renders; flagged a manual eyeball of the anchors in the PR as follow-up
  • Lesson/sandbox/offline behavior now flows through the exact same shell code paths as the other four playgrounds

Also added JavaScript Help-menu resources (MDN Guide/Reference, QuickJS) with en+es keys — one less gap for the P2 audit (#325).

Verified: lib tests 40/40, full pnpm build, pnpm run lint (ESLint boundaries + Prettier + Stylelint) all green. Will close when #94 merges.

PR open: spikersoft-angular#94 (https://git.spikersoft.com/spikerj/spikersoft-angular/pulls/94), branch `feat/issue-324-js-playground-shell` off `master`. Against this issue's checklist: - [x] Direct `app-language-runner` template replaced with `<lib-language-playground-shell storageKey="spikersoft.javascript-runner.shell.v1" submissionLanguage="javascript">` - [x] Debugger toolbar / vars / console panels projected through the shell slots (Python pattern) - [x] Concept pane wired: 30-entry `JAVASCRIPT_CONCEPTS` registry authored (Tier00–Tier16 vocabulary) + full es overlay; `"javascript"` added to `LanguageConceptLanguage`; highlight services provided - [x] Prettier preserved (registers on first shell-re-emitted editorReady); submission history moved into the shell's Submissions tab, bespoke pane deleted - [x] Tour: `buildJavaScriptTour` targets `data-tour` attrs inside the (unchanged) runner — compiles and renders; flagged a manual eyeball of the anchors in the PR as follow-up - [x] Lesson/sandbox/offline behavior now flows through the exact same shell code paths as the other four playgrounds Also added JavaScript Help-menu resources (MDN Guide/Reference, QuickJS) with en+es keys — one less gap for the P2 audit (#325). Verified: lib tests 40/40, full `pnpm build`, `pnpm run lint` (ESLint boundaries + Prettier + Stylelint) all green. Will close when #94 merges.
spikerj commented 2026-07-02 01:21:55 +00:00
Author
Owner
Copy Link
Copy Source

Resolved in spikersoft-angular PR #94 (merged to master). JavaScript playground now renders the shared LanguagePlaygroundShellComponent with the debugger toolbar/rail projected through the shell slots, a 30-entry Concept Reference registry + full es overlay (with the coverage guard spec), submission history in the shell's Submissions tab, Prettier + Monaco bridge preserved, and JS Help-menu resources (en+es). All five core playgrounds (C / C++ / JavaScript / Python / C#) now share the same chrome. Closing.

Resolved in spikersoft-angular PR #94 (merged to `master`). JavaScript playground now renders the shared `LanguagePlaygroundShellComponent` with the debugger toolbar/rail projected through the shell slots, a 30-entry Concept Reference registry + full es overlay (with the coverage guard spec), submission history in the shell's Submissions tab, Prettier + Monaco bridge preserved, and JS Help-menu resources (en+es). All five core playgrounds (C / C++ / JavaScript / Python / C#) now share the same chrome. Closing.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
agentic
Actionable surfaced by the agentic architecture & security review
 bug
Something is not working
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 question
More information is needed
 sonarqube
Code quality issue surfaced by SonarQube (bug / code smell)
 wontfix
This won't be fixed
No labels enhancement
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
spikerj (Joseph Spiker)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#324