12 |
18 | Deploy now
19 |
20 |
26 | Read our docs
27 |
28 |
29 | hello
;
330 | };
331 | const MemoizedComponent = memo(() => {
332 | return hello
;
333 | });
334 |
335 | console.log(getType(fiberForMemoizedComponent) === RealComponent);
336 | ```
337 |
338 | ### getNearestHostFiber / getNearestHostFibers
339 |
340 | getNearestHostFiber returns the closest host fiber above or below a given fiber. getNearestHostFibers(fiber) returns all host fibers associated with the provided fiber and its subtree.
341 |
342 | ```jsx
343 | import { getNearestHostFiber, getNearestHostFibers } from 'bippy';
344 |
345 | // ...
346 |
347 | function Component() {
348 | return (
349 | <>
350 | hello
351 | world
352 |
353 | );
354 | }
355 |
356 | console.log(getNearestHostFiber(fiberForComponent)); // hello
357 | console.log(getNearestHostFibers(fiberForComponent)); // [hello
, world
]
358 | ```
359 |
360 | ### getTimings
361 |
362 | returns the self and total render times for the fiber.
363 |
364 | ```typescript
365 | // timings don't exist in react production builds
366 | if (fiber.actualDuration !== undefined) {
367 | const { selfTime, totalTime } = getTimings(fiber);
368 | console.log(selfTime, totalTime);
369 | }
370 | ```
371 |
372 | ### getFiberStack
373 |
374 | returns an array representing the stack of fibers from the current fiber up to the root.
375 |
376 | ```typescript
377 | [fiber, fiber.return, fiber.return.return, ...]
378 | ```
379 |
380 | ### getMutatedHostFibers
381 |
382 | returns an array of all host fibers that have committed and rendered in the provided fiber's subtree.
383 |
384 | ```typescript
385 | import { getMutatedHostFibers } from 'bippy';
386 |
387 | console.log(getMutatedHostFibers(fiber));
388 | ```
389 |
390 | ### isValidFiber
391 |
392 | returns `true` if the given object is a valid React Fiber (i.e., has a tag, stateNode, return, child, sibling, etc.).
393 |
394 | ```typescript
395 | import { isValidFiber } from 'bippy';
396 |
397 | console.log(isValidFiber(fiber));
398 | ```
399 |
400 | ## getFiberFromHostInstance
401 |
402 | returns the fiber associated with a given host instance (e.g., a DOM element).
403 |
404 | ```typescript
405 | import { getFiberFromHostInstance } from 'bippy';
406 |
407 | const fiber = getFiberFromHostInstance(document.querySelector('div'));
408 | console.log(fiber);
409 | ```
410 |
411 | ## getLatestFiber
412 |
413 | returns the latest fiber (since it may be double-buffered). usually use this in combination with `getFiberFromHostInstance`.
414 |
415 | ```typescript
416 | import { getLatestFiber } from 'bippy';
417 |
418 | const latestFiber = getLatestFiber(
419 | getFiberFromHostInstance(document.querySelector('div'))
420 | );
421 | console.log(latestFiber);
422 | ```
423 |
424 | ## examples
425 |
426 | 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:
427 |
428 | ### a mini react-scan
429 |
430 | here's a mini toy version of [`react-scan`](https://github.com/aidenybai/react-scan) that highlights renders in your app.
431 |
432 | ```javascript
433 | import {
434 | instrument,
435 | isHostFiber,
436 | getNearestHostFiber,
437 | traverseRenderedFibers,
438 | } from 'bippy'; // must be imported BEFORE react
439 |
440 | const highlightFiber = (fiber) => {
441 | if (!(fiber.stateNode instanceof HTMLElement)) return;
442 | // fiber.stateNode is a DOM element
443 | const rect = fiber.stateNode.getBoundingClientRect();
444 | const highlight = document.createElement('div');
445 | highlight.style.border = '1px solid red';
446 | highlight.style.position = 'fixed';
447 | highlight.style.top = `${rect.top}px`;
448 | highlight.style.left = `${rect.left}px`;
449 | highlight.style.width = `${rect.width}px`;
450 | highlight.style.height = `${rect.height}px`;
451 | highlight.style.zIndex = 999999999;
452 | document.documentElement.appendChild(highlight);
453 | setTimeout(() => {
454 | document.documentElement.removeChild(highlight);
455 | }, 100);
456 | };
457 |
458 | /**
459 | * `instrument` is a function that installs the react DevTools global
460 | * hook and allows you to set up custom handlers for react fiber events.
461 | */
462 | instrument(
463 | /**
464 | * `secure` is a function that wraps your handlers in a try/catch
465 | * and prevents it from crashing the app. it also prevents it from
466 | * running on unsupported react versions and during production.
467 | *
468 | * this is not required but highly recommended to provide "safeguards"
469 | * in case something breaks.
470 | */
471 | secure({
472 | /**
473 | * `onCommitFiberRoot` is a handler that is called when react is
474 | * ready to commit a fiber root. this means that react is has
475 | * rendered your entire app and is ready to apply changes to
476 | * the host tree (e.g. via DOM mutations).
477 | */
478 | onCommitFiberRoot(rendererID, root) {
479 | /**
480 | * `traverseRenderedFibers` traverses the fiber tree and determines which
481 | * fibers have actually rendered.
482 | *
483 | * A fiber tree contains many fibers that may have not rendered. this
484 | * can be because it bailed out (e.g. `useMemo`) or because it wasn't
485 | * actually rendered (if 
bippy
7 |
8 | [](https://bundlephobia.com/package/bippy)
9 | [](https://npmjs.com/package/bippy)
10 | [](https://npmjs.com/package/bippy)
11 |
12 | bippy is a toolkit to **hack into react internals**
13 |
14 | by default, you cannot access react internals. bippy bypasses this by "pretending" to be react devtools, giving you access to the fiber tree and other internals.
15 |
16 | - works outside of react – no react code modification needed
17 | - utility functions that work across modern react (v17-19)
18 | - no prior react source code knowledge required
19 |
20 | ```jsx
21 | import { onCommitFiberRoot, traverseFiber } from 'bippy';
22 |
23 | onCommitFiberRoot((root) => {
24 | traverseFiber(root.current, (fiber) => {
25 | // prints every fiber in the current React tree
26 | console.log('fiber:', fiber);
27 | });
28 | });
29 | ```
30 |
31 | ## how it works & motivation
32 |
33 | bippy allows you to **access** and **use** react fibers **outside** of react components.
34 |
35 | a react fiber is a "unit of execution." this means react will do something based on the data in a fiber. each fiber either represents a composite (function/class component) or a host (dom element).
36 |
37 | > here is a [live visualization](https://jser.pro/ddir/rie?reactVersion=18.3.1&snippetKey=hq8jm2ylzb9u8eh468) of what the fiber tree looks like, and here is a [deep dive article](https://jser.dev/2023-07-18-how-react-rerenders/).
38 |
39 | fibers are useful because they contain information about the react app (component props, state, contexts, etc.). a simplified version of a fiber looks roughly like this:
40 |
41 | ```typescript
42 | interface Fiber {
43 | // component type (function/class)
44 | type: any;
45 |
46 | child: Fiber | null;
47 | sibling: Fiber | null;
48 |
49 | // stateNode is the host fiber (e.g. DOM element)
50 | stateNode: Node | null;
51 |
52 | // parent fiber
53 | return: Fiber | null;
54 |
55 | // the previous or current version of the fiber
56 | alternate: Fiber | null;
57 |
58 | // saved props input
59 | memoizedProps: any;
60 |
61 | // state (useState, useReducer, useSES, etc.)
62 | memoizedState: any;
63 |
64 | // contexts (useContext)
65 | dependencies: Dependencies | null;
66 |
67 | // effects (useEffect, useLayoutEffect, etc.)
68 | updateQueue: any;
69 | }
70 | ```
71 |
72 | here, the `child`, `sibling`, and `return` properties are pointers to other fibers in the tree.
73 |
74 | additionally, `memoizedProps`, `memoizedState`, and `dependencies` are the fiber's props, state, and contexts.
75 |
76 | while all of the information is there, it's not super easy to work with, and changes frequently across different versions of react. bippy simplifies this by providing utility functions like:
77 |
78 | - `traverseRenderedFibers` to detect renders and `traverseFiber` to traverse the overall fiber tree
79 | - _(instead of `child`, `sibling`, and `return` pointers)_
80 | - `traverseProps`, `traverseState`, and `traverseContexts` to traverse the fiber's props, state, and contexts
81 | - _(instead of `memoizedProps`, `memoizedState`, and `dependencies`)_
82 |
83 | however, fibers aren't directly accessible by the user. so, we have to hack our way around to accessing it.
84 |
85 | luckily, react [reads from a property](https://github.com/facebook/react/blob/6a4b46cd70d2672bc4be59dcb5b8dede22ed0cef/packages/react-reconciler/src/reactFiberDevToolsHook.js#L48) in the window object: `window.__REACT_DEVTOOLS_GLOBAL_HOOK__` and runs handlers on it when certain events happen. this property must exist before react's bundle is executed. this is intended for react devtools, but we can use it to our advantage.
86 |
87 | here's what it roughly looks like:
88 |
89 | ```typescript
90 | interface __REACT_DEVTOOLS_GLOBAL_HOOK__ {
91 | // list of renderers (react-dom, react-native, etc.)
92 | renderers: Maphello
;
330 | };
331 | const MemoizedComponent = memo(() => {
332 | return hello
;
333 | });
334 |
335 | console.log(getType(fiberForMemoizedComponent) === RealComponent);
336 | ```
337 |
338 | ### getNearestHostFiber / getNearestHostFibers
339 |
340 | getNearestHostFiber returns the closest host fiber above or below a given fiber. getNearestHostFibers(fiber) returns all host fibers associated with the provided fiber and its subtree.
341 |
342 | ```jsx
343 | import { getNearestHostFiber, getNearestHostFibers } from 'bippy';
344 |
345 | // ...
346 |
347 | function Component() {
348 | return (
349 | <>
350 | hello
351 | world
352 |
353 | );
354 | }
355 |
356 | console.log(getNearestHostFiber(fiberForComponent)); // hello
357 | console.log(getNearestHostFibers(fiberForComponent)); // [hello
, world
]
358 | ```
359 |
360 | ### getTimings
361 |
362 | returns the self and total render times for the fiber.
363 |
364 | ```typescript
365 | // timings don't exist in react production builds
366 | if (fiber.actualDuration !== undefined) {
367 | const { selfTime, totalTime } = getTimings(fiber);
368 | console.log(selfTime, totalTime);
369 | }
370 | ```
371 |
372 | ### getFiberStack
373 |
374 | returns an array representing the stack of fibers from the current fiber up to the root.
375 |
376 | ```typescript
377 | [fiber, fiber.return, fiber.return.return, ...]
378 | ```
379 |
380 | ### getMutatedHostFibers
381 |
382 | returns an array of all host fibers that have committed and rendered in the provided fiber's subtree.
383 |
384 | ```typescript
385 | import { getMutatedHostFibers } from 'bippy';
386 |
387 | console.log(getMutatedHostFibers(fiber));
388 | ```
389 |
390 | ### isValidFiber
391 |
392 | returns `true` if the given object is a valid React Fiber (i.e., has a tag, stateNode, return, child, sibling, etc.).
393 |
394 | ```typescript
395 | import { isValidFiber } from 'bippy';
396 |
397 | console.log(isValidFiber(fiber));
398 | ```
399 |
400 | ## getFiberFromHostInstance
401 |
402 | returns the fiber associated with a given host instance (e.g., a DOM element).
403 |
404 | ```typescript
405 | import { getFiberFromHostInstance } from 'bippy';
406 |
407 | const fiber = getFiberFromHostInstance(document.querySelector('div'));
408 | console.log(fiber);
409 | ```
410 |
411 | ## getLatestFiber
412 |
413 | returns the latest fiber (since it may be double-buffered). usually use this in combination with `getFiberFromHostInstance`.
414 |
415 | ```typescript
416 | import { getLatestFiber } from 'bippy';
417 |
418 | const latestFiber = getLatestFiber(
419 | getFiberFromHostInstance(document.querySelector('div'))
420 | );
421 | console.log(latestFiber);
422 | ```
423 |
424 | ## examples
425 |
426 | 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:
427 |
428 | ### a mini react-scan
429 |
430 | here's a mini toy version of [`react-scan`](https://github.com/aidenybai/react-scan) that highlights renders in your app.
431 |
432 | ```javascript
433 | import {
434 | instrument,
435 | isHostFiber,
436 | getNearestHostFiber,
437 | traverseRenderedFibers,
438 | } from 'bippy'; // must be imported BEFORE react
439 |
440 | const highlightFiber = (fiber) => {
441 | if (!(fiber.stateNode instanceof HTMLElement)) return;
442 | // fiber.stateNode is a DOM element
443 | const rect = fiber.stateNode.getBoundingClientRect();
444 | const highlight = document.createElement('div');
445 | highlight.style.border = '1px solid red';
446 | highlight.style.position = 'fixed';
447 | highlight.style.top = `${rect.top}px`;
448 | highlight.style.left = `${rect.left}px`;
449 | highlight.style.width = `${rect.width}px`;
450 | highlight.style.height = `${rect.height}px`;
451 | highlight.style.zIndex = 999999999;
452 | document.documentElement.appendChild(highlight);
453 | setTimeout(() => {
454 | document.documentElement.removeChild(highlight);
455 | }, 100);
456 | };
457 |
458 | /**
459 | * `instrument` is a function that installs the react DevTools global
460 | * hook and allows you to set up custom handlers for react fiber events.
461 | */
462 | instrument(
463 | /**
464 | * `secure` is a function that wraps your handlers in a try/catch
465 | * and prevents it from crashing the app. it also prevents it from
466 | * running on unsupported react versions and during production.
467 | *
468 | * this is not required but highly recommended to provide "safeguards"
469 | * in case something breaks.
470 | */
471 | secure({
472 | /**
473 | * `onCommitFiberRoot` is a handler that is called when react is
474 | * ready to commit a fiber root. this means that react is has
475 | * rendered your entire app and is ready to apply changes to
476 | * the host tree (e.g. via DOM mutations).
477 | */
478 | onCommitFiberRoot(rendererID, root) {
479 | /**
480 | * `traverseRenderedFibers` traverses the fiber tree and determines which
481 | * fibers have actually rendered.
482 | *
483 | * A fiber tree contains many fibers that may have not rendered. this
484 | * can be because it bailed out (e.g. `useMemo`) or because it wasn't
485 | * actually rendered (if
269 | {currentFiber && (
270 |
322 |
338 |
352 |
353 | );
354 | },
355 | );
356 |
357 | export const Inspector = forwardRef
295 |
321 |
304 | {`<${getDisplayName(currentFiber.type) || 'unknown'}>`}
305 |
306 |
312 | {currentFiberSource ? (
313 | <>
314 | {currentFiberSource.fileName.split('/').slice(-2).join('/')}{' '}
315 |
@ line {currentFiberSource.lineNumber}, column{' '} 316 | {currentFiberSource.columnNumber} 317 | 318 | ) : null} 319 |
320 | @ line {currentFiberSource.lineNumber}, column{' '} 316 | {currentFiberSource.columnNumber} 317 | 318 | ) : null} 319 |
Hello
;
8 | };
9 |
10 | BasicComponent.displayName = 'BasicComponent';
11 |
12 | export const BasicComponentWithEffect = () => {
13 | const [_shouldUnmount, _setShouldUnmount] = React.useState(true);
14 | React.useEffect(() => {}, []);
15 | return Hello
;
16 | };
17 |
18 | export const BasicComponentWithUnmount = () => {
19 | const [shouldUnmount, setShouldUnmount] = React.useState(true);
20 | React.useEffect(() => {
21 | setShouldUnmount(false);
22 | }, []);
23 | return shouldUnmount ? Hello
: null;
24 | };
25 |
26 | export const BasicComponentWithMutation = () => {
27 | const [element, setElement] = React.useState(Hello
);
28 | React.useEffect(() => {
29 | setElement(Bye
);
30 | }, []);
31 | return element;
32 | };
33 |
34 | export const BasicComponentWithChildren = ({
35 | children,
36 | }: { children: React.ReactNode }) => {
37 | return {children}
;
38 | };
39 |
40 | export const BasicComponentWithMultipleElements = () => {
41 | return (
42 | <>
43 | Hello
44 | Hello
45 |
46 | );
47 | };
48 |
49 | export const SlowComponent = () => {
50 | for (let i = 0; i < 100; i++) {} // simulate slowdown
51 | return Hello
;
52 | };
53 |
54 | export const ForwardRefComponent = React.forwardRef(BasicComponent);
55 | export const MemoizedComponent = React.memo(BasicComponent);
56 |
57 | export class ClassComponent extends React.Component {
58 | render() {
59 | return Hello
;
60 | }
61 | }
62 |
63 | export const ComplexComponent = ({
64 | countProp = 0,
65 | }: { countProp?: number; extraProp?: unknown }) => {
66 | const countContextValue = React.useContext(CountContext);
67 | const _extraContextValue = React.useContext(ExtraContext);
68 | const [countState, setCountState] = React.useState(0);
69 | const [_extraState, _setExtraState] = React.useState(0);
70 |
71 | // biome-ignore lint/correctness/useExhaustiveDependencies: OK
72 | React.useEffect(() => {
73 | setCountState(countState + 1);
74 | }, []);
75 |
76 | return {countContextValue + countState + countProp}
;
77 | };
78 |
--------------------------------------------------------------------------------
/packages/bippy/src/test/core/fiber.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, expect, it } from 'vitest';
2 | import {
3 | didFiberCommit,
4 | didFiberRender,
5 | getFiberFromHostInstance,
6 | getFiberStack,
7 | getMutatedHostFibers,
8 | getNearestHostFiber,
9 | getNearestHostFibers,
10 | getTimings,
11 | instrument,
12 | isCompositeFiber,
13 | isHostFiber,
14 | isValidFiber,
15 | traverseFiber,
16 | } from '../../index.js';
17 | import type { Fiber } from '../../types.js';
18 | // FIXME(Alexis): Both React and @testing-library/react should be after index.js
19 | // but the linter/import sorter keeps moving them on top
20 | // biome-ignore lint/correctness/noUnusedImports: needed for JSX
21 | import React from 'react';
22 | import { render, screen } from '@testing-library/react';
23 | import {
24 | BasicComponent,
25 | BasicComponentWithChildren,
26 | BasicComponentWithMultipleElements,
27 | BasicComponentWithMutation,
28 | BasicComponentWithUnmount,
29 | SlowComponent,
30 | } from '../components.js';
31 |
32 | describe('isValidFiber', () => {
33 | it('should return true for a valid fiber', () => {
34 | let maybeFiber: Fiber | null = null;
35 | instrument({
36 | onCommitFiberRoot: (_rendererID, fiberRoot) => {
37 | maybeFiber = fiberRoot.current.child;
38 | },
39 | });
40 | render(Hello
);
58 | expect(maybeHostFiber).not.toBeNull();
59 | expect(isHostFiber(maybeHostFiber as unknown as Fiber)).toBe(true);
60 | });
61 |
62 | it('should return false for a composite fiber', () => {
63 | let maybeHostFiber: Fiber | null = null;
64 | instrument({
65 | onCommitFiberRoot: (_rendererID, fiberRoot) => {
66 | maybeHostFiber = fiberRoot.current.child;
67 | },
68 | });
69 | render(Hello
);
98 | expect(maybeCompositeFiber).not.toBeNull();
99 | expect(isCompositeFiber(maybeCompositeFiber as unknown as Fiber)).toBe(
100 | false,
101 | );
102 | });
103 | });
104 |
105 | describe('didFiberRender', () => {
106 | it('should return true for a fiber that has rendered', () => {
107 | let maybeRenderedFiber: Fiber | null = null;
108 | instrument({
109 | onCommitFiberRoot: (_rendererID, fiberRoot) => {
110 | maybeRenderedFiber = fiberRoot.current.child;
111 | },
112 | });
113 | render(
127 |
,
129 | );
130 | expect(maybeRenderedFiber).not.toBeNull();
131 | expect(didFiberRender(maybeRenderedFiber as unknown as Fiber)).toBe(false);
132 | });
133 | });
134 |
135 | describe('didFiberCommit', () => {
136 | it('should return true for a fiber that has committed', () => {
137 | let maybeRenderedFiber: Fiber | null = null;
138 | instrument({
139 | onCommitFiberRoot: (_rendererID, fiberRoot) => {
140 | maybeRenderedFiber = fiberRoot.current.child;
141 | },
142 | });
143 | render(HostInstance
);
286 | const fiber = getFiberFromHostInstance(screen.getByText('HostInstance'));
287 | expect(fiber).not.toBeNull();
288 | expect(fiber?.type).toBe('div');
289 | });
290 | });
291 |
--------------------------------------------------------------------------------
/packages/bippy/src/test/core/instrument.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, expect, it, vi } from 'vitest';
2 | import type { FiberRoot } from '../../types.js';
3 | import {
4 | instrument,
5 | isInstrumentationActive,
6 | secure,
7 | onCommitFiberRoot,
8 | getRDTHook,
9 | } from '../../index.js';
10 | // biome-ignore lint/correctness/noUnusedImports: needed for JSX
11 | import React from 'react';
12 | import { render } from '@testing-library/react';
13 | import { BasicComponent, BasicComponentWithEffect } from '../components.js';
14 |
15 | describe('instrument', () => {
16 | it('should not fail if __REACT_DEVTOOLS_GLOBAL_HOOK__ exists already', () => {
17 | render(Hello
);
22 | render(Hello
);
13 | instrument({
14 | onActive,
15 | });
16 | expect(onActive).toHaveBeenCalled();
17 | });
18 |
--------------------------------------------------------------------------------
/packages/bippy/src/test/development/pre-react-devtools.test.tsx:
--------------------------------------------------------------------------------
1 | // import react devtools, then bippy
2 |
3 | import { expect, vi, it } from 'vitest';
4 |
5 | // @ts-ignore
6 | import { activate, initialize } from 'react-devtools-inline/backend';
7 | // @ts-ignore
8 | import { initialize as initializeFrontend } from 'react-devtools-inline/frontend';
9 |
10 | initialize(window);
11 |
12 | // biome-ignore lint/correctness/noUnusedVariables: needed for JSX
13 | const React = await import('react');
14 |
15 | const DevTools = initializeFrontend(window);
16 |
17 | activate(window);
18 |
19 | const { render } = await import('@testing-library/react');
20 | const { instrument } = await import('../../index.js');
21 |
22 | it('should be active', () => {
23 | render(Hello
);
24 | render(Hello
);
12 | instrument({
13 | onActive,
14 | });
15 | expect(onActive).not.toHaveBeenCalled();
16 | });
17 |
--------------------------------------------------------------------------------
/packages/bippy/src/types.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | HostConfig,
3 | Thenable,
4 | RootTag,
5 | WorkTag,
6 | HookType,
7 | Source,
8 | LanePriority,
9 | Lanes,
10 | Flags,
11 | TypeOfMode,
12 | ReactProvider,
13 | ReactProviderType,
14 | ReactConsumer,
15 | ReactContext,
16 | ReactPortal,
17 | RefObject,
18 | Fiber as ReactFiber,
19 | FiberRoot,
20 | MutableSource,
21 | OpaqueHandle,
22 | OpaqueRoot,
23 | BundleType,
24 | DevToolsConfig,
25 | SuspenseHydrationCallbacks,
26 | TransitionTracingCallbacks,
27 | ComponentSelector,
28 | HasPseudoClassSelector,
29 | RoleSelector,
30 | TextSelector,
31 | TestNameSelector,
32 | Selector,
33 | React$AbstractComponent,
34 | } from 'react-reconciler';
35 |
36 | export type {
37 | HostConfig,
38 | Thenable,
39 | RootTag,
40 | WorkTag,
41 | HookType,
42 | Source,
43 | LanePriority,
44 | Lanes,
45 | Flags,
46 | TypeOfMode,
47 | ReactProvider,
48 | ReactProviderType,
49 | ReactConsumer,
50 | ReactContext,
51 | ReactPortal,
52 | RefObject,
53 | FiberRoot,
54 | MutableSource,
55 | OpaqueHandle,
56 | OpaqueRoot,
57 | BundleType,
58 | DevToolsConfig,
59 | SuspenseHydrationCallbacks,
60 | TransitionTracingCallbacks,
61 | ComponentSelector,
62 | HasPseudoClassSelector,
63 | RoleSelector,
64 | TextSelector,
65 | TestNameSelector,
66 | Selector,
67 | React$AbstractComponent,
68 | };
69 |
70 | export interface ReactDevToolsGlobalHook {
71 | checkDCE: (fn: unknown) => void;
72 | supportsFiber: boolean;
73 | supportsFlight: boolean;
74 | renderers: Map
51 | {tabs.map((tab, i) => (
52 |
53 | {i > 0 && ·}
54 |
64 |
65 | ))}
66 |
67 | );
68 | }
69 |
70 | export function cn(...inputs: (string | undefined | boolean)[]) {
71 | return twMerge(clsx(inputs));
72 | }
73 |
74 | function SideLayout({ children }: SideLayoutProps) {
75 | return (
76 |
77 | {children}
78 |
79 | );
80 | }
81 |
82 | function Text({
83 | as: Component = 'p',
84 | children,
85 | className,
86 | ...props
87 | }: TextProps) {
88 | return (
89 | -
116 | {children}
117 |
137 |
138 |
173 | 174 |
286 |
287 | );
288 | }
289 |
--------------------------------------------------------------------------------
/packages/kitchen-sink/src/main.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 |
3 | html,
4 | body {
5 | font-family: "Geist Mono", Menlo, Consolas, Monaco, Liberation Mono, Lucida
6 | Console, monospace;
7 | }
8 |
9 | :root {
10 | color-scheme: dark;
11 | --sh-class: #f0f0f0;
12 | --sh-identifier: #f0f0f0;
13 | --sh-sign: #9b9b9b;
14 | --sh-property: #dfb58f;
15 | --sh-entity: #dfb58f;
16 | --sh-jsxliterals: #dfb58f;
17 | --sh-string: #9b9b9b;
18 | --sh-keyword: #9b9b9b;
19 | --sh-comment: #a19595;
20 | }
21 |
22 | .font-sans {
23 | font-family: "Geist", sans-serif;
24 | }
25 |
26 | pre code {
27 | counter-reset: sh-line-number;
28 | }
29 |
30 | .sh__line::before {
31 | counter-increment: sh-line-number 1;
32 | content: counter(sh-line-number);
33 | margin-right: 2ch;
34 | text-align: right;
35 | color: #9b9b9b71;
36 | }
37 |
--------------------------------------------------------------------------------
/packages/kitchen-sink/src/main.tsx:
--------------------------------------------------------------------------------
1 | import 'bippy/dist/index';
2 | import Inspector from 'bippy/dist/experiments/inspect';
3 |
4 | import { StrictMode } from 'react';
5 | import ReactDOM from 'react-dom/client';
6 | import App from './app';
7 | // @ts-ignore
8 | import './main.css';
9 |
10 | const rootElement = document.getElementById('root');
11 | if (rootElement && !rootElement.innerHTML) {
12 | const root = ReactDOM.createRoot(rootElement);
13 | root.render(
14 |
139 | {__VERSION__}
164 |
165 |
171 |
172 |
140 | 
setImgSize(imgSize + 10)}
147 | onKeyDown={(e) => {
148 | if (e.key === 'Enter') {
149 | setImgSize(imgSize + 10);
150 | }
151 | }}
152 | onMouseEnter={() => setIsSpinning(true)}
153 | onMouseLeave={() => setIsSpinning(false)}
154 | />
155 |
156 | bippy
157 |
158 |
159 |
163 | setImgSize(imgSize + 10)}
147 | onKeyDown={(e) => {
148 | if (e.key === 'Enter') {
149 | setImgSize(imgSize + 10);
150 | }
151 | }}
152 | onMouseEnter={() => setIsSpinning(true)}
153 | onMouseLeave={() => setIsSpinning(false)}
154 | />
155 |
166 |
167 | /github
168 |
169 |
170 | 173 | 174 |
175 |
176 | bippy is a toolkit to{' '}
177 |
178 | hack into react internals
179 |
180 |
181 |
182 |
183 |
184 |
185 | by default, you cannot access react internals. bippy bypasses this
186 | by "pretending" to be react devtools, giving you access to the fiber
187 | tree and other internals.
188 |
189 |
190 |
191 | -
192 |
210 |
211 | you can get started in {'<'}6 lines of code:
212 |
213 |
214 |
215 | 216 |249 | 250 |217 |220 | {activeTab === 'basic' && ( 221 |218 |
219 |{ 229 | traverseFiber(root.current, (fiber) => { 230 | console.log('fiber:', fiber); 231 | }); 232 | })`), 233 | }} 234 | /> 235 | )} 236 | {activeTab === 'inspect' && ( 237 |`), 245 | }} 246 | /> 247 | )} 248 |
251 |
252 |
258 |
259 |
260 |
261 |
262 |
285 |
263 |
264 |
265 | ⚠️ warning:{' '}
266 |
267 |
268 | this project may break production apps and cause unexpected
269 | behavior
270 |
271 |
272 |
273 |
274 |
275 | this project uses react internals, which can change at any time.
276 | it is not recommended to depend on internals unless you really,{' '}
277 |
278 | really have to.
279 | {' '}
280 | by proceeding, you acknowledge the risk of breaking your own code
281 | or apps that use your code.
282 |
283 |
284 |
6 |
11 |
30 |
56 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/packages/next-kitchen-sink/components/fiber.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { getFiberFromHostInstance } from '../dist/index';
4 | import { getFiberSource } from '../dist/source';
5 |
6 | export function ClientFiber() {
7 | setTimeout(async () => {
8 | if (typeof window === 'undefined') {
9 | return;
10 | }
11 | const fiber = getFiberFromHostInstance(
12 | // biome-ignore lint/style/noNonNullAssertion: Fiber
;
21 | }
22 |
--------------------------------------------------------------------------------
/packages/next-kitchen-sink/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 |
3 | const nextConfig: NextConfig = {
4 | /* config options here */
5 | };
6 |
7 | export default nextConfig;
8 |
--------------------------------------------------------------------------------
/packages/next-kitchen-sink/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@bippy/next-kitchen-sink",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "rm -rf .next && bun scripts/move-dist.ts && next dev --turbopack",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "next": "15.3.2",
13 | "react": "^19.0.0",
14 | "react-dom": "^19.0.0"
15 | },
16 | "devDependencies": {
17 | "@eslint/eslintrc": "^3",
18 | "@tailwindcss/postcss": "^4",
19 | "@types/node": "^20",
20 | "@types/react": "^19",
21 | "@types/react-dom": "^19",
22 | "eslint": "^9",
23 | "eslint-config-next": "15.3.2",
24 | "tailwindcss": "^4",
25 | "typescript": "^5"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/packages/next-kitchen-sink/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | const config = {
2 | plugins: ["@tailwindcss/postcss"],
3 | };
4 |
5 | export default config;
6 |
--------------------------------------------------------------------------------
/packages/next-kitchen-sink/public/file.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/next-kitchen-sink/public/globe.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/next-kitchen-sink/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/next-kitchen-sink/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/next-kitchen-sink/public/window.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/next-kitchen-sink/scripts/move-dist.ts:
--------------------------------------------------------------------------------
1 | import fs from 'node:fs';
2 | import path from 'node:path';
3 | import { fileURLToPath } from 'node:url';
4 |
5 | const __filename = fileURLToPath(import.meta.url);
6 | const __dirname = path.dirname(__filename);
7 |
8 | const rootDir = path.resolve(__dirname, '../../..');
9 | const bippyDistDir = path.join(rootDir, 'packages/bippy/dist');
10 | const nextKitchenSinkDir = path.join(
11 | rootDir,
12 | 'packages/next-kitchen-sink/dist'
13 | );
14 | const nextDir = path.join(nextKitchenSinkDir, '.next');
15 |
16 | function copyDirRecursive(src: string, dest: string) {
17 | if (!fs.existsSync(dest)) {
18 | fs.mkdirSync(dest, { recursive: true });
19 | }
20 |
21 | const entries = fs.readdirSync(src, { withFileTypes: true });
22 |
23 | for (const entry of entries) {
24 | const srcPath = path.join(src, entry.name);
25 | const destPath = path.join(dest, entry.name);
26 |
27 | if (entry.isDirectory()) {
28 | copyDirRecursive(srcPath, destPath);
29 | } else {
30 | fs.copyFileSync(srcPath, destPath);
31 | }
32 | }
33 | }
34 |
35 | function deleteDirRecursive(dir: string) {
36 | if (fs.existsSync(dir)) {
37 | fs.rmSync(dir, { recursive: true, force: true });
38 | }
39 | }
40 |
41 | // Execute operations
42 | // biome-ignore lint/suspicious/noConsoleLog: