bippy 0.0.1 → 0.0.3
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 +6 -2
- package/dist/index.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,19 +1,23 @@
|
|
|
1
1
|
# <img src="https://github.com/aidenybai/bippy/blob/main/.github/assets/bippy.png?raw=true" width="60" align="center" /> bippy
|
|
2
2
|
|
|
3
|
-
a
|
|
3
|
+
a kitchen sink of utilities for working with react fiber. this project assumes that you don't have access to the actual react application code. used internally for [`react-scan`](https://github.com/aidenybai/react-scan).
|
|
4
4
|
|
|
5
5
|
> [!WARNING]
|
|
6
6
|
> this project accesses react internals. this is not recommended and may break production apps - unless you acknowledge this risk and know exactly you're doing.
|
|
7
7
|
|
|
8
8
|
## example
|
|
9
9
|
|
|
10
|
+
this script logs every rendered fiber in the current [commit](https://react.dev/learn/render-and-commit).
|
|
11
|
+
|
|
10
12
|
```jsx
|
|
11
13
|
import { instrument, traverseFiberRoot } from 'bippy'; // must be imported BEFORE react
|
|
12
14
|
|
|
13
15
|
instrument({
|
|
14
16
|
onCommitFiberRoot: traverseFiberRoot({
|
|
15
17
|
onRender(fiber) {
|
|
16
|
-
|
|
18
|
+
const displayName = getDisplayName(fiber.type);
|
|
19
|
+
if (!displayName) return;
|
|
20
|
+
console.log(`${displayName} rendered`, fiber);
|
|
17
21
|
},
|
|
18
22
|
}),
|
|
19
23
|
});
|
package/dist/index.d.mts
CHANGED
|
@@ -44,6 +44,8 @@ declare const getTimings: (fiber?: Fiber | null | undefined) => {
|
|
|
44
44
|
};
|
|
45
45
|
declare const getFiberFromElement: (element: HTMLElement) => Fiber | null;
|
|
46
46
|
declare const hasMemoCache: (fiber: Fiber) => boolean;
|
|
47
|
+
declare const getType: (type: any) => any;
|
|
48
|
+
declare const getDisplayName: (type: any) => string | null;
|
|
47
49
|
declare const getRDTHook: () => {
|
|
48
50
|
checkDCE: () => void;
|
|
49
51
|
supportsFiber: boolean;
|
|
@@ -76,4 +78,4 @@ declare const instrument: ({ onCommitFiberRoot, onCommitFiberUnmount, onPostComm
|
|
|
76
78
|
inject: (renderer: unknown) => number;
|
|
77
79
|
};
|
|
78
80
|
|
|
79
|
-
export { CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ClassComponentTag, ContextConsumerTag, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponent, ForwardRefTag, Fragment, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRoot, HostSingletonTag, HostText, LegacyHiddenComponent, MemoComponentTag, OffscreenComponent, PerformedWorkFlag, SimpleMemoComponentTag, didFiberRender, getFiberFromElement, getNearestHostFiber, getRDTHook, getTimings, hasMemoCache, instrument, isCompositeComponent, isHostComponent, shouldFilterFiber, traverseContexts, traverseFiber, traverseFiberRoot, traverseState };
|
|
81
|
+
export { CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ClassComponentTag, ContextConsumerTag, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponent, ForwardRefTag, Fragment, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRoot, HostSingletonTag, HostText, LegacyHiddenComponent, MemoComponentTag, OffscreenComponent, PerformedWorkFlag, SimpleMemoComponentTag, didFiberRender, getDisplayName, getFiberFromElement, getNearestHostFiber, getRDTHook, getTimings, getType, hasMemoCache, instrument, isCompositeComponent, isHostComponent, shouldFilterFiber, traverseContexts, traverseFiber, traverseFiberRoot, traverseState };
|
package/dist/index.d.ts
CHANGED
|
@@ -44,6 +44,8 @@ declare const getTimings: (fiber?: Fiber | null | undefined) => {
|
|
|
44
44
|
};
|
|
45
45
|
declare const getFiberFromElement: (element: HTMLElement) => Fiber | null;
|
|
46
46
|
declare const hasMemoCache: (fiber: Fiber) => boolean;
|
|
47
|
+
declare const getType: (type: any) => any;
|
|
48
|
+
declare const getDisplayName: (type: any) => string | null;
|
|
47
49
|
declare const getRDTHook: () => {
|
|
48
50
|
checkDCE: () => void;
|
|
49
51
|
supportsFiber: boolean;
|
|
@@ -76,4 +78,4 @@ declare const instrument: ({ onCommitFiberRoot, onCommitFiberUnmount, onPostComm
|
|
|
76
78
|
inject: (renderer: unknown) => number;
|
|
77
79
|
};
|
|
78
80
|
|
|
79
|
-
export { CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ClassComponentTag, ContextConsumerTag, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponent, ForwardRefTag, Fragment, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRoot, HostSingletonTag, HostText, LegacyHiddenComponent, MemoComponentTag, OffscreenComponent, PerformedWorkFlag, SimpleMemoComponentTag, didFiberRender, getFiberFromElement, getNearestHostFiber, getRDTHook, getTimings, hasMemoCache, instrument, isCompositeComponent, isHostComponent, shouldFilterFiber, traverseContexts, traverseFiber, traverseFiberRoot, traverseState };
|
|
81
|
+
export { CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ClassComponentTag, ContextConsumerTag, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponent, ForwardRefTag, Fragment, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRoot, HostSingletonTag, HostText, LegacyHiddenComponent, MemoComponentTag, OffscreenComponent, PerformedWorkFlag, SimpleMemoComponentTag, didFiberRender, getDisplayName, getFiberFromElement, getNearestHostFiber, getRDTHook, getTimings, getType, hasMemoCache, instrument, isCompositeComponent, isHostComponent, shouldFilterFiber, traverseContexts, traverseFiber, traverseFiberRoot, traverseState };
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e="Symbol(react.concurrent_mode)",t="Symbol(react.async_mode)",o=e=>5===e.tag||26===e.tag||27===e.tag,r=e=>{const t=e.memoizedProps,o=e.alternate?.memoizedProps||{},r=e.flags??e.effectTag??0;switch(e.tag){case 1:case 0:case 9:case 11:case 14:case 15:return!(1&~r);default:return!e.alternate||(o!==t||e.alternate.memoizedState!==e.memoizedState||e.alternate.ref!==e.ref)}},n=o=>{switch(o.tag){case 18:case 6:case 7:case 23:case 22:return!0;case 3:return!1;default:{const r="object"==typeof o.type&&null!==o.type?o.type.$$typeof:o.type;switch("symbol"==typeof r?r.toString():r){case 60111:case e:case t:return!0;default:return!1}}}},s=(e,t,o=!1)=>{if(!e)return null;if(!0===t(e))return e;let r=o?e.return:e.child;for(;r;){const e=s(r,t,o);if(e)return e;r=o?null:r.sibling}return null},i=()=>{},
|
|
1
|
+
"use strict";var e="Symbol(react.concurrent_mode)",t="Symbol(react.async_mode)",o=e=>5===e.tag||26===e.tag||27===e.tag,r=e=>{const t=e.memoizedProps,o=e.alternate?.memoizedProps||{},r=e.flags??e.effectTag??0;switch(e.tag){case 1:case 0:case 9:case 11:case 14:case 15:return!(1&~r);default:return!e.alternate||(o!==t||e.alternate.memoizedState!==e.memoizedState||e.alternate.ref!==e.ref)}},n=o=>{switch(o.tag){case 18:case 6:case 7:case 23:case 22:return!0;case 3:return!1;default:{const r="object"==typeof o.type&&null!==o.type?o.type.$$typeof:o.type;switch("symbol"==typeof r?r.toString():r){case 60111:case e:case t:return!0;default:return!1}}}},s=(e,t,o=!1)=>{if(!e)return null;if(!0===t(e))return e;let r=o?e.return:e.child;for(;r;){const e=s(r,t,o);if(e)return e;r=o?null:r.sibling}return null},a=e=>"function"==typeof e?e:"object"==typeof e&&e?a(e.type||e.render):null,i=()=>{},l=()=>{let e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;const t=new Map;let o=0;e??={checkDCE:i,supportsFiber:!0,supportsFlight:!0,renderers:t,onCommitFiberRoot:i,onCommitFiberUnmount:i,onPostCommitFiberRoot:i,inject(e){const r=++o;return t.set(r,e),r}};try{globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__=e}catch{}return e};"undefined"!=typeof window&&l();exports.CONCURRENT_MODE_NUMBER=60111,exports.CONCURRENT_MODE_SYMBOL_STRING=e,exports.ClassComponentTag=1,exports.ContextConsumerTag=9,exports.DEPRECATED_ASYNC_MODE_SYMBOL_STRING=t,exports.DehydratedSuspenseComponent=18,exports.ForwardRefTag=11,exports.Fragment=7,exports.FunctionComponentTag=0,exports.HostComponentTag=5,exports.HostHoistableTag=26,exports.HostRoot=3,exports.HostSingletonTag=27,exports.HostText=6,exports.LegacyHiddenComponent=23,exports.MemoComponentTag=14,exports.OffscreenComponent=22,exports.PerformedWorkFlag=1,exports.SimpleMemoComponentTag=15,exports.didFiberRender=r,exports.getDisplayName=e=>{const t=e.displayName||e.name||null;return t||((e=a(e))&&(e.displayName||e.name)||null)},exports.getFiberFromElement=e=>{const{renderers:t}=l();if(!t)return null;for(const[o,r]of Array.from(t))try{const t=r.findFiberByHostInstance(e);if(t)return t}catch(e){}if("_reactRootContainer"in e)return e._reactRootContainer?._internalRoot?.current?.child;for(const t in e)if(t.startsWith("__reactInternalInstance$")||t.startsWith("__reactFiber"))return e[t];return null},exports.getNearestHostFiber=e=>{let t=s(e,o);return t||(t=s(e,o,!0)),t},exports.getRDTHook=l,exports.getTimings=e=>{const t=e?.actualDuration??0;let o=t,r=e?.child??null;for(;t>0&&null!=r;)o-=r.actualDuration??0,r=r.sibling;return{selfTime:o,totalTime:t}},exports.getType=a,exports.hasMemoCache=e=>Boolean(e.updateQueue?.memoCache),exports.instrument=({onCommitFiberRoot:e,onCommitFiberUnmount:t,onPostCommitFiberRoot:o})=>{const r=l(),n=r.onCommitFiberRoot;e&&(r.onCommitFiberRoot=(t,o)=>{n&&n(t,o),e(t,o)});const s=r.onCommitFiberUnmount;t&&(r.onCommitFiberUnmount=(e,o)=>{s&&s(e,o),t(e,o)});const a=r.onPostCommitFiberRoot;return o&&(r.onPostCommitFiberRoot=(e,t)=>{a&&a(e,t)}),r},exports.isCompositeComponent=e=>0===e.tag||1===e.tag||15===e.tag||14===e.tag||11===e.tag,exports.isHostComponent=o,exports.shouldFilterFiber=n,exports.traverseContexts=(e,t)=>{const o=e.dependencies,r=e.alternate?.dependencies;if(!o||!r)return!1;if("object"!=typeof o||!("firstContext"in o)||"object"!=typeof r||!("firstContext"in r))return!1;let n=o.firstContext,s=r.firstContext;for(;n&&"object"==typeof n&&"memoizedValue"in n&&s&&"object"==typeof s&&"memoizedValue"in s;){if(!0===t(n,s))return!0;n=n.next,s=s.next}return!1},exports.traverseFiber=s,exports.traverseFiberRoot=({onRender:e})=>(t,o)=>{const s=o.current,a=null!==s.alternate&&Boolean(s.alternate.memoizedState?.element)&&!0!==s.alternate.memoizedState.isDehydrated,i=Boolean(s.memoizedState?.element),l=(t,o)=>{let s=t;for(;null!=s;){!n(s)&&r(s)&&e(s),null!=s.child&&l(s.child,!0),s=o?s.sibling:null}},m=(t,o)=>{if(!o)return;if(!n(t)&&r(t)&&e(t),t.child!==o.child){let e=t.child;for(;e;){const t=e.alternate;t?m(e,t):l(e,!1),e=e.sibling}}};!a&&i?l(s,!1):a&&i&&m(s,s.alternate)},exports.traverseState=(e,t)=>{let o=e.memoizedState,r=e.alternate?.memoizedState;for(;o&&r;){if(!0===t(o,r))return!0;o=o.next,r=r.next}return!1};
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
1
|
+
var e=1,t=1,n=0,o=9,r=11,a=14,i=15,l=5,c=26,s=27,u=18,m=6,f=7,d=23,b=22,p=3,y=60111,_="Symbol(react.concurrent_mode)",C="Symbol(react.async_mode)",h=(e,t)=>{const n=e.dependencies,o=e.alternate?.dependencies;if(!n||!o)return!1;if("object"!=typeof n||!("firstContext"in n)||"object"!=typeof o||!("firstContext"in o))return!1;let r=n.firstContext,a=o.firstContext;for(;r&&"object"==typeof r&&"memoizedValue"in r&&a&&"object"==typeof a&&"memoizedValue"in a;){if(!0===t(r,a))return!0;r=r.next,a=a.next}return!1},g=(e,t)=>{let n=e.memoizedState,o=e.alternate?.memoizedState;for(;n&&o;){if(!0===t(n,o))return!0;n=n.next,o=o.next}return!1},F=e=>5===e.tag||26===e.tag||27===e.tag,R=e=>0===e.tag||1===e.tag||15===e.tag||14===e.tag||11===e.tag,S=e=>{const t=e.memoizedProps,n=e.alternate?.memoizedProps||{},o=e.flags??e.effectTag??0;switch(e.tag){case 1:case 0:case 9:case 11:case 14:case 15:return!(1&~o);default:return!e.alternate||(n!==t||e.alternate.memoizedState!==e.memoizedState||e.alternate.ref!==e.ref)}},z=e=>{switch(e.tag){case 18:case 6:case 7:case 23:case 22:return!0;case 3:return!1;default:{const t="object"==typeof e.type&&null!==e.type?e.type.$$typeof:e.type;switch("symbol"==typeof t?t.toString():t){case 60111:case _:case C:return!0;default:return!1}}}},O=e=>{let t=x(e,F);return t||(t=x(e,F,!0)),t},x=(e,t,n=!1)=>{if(!e)return null;if(!0===t(e))return e;let o=n?e.return:e.child;for(;o;){const e=x(o,t,n);if(e)return e;o=n?null:o.sibling}return null},T=e=>{const t=e?.actualDuration??0;let n=t,o=e?.child??null;for(;t>0&&null!=o;)n-=o.actualDuration??0,o=o.sibling;return{selfTime:n,totalTime:t}},j=e=>{const{renderers:t}=P();if(!t)return null;for(const[n,o]of Array.from(t))try{const t=o.findFiberByHostInstance(e);if(t)return t}catch(e){}if("_reactRootContainer"in e)return e._reactRootContainer?._internalRoot?.current?.child;for(const t in e)if(t.startsWith("__reactInternalInstance$")||t.startsWith("__reactFiber"))return e[t];return null},w=e=>Boolean(e.updateQueue?.memoCache),B=e=>"function"==typeof e?e:"object"==typeof e&&e?B(e.type||e.render):null,D=e=>{const t=e.displayName||e.name||null;return t||((e=B(e))&&(e.displayName||e.name)||null)},L=()=>{},P=()=>{let e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;const t=new Map;let n=0;e??={checkDCE:L,supportsFiber:!0,supportsFlight:!0,renderers:t,onCommitFiberRoot:L,onCommitFiberUnmount:L,onPostCommitFiberRoot:L,inject(e){const o=++n;return t.set(o,e),o}};try{globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__=e}catch{}return e};"undefined"!=typeof window&&P();var A=({onRender:e})=>(t,n)=>{const o=n.current,r=null!==o.alternate&&Boolean(o.alternate.memoizedState?.element)&&!0!==o.alternate.memoizedState.isDehydrated,a=Boolean(o.memoizedState?.element),i=(t,n)=>{let o=t;for(;null!=o;){!z(o)&&S(o)&&e(o),null!=o.child&&i(o.child,!0),o=n?o.sibling:null}},l=(t,n)=>{if(!n)return;if(!z(t)&&S(t)&&e(t),t.child!==n.child){let e=t.child;for(;e;){const t=e.alternate;t?l(e,t):i(e,!1),e=e.sibling}}};!r&&a?i(o,!1):r&&a&&l(o,o.alternate)},E=({onCommitFiberRoot:e,onCommitFiberUnmount:t,onPostCommitFiberRoot:n})=>{const o=P(),r=o.onCommitFiberRoot;e&&(o.onCommitFiberRoot=(t,n)=>{r&&r(t,n),e(t,n)});const a=o.onCommitFiberUnmount;t&&(o.onCommitFiberUnmount=(e,n)=>{a&&a(e,n),t(e,n)});const i=o.onPostCommitFiberRoot;return n&&(o.onPostCommitFiberRoot=(e,t)=>{i&&i(e,t)}),o};export{y as CONCURRENT_MODE_NUMBER,_ as CONCURRENT_MODE_SYMBOL_STRING,t as ClassComponentTag,o as ContextConsumerTag,C as DEPRECATED_ASYNC_MODE_SYMBOL_STRING,u as DehydratedSuspenseComponent,r as ForwardRefTag,f as Fragment,n as FunctionComponentTag,l as HostComponentTag,c as HostHoistableTag,p as HostRoot,s as HostSingletonTag,m as HostText,d as LegacyHiddenComponent,a as MemoComponentTag,b as OffscreenComponent,e as PerformedWorkFlag,i as SimpleMemoComponentTag,S as didFiberRender,D as getDisplayName,j as getFiberFromElement,O as getNearestHostFiber,P as getRDTHook,T as getTimings,B as getType,w as hasMemoCache,E as instrument,R as isCompositeComponent,F as isHostComponent,z as shouldFilterFiber,h as traverseContexts,x as traverseFiber,A as traverseFiberRoot,g as traverseState};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bippy",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.0.3",
|
|
4
|
+
"description": "a kitchen sink of utilities for working with react fiber",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
7
7
|
"react-instrumentation",
|
|
@@ -9,13 +9,13 @@
|
|
|
9
9
|
"fiber",
|
|
10
10
|
"internals"
|
|
11
11
|
],
|
|
12
|
-
"homepage": "https://github.com/aidenybai/
|
|
12
|
+
"homepage": "https://github.com/aidenybai/bippy#readme",
|
|
13
13
|
"bugs": {
|
|
14
|
-
"url": "https://github.com/aidenybai/
|
|
14
|
+
"url": "https://github.com/aidenybai/bippy/issues"
|
|
15
15
|
},
|
|
16
16
|
"repository": {
|
|
17
17
|
"type": "git",
|
|
18
|
-
"url": "git+https://github.com/aidenybai/
|
|
18
|
+
"url": "git+https://github.com/aidenybai/bippy.git"
|
|
19
19
|
},
|
|
20
20
|
"license": "MIT",
|
|
21
21
|
"author": {
|