refactor: write the React Scan plugin in React

Author: AlemTuzlak

docs/plugins/react-scan.md

@@ -3,17 +3,17 @@ title: React Scan Plugin
 id: react-scan-plugin
 ---
 
-You want the full [react-scan](https://github.com/aidenybai/react-scan) workbench inside TanStack Devtools, not a second floating toolbar on the page. This plugin starts `react-scan` and docks its native UI into the TanStack tab.
+You want the official [react-scan](https://github.com/aidenybai/react-scan) panel inside TanStack Devtools, not a second floating toolbar on the page. This plugin starts `scan()` in the app, so app re-renders are scanned. It then locks the native React Scan panel into the TanStack tab.
 
-That native UI includes:
+That native panel includes:
 
 - Inspect mode to pick a component on the page
 - The inspector: What Changed, props, and the component tree
 - Slowdown notifications
 - Outline toggle for re-renders
 - FPS meter
 
-Page outlines stay on the page. The toolbar sits in the plugin pane.
+Page outlines stay on the page. The native panel fills the plugin pane. You cannot drag it and it has no close control. Close the tab from TanStack Devtools.
 
 ## Installation
 
@@ -49,8 +49,9 @@ Do not also load `react-scan/dist/auto.global.js`. Two scanners will run at the
 1. Open the **React Scan** plugin.
 2. Click the inspect icon, then click a component in the app.
 3. The inspector shows why that component rendered and its tree.
-4. Click the bell for slowdown notifications.
-5. Use the outline toggle to turn page outlines on or off.
+4. Interact with the app (for example click **Increment count**). What Changed updates for the selected component.
+5. Click the bell for slowdown notifications.
+6. Use the outline toggle to turn page outlines on or off.
 
 ## Options
 
@@ -82,4 +83,4 @@ If you want the real plugin in every environment, import `@tanstack/react-scan-d
 
 ## Example
 
-See `examples/react/basic`. Open the React Scan tab, click inspect, then click **Increment count**.
+See `examples/react/basic`. Open the React Scan tab, click inspect, click **Increment count**, then click it again to see What Changed.

packages/react-scan-devtools/README.md

@@ -1,6 +1,6 @@
 # @tanstack/react-scan-devtools
 
-React Scan plugin for TanStack Devtools. It starts `react-scan` and docks the native React Scan UI (inspect, What Changed, notifications, FPS) into the TanStack tab.
+React Scan plugin for TanStack Devtools. It starts `react-scan` in the app and docks the official React Scan panel into the TanStack tab.
 
 ```bash
 npm install @tanstack/react-scan-devtools react-scan

packages/react-scan-devtools/package.json

@@ -62,15 +62,14 @@
   },
   "dependencies": {
     "@tanstack/devtools-utils": "workspace:^",
-    "react-scan": "^0.5.7",
-    "solid-js": "^1.9.9"
+    "react-scan": "^0.5.7"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^6.0.1",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "vite-plugin-solid": "^2.11.11"
+    "react-dom": "^19.2.0"
   },
   "peerDependencies": {
     "@types/react": ">=17.0.0",

packages/react-scan-devtools/src/core/components/Shell.tsx

@@ -1,30 +1,32 @@
-/** @jsxImportSource solid-js */
-
-import { onCleanup, onMount } from 'solid-js'
+import { useEffect, useRef } from 'react'
 import { dockReactScanToolbar } from '../host-toolbar'
 
-export function Shell() {
-  let host: HTMLDivElement | undefined
+export function ReactScanDevtoolsPanel() {
+  const hostRef = useRef<HTMLDivElement>(null)
 
-  onMount(() => {
+  useEffect(() => {
+    const host = hostRef.current
     if (!host) {
       return
     }
-    const stop = dockReactScanToolbar(host)
-    onCleanup(stop)
-  })
+    return dockReactScanToolbar(host)
+  }, [])
 
   return (
     <div
-      ref={host}
+      ref={hostRef}
       data-tsd-surface
       data-testid="react-scan-host"
       style={{
         position: 'relative',
         height: '100%',
         width: '100%',
-        'min-height': '100%',
+        minHeight: '100%',
       }}
     />
   )
 }
+
+export function ReactScanDevtoolsPanelNoOp() {
+  return null
+}