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

[Enhancement] JS/TS playground: Prettier-backed Format provider for Monaco #36

New Issue
Closed
opened 2026-04-28 23:48:46 +00:00 by spikerj · 1 comment
spikerj commented 2026-04-28 23:48:46 +00:00
Owner
Copy Link
Copy Source

Summary

Implement actual formatting for JavaScript (and TypeScript if exposed in Monaco with matching language id) in the Monaco playground.

Approach — Prettier

  • prettier/standalone + prettier/parser-babel (extend with typescript / babel-ts parsers as needed for TS curricula).
  • Wire into Monaco via registerDocumentFormattingEditProvider('javascript', …) (duplicate registration for typescript if distinct model id).
  • Keep bundle impact explicit (tree-shaken plugins only).

Parity targets

  • Formatter matches Prettier defaults unless we deliberately pin .prettierrc-style presets for learners.
  • Handles parse errors: show friendly message, preserve editor content.
  • Large files: async off main thread where practical (dynamic import / worker — optional milestone).

Dependency

  • Parent: platform Format toolbar wiring (see sibling “Format document — platform” ticket).
  • Upstream: Monaco migration #24.
## Summary Implement **actual formatting** for **JavaScript** (and **TypeScript** if exposed in Monaco with matching language id) in the Monaco playground. ## Approach — Prettier - **`prettier/standalone`** + **`prettier/parser-babel`** (extend with **`typescript`** / **`babel-ts`** parsers as needed for TS curricula). - Wire into Monaco via **`registerDocumentFormattingEditProvider('javascript', …)`** (duplicate registration for **`typescript`** if distinct model id). - Keep bundle impact explicit (tree-shaken plugins only). ## Parity targets - [ ] Formatter matches **Prettier defaults** unless we deliberately pin `.prettierrc`-style presets for learners. - [ ] Handles **parse errors**: show friendly message, preserve editor content. - [ ] **Large files**: async off main thread where practical (dynamic import / worker — optional milestone). ## Dependency - **Parent**: platform Format toolbar wiring (see sibling “Format document — platform” ticket). - **Upstream**: Monaco migration `#24`.
spikerj commented 2026-05-06 03:42:30 +00:00
Author
Owner
Copy Link
Copy Source

Closing -- shipped in spikersoft-angular. Summary of the implementation against the parity targets in the ticket:

Approach

  • Library: prettier@3.x moved from devDependencies to dependencies so it ships at runtime. We dynamically import('prettier/standalone') plus the babel, typescript, and estree parser plugins on the FIRST format request -- the heavy module never enters the initial chunk. Cached in a private field after first load so the second Format Document is synchronous.
  • Monaco wiring: MonacoPrettierFormatterService.attach(monaco) registers a DocumentFormattingEditProvider for both javascript and typescript model languages, returning a single full-document TextEdit covering the model's full range. Format Document (Shift+Alt+F) and the editor context menu both go through this provider.
  • Per-learner config: PrettierConfigStore (signals + localStorage) holds a typed PrettierLearnerOptions shape covering printWidth, tabWidth, useTabs, semi, singleQuote, trailingComma, bracketSpacing, arrowParens, endOfLine. Persistence is imperative inside set/patch/reset so it's testable without flushing effects. Defaults match Prettier's canonical defaults exactly so a learner who never touches the panel sees vanilla Prettier behavior.
  • Visual config UI: JsFormattingOptionsPanelComponent (form controls bound directly to typed setNumber/setBoolean/setTrailingComma setters) hosted inside a CDK Overlay popover triggered from a new gear icon in the JS playground's debugger toolbar (JsFormattingOptionsButtonComponent). Includes a Format Now button that fires the formatter against the active model, and a Reset to defaults button.
  • .prettierrc in advanced sandbox mode: a synthetic .prettierrc virtual file is seeded into the file panel when the JS playground is in advanced sandbox mode. Bidirectional binding between the file's content and PrettierConfigStore -- visual panel toggles write canonical JSON to the file; user edits to the JSON parse back into the store. Loop-prevented via tracked-last-write comparison. Beginner mode and lesson mode are excluded. The synthetic file is filtered out of the runtime payload (snapshotFiles() drops dotfiles), and the file-panel guards (setEntryFile/startRename/deleteFile) refuse to act on synthetic files so it can't be set as entry, renamed, or deleted -- the UI hides those buttons and the handlers no-op as defense-in-depth.

