refactor(utils): extract getReduxExtension

Author: PrettyCoffee

src/utils/redux-extension/getReduxExtension.ts

@@ -0,0 +1,40 @@
+// Original but incomplete type of the redux extension package
+type Extension = NonNullable<typeof window.__REDUX_DEVTOOLS_EXTENSION__>;
+
+export type ReduxExtension = {
+  /** Create a connection to the extension.
+   *  This will connect a store (like an atom) to the extension and
+   *  display it within the extension tab.
+   *
+   *  @param options https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md
+   *  @returns https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Methods.md#connectoptions
+   */
+  connect: Extension['connect'];
+
+  /** Disconnects all existing connections to the redux extension.
+   *  Only use this when you are sure that no other connection exists
+   *  or you want to remove all existing connections.
+   */
+  disconnect?: () => void;
+
+  /** Have a look at the documentation for more methods:
+   *  https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Methods.md
+   */
+};
+
+/** Returns the global redux extension object if available */
+export const getReduxExtension = (
+  enabled = __DEV__,
+): ReduxExtension | undefined => {
+  if (!enabled) {
+    return undefined;
+  }
+
+  const reduxExtension = window.__REDUX_DEVTOOLS_EXTENSION__;
+  if (!reduxExtension && __DEV__) {
+    console.warn('Please install/enable Redux devtools extension');
+    return undefined;
+  }
+
+  return reduxExtension;
+};

src/utils/useAtomDevtools.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { useAtom } from 'jotai/react';
 import type { Atom, WritableAtom } from 'jotai/vanilla';
+import { getReduxExtension } from './redux-extension/getReduxExtension';
 import { Message } from './types';
 
 type DevtoolOptions = Parameters<typeof useAtom>[1] & {
@@ -14,19 +15,7 @@ export function useAtomDevtools<Value, Result>(
 ): void {
   const { enabled, name } = options || {};
 
-  let extension: typeof window['__REDUX_DEVTOOLS_EXTENSION__'] | false;
-
-  try {
-    extension = (enabled ?? __DEV__) && window.__REDUX_DEVTOOLS_EXTENSION__;
-  } catch {
-    // ignored
-  }
-
-  if (!extension) {
-    if (__DEV__ && enabled) {
-      console.warn('Please install/enable Redux devtools extension');
-    }
-  }
+  const extension = getReduxExtension(enabled);
 
   const [value, setValue] = useAtom(anAtom, options);
 

src/utils/useAtomsDevtools.ts

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { AnyAtom, AnyAtomValue, AtomsSnapshot, Options } from '../types';
+import { getReduxExtension } from './redux-extension/getReduxExtension';
 import { Message } from './types';
 import { useAtomsSnapshot } from './useAtomsSnapshot';
 import { useGotoAtomsSnapshot } from './useGotoAtomsSnapshot';
@@ -32,19 +33,7 @@ export function useAtomsDevtools(
 ): void {
   const { enabled } = options || {};
 
-  let extension: typeof window['__REDUX_DEVTOOLS_EXTENSION__'] | false;
-
-  try {
-    extension = (enabled ?? __DEV__) && window.__REDUX_DEVTOOLS_EXTENSION__;
-  } catch {
-    // ignored
-  }
-
-  if (!extension) {
-    if (__DEV__ && enabled) {
-      console.warn('Please install/enable Redux devtools extension');
-    }
-  }
+  const extension = getReduxExtension(enabled);
 
   // This an exception, we don't usually use utils in themselves!
   const atomsSnapshot = useAtomsSnapshot(options);
@@ -112,7 +101,7 @@ export function useAtomsDevtools(
     devtools.current = connection;
     devtools.current.shouldInit = true;
     return () => {
-      (extension as any).disconnect();
+      extension?.disconnect?.();
       devtoolsUnsubscribe?.();
     };
   }, [extension, goToSnapshot, name]);