From 3e70353b3613deb6ca3be0bbd85735d74028ebfc Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 7 Jun 2026 12:44:41 -0700
Subject: [PATCH] Remove @redux-devtools/extension dependency

Use the standard window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ runtime
check instead of importing the package. DevTools still work if the
browser extension is installed.

Also inline the defaultMemoize usage from reselect to fix Vite dev
server compatibility.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/webamp/js/selectors.ts | 14 ++++++++++----
 packages/webamp/js/store.ts     | 12 ++++++++----
 packages/webamp/package.json    |  1 -
 pnpm-lock.yaml                  |  3 ---
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/webamp/js/selectors.ts b/packages/webamp/js/selectors.ts
index a0ec2065..179bb626 100644
--- a/packages/webamp/js/selectors.ts
+++ b/packages/webamp/js/selectors.ts
@@ -18,7 +18,7 @@ import {
   PlayerMediaStatus,
   MediaStatus,
 } from "./types";
-import { createSelector, defaultMemoize } from "reselect";
+import { createSelector } from "reselect";
 import * as Utils from "./utils";
 import {
   TRACK_HEIGHT,
@@ -339,9 +339,15 @@ export const getDuration = (state: AppState): number | null => {
 };
 
 export const getTrackDisplayName = createSelector(getTracks, (tracks) => {
-  return defaultMemoize((trackId: number | null) =>
-    fromTracks.getTrackDisplayName(tracks, trackId)
-  );
+  let lastArg: number | null | undefined;
+  let lastResult: string | null;
+  return (trackId: number | null) => {
+    if (trackId !== lastArg) {
+      lastArg = trackId;
+      lastResult = fromTracks.getTrackDisplayName(tracks, trackId);
+    }
+    return lastResult;
+  };
 });
 
 export const getCurrentTrackDisplayName = createSelector(
diff --git a/packages/webamp/js/store.ts b/packages/webamp/js/store.ts
index 9929ea1e..8349cf19 100644
--- a/packages/webamp/js/store.ts
+++ b/packages/webamp/js/store.ts
@@ -1,10 +1,10 @@
 import {
   legacy_createStore as createStore,
   applyMiddleware,
+  compose as reduxCompose,
   Middleware as ReduxMiddleware,
 } from "redux";
 import { withExtraArgument } from "redux-thunk";
-import { composeWithDevTools } from "@redux-devtools/extension";
 import reducer from "./reducers";
 import mediaMiddleware from "./mediaMiddleware";
 import { merge } from "./utils";
@@ -19,9 +19,13 @@ import {
   Store,
 } from "./types";
 
-const compose = composeWithDevTools({
-  actionsDenylist: ["UPDATE_TIME_ELAPSED", "STEP_MARQUEE"],
-});
+// Use Redux DevTools extension if available, otherwise plain compose
+const compose =
+  (typeof window !== "undefined" &&
+    (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__?.({
+      actionsDenylist: ["UPDATE_TIME_ELAPSED", "STEP_MARQUEE"],
+    })) ||
+  reduxCompose;
 
 export default function createWebampStore(
   media: IMedia,
diff --git a/packages/webamp/package.json b/packages/webamp/package.json
index 6c6d45d9..40468ece 100644
--- a/packages/webamp/package.json
+++ b/packages/webamp/package.json
@@ -108,7 +108,6 @@
     "trailingComma": "es5"
   },
   "dependencies": {
-    "@redux-devtools/extension": "^3.3.0",
     "@sentry/browser": "5.9.1",
     "butterchurn": "3.0.0-beta.5",
     "butterchurn-presets": "3.0.0-beta.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 144727d4..50c0e833 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -323,9 +323,6 @@ importers:
 
   packages/webamp:
     dependencies:
-      '@redux-devtools/extension':
-        specifier: ^3.3.0
-        version: 3.3.0(redux@5.0.1)
       '@sentry/browser':
         specifier: 5.9.1
         version: 5.9.1