bippy 0.2.0 → 0.2.2
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 +8 -0
- package/dist/chunk-6TJRMCM3.js +1 -0
- package/dist/{extract/index.cjs → chunk-XBNRYX4A.js} +142 -474
- package/dist/{extract/index.js → chunk-XCDPKSJZ.cjs} +205 -468
- package/dist/chunk-YZYCWAB2.cjs +2 -0
- package/dist/core-DBUthQlD.d.cts +261 -0
- package/dist/core-DBUthQlD.d.ts +261 -0
- package/dist/core.cjs +229 -740
- package/dist/core.d.cts +3 -196
- package/dist/core.d.ts +3 -196
- package/dist/core.js +1 -687
- package/dist/index.cjs +250 -745
- package/dist/index.d.cts +2 -3
- package/dist/index.d.ts +2 -3
- package/dist/index.global.js +1 -1
- package/dist/index.js +2 -687
- package/dist/inspect.cjs +1560 -0
- package/dist/inspect.d.cts +10 -0
- package/dist/inspect.d.ts +10 -0
- package/dist/inspect.js +1551 -0
- package/package.json +19 -2
- package/dist/extract/index.d.cts +0 -42
- package/dist/extract/index.d.ts +0 -42
- package/dist/extract/index.global.js +0 -9
- package/dist/scan/index.cjs +0 -1079
- package/dist/scan/index.d.cts +0 -24
- package/dist/scan/index.d.ts +0 -24
- package/dist/scan/index.global.js +0 -9
- package/dist/scan/index.js +0 -1071
- package/dist/types-BqcvCznx.d.cts +0 -69
- package/dist/types-BqcvCznx.d.ts +0 -69
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
1
3
|
/**
|
|
2
4
|
* @license bippy
|
|
3
5
|
*
|
|
@@ -8,7 +10,7 @@
|
|
|
8
10
|
*/
|
|
9
11
|
|
|
10
12
|
// src/rdt-hook.ts
|
|
11
|
-
var version = "0.2.
|
|
13
|
+
var version = "0.2.2";
|
|
12
14
|
var BIPPY_INSTRUMENTATION_STRING = `bippy-${version}`;
|
|
13
15
|
var NO_OP = () => {
|
|
14
16
|
};
|
|
@@ -97,9 +99,26 @@ var LegacyHiddenComponentTag = 23;
|
|
|
97
99
|
var HostHoistableTag = 26;
|
|
98
100
|
var HostSingletonTag = 27;
|
|
99
101
|
var CONCURRENT_MODE_NUMBER = 60111;
|
|
102
|
+
var ELEMENT_TYPE_SYMBOL_STRING = "Symbol(react.element)";
|
|
103
|
+
var TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING = "Symbol(react.transitional.element)";
|
|
100
104
|
var CONCURRENT_MODE_SYMBOL_STRING = "Symbol(react.concurrent_mode)";
|
|
101
105
|
var DEPRECATED_ASYNC_MODE_SYMBOL_STRING = "Symbol(react.async_mode)";
|
|
102
106
|
var PerformedWork = 1;
|
|
107
|
+
var Placement = 2;
|
|
108
|
+
var Hydrating = 4096;
|
|
109
|
+
var Update = 4;
|
|
110
|
+
var Cloned = 8;
|
|
111
|
+
var ChildDeletion = 16;
|
|
112
|
+
var ContentReset = 32;
|
|
113
|
+
var Snapshot = 1024;
|
|
114
|
+
var Visibility = 8192;
|
|
115
|
+
var MutationMask = Placement | Update | ChildDeletion | ContentReset | Hydrating | Visibility | Snapshot;
|
|
116
|
+
var isValidElement = (element) => typeof element === "object" && element != null && "$$typeof" in element && // react 18 uses Symbol.for('react.element'), react 19 uses Symbol.for('react.transitional.element')
|
|
117
|
+
[
|
|
118
|
+
ELEMENT_TYPE_SYMBOL_STRING,
|
|
119
|
+
TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING
|
|
120
|
+
].includes(String(element.$$typeof));
|
|
121
|
+
var isValidFiber = (fiber) => typeof fiber === "object" && fiber != null && "tag" in fiber && "stateNode" in fiber && "return" in fiber && "child" in fiber && "sibling" in fiber && "flags" in fiber;
|
|
103
122
|
var isHostFiber = (fiber) => {
|
|
104
123
|
switch (fiber.tag) {
|
|
105
124
|
case HostComponentTag:
|
|
@@ -124,6 +143,60 @@ var isCompositeFiber = (fiber) => {
|
|
|
124
143
|
return false;
|
|
125
144
|
}
|
|
126
145
|
};
|
|
146
|
+
var traverseContexts = (fiber, selector) => {
|
|
147
|
+
try {
|
|
148
|
+
const nextDependencies = fiber.dependencies;
|
|
149
|
+
const prevDependencies = fiber.alternate?.dependencies;
|
|
150
|
+
if (!nextDependencies || !prevDependencies) return false;
|
|
151
|
+
if (typeof nextDependencies !== "object" || !("firstContext" in nextDependencies) || typeof prevDependencies !== "object" || !("firstContext" in prevDependencies)) {
|
|
152
|
+
return false;
|
|
153
|
+
}
|
|
154
|
+
let nextContext = nextDependencies.firstContext;
|
|
155
|
+
let prevContext = prevDependencies.firstContext;
|
|
156
|
+
while (nextContext && typeof nextContext === "object" && "memoizedValue" in nextContext || prevContext && typeof prevContext === "object" && "memoizedValue" in prevContext) {
|
|
157
|
+
if (selector(nextContext, prevContext) === true) return true;
|
|
158
|
+
nextContext = nextContext?.next;
|
|
159
|
+
prevContext = prevContext?.next;
|
|
160
|
+
}
|
|
161
|
+
} catch {
|
|
162
|
+
}
|
|
163
|
+
return false;
|
|
164
|
+
};
|
|
165
|
+
var traverseState = (fiber, selector) => {
|
|
166
|
+
try {
|
|
167
|
+
let nextState = fiber.memoizedState;
|
|
168
|
+
let prevState = fiber.alternate?.memoizedState;
|
|
169
|
+
while (nextState || prevState) {
|
|
170
|
+
if (selector(nextState, prevState) === true) return true;
|
|
171
|
+
nextState = nextState?.next;
|
|
172
|
+
prevState = prevState?.next;
|
|
173
|
+
}
|
|
174
|
+
} catch {
|
|
175
|
+
}
|
|
176
|
+
return false;
|
|
177
|
+
};
|
|
178
|
+
var traverseEffects = (fiber, selector) => {
|
|
179
|
+
try {
|
|
180
|
+
let nextState = (
|
|
181
|
+
// biome-ignore lint/suspicious/noExplicitAny: underlying type is unknown
|
|
182
|
+
fiber.updateQueue?.lastEffect
|
|
183
|
+
);
|
|
184
|
+
let prevState = (
|
|
185
|
+
// biome-ignore lint/suspicious/noExplicitAny: underlying type is unknown
|
|
186
|
+
fiber.alternate?.updateQueue?.lastEffect
|
|
187
|
+
);
|
|
188
|
+
while (nextState || prevState) {
|
|
189
|
+
if (selector(nextState, prevState) === true) return true;
|
|
190
|
+
if (nextState?.next === nextState || prevState?.next === prevState) {
|
|
191
|
+
break;
|
|
192
|
+
}
|
|
193
|
+
nextState = nextState?.next;
|
|
194
|
+
prevState = prevState?.next;
|
|
195
|
+
}
|
|
196
|
+
} catch {
|
|
197
|
+
}
|
|
198
|
+
return false;
|
|
199
|
+
};
|
|
127
200
|
var traverseProps = (fiber, selector) => {
|
|
128
201
|
try {
|
|
129
202
|
const nextProps = fiber.memoizedProps;
|
|
@@ -159,6 +232,25 @@ var didFiberRender = (fiber) => {
|
|
|
159
232
|
return prevProps !== nextProps || fiber.alternate.memoizedState !== fiber.memoizedState || fiber.alternate.ref !== fiber.ref;
|
|
160
233
|
}
|
|
161
234
|
};
|
|
235
|
+
var didFiberCommit = (fiber) => {
|
|
236
|
+
return Boolean(
|
|
237
|
+
(fiber.flags & (MutationMask | Cloned)) !== 0 || (fiber.subtreeFlags & (MutationMask | Cloned)) !== 0
|
|
238
|
+
);
|
|
239
|
+
};
|
|
240
|
+
var getMutatedHostFibers = (fiber) => {
|
|
241
|
+
const mutations = [];
|
|
242
|
+
const stack = [fiber];
|
|
243
|
+
while (stack.length) {
|
|
244
|
+
const node = stack.pop();
|
|
245
|
+
if (!node) continue;
|
|
246
|
+
if (isHostFiber(node) && didFiberCommit(node) && didFiberRender(node)) {
|
|
247
|
+
mutations.push(node);
|
|
248
|
+
}
|
|
249
|
+
if (node.child) stack.push(node.child);
|
|
250
|
+
if (node.sibling) stack.push(node.sibling);
|
|
251
|
+
}
|
|
252
|
+
return mutations;
|
|
253
|
+
};
|
|
162
254
|
var getFiberStack = (fiber) => {
|
|
163
255
|
const stack = [];
|
|
164
256
|
let currentFiber = fiber;
|
|
@@ -204,6 +296,28 @@ var getNearestHostFiber = (fiber, ascending = false) => {
|
|
|
204
296
|
}
|
|
205
297
|
return hostFiber;
|
|
206
298
|
};
|
|
299
|
+
var getNearestHostFibers = (fiber) => {
|
|
300
|
+
const hostFibers = [];
|
|
301
|
+
const stack = [];
|
|
302
|
+
if (isHostFiber(fiber)) {
|
|
303
|
+
hostFibers.push(fiber);
|
|
304
|
+
} else if (fiber.child) {
|
|
305
|
+
stack.push(fiber.child);
|
|
306
|
+
}
|
|
307
|
+
while (stack.length) {
|
|
308
|
+
const currentNode = stack.pop();
|
|
309
|
+
if (!currentNode) break;
|
|
310
|
+
if (isHostFiber(currentNode)) {
|
|
311
|
+
hostFibers.push(currentNode);
|
|
312
|
+
} else if (currentNode.child) {
|
|
313
|
+
stack.push(currentNode.child);
|
|
314
|
+
}
|
|
315
|
+
if (currentNode.sibling) {
|
|
316
|
+
stack.push(currentNode.sibling);
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
return hostFibers;
|
|
320
|
+
};
|
|
207
321
|
var traverseFiber = (fiber, selector, ascending = false) => {
|
|
208
322
|
if (!fiber) return null;
|
|
209
323
|
if (selector(fiber) === true) return fiber;
|
|
@@ -215,6 +329,21 @@ var traverseFiber = (fiber, selector, ascending = false) => {
|
|
|
215
329
|
}
|
|
216
330
|
return null;
|
|
217
331
|
};
|
|
332
|
+
var getTimings = (fiber) => {
|
|
333
|
+
const totalTime = fiber?.actualDuration ?? 0;
|
|
334
|
+
let selfTime = totalTime;
|
|
335
|
+
let child = fiber?.child ?? null;
|
|
336
|
+
while (totalTime > 0 && child != null) {
|
|
337
|
+
selfTime -= child.actualDuration ?? 0;
|
|
338
|
+
child = child.sibling;
|
|
339
|
+
}
|
|
340
|
+
return { selfTime, totalTime };
|
|
341
|
+
};
|
|
342
|
+
var hasMemoCache = (fiber) => {
|
|
343
|
+
return Boolean(
|
|
344
|
+
fiber.updateQueue?.memoCache
|
|
345
|
+
);
|
|
346
|
+
};
|
|
218
347
|
var getType = (type) => {
|
|
219
348
|
const currentType = type;
|
|
220
349
|
if (typeof currentType === "function") {
|
|
@@ -239,7 +368,7 @@ var getDisplayName = (type) => {
|
|
|
239
368
|
return unwrappedType.displayName || unwrappedType.name || null;
|
|
240
369
|
};
|
|
241
370
|
var isUsingRDT = () => {
|
|
242
|
-
return "
|
|
371
|
+
return "getFiberRoots" in getRDTHook();
|
|
243
372
|
};
|
|
244
373
|
var detectReactBuildType = (renderer) => {
|
|
245
374
|
try {
|
|
@@ -250,6 +379,10 @@ var detectReactBuildType = (renderer) => {
|
|
|
250
379
|
}
|
|
251
380
|
return "production";
|
|
252
381
|
};
|
|
382
|
+
var isInstrumentationActive = () => {
|
|
383
|
+
const rdtHook = getRDTHook();
|
|
384
|
+
return Boolean(rdtHook._instrumentationIsActive) || isUsingRDT();
|
|
385
|
+
};
|
|
253
386
|
var fiberId = 0;
|
|
254
387
|
var fiberIdMap = /* @__PURE__ */ new WeakMap();
|
|
255
388
|
var setFiberId = (fiber, id = fiberId++) => {
|
|
@@ -499,11 +632,11 @@ var secure = (options, secureOptions = {}) => {
|
|
|
499
632
|
return;
|
|
500
633
|
}
|
|
501
634
|
try {
|
|
502
|
-
const
|
|
503
|
-
if (
|
|
635
|
+
const onCommitFiberRoot2 = options.onCommitFiberRoot;
|
|
636
|
+
if (onCommitFiberRoot2) {
|
|
504
637
|
options.onCommitFiberRoot = (rendererID, root, priority) => {
|
|
505
638
|
try {
|
|
506
|
-
|
|
639
|
+
onCommitFiberRoot2(rendererID, root, priority);
|
|
507
640
|
} catch (err) {
|
|
508
641
|
secureOptions.onError?.(err);
|
|
509
642
|
}
|
|
@@ -543,471 +676,75 @@ var secure = (options, secureOptions = {}) => {
|
|
|
543
676
|
}
|
|
544
677
|
return options;
|
|
545
678
|
};
|
|
546
|
-
|
|
547
|
-
// src/extract/index.ts
|
|
548
|
-
var ReactSpecNodeType = /* @__PURE__ */ ((ReactSpecNodeType2) => {
|
|
549
|
-
ReactSpecNodeType2["Component"] = "component";
|
|
550
|
-
ReactSpecNodeType2["Element"] = "element";
|
|
551
|
-
ReactSpecNodeType2["A11y"] = "a11y";
|
|
552
|
-
return ReactSpecNodeType2;
|
|
553
|
-
})(ReactSpecNodeType || {});
|
|
554
|
-
var fiberRoots = /* @__PURE__ */ new Set();
|
|
555
|
-
var getDpr = () => {
|
|
556
|
-
return Math.min(window.devicePixelRatio || 1, 2);
|
|
557
|
-
};
|
|
558
|
-
var CANVAS_HTML_STR = `<canvas style="position:fixed;top:0;left:0;pointer-events:none;z-index:2147483646" aria-hidden="true"></canvas>`;
|
|
559
|
-
var primaryColor = "115,97,230";
|
|
560
|
-
var lerp = (start, end) => {
|
|
561
|
-
return Math.floor(start + (end - start) * 0.2);
|
|
562
|
-
};
|
|
563
|
-
var init = () => {
|
|
564
|
-
let hasInitedIds = false;
|
|
565
|
-
let prevX;
|
|
566
|
-
let prevY;
|
|
567
|
-
let isAnimating = false;
|
|
568
|
-
const handleFiber = (fiber) => {
|
|
569
|
-
getFiberId(fiber);
|
|
570
|
-
};
|
|
571
|
-
const visit = createFiberVisitor({
|
|
572
|
-
onRender: handleFiber,
|
|
573
|
-
onError(error) {
|
|
574
|
-
console.error(error);
|
|
575
|
-
}
|
|
576
|
-
});
|
|
679
|
+
var onCommitFiberRoot = (handler) => {
|
|
577
680
|
instrument(
|
|
578
|
-
secure(
|
|
579
|
-
{
|
|
580
|
-
|
|
581
|
-
globalThis.__RST__ = true;
|
|
582
|
-
},
|
|
583
|
-
onCommitFiberRoot(rendererID, root) {
|
|
584
|
-
fiberRoots.add(root);
|
|
585
|
-
if (!hasInitedIds) {
|
|
586
|
-
traverseFiber(root, handleFiber);
|
|
587
|
-
hasInitedIds = true;
|
|
588
|
-
return;
|
|
589
|
-
}
|
|
590
|
-
visit(rendererID, root);
|
|
591
|
-
}
|
|
592
|
-
},
|
|
593
|
-
{
|
|
594
|
-
dangerouslyRunInProduction: true,
|
|
595
|
-
onError: (error) => {
|
|
596
|
-
if (error) {
|
|
597
|
-
console.error(error);
|
|
598
|
-
}
|
|
599
|
-
}
|
|
600
|
-
}
|
|
601
|
-
)
|
|
602
|
-
);
|
|
603
|
-
let focusedElement = null;
|
|
604
|
-
let focusedFiber = null;
|
|
605
|
-
let text = null;
|
|
606
|
-
const draw = async () => {
|
|
607
|
-
if (!ctx) return;
|
|
608
|
-
const currentElement = focusedElement;
|
|
609
|
-
if (!currentElement) {
|
|
610
|
-
clear();
|
|
611
|
-
return false;
|
|
612
|
-
}
|
|
613
|
-
const elements = [currentElement];
|
|
614
|
-
if (focusedFiber) {
|
|
615
|
-
traverseFiber(focusedFiber, (fiber) => {
|
|
616
|
-
if (isHostFiber(fiber)) {
|
|
617
|
-
elements.push(fiber.stateNode);
|
|
618
|
-
}
|
|
619
|
-
});
|
|
620
|
-
}
|
|
621
|
-
const rectMap = await getRectMap(elements);
|
|
622
|
-
const currentRect = rectMap.get(currentElement);
|
|
623
|
-
if (!currentRect) return false;
|
|
624
|
-
clear();
|
|
625
|
-
let shouldContinueAnimating = false;
|
|
626
|
-
const interpolatedX = prevX !== void 0 ? lerp(prevX, currentRect.x) : currentRect.x;
|
|
627
|
-
const interpolatedY = prevY !== void 0 ? lerp(prevY, currentRect.y) : currentRect.y;
|
|
628
|
-
if (prevX !== void 0 && (Math.abs(interpolatedX - currentRect.x) > 0.1 || Math.abs(interpolatedY - currentRect.y) > 0.1)) {
|
|
629
|
-
shouldContinueAnimating = true;
|
|
630
|
-
}
|
|
631
|
-
for (const element of elements) {
|
|
632
|
-
const rect = rectMap.get(element);
|
|
633
|
-
if (!rect) continue;
|
|
634
|
-
const { width: width2, height: height2 } = rect;
|
|
635
|
-
const x = element === currentElement ? interpolatedX : rect.x;
|
|
636
|
-
const y = element === currentElement ? interpolatedY : rect.y;
|
|
637
|
-
ctx.beginPath();
|
|
638
|
-
ctx.rect(x, y, width2, height2);
|
|
639
|
-
ctx.strokeStyle = `rgba(${primaryColor},0.5)`;
|
|
640
|
-
if (currentElement === element) {
|
|
641
|
-
ctx.fillStyle = `rgba(${primaryColor},0.1)`;
|
|
642
|
-
ctx.strokeStyle = `rgba(${primaryColor})`;
|
|
643
|
-
ctx.fill();
|
|
644
|
-
}
|
|
645
|
-
ctx.stroke();
|
|
646
|
-
}
|
|
647
|
-
if (text) {
|
|
648
|
-
const { width: textWidth } = ctx.measureText(text);
|
|
649
|
-
const textHeight = 11;
|
|
650
|
-
ctx.textRendering = "optimizeSpeed";
|
|
651
|
-
ctx.font = "11px monospace";
|
|
652
|
-
let labelY = interpolatedY - textHeight - 4;
|
|
653
|
-
if (labelY < 0) {
|
|
654
|
-
labelY = 0;
|
|
655
|
-
}
|
|
656
|
-
ctx.fillStyle = `rgba(${primaryColor})`;
|
|
657
|
-
ctx.fillRect(interpolatedX, labelY, textWidth + 4, textHeight + 4);
|
|
658
|
-
ctx.fillStyle = "rgba(255,255,255)";
|
|
659
|
-
ctx.fillText(text, interpolatedX + 2, labelY + textHeight);
|
|
660
|
-
prevX = interpolatedX;
|
|
661
|
-
prevY = interpolatedY;
|
|
662
|
-
}
|
|
663
|
-
return shouldContinueAnimating;
|
|
664
|
-
};
|
|
665
|
-
const animate = async () => {
|
|
666
|
-
if (!isAnimating) return;
|
|
667
|
-
const shouldContinue = await draw();
|
|
668
|
-
if (shouldContinue) {
|
|
669
|
-
requestAnimationFrame(animate);
|
|
670
|
-
} else {
|
|
671
|
-
isAnimating = false;
|
|
672
|
-
}
|
|
673
|
-
};
|
|
674
|
-
const startAnimation = () => {
|
|
675
|
-
if (!isAnimating) {
|
|
676
|
-
isAnimating = true;
|
|
677
|
-
requestAnimationFrame(animate);
|
|
678
|
-
}
|
|
679
|
-
};
|
|
680
|
-
document.addEventListener("contextmenu", async (event) => {
|
|
681
|
-
if (event.button !== 2) return;
|
|
682
|
-
const target = event.target;
|
|
683
|
-
const fiber = getFiberFromHostInstance(event.target);
|
|
684
|
-
focusedElement = target;
|
|
685
|
-
if (fiber) {
|
|
686
|
-
focusedFiber = fiber;
|
|
687
|
-
const stack = getFiberStack(fiber);
|
|
688
|
-
const displayNames = stack.map((fiber2) => getDisplayName(fiber2));
|
|
689
|
-
const orderedDisplayNames = [];
|
|
690
|
-
let count = 0;
|
|
691
|
-
let nearestCompositeFiber = null;
|
|
692
|
-
let currentFiber = fiber;
|
|
693
|
-
while (currentFiber) {
|
|
694
|
-
if (isCompositeFiber(currentFiber)) {
|
|
695
|
-
nearestCompositeFiber = currentFiber;
|
|
696
|
-
break;
|
|
697
|
-
}
|
|
698
|
-
currentFiber = currentFiber.return;
|
|
699
|
-
}
|
|
700
|
-
for (let i = displayNames.length - 1; i >= 0; i--) {
|
|
701
|
-
const displayName = displayNames[i];
|
|
702
|
-
if (displayName) {
|
|
703
|
-
orderedDisplayNames.push(displayName);
|
|
704
|
-
count++;
|
|
705
|
-
}
|
|
706
|
-
if (count > 2) break;
|
|
681
|
+
secure({
|
|
682
|
+
onCommitFiberRoot: (_, root) => {
|
|
683
|
+
handler(root);
|
|
707
684
|
}
|
|
708
|
-
|
|
709
|
-
const rst = await createRSTWithFiber(
|
|
710
|
-
nearestCompositeFiber || fiber,
|
|
711
|
-
target
|
|
712
|
-
);
|
|
713
|
-
console.log(rst);
|
|
714
|
-
} else {
|
|
715
|
-
focusedFiber = null;
|
|
716
|
-
text = target.tagName.toLowerCase();
|
|
717
|
-
const rst = await createRSTWithElement(target);
|
|
718
|
-
console.log(rst);
|
|
719
|
-
}
|
|
720
|
-
startAnimation();
|
|
721
|
-
});
|
|
722
|
-
const clear = () => {
|
|
723
|
-
if (!ctx) return;
|
|
724
|
-
ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
|
|
725
|
-
};
|
|
726
|
-
const host = document.createElement("div");
|
|
727
|
-
host.setAttribute("data-react-scan", "true");
|
|
728
|
-
const shadowRoot = host.attachShadow({ mode: "open" });
|
|
729
|
-
shadowRoot.innerHTML = CANVAS_HTML_STR;
|
|
730
|
-
const canvas = shadowRoot.firstChild;
|
|
731
|
-
if (!canvas) return null;
|
|
732
|
-
let dpr = Math.min(window.devicePixelRatio || 1, 2);
|
|
733
|
-
const { innerWidth, innerHeight } = window;
|
|
734
|
-
canvas.style.width = `${innerWidth}px`;
|
|
735
|
-
canvas.style.height = `${innerHeight}px`;
|
|
736
|
-
const width = innerWidth * dpr;
|
|
737
|
-
const height = innerHeight * dpr;
|
|
738
|
-
canvas.width = width;
|
|
739
|
-
canvas.height = height;
|
|
740
|
-
const ctx = canvas.getContext("2d", { alpha: true });
|
|
741
|
-
if (ctx) {
|
|
742
|
-
ctx.scale(dpr, dpr);
|
|
743
|
-
}
|
|
744
|
-
let isResizeScheduled = false;
|
|
745
|
-
window.addEventListener("resize", () => {
|
|
746
|
-
if (!isResizeScheduled) {
|
|
747
|
-
isResizeScheduled = true;
|
|
748
|
-
setTimeout(() => {
|
|
749
|
-
const width2 = window.innerWidth;
|
|
750
|
-
const height2 = window.innerHeight;
|
|
751
|
-
dpr = getDpr();
|
|
752
|
-
canvas.style.width = `${width2}px`;
|
|
753
|
-
canvas.style.height = `${height2}px`;
|
|
754
|
-
canvas.width = width2 * dpr;
|
|
755
|
-
canvas.height = height2 * dpr;
|
|
756
|
-
if (ctx) {
|
|
757
|
-
ctx.resetTransform();
|
|
758
|
-
ctx.scale(dpr, dpr);
|
|
759
|
-
}
|
|
760
|
-
startAnimation();
|
|
761
|
-
isResizeScheduled = false;
|
|
762
|
-
});
|
|
763
|
-
}
|
|
764
|
-
});
|
|
765
|
-
let isScrollScheduled = false;
|
|
766
|
-
window.addEventListener("scroll", () => {
|
|
767
|
-
if (!isScrollScheduled) {
|
|
768
|
-
isScrollScheduled = true;
|
|
769
|
-
setTimeout(() => {
|
|
770
|
-
requestAnimationFrame(() => {
|
|
771
|
-
startAnimation();
|
|
772
|
-
});
|
|
773
|
-
isScrollScheduled = false;
|
|
774
|
-
}, 16 * 2);
|
|
775
|
-
}
|
|
776
|
-
});
|
|
777
|
-
let prevFocusedElement = null;
|
|
778
|
-
setInterval(() => {
|
|
779
|
-
if (prevFocusedElement === focusedElement) {
|
|
780
|
-
return;
|
|
781
|
-
}
|
|
782
|
-
prevFocusedElement = focusedElement;
|
|
783
|
-
startAnimation();
|
|
784
|
-
}, 16 * 2);
|
|
785
|
-
shadowRoot.appendChild(canvas);
|
|
786
|
-
document.documentElement.appendChild(host);
|
|
787
|
-
};
|
|
788
|
-
init();
|
|
789
|
-
var createRSTWithFiber = async (fiber, element) => {
|
|
790
|
-
const root = await createRSTNode(fiber, element);
|
|
791
|
-
return { root };
|
|
792
|
-
};
|
|
793
|
-
var createRSTWithElement = async (element) => {
|
|
794
|
-
const root = await createRSTNodeFromElement(element);
|
|
795
|
-
return { root };
|
|
796
|
-
};
|
|
797
|
-
var createElementNode = async (element) => {
|
|
798
|
-
const rectMap = await getRectMap([element]);
|
|
799
|
-
const rect = rectMap.get(element) || element.getBoundingClientRect();
|
|
800
|
-
const computedStyle = window.getComputedStyle(element);
|
|
801
|
-
const styles = {};
|
|
802
|
-
Array.from({ length: computedStyle.length }).forEach((_, i) => {
|
|
803
|
-
const prop = computedStyle[i];
|
|
804
|
-
styles[prop] = computedStyle.getPropertyValue(prop);
|
|
805
|
-
});
|
|
806
|
-
return {
|
|
807
|
-
type: "element" /* Element */,
|
|
808
|
-
children: [],
|
|
809
|
-
x: rect.x,
|
|
810
|
-
y: rect.y,
|
|
811
|
-
width: rect.width,
|
|
812
|
-
height: rect.height,
|
|
813
|
-
eventHandlers: {},
|
|
814
|
-
classes: Array.from(element.classList),
|
|
815
|
-
styles,
|
|
816
|
-
element
|
|
817
|
-
};
|
|
818
|
-
};
|
|
819
|
-
var createA11yNode = (base, role, ariaLabel) => {
|
|
820
|
-
return {
|
|
821
|
-
...base,
|
|
822
|
-
type: "a11y" /* A11y */,
|
|
823
|
-
role,
|
|
824
|
-
ariaLabel
|
|
825
|
-
};
|
|
826
|
-
};
|
|
827
|
-
var createRSTNodeFromElement = async (element) => {
|
|
828
|
-
const base = await createElementNode(element);
|
|
829
|
-
for (const attr of Array.from(element.attributes)) {
|
|
830
|
-
if (attr.name.startsWith("on")) {
|
|
831
|
-
base.eventHandlers[attr.name] = attr.value;
|
|
832
|
-
}
|
|
833
|
-
}
|
|
834
|
-
base.children = await Promise.all(
|
|
835
|
-
Array.from(element.children).map(createRSTNodeFromElement)
|
|
685
|
+
})
|
|
836
686
|
);
|
|
837
|
-
const role = element.getAttribute("role");
|
|
838
|
-
const ariaLabel = element.getAttribute("aria-label");
|
|
839
|
-
if (role || ariaLabel) {
|
|
840
|
-
return createA11yNode(base, role, ariaLabel);
|
|
841
|
-
}
|
|
842
|
-
return base;
|
|
843
|
-
};
|
|
844
|
-
var createRSTNode = async (fiber, element) => {
|
|
845
|
-
if (isCompositeFiber(fiber)) {
|
|
846
|
-
const props = {};
|
|
847
|
-
traverseProps(fiber, (propName, nextValue) => {
|
|
848
|
-
props[propName] = nextValue;
|
|
849
|
-
});
|
|
850
|
-
const children = [];
|
|
851
|
-
const childPromises = [];
|
|
852
|
-
traverseFiber(fiber.child, (childFiber) => {
|
|
853
|
-
if (isHostFiber(childFiber) && childFiber.stateNode) {
|
|
854
|
-
childPromises.push(
|
|
855
|
-
createRSTNode(childFiber, childFiber.stateNode).then((node) => {
|
|
856
|
-
children.push(node);
|
|
857
|
-
})
|
|
858
|
-
);
|
|
859
|
-
} else if (isCompositeFiber(childFiber)) {
|
|
860
|
-
const hostFiber = getNearestHostFiber(childFiber);
|
|
861
|
-
if (hostFiber?.stateNode) {
|
|
862
|
-
childPromises.push(
|
|
863
|
-
createRSTNode(childFiber, hostFiber.stateNode).then((node) => {
|
|
864
|
-
children.push(node);
|
|
865
|
-
})
|
|
866
|
-
);
|
|
867
|
-
}
|
|
868
|
-
}
|
|
869
|
-
});
|
|
870
|
-
await Promise.all(childPromises);
|
|
871
|
-
return {
|
|
872
|
-
type: "component" /* Component */,
|
|
873
|
-
children,
|
|
874
|
-
props,
|
|
875
|
-
name: getDisplayName(fiber.type)
|
|
876
|
-
};
|
|
877
|
-
}
|
|
878
|
-
if (isHostFiber(fiber)) {
|
|
879
|
-
const base = await createElementNode(element);
|
|
880
|
-
traverseProps(fiber, (propName, value) => {
|
|
881
|
-
if (propName.startsWith("on") && typeof value === "function") {
|
|
882
|
-
base.eventHandlers[propName] = value.toString();
|
|
883
|
-
}
|
|
884
|
-
});
|
|
885
|
-
base.children = [];
|
|
886
|
-
const childPromises = [];
|
|
887
|
-
traverseFiber(fiber.child, (childFiber) => {
|
|
888
|
-
if (isHostFiber(childFiber) && childFiber.stateNode) {
|
|
889
|
-
childPromises.push(
|
|
890
|
-
createRSTNode(childFiber, childFiber.stateNode).then((node) => {
|
|
891
|
-
base.children.push(node);
|
|
892
|
-
})
|
|
893
|
-
);
|
|
894
|
-
} else if (isCompositeFiber(childFiber)) {
|
|
895
|
-
const hostFiber = getNearestHostFiber(childFiber);
|
|
896
|
-
if (hostFiber?.stateNode) {
|
|
897
|
-
childPromises.push(
|
|
898
|
-
createRSTNode(childFiber, hostFiber.stateNode).then((node) => {
|
|
899
|
-
base.children.push(node);
|
|
900
|
-
})
|
|
901
|
-
);
|
|
902
|
-
}
|
|
903
|
-
}
|
|
904
|
-
});
|
|
905
|
-
await Promise.all(childPromises);
|
|
906
|
-
const role = element.getAttribute("role");
|
|
907
|
-
const ariaLabel = element.getAttribute("aria-label");
|
|
908
|
-
if (role || ariaLabel) {
|
|
909
|
-
return createA11yNode(base, role, ariaLabel);
|
|
910
|
-
}
|
|
911
|
-
return base;
|
|
912
|
-
}
|
|
913
|
-
throw new Error("Unknown fiber type");
|
|
914
|
-
};
|
|
915
|
-
var getRectMap = (elements) => {
|
|
916
|
-
return new Promise((resolve) => {
|
|
917
|
-
const rects = /* @__PURE__ */ new Map();
|
|
918
|
-
const observer = new IntersectionObserver((entries) => {
|
|
919
|
-
for (let i = 0, len = entries.length; i < len; i++) {
|
|
920
|
-
const entry = entries[i];
|
|
921
|
-
const element = entry.target;
|
|
922
|
-
const rect = entry.boundingClientRect;
|
|
923
|
-
if (entry.isIntersecting && rect.width && rect.height) {
|
|
924
|
-
rects.set(element, rect);
|
|
925
|
-
}
|
|
926
|
-
}
|
|
927
|
-
observer.disconnect();
|
|
928
|
-
resolve(rects);
|
|
929
|
-
});
|
|
930
|
-
for (let i = 0, len = elements.length; i < len; i++) {
|
|
931
|
-
const element = elements[i];
|
|
932
|
-
observer.observe(element);
|
|
933
|
-
}
|
|
934
|
-
});
|
|
935
|
-
};
|
|
936
|
-
var stringifyWithCircularCheck = (value, seen = /* @__PURE__ */ new WeakSet()) => {
|
|
937
|
-
if (value === null || value === void 0) {
|
|
938
|
-
return String(value);
|
|
939
|
-
}
|
|
940
|
-
if (typeof value === "function") {
|
|
941
|
-
return value.toString().slice(0, 50) + (value.toString().length > 50 ? "..." : "");
|
|
942
|
-
}
|
|
943
|
-
if (typeof value !== "object") {
|
|
944
|
-
return JSON.stringify(value);
|
|
945
|
-
}
|
|
946
|
-
if (seen.has(value)) {
|
|
947
|
-
return "[Circular]";
|
|
948
|
-
}
|
|
949
|
-
seen.add(value);
|
|
950
|
-
if (Array.isArray(value)) {
|
|
951
|
-
const items = value.map((item) => stringifyWithCircularCheck(item, seen));
|
|
952
|
-
return `[${items.join(", ")}]`;
|
|
953
|
-
}
|
|
954
|
-
try {
|
|
955
|
-
const pairs = Object.entries(value).map(
|
|
956
|
-
([key, val]) => `${key}: ${stringifyWithCircularCheck(val, seen)}`
|
|
957
|
-
);
|
|
958
|
-
return `{${pairs.join(", ")}}`;
|
|
959
|
-
} catch {
|
|
960
|
-
return "[Object]";
|
|
961
|
-
}
|
|
962
|
-
};
|
|
963
|
-
var printRST = (tree, indent = 0) => {
|
|
964
|
-
const printNode = (node, indent2) => {
|
|
965
|
-
const spaces = " ".repeat(indent2);
|
|
966
|
-
if (node.type === "component" /* Component */ && "props" in node && "name" in node) {
|
|
967
|
-
const props = Object.entries(node.props).map(([key, value]) => `${key}={${stringifyWithCircularCheck(value)}}`).join(" ");
|
|
968
|
-
return `${spaces}<${node.name || "Unknown"}${props ? ` ${props}` : ""}>
|
|
969
|
-
${node.children.map((child) => printNode(child, indent2 + 1)).join("\n")}
|
|
970
|
-
${spaces}</${node.name || "Unknown"}>`;
|
|
971
|
-
}
|
|
972
|
-
const attrs = [];
|
|
973
|
-
if ("classes" in node && node.classes.length > 0) {
|
|
974
|
-
attrs.push(`class="${node.classes.join(" ")}"`);
|
|
975
|
-
}
|
|
976
|
-
if ("eventHandlers" in node) {
|
|
977
|
-
const eventHandlerAttrs = Object.entries(node.eventHandlers).map(
|
|
978
|
-
([event, handler]) => `${event}={${handler.slice(0, 50)}${handler.length > 50 ? "..." : ""}}`
|
|
979
|
-
).join(" ");
|
|
980
|
-
if (eventHandlerAttrs) {
|
|
981
|
-
attrs.push(eventHandlerAttrs);
|
|
982
|
-
}
|
|
983
|
-
}
|
|
984
|
-
if ("styles" in node) {
|
|
985
|
-
const styleStr = stringifyWithCircularCheck(node.styles);
|
|
986
|
-
if (styleStr !== "{}") {
|
|
987
|
-
attrs.push(`style={${styleStr}}`);
|
|
988
|
-
}
|
|
989
|
-
}
|
|
990
|
-
if (node.type === "a11y" /* A11y */ && "role" in node && "ariaLabel" in node) {
|
|
991
|
-
if (node.role) attrs.push(`role="${node.role}"`);
|
|
992
|
-
if (node.ariaLabel) attrs.push(`aria-label="${node.ariaLabel}"`);
|
|
993
|
-
}
|
|
994
|
-
if ("x" in node && "y" in node && "width" in node && "height" in node) {
|
|
995
|
-
const dimensions = `x=${Math.round(node.x)} y=${Math.round(node.y)} w=${Math.round(node.width)} h=${Math.round(node.height)}`;
|
|
996
|
-
attrs.push(dimensions);
|
|
997
|
-
}
|
|
998
|
-
const tagName = "element" in node ? node.element?.tagName.toLowerCase() || "unknown" : "unknown";
|
|
999
|
-
const attrsStr = attrs.length > 0 ? ` ${attrs.join(" ")}` : "";
|
|
1000
|
-
if (node.children.length === 0) {
|
|
1001
|
-
return `${spaces}<${tagName}${attrsStr} />`;
|
|
1002
|
-
}
|
|
1003
|
-
return `${spaces}<${tagName}${attrsStr}>
|
|
1004
|
-
${node.children.map((child) => printNode(child, indent2 + 1)).join("\n")}
|
|
1005
|
-
${spaces}</${tagName}>`;
|
|
1006
|
-
};
|
|
1007
|
-
if (!("type" in tree.root)) {
|
|
1008
|
-
throw new Error("Invalid RST: root node must have a type");
|
|
1009
|
-
}
|
|
1010
|
-
return printNode(tree.root, indent);
|
|
1011
687
|
};
|
|
1012
688
|
|
|
1013
|
-
|
|
689
|
+
exports.BIPPY_INSTRUMENTATION_STRING = BIPPY_INSTRUMENTATION_STRING;
|
|
690
|
+
exports.CONCURRENT_MODE_NUMBER = CONCURRENT_MODE_NUMBER;
|
|
691
|
+
exports.CONCURRENT_MODE_SYMBOL_STRING = CONCURRENT_MODE_SYMBOL_STRING;
|
|
692
|
+
exports.ClassComponentTag = ClassComponentTag;
|
|
693
|
+
exports.ContextConsumerTag = ContextConsumerTag;
|
|
694
|
+
exports.DEPRECATED_ASYNC_MODE_SYMBOL_STRING = DEPRECATED_ASYNC_MODE_SYMBOL_STRING;
|
|
695
|
+
exports.DehydratedSuspenseComponentTag = DehydratedSuspenseComponentTag;
|
|
696
|
+
exports.ELEMENT_TYPE_SYMBOL_STRING = ELEMENT_TYPE_SYMBOL_STRING;
|
|
697
|
+
exports.ForwardRefTag = ForwardRefTag;
|
|
698
|
+
exports.FragmentTag = FragmentTag;
|
|
699
|
+
exports.FunctionComponentTag = FunctionComponentTag;
|
|
700
|
+
exports.HostComponentTag = HostComponentTag;
|
|
701
|
+
exports.HostHoistableTag = HostHoistableTag;
|
|
702
|
+
exports.HostRootTag = HostRootTag;
|
|
703
|
+
exports.HostSingletonTag = HostSingletonTag;
|
|
704
|
+
exports.HostTextTag = HostTextTag;
|
|
705
|
+
exports.LegacyHiddenComponentTag = LegacyHiddenComponentTag;
|
|
706
|
+
exports.MemoComponentTag = MemoComponentTag;
|
|
707
|
+
exports.OffscreenComponentTag = OffscreenComponentTag;
|
|
708
|
+
exports.SimpleMemoComponentTag = SimpleMemoComponentTag;
|
|
709
|
+
exports.SuspenseComponentTag = SuspenseComponentTag;
|
|
710
|
+
exports.TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING = TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING;
|
|
711
|
+
exports.createFiberVisitor = createFiberVisitor;
|
|
712
|
+
exports.detectReactBuildType = detectReactBuildType;
|
|
713
|
+
exports.didFiberCommit = didFiberCommit;
|
|
714
|
+
exports.didFiberRender = didFiberRender;
|
|
715
|
+
exports.fiberIdMap = fiberIdMap;
|
|
716
|
+
exports.getDisplayName = getDisplayName;
|
|
717
|
+
exports.getFiberFromHostInstance = getFiberFromHostInstance;
|
|
718
|
+
exports.getFiberId = getFiberId;
|
|
719
|
+
exports.getFiberStack = getFiberStack;
|
|
720
|
+
exports.getMutatedHostFibers = getMutatedHostFibers;
|
|
721
|
+
exports.getNearestHostFiber = getNearestHostFiber;
|
|
722
|
+
exports.getNearestHostFibers = getNearestHostFibers;
|
|
723
|
+
exports.getRDTHook = getRDTHook;
|
|
724
|
+
exports.getTimings = getTimings;
|
|
725
|
+
exports.getType = getType;
|
|
726
|
+
exports.hasMemoCache = hasMemoCache;
|
|
727
|
+
exports.hasRDTHook = hasRDTHook;
|
|
728
|
+
exports.installRDTHook = installRDTHook;
|
|
729
|
+
exports.instrument = instrument;
|
|
730
|
+
exports.isCompositeFiber = isCompositeFiber;
|
|
731
|
+
exports.isHostFiber = isHostFiber;
|
|
732
|
+
exports.isInstrumentationActive = isInstrumentationActive;
|
|
733
|
+
exports.isUsingRDT = isUsingRDT;
|
|
734
|
+
exports.isValidElement = isValidElement;
|
|
735
|
+
exports.isValidFiber = isValidFiber;
|
|
736
|
+
exports.mountFiberRecursively = mountFiberRecursively;
|
|
737
|
+
exports.onCommitFiberRoot = onCommitFiberRoot;
|
|
738
|
+
exports.secure = secure;
|
|
739
|
+
exports.setFiberId = setFiberId;
|
|
740
|
+
exports.shouldFilterFiber = shouldFilterFiber;
|
|
741
|
+
exports.traverseContexts = traverseContexts;
|
|
742
|
+
exports.traverseEffects = traverseEffects;
|
|
743
|
+
exports.traverseFiber = traverseFiber;
|
|
744
|
+
exports.traverseProps = traverseProps;
|
|
745
|
+
exports.traverseRenderedFibers = traverseRenderedFibers;
|
|
746
|
+
exports.traverseState = traverseState;
|
|
747
|
+
exports.unmountFiber = unmountFiber;
|
|
748
|
+
exports.unmountFiberChildrenRecursively = unmountFiberChildrenRecursively;
|
|
749
|
+
exports.updateFiberRecursively = updateFiberRecursively;
|
|
750
|
+
exports.version = version;
|