Parity targets

  • Formatter matches Prettier defaults -- PRETTIER_DEFAULTS mirrors Prettier's published defaults; learners can override per-option via the panel or by editing .prettierrc. No opinionated overrides.
  • Handles parse errors -- MonacoPrettierFormatterService.format() catches Prettier exceptions, returns null (so Monaco preserves the editor content unchanged), and surfaces the error message via the toolbar's transient banner. The .prettierrc file watcher silently ignores invalid JSON mid-edit (store keeps last-good value) so the UI doesn't whiplash on every keystroke.
  • Tree-shaken plugins only -- only prettier/plugins/babel, typescript, and estree are imported. No CSS/markdown/yaml/etc. parsers. Lazy-loaded so they aren't in the initial bundle.
  • Worker offload -- left as the optional milestone called out in the ticket. Format times on representative learner files (a few hundred lines) are imperceptible on the main thread; can revisit if larger curricula appear.

Test coverage

  • prettier-config.store.spec.ts -- defaults, patch, reset, normalization, toJson/fromJson round-trip, malformed JSON handling, persistence across re-instantiation.
  • js-formatting-options-panel.component.spec.ts -- typed setters, NaN input handling, enum setters, Reset button, Format Now event emission, error display.
  • language-runner-prettierrc.spec.ts (12 cases) -- seeding, mode/level gating, store->file and file->store propagation, invalid-JSON handling, runtime snapshot filtering, file-panel guards (setEntryFile, startRename, deleteFile all refuse synthetic files), isSyntheticFile predicate, deletion re-seed safety net.
  • Full tools (373 passing) and spikersoft (2033 passing) suites green; production build clean.

