add react-scan on dev

itsjavi · itsjavi · commit dbd5d05fec56 · 2025-05-03T07:14:56.000+02:00
diff --git a/app/root.tsx b/app/root.tsx
@@ -25,12 +25,15 @@ export const links: Route.LinksFunction = () => [
 ]
 
 export function Layout({ children }: { children: React.ReactNode }) {
+  const useReactScan = import.meta?.env?.DEV || false
+
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <script dangerouslySetInnerHTML={{ __html: themeDetectJs }} />
+        {useReactScan && <script crossOrigin="anonymous" src="//unpkg.com/react-scan/dist/auto.global.js" />}
         <Meta />
         <Links />
       </head>
diff --git a/registry/basil-ui/lib/theme-detect.js b/registry/basil-ui/lib/theme-detect.js
@@ -2,11 +2,11 @@
   //
   // This script detects the user's preferred color scheme and updates the theme accordingly.
   //
-  // Example usage (in React Router root.tsx):
-  //
-  //  import themeDetectJs from '@/lib/theme-detect.js?raw'
-  //  // in the Layout component add this in the head, before other scripts to avoid UI flashing:
-  //  <script dangerouslySetInnerHTML={{ __html: themeDetectJs }} />
+  // Example usage (in React Router app/root.tsx, or Next.js app/layout.tsx):
+  // - Import the script as raw text: `import themeDetectJs from '@/lib/theme-detect.js?raw'`
+  // - In the Layout component add `<script dangerouslySetInnerHTML={{ __html: themeDetectJs }} />` in the head
+  //   before stylesheets and other scripts to avoid UI flashing
+  // - In the Layout component add `suppressHydrationWarning` to the html tag to avoid hydration errors
   //
   function getPreferredColorScheme() {
     if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
