bippy 0.0.12 → 0.0.14

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/dist/index.d.mts CHANGED
@@ -73,15 +73,15 @@ declare const getRDTHook: () => {
73
73
  onPostCommitFiberRoot: (rendererID: number, root: unknown) => void;
74
74
  inject: (renderer: unknown) => number;
75
75
  };
76
- type RenderHandler = (fiber: Fiber, phase: 'mount' | 'update' | 'unmount') => void;
76
+ type RenderHandler = <S>(fiber: Fiber, phase: 'mount' | 'update' | 'unmount', state?: S) => void;
77
77
  declare const mountFiberRecursively: (onRender: RenderHandler, firstChild: Fiber, traverseSiblings: boolean) => void;
78
78
  declare const updateFiberRecursively: (onRender: RenderHandler, nextFiber: Fiber, prevFiber: Fiber, parentFiber: Fiber | null) => void;
79
79
  declare const unmountFiber: (onRender: RenderHandler, fiber: Fiber) => void;
80
80
  declare const unmountFiberChildrenRecursively: (onRender: RenderHandler, fiber: Fiber) => void;
81
- declare const createFiberVisitor: ({ onRender, onError, }: {
81
+ declare const createFiberVisitor: ({ onRender: onRenderWithoutState, onError, }: {
82
82
  onRender: RenderHandler;
83
83
  onError?: (error: unknown) => void;
84
- }) => (_rendererID: number, root: FiberRoot) => void;
84
+ }) => <S>(_rendererID: number, root: FiberRoot, state?: S) => void;
85
85
  declare const instrument: ({ onCommitFiberRoot, onCommitFiberUnmount, onPostCommitFiberRoot, }: {
86
86
  onCommitFiberRoot?: (rendererID: number, root: FiberRoot) => void;
87
87
  onCommitFiberUnmount?: (rendererID: number, root: FiberRoot) => void;
package/dist/index.d.ts CHANGED
@@ -73,15 +73,15 @@ declare const getRDTHook: () => {
73
73
  onPostCommitFiberRoot: (rendererID: number, root: unknown) => void;
74
74
  inject: (renderer: unknown) => number;
75
75
  };
76
- type RenderHandler = (fiber: Fiber, phase: 'mount' | 'update' | 'unmount') => void;
76
+ type RenderHandler = <S>(fiber: Fiber, phase: 'mount' | 'update' | 'unmount', state?: S) => void;
77
77
  declare const mountFiberRecursively: (onRender: RenderHandler, firstChild: Fiber, traverseSiblings: boolean) => void;
78
78
  declare const updateFiberRecursively: (onRender: RenderHandler, nextFiber: Fiber, prevFiber: Fiber, parentFiber: Fiber | null) => void;
79
79
  declare const unmountFiber: (onRender: RenderHandler, fiber: Fiber) => void;
80
80
  declare const unmountFiberChildrenRecursively: (onRender: RenderHandler, fiber: Fiber) => void;
81
- declare const createFiberVisitor: ({ onRender, onError, }: {
81
+ declare const createFiberVisitor: ({ onRender: onRenderWithoutState, onError, }: {
82
82
  onRender: RenderHandler;
83
83
  onError?: (error: unknown) => void;
84
- }) => (_rendererID: number, root: FiberRoot) => void;
84
+ }) => <S>(_rendererID: number, root: FiberRoot, state?: S) => void;
85
85
  declare const instrument: ({ onCommitFiberRoot, onCommitFiberUnmount, onPostCommitFiberRoot, }: {
86
86
  onCommitFiberRoot?: (rendererID: number, root: FiberRoot) => void;
87
87
  onCommitFiberUnmount?: (rendererID: number, root: FiberRoot) => void;
@@ -1 +1 @@
1
- var Bippy=(function(exports){'use strict';var H=1,w=0,k=9,_=13,D=22,M=11,z=14,P=15,E=5,N=26,V=27,I=18,U=6,L=7,j=23,A=22,B=3,W=60111,R="Symbol(react.concurrent_mode)",O="Symbol(react.async_mode)",$=1,G=2,Y=128,K=4096,Q=4,q=8,J=16,X=32,Z=512,ee=1024,te=8192,oe=13366,ne=e=>typeof e=="object"&&e!==null&&"$$typeof"in e&&String(e.$$typeof)==="Symbol(react.element)",d=e=>e.tag===5||e.tag===26||e.tag===27,re=e=>e.tag===0||e.tag===1||e.tag===15||e.tag===14||e.tag===11,le=(e,t)=>{try{let n=e.dependencies,o=e.alternate?.dependencies;if(!n||!o||typeof n!="object"||!("firstContext"in n)||typeof o!="object"||!("firstContext"in o))return !1;let r=n.firstContext,i=o.firstContext;for(;r&&typeof r=="object"&&"memoizedValue"in r&&i&&typeof i=="object"&&"memoizedValue"in i;){if(t(r,i)===!0)return !0;r=r.next,i=i.next;}}catch{}return !1},ie=(e,t)=>{try{let n=e.memoizedState,o=e.alternate?.memoizedState;for(;n&&o;){if(t(n,o)===!0)return !0;n=n.next,o=o.next;}}catch{}return !1},se=(e,t)=>{try{let n=e.memoizedProps,o=e.alternate?.memoizedProps||{};for(let r in {...o,...n}){let i=o?.[r],s=n?.[r];if(t(i,s)===!0)return !0}}catch{}return !1},u=e=>{let 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 (o&1)===1;default:return e.alternate?n!==t||e.alternate.memoizedState!==e.memoizedState||e.alternate.ref!==e.ref:!0}},C=e=>!!(u(e)&&(e.subtreeFlags&13374||e.deletions)),f=e=>{if(!C(e))return [];let t=[];for(let n=e.sibling;n;n=n.sibling)d(n)&&C(n.return??n)&&u(n)&&(t.push(n),t.push(...f(n)));return e.child&&d(e.child)&&C(e)&&u(e.child)&&(t.push(e.child),t.push(...f(e.child))),t},ae=e=>{let t=[];for(;e.return;)t.unshift(e),e=e.return;return t},b=e=>{switch(e.tag){case 18:return !0;case 6:case 7:case 23:case 22:return !0;case 3:return !1;default:{let t=typeof e.type=="object"&&e.type!==null?e.type.$$typeof:e.type;switch(typeof t=="symbol"?t.toString():t){case 60111:case R:case O:return !0;default:return !1}}}},ce=e=>{let t=h(e,d);return t||(t=h(e,d,!0)),t},h=(e,t,n=!1)=>{if(!e)return null;if(t(e)===!0)return e;let o=n?e.return:e.child;for(;o;){let r=h(o,t,n);if(r)return r;o=n?null:o.sibling;}return null},ue=e=>{let t=e?.actualDuration??0,n=t,o=e?.child??null;for(;t>0&&o!=null;)n-=o.actualDuration??0,o=o.sibling;return {selfTime:n,totalTime:t}},me=e=>!!e.updateQueue?.memoCache,F=e=>typeof e=="function"?e:typeof e=="object"&&e?F(e.type||e.render):null,pe=e=>{if(typeof e!="function"&&!(typeof e=="object"&&e))return null;let t=e.displayName||e.name||null;return t||(e=F(e),e&&(e.displayName||e.name)||null)},p=()=>{},y=()=>{let e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__,t=new Map,n=0;e??={checkDCE:p,supportsFiber:!0,supportsFlight:!0,renderers:t,onCommitFiberRoot:p,onCommitFiberUnmount:p,onPostCommitFiberRoot:p,inject(o){let r=++n;return t.set(r,o),r}};try{globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__=e;}catch{}return e};typeof window<"u"&&y();var c=(e,t,n)=>{let o=t;for(;o!=null;){if(!b(o)&&u(o)&&e(o,"mount"),o.tag===13)if(o.memoizedState!==null){let s=o.child,a=s?s.sibling:null;if(a){let l=a.child;l!==null&&c(e,l,!1);}}else {let s=null;o.child!==null&&(s=o.child.child),s!==null&&c(e,s,!1);}else o.child!=null&&c(e,o.child,!0);o=n?o.sibling:null;}},g=(e,t,n,o)=>{if(!n)return;let r=t.tag===13,i=!b(t);i&&u(t)&&e(t,"update");let s=r&&n.memoizedState!==null,a=r&&t.memoizedState!==null;if(s&&a){let l=t.child?.sibling??null,m=n.child?.sibling??null;l!==null&&m!==null&&g(e,l,m);}else if(s&&!a){let l=t.child;l!==null&&c(e,l,!0);}else if(!s&&a){S(e,n);let l=t.child?.sibling??null;l!==null&&c(e,l,!0);}else if(t.child!==n.child){let l=t.child;for(;l;){if(l.alternate){let m=l.alternate;g(e,l,m);}else c(e,l,!1);l=l.sibling;}}},T=(e,t)=>{(t.tag===3||!b(t))&&e(t,"unmount");},S=(e,t)=>{let n=t.tag===13&&t.memoizedState!==null,o=t.child;for(n&&(o=(t.child?.sibling??null)?.child??null);o!==null;)o.return!==null&&(T(e,o),S(e,o)),o=o.sibling;},v=0,x=new WeakMap,de=({onRender:e,onError:t})=>(n,o)=>{let r=o.current,i=x.get(o);i||(i={prevFiber:null,id:v++},x.set(o,i));let{prevFiber:s}=i;try{if(s!==null){let a=s&&s.memoizedState!=null&&s.memoizedState.element!=null&&s.memoizedState.isDehydrated!==!0,l=r.memoizedState!=null&&r.memoizedState.element!=null&&r.memoizedState.isDehydrated!==!0;!a&&l?c(e,r,!1):a&&l?g(e,r,r.alternate,null):a&&!l&&T(e,r);}else c(e,r,!1);}catch(a){if(t)t(a);else throw a}i.prevFiber=r;},Ce=({onCommitFiberRoot:e,onCommitFiberUnmount:t,onPostCommitFiberRoot:n})=>{let o=y(),r=o.onCommitFiberRoot;e&&(o.onCommitFiberRoot=(a,l)=>{r&&r(a,l),e(a,l);});let i=o.onCommitFiberUnmount;t&&(o.onCommitFiberUnmount=(a,l)=>{i&&i(a,l),t(a,l);});let s=o.onPostCommitFiberRoot;return n&&(o.onPostCommitFiberRoot=(a,l)=>{s&&s(a,l);}),o};exports.CONCURRENT_MODE_NUMBER=W;exports.CONCURRENT_MODE_SYMBOL_STRING=R;exports.ChildDeletion=J;exports.ClassComponentTag=H;exports.Cloned=q;exports.ContentReset=X;exports.ContextConsumerTag=k;exports.DEPRECATED_ASYNC_MODE_SYMBOL_STRING=O;exports.DehydratedSuspenseComponent=I;exports.DidCapture=Y;exports.ForwardRefTag=M;exports.Fragment=L;exports.FunctionComponentTag=w;exports.HostComponentTag=E;exports.HostHoistableTag=N;exports.HostRoot=B;exports.HostSingletonTag=V;exports.HostText=U;exports.Hydrating=K;exports.LegacyHiddenComponent=j;exports.MemoComponentTag=z;exports.MutationMask=oe;exports.OffscreenComponent=A;exports.OffscreenComponentTag=D;exports.PerformedWork=$;exports.Placement=G;exports.Ref=Z;exports.SimpleMemoComponentTag=P;exports.Snapshot=ee;exports.SuspenseComponentTag=_;exports.Update=Q;exports.Visibility=te;exports.createFiberVisitor=de;exports.didFiberCommit=C;exports.didFiberRender=u;exports.getDisplayName=pe;exports.getFiberStack=ae;exports.getMutatedHostFibers=f;exports.getNearestHostFiber=ce;exports.getRDTHook=y;exports.getTimings=ue;exports.getType=F;exports.hasMemoCache=me;exports.instrument=Ce;exports.isCompositeFiber=re;exports.isHostFiber=d;exports.isValidElement=ne;exports.mountFiberRecursively=c;exports.shouldFilterFiber=b;exports.traverseContexts=le;exports.traverseFiber=h;exports.traverseProps=se;exports.traverseState=ie;exports.unmountFiber=T;exports.unmountFiberChildrenRecursively=S;exports.updateFiberRecursively=g;return exports;})({});
1
+ var Bippy=(function(exports){'use strict';var w=1,H=0,k=9,_=13,D=22,M=11,z=14,P=15,E=5,N=26,V=27,I=18,U=6,L=7,j=23,A=22,B=3,W=60111,T="Symbol(react.concurrent_mode)",R="Symbol(react.async_mode)",$=1,G=2,Y=128,K=4096,Q=4,q=8,J=16,X=32,Z=512,ee=1024,te=8192,oe=13366,ne=e=>typeof e=="object"&&e!==null&&"$$typeof"in e&&String(e.$$typeof)==="Symbol(react.element)",d=e=>e.tag===5||e.tag===26||e.tag===27,re=e=>e.tag===0||e.tag===1||e.tag===15||e.tag===14||e.tag===11,le=(e,o)=>{try{let n=e.dependencies,t=e.alternate?.dependencies;if(!n||!t||typeof n!="object"||!("firstContext"in n)||typeof t!="object"||!("firstContext"in t))return !1;let r=n.firstContext,i=t.firstContext;for(;r&&typeof r=="object"&&"memoizedValue"in r&&i&&typeof i=="object"&&"memoizedValue"in i;){if(o(r,i)===!0)return !0;r=r.next,i=i.next;}}catch{}return !1},ie=(e,o)=>{try{let n=e.memoizedState,t=e.alternate?.memoizedState;for(;n&&t;){if(o(n,t)===!0)return !0;n=n.next,t=t.next;}}catch{}return !1},se=(e,o)=>{try{let n=e.memoizedProps,t=e.alternate?.memoizedProps||{};for(let r in {...t,...n}){let i=t?.[r],s=n?.[r];if(o(i,s)===!0)return !0}}catch{}return !1},f=e=>{let o=e.memoizedProps,n=e.alternate?.memoizedProps||{},t=e.flags??e.effectTag??0;switch(e.tag){case 1:case 0:case 9:case 11:case 14:case 15:return (t&1)===1;default:return e.alternate?n!==o||e.alternate.memoizedState!==e.memoizedState||e.alternate.ref!==e.ref:!0}},v=e=>!!(e.subtreeFlags&13374||e.deletions!=null||e.alternate==null),ae=e=>{let o=[],n=new WeakSet,t=r=>{!r||n.has(r)||(n.add(r),d(r)&&v(r.return??r)&&f(r)&&o.push(r),r.child&&t(r.child),r.sibling&&t(r.sibling));};return t(e),o},ue=e=>{let o=[];for(;e.return;)o.unshift(e),e=e.return;return o},g=e=>{switch(e.tag){case 18:return !0;case 6:case 7:case 23:case 22:return !0;case 3:return !1;default:{let o=typeof e.type=="object"&&e.type!==null?e.type.$$typeof:e.type;switch(typeof o=="symbol"?o.toString():o){case 60111:case T:case R:return !0;default:return !1}}}},ce=e=>{let o=C(e,d);return o||(o=C(e,d,!0)),o},C=(e,o,n=!1)=>{if(!e)return null;if(o(e)===!0)return e;let t=n?e.return:e.child;for(;t;){let r=C(t,o,n);if(r)return r;t=n?null:t.sibling;}return null},me=e=>{let o=e?.actualDuration??0,n=o,t=e?.child??null;for(;o>0&&t!=null;)n-=t.actualDuration??0,t=t.sibling;return {selfTime:n,totalTime:o}},pe=e=>!!e.updateQueue?.memoCache,F=e=>typeof e=="function"?e:typeof e=="object"&&e?F(e.type||e.render):null,de=e=>{if(typeof e!="function"&&!(typeof e=="object"&&e))return null;let o=e.displayName||e.name||null;return o||(e=F(e),e&&(e.displayName||e.name)||null)},p=()=>{},x=()=>{let e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__,o=new Map,n=0;e??={checkDCE:p,supportsFiber:!0,supportsFlight:!0,renderers:o,onCommitFiberRoot:p,onCommitFiberUnmount:p,onPostCommitFiberRoot:p,inject(t){let r=++n;return o.set(r,t),r}};try{globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__=e;}catch{}return e};typeof window<"u"&&x();var c=(e,o,n)=>{let t=o;for(;t!=null;){if(!g(t)&&f(t)&&e(t,"mount"),t.tag===13)if(t.memoizedState!==null){let s=t.child,a=s?s.sibling:null;if(a){let l=a.child;l!==null&&c(e,l,!1);}}else {let s=null;t.child!==null&&(s=t.child.child),s!==null&&c(e,s,!1);}else t.child!=null&&c(e,t.child,!0);t=n?t.sibling:null;}},b=(e,o,n,t)=>{if(!n)return;let r=o.tag===13,i=!g(o);i&&f(o)&&e(o,"update");let s=r&&n.memoizedState!==null,a=r&&o.memoizedState!==null;if(s&&a){let l=o.child?.sibling??null,u=n.child?.sibling??null;l!==null&&u!==null&&b(e,l,u);}else if(s&&!a){let l=o.child;l!==null&&c(e,l,!0);}else if(!s&&a){y(e,n);let l=o.child?.sibling??null;l!==null&&c(e,l,!0);}else if(o.child!==n.child){let l=o.child;for(;l;){if(l.alternate){let u=l.alternate;b(e,l,u);}else c(e,l,!1);l=l.sibling;}}},S=(e,o)=>{(o.tag===3||!g(o))&&e(o,"unmount");},y=(e,o)=>{let n=o.tag===13&&o.memoizedState!==null,t=o.child;for(n&&(t=(o.child?.sibling??null)?.child??null);t!==null;)t.return!==null&&(S(e,t),y(e,t)),t=t.sibling;},O=0,h=new WeakMap,Ce=({onRender:e,onError:o})=>(n,t,r)=>{let i=t.current,s=(u,m)=>e(u,m,r),a=h.get(t);a||(a={prevFiber:null,id:O++},h.set(t,a));let{prevFiber:l}=a;try{if(l!==null){let u=l&&l.memoizedState!=null&&l.memoizedState.element!=null&&l.memoizedState.isDehydrated!==!0,m=i.memoizedState!=null&&i.memoizedState.element!=null&&i.memoizedState.isDehydrated!==!0;!u&&m?c(s,i,!1):u&&m?b(s,i,i.alternate,null):u&&!m&&S(s,i);}else c(s,i,!1);}catch(u){if(o)o(u);else throw u}a.prevFiber=i;},be=({onCommitFiberRoot:e,onCommitFiberUnmount:o,onPostCommitFiberRoot:n})=>{let t=x(),r=t.onCommitFiberRoot;e&&(t.onCommitFiberRoot=(a,l)=>{r&&r(a,l),e(a,l);});let i=t.onCommitFiberUnmount;o&&(t.onCommitFiberUnmount=(a,l)=>{i&&i(a,l),o(a,l);});let s=t.onPostCommitFiberRoot;return n&&(t.onPostCommitFiberRoot=(a,l)=>{s&&s(a,l);}),t};exports.CONCURRENT_MODE_NUMBER=W;exports.CONCURRENT_MODE_SYMBOL_STRING=T;exports.ChildDeletion=J;exports.ClassComponentTag=w;exports.Cloned=q;exports.ContentReset=X;exports.ContextConsumerTag=k;exports.DEPRECATED_ASYNC_MODE_SYMBOL_STRING=R;exports.DehydratedSuspenseComponent=I;exports.DidCapture=Y;exports.ForwardRefTag=M;exports.Fragment=L;exports.FunctionComponentTag=H;exports.HostComponentTag=E;exports.HostHoistableTag=N;exports.HostRoot=B;exports.HostSingletonTag=V;exports.HostText=U;exports.Hydrating=K;exports.LegacyHiddenComponent=j;exports.MemoComponentTag=z;exports.MutationMask=oe;exports.OffscreenComponent=A;exports.OffscreenComponentTag=D;exports.PerformedWork=$;exports.Placement=G;exports.Ref=Z;exports.SimpleMemoComponentTag=P;exports.Snapshot=ee;exports.SuspenseComponentTag=_;exports.Update=Q;exports.Visibility=te;exports.createFiberVisitor=Ce;exports.didFiberCommit=v;exports.didFiberRender=f;exports.getDisplayName=de;exports.getFiberStack=ue;exports.getMutatedHostFibers=ae;exports.getNearestHostFiber=ce;exports.getRDTHook=x;exports.getTimings=me;exports.getType=F;exports.hasMemoCache=pe;exports.instrument=be;exports.isCompositeFiber=re;exports.isHostFiber=d;exports.isValidElement=ne;exports.mountFiberRecursively=c;exports.shouldFilterFiber=g;exports.traverseContexts=le;exports.traverseFiber=C;exports.traverseProps=se;exports.traverseState=ie;exports.unmountFiber=S;exports.unmountFiberChildrenRecursively=y;exports.updateFiberRecursively=b;return exports;})({});
package/dist/index.js CHANGED
@@ -104,22 +104,26 @@ var didFiberRender = (fiber) => {
104
104
  };
105
105
  var didFiberCommit = (fiber) => {
106
106
  return Boolean(
107
- didFiberRender(fiber) && (fiber.subtreeFlags & (MutationMask | Cloned) || fiber.deletions)
107
+ fiber.subtreeFlags & (MutationMask | Cloned) || fiber.deletions != null || fiber.alternate == null
108
108
  );
109
109
  };
110
110
  var getMutatedHostFibers = (fiber) => {
111
- if (!didFiberCommit(fiber)) return [];
112
111
  const mutations = [];
113
- for (let sibling = fiber.sibling; sibling; sibling = sibling.sibling) {
114
- if (isHostFiber(sibling) && didFiberCommit(sibling.return ?? sibling) && didFiberRender(sibling)) {
115
- mutations.push(sibling);
116
- mutations.push(...getMutatedHostFibers(sibling));
112
+ const visited = /* @__PURE__ */ new WeakSet();
113
+ const traverse = (node) => {
114
+ if (!node || visited.has(node)) return;
115
+ visited.add(node);
116
+ if (isHostFiber(node) && didFiberCommit(node.return ?? node) && didFiberRender(node)) {
117
+ mutations.push(node);
117
118
  }
118
- }
119
- if (fiber.child && isHostFiber(fiber.child) && didFiberCommit(fiber) && didFiberRender(fiber.child)) {
120
- mutations.push(fiber.child);
121
- mutations.push(...getMutatedHostFibers(fiber.child));
122
- }
119
+ if (node.child) {
120
+ traverse(node.child);
121
+ }
122
+ if (node.sibling) {
123
+ traverse(node.sibling);
124
+ }
125
+ };
126
+ traverse(fiber);
123
127
  return mutations;
124
128
  };
125
129
  var getFiberStack = (fiber) => {
@@ -337,11 +341,12 @@ var unmountFiberChildrenRecursively = (onRender, fiber) => {
337
341
  var commitId = 0;
338
342
  var rootInstanceMap = /* @__PURE__ */ new WeakMap();
339
343
  var createFiberVisitor = ({
340
- onRender,
344
+ onRender: onRenderWithoutState,
341
345
  onError
342
346
  }) => {
343
- return (_rendererID, root) => {
347
+ return (_rendererID, root, state) => {
344
348
  const rootFiber = root.current;
349
+ const onRender = (fiber, phase) => onRenderWithoutState(fiber, phase, state);
345
350
  let rootInstance = rootInstanceMap.get(root);
346
351
  if (!rootInstance) {
347
352
  rootInstance = { prevFiber: null, id: commitId++ };
package/dist/index.mjs CHANGED
@@ -102,22 +102,26 @@ var didFiberRender = (fiber) => {
102
102
  };
103
103
  var didFiberCommit = (fiber) => {
104
104
  return Boolean(
105
- didFiberRender(fiber) && (fiber.subtreeFlags & (MutationMask | Cloned) || fiber.deletions)
105
+ fiber.subtreeFlags & (MutationMask | Cloned) || fiber.deletions != null || fiber.alternate == null
106
106
  );
107
107
  };
108
108
  var getMutatedHostFibers = (fiber) => {
109
- if (!didFiberCommit(fiber)) return [];
110
109
  const mutations = [];
111
- for (let sibling = fiber.sibling; sibling; sibling = sibling.sibling) {
112
- if (isHostFiber(sibling) && didFiberCommit(sibling.return ?? sibling) && didFiberRender(sibling)) {
113
- mutations.push(sibling);
114
- mutations.push(...getMutatedHostFibers(sibling));
110
+ const visited = /* @__PURE__ */ new WeakSet();
111
+ const traverse = (node) => {
112
+ if (!node || visited.has(node)) return;
113
+ visited.add(node);
114
+ if (isHostFiber(node) && didFiberCommit(node.return ?? node) && didFiberRender(node)) {
115
+ mutations.push(node);
115
116
  }
116
- }
117
- if (fiber.child && isHostFiber(fiber.child) && didFiberCommit(fiber) && didFiberRender(fiber.child)) {
118
- mutations.push(fiber.child);
119
- mutations.push(...getMutatedHostFibers(fiber.child));
120
- }
117
+ if (node.child) {
118
+ traverse(node.child);
119
+ }
120
+ if (node.sibling) {
121
+ traverse(node.sibling);
122
+ }
123
+ };
124
+ traverse(fiber);
121
125
  return mutations;
122
126
  };
123
127
  var getFiberStack = (fiber) => {
@@ -335,11 +339,12 @@ var unmountFiberChildrenRecursively = (onRender, fiber) => {
335
339
  var commitId = 0;
336
340
  var rootInstanceMap = /* @__PURE__ */ new WeakMap();
337
341
  var createFiberVisitor = ({
338
- onRender,
342
+ onRender: onRenderWithoutState,
339
343
  onError
340
344
  }) => {
341
- return (_rendererID, root) => {
345
+ return (_rendererID, root, state) => {
342
346
  const rootFiber = root.current;
347
+ const onRender = (fiber, phase) => onRenderWithoutState(fiber, phase, state);
343
348
  let rootInstance = rootInstanceMap.get(root);
344
349
  if (!rootInstance) {
345
350
  rootInstance = { prevFiber: null, id: commitId++ };
@@ -0,0 +1,17 @@
1
+ import { Fiber } from 'react-reconciler';
2
+
3
+ declare const getFPS: () => number;
4
+ declare const getFiberRenderScore: (fiber: Fiber) => {
5
+ unnecessary: number;
6
+ slow: number;
7
+ };
8
+ declare const isElementVisible: (el: HTMLElement) => boolean;
9
+ declare const getWindowDimensions: () => {
10
+ top: number;
11
+ left: number;
12
+ right: number;
13
+ bottom: number;
14
+ };
15
+ declare const isElementInViewport: (el: HTMLElement) => boolean;
16
+
17
+ export { getFPS, getFiberRenderScore, getWindowDimensions, isElementInViewport, isElementVisible };
@@ -0,0 +1,17 @@
1
+ import { Fiber } from 'react-reconciler';
2
+
3
+ declare const getFPS: () => number;
4
+ declare const getFiberRenderScore: (fiber: Fiber) => {
5
+ unnecessary: number;
6
+ slow: number;
7
+ };
8
+ declare const isElementVisible: (el: HTMLElement) => boolean;
9
+ declare const getWindowDimensions: () => {
10
+ top: number;
11
+ left: number;
12
+ right: number;
13
+ bottom: number;
14
+ };
15
+ declare const isElementInViewport: (el: HTMLElement) => boolean;
16
+
17
+ export { getFPS, getFiberRenderScore, getWindowDimensions, isElementInViewport, isElementVisible };
package/dist/score.js ADDED
@@ -0,0 +1,211 @@
1
+ 'use strict';
2
+
3
+ // src/index.ts
4
+ var ClassComponentTag = 1;
5
+ var FunctionComponentTag = 0;
6
+ var ContextConsumerTag = 9;
7
+ var ForwardRefTag = 11;
8
+ var MemoComponentTag = 14;
9
+ var SimpleMemoComponentTag = 15;
10
+ var HostComponentTag = 5;
11
+ var HostHoistableTag = 26;
12
+ var HostSingletonTag = 27;
13
+ var PerformedWork = 1;
14
+ var Placement = 2;
15
+ var Hydrating = 4096;
16
+ var Update = 4;
17
+ var Cloned = 8;
18
+ var ChildDeletion = 16;
19
+ var ContentReset = 32;
20
+ var Snapshot = 1024;
21
+ var Visibility = 8192;
22
+ var MutationMask = Placement | Update | ChildDeletion | ContentReset | Hydrating | Visibility | Snapshot;
23
+ var isHostFiber = (fiber) => fiber.tag === HostComponentTag || // @ts-expect-error: it exists
24
+ fiber.tag === HostHoistableTag || // @ts-expect-error: it exists
25
+ fiber.tag === HostSingletonTag;
26
+ var didFiberRender = (fiber) => {
27
+ const nextProps = fiber.memoizedProps;
28
+ const prevProps = fiber.alternate?.memoizedProps || {};
29
+ const flags = fiber.flags ?? fiber.effectTag ?? 0;
30
+ switch (fiber.tag) {
31
+ case ClassComponentTag:
32
+ case FunctionComponentTag:
33
+ case ContextConsumerTag:
34
+ case ForwardRefTag:
35
+ case MemoComponentTag:
36
+ case SimpleMemoComponentTag: {
37
+ return (flags & PerformedWork) === PerformedWork;
38
+ }
39
+ default:
40
+ if (!fiber.alternate) return true;
41
+ return prevProps !== nextProps || fiber.alternate.memoizedState !== fiber.memoizedState || fiber.alternate.ref !== fiber.ref;
42
+ }
43
+ };
44
+ var didFiberCommit = (fiber) => {
45
+ return Boolean(
46
+ fiber.subtreeFlags & (MutationMask | Cloned) || fiber.deletions != null || fiber.alternate == null
47
+ );
48
+ };
49
+ var getMutatedHostFibers = (fiber) => {
50
+ const mutations = [];
51
+ const visited = /* @__PURE__ */ new WeakSet();
52
+ const traverse = (node) => {
53
+ if (!node || visited.has(node)) return;
54
+ visited.add(node);
55
+ if (isHostFiber(node) && didFiberCommit(node.return ?? node) && didFiberRender(node)) {
56
+ mutations.push(node);
57
+ }
58
+ if (node.child) {
59
+ traverse(node.child);
60
+ }
61
+ if (node.sibling) {
62
+ traverse(node.sibling);
63
+ }
64
+ };
65
+ traverse(fiber);
66
+ return mutations;
67
+ };
68
+ var getNearestHostFiber = (fiber) => {
69
+ let hostFiber = traverseFiber(fiber, isHostFiber);
70
+ if (!hostFiber) {
71
+ hostFiber = traverseFiber(fiber, isHostFiber, true);
72
+ }
73
+ return hostFiber;
74
+ };
75
+ var traverseFiber = (fiber, selector, ascending = false) => {
76
+ if (!fiber) return null;
77
+ if (selector(fiber) === true) return fiber;
78
+ let child = ascending ? fiber.return : fiber.child;
79
+ while (child) {
80
+ const match = traverseFiber(child, selector, ascending);
81
+ if (match) return match;
82
+ child = ascending ? null : child.sibling;
83
+ }
84
+ return null;
85
+ };
86
+ var NO_OP = () => {
87
+ };
88
+ var getRDTHook = () => {
89
+ let rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
90
+ const renderers = /* @__PURE__ */ new Map();
91
+ let i = 0;
92
+ rdtHook ??= {
93
+ checkDCE: NO_OP,
94
+ supportsFiber: true,
95
+ supportsFlight: true,
96
+ renderers,
97
+ onCommitFiberRoot: NO_OP,
98
+ onCommitFiberUnmount: NO_OP,
99
+ onPostCommitFiberRoot: NO_OP,
100
+ inject(renderer) {
101
+ const nextID = ++i;
102
+ renderers.set(nextID, renderer);
103
+ return nextID;
104
+ }
105
+ };
106
+ try {
107
+ globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = rdtHook;
108
+ } catch {
109
+ }
110
+ return rdtHook;
111
+ };
112
+ if (typeof window !== "undefined") {
113
+ getRDTHook();
114
+ }
115
+
116
+ // src/score.ts
117
+ var fps = 0;
118
+ var lastTime = performance.now();
119
+ var frameCount = 0;
120
+ var inited = false;
121
+ var getFPS = () => {
122
+ const updateFPS = () => {
123
+ frameCount++;
124
+ const now = performance.now();
125
+ if (now - lastTime >= 1e3) {
126
+ fps = frameCount;
127
+ frameCount = 0;
128
+ lastTime = now;
129
+ }
130
+ requestAnimationFrame(updateFPS);
131
+ };
132
+ if (!inited) {
133
+ inited = true;
134
+ updateFPS();
135
+ }
136
+ return fps;
137
+ };
138
+ var truncateFloat = (value, maxLen = 1e4) => {
139
+ if (typeof value === "number" && parseInt(value) !== value) {
140
+ value = ~~(value * maxLen) / maxLen;
141
+ }
142
+ return value;
143
+ };
144
+ var THRESHOLD_FPS = 60;
145
+ var getFiberRenderScore = (fiber) => {
146
+ const hostFiber = getNearestHostFiber(fiber);
147
+ const hasMutation = didFiberCommit(fiber);
148
+ const mutatedHostFibers = getMutatedHostFibers(fiber);
149
+ const isVisible = hostFiber && isElementVisible(hostFiber.stateNode) && isElementInViewport(hostFiber.stateNode);
150
+ const fps2 = getFPS();
151
+ let unnecessaryScore = (
152
+ // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
153
+ isVisible || mutatedHostFibers.length || hasMutation ? 0 : 1
154
+ );
155
+ for (const mutatedHostFiber of mutatedHostFibers) {
156
+ const node = mutatedHostFiber.stateNode;
157
+ if (!isElementVisible(node) || !isElementInViewport(node)) {
158
+ unnecessaryScore += 1 / mutatedHostFibers.length;
159
+ }
160
+ }
161
+ return {
162
+ unnecessary: truncateFloat(unnecessaryScore),
163
+ slow: fps2 < THRESHOLD_FPS ? truncateFloat((THRESHOLD_FPS - fps2) / THRESHOLD_FPS) : 0
164
+ };
165
+ };
166
+ var isElementVisible = (el) => {
167
+ const style = window.getComputedStyle(el);
168
+ return style.display !== "none" && style.visibility !== "hidden" && style.contentVisibility !== "hidden" && style.opacity !== "0";
169
+ };
170
+ var initedEventListeners = false;
171
+ var scrollX = null;
172
+ var scrollY = null;
173
+ var innerWidth = null;
174
+ var innerHeight = null;
175
+ var getWindowDimensions = () => {
176
+ if (scrollX === null) scrollX = window.scrollX;
177
+ if (scrollY === null) scrollY = window.scrollY;
178
+ if (innerWidth === null) innerWidth = window.innerWidth;
179
+ if (innerHeight === null) innerHeight = window.innerHeight;
180
+ if (!initedEventListeners) {
181
+ initedEventListeners = true;
182
+ const handleResize = () => {
183
+ scrollX = null;
184
+ scrollY = null;
185
+ innerWidth = null;
186
+ innerHeight = null;
187
+ };
188
+ window.addEventListener("resize", handleResize);
189
+ window.addEventListener("scroll", handleResize);
190
+ }
191
+ return {
192
+ top: scrollY,
193
+ left: scrollX,
194
+ right: scrollX + innerWidth,
195
+ bottom: scrollY + innerHeight
196
+ };
197
+ };
198
+ var isElementInViewport = (el) => {
199
+ const elTop = el.offsetTop;
200
+ const elLeft = el.offsetLeft;
201
+ const elWidth = el.offsetWidth;
202
+ const elHeight = el.offsetHeight;
203
+ const { top, left, right, bottom } = getWindowDimensions();
204
+ return elTop + elHeight > top && elLeft + elWidth > left && elTop < bottom && elLeft < right;
205
+ };
206
+
207
+ exports.getFPS = getFPS;
208
+ exports.getFiberRenderScore = getFiberRenderScore;
209
+ exports.getWindowDimensions = getWindowDimensions;
210
+ exports.isElementInViewport = isElementInViewport;
211
+ exports.isElementVisible = isElementVisible;
package/dist/score.mjs ADDED
@@ -0,0 +1,205 @@
1
+ // src/index.ts
2
+ var ClassComponentTag = 1;
3
+ var FunctionComponentTag = 0;
4
+ var ContextConsumerTag = 9;
5
+ var ForwardRefTag = 11;
6
+ var MemoComponentTag = 14;
7
+ var SimpleMemoComponentTag = 15;
8
+ var HostComponentTag = 5;
9
+ var HostHoistableTag = 26;
10
+ var HostSingletonTag = 27;
11
+ var PerformedWork = 1;
12
+ var Placement = 2;
13
+ var Hydrating = 4096;
14
+ var Update = 4;
15
+ var Cloned = 8;
16
+ var ChildDeletion = 16;
17
+ var ContentReset = 32;
18
+ var Snapshot = 1024;
19
+ var Visibility = 8192;
20
+ var MutationMask = Placement | Update | ChildDeletion | ContentReset | Hydrating | Visibility | Snapshot;
21
+ var isHostFiber = (fiber) => fiber.tag === HostComponentTag || // @ts-expect-error: it exists
22
+ fiber.tag === HostHoistableTag || // @ts-expect-error: it exists
23
+ fiber.tag === HostSingletonTag;
24
+ var didFiberRender = (fiber) => {
25
+ const nextProps = fiber.memoizedProps;
26
+ const prevProps = fiber.alternate?.memoizedProps || {};
27
+ const flags = fiber.flags ?? fiber.effectTag ?? 0;
28
+ switch (fiber.tag) {
29
+ case ClassComponentTag:
30
+ case FunctionComponentTag:
31
+ case ContextConsumerTag:
32
+ case ForwardRefTag:
33
+ case MemoComponentTag:
34
+ case SimpleMemoComponentTag: {
35
+ return (flags & PerformedWork) === PerformedWork;
36
+ }
37
+ default:
38
+ if (!fiber.alternate) return true;
39
+ return prevProps !== nextProps || fiber.alternate.memoizedState !== fiber.memoizedState || fiber.alternate.ref !== fiber.ref;
40
+ }
41
+ };
42
+ var didFiberCommit = (fiber) => {
43
+ return Boolean(
44
+ fiber.subtreeFlags & (MutationMask | Cloned) || fiber.deletions != null || fiber.alternate == null
45
+ );
46
+ };
47
+ var getMutatedHostFibers = (fiber) => {
48
+ const mutations = [];
49
+ const visited = /* @__PURE__ */ new WeakSet();
50
+ const traverse = (node) => {
51
+ if (!node || visited.has(node)) return;
52
+ visited.add(node);
53
+ if (isHostFiber(node) && didFiberCommit(node.return ?? node) && didFiberRender(node)) {
54
+ mutations.push(node);
55
+ }
56
+ if (node.child) {
57
+ traverse(node.child);
58
+ }
59
+ if (node.sibling) {
60
+ traverse(node.sibling);
61
+ }
62
+ };
63
+ traverse(fiber);
64
+ return mutations;
65
+ };
66
+ var getNearestHostFiber = (fiber) => {
67
+ let hostFiber = traverseFiber(fiber, isHostFiber);
68
+ if (!hostFiber) {
69
+ hostFiber = traverseFiber(fiber, isHostFiber, true);
70
+ }
71
+ return hostFiber;
72
+ };
73
+ var traverseFiber = (fiber, selector, ascending = false) => {
74
+ if (!fiber) return null;
75
+ if (selector(fiber) === true) return fiber;
76
+ let child = ascending ? fiber.return : fiber.child;
77
+ while (child) {
78
+ const match = traverseFiber(child, selector, ascending);
79
+ if (match) return match;
80
+ child = ascending ? null : child.sibling;
81
+ }
82
+ return null;
83
+ };
84
+ var NO_OP = () => {
85
+ };
86
+ var getRDTHook = () => {
87
+ let rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
88
+ const renderers = /* @__PURE__ */ new Map();
89
+ let i = 0;
90
+ rdtHook ??= {
91
+ checkDCE: NO_OP,
92
+ supportsFiber: true,
93
+ supportsFlight: true,
94
+ renderers,
95
+ onCommitFiberRoot: NO_OP,
96
+ onCommitFiberUnmount: NO_OP,
97
+ onPostCommitFiberRoot: NO_OP,
98
+ inject(renderer) {
99
+ const nextID = ++i;
100
+ renderers.set(nextID, renderer);
101
+ return nextID;
102
+ }
103
+ };
104
+ try {
105
+ globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = rdtHook;
106
+ } catch {
107
+ }
108
+ return rdtHook;
109
+ };
110
+ if (typeof window !== "undefined") {
111
+ getRDTHook();
112
+ }
113
+
114
+ // src/score.ts
115
+ var fps = 0;
116
+ var lastTime = performance.now();
117
+ var frameCount = 0;
118
+ var inited = false;
119
+ var getFPS = () => {
120
+ const updateFPS = () => {
121
+ frameCount++;
122
+ const now = performance.now();
123
+ if (now - lastTime >= 1e3) {
124
+ fps = frameCount;
125
+ frameCount = 0;
126
+ lastTime = now;
127
+ }
128
+ requestAnimationFrame(updateFPS);
129
+ };
130
+ if (!inited) {
131
+ inited = true;
132
+ updateFPS();
133
+ }
134
+ return fps;
135
+ };
136
+ var truncateFloat = (value, maxLen = 1e4) => {
137
+ if (typeof value === "number" && parseInt(value) !== value) {
138
+ value = ~~(value * maxLen) / maxLen;
139
+ }
140
+ return value;
141
+ };
142
+ var THRESHOLD_FPS = 60;
143
+ var getFiberRenderScore = (fiber) => {
144
+ const hostFiber = getNearestHostFiber(fiber);
145
+ const hasMutation = didFiberCommit(fiber);
146
+ const mutatedHostFibers = getMutatedHostFibers(fiber);
147
+ const isVisible = hostFiber && isElementVisible(hostFiber.stateNode) && isElementInViewport(hostFiber.stateNode);
148
+ const fps2 = getFPS();
149
+ let unnecessaryScore = (
150
+ // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
151
+ isVisible || mutatedHostFibers.length || hasMutation ? 0 : 1
152
+ );
153
+ for (const mutatedHostFiber of mutatedHostFibers) {
154
+ const node = mutatedHostFiber.stateNode;
155
+ if (!isElementVisible(node) || !isElementInViewport(node)) {
156
+ unnecessaryScore += 1 / mutatedHostFibers.length;
157
+ }
158
+ }
159
+ return {
160
+ unnecessary: truncateFloat(unnecessaryScore),
161
+ slow: fps2 < THRESHOLD_FPS ? truncateFloat((THRESHOLD_FPS - fps2) / THRESHOLD_FPS) : 0
162
+ };
163
+ };
164
+ var isElementVisible = (el) => {
165
+ const style = window.getComputedStyle(el);
166
+ return style.display !== "none" && style.visibility !== "hidden" && style.contentVisibility !== "hidden" && style.opacity !== "0";
167
+ };
168
+ var initedEventListeners = false;
169
+ var scrollX = null;
170
+ var scrollY = null;
171
+ var innerWidth = null;
172
+ var innerHeight = null;
173
+ var getWindowDimensions = () => {
174
+ if (scrollX === null) scrollX = window.scrollX;
175
+ if (scrollY === null) scrollY = window.scrollY;
176
+ if (innerWidth === null) innerWidth = window.innerWidth;
177
+ if (innerHeight === null) innerHeight = window.innerHeight;
178
+ if (!initedEventListeners) {
179
+ initedEventListeners = true;
180
+ const handleResize = () => {
181
+ scrollX = null;
182
+ scrollY = null;
183
+ innerWidth = null;
184
+ innerHeight = null;
185
+ };
186
+ window.addEventListener("resize", handleResize);
187
+ window.addEventListener("scroll", handleResize);
188
+ }
189
+ return {
190
+ top: scrollY,
191
+ left: scrollX,
192
+ right: scrollX + innerWidth,
193
+ bottom: scrollY + innerHeight
194
+ };
195
+ };
196
+ var isElementInViewport = (el) => {
197
+ const elTop = el.offsetTop;
198
+ const elLeft = el.offsetLeft;
199
+ const elWidth = el.offsetWidth;
200
+ const elHeight = el.offsetHeight;
201
+ const { top, left, right, bottom } = getWindowDimensions();
202
+ return elTop + elHeight > top && elLeft + elWidth > left && elTop < bottom && elLeft < right;
203
+ };
204
+
205
+ export { getFPS, getFiberRenderScore, getWindowDimensions, isElementInViewport, isElementVisible };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bippy",
3
- "version": "0.0.12",
3
+ "version": "0.0.14",
4
4
  "description": "a hacky way to get fibers from react",
5
5
  "keywords": [
6
6
  "react",
@@ -35,6 +35,16 @@
35
35
  "default": "./dist/index.js"
36
36
  }
37
37
  },
38
+ "./score": {
39
+ "import": {
40
+ "types": "./dist/score.d.mts",
41
+ "default": "./dist/score.mjs"
42
+ },
43
+ "require": {
44
+ "types": "./dist/score.d.ts",
45
+ "default": "./dist/score.js"
46
+ }
47
+ },
38
48
  "./dist/*": "./dist/*.js",
39
49
  "./dist/*.js": "./dist/*.js",
40
50
  "./dist/*.mjs": "./dist/*.mjs"
@@ -1,2 +0,0 @@
1
-
2
- export { }
@@ -1,2 +0,0 @@
1
-
2
- export { }
@@ -1,21 +0,0 @@
1
- var Bippy = (function () {
2
- 'use strict';
3
-
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __commonJS = (cb, mod) => function __require() {
6
- return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
7
- };
8
-
9
- // src/rsc-shim.ts
10
- var require_rsc_shim = __commonJS({
11
- "src/rsc-shim.ts"() {
12
- throw new Error(
13
- "This module cannot be imported from a Server Component module. It should only be used from a Client Component."
14
- );
15
- }
16
- });
17
- var rscShim_global = require_rsc_shim();
18
-
19
- return rscShim_global;
20
-
21
- })();
package/dist/rsc-shim.js DELETED
@@ -1,18 +0,0 @@
1
- 'use strict';
2
-
3
- var __getOwnPropNames = Object.getOwnPropertyNames;
4
- var __commonJS = (cb, mod) => function __require() {
5
- return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
6
- };
7
-
8
- // src/rsc-shim.ts
9
- var require_rsc_shim = __commonJS({
10
- "src/rsc-shim.ts"() {
11
- throw new Error(
12
- "This module cannot be imported from a Server Component module. It should only be used from a Client Component."
13
- );
14
- }
15
- });
16
- var rscShim = require_rsc_shim();
17
-
18
- module.exports = rscShim;
package/dist/rsc-shim.mjs DELETED
@@ -1,16 +0,0 @@
1
- var __getOwnPropNames = Object.getOwnPropertyNames;
2
- var __commonJS = (cb, mod) => function __require() {
3
- return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
4
- };
5
-
6
- // src/rsc-shim.ts
7
- var require_rsc_shim = __commonJS({
8
- "src/rsc-shim.ts"() {
9
- throw new Error(
10
- "This module cannot be imported from a Server Component module. It should only be used from a Client Component."
11
- );
12
- }
13
- });
14
- var rscShim = require_rsc_shim();
15
-
16
- export { rscShim as default };