Skip to content

Move playground state and effects into React and Jotai - #67

Merged
skratchdot merged 2 commits into
mainfrom
react-playground-state
Sep 9, 2026
Merged

skratchdot merged 2 commits into
mainfrom
react-playground-state

Conversation

@skratchdot

@skratchdot skratchdot commented Sep 9, 2026

Copy link
Copy Markdown
Owner

Move playground state and lifecycle coordination into React and Jotai. Components now consume the document-scoped Jotai Provider directly, and playground actions come from React context. Settings, custom algorithms, playback preferences, and visualization choice survive client-side navigation while Home's audio and worker resources are disposed.

Changes:

  • Replace the module-level vanilla store, explicit store props, and custom snapshot subscriptions with Jotai hooks and player-state atoms.
  • Replace the playground controller and three settings subscription controllers with usePlayers and useSort. React effects own audio setup, settings synchronization, sample preloading, worker cancellation, and edit debouncing.
  • Keep transport and synthesis as imperative audio adapters. Audio callbacks read current provider state without subscribing; player callbacks publish into atoms. Cleanup releases recorded frames and ignores late callbacks.
  • Preserve immediate page-hide suspension and handle batched hide/show events without leaving cancelled work or open dialogs behind. Restore current settings without automatically starting playback.
  • Move player and MIDI helpers into their domain folders, use a React ref for the preview canvas, and update the architecture documentation.
  • Enable Oxlint's React hook-order and effect-dependency checks. Add Vitest Browser Mode coverage in real Chromium using React Testing Library in place of the removed controller subscription tests, plus navigation regression coverage.

Validation:

  • pnpm run check: lint, formatting, spelling, TypeScript, 353 tests, and production build pass.
  • Full Playwright suite: 43 tests pass, including accessibility, editor loading/failures, built-in and custom algorithms, no-Worker fallback, waveform/soundfont controls, playback, MIDI export, navigation, and page lifecycle cleanup.
  • Vitest runs Node and Chromium projects through pnpm test; both CI workflows install Chromium before checks. jsdom is not installed. Loop controls update their atom directly instead of passing through the action context.
  • Hook tests cover provider isolation, Strict Mode cleanup, focused settings effects, stale worker replies, edit debouncing, suspension, autoplay, and late player callbacks.
  • git diff --check passes.

Audio synthesis and transport algorithms are unchanged. Automated checks exercise their integration; no new listening comparison was performed.

@skratchdot
skratchdot merged commit 0e0c206 into main Sep 9, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant