bippy 0.7.2-dev.b756bd6 → 0.7.2-dev.e316d1f
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -58
- package/dist/rdt-hook.cjs +1 -1
- package/dist/rdt-hook.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,64 +15,6 @@ React keeps its internals out of reach. bippy opens them up for metaprogramming,
|
|
|
15
15
|
>
|
|
16
16
|
> This project uses React internals, which can change at any time. We don’t recommend depending on them unless you have to. By proceeding, you acknowledge the risk of breaking your own code or apps that use your code.
|
|
17
17
|
|
|
18
|
-
## How React works internally
|
|
19
|
-
|
|
20
|
-
A Fiber is both a node in React’s internal representation of the UI and a unit of work that React can schedule. As a [UI runtime](https://overreacted.io/react-as-a-ui-runtime/), React produces and maintains a tree in a host environment such as the browser. Fiber is the data structure React uses to reconcile that UI.
|
|
21
|
-
|
|
22
|
-
React builds the Fiber tree as it renders your [component tree](https://react.dev/learn/understanding-your-ui-as-a-tree). Each Fiber is a mutable object representing a component, host element, text node, or internal boundary. It stores the node’s props, state, position in the tree, and pending work.
|
|
23
|
-
|
|
24
|
-
Consider this component tree:
|
|
25
|
-
|
|
26
|
-
```tsx
|
|
27
|
-
const Button = () => <button>Save</button>;
|
|
28
|
-
|
|
29
|
-
const App = () => (
|
|
30
|
-
<main>
|
|
31
|
-
<Button />
|
|
32
|
-
</main>
|
|
33
|
-
);
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
Each rendered tree has a [`FiberRoot`](https://github.com/facebook/react/blob/beef6d60f46a97f5c20471df81760fcf365d63ef/packages/react-reconciler/src/ReactInternalTypes.js#L212-L221) container. Its `current` field points to the `HostRoot` Fiber at the top of the tree. `HostRoot`, `FunctionComponent`, and `HostComponent` are [React’s internal work tags](https://github.com/facebook/react/blob/beef6d60f46a97f5c20471df81760fcf365d63ef/packages/react-reconciler/src/ReactWorkTags.js#L44-L49).
|
|
37
|
-
|
|
38
|
-
```text
|
|
39
|
-
FiberRoot
|
|
40
|
-
└── current → HostRoot Fiber
|
|
41
|
-
└── App FunctionComponent
|
|
42
|
-
└── main HostComponent
|
|
43
|
-
└── Button FunctionComponent
|
|
44
|
-
└── button HostComponent
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
Fibers are actual linked objects. React defines their shape in the [`Fiber` type](https://github.com/facebook/react/blob/beef6d60f46a97f5c20471df81760fcf365d63ef/packages/react-reconciler/src/ReactInternalTypes.js#L87-L174) and initializes them in [`FiberNode`](https://github.com/facebook/react/blob/beef6d60f46a97f5c20471df81760fcf365d63ef/packages/react-reconciler/src/ReactFiber.js#L134-L173). The host Fiber for `<button>` resembles this object:
|
|
48
|
-
|
|
49
|
-
```js
|
|
50
|
-
FiberNode {
|
|
51
|
-
tag: 5,
|
|
52
|
-
type: "button",
|
|
53
|
-
stateNode: HTMLButtonElement {},
|
|
54
|
-
return: FiberNode { … },
|
|
55
|
-
child: null,
|
|
56
|
-
sibling: null,
|
|
57
|
-
memoizedProps: { children: "Save" },
|
|
58
|
-
flags: 0,
|
|
59
|
-
alternate: null
|
|
60
|
-
}
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
The fields connect React’s component tree, pending work, and rendered output:
|
|
64
|
-
|
|
65
|
-
- [`tag`](https://github.com/facebook/react/blob/beef6d60f46a97f5c20471df81760fcf365d63ef/packages/react-reconciler/src/ReactInternalTypes.js#L100-L101) identifies the Fiber’s internal node kind
|
|
66
|
-
- [`type`](https://github.com/facebook/react/blob/beef6d60f46a97f5c20471df81760fcf365d63ef/packages/react-reconciler/src/ReactInternalTypes.js#L106-L114) identifies the component or host element, while `stateNode` points to its renderer-owned instance
|
|
67
|
-
- [`return`, `child`, and `sibling`](https://github.com/facebook/react/blob/beef6d60f46a97f5c20471df81760fcf365d63ef/packages/react-reconciler/src/ReactInternalTypes.js#L122-L131) form the linked tree
|
|
68
|
-
- [`memoizedProps`](https://github.com/facebook/react/blob/beef6d60f46a97f5c20471df81760fcf365d63ef/packages/react-reconciler/src/ReactInternalTypes.js#L142-L150) and `memoizedState` contain the inputs used to produce the current output
|
|
69
|
-
- [`flags`](https://github.com/facebook/react/blob/beef6d60f46a97f5c20471df81760fcf365d63ef/packages/react-reconciler/src/ReactFiberFlags.js#L14-L52) records work that React must perform during the commit phase
|
|
70
|
-
- [`alternate`](https://github.com/facebook/react/blob/beef6d60f46a97f5c20471df81760fcf365d63ef/packages/react-reconciler/src/ReactFiber.js#L322-L351) links the current Fiber to its work-in-progress counterpart
|
|
71
|
-
|
|
72
|
-
During an update, React builds a work-in-progress tree beside the current tree. React can pause or discard this work. During the [commit phase](https://react.dev/learn/render-and-commit#step-3-react-commits-changes-to-the-dom), React applies the finished work and makes that tree current.
|
|
73
|
-
|
|
74
|
-
React does not expose Fiber as a public API. bippy “hacks into React” by accessing it anyway, giving you a consistent way to inspect Fiber trees across React versions and renderers.
|
|
75
|
-
|
|
76
18
|
## Install bippy
|
|
77
19
|
|
|
78
20
|
Install bippy:
|
package/dist/rdt-hook.cjs
CHANGED
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
* This source code is licensed under the MIT license found in the
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
|
8
8
|
*/
|
|
9
|
-
const e=`0.7.2-dev.
|
|
9
|
+
const e=`0.7.2-dev.e316d1f`,t=`bippy-${e}`,n=Object.defineProperty,r=()=>{},i=e=>Object.assign(e,{[Symbol.dispose]:e}),a=e=>{try{Function.prototype.toString.call(e).indexOf(`^_^`)>-1&&setTimeout(()=>{throw Error(`React is running in production mode, but dead code elimination has not been applied. Read how to correctly configure React for production: https://react.dev/link/perf-use-production-build`)})}catch{}},o=(e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__)=>!!(e&&`getFiberRoots`in e),s=(e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__)=>{if(!e||typeof e.inject!=`function`||o(e))return!1;try{return Function.prototype.toString.call(e.inject).includes(`(injected)`)}catch{return!1}},c=new Set,l=new Set,u=new Set,d=new Set,f=new WeakSet,p=new WeakMap,m=()=>{for(let e of c)e()},h=e=>{for(let t of u)t(e)},g=e=>{for(let t of d)t(e)},_=e=>{if(e.inject===p.get(e))return;let t=e.inject,n=n=>{let r=t.call(e,n);return f.has(n)||(f.add(n),h(n)),r};e.inject=n,p.set(e,n)},v=e=>(_(T()),u.add(e),i(()=>{u.delete(e)})),y=e=>(d.add(e),i(()=>{d.delete(e)})),b=e=>(e.renderers instanceof Map||(e.renderers=new Map),e.renderers),x=(e,t,n,r)=>{t.set(n,r),l.add(r),e._instrumentationIsActive||(e._instrumentationIsActive=!0,m())},S=e=>{e&&c.add(e);let i=new Map,o=0,s={_instrumentationIsActive:!1,_instrumentationSource:t,checkDCE:a,hasUnsupportedRendererAttached:!1,inject:e=>{let t=++o;return x(s,i,t,e),t},on:r,onCommitFiberRoot:r,onCommitFiberUnmount:r,onPostCommitFiberRoot:r,renderers:i,supportsFiber:!0,supportsFlight:!0};try{if(n(globalThis,`__REACT_DEVTOOLS_GLOBAL_HOOK__`,{configurable:!0,enumerable:!0,get(){return s},set(t){if(t&&typeof t==`object`){let n=s.renderers;s=t;let r=b(s);n.forEach((e,t)=>{l.add(e),r.set(t,e)}),(n.size>0||d.size>0)&&C(e),g(s)}}}),typeof window<`u`){let e=window.hasOwnProperty.bind(window),t=Object.getOwnPropertyDescriptor(window,`hasOwnProperty`),r=!1,i=()=>{t?n(window,`hasOwnProperty`,t):Reflect.deleteProperty(window,`hasOwnProperty`)};n(window,`hasOwnProperty`,{configurable:!0,value:t=>!r&&t===`__REACT_DEVTOOLS_GLOBAL_HOOK__`?(r=!0,i(),globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__=void 0,!1):e(t),writable:!0})}}catch{C(e)}return s},C=e=>{e&&c.add(e);let n=!1,i=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!i)return;let u=b(i);if(!i._instrumentationSource){i.checkDCE=a,i.supportsFiber=!0,i.supportsFlight=!0,i.hasUnsupportedRendererAttached=!1,i._instrumentationSource=t,i._instrumentationIsActive=!1;let e=o(i);e||(i.on=r),u.size?(u.forEach(e=>l.add(e)),i._instrumentationIsActive=!0,m(),n=!0):!e&&s(i)&&(i._instrumentationIsActive=!0,m(),n=!0);let c=i.inject;i.inject=e=>{let t=c.call(i,e);return x(i,u,t,e),t}}!n&&(u.size||i._instrumentationIsActive)&&e?.()},w=()=>Object.hasOwn(globalThis,`__REACT_DEVTOOLS_GLOBAL_HOOK__`),T=e=>w()?(C(e),globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__??S(e)):S(e);Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"d",{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,"f",{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return w}}),Object.defineProperty(exports,"p",{enumerable:!0,get:function(){return e}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return y}});
|
package/dist/rdt-hook.js
CHANGED
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
* This source code is licensed under the MIT license found in the
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
|
8
8
|
*/
|
|
9
|
-
const e=`0.7.2-dev.
|
|
9
|
+
const e=`0.7.2-dev.e316d1f`,t=`bippy-${e}`,n=Object.defineProperty,r=()=>{},i=e=>Object.assign(e,{[Symbol.dispose]:e}),a=e=>{try{Function.prototype.toString.call(e).indexOf(`^_^`)>-1&&setTimeout(()=>{throw Error(`React is running in production mode, but dead code elimination has not been applied. Read how to correctly configure React for production: https://react.dev/link/perf-use-production-build`)})}catch{}},o=(e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__)=>!!(e&&`getFiberRoots`in e),s=(e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__)=>{if(!e||typeof e.inject!=`function`||o(e))return!1;try{return Function.prototype.toString.call(e.inject).includes(`(injected)`)}catch{return!1}},c=new Set,l=new Set,u=new Set,d=new Set,f=new WeakSet,p=new WeakMap,m=()=>{for(let e of c)e()},h=e=>{for(let t of u)t(e)},g=e=>{for(let t of d)t(e)},_=e=>{if(e.inject===p.get(e))return;let t=e.inject,n=n=>{let r=t.call(e,n);return f.has(n)||(f.add(n),h(n)),r};e.inject=n,p.set(e,n)},v=e=>(_(T()),u.add(e),i(()=>{u.delete(e)})),y=e=>(d.add(e),i(()=>{d.delete(e)})),b=e=>(e.renderers instanceof Map||(e.renderers=new Map),e.renderers),x=(e,t,n,r)=>{t.set(n,r),l.add(r),e._instrumentationIsActive||(e._instrumentationIsActive=!0,m())},S=e=>{e&&c.add(e);let i=new Map,o=0,s={_instrumentationIsActive:!1,_instrumentationSource:t,checkDCE:a,hasUnsupportedRendererAttached:!1,inject:e=>{let t=++o;return x(s,i,t,e),t},on:r,onCommitFiberRoot:r,onCommitFiberUnmount:r,onPostCommitFiberRoot:r,renderers:i,supportsFiber:!0,supportsFlight:!0};try{if(n(globalThis,`__REACT_DEVTOOLS_GLOBAL_HOOK__`,{configurable:!0,enumerable:!0,get(){return s},set(t){if(t&&typeof t==`object`){let n=s.renderers;s=t;let r=b(s);n.forEach((e,t)=>{l.add(e),r.set(t,e)}),(n.size>0||d.size>0)&&C(e),g(s)}}}),typeof window<`u`){let e=window.hasOwnProperty.bind(window),t=Object.getOwnPropertyDescriptor(window,`hasOwnProperty`),r=!1,i=()=>{t?n(window,`hasOwnProperty`,t):Reflect.deleteProperty(window,`hasOwnProperty`)};n(window,`hasOwnProperty`,{configurable:!0,value:t=>!r&&t===`__REACT_DEVTOOLS_GLOBAL_HOOK__`?(r=!0,i(),globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__=void 0,!1):e(t),writable:!0})}}catch{C(e)}return s},C=e=>{e&&c.add(e);let n=!1,i=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!i)return;let u=b(i);if(!i._instrumentationSource){i.checkDCE=a,i.supportsFiber=!0,i.supportsFlight=!0,i.hasUnsupportedRendererAttached=!1,i._instrumentationSource=t,i._instrumentationIsActive=!1;let e=o(i);e||(i.on=r),u.size?(u.forEach(e=>l.add(e)),i._instrumentationIsActive=!0,m(),n=!0):!e&&s(i)&&(i._instrumentationIsActive=!0,m(),n=!0);let c=i.inject;i.inject=e=>{let t=c.call(i,e);return x(i,u,t,e),t}}!n&&(u.size||i._instrumentationIsActive)&&e?.()},w=()=>Object.hasOwn(globalThis,`__REACT_DEVTOOLS_GLOBAL_HOOK__`),T=e=>w()?(C(e),globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__??S(e)):S(e);export{T as a,s as c,v as d,C as f,i,o as l,c as n,w as o,e as p,l as r,S as s,t,y as u};
|