enhance: Only show devtools button when DevToolsManager is used

reactive · May 8, 2024 · 30208fb · 30208fb
1 parent 0d24fee
commit 30208fb
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/.changeset/smooth-brooms-provide.md b/.changeset/smooth-brooms-provide.md
@@ -0,0 +1,9 @@
+---
+"@data-client/react": patch
+---
+
+Only show devtools button when DevToolsManager is used
+
+Previously, one could use custom managers list and it
+would still show the devtools button. This was confusing
+as opening it would show no instance for Data Client.
diff --git a/packages/react/src/components/CacheProvider.tsx b/packages/react/src/components/CacheProvider.tsx
@@ -78,7 +78,7 @@ Try using https://dataclient.io/docs/api/ExternalCacheProvider for server entry
       >
         {children}
       </CacheStore>
-      {renderDevButton(devButton)}
+      {renderDevButton(devButton, managersRef.current)}
     </ControllerContext.Provider>
   );
 }

diff --git a/packages/react/src/components/renderDevButton.tsx b/packages/react/src/components/renderDevButton.tsx
@@ -1,14 +1,20 @@
-import React, { lazy } from 'react';
+import { DevToolsManager, type Manager } from '@data-client/core';
+import { lazy } from 'react';
 
 import type { DevToolsPosition } from './DevToolsButton.js';
 import { LegacyReact, SSR } from './LegacyReact.js';
 import UniversalSuspense from './UniversalSuspense.js';
 
 export function renderDevButton(
   devButton: DevToolsPosition | null | undefined,
+  managers: Manager[],
 ) {
   /* istanbul ignore else */
-  if (process.env.NODE_ENV !== 'production') {
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    // only include if they have devtools integrated
+    managers.find(manager => manager instanceof DevToolsManager)
+  ) {
     return (
       <UniversalSuspense fallback={null}>
         {