@gemx-dev/heatmap-react 3.5.92-dev.36 → 3.5.92-dev.37
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/esm/hooks/viz-render/useHeatmapIframeProcessor.d.ts.map +1 -1
- package/dist/esm/hooks/viz-render/useHeatmapRenderDom.d.ts.map +1 -1
- package/dist/esm/index.js +60 -45
- package/dist/esm/index.mjs +60 -45
- package/dist/esm/libs/visualizer/shadow-dom/extractor.d.ts +26 -15
- package/dist/esm/libs/visualizer/shadow-dom/extractor.d.ts.map +1 -1
- package/dist/umd/hooks/viz-render/useHeatmapIframeProcessor.d.ts.map +1 -1
- package/dist/umd/hooks/viz-render/useHeatmapRenderDom.d.ts.map +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/libs/visualizer/shadow-dom/extractor.d.ts +26 -15
- package/dist/umd/libs/visualizer/shadow-dom/extractor.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHeatmapIframeProcessor.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapIframeProcessor.ts"],"names":[],"mappings":"AAgCA,MAAM,WAAW,6BAA6B;IAC5C,GAAG,EAAE,CAAC,MAAM,EAAE,iBAAiB,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7E,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,QAAO,
|
|
1
|
+
{"version":3,"file":"useHeatmapIframeProcessor.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapIframeProcessor.ts"],"names":[],"mappings":"AAgCA,MAAM,WAAW,6BAA6B;IAC5C,GAAG,EAAE,CAAC,MAAM,EAAE,iBAAiB,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7E,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,QAAO,6BA2E5C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHeatmapRenderDom.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapRenderDom.ts"],"names":[],"mappings":"AAmBA,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,mBAAmB,QAAO,
|
|
1
|
+
{"version":3,"file":"useHeatmapRenderDom.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapRenderDom.ts"],"names":[],"mappings":"AAmBA,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,mBAAmB,QAAO,uBAwFtC,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -4431,7 +4431,7 @@ async function processHeightChange(ctx, newHeight) {
|
|
|
4431
4431
|
}
|
|
4432
4432
|
}
|
|
4433
4433
|
function handleHeightChange(ctx) {
|
|
4434
|
-
if (!ctx.running || isBlocked(ctx))
|
|
4434
|
+
if (!ctx.running || !ctx.observerCleanup || isBlocked(ctx))
|
|
4435
4435
|
return;
|
|
4436
4436
|
scheduleThrottledCheck(ctx);
|
|
4437
4437
|
}
|
|
@@ -6436,29 +6436,32 @@ var ShortCircuitStrategy;
|
|
|
6436
6436
|
function isShadowDomNode(tag) {
|
|
6437
6437
|
return tag === Constant.ShadowDomTag || tag === Constant.PolyfillShadowDomTag;
|
|
6438
6438
|
}
|
|
6439
|
-
/**
|
|
6440
|
-
|
|
6441
|
-
|
|
6442
|
-
|
|
6443
|
-
|
|
6444
|
-
|
|
6445
|
-
|
|
6446
|
-
|
|
6447
|
-
|
|
6448
|
-
|
|
6449
|
-
|
|
6450
|
-
|
|
6451
|
-
* Pass 1 — seed *S/*P node IDs.
|
|
6452
|
-
* Pass 2 — cascade: any node whose parent is in the set is also in the set (repeat until stable). */
|
|
6453
|
-
function buildShadowSubtreeIds(allDomEvents) {
|
|
6439
|
+
/**
|
|
6440
|
+
* Two-step collection of all shadow-related node IDs across dom + mutation events.
|
|
6441
|
+
*
|
|
6442
|
+
* Step 1 — scan dom + all mutations to find *S/*P nodes and their direct host parents.
|
|
6443
|
+
* Step 2 — cascade: any node whose parent is already in subtreeIds is also included.
|
|
6444
|
+
*
|
|
6445
|
+
* Using IDs (not tag names) makes host detection precise and avoids false positives
|
|
6446
|
+
* from elements that share a tag name with a shadow host but aren't one.
|
|
6447
|
+
*/
|
|
6448
|
+
function collectShadowNodeIds(dom, events) {
|
|
6449
|
+
const mutationEvents = events.filter((e) => e.event === Event.Mutation);
|
|
6450
|
+
const allDomEvents = [dom, ...mutationEvents];
|
|
6454
6451
|
const subtreeIds = new Set();
|
|
6452
|
+
const hostIds = new Set();
|
|
6453
|
+
// Step 1: seed *S/*P node IDs and collect their direct host parent IDs
|
|
6455
6454
|
for (const e of allDomEvents) {
|
|
6456
6455
|
const data = e.data;
|
|
6457
6456
|
for (const node of data ?? []) {
|
|
6458
|
-
if (isShadowDomNode(node.tag))
|
|
6457
|
+
if (isShadowDomNode(node.tag)) {
|
|
6459
6458
|
subtreeIds.add(node.id);
|
|
6459
|
+
if (node.parent)
|
|
6460
|
+
hostIds.add(node.parent);
|
|
6461
|
+
}
|
|
6460
6462
|
}
|
|
6461
6463
|
}
|
|
6464
|
+
// Step 2: cascade — descendants of shadow nodes are also part of the shadow subtree
|
|
6462
6465
|
let changed = true;
|
|
6463
6466
|
while (changed) {
|
|
6464
6467
|
changed = false;
|
|
@@ -6472,29 +6475,24 @@ function buildShadowSubtreeIds(allDomEvents) {
|
|
|
6472
6475
|
}
|
|
6473
6476
|
}
|
|
6474
6477
|
}
|
|
6475
|
-
return subtreeIds;
|
|
6478
|
+
return { subtreeIds, hostIds };
|
|
6476
6479
|
}
|
|
6477
|
-
function
|
|
6478
|
-
return (
|
|
6479
|
-
if (isShadowDomNode(node.tag))
|
|
6480
|
-
return true;
|
|
6481
|
-
if (shadowHostTags.has(node.tag ?? ''))
|
|
6482
|
-
return true;
|
|
6483
|
-
return subtreeIds.has(node.id);
|
|
6484
|
-
}) ?? []);
|
|
6480
|
+
function isShadowRelated(node, ids) {
|
|
6481
|
+
return ids.subtreeIds.has(node.id) || ids.hostIds.has(node.id);
|
|
6485
6482
|
}
|
|
6486
|
-
/**
|
|
6487
|
-
*
|
|
6488
|
-
|
|
6489
|
-
|
|
6490
|
-
|
|
6491
|
-
const shadowNodes =
|
|
6483
|
+
/**
|
|
6484
|
+
* Extract shadow DOM nodes from merged.dom (initial Discover event).
|
|
6485
|
+
* Includes both shadow host elements (hostIds) and shadow subtree nodes (subtreeIds).
|
|
6486
|
+
*/
|
|
6487
|
+
function extractSpecialDom(dom, ids) {
|
|
6488
|
+
const shadowNodes = dom.data?.filter((node) => isShadowRelated(node, ids)) ?? [];
|
|
6492
6489
|
return shadowNodes.length ? { ...dom, data: shadowNodes } : null;
|
|
6493
6490
|
}
|
|
6494
|
-
/**
|
|
6495
|
-
|
|
6496
|
-
|
|
6497
|
-
|
|
6491
|
+
/**
|
|
6492
|
+
* Extract shadow DOM mutations + StyleSheet + CustomElement events from merged.events.
|
|
6493
|
+
* Mutation events are filtered to only include shadow-related nodes.
|
|
6494
|
+
*/
|
|
6495
|
+
function extractSpecialEvents(events, ids) {
|
|
6498
6496
|
const result = [];
|
|
6499
6497
|
for (const e of events) {
|
|
6500
6498
|
const ev = e.event;
|
|
@@ -6505,7 +6503,7 @@ function extractSpecialEvents(events, dom, shadowHostTags) {
|
|
|
6505
6503
|
continue;
|
|
6506
6504
|
}
|
|
6507
6505
|
if (ev === Event.Mutation) {
|
|
6508
|
-
const shadowNodes =
|
|
6506
|
+
const shadowNodes = e.data?.filter((node) => isShadowRelated(node, ids)) ?? [];
|
|
6509
6507
|
if (shadowNodes.length)
|
|
6510
6508
|
result.push({ ...e, data: shadowNodes });
|
|
6511
6509
|
}
|
|
@@ -6708,9 +6706,9 @@ class GXVisualizer extends Visualizer {
|
|
|
6708
6706
|
const timestamp = Date.now();
|
|
6709
6707
|
const version = decoded[0].envelope.version;
|
|
6710
6708
|
const html = doc.documentElement.outerHTML;
|
|
6711
|
-
const
|
|
6712
|
-
const specialDom = extractSpecialDom(merged.dom,
|
|
6713
|
-
const specialEvents = extractSpecialEvents(merged.events,
|
|
6709
|
+
const shadowNodeIds = collectShadowNodeIds(merged.dom, merged.events);
|
|
6710
|
+
const specialDom = extractSpecialDom(merged.dom, shadowNodeIds);
|
|
6711
|
+
const specialEvents = extractSpecialEvents(merged.events, shadowNodeIds);
|
|
6714
6712
|
void htmlCache.set({ key: cacheKey, html, specialDom, specialEvents, version, timestamp });
|
|
6715
6713
|
}
|
|
6716
6714
|
catch (e) {
|
|
@@ -6770,8 +6768,10 @@ const useHeatmapIframeProcessor = () => {
|
|
|
6770
6768
|
onHeightChange: (data) => {
|
|
6771
6769
|
if (abort.signal.aborted)
|
|
6772
6770
|
return;
|
|
6773
|
-
if (data.height)
|
|
6771
|
+
if (data.height) {
|
|
6774
6772
|
setIframeHeight(data.height);
|
|
6773
|
+
iframe.style.height = `${data.height}px`;
|
|
6774
|
+
}
|
|
6775
6775
|
},
|
|
6776
6776
|
});
|
|
6777
6777
|
},
|
|
@@ -6843,15 +6843,19 @@ const useHeatmapRenderDom = () => {
|
|
|
6843
6843
|
const heatmapType = useHeatmapSettingContext((s) => s.heatmapType);
|
|
6844
6844
|
const elementToShow = useHeatmapDataContext((s) => s.dataInfo?.elementToShow);
|
|
6845
6845
|
const dataHash = useHeatmapDataContext((s) => s.dataHash);
|
|
6846
|
+
const isLoadingDom = useHeatmapSettingContext((state) => state.isLoadingDom);
|
|
6846
6847
|
const iframeRef = useRef(null);
|
|
6847
6848
|
const abortRef = useRef(null);
|
|
6848
6849
|
const elementToShowRef = useRef(null);
|
|
6849
6850
|
const dataHashRef = useRef(null);
|
|
6850
6851
|
const heatmapTypeRef = useRef(heatmapType);
|
|
6852
|
+
const lastRenderKeyRef = useRef(null);
|
|
6851
6853
|
elementToShowRef.current = elementToShow ?? null;
|
|
6852
6854
|
dataHashRef.current = dataHash ?? null;
|
|
6853
6855
|
heatmapTypeRef.current = heatmapType;
|
|
6854
6856
|
const { run: runIframeSetup, reset: resetIframeSetup } = useHeatmapIframeProcessor();
|
|
6857
|
+
const runIframeSetupRef = useRef(runIframeSetup);
|
|
6858
|
+
runIframeSetupRef.current = runIframeSetup;
|
|
6855
6859
|
const renderHeatmap = useCallback(async (payloads) => {
|
|
6856
6860
|
if (!payloads || payloads.length === 0)
|
|
6857
6861
|
return;
|
|
@@ -6883,13 +6887,24 @@ const useHeatmapRenderDom = () => {
|
|
|
6883
6887
|
if (abort.signal.aborted)
|
|
6884
6888
|
return;
|
|
6885
6889
|
// Phase 2: iframe setup — deferred to useIframeSetup (handles dims dependency)
|
|
6886
|
-
|
|
6887
|
-
}, [
|
|
6890
|
+
runIframeSetupRef.current(iframe, t0, abort);
|
|
6891
|
+
}, []);
|
|
6888
6892
|
useEffect(() => {
|
|
6893
|
+
if (isLoadingDom)
|
|
6894
|
+
return;
|
|
6889
6895
|
if (!data || data.length === 0)
|
|
6890
6896
|
return;
|
|
6891
|
-
|
|
6892
|
-
|
|
6897
|
+
const renderKey = `${dataHash}-${deviceType}`;
|
|
6898
|
+
if (renderKey === lastRenderKeyRef.current)
|
|
6899
|
+
return;
|
|
6900
|
+
const timer = setTimeout(() => {
|
|
6901
|
+
if (renderKey !== `${dataHashRef.current}-${deviceType}`)
|
|
6902
|
+
return;
|
|
6903
|
+
lastRenderKeyRef.current = renderKey;
|
|
6904
|
+
renderHeatmap(decodeArrayClarity(data));
|
|
6905
|
+
}, 50);
|
|
6906
|
+
return () => clearTimeout(timer);
|
|
6907
|
+
}, [data, deviceType, isLoadingDom]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
6893
6908
|
return { iframeRef };
|
|
6894
6909
|
};
|
|
6895
6910
|
|
package/dist/esm/index.mjs
CHANGED
|
@@ -4431,7 +4431,7 @@ async function processHeightChange(ctx, newHeight) {
|
|
|
4431
4431
|
}
|
|
4432
4432
|
}
|
|
4433
4433
|
function handleHeightChange(ctx) {
|
|
4434
|
-
if (!ctx.running || isBlocked(ctx))
|
|
4434
|
+
if (!ctx.running || !ctx.observerCleanup || isBlocked(ctx))
|
|
4435
4435
|
return;
|
|
4436
4436
|
scheduleThrottledCheck(ctx);
|
|
4437
4437
|
}
|
|
@@ -6436,29 +6436,32 @@ var ShortCircuitStrategy;
|
|
|
6436
6436
|
function isShadowDomNode(tag) {
|
|
6437
6437
|
return tag === Constant.ShadowDomTag || tag === Constant.PolyfillShadowDomTag;
|
|
6438
6438
|
}
|
|
6439
|
-
/**
|
|
6440
|
-
|
|
6441
|
-
|
|
6442
|
-
|
|
6443
|
-
|
|
6444
|
-
|
|
6445
|
-
|
|
6446
|
-
|
|
6447
|
-
|
|
6448
|
-
|
|
6449
|
-
|
|
6450
|
-
|
|
6451
|
-
* Pass 1 — seed *S/*P node IDs.
|
|
6452
|
-
* Pass 2 — cascade: any node whose parent is in the set is also in the set (repeat until stable). */
|
|
6453
|
-
function buildShadowSubtreeIds(allDomEvents) {
|
|
6439
|
+
/**
|
|
6440
|
+
* Two-step collection of all shadow-related node IDs across dom + mutation events.
|
|
6441
|
+
*
|
|
6442
|
+
* Step 1 — scan dom + all mutations to find *S/*P nodes and their direct host parents.
|
|
6443
|
+
* Step 2 — cascade: any node whose parent is already in subtreeIds is also included.
|
|
6444
|
+
*
|
|
6445
|
+
* Using IDs (not tag names) makes host detection precise and avoids false positives
|
|
6446
|
+
* from elements that share a tag name with a shadow host but aren't one.
|
|
6447
|
+
*/
|
|
6448
|
+
function collectShadowNodeIds(dom, events) {
|
|
6449
|
+
const mutationEvents = events.filter((e) => e.event === Event.Mutation);
|
|
6450
|
+
const allDomEvents = [dom, ...mutationEvents];
|
|
6454
6451
|
const subtreeIds = new Set();
|
|
6452
|
+
const hostIds = new Set();
|
|
6453
|
+
// Step 1: seed *S/*P node IDs and collect their direct host parent IDs
|
|
6455
6454
|
for (const e of allDomEvents) {
|
|
6456
6455
|
const data = e.data;
|
|
6457
6456
|
for (const node of data ?? []) {
|
|
6458
|
-
if (isShadowDomNode(node.tag))
|
|
6457
|
+
if (isShadowDomNode(node.tag)) {
|
|
6459
6458
|
subtreeIds.add(node.id);
|
|
6459
|
+
if (node.parent)
|
|
6460
|
+
hostIds.add(node.parent);
|
|
6461
|
+
}
|
|
6460
6462
|
}
|
|
6461
6463
|
}
|
|
6464
|
+
// Step 2: cascade — descendants of shadow nodes are also part of the shadow subtree
|
|
6462
6465
|
let changed = true;
|
|
6463
6466
|
while (changed) {
|
|
6464
6467
|
changed = false;
|
|
@@ -6472,29 +6475,24 @@ function buildShadowSubtreeIds(allDomEvents) {
|
|
|
6472
6475
|
}
|
|
6473
6476
|
}
|
|
6474
6477
|
}
|
|
6475
|
-
return subtreeIds;
|
|
6478
|
+
return { subtreeIds, hostIds };
|
|
6476
6479
|
}
|
|
6477
|
-
function
|
|
6478
|
-
return (
|
|
6479
|
-
if (isShadowDomNode(node.tag))
|
|
6480
|
-
return true;
|
|
6481
|
-
if (shadowHostTags.has(node.tag ?? ''))
|
|
6482
|
-
return true;
|
|
6483
|
-
return subtreeIds.has(node.id);
|
|
6484
|
-
}) ?? []);
|
|
6480
|
+
function isShadowRelated(node, ids) {
|
|
6481
|
+
return ids.subtreeIds.has(node.id) || ids.hostIds.has(node.id);
|
|
6485
6482
|
}
|
|
6486
|
-
/**
|
|
6487
|
-
*
|
|
6488
|
-
|
|
6489
|
-
|
|
6490
|
-
|
|
6491
|
-
const shadowNodes =
|
|
6483
|
+
/**
|
|
6484
|
+
* Extract shadow DOM nodes from merged.dom (initial Discover event).
|
|
6485
|
+
* Includes both shadow host elements (hostIds) and shadow subtree nodes (subtreeIds).
|
|
6486
|
+
*/
|
|
6487
|
+
function extractSpecialDom(dom, ids) {
|
|
6488
|
+
const shadowNodes = dom.data?.filter((node) => isShadowRelated(node, ids)) ?? [];
|
|
6492
6489
|
return shadowNodes.length ? { ...dom, data: shadowNodes } : null;
|
|
6493
6490
|
}
|
|
6494
|
-
/**
|
|
6495
|
-
|
|
6496
|
-
|
|
6497
|
-
|
|
6491
|
+
/**
|
|
6492
|
+
* Extract shadow DOM mutations + StyleSheet + CustomElement events from merged.events.
|
|
6493
|
+
* Mutation events are filtered to only include shadow-related nodes.
|
|
6494
|
+
*/
|
|
6495
|
+
function extractSpecialEvents(events, ids) {
|
|
6498
6496
|
const result = [];
|
|
6499
6497
|
for (const e of events) {
|
|
6500
6498
|
const ev = e.event;
|
|
@@ -6505,7 +6503,7 @@ function extractSpecialEvents(events, dom, shadowHostTags) {
|
|
|
6505
6503
|
continue;
|
|
6506
6504
|
}
|
|
6507
6505
|
if (ev === Event.Mutation) {
|
|
6508
|
-
const shadowNodes =
|
|
6506
|
+
const shadowNodes = e.data?.filter((node) => isShadowRelated(node, ids)) ?? [];
|
|
6509
6507
|
if (shadowNodes.length)
|
|
6510
6508
|
result.push({ ...e, data: shadowNodes });
|
|
6511
6509
|
}
|
|
@@ -6708,9 +6706,9 @@ class GXVisualizer extends Visualizer {
|
|
|
6708
6706
|
const timestamp = Date.now();
|
|
6709
6707
|
const version = decoded[0].envelope.version;
|
|
6710
6708
|
const html = doc.documentElement.outerHTML;
|
|
6711
|
-
const
|
|
6712
|
-
const specialDom = extractSpecialDom(merged.dom,
|
|
6713
|
-
const specialEvents = extractSpecialEvents(merged.events,
|
|
6709
|
+
const shadowNodeIds = collectShadowNodeIds(merged.dom, merged.events);
|
|
6710
|
+
const specialDom = extractSpecialDom(merged.dom, shadowNodeIds);
|
|
6711
|
+
const specialEvents = extractSpecialEvents(merged.events, shadowNodeIds);
|
|
6714
6712
|
void htmlCache.set({ key: cacheKey, html, specialDom, specialEvents, version, timestamp });
|
|
6715
6713
|
}
|
|
6716
6714
|
catch (e) {
|
|
@@ -6770,8 +6768,10 @@ const useHeatmapIframeProcessor = () => {
|
|
|
6770
6768
|
onHeightChange: (data) => {
|
|
6771
6769
|
if (abort.signal.aborted)
|
|
6772
6770
|
return;
|
|
6773
|
-
if (data.height)
|
|
6771
|
+
if (data.height) {
|
|
6774
6772
|
setIframeHeight(data.height);
|
|
6773
|
+
iframe.style.height = `${data.height}px`;
|
|
6774
|
+
}
|
|
6775
6775
|
},
|
|
6776
6776
|
});
|
|
6777
6777
|
},
|
|
@@ -6843,15 +6843,19 @@ const useHeatmapRenderDom = () => {
|
|
|
6843
6843
|
const heatmapType = useHeatmapSettingContext((s) => s.heatmapType);
|
|
6844
6844
|
const elementToShow = useHeatmapDataContext((s) => s.dataInfo?.elementToShow);
|
|
6845
6845
|
const dataHash = useHeatmapDataContext((s) => s.dataHash);
|
|
6846
|
+
const isLoadingDom = useHeatmapSettingContext((state) => state.isLoadingDom);
|
|
6846
6847
|
const iframeRef = useRef(null);
|
|
6847
6848
|
const abortRef = useRef(null);
|
|
6848
6849
|
const elementToShowRef = useRef(null);
|
|
6849
6850
|
const dataHashRef = useRef(null);
|
|
6850
6851
|
const heatmapTypeRef = useRef(heatmapType);
|
|
6852
|
+
const lastRenderKeyRef = useRef(null);
|
|
6851
6853
|
elementToShowRef.current = elementToShow ?? null;
|
|
6852
6854
|
dataHashRef.current = dataHash ?? null;
|
|
6853
6855
|
heatmapTypeRef.current = heatmapType;
|
|
6854
6856
|
const { run: runIframeSetup, reset: resetIframeSetup } = useHeatmapIframeProcessor();
|
|
6857
|
+
const runIframeSetupRef = useRef(runIframeSetup);
|
|
6858
|
+
runIframeSetupRef.current = runIframeSetup;
|
|
6855
6859
|
const renderHeatmap = useCallback(async (payloads) => {
|
|
6856
6860
|
if (!payloads || payloads.length === 0)
|
|
6857
6861
|
return;
|
|
@@ -6883,13 +6887,24 @@ const useHeatmapRenderDom = () => {
|
|
|
6883
6887
|
if (abort.signal.aborted)
|
|
6884
6888
|
return;
|
|
6885
6889
|
// Phase 2: iframe setup — deferred to useIframeSetup (handles dims dependency)
|
|
6886
|
-
|
|
6887
|
-
}, [
|
|
6890
|
+
runIframeSetupRef.current(iframe, t0, abort);
|
|
6891
|
+
}, []);
|
|
6888
6892
|
useEffect(() => {
|
|
6893
|
+
if (isLoadingDom)
|
|
6894
|
+
return;
|
|
6889
6895
|
if (!data || data.length === 0)
|
|
6890
6896
|
return;
|
|
6891
|
-
|
|
6892
|
-
|
|
6897
|
+
const renderKey = `${dataHash}-${deviceType}`;
|
|
6898
|
+
if (renderKey === lastRenderKeyRef.current)
|
|
6899
|
+
return;
|
|
6900
|
+
const timer = setTimeout(() => {
|
|
6901
|
+
if (renderKey !== `${dataHashRef.current}-${deviceType}`)
|
|
6902
|
+
return;
|
|
6903
|
+
lastRenderKeyRef.current = renderKey;
|
|
6904
|
+
renderHeatmap(decodeArrayClarity(data));
|
|
6905
|
+
}, 50);
|
|
6906
|
+
return () => clearTimeout(timer);
|
|
6907
|
+
}, [data, deviceType, isLoadingDom]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
6893
6908
|
return { iframeRef };
|
|
6894
6909
|
};
|
|
6895
6910
|
|
|
@@ -4,20 +4,31 @@ export type DomNode = {
|
|
|
4
4
|
parent: number;
|
|
5
5
|
tag?: string;
|
|
6
6
|
};
|
|
7
|
+
export interface ShadowNodeIds {
|
|
8
|
+
/** IDs of shadow container nodes (*S / *P) and all their descendants */
|
|
9
|
+
subtreeIds: Set<number>;
|
|
10
|
+
/** IDs of elements that directly host a shadow root (direct parents of *S/*P nodes) */
|
|
11
|
+
hostIds: Set<number>;
|
|
12
|
+
}
|
|
7
13
|
export declare function isShadowDomNode(tag: string | undefined): boolean;
|
|
8
|
-
/**
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
export declare function
|
|
18
|
-
/**
|
|
19
|
-
*
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
export declare function
|
|
14
|
+
/**
|
|
15
|
+
* Two-step collection of all shadow-related node IDs across dom + mutation events.
|
|
16
|
+
*
|
|
17
|
+
* Step 1 — scan dom + all mutations to find *S/*P nodes and their direct host parents.
|
|
18
|
+
* Step 2 — cascade: any node whose parent is already in subtreeIds is also included.
|
|
19
|
+
*
|
|
20
|
+
* Using IDs (not tag names) makes host detection precise and avoids false positives
|
|
21
|
+
* from elements that share a tag name with a shadow host but aren't one.
|
|
22
|
+
*/
|
|
23
|
+
export declare function collectShadowNodeIds(dom: MergedPayload['dom'], events: MergedPayload['events']): ShadowNodeIds;
|
|
24
|
+
/**
|
|
25
|
+
* Extract shadow DOM nodes from merged.dom (initial Discover event).
|
|
26
|
+
* Includes both shadow host elements (hostIds) and shadow subtree nodes (subtreeIds).
|
|
27
|
+
*/
|
|
28
|
+
export declare function extractSpecialDom(dom: MergedPayload['dom'], ids: ShadowNodeIds): MergedPayload['dom'] | null;
|
|
29
|
+
/**
|
|
30
|
+
* Extract shadow DOM mutations + StyleSheet + CustomElement events from merged.events.
|
|
31
|
+
* Mutation events are filtered to only include shadow-related nodes.
|
|
32
|
+
*/
|
|
33
|
+
export declare function extractSpecialEvents(events: MergedPayload['events'], ids: ShadowNodeIds): MergedPayload['events'];
|
|
23
34
|
//# sourceMappingURL=extractor.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"extractor.d.ts","sourceRoot":"","sources":["../../../../src/libs/visualizer/shadow-dom/extractor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAI9C,MAAM,MAAM,OAAO,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnE,
|
|
1
|
+
{"version":3,"file":"extractor.d.ts","sourceRoot":"","sources":["../../../../src/libs/visualizer/shadow-dom/extractor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAI9C,MAAM,MAAM,OAAO,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnE,MAAM,WAAW,aAAa;IAC5B,wEAAwE;IACxE,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACxB,uFAAuF;IACvF,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACtB;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAEhE;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,aAAa,CAAC,QAAQ,CAAC,GAAG,aAAa,CAkC9G;AAMD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,aAAa,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,CAG5G;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,aAAa,GAAG,aAAa,CAAC,QAAQ,CAAC,CAsBjH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHeatmapIframeProcessor.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapIframeProcessor.ts"],"names":[],"mappings":"AAgCA,MAAM,WAAW,6BAA6B;IAC5C,GAAG,EAAE,CAAC,MAAM,EAAE,iBAAiB,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7E,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,QAAO,
|
|
1
|
+
{"version":3,"file":"useHeatmapIframeProcessor.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapIframeProcessor.ts"],"names":[],"mappings":"AAgCA,MAAM,WAAW,6BAA6B;IAC5C,GAAG,EAAE,CAAC,MAAM,EAAE,iBAAiB,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7E,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,QAAO,6BA2E5C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHeatmapRenderDom.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapRenderDom.ts"],"names":[],"mappings":"AAmBA,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,mBAAmB,QAAO,
|
|
1
|
+
{"version":3,"file":"useHeatmapRenderDom.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapRenderDom.ts"],"names":[],"mappings":"AAmBA,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,mBAAmB,QAAO,uBAwFtC,CAAC"}
|