sources

Author: aidenybai

README.md

@@ -397,6 +397,30 @@ import { isValidFiber } from 'bippy';
 console.log(isValidFiber(fiber));
 ```
 
+## getFiberFromHostInstance
+
+returns the fiber associated with a given host instance (e.g., a DOM element).
+
+```typescript
+import { getFiberFromHostInstance } from 'bippy';
+
+const fiber = getFiberFromHostInstance(document.querySelector('div'));
+console.log(fiber);
+```
+
+## getLatestFiber
+
+returns the latest fiber (since it may be double-buffered). usually use this in combination with `getFiberFromHostInstance`.
+
+```typescript
+import { getLatestFiber } from 'bippy';
+
+const latestFiber = getLatestFiber(
+  getFiberFromHostInstance(document.querySelector('div'))
+);
+console.log(latestFiber);
+```
+
 ## examples
 
 the best way to understand bippy is to [read the source code](https://github.com/aidenybai/bippy/blob/main/src/core.ts). here are some examples of how you can use it:

packages/bippy/package.json

@@ -57,6 +57,26 @@
         "default": "./dist/source.cjs"
       }
     },
+    "./jsx-runtime": {
+      "import": {
+        "types": "./dist/jsx-runtime.d.ts",
+        "default": "./dist/jsx-runtime.js"
+      },
+      "require": {
+        "types": "./dist/jsx-runtime.d.cts",
+        "default": "./dist/jsx-runtime.cjs"
+      }
+    },
+    "./jsx-dev-runtime": {
+      "import": {
+        "types": "./dist/jsx-dev-runtime.d.ts",
+        "default": "./dist/jsx-dev-runtime.js"
+      },
+      "require": {
+        "types": "./dist/jsx-dev-runtime.d.cts",
+        "default": "./dist/jsx-dev-runtime.cjs"
+      }
+    },
     "./experiments/inspect": {
       "import": {
         "types": "./dist/experiments/inspect.d.ts",

packages/bippy/src/core.ts

@@ -524,6 +524,26 @@ export const isInstrumentationActive = (): boolean => {
   );
 };
 
+/**
+ * Returns the latest fiber (since it may be double-buffered).
+ */
+export const getLatestFiber = (fiber: Fiber): Fiber => {
+  const alternate = fiber.alternate;
+  if (!alternate) return fiber;
+  if (alternate.actualStartTime && fiber.actualStartTime) {
+    return alternate.actualStartTime > fiber.actualStartTime
+      ? alternate
+      : fiber;
+  }
+  for (const root of _fiberRoots) {
+    const latestFiber = traverseFiber(root.current, (innerFiber) => {
+      if (innerFiber === fiber) return true;
+    });
+    return latestFiber || alternate;
+  }
+  return fiber;
+};
+
 export type RenderPhase = 'mount' | 'update' | 'unmount';
 
 export type RenderHandler = <S>(
@@ -923,6 +943,8 @@ export const getFiberFromHostInstance = <T>(hostInstance: T): Fiber | null => {
 
 export const INSTALL_ERROR = new Error();
 
+export const _fiberRoots = new Set<FiberRoot>();
+
 export const secure = (
   options: InstrumentationOptions,
   secureOptions: {
@@ -976,6 +998,9 @@ export const secure = (
       const onCommitFiberRoot = options.onCommitFiberRoot;
       if (onCommitFiberRoot) {
         options.onCommitFiberRoot = (rendererID, root, priority) => {
+          if (!_fiberRoots.has(root)) {
+            _fiberRoots.add(root);
+          }
           try {
             onCommitFiberRoot(rendererID, root, priority);
           } catch (err) {

packages/bippy/src/experiments/inspect.tsx

@@ -21,9 +21,11 @@ import {
   getNearestHostFiber,
   getRDTHook,
   hasRDTHook,
+  isCompositeFiber,
   isInstrumentationActive,
   traverseFiber,
 } from '../index.js';
+import { getFiberSource } from '../source.js';
 
 const FIBER_PROP_EXPLANATIONS: Record<string, string> = {
   tag: 'Numeric type identifier for this fiber (e.g. 1=FunctionComponent, 5=HostComponent)',
@@ -252,6 +254,14 @@ export const RawInspector = React.memo(
     const getFiberForDisplay = useCallback(() => {
       if (selectedFiber) return selectedFiber;
       const fiber = getFiberFromHostInstance(element);
+      const parentFiber = traverseFiber(
+        fiber,
+        (f) => {
+          if (isCompositeFiber(f)) return true;
+        },
+        true,
+      );
+      console.log('fiber', parentFiber && getFiberSource(parentFiber));
 
       return fiber;
     }, [selectedFiber, element]);

packages/bippy/src/index.ts

@@ -1,10 +1,5 @@
-import { getRDTHook, isClientEnvironment } from './rdt-hook.js';
+import { safelyInstallRDTHook } from './rdt-hook.js';
 
-export * from './core.js';
+safelyInstallRDTHook();
 
-try {
-  // __REACT_DEVTOOLS_GLOBAL_HOOK__ must exist before React is ever executed
-  if (isClientEnvironment()) {
-    getRDTHook();
-  }
-} catch {}
+export * from './core.js';

packages/bippy/src/jsx-dev-runtime.ts

@@ -0,0 +1,45 @@
+import {
+  Fragment,
+  jsxDEV as jsxDEVImpl,
+  type JSXSource,
+} from 'react/jsx-dev-runtime';
+
+export * from 'react/jsx-dev-runtime';
+
+export { Fragment };
+
+export const jsxDEV = (
+  type: React.ElementType,
+  originalProps: unknown,
+  key: React.Key | undefined,
+  isStatic: boolean,
+  source?: JSXSource,
+  self?: unknown,
+) => {
+  let props = originalProps;
+  try {
+    if (
+      originalProps &&
+      typeof originalProps === 'object' &&
+      source &&
+      String(type) !== 'Symbol(react.fragment)'
+    ) {
+      // prevent attributes from rendering in DOM for host fibers
+      if (typeof type === 'string') {
+        const proto = Object.getPrototypeOf(originalProps);
+        const descriptors = Object.getOwnPropertyDescriptors(originalProps);
+        descriptors.__source = {
+          value: source,
+          enumerable: false,
+          configurable: true,
+          writable: true,
+        };
+        props = Object.create(proto, descriptors);
+      } else {
+        // @ts-expect-error
+        props.__source = source;
+      }
+    }
+  } catch {}
+  return jsxDEVImpl(type, props, key, isStatic, source, self);
+};

packages/bippy/src/jsx-runtime.ts

@@ -0,0 +1,2 @@
+import './index.js';
+export * from 'react/jsx-runtime';

packages/bippy/src/rdt-hook.ts

@@ -72,9 +72,23 @@ export const installRDTHook = (
   };
   try {
     objectDefineProperty(globalThis, '__REACT_DEVTOOLS_GLOBAL_HOOK__', {
-      value: rdtHook,
+      get() {
+        return rdtHook;
+      },
+      set(newHook) {
+        if (newHook && typeof newHook === 'object') {
+          const ourRenderers = rdtHook.renderers;
+          globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = newHook;
+          if (ourRenderers.size > 0) {
+            ourRenderers.forEach((renderer, id) => {
+              newHook.renderers.set(id, renderer);
+            });
+            patchRDTHook(onActive);
+          }
+        }
+      },
       configurable: true,
-      writable: true,
+      enumerable: true,
     });
     // [!] this is a hack for chrome extensions - if we install before React DevTools, we could accidently prevent React DevTools from installing:
     // https://github.com/facebook/react/blob/18eaf51bd51fed8dfed661d64c306759101d0bfd/packages/react-devtools-extensions/src/contentScripts/installHook.js#L30C6-L30C27
@@ -110,7 +124,6 @@ export const patchRDTHook = (onActive?: () => unknown): void => {
     const rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     if (!rdtHook) return;
     if (!rdtHook._instrumentationSource) {
-      isReactRefreshOverride = isReactRefresh(rdtHook);
       rdtHook.checkDCE = checkDCE;
       rdtHook.supportsFiber = true;
       rdtHook.supportsFlight = true;
@@ -128,21 +141,21 @@ export const patchRDTHook = (onActive?: () => unknown): void => {
         isReactRefreshOverride = true;
         // but since the underlying implementation doens't care,
         // it's ok: https://github.com/facebook/react/blob/18eaf51bd51fed8dfed661d64c306759101d0bfd/packages/react-refresh/src/ReactFreshRuntime.js#L430
-        // @ts-expect-error this is not actually a ReactRenderer,
-        let nextID = rdtHook.inject(null);
+        const nextID = rdtHook.inject({
+          // @ts-expect-error this is not actually a ReactRenderer,
+          scheduleRefresh() {},
+        });
         if (nextID) {
           rdtHook._instrumentationIsActive = true;
         }
-        rdtHook.inject = () => nextID++;
-      } else {
-        rdtHook.inject = (renderer) => {
-          const id = prevInject(renderer);
-          rdtHook._instrumentationIsActive = true;
-          // biome-ignore lint/complexity/noForEach: prefer forEach for Set
-          onActiveListeners.forEach((listener) => listener());
-          return id;
-        };
       }
+      rdtHook.inject = (renderer) => {
+        const id = prevInject(renderer);
+        rdtHook._instrumentationIsActive = true;
+        // biome-ignore lint/complexity/noForEach: prefer forEach for Set
+        onActiveListeners.forEach((listener) => listener());
+        return id;
+      };
     }
     if (
       rdtHook.renderers.size ||
@@ -183,3 +196,15 @@ export const isClientEnvironment = (): boolean => {
         window.navigator?.product === 'ReactNative'),
   );
 };
+
+/**
+ * Usually used purely for side effect
+ */
+export const safelyInstallRDTHook = () => {
+  try {
+    // __REACT_DEVTOOLS_GLOBAL_HOOK__ must exist before React is ever executed
+    if (isClientEnvironment()) {
+      getRDTHook();
+    }
+  } catch {}
+};

packages/bippy/src/source.ts

@@ -10,6 +10,7 @@ import {
   getRDTHook,
   getDisplayName,
 } from './index.js';
+import React from 'react';
 
 interface FiberSource {
   fileName: string;
@@ -107,7 +108,7 @@ const parseStackFrame = async (frame: string): Promise<FiberSource | null> => {
         column: columnNumber,
       });
       return {
-        fileName: result.source || '',
+        fileName: sourcemap.file || '',
         lineNumber: result.line || 0,
         columnNumber: result.column || 0,
       };
@@ -244,8 +245,7 @@ const describeNativeComponentFrame = (
               s--;
               c--;
               if (c < 0 || sampleLines[s] !== controlLines[c]) {
-                // biome-ignore lint/style/useTemplate: <explanation>
-                let frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
+                let frame = `\n${sampleLines[s].replace(' at new ', ' at ')}`;
                 const displayName = getDisplayName(fn);
                 if (displayName && frame.includes('<anonymous>')) {
                   frame = frame.replace('<anonymous>', displayName);
@@ -270,6 +270,13 @@ const describeNativeComponentFrame = (
   return syntheticFrame;
 };
 
+const ReactSharedInternals =
+  // biome-ignore lint/suspicious/noExplicitAny: OK
+  (React as any)
+    ?.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE ||
+  // biome-ignore lint/suspicious/noExplicitAny: OK
+  (React as any)?.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
 export const getFiberSource = async (
   fiber: Fiber,
 ): Promise<FiberSource | null> => {
@@ -286,15 +293,23 @@ export const getFiberSource = async (
     };
   }
 
+  // passed by bippy's jsx-dev-runtime
+  if (fiber.memoizedProps?.__source) {
+    return fiber.memoizedProps.__source as FiberSource;
+  }
+
   const rdtHook = getRDTHook();
-  let currentDispatcherRef: React.MutableRefObject<unknown> | undefined;
+
+  let currentDispatcherRef: React.MutableRefObject<unknown> | undefined =
+    ReactSharedInternals?.ReactCurrentDispatcher || ReactSharedInternals?.H;
   for (const renderer of rdtHook.renderers.values()) {
     // biome-ignore lint/suspicious/noExplicitAny: OK
     currentDispatcherRef = (renderer as any).currentDispatcherRef;
     if (currentDispatcherRef) {
       break;
     }
   }
+
   if (!currentDispatcherRef) {
     return null;
   }
@@ -317,7 +332,7 @@ export const getFiberSource = async (
   const frame = describeNativeComponentFrame(
     componentFunction,
     fiber.tag === ClassComponentTag,
-    currentDispatcherRef,
+    ReactSharedInternals,
   );
   return parseStackFrame(frame);
 };

packages/bippy/tsup.config.ts

@@ -40,6 +40,8 @@ export default defineConfig([
     entry: [
       './src/index.ts',
       './src/core.ts',
+      './src/jsx-runtime.ts',
+      './src/jsx-dev-runtime.ts',
       './src/experiments/inspect.tsx',
       './src/experiments/shrinkwrap.ts',
       './src/source.ts',

packages/kitchen-sink/package.json

@@ -5,16 +5,16 @@
 	"scripts": {
 		"preview": "vite preview",
 		"build": "vite build",
-		"dev": "vite"
+		"dev": "rm -rf node_modules/.vite && pnpm i && vite"
 	},
 	"dependencies": {
 		"@codesandbox/sandpack-react": "^2.19.10",
 		"@codesandbox/sandpack-themes": "^2.0.21",
 		"@tanstack/react-router": "^1.95.1",
 		"bippy": "^0.3.0",
 		"clsx": "^2.1.1",
-		"react": "18.3.1",
-		"react-dom": "18.3.1",
+		"react": "19.0.0",
+		"react-dom": "19.0.0",
 		"react-inspector": "^6.0.2",
 		"sugar-high": "^0.7.5",
 		"tailwind-merge": "^2.6.0"

packages/kitchen-sink/vite.config.ts

@@ -13,11 +13,12 @@ export default defineConfig({
   plugins: [
     mkcert(),
     TanStackRouterVite(),
-    // react({
-    //   // babel: {
-    //   //   plugins: [['babel-plugin-react-compiler', {}]],
-    //   // },
-    // }),
+    react({
+      jsxImportSource: 'bippy/dist',
+      // babel: {
+      //   plugins: [['babel-plugin-react-compiler', {}]],
+      // },
+    }),
     tailwindcss(),
   ],
   define: {