mpckit/pull-requests/frontend-format/format-the-frontend-with-prettier.md

Format the frontend with Prettier

Branch: frontend-format → main

PR 11 of the review fixes plan (docs/review-fixes-plan.md), a readability PR: no behaviour change, no version change.

What changed

The PR has three commits, so the large mechanical one can be skipped in review:

1. Add Prettier to the frontend (R2).
   • Dev dependencies: prettier 3.9.10 (published 2026-10-10) and prettier-plugin-svelte 4.1.1 (2026-06-15). Both are the current releases min-release-age=7 allows, and the lockfile is updated: npm added only these two packages.
   • frontend/.prettierrc: printWidth 120, double quotes, semicolons, trailing commas, and the Svelte plugin. Everything else is Prettier's default, which already matched the code: two-space indents, <script> and <style> content indented, blocks in script–markup–style order.
   • frontend/.prettierignore: dist, bindings and node_modules.
   • npm scripts: format (prettier --write .) and format:check (prettier --check .) in frontend/package.json.
2. Reformat the frontend with Prettier.
   • The output of npm run format and nothing else, across 11 files, all under frontend/.
   • Besides src, Prettier touched three config files: index.html (<!DOCTYPE html> became <!doctype html>, which HTML treats the same), svelte.config.js (single quotes to double, semicolons added) and tsconfig.json (a trailing comma removed).
3. Name the variables in SequencePanel.svelte's save() and remove() (R3).
   • s, n, b and l become slot, newName, newBpm and newBars.
   • The local slot shadows the component's slot prop on purpose: it is copied from seq.slot before the await, because props are live. A comment now says so.

Long lines: 30 lines under frontend/src were over 120 characters, the longest 250. Now 5 are, and Prettier cannot break any of them:

Line	Length	Why Prettier leaves it
src/lib/AboutModal.svelte:28	192	A svelte-ignore comment, which must stay on one line.
src/lib/SequencePanel.svelte:28	159	A template literal: the "Shorten a sequence with notes?" message.
src/App.svelte:73	143	A template literal: a pad's screen-reader label.
src/App.svelte:52	124	A string literal: the "Export is disabled…" tooltip.
src/App.svelte:236	122	Text with a {st.limits.maxSequences} expression in the sequence grid's hint.

Notes

• Whitespace that could show on screen. I compiled every component with the Svelte compiler before and after the reformat and compared the output. The compiler keeps rendered whitespace and reprints the script code, so any difference is one the page could show.
  • The result: 7 of 8 components compile to identical output. The one difference is in App.svelte: Prettier wrapped the pads tab's help paragraph ("Click a pad to select and hear it. … Drop a WAV file on any pad to assign it.") onto two lines. In the compiled template, that turns one space into a newline plus indentation inside the text.
  • Why it cannot show: that paragraph (.hint.grid-hint) uses normal whitespace handling, which collapses it back to a single space. The only white-space: pre-line rule in the app is on the error banner.
  • No ignore comments added: none was needed.
  • After the rename: SequencePanel.svelte differs from the reformatted version only in the renamed variables and the two comments.
• Left out on purpose: add() in SequencePanel.svelte also uses const s = slot. The plan names only save() and remove(), so I left add() as it is. Say if it should be renamed too.
• The checks list in the plan already includes npm run format:check from this PR on.

Testing

On the server, every command with GOTOOLCHAIN=go1.27.4:

• go test ./... passes; no test changed.
• go vet ./... and staticcheck ./... are clean, and govulncheck ./... reports "No vulnerabilities found."
• In frontend:
  • npm ci installs from the lockfile ("added 53 packages");
  • npm run check reports 0 errors and 0 warnings;
  • npm run build builds;
  • npm run format:check reports "All matched files use Prettier code style!".
• wails3 build builds and the app starts under Xvfb.
• Exports are byte-identical. Before the first commit (main) and after the last, I ran go run ./cmd/mpckit-cli -load testdata/device/DemoFile.xpj -out <dir>. cmp finds the two DemoFile.xpj identical, and diff -r finds the two data folders identical.
• No bound method changed: TestBoundMethods passes untouched. git diff origin/main shows no change in frontend/bindings, in any Go file, or anywhere outside frontend/.

On the laptop (PowerShell, in the repo). Compare each screen with the current main build; nothing should look different.

1. git fetch; git checkout frontend-format
2. cd frontend; npm ci; npm run check; npm run format:check; cd ..: 0 errors and 0 warnings; "All matched files use Prettier code style!".
3. wails3 dev, then load testdata\device\DemoFile.xpj. Pads tab:
   • Grid and help: the pad grid, the bank bar and the help paragraph under the grid read as one paragraph, with normal spacing.
   • Pad panel: select A1, then A3 and B2. The panel shows the name, file, tune and mute group.
   • Edits: change a tune and a mute group, and the badges on the pads update.
4. Move/Copy to pad:
   • From the pad panel, open Move to pad and Copy to pad. Check the picker's title, its bank and pad lists, and its hint lines ("… has a sample: the two pads will swap.", "… will be replaced.").
   • Close the picker with Escape, then with Cancel.
5. Notes warning: drag A1 onto A5. The notes warning dialog shows its message and items. Cancel.
6. Sequences tab: select Intro and Sequence 02. The panel shows the name, BPM and length, and the help line under the grid reads normally.
   • Shorten: set Sequence 02's length to 1 bar. The "Shorten a sequence with notes?" dialog shows its message. Cancel.
   • Add: add a sequence in an empty slot (B5).
   • Remove: remove that new sequence, which shows the "Remove …?" dialog with "The sequence has no recorded notes.". Confirm.
7. Export:
   • Export to a new folder. The notice shows where it went.
   • Export there again: "Replace existing files?" lists the items. Cancel.
   • Export a zip.
8. Missing files: load a copy of DemoFile with one WAV deleted from its data folder.
   • The missing-file badge and the footer line ("1 sample file missing: export is disabled") show.
   • Hovering the disabled Export buttons shows the "Export is disabled…" tooltip.
9. About, New and close:
   • About: the dialog's text, links and Close button.
   • New with unsaved changes: the "unsaved changes" confirm dialog shows.
   • Close the window with unsaved changes: the close prompt shows.