Touched files

  • libraries/tools/src/services/prettier/{prettier-config.store.ts, monaco-prettier-formatter.service.ts, index.ts} -- new
  • libraries/tools/src/components/js-formatting-options/* -- new (panel + popover button)
  • libraries/tools/src/components/js-debugger-toolbar/js-debugger-toolbar.component.{ts,html,scss} -- gear icon + format-error surface
  • libraries/tools/src/components/javascript-runner/javascript-runner.ts -- registers the formatter, wires formatNowRequested
  • libraries/tools/src/services/language-runner/language-runner-config.ts -- new injectPrettierRc flag (true on JS config)
  • libraries/tools/src/components/language-runner/language-runner.{ts,html} -- bidirectional .prettierrc binding, dotfile filter on snapshotFiles(), isSyntheticFile predicate, file-panel guards
  • libraries/tools/src/index.ts -- new barrel exports
  • package.json -- prettier moved to dependencies

Monaco migration parent (#24) and Format toolbar parent (#35) are both satisfied for JS/TS through this work.

Closing -- shipped in `spikersoft-angular`. Summary of the implementation against the parity targets in the ticket: ## Approach - **Library**: `prettier@3.x` moved from `devDependencies` to `dependencies` so it ships at runtime. We dynamically `import('prettier/standalone')` plus the `babel`, `typescript`, and `estree` parser plugins on the FIRST format request -- the heavy module never enters the initial chunk. Cached in a private field after first load so the second `Format Document` is synchronous. - **Monaco wiring**: `MonacoPrettierFormatterService.attach(monaco)` registers a `DocumentFormattingEditProvider` for both `javascript` and `typescript` model languages, returning a single full-document `TextEdit` covering the model's full range. `Format Document` (`Shift+Alt+F`) and the editor context menu both go through this provider. - **Per-learner config**: `PrettierConfigStore` (signals + `localStorage`) holds a typed `PrettierLearnerOptions` shape covering `printWidth`, `tabWidth`, `useTabs`, `semi`, `singleQuote`, `trailingComma`, `bracketSpacing`, `arrowParens`, `endOfLine`. Persistence is imperative inside `set/patch/reset` so it's testable without flushing effects. Defaults match Prettier's canonical defaults exactly so a learner who never touches the panel sees vanilla Prettier behavior. - **Visual config UI**: `JsFormattingOptionsPanelComponent` (form controls bound directly to typed `setNumber`/`setBoolean`/`setTrailingComma` setters) hosted inside a CDK Overlay popover triggered from a new gear icon in the JS playground's debugger toolbar (`JsFormattingOptionsButtonComponent`). Includes a `Format Now` button that fires the formatter against the active model, and a `Reset to defaults` button. - **`.prettierrc` in advanced sandbox mode**: a synthetic `.prettierrc` virtual file is seeded into the file panel when the JS playground is in advanced sandbox mode. Bidirectional binding between the file's content and `PrettierConfigStore` -- visual panel toggles write canonical JSON to the file; user edits to the JSON parse back into the store. Loop-prevented via tracked-last-write comparison. Beginner mode and lesson mode are excluded. The synthetic file is filtered out of the runtime payload (`snapshotFiles()` drops dotfiles), and the file-panel guards (`setEntryFile`/`startRename`/`deleteFile`) refuse to act on synthetic files so it can't be set as entry, renamed, or deleted -- the UI hides those buttons and the handlers no-op as defense-in-depth. ## Parity targets - [x] **Formatter matches Prettier defaults** -- `PRETTIER_DEFAULTS` mirrors Prettier's published defaults; learners can override per-option via the panel or by editing `.prettierrc`. No opinionated overrides. - [x] **Handles parse errors** -- `MonacoPrettierFormatterService.format()` catches Prettier exceptions, returns `null` (so Monaco preserves the editor content unchanged), and surfaces the error message via the toolbar's transient banner. The `.prettierrc` file watcher silently ignores invalid JSON mid-edit (store keeps last-good value) so the UI doesn't whiplash on every keystroke. - [x] **Tree-shaken plugins only** -- only `prettier/plugins/babel`, `typescript`, and `estree` are imported. No CSS/markdown/yaml/etc. parsers. Lazy-loaded so they aren't in the initial bundle. - [ ] **Worker offload** -- left as the optional milestone called out in the ticket. Format times on representative learner files (a few hundred lines) are imperceptible on the main thread; can revisit if larger curricula appear. ## Test coverage - `prettier-config.store.spec.ts` -- defaults, `patch`, `reset`, normalization, `toJson`/`fromJson` round-trip, malformed JSON handling, persistence across re-instantiation. - `js-formatting-options-panel.component.spec.ts` -- typed setters, NaN input handling, enum setters, Reset button, Format Now event emission, error display. - `language-runner-prettierrc.spec.ts` (12 cases) -- seeding, mode/level gating, store->file and file->store propagation, invalid-JSON handling, runtime snapshot filtering, file-panel guards (`setEntryFile`, `startRename`, `deleteFile` all refuse synthetic files), `isSyntheticFile` predicate, deletion re-seed safety net. - Full `tools` (373 passing) and `spikersoft` (2033 passing) suites green; production build clean. ## Touched files - `libraries/tools/src/services/prettier/{prettier-config.store.ts, monaco-prettier-formatter.service.ts, index.ts}` -- new - `libraries/tools/src/components/js-formatting-options/*` -- new (panel + popover button) - `libraries/tools/src/components/js-debugger-toolbar/js-debugger-toolbar.component.{ts,html,scss}` -- gear icon + format-error surface - `libraries/tools/src/components/javascript-runner/javascript-runner.ts` -- registers the formatter, wires `formatNowRequested` - `libraries/tools/src/services/language-runner/language-runner-config.ts` -- new `injectPrettierRc` flag (true on JS config) - `libraries/tools/src/components/language-runner/language-runner.{ts,html}` -- bidirectional `.prettierrc` binding, dotfile filter on `snapshotFiles()`, `isSyntheticFile` predicate, file-panel guards - `libraries/tools/src/index.ts` -- new barrel exports - `package.json` -- `prettier` moved to `dependencies` Monaco migration parent (#24) and Format toolbar parent (#35) are both satisfied for JS/TS through this work.
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
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#36