fix: remove some of the jank around our core App component

coder · Parkreiner · May 3, 2024 · May 2, 2024 · May 2, 2024 · May 2, 2024
commit 4da94ef26c49fb4ac5127b003cb464d97d1a1cb5
diff --git a/site/src/App.tsx b/site/src/App.tsx
@@ -38,9 +38,23 @@ export const AppProviders: FC<AppProvidersProps> = ({
 }) => {
   // https://tanstack.com/query/v4/docs/react/devtools
   const [showDevtools, setShowDevtools] = useState(false);
+
   useEffect(() => {
-    window.toggleDevtools = () => setShowDevtools((old) => !old);
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- no dependencies needed here
+    // Storing key in variable to avoid accidental typos; we're working with the
+    // window object, so there's basically zero type-checking available
+    const toggleKey = "toggleDevtools";
+
+    // Don't want to throw away the previous devtools value if some other
+    // extension added something already
+    const devtoolsBeforeSync = window[toggleKey];
+    window[toggleKey] = () => {
+      devtoolsBeforeSync?.();
+      setShowDevtools((current) => !current);
+    };
+
+    return () => {
+      window[toggleKey] = devtoolsBeforeSync;
+    };
   }, []);
 
   return (
@@ -60,10 +74,10 @@ export const AppProviders: FC<AppProvidersProps> = ({
 
 export const App: FC = () => {
   return (
-    <AppProviders>
-      <ErrorBoundary>
+    <ErrorBoundary>
+      <AppProviders>
         <RouterProvider router={router} />
-      </ErrorBoundary>
-    </AppProviders>
+      </AppProviders>
+    </ErrorBoundary>
   );
 };