Replace React with Preact via compat layer

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>

Author: captbaritone

packages/webamp-demo/package.json

@@ -8,7 +8,10 @@
     "serve": "vite preview"
   },
   "devDependencies": {
+    "@preact/compat": "^18.3.2",
     "@sentry/browser": "5.9.1",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
     "ani-cursor": "workspace:*",
     "butterchurn": "3.0.0-beta.5",
     "butterchurn-presets": "3.0.0-beta.4",
@@ -19,18 +22,17 @@
     "milkdrop-preset-converter-aws": "^0.1.6",
     "music-metadata": "^11.6.0",
     "music-metadata-browser": "^0.6.1",
+    "preact": "^10.29.8",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-redux": "^8.0.5",
     "redux": "^5.0.0-alpha.0",
     "redux-sentry-middleware": "^0.1.3",
     "redux-thunk": "^3.1.0",
     "reselect": "^3.0.1",
+    "rollup-plugin-polyfill-node": "^0.13.0",
     "strtok3": "^10.3.1",
     "tinyqueue": "^3.0.0",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "rollup-plugin-polyfill-node": "^0.13.0",
     "typescript": "^5.6.2",
     "vite": "^5.2.12",
     "webamp": "workspace:*",

packages/webamp-demo/vite.config.ts

@@ -7,6 +7,15 @@ export default defineConfig({
     chunkSizeWarningLimit: 2500,
   },
   assetsInclude: ["**/*.wsz", "**/*.mp3"],
+  resolve: {
+    alias: {
+      "react/jsx-runtime": "preact/jsx-runtime",
+      "react/jsx-dev-runtime": "preact/jsx-runtime",
+      "react-dom/client": "preact/compat/client",
+      "react-dom": "preact/compat",
+      react: "preact/compat",
+    },
+  },
   plugins: [
     // Needed for music-metadata-browser which uses polyfillable node APIs
     // @ts-expect-error Rollup plugin type mismatch with Vite's stricter types

packages/webamp/js/actionCreators/media.ts

@@ -117,15 +117,19 @@ export function scrollVolume(e: WheelEvent): Thunk {
   };
 }
 
-export function setBalance(balance: number): Action {
+export function snapBalance(balance: number): number {
   balance = clamp(balance, -100, 100);
   // The balance clips to the center
   if (Math.abs(balance) < 25) {
     balance = 0;
   }
+  return balance;
+}
+
+export function setBalance(balance: number): Action {
   return {
     type: "SET_BALANCE",
-    balance,
+    balance: snapBalance(balance),
   };
 }
 

packages/webamp/js/components/Balance.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
+import { useRef } from "react";
 
 import * as Actions from "../actionCreators";
+import { snapBalance } from "../actionCreators/media";
 import * as Selectors from "../selectors";
 import { useTypedSelector, useActionCreator } from "../hooks";
 
@@ -15,8 +17,21 @@ export default function Balance({ style, className, id }: Props) {
   const setBalance = useActionCreator(Actions.setBalance);
   const setFocus = useActionCreator(Actions.setFocus);
   const unsetFocus = useActionCreator(Actions.unsetFocus);
+  const ref = useRef<HTMLInputElement>(null);
+
+  const handleInput = (e: Event) => {
+    const input = e.target as HTMLInputElement;
+    const snapped = snapBalance(Number(input.value));
+    // Force DOM value to match snapped value so the slider visually snaps
+    if (String(snapped) !== input.value) {
+      input.value = String(snapped);
+    }
+    setBalance(snapped);
+  };
+
   return (
     <input
+      ref={ref}
       id={id}
       className={className}
       type="range"
@@ -25,7 +40,7 @@ export default function Balance({ style, className, id }: Props) {
       step="1"
       value={balance}
       style={{ ...style, touchAction: "none" }}
-      onChange={(e) => setBalance(Number(e.target.value))}
+      onInput={handleInput}
       onPointerDown={() => setFocus("balance")}
       onPointerUp={unsetFocus}
       title="Balance"

packages/webamp/js/components/Volume.tsx

@@ -25,7 +25,7 @@ export default function Volume({ id, style, className }: Props) {
       value={volume}
       style={{ ...style, touchAction: "none" }}
       className={className}
-      onChange={(e) => setVolume(Number(e.target.value))}
+      onInput={(e) => setVolume(Number((e.target as HTMLInputElement).value))}
       onPointerDown={() => setFocus("volume")}
       onPointerUp={unsetFocus}
       title="Volume Bar"

packages/webamp/package.json

@@ -61,24 +61,7 @@
   },
   "homepage": "https://github.com/captbaritone/webamp/",
   "devDependencies": {
-    "ani-cursor": "workspace:*",
-    "butterchurn": "3.0.0-beta.5",
-    "butterchurn-presets": "3.0.0-beta.4",
-    "classnames": "^2.2.5",
-    "invariant": "^2.2.3",
-    "jszip": "^3.10.1",
-    "lodash": "^4.17.21",
-    "music-metadata": "^11.6.0",
-    "music-metadata-browser": "^0.6.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-redux": "^8.0.5",
-    "redux": "^5.0.0-alpha.0",
-    "redux-thunk": "^3.1.0",
-    "reselect": "^3.0.1",
-    "strtok3": "^10.3.1",
-    "tinyqueue": "^3.0.0",
-    "winamp-eqf": "workspace:*",
+    "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.8",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -95,18 +78,37 @@
     "@types/webaudioapi": "^0.0.27",
     "@typescript-eslint/eslint-plugin": "^8.36.0",
     "@typescript-eslint/parser": "^8.36.0",
+    "ani-cursor": "workspace:*",
+    "butterchurn": "3.0.0-beta.5",
+    "butterchurn-presets": "3.0.0-beta.4",
+    "classnames": "^2.2.5",
     "data-uri-to-buffer": "^2.0.0",
     "imagemin": "^6.1.0",
     "imagemin-optipng": "^6.0.0",
+    "invariant": "^2.2.3",
+    "jszip": "^3.10.1",
+    "lodash": "^4.17.21",
+    "music-metadata": "^11.6.0",
+    "music-metadata-browser": "^0.6.1",
     "postcss": "^8.4.21",
     "postcss-import": "^16.1.0",
+    "preact": "^10.29.8",
     "puppeteer": "^22.2.0",
-    "vitest": "^3.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-redux": "^8.0.5",
+    "redux": "^5.0.0-alpha.0",
+    "redux-thunk": "^3.1.0",
+    "reselect": "^3.0.1",
     "rollup": "^4.18.0",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-visualizer": "^5.12.0",
-    "typescript": "^5.6.2"
+    "strtok3": "^10.3.1",
+    "tinyqueue": "^3.0.0",
+    "typescript": "^5.6.2",
+    "vitest": "^3.2.0",
+    "winamp-eqf": "workspace:*"
   },
   "prettier": {
     "trailingComma": "es5"

packages/webamp/scripts/rollupPlugins.mjs

@@ -5,6 +5,7 @@ import { nodeResolve } from "@rollup/plugin-node-resolve";
 import postcss from "rollup-plugin-postcss";
 import terser from "@rollup/plugin-terser";
 import { visualizer } from "rollup-plugin-visualizer";
+import alias from "@rollup/plugin-alias";
 import replace from "@rollup/plugin-replace";
 import postcssOptimizeDataUriPngs from "./postcss-optimize-data-uri-pngs.mjs";
 import atImport from "postcss-import";
@@ -13,6 +14,15 @@ import path from "node:path";
 
 export function getPlugins({ minify, outputFile }) {
   const plugins = [
+    alias({
+      entries: [
+        { find: "react/jsx-runtime", replacement: "preact/jsx-runtime" },
+        { find: "react/jsx-dev-runtime", replacement: "preact/jsx-runtime" },
+        { find: "react-dom/client", replacement: "preact/compat/client" },
+        { find: "react-dom", replacement: "preact/compat" },
+        { find: "react", replacement: "preact/compat" },
+      ],
+    }),
     replace({
       // Ensure we don't use the dev build of React
       values: { "process.env.NODE_ENV": JSON.stringify("production") },
@@ -25,14 +35,15 @@ export function getPlugins({ minify, outputFile }) {
       browser: true,
       preferBuiltins: false,
       // Skip deep resolution for better performance
-      dedupe: ["react", "react-dom"],
+      dedupe: ["preact"],
     }),
     // Needed for music-metadata-browser in the Webamp bundle which depends upon
     // being able to use some polyfillable node APIs
     nodePolyfills(),
     typescript({
       compilerOptions: {
         jsx: "react-jsx",
+        jsxImportSource: "preact",
         module: "esnext",
         declaration: false,
         declarationDir: undefined,