bippy 0.0.16 → 0.0.19
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.cjs +17 -18
- package/dist/index.d.cts +6 -4
- package/dist/index.d.ts +6 -4
- package/dist/index.global.js +1 -1
- package/dist/index.js +17 -18
- package/package.json +1 -1
- package/dist/score.cjs +0 -220
- package/dist/score.d.cts +0 -17
- package/dist/score.d.ts +0 -17
- package/dist/score.js +0 -214
package/dist/index.cjs
CHANGED
|
@@ -42,7 +42,7 @@ var Ref = 512;
|
|
|
42
42
|
var Snapshot = 1024;
|
|
43
43
|
var Visibility = 8192;
|
|
44
44
|
var MutationMask = Placement | Update | ChildDeletion | ContentReset | Hydrating | Visibility | Snapshot;
|
|
45
|
-
var isValidElement = (element) => typeof element === "object" && element
|
|
45
|
+
var isValidElement = (element) => typeof element === "object" && element != null && "$$typeof" in element && String(element.$$typeof) === "Symbol(react.element)";
|
|
46
46
|
var isHostFiber = (fiber) => fiber.tag === HostComponentTag || // @ts-expect-error: it exists
|
|
47
47
|
fiber.tag === HostHoistableTag || // @ts-expect-error: it exists
|
|
48
48
|
fiber.tag === HostSingletonTag;
|
|
@@ -118,21 +118,16 @@ var didFiberCommit = (fiber) => {
|
|
|
118
118
|
};
|
|
119
119
|
var getMutatedHostFibers = (fiber) => {
|
|
120
120
|
const mutations = [];
|
|
121
|
-
const
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
121
|
+
const stack = [fiber];
|
|
122
|
+
while (stack.length) {
|
|
123
|
+
const node = stack.pop();
|
|
124
|
+
if (!node) continue;
|
|
125
125
|
if (isHostFiber(node) && didFiberCommit(node) && didFiberRender(node)) {
|
|
126
126
|
mutations.push(node);
|
|
127
127
|
}
|
|
128
|
-
if (node.child)
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
if (node.sibling) {
|
|
132
|
-
traverse(node.sibling);
|
|
133
|
-
}
|
|
134
|
-
};
|
|
135
|
-
traverse(fiber);
|
|
128
|
+
if (node.child) stack.push(node.child);
|
|
129
|
+
if (node.sibling) stack.push(node.sibling);
|
|
130
|
+
}
|
|
136
131
|
return mutations;
|
|
137
132
|
};
|
|
138
133
|
var getFiberStack = (fiber) => {
|
|
@@ -240,7 +235,8 @@ var getRDTHook = () => {
|
|
|
240
235
|
const nextID = ++i;
|
|
241
236
|
renderers.set(nextID, renderer);
|
|
242
237
|
return nextID;
|
|
243
|
-
}
|
|
238
|
+
},
|
|
239
|
+
_instrumentationSource: "bippy"
|
|
244
240
|
};
|
|
245
241
|
try {
|
|
246
242
|
globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = rdtHook;
|
|
@@ -400,14 +396,17 @@ var createFiberVisitor = ({
|
|
|
400
396
|
var instrument = ({
|
|
401
397
|
onCommitFiberRoot,
|
|
402
398
|
onCommitFiberUnmount,
|
|
403
|
-
onPostCommitFiberRoot
|
|
399
|
+
onPostCommitFiberRoot,
|
|
400
|
+
name
|
|
404
401
|
}) => {
|
|
405
402
|
const devtoolsHook = getRDTHook();
|
|
403
|
+
devtoolsHook._instrumentationSource = name ?? "bippy";
|
|
406
404
|
const prevOnCommitFiberRoot = devtoolsHook.onCommitFiberRoot;
|
|
407
405
|
if (onCommitFiberRoot) {
|
|
408
|
-
devtoolsHook.onCommitFiberRoot = (rendererID, root) => {
|
|
409
|
-
if (prevOnCommitFiberRoot)
|
|
410
|
-
|
|
406
|
+
devtoolsHook.onCommitFiberRoot = (rendererID, root, priority) => {
|
|
407
|
+
if (prevOnCommitFiberRoot)
|
|
408
|
+
prevOnCommitFiberRoot(rendererID, root, priority);
|
|
409
|
+
onCommitFiberRoot(rendererID, root, priority);
|
|
411
410
|
};
|
|
412
411
|
}
|
|
413
412
|
const prevOnCommitFiberUnmount = devtoolsHook.onCommitFiberUnmount;
|
package/dist/index.d.cts
CHANGED
|
@@ -6,10 +6,11 @@ interface ReactDevToolsGlobalHook {
|
|
|
6
6
|
supportsFiber: boolean;
|
|
7
7
|
supportsFlight: boolean;
|
|
8
8
|
renderers: Map<number, unknown>;
|
|
9
|
-
onCommitFiberRoot: (rendererID: number, root: unknown) => void;
|
|
9
|
+
onCommitFiberRoot: (rendererID: number, root: unknown, priority: void | number) => void;
|
|
10
10
|
onCommitFiberUnmount: (rendererID: number, root: unknown) => void;
|
|
11
11
|
onPostCommitFiberRoot: (rendererID: number, root: unknown) => void;
|
|
12
12
|
inject: (renderer: unknown) => number;
|
|
13
|
+
_instrumentationSource?: string;
|
|
13
14
|
}
|
|
14
15
|
declare const ClassComponentTag = 1;
|
|
15
16
|
declare const FunctionComponentTag = 0;
|
|
@@ -43,7 +44,7 @@ declare const Ref = 512;
|
|
|
43
44
|
declare const Snapshot = 1024;
|
|
44
45
|
declare const Visibility = 8192;
|
|
45
46
|
declare const MutationMask: number;
|
|
46
|
-
declare const isValidElement: (element: unknown) =>
|
|
47
|
+
declare const isValidElement: (element: unknown) => element is React.ReactElement;
|
|
47
48
|
declare const isHostFiber: (fiber: Fiber) => boolean;
|
|
48
49
|
declare const isCompositeFiber: (fiber: Fiber) => boolean;
|
|
49
50
|
declare const traverseContexts: (fiber: Fiber, selector: (prevValue: {
|
|
@@ -83,10 +84,11 @@ declare const createFiberVisitor: ({ onRender: onRenderWithoutState, onError, }:
|
|
|
83
84
|
onRender: RenderHandler;
|
|
84
85
|
onError?: (error: unknown) => void;
|
|
85
86
|
}) => <S>(_rendererID: number, root: FiberRoot, state?: S) => void;
|
|
86
|
-
declare const instrument: ({ onCommitFiberRoot, onCommitFiberUnmount, onPostCommitFiberRoot, }: {
|
|
87
|
-
onCommitFiberRoot?: (rendererID: number, root: FiberRoot) => void;
|
|
87
|
+
declare const instrument: ({ onCommitFiberRoot, onCommitFiberUnmount, onPostCommitFiberRoot, name, }: {
|
|
88
|
+
onCommitFiberRoot?: (rendererID: number, root: FiberRoot, priority: void | number) => void;
|
|
88
89
|
onCommitFiberUnmount?: (rendererID: number, root: FiberRoot) => void;
|
|
89
90
|
onPostCommitFiberRoot?: (rendererID: number, root: FiberRoot) => void;
|
|
91
|
+
name?: string;
|
|
90
92
|
}) => ReactDevToolsGlobalHook;
|
|
91
93
|
|
|
92
94
|
export { CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ChildDeletion, ClassComponentTag, Cloned, ContentReset, ContextConsumerTag, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponent, DidCapture, ForwardRefTag, Fragment, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRoot, HostSingletonTag, HostText, Hydrating, LegacyHiddenComponent, MemoComponentTag, MutationMask, OffscreenComponent, OffscreenComponentTag, PerformedWork, Placement, type ReactDevToolsGlobalHook, Ref, SimpleMemoComponentTag, Snapshot, SuspenseComponentTag, Update, Visibility, createFiberVisitor, didFiberCommit, didFiberRender, getDisplayName, getFiberStack, getMutatedHostFibers, getNearestHostFiber, getRDTHook, getTimings, getType, hasMemoCache, instrument, isCompositeFiber, isHostFiber, isValidElement, mountFiberRecursively, shouldFilterFiber, traverseContexts, traverseFiber, traverseProps, traverseState, unmountFiber, unmountFiberChildrenRecursively, updateFiberRecursively };
|
package/dist/index.d.ts
CHANGED
|
@@ -6,10 +6,11 @@ interface ReactDevToolsGlobalHook {
|
|
|
6
6
|
supportsFiber: boolean;
|
|
7
7
|
supportsFlight: boolean;
|
|
8
8
|
renderers: Map<number, unknown>;
|
|
9
|
-
onCommitFiberRoot: (rendererID: number, root: unknown) => void;
|
|
9
|
+
onCommitFiberRoot: (rendererID: number, root: unknown, priority: void | number) => void;
|
|
10
10
|
onCommitFiberUnmount: (rendererID: number, root: unknown) => void;
|
|
11
11
|
onPostCommitFiberRoot: (rendererID: number, root: unknown) => void;
|
|
12
12
|
inject: (renderer: unknown) => number;
|
|
13
|
+
_instrumentationSource?: string;
|
|
13
14
|
}
|
|
14
15
|
declare const ClassComponentTag = 1;
|
|
15
16
|
declare const FunctionComponentTag = 0;
|
|
@@ -43,7 +44,7 @@ declare const Ref = 512;
|
|
|
43
44
|
declare const Snapshot = 1024;
|
|
44
45
|
declare const Visibility = 8192;
|
|
45
46
|
declare const MutationMask: number;
|
|
46
|
-
declare const isValidElement: (element: unknown) =>
|
|
47
|
+
declare const isValidElement: (element: unknown) => element is React.ReactElement;
|
|
47
48
|
declare const isHostFiber: (fiber: Fiber) => boolean;
|
|
48
49
|
declare const isCompositeFiber: (fiber: Fiber) => boolean;
|
|
49
50
|
declare const traverseContexts: (fiber: Fiber, selector: (prevValue: {
|
|
@@ -83,10 +84,11 @@ declare const createFiberVisitor: ({ onRender: onRenderWithoutState, onError, }:
|
|
|
83
84
|
onRender: RenderHandler;
|
|
84
85
|
onError?: (error: unknown) => void;
|
|
85
86
|
}) => <S>(_rendererID: number, root: FiberRoot, state?: S) => void;
|
|
86
|
-
declare const instrument: ({ onCommitFiberRoot, onCommitFiberUnmount, onPostCommitFiberRoot, }: {
|
|
87
|
-
onCommitFiberRoot?: (rendererID: number, root: FiberRoot) => void;
|
|
87
|
+
declare const instrument: ({ onCommitFiberRoot, onCommitFiberUnmount, onPostCommitFiberRoot, name, }: {
|
|
88
|
+
onCommitFiberRoot?: (rendererID: number, root: FiberRoot, priority: void | number) => void;
|
|
88
89
|
onCommitFiberUnmount?: (rendererID: number, root: FiberRoot) => void;
|
|
89
90
|
onPostCommitFiberRoot?: (rendererID: number, root: FiberRoot) => void;
|
|
91
|
+
name?: string;
|
|
90
92
|
}) => ReactDevToolsGlobalHook;
|
|
91
93
|
|
|
92
94
|
export { CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ChildDeletion, ClassComponentTag, Cloned, ContentReset, ContextConsumerTag, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponent, DidCapture, ForwardRefTag, Fragment, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRoot, HostSingletonTag, HostText, Hydrating, LegacyHiddenComponent, MemoComponentTag, MutationMask, OffscreenComponent, OffscreenComponentTag, PerformedWork, Placement, type ReactDevToolsGlobalHook, Ref, SimpleMemoComponentTag, Snapshot, SuspenseComponentTag, Update, Visibility, createFiberVisitor, didFiberCommit, didFiberRender, getDisplayName, getFiberStack, getMutatedHostFibers, getNearestHostFiber, getRDTHook, getTimings, getType, hasMemoCache, instrument, isCompositeFiber, isHostFiber, isValidElement, mountFiberRecursively, shouldFilterFiber, traverseContexts, traverseFiber, traverseProps, traverseState, unmountFiber, unmountFiberChildrenRecursively, updateFiberRecursively };
|
package/dist/index.global.js
CHANGED
|
@@ -6,4 +6,4 @@ var Bippy=(function(exports){'use strict';/**
|
|
|
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
|
-
var k=1,D=0,O=9,H=13,_=22,P=11,z=14,M=15,E=5,N=26,V=27,I=18,U=6,j=7,A=23,L=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
|
|
9
|
+
var k=1,D=0,O=9,H=13,_=22,P=11,z=14,M=15,E=5,N=26,V=27,I=18,U=6,j=7,A=23,L=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,ie=(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 i=n.firstContext,l=t.firstContext;for(;i&&typeof i=="object"&&"memoizedValue"in i&&l&&typeof l=="object"&&"memoizedValue"in l;){if(o(i,l)===!0)return !0;i=i.next,l=l.next;}}catch{}return !1},le=(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 i in {...t,...n}){let l=t?.[i],s=n?.[i];if(o(l,s)===!0)return !0}}catch{}return !1},g=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.flags&22||e.subtreeFlags&22),ae=e=>{let o=[],n=[e];for(;n.length;){let t=n.pop();t&&(d(t)&&v(t)&&g(t)&&o.push(t),t.child&&n.push(t.child),t.sibling&&n.push(t.sibling));}return o},ue=e=>{let o=[];for(;e.return;)o.push(e),e=e.return;let n=new Array(o.length);for(let t=0;t<o.length;t++)n[t]=o[o.length-t-1];return n},h=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=b(e,d);return o||(o=b(e,d,!0)),o},b=(e,o,n=!1)=>{if(!e)return null;if(o(e)===!0)return e;let t=n?e.return:e.child;for(;t;){let i=b(t,o,n);if(i)return i;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 i=++n;return o.set(i,t),i},_instrumentationSource:"bippy"};try{globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__=e;}catch{}return e};typeof window<"u"&&x();var m=(e,o,n)=>{let t=o;for(;t!=null;){if(!h(t)&&g(t)&&e(t,"mount"),t.tag===13)if(t.memoizedState!==null){let s=t.child,u=s?s.sibling:null;if(u){let r=u.child;r!==null&&m(e,r,!1);}}else {let s=null;t.child!==null&&(s=t.child.child),s!==null&&m(e,s,!1);}else t.child!=null&&m(e,t.child,!0);t=n?t.sibling:null;}},C=(e,o,n,t)=>{if(!n)return;let i=o.tag===13,l=!h(o);l&&g(o)&&e(o,"update");let s=i&&n.memoizedState!==null,u=i&&o.memoizedState!==null;if(s&&u){let r=o.child?.sibling??null,a=n.child?.sibling??null;r!==null&&a!==null&&C(e,r,a);}else if(s&&!u){let r=o.child;r!==null&&m(e,r,!0);}else if(!s&&u){y(e,n);let r=o.child?.sibling??null;r!==null&&m(e,r,!0);}else if(o.child!==n.child){let r=o.child;for(;r;){if(r.alternate){let a=r.alternate;C(e,r,a);}else m(e,r,!1);r=r.sibling;}}},S=(e,o)=>{(o.tag===3||!h(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;},w=0,f=new WeakMap,be=({onRender:e,onError:o})=>(n,t,i)=>{let l=t.current,s=(a,c)=>e(a,c,i),u=f.get(t);u||(u={prevFiber:null,id:w++},f.set(t,u));let{prevFiber:r}=u;try{if(r!==null){let a=r&&r.memoizedState!=null&&r.memoizedState.element!=null&&r.memoizedState.isDehydrated!==!0,c=l.memoizedState!=null&&l.memoizedState.element!=null&&l.memoizedState.isDehydrated!==!0;!a&&c?m(s,l,!1):a&&c?C(s,l,l.alternate,null):a&&!c&&S(s,l);}else m(s,l,!1);}catch(a){if(o)o(a);else throw a}u.prevFiber=l;},Ce=({onCommitFiberRoot:e,onCommitFiberUnmount:o,onPostCommitFiberRoot:n,name:t})=>{let i=x();i._instrumentationSource=t??"bippy";let l=i.onCommitFiberRoot;e&&(i.onCommitFiberRoot=(r,a,c)=>{l&&l(r,a,c),e(r,a,c);});let s=i.onCommitFiberUnmount;o&&(i.onCommitFiberUnmount=(r,a)=>{s&&s(r,a),o(r,a);});let u=i.onPostCommitFiberRoot;return n&&(i.onPostCommitFiberRoot=(r,a)=>{u&&u(r,a);}),i};exports.CONCURRENT_MODE_NUMBER=W;exports.CONCURRENT_MODE_SYMBOL_STRING=T;exports.ChildDeletion=J;exports.ClassComponentTag=k;exports.Cloned=q;exports.ContentReset=X;exports.ContextConsumerTag=O;exports.DEPRECATED_ASYNC_MODE_SYMBOL_STRING=R;exports.DehydratedSuspenseComponent=I;exports.DidCapture=Y;exports.ForwardRefTag=P;exports.Fragment=j;exports.FunctionComponentTag=D;exports.HostComponentTag=E;exports.HostHoistableTag=N;exports.HostRoot=B;exports.HostSingletonTag=V;exports.HostText=U;exports.Hydrating=K;exports.LegacyHiddenComponent=A;exports.MemoComponentTag=z;exports.MutationMask=oe;exports.OffscreenComponent=L;exports.OffscreenComponentTag=_;exports.PerformedWork=$;exports.Placement=G;exports.Ref=Z;exports.SimpleMemoComponentTag=M;exports.Snapshot=ee;exports.SuspenseComponentTag=H;exports.Update=Q;exports.Visibility=te;exports.createFiberVisitor=be;exports.didFiberCommit=v;exports.didFiberRender=g;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=Ce;exports.isCompositeFiber=re;exports.isHostFiber=d;exports.isValidElement=ne;exports.mountFiberRecursively=m;exports.shouldFilterFiber=h;exports.traverseContexts=ie;exports.traverseFiber=b;exports.traverseProps=se;exports.traverseState=le;exports.unmountFiber=S;exports.unmountFiberChildrenRecursively=y;exports.updateFiberRecursively=C;return exports;})({});
|
package/dist/index.js
CHANGED
|
@@ -40,7 +40,7 @@ var Ref = 512;
|
|
|
40
40
|
var Snapshot = 1024;
|
|
41
41
|
var Visibility = 8192;
|
|
42
42
|
var MutationMask = Placement | Update | ChildDeletion | ContentReset | Hydrating | Visibility | Snapshot;
|
|
43
|
-
var isValidElement = (element) => typeof element === "object" && element
|
|
43
|
+
var isValidElement = (element) => typeof element === "object" && element != null && "$$typeof" in element && String(element.$$typeof) === "Symbol(react.element)";
|
|
44
44
|
var isHostFiber = (fiber) => fiber.tag === HostComponentTag || // @ts-expect-error: it exists
|
|
45
45
|
fiber.tag === HostHoistableTag || // @ts-expect-error: it exists
|
|
46
46
|
fiber.tag === HostSingletonTag;
|
|
@@ -116,21 +116,16 @@ var didFiberCommit = (fiber) => {
|
|
|
116
116
|
};
|
|
117
117
|
var getMutatedHostFibers = (fiber) => {
|
|
118
118
|
const mutations = [];
|
|
119
|
-
const
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
119
|
+
const stack = [fiber];
|
|
120
|
+
while (stack.length) {
|
|
121
|
+
const node = stack.pop();
|
|
122
|
+
if (!node) continue;
|
|
123
123
|
if (isHostFiber(node) && didFiberCommit(node) && didFiberRender(node)) {
|
|
124
124
|
mutations.push(node);
|
|
125
125
|
}
|
|
126
|
-
if (node.child)
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
if (node.sibling) {
|
|
130
|
-
traverse(node.sibling);
|
|
131
|
-
}
|
|
132
|
-
};
|
|
133
|
-
traverse(fiber);
|
|
126
|
+
if (node.child) stack.push(node.child);
|
|
127
|
+
if (node.sibling) stack.push(node.sibling);
|
|
128
|
+
}
|
|
134
129
|
return mutations;
|
|
135
130
|
};
|
|
136
131
|
var getFiberStack = (fiber) => {
|
|
@@ -238,7 +233,8 @@ var getRDTHook = () => {
|
|
|
238
233
|
const nextID = ++i;
|
|
239
234
|
renderers.set(nextID, renderer);
|
|
240
235
|
return nextID;
|
|
241
|
-
}
|
|
236
|
+
},
|
|
237
|
+
_instrumentationSource: "bippy"
|
|
242
238
|
};
|
|
243
239
|
try {
|
|
244
240
|
globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = rdtHook;
|
|
@@ -398,14 +394,17 @@ var createFiberVisitor = ({
|
|
|
398
394
|
var instrument = ({
|
|
399
395
|
onCommitFiberRoot,
|
|
400
396
|
onCommitFiberUnmount,
|
|
401
|
-
onPostCommitFiberRoot
|
|
397
|
+
onPostCommitFiberRoot,
|
|
398
|
+
name
|
|
402
399
|
}) => {
|
|
403
400
|
const devtoolsHook = getRDTHook();
|
|
401
|
+
devtoolsHook._instrumentationSource = name ?? "bippy";
|
|
404
402
|
const prevOnCommitFiberRoot = devtoolsHook.onCommitFiberRoot;
|
|
405
403
|
if (onCommitFiberRoot) {
|
|
406
|
-
devtoolsHook.onCommitFiberRoot = (rendererID, root) => {
|
|
407
|
-
if (prevOnCommitFiberRoot)
|
|
408
|
-
|
|
404
|
+
devtoolsHook.onCommitFiberRoot = (rendererID, root, priority) => {
|
|
405
|
+
if (prevOnCommitFiberRoot)
|
|
406
|
+
prevOnCommitFiberRoot(rendererID, root, priority);
|
|
407
|
+
onCommitFiberRoot(rendererID, root, priority);
|
|
409
408
|
};
|
|
410
409
|
}
|
|
411
410
|
const prevOnCommitFiberUnmount = devtoolsHook.onCommitFiberUnmount;
|
package/package.json
CHANGED
package/dist/score.cjs
DELETED
|
@@ -1,220 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* @license bippy
|
|
5
|
-
*
|
|
6
|
-
* Copyright (c) Aiden Bai.
|
|
7
|
-
*
|
|
8
|
-
* This source code is licensed under the MIT license found in the
|
|
9
|
-
* LICENSE file in the root directory of this source tree.
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
|
-
// src/index.ts
|
|
13
|
-
var ClassComponentTag = 1;
|
|
14
|
-
var FunctionComponentTag = 0;
|
|
15
|
-
var ContextConsumerTag = 9;
|
|
16
|
-
var ForwardRefTag = 11;
|
|
17
|
-
var MemoComponentTag = 14;
|
|
18
|
-
var SimpleMemoComponentTag = 15;
|
|
19
|
-
var HostComponentTag = 5;
|
|
20
|
-
var HostHoistableTag = 26;
|
|
21
|
-
var HostSingletonTag = 27;
|
|
22
|
-
var PerformedWork = 1;
|
|
23
|
-
var Placement = 2;
|
|
24
|
-
var Hydrating = 4096;
|
|
25
|
-
var Update = 4;
|
|
26
|
-
var Cloned = 8;
|
|
27
|
-
var ChildDeletion = 16;
|
|
28
|
-
var ContentReset = 32;
|
|
29
|
-
var Snapshot = 1024;
|
|
30
|
-
var Visibility = 8192;
|
|
31
|
-
var MutationMask = Placement | Update | ChildDeletion | ContentReset | Hydrating | Visibility | Snapshot;
|
|
32
|
-
var isHostFiber = (fiber) => fiber.tag === HostComponentTag || // @ts-expect-error: it exists
|
|
33
|
-
fiber.tag === HostHoistableTag || // @ts-expect-error: it exists
|
|
34
|
-
fiber.tag === HostSingletonTag;
|
|
35
|
-
var didFiberRender = (fiber) => {
|
|
36
|
-
const nextProps = fiber.memoizedProps;
|
|
37
|
-
const prevProps = fiber.alternate?.memoizedProps || {};
|
|
38
|
-
const flags = fiber.flags ?? fiber.effectTag ?? 0;
|
|
39
|
-
switch (fiber.tag) {
|
|
40
|
-
case ClassComponentTag:
|
|
41
|
-
case FunctionComponentTag:
|
|
42
|
-
case ContextConsumerTag:
|
|
43
|
-
case ForwardRefTag:
|
|
44
|
-
case MemoComponentTag:
|
|
45
|
-
case SimpleMemoComponentTag: {
|
|
46
|
-
return (flags & PerformedWork) === PerformedWork;
|
|
47
|
-
}
|
|
48
|
-
default:
|
|
49
|
-
if (!fiber.alternate) return true;
|
|
50
|
-
return prevProps !== nextProps || fiber.alternate.memoizedState !== fiber.memoizedState || fiber.alternate.ref !== fiber.ref;
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
var didFiberCommit = (fiber) => {
|
|
54
|
-
return Boolean(
|
|
55
|
-
fiber.subtreeFlags & (MutationMask | Cloned) || fiber.deletions != null || fiber.alternate == null
|
|
56
|
-
);
|
|
57
|
-
};
|
|
58
|
-
var getMutatedHostFibers = (fiber) => {
|
|
59
|
-
const mutations = [];
|
|
60
|
-
const visited = /* @__PURE__ */ new WeakSet();
|
|
61
|
-
const traverse = (node) => {
|
|
62
|
-
if (!node || visited.has(node)) return;
|
|
63
|
-
visited.add(node);
|
|
64
|
-
if (isHostFiber(node) && didFiberCommit(node.return ?? node) && didFiberRender(node)) {
|
|
65
|
-
mutations.push(node);
|
|
66
|
-
}
|
|
67
|
-
if (node.child) {
|
|
68
|
-
traverse(node.child);
|
|
69
|
-
}
|
|
70
|
-
if (node.sibling) {
|
|
71
|
-
traverse(node.sibling);
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
traverse(fiber);
|
|
75
|
-
return mutations;
|
|
76
|
-
};
|
|
77
|
-
var getNearestHostFiber = (fiber) => {
|
|
78
|
-
let hostFiber = traverseFiber(fiber, isHostFiber);
|
|
79
|
-
if (!hostFiber) {
|
|
80
|
-
hostFiber = traverseFiber(fiber, isHostFiber, true);
|
|
81
|
-
}
|
|
82
|
-
return hostFiber;
|
|
83
|
-
};
|
|
84
|
-
var traverseFiber = (fiber, selector, ascending = false) => {
|
|
85
|
-
if (!fiber) return null;
|
|
86
|
-
if (selector(fiber) === true) return fiber;
|
|
87
|
-
let child = ascending ? fiber.return : fiber.child;
|
|
88
|
-
while (child) {
|
|
89
|
-
const match = traverseFiber(child, selector, ascending);
|
|
90
|
-
if (match) return match;
|
|
91
|
-
child = ascending ? null : child.sibling;
|
|
92
|
-
}
|
|
93
|
-
return null;
|
|
94
|
-
};
|
|
95
|
-
var NO_OP = () => {
|
|
96
|
-
};
|
|
97
|
-
var getRDTHook = () => {
|
|
98
|
-
let rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
|
99
|
-
const renderers = /* @__PURE__ */ new Map();
|
|
100
|
-
let i = 0;
|
|
101
|
-
rdtHook ??= {
|
|
102
|
-
checkDCE: NO_OP,
|
|
103
|
-
supportsFiber: true,
|
|
104
|
-
supportsFlight: true,
|
|
105
|
-
renderers,
|
|
106
|
-
onCommitFiberRoot: NO_OP,
|
|
107
|
-
onCommitFiberUnmount: NO_OP,
|
|
108
|
-
onPostCommitFiberRoot: NO_OP,
|
|
109
|
-
inject(renderer) {
|
|
110
|
-
const nextID = ++i;
|
|
111
|
-
renderers.set(nextID, renderer);
|
|
112
|
-
return nextID;
|
|
113
|
-
}
|
|
114
|
-
};
|
|
115
|
-
try {
|
|
116
|
-
globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = rdtHook;
|
|
117
|
-
} catch {
|
|
118
|
-
}
|
|
119
|
-
return rdtHook;
|
|
120
|
-
};
|
|
121
|
-
if (typeof window !== "undefined") {
|
|
122
|
-
getRDTHook();
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
// src/score.ts
|
|
126
|
-
var fps = 0;
|
|
127
|
-
var lastTime = performance.now();
|
|
128
|
-
var frameCount = 0;
|
|
129
|
-
var inited = false;
|
|
130
|
-
var getFPS = () => {
|
|
131
|
-
const updateFPS = () => {
|
|
132
|
-
frameCount++;
|
|
133
|
-
const now = performance.now();
|
|
134
|
-
if (now - lastTime >= 1e3) {
|
|
135
|
-
fps = frameCount;
|
|
136
|
-
frameCount = 0;
|
|
137
|
-
lastTime = now;
|
|
138
|
-
}
|
|
139
|
-
requestAnimationFrame(updateFPS);
|
|
140
|
-
};
|
|
141
|
-
if (!inited) {
|
|
142
|
-
inited = true;
|
|
143
|
-
updateFPS();
|
|
144
|
-
}
|
|
145
|
-
return fps;
|
|
146
|
-
};
|
|
147
|
-
var truncateFloat = (value, maxLen = 1e4) => {
|
|
148
|
-
if (typeof value === "number" && parseInt(value) !== value) {
|
|
149
|
-
value = ~~(value * maxLen) / maxLen;
|
|
150
|
-
}
|
|
151
|
-
return value;
|
|
152
|
-
};
|
|
153
|
-
var THRESHOLD_FPS = 60;
|
|
154
|
-
var getFiberRenderScore = (fiber) => {
|
|
155
|
-
const hostFiber = getNearestHostFiber(fiber);
|
|
156
|
-
const hasMutation = didFiberCommit(fiber);
|
|
157
|
-
const mutatedHostFibers = getMutatedHostFibers(fiber);
|
|
158
|
-
const isVisible = hostFiber && isElementVisible(hostFiber.stateNode) && isElementInViewport(hostFiber.stateNode);
|
|
159
|
-
const fps2 = getFPS();
|
|
160
|
-
let unnecessaryScore = (
|
|
161
|
-
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
|
|
162
|
-
isVisible || mutatedHostFibers.length || hasMutation ? 0 : 1
|
|
163
|
-
);
|
|
164
|
-
for (const mutatedHostFiber of mutatedHostFibers) {
|
|
165
|
-
const node = mutatedHostFiber.stateNode;
|
|
166
|
-
if (!isElementVisible(node) || !isElementInViewport(node)) {
|
|
167
|
-
unnecessaryScore += 1 / mutatedHostFibers.length;
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
return {
|
|
171
|
-
unnecessary: truncateFloat(unnecessaryScore),
|
|
172
|
-
slow: fps2 < THRESHOLD_FPS ? truncateFloat((THRESHOLD_FPS - fps2) / THRESHOLD_FPS) : 0
|
|
173
|
-
};
|
|
174
|
-
};
|
|
175
|
-
var isElementVisible = (el) => {
|
|
176
|
-
const style = window.getComputedStyle(el);
|
|
177
|
-
return style.display !== "none" && style.visibility !== "hidden" && style.contentVisibility !== "hidden" && style.opacity !== "0";
|
|
178
|
-
};
|
|
179
|
-
var initedEventListeners = false;
|
|
180
|
-
var scrollX = null;
|
|
181
|
-
var scrollY = null;
|
|
182
|
-
var innerWidth = null;
|
|
183
|
-
var innerHeight = null;
|
|
184
|
-
var getWindowDimensions = () => {
|
|
185
|
-
if (scrollX === null) scrollX = window.scrollX;
|
|
186
|
-
if (scrollY === null) scrollY = window.scrollY;
|
|
187
|
-
if (innerWidth === null) innerWidth = window.innerWidth;
|
|
188
|
-
if (innerHeight === null) innerHeight = window.innerHeight;
|
|
189
|
-
if (!initedEventListeners) {
|
|
190
|
-
initedEventListeners = true;
|
|
191
|
-
const handleResize = () => {
|
|
192
|
-
scrollX = null;
|
|
193
|
-
scrollY = null;
|
|
194
|
-
innerWidth = null;
|
|
195
|
-
innerHeight = null;
|
|
196
|
-
};
|
|
197
|
-
window.addEventListener("resize", handleResize);
|
|
198
|
-
window.addEventListener("scroll", handleResize);
|
|
199
|
-
}
|
|
200
|
-
return {
|
|
201
|
-
top: scrollY,
|
|
202
|
-
left: scrollX,
|
|
203
|
-
right: scrollX + innerWidth,
|
|
204
|
-
bottom: scrollY + innerHeight
|
|
205
|
-
};
|
|
206
|
-
};
|
|
207
|
-
var isElementInViewport = (el) => {
|
|
208
|
-
const elTop = el.offsetTop;
|
|
209
|
-
const elLeft = el.offsetLeft;
|
|
210
|
-
const elWidth = el.offsetWidth;
|
|
211
|
-
const elHeight = el.offsetHeight;
|
|
212
|
-
const { top, left, right, bottom } = getWindowDimensions();
|
|
213
|
-
return elTop + elHeight > top && elLeft + elWidth > left && elTop < bottom && elLeft < right;
|
|
214
|
-
};
|
|
215
|
-
|
|
216
|
-
exports.getFPS = getFPS;
|
|
217
|
-
exports.getFiberRenderScore = getFiberRenderScore;
|
|
218
|
-
exports.getWindowDimensions = getWindowDimensions;
|
|
219
|
-
exports.isElementInViewport = isElementInViewport;
|
|
220
|
-
exports.isElementVisible = isElementVisible;
|
package/dist/score.d.cts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
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.d.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
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
DELETED
|
@@ -1,214 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license bippy
|
|
3
|
-
*
|
|
4
|
-
* Copyright (c) Aiden Bai.
|
|
5
|
-
*
|
|
6
|
-
* This source code is licensed under the MIT license found in the
|
|
7
|
-
* LICENSE file in the root directory of this source tree.
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
// src/index.ts
|
|
11
|
-
var ClassComponentTag = 1;
|
|
12
|
-
var FunctionComponentTag = 0;
|
|
13
|
-
var ContextConsumerTag = 9;
|
|
14
|
-
var ForwardRefTag = 11;
|
|
15
|
-
var MemoComponentTag = 14;
|
|
16
|
-
var SimpleMemoComponentTag = 15;
|
|
17
|
-
var HostComponentTag = 5;
|
|
18
|
-
var HostHoistableTag = 26;
|
|
19
|
-
var HostSingletonTag = 27;
|
|
20
|
-
var PerformedWork = 1;
|
|
21
|
-
var Placement = 2;
|
|
22
|
-
var Hydrating = 4096;
|
|
23
|
-
var Update = 4;
|
|
24
|
-
var Cloned = 8;
|
|
25
|
-
var ChildDeletion = 16;
|
|
26
|
-
var ContentReset = 32;
|
|
27
|
-
var Snapshot = 1024;
|
|
28
|
-
var Visibility = 8192;
|
|
29
|
-
var MutationMask = Placement | Update | ChildDeletion | ContentReset | Hydrating | Visibility | Snapshot;
|
|
30
|
-
var isHostFiber = (fiber) => fiber.tag === HostComponentTag || // @ts-expect-error: it exists
|
|
31
|
-
fiber.tag === HostHoistableTag || // @ts-expect-error: it exists
|
|
32
|
-
fiber.tag === HostSingletonTag;
|
|
33
|
-
var didFiberRender = (fiber) => {
|
|
34
|
-
const nextProps = fiber.memoizedProps;
|
|
35
|
-
const prevProps = fiber.alternate?.memoizedProps || {};
|
|
36
|
-
const flags = fiber.flags ?? fiber.effectTag ?? 0;
|
|
37
|
-
switch (fiber.tag) {
|
|
38
|
-
case ClassComponentTag:
|
|
39
|
-
case FunctionComponentTag:
|
|
40
|
-
case ContextConsumerTag:
|
|
41
|
-
case ForwardRefTag:
|
|
42
|
-
case MemoComponentTag:
|
|
43
|
-
case SimpleMemoComponentTag: {
|
|
44
|
-
return (flags & PerformedWork) === PerformedWork;
|
|
45
|
-
}
|
|
46
|
-
default:
|
|
47
|
-
if (!fiber.alternate) return true;
|
|
48
|
-
return prevProps !== nextProps || fiber.alternate.memoizedState !== fiber.memoizedState || fiber.alternate.ref !== fiber.ref;
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
var didFiberCommit = (fiber) => {
|
|
52
|
-
return Boolean(
|
|
53
|
-
fiber.subtreeFlags & (MutationMask | Cloned) || fiber.deletions != null || fiber.alternate == null
|
|
54
|
-
);
|
|
55
|
-
};
|
|
56
|
-
var getMutatedHostFibers = (fiber) => {
|
|
57
|
-
const mutations = [];
|
|
58
|
-
const visited = /* @__PURE__ */ new WeakSet();
|
|
59
|
-
const traverse = (node) => {
|
|
60
|
-
if (!node || visited.has(node)) return;
|
|
61
|
-
visited.add(node);
|
|
62
|
-
if (isHostFiber(node) && didFiberCommit(node.return ?? node) && didFiberRender(node)) {
|
|
63
|
-
mutations.push(node);
|
|
64
|
-
}
|
|
65
|
-
if (node.child) {
|
|
66
|
-
traverse(node.child);
|
|
67
|
-
}
|
|
68
|
-
if (node.sibling) {
|
|
69
|
-
traverse(node.sibling);
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
traverse(fiber);
|
|
73
|
-
return mutations;
|
|
74
|
-
};
|
|
75
|
-
var getNearestHostFiber = (fiber) => {
|
|
76
|
-
let hostFiber = traverseFiber(fiber, isHostFiber);
|
|
77
|
-
if (!hostFiber) {
|
|
78
|
-
hostFiber = traverseFiber(fiber, isHostFiber, true);
|
|
79
|
-
}
|
|
80
|
-
return hostFiber;
|
|
81
|
-
};
|
|
82
|
-
var traverseFiber = (fiber, selector, ascending = false) => {
|
|
83
|
-
if (!fiber) return null;
|
|
84
|
-
if (selector(fiber) === true) return fiber;
|
|
85
|
-
let child = ascending ? fiber.return : fiber.child;
|
|
86
|
-
while (child) {
|
|
87
|
-
const match = traverseFiber(child, selector, ascending);
|
|
88
|
-
if (match) return match;
|
|
89
|
-
child = ascending ? null : child.sibling;
|
|
90
|
-
}
|
|
91
|
-
return null;
|
|
92
|
-
};
|
|
93
|
-
var NO_OP = () => {
|
|
94
|
-
};
|
|
95
|
-
var getRDTHook = () => {
|
|
96
|
-
let rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
|
97
|
-
const renderers = /* @__PURE__ */ new Map();
|
|
98
|
-
let i = 0;
|
|
99
|
-
rdtHook ??= {
|
|
100
|
-
checkDCE: NO_OP,
|
|
101
|
-
supportsFiber: true,
|
|
102
|
-
supportsFlight: true,
|
|
103
|
-
renderers,
|
|
104
|
-
onCommitFiberRoot: NO_OP,
|
|
105
|
-
onCommitFiberUnmount: NO_OP,
|
|
106
|
-
onPostCommitFiberRoot: NO_OP,
|
|
107
|
-
inject(renderer) {
|
|
108
|
-
const nextID = ++i;
|
|
109
|
-
renderers.set(nextID, renderer);
|
|
110
|
-
return nextID;
|
|
111
|
-
}
|
|
112
|
-
};
|
|
113
|
-
try {
|
|
114
|
-
globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = rdtHook;
|
|
115
|
-
} catch {
|
|
116
|
-
}
|
|
117
|
-
return rdtHook;
|
|
118
|
-
};
|
|
119
|
-
if (typeof window !== "undefined") {
|
|
120
|
-
getRDTHook();
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
// src/score.ts
|
|
124
|
-
var fps = 0;
|
|
125
|
-
var lastTime = performance.now();
|
|
126
|
-
var frameCount = 0;
|
|
127
|
-
var inited = false;
|
|
128
|
-
var getFPS = () => {
|
|
129
|
-
const updateFPS = () => {
|
|
130
|
-
frameCount++;
|
|
131
|
-
const now = performance.now();
|
|
132
|
-
if (now - lastTime >= 1e3) {
|
|
133
|
-
fps = frameCount;
|
|
134
|
-
frameCount = 0;
|
|
135
|
-
lastTime = now;
|
|
136
|
-
}
|
|
137
|
-
requestAnimationFrame(updateFPS);
|
|
138
|
-
};
|
|
139
|
-
if (!inited) {
|
|
140
|
-
inited = true;
|
|
141
|
-
updateFPS();
|
|
142
|
-
}
|
|
143
|
-
return fps;
|
|
144
|
-
};
|
|
145
|
-
var truncateFloat = (value, maxLen = 1e4) => {
|
|
146
|
-
if (typeof value === "number" && parseInt(value) !== value) {
|
|
147
|
-
value = ~~(value * maxLen) / maxLen;
|
|
148
|
-
}
|
|
149
|
-
return value;
|
|
150
|
-
};
|
|
151
|
-
var THRESHOLD_FPS = 60;
|
|
152
|
-
var getFiberRenderScore = (fiber) => {
|
|
153
|
-
const hostFiber = getNearestHostFiber(fiber);
|
|
154
|
-
const hasMutation = didFiberCommit(fiber);
|
|
155
|
-
const mutatedHostFibers = getMutatedHostFibers(fiber);
|
|
156
|
-
const isVisible = hostFiber && isElementVisible(hostFiber.stateNode) && isElementInViewport(hostFiber.stateNode);
|
|
157
|
-
const fps2 = getFPS();
|
|
158
|
-
let unnecessaryScore = (
|
|
159
|
-
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
|
|
160
|
-
isVisible || mutatedHostFibers.length || hasMutation ? 0 : 1
|
|
161
|
-
);
|
|
162
|
-
for (const mutatedHostFiber of mutatedHostFibers) {
|
|
163
|
-
const node = mutatedHostFiber.stateNode;
|
|
164
|
-
if (!isElementVisible(node) || !isElementInViewport(node)) {
|
|
165
|
-
unnecessaryScore += 1 / mutatedHostFibers.length;
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
return {
|
|
169
|
-
unnecessary: truncateFloat(unnecessaryScore),
|
|
170
|
-
slow: fps2 < THRESHOLD_FPS ? truncateFloat((THRESHOLD_FPS - fps2) / THRESHOLD_FPS) : 0
|
|
171
|
-
};
|
|
172
|
-
};
|
|
173
|
-
var isElementVisible = (el) => {
|
|
174
|
-
const style = window.getComputedStyle(el);
|
|
175
|
-
return style.display !== "none" && style.visibility !== "hidden" && style.contentVisibility !== "hidden" && style.opacity !== "0";
|
|
176
|
-
};
|
|
177
|
-
var initedEventListeners = false;
|
|
178
|
-
var scrollX = null;
|
|
179
|
-
var scrollY = null;
|
|
180
|
-
var innerWidth = null;
|
|
181
|
-
var innerHeight = null;
|
|
182
|
-
var getWindowDimensions = () => {
|
|
183
|
-
if (scrollX === null) scrollX = window.scrollX;
|
|
184
|
-
if (scrollY === null) scrollY = window.scrollY;
|
|
185
|
-
if (innerWidth === null) innerWidth = window.innerWidth;
|
|
186
|
-
if (innerHeight === null) innerHeight = window.innerHeight;
|
|
187
|
-
if (!initedEventListeners) {
|
|
188
|
-
initedEventListeners = true;
|
|
189
|
-
const handleResize = () => {
|
|
190
|
-
scrollX = null;
|
|
191
|
-
scrollY = null;
|
|
192
|
-
innerWidth = null;
|
|
193
|
-
innerHeight = null;
|
|
194
|
-
};
|
|
195
|
-
window.addEventListener("resize", handleResize);
|
|
196
|
-
window.addEventListener("scroll", handleResize);
|
|
197
|
-
}
|
|
198
|
-
return {
|
|
199
|
-
top: scrollY,
|
|
200
|
-
left: scrollX,
|
|
201
|
-
right: scrollX + innerWidth,
|
|
202
|
-
bottom: scrollY + innerHeight
|
|
203
|
-
};
|
|
204
|
-
};
|
|
205
|
-
var isElementInViewport = (el) => {
|
|
206
|
-
const elTop = el.offsetTop;
|
|
207
|
-
const elLeft = el.offsetLeft;
|
|
208
|
-
const elWidth = el.offsetWidth;
|
|
209
|
-
const elHeight = el.offsetHeight;
|
|
210
|
-
const { top, left, right, bottom } = getWindowDimensions();
|
|
211
|
-
return elTop + elHeight > top && elLeft + elWidth > left && elTop < bottom && elLeft < right;
|
|
212
|
-
};
|
|
213
|
-
|
|
214
|
-
export { getFPS, getFiberRenderScore, getWindowDimensions, isElementInViewport, isElementVisible };
|