fix: remove invalid plugins from active plugins on mount

Author: AlemTuzlak

packages/devtools/src/context/devtools-context.test.ts

@@ -5,52 +5,56 @@ import { getStateFromLocalStorage } from "./devtools-context";
 
 describe('getStateFromLocalStorage', () => {
   beforeEach(() => {
-    localStorage.clear();
-  });
+    localStorage.clear()
+  })
   it('should return undefined when no data in localStorage', () => {
-    const state = getStateFromLocalStorage();
-    expect(state).toEqual(undefined);
-  });
+    const state = getStateFromLocalStorage()
+    expect(state).toEqual(undefined)
+  })
   it('should return parsed state from localStorage and not remove valid plugins', () => {
     const mockState = {
       activePlugins: ['plugin1'],
       settings: {
         theme: 'dark',
       },
-    };
-    localStorage.setItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(mockState));
-    const state = getStateFromLocalStorage([{
-      id: 'plugin1', render: () => { }, name: 'Plugin 1'
-    }]);
-    expect(state).toEqual(mockState);
-  });
+    }
+    localStorage.setItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(mockState))
+    const state = getStateFromLocalStorage([
+      {
+        id: 'plugin1',
+        render: () => { },
+        name: 'Plugin 1',
+      },
+    ])
+    expect(state).toEqual(mockState)
+  })
   it('should filter out inactive plugins', () => {
     const mockState = {
       activePlugins: ['plugin1', 'plugin2'],
       settings: {
         theme: 'dark',
       },
-    };
-    localStorage.setItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(mockState));
-    const plugins = [{ id: 'plugin1', render: () => { }, name: 'Plugin 1' }];
-    const state = getStateFromLocalStorage(plugins);
-    expect(state?.activePlugins).toEqual(['plugin1']);
-  });
+    }
+    localStorage.setItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(mockState))
+    const plugins = [{ id: 'plugin1', render: () => { }, name: 'Plugin 1' }]
+    const state = getStateFromLocalStorage(plugins)
+    expect(state?.activePlugins).toEqual(['plugin1'])
+  })
   it('should return empty plugin state if all active plugins are invalid', () => {
     const mockState = {
       activePlugins: ['plugin1', 'plugin2'],
       settings: {
         theme: 'dark',
       },
-    };
-    localStorage.setItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(mockState));
-    const plugins = [{ id: 'plugin3', render: () => { }, name: 'Plugin 3' }];
-    const state = getStateFromLocalStorage(plugins);
-    expect(state?.activePlugins).toEqual([]);
-  });
+    }
+    localStorage.setItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(mockState))
+    const plugins = [{ id: 'plugin3', render: () => { }, name: 'Plugin 3' }]
+    const state = getStateFromLocalStorage(plugins)
+    expect(state?.activePlugins).toEqual([])
+  })
   it('should handle invalid JSON in localStorage gracefully', () => {
-    localStorage.setItem(TANSTACK_DEVTOOLS_STATE, "invalid json");
-    const state = getStateFromLocalStorage();
-    expect(state).toEqual(undefined);
-  });
-});
+    localStorage.setItem(TANSTACK_DEVTOOLS_STATE, 'invalid json')
+    const state = getStateFromLocalStorage()
+    expect(state).toEqual(undefined)
+  })
+})

packages/devtools/src/context/devtools-context.tsx

@@ -39,11 +39,11 @@ export interface TanStackDevtoolsPlugin {
    * ```
    */
   name:
-  | string
-  | ((
-    el: HTMLHeadingElement,
-    theme: DevtoolsStore['settings']['theme'],
-  ) => void)
+    | string
+    | ((
+        el: HTMLHeadingElement,
+        theme: DevtoolsStore['settings']['theme'],
+      ) => void)
   /**
    * Unique identifier for the plugin.
    * If not provided, it will be generated based on the name.
@@ -99,10 +99,14 @@ const generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {
   return index.toString()
 }
 
-export function getStateFromLocalStorage(plugins?: Array<TanStackDevtoolsPlugin>) {
+export function getStateFromLocalStorage(
+  plugins?: Array<TanStackDevtoolsPlugin>,
+) {
   const existingStateString = getStorageItem(TANSTACK_DEVTOOLS_STATE)
-  const existingState = tryParseJson<DevtoolsStore["state"]>(existingStateString)
-  const pluginIds = plugins?.map((plugin, i) => generatePluginId(plugin, i)) || []
+  const existingState =
+    tryParseJson<DevtoolsStore['state']>(existingStateString)
+  const pluginIds =
+    plugins?.map((plugin, i) => generatePluginId(plugin, i)) || []
   if (existingState?.activePlugins) {
     const originalLength = existingState.activePlugins.length
     // Filter out any active plugins that are no longer available
@@ -112,10 +116,7 @@ export function getStateFromLocalStorage(plugins?: Array<TanStackDevtoolsPlugin>
 
     if (existingState.activePlugins.length !== originalLength) {
       // If any active plugins were removed, update local storage
-      setStorageItem(
-        TANSTACK_DEVTOOLS_STATE,
-        JSON.stringify(existingState),
-      )
+      setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(existingState))
     }
   }
 

packages/devtools/src/context/devtools-store.ts

@@ -81,8 +81,9 @@ export const initialState: DevtoolsStore = {
     requireUrlFlag: false,
     urlFlag: 'tanstack-devtools',
     theme:
-      typeof window !== 'undefined' && typeof window.matchMedia !== "undefined" &&
-        window.matchMedia('(prefers-color-scheme: dark)').matches
+      typeof window !== 'undefined' &&
+      typeof window.matchMedia !== 'undefined' &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
         ? 'dark'
         : 'light',
   },