Skip to content

Replace React with Preact via compat layer - #1356

Open
captbaritone wants to merge 4 commits into
masterfrom
preact-compat
Open

Replace React with Preact via compat layer#1356
captbaritone wants to merge 4 commits into
masterfrom
preact-compat

Conversation

@captbaritone

Copy link
Copy Markdown
Owner

Summary

  • Aliases react/react-dom to preact/compat in both Rollup (library build) and Vite (dev server)
  • Fixes Balance and Volume sliders to use onInput instead of onChange (Preact uses native DOM semantics where onChange only fires on commit, not during drag)
  • Extracts snapBalance() helper and forces DOM value sync during drag to preserve center-snap behavior

Bundle size impact

File Baseline gzip Preact gzip Savings
webamp.bundle.min.js 299,328 250,880 -16.2%
webamp.lazy-bundle.min.js 192,602 144,940 -24.8%

QA results

Manually tested against interaction audit checklist:

  • EQ band cross-drag
  • Button press/release tracking
  • Window dragging with snap
  • Playlist track reorder drag
  • Right-click context menus
  • Volume/balance/position sliders (balance snap fixed)
  • Playlist track selection (shift/ctrl+click)
  • Marquee text drag
  • Focus/blur handling
  • Playlist wheel scroll
  • Double-click shade toggles
  • Double-click to play track
  • Milkdrop fullscreen toggle
  • File drag-and-drop
  • Keyboard shortcuts (arrows, volume)
  • Playlist resize
  • Touch double-tap (not yet tested)

Test plan

  • All 208 unit tests pass
  • Dev server renders correctly with default and custom skins
  • Audio playback and Milkdrop visualizer work
  • Mobile touch interactions need verification

🤖 Generated with Claude Code

Alias react/react-dom to preact/compat in both the Rollup build config
and the Vite dev server config. This reduces the gzipped bundle size by
~17% (main bundle) to ~25% (lazy bundle).

Fixes Balance and Volume sliders to use onInput instead of onChange,
since Preact uses native DOM event semantics where onChange only fires
on commit. Extracts snapBalance() helper and forces DOM value sync
during drag to preserve the center-snap behavior.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@netlify

netlify Bot commented Aug 26, 2026

Copy link
Copy Markdown

Deploy Preview for tourmaline-kringle-c98715 canceled.

Name Link
🔨 Latest commit 9b2d74e
🔍 Latest deploy log https://app.netlify.com/projects/tourmaline-kringle-c98715/deploys/6a8f85897b7e1600078bde89

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown

Size Change: -96.4 kB (-19.68%) 🎉

Total Size: 393 kB

📦 View Changed
Filename Size Change
packages/webamp/built/webamp.bundle.min.js 250 kB -48.1 kB (-16.17%) 👏
packages/webamp/built/webamp.lazy-bundle.min.js 144 kB -48.2 kB (-25.12%) 🎉

compressed-size-action

captbaritone and others added 2 commits August 26, 2026 17:06
Restore original dependency order; only add preact and
@rollup/plugin-alias in place. Remove unnecessary @preact/compat.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@captbaritone

Copy link
Copy Markdown
Owner Author

Deploy preview (demo site): https://deploy-preview-1356--ecstatic-poincare-fe4c13.netlify.app/

@captbaritone
captbaritone marked this pull request as ready for review August 27, 2026 00:46
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