fix(overlay): Disable React Dev Tools warning

.changeset/serious-donkeys-love.md

@@ -0,0 +1,5 @@
+---
+'@spotlightjs/overlay': patch
+---
+
+fix(overlay): Remove React Dev Tools warning

.gitignore

@@ -32,3 +32,6 @@ yalc.lock
 .vercel
 
 junit.xml
+
+# Build artifacts
+*.tgz

packages/overlay/package.json

@@ -54,7 +54,8 @@
     "react-router-dom": "^6.18.0",
     "sql-formatter": "^12.2.4",
     "tailwindcss": "^3.3.3",
-    "usehooks-ts": "^2.9.1"
+    "usehooks-ts": "^2.9.1",
+    "magic-string": "^0.30.5"
   },
   "volta": {
     "extends": "../../package.json"

packages/overlay/vite.config.ts

@@ -1,9 +1,28 @@
 import react from '@vitejs/plugin-react';
+import MagicString from 'magic-string';
+import { sep } from 'node:path';
 import { resolve } from 'path';
+import type { Plugin } from 'vite';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import svgr from 'vite-plugin-svgr';
 
+const removeReactDevToolsMessagePlugin: () => Plugin = () => ({
+  name: 'remove-react-devtools-message',
+  transform(code, id) {
+    if (id.includes(`${sep}react-dom${sep}`) && code.includes('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {
+      const ms = new MagicString(code);
+      ms.replaceAll('__REACT_DEVTOOLS_GLOBAL_HOOK__', '({ isDisabled: true })');
+      const map = ms.generateMap({ hires: true });
+      console.log(map);
+      return {
+        code: ms.toString(),
+        map,
+      };
+    }
+  },
+});
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
@@ -12,6 +31,7 @@ export default defineConfig({
       insertTypesEntry: true,
     }),
     svgr(),
+    removeReactDevToolsMessagePlugin(),
   ],
   resolve: {
     alias: {
@@ -20,24 +40,11 @@ export default defineConfig({
   },
   build: {
     lib: {
-      // Could also be a dictionary or array of multiple entry points
       entry: resolve(__dirname, 'src/index.tsx'),
       name: 'sentry-spotlight',
       // the proper extensions will be added
       fileName: 'sentry-spotlight',
     },
     sourcemap: true,
-    // rollupOptions: {
-    //   // make sure to externalize deps that shouldn't be bundled
-    //   // into your library
-    //   external: ["vue"],
-    //   output: {
-    //     // Provide global variables to use in the UMD build
-    //     // for externalized deps
-    //     globals: {
-    //       vue: "Vue",
-    //     },
-    //   },
-    // },
   },
 });