refactor(inspect): Rename Inspector to RawInspector and wrap with portal

Author: aidenybai

README.md

@@ -33,7 +33,7 @@ or, use the `/inspect` subpackage to graphically visualize the fiber tree:
 ```jsx
 import { Inspector } from 'bippy/inspect';
 
-<Inspector enabled={true} />
+<Inspector enabled={true} />;
 ```
 
 <table>
@@ -158,7 +158,6 @@ or, use via script tag:
 
 next, you can use the api to get data about the fiber tree. below is a (useful) subset of the api. for the full api, read the [source code](https://github.com/aidenybai/bippy/blob/main/src/core.ts).
 
-
 ### onCommitFiberRoot
 
 a utility function that wraps the `instrument` function and sets the `onCommitFiberRoot` hook.
@@ -303,7 +302,6 @@ traverseContexts(fiber, (next, prev) => {
 });
 ```
 
-
 ### setFiberId / getFiberId
 
 set and get a persistent identity for a fiber. by default, fibers are anonymous and have no identity.
@@ -621,6 +619,8 @@ instrument(
 
 ## development
 
+pre-requisite: you should understand how react works internally. if you don't, please give this [series of articles](https://jser.dev/series/react-source-code-walkthrough) a read.
+
 we use a pnpm monorepo, get started by running:
 
 ```shell

packages/bippy/src/inspect.tsx

@@ -23,6 +23,7 @@ import {
   ObjectRootLabel,
   ObjectLabel,
 } from 'react-inspector';
+import ReactDOM from 'react-dom';
 
 const FIBER_PROP_EXPLANATIONS: Record<string, string> = {
   tag: 'Numeric type identifier for this fiber (e.g. 1=FunctionComponent, 5=HostComponent)',
@@ -234,7 +235,7 @@ const CloseButton = React.memo(({ onClick }: { onClick: () => void }) => (
   </button>
 ));
 
-export const Inspector = React.memo(
+export const RawInspector = React.memo(
   ({ enabled = true, dangerouslyRunInProduction = false }: InspectorProps) => {
     const [element, setElement] = useState<Element | null>(null);
     const [rect, setRect] = useState<DOMRect | null>(null);
@@ -685,4 +686,26 @@ export const Inspector = React.memo(
   },
 );
 
+export const Inspector = React.memo(({ ...props }: InspectorProps) => {
+  const [root, setRoot] = useState<ShadowRoot | null>(null);
+
+  useEffect(() => {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    const shadowRoot = div.attachShadow({ mode: 'open' });
+    setRoot(shadowRoot);
+
+    return () => {
+      document.body.removeChild(div);
+    };
+  }, []);
+
+  if (!root) return null;
+
+  return ReactDOM.createPortal(
+    <RawInspector {...props} />,
+    root
+  );
+});
+
 export default Inspector;

packages/kitchen-sink/src/main.tsx

@@ -1,4 +1,4 @@
-import { instrument } from 'bippy/dist/index';
+import 'bippy/dist/index';
 
 import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
@@ -7,12 +7,6 @@ import './main.css';
 
 import { routeTree } from './routeTree.gen';
 
-instrument({
-  onActive() {
-    console.log('active');
-  },
-});
-
 const router = createRouter({ routeTree });
 
 declare module '@tanstack/react-router' {