@gemx-dev/heatmap-react 3.5.92-dev.30 → 3.5.92-dev.31
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/index.js +61 -6
- package/dist/esm/index.mjs +61 -6
- package/dist/esm/libs/iframe-processor/processors/height-observer/observers.d.ts.map +1 -1
- package/dist/esm/libs/iframe-processor/shared/iframe-types.d.ts +6 -0
- package/dist/esm/libs/iframe-processor/shared/iframe-types.d.ts.map +1 -1
- package/dist/umd/hooks/viz-render/useHeatmapIframeProcessor.d.ts.map +1 -1
- package/dist/umd/index.js +2 -2
- package/dist/umd/libs/iframe-processor/processors/height-observer/observers.d.ts.map +1 -1
- package/dist/umd/libs/iframe-processor/shared/iframe-types.d.ts +6 -0
- package/dist/umd/libs/iframe-processor/shared/iframe-types.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":"
|
|
1
|
+
{"version":3,"file":"useHeatmapIframeProcessor.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapIframeProcessor.ts"],"names":[],"mappings":"AAiCA,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,6BA6E5C,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -4257,11 +4257,56 @@ function getFinalWidth(doc) {
|
|
|
4257
4257
|
* Returns a cleanup function that disconnects both observers.
|
|
4258
4258
|
*/
|
|
4259
4259
|
const logger$2 = createLogger({ enabled: false, prefix: 'IframeHeightObserver' });
|
|
4260
|
+
function logResizeEntries(entries) {
|
|
4261
|
+
for (const entry of entries) {
|
|
4262
|
+
const el = entry.target;
|
|
4263
|
+
console.log('[HeightObserver] ResizeObserver triggered:', {
|
|
4264
|
+
tag: el.tagName,
|
|
4265
|
+
id: el.id || undefined,
|
|
4266
|
+
class: el.className || undefined,
|
|
4267
|
+
scrollHeight: el.scrollHeight,
|
|
4268
|
+
offsetHeight: el.offsetHeight,
|
|
4269
|
+
contentRect: { width: entry.contentRect.width, height: entry.contentRect.height },
|
|
4270
|
+
});
|
|
4271
|
+
}
|
|
4272
|
+
}
|
|
4273
|
+
function logMutationEntries(mutations) {
|
|
4274
|
+
for (const mutation of mutations) {
|
|
4275
|
+
const el = mutation.target;
|
|
4276
|
+
console.log('[HeightObserver] MutationObserver triggered:', {
|
|
4277
|
+
type: mutation.type,
|
|
4278
|
+
tag: el.tagName,
|
|
4279
|
+
id: el.id || undefined,
|
|
4280
|
+
class: el.className || undefined,
|
|
4281
|
+
...(mutation.type === 'attributes' && { attributeName: mutation.attributeName }),
|
|
4282
|
+
...(mutation.type === 'childList' && {
|
|
4283
|
+
addedNodes: mutation.addedNodes.length,
|
|
4284
|
+
removedNodes: mutation.removedNodes.length,
|
|
4285
|
+
}),
|
|
4286
|
+
});
|
|
4287
|
+
}
|
|
4288
|
+
}
|
|
4260
4289
|
function setup(doc, onChange) {
|
|
4261
|
-
|
|
4262
|
-
|
|
4290
|
+
// Initialize as null so the first ResizeObserver callback (which fires immediately
|
|
4291
|
+
// on observe()) just sets the baseline without triggering onChange.
|
|
4292
|
+
let lastBodyHeight = null;
|
|
4293
|
+
const resizeObserver = new ResizeObserver((entries) => {
|
|
4294
|
+
const newHeight = entries[0]?.contentRect.height ?? 0;
|
|
4295
|
+
if (lastBodyHeight === null) {
|
|
4296
|
+
lastBodyHeight = newHeight;
|
|
4297
|
+
return;
|
|
4298
|
+
}
|
|
4299
|
+
if (newHeight === lastBodyHeight)
|
|
4300
|
+
return;
|
|
4301
|
+
lastBodyHeight = newHeight;
|
|
4302
|
+
logResizeEntries(entries);
|
|
4303
|
+
onChange();
|
|
4304
|
+
});
|
|
4263
4305
|
resizeObserver.observe(doc.body);
|
|
4264
|
-
const mutationObserver = new MutationObserver(
|
|
4306
|
+
const mutationObserver = new MutationObserver((mutations) => {
|
|
4307
|
+
logMutationEntries(mutations);
|
|
4308
|
+
onChange();
|
|
4309
|
+
});
|
|
4265
4310
|
mutationObserver.observe(doc.body, {
|
|
4266
4311
|
childList: true,
|
|
4267
4312
|
subtree: true,
|
|
@@ -4369,7 +4414,7 @@ async function processHeightChange(s, newHeight) {
|
|
|
4369
4414
|
}
|
|
4370
4415
|
}
|
|
4371
4416
|
function handleHeightChange(s) {
|
|
4372
|
-
if (isBlocked(s))
|
|
4417
|
+
if (!s.running || isBlocked(s))
|
|
4373
4418
|
return;
|
|
4374
4419
|
scheduleThrottledCheck(s);
|
|
4375
4420
|
}
|
|
@@ -5582,7 +5627,7 @@ function startHeightObserver(s) {
|
|
|
5582
5627
|
cooldownMs: 1000,
|
|
5583
5628
|
startDelayMs: s.config.heightObserverStartDelayMs,
|
|
5584
5629
|
onHeightChange: (result) => {
|
|
5585
|
-
s.config?.
|
|
5630
|
+
s.config?.onHeightChange?.(result);
|
|
5586
5631
|
dispatchDimensionsEvent(result);
|
|
5587
5632
|
},
|
|
5588
5633
|
onError: (error) => {
|
|
@@ -6752,6 +6797,12 @@ const useHeatmapIframeProcessor = () => {
|
|
|
6752
6797
|
setIsDomLoaded(true);
|
|
6753
6798
|
helperRef.current?.startHeightObserver();
|
|
6754
6799
|
},
|
|
6800
|
+
onHeightChange: (height) => {
|
|
6801
|
+
if (abort.signal.aborted)
|
|
6802
|
+
return;
|
|
6803
|
+
if (height)
|
|
6804
|
+
setIframeHeight(height);
|
|
6805
|
+
},
|
|
6755
6806
|
});
|
|
6756
6807
|
}, [viewport]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
6757
6808
|
useEffect(() => {
|
|
@@ -6763,7 +6814,7 @@ const useHeatmapIframeProcessor = () => {
|
|
|
6763
6814
|
return { run, reset };
|
|
6764
6815
|
};
|
|
6765
6816
|
// ── Helpers ───────────────────────────────────────────────────────────────────
|
|
6766
|
-
function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Desktop, size, t0, onSuccess, }) {
|
|
6817
|
+
function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Desktop, size, t0, onSuccess, onHeightChange, }) {
|
|
6767
6818
|
const docWidth = size.width ?? 0;
|
|
6768
6819
|
const docHeight = size.height ?? 0;
|
|
6769
6820
|
if (docHeight === 0)
|
|
@@ -6786,6 +6837,10 @@ function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Deskt
|
|
|
6786
6837
|
iframe.style.height = `${data.height}px`;
|
|
6787
6838
|
onSuccess(data.height);
|
|
6788
6839
|
},
|
|
6840
|
+
onHeightChange: (data) => {
|
|
6841
|
+
iframe.style.height = `${data.height}px`;
|
|
6842
|
+
onHeightChange?.(data.height);
|
|
6843
|
+
},
|
|
6789
6844
|
});
|
|
6790
6845
|
}
|
|
6791
6846
|
|
package/dist/esm/index.mjs
CHANGED
|
@@ -4257,11 +4257,56 @@ function getFinalWidth(doc) {
|
|
|
4257
4257
|
* Returns a cleanup function that disconnects both observers.
|
|
4258
4258
|
*/
|
|
4259
4259
|
const logger$2 = createLogger({ enabled: false, prefix: 'IframeHeightObserver' });
|
|
4260
|
+
function logResizeEntries(entries) {
|
|
4261
|
+
for (const entry of entries) {
|
|
4262
|
+
const el = entry.target;
|
|
4263
|
+
console.log('[HeightObserver] ResizeObserver triggered:', {
|
|
4264
|
+
tag: el.tagName,
|
|
4265
|
+
id: el.id || undefined,
|
|
4266
|
+
class: el.className || undefined,
|
|
4267
|
+
scrollHeight: el.scrollHeight,
|
|
4268
|
+
offsetHeight: el.offsetHeight,
|
|
4269
|
+
contentRect: { width: entry.contentRect.width, height: entry.contentRect.height },
|
|
4270
|
+
});
|
|
4271
|
+
}
|
|
4272
|
+
}
|
|
4273
|
+
function logMutationEntries(mutations) {
|
|
4274
|
+
for (const mutation of mutations) {
|
|
4275
|
+
const el = mutation.target;
|
|
4276
|
+
console.log('[HeightObserver] MutationObserver triggered:', {
|
|
4277
|
+
type: mutation.type,
|
|
4278
|
+
tag: el.tagName,
|
|
4279
|
+
id: el.id || undefined,
|
|
4280
|
+
class: el.className || undefined,
|
|
4281
|
+
...(mutation.type === 'attributes' && { attributeName: mutation.attributeName }),
|
|
4282
|
+
...(mutation.type === 'childList' && {
|
|
4283
|
+
addedNodes: mutation.addedNodes.length,
|
|
4284
|
+
removedNodes: mutation.removedNodes.length,
|
|
4285
|
+
}),
|
|
4286
|
+
});
|
|
4287
|
+
}
|
|
4288
|
+
}
|
|
4260
4289
|
function setup(doc, onChange) {
|
|
4261
|
-
|
|
4262
|
-
|
|
4290
|
+
// Initialize as null so the first ResizeObserver callback (which fires immediately
|
|
4291
|
+
// on observe()) just sets the baseline without triggering onChange.
|
|
4292
|
+
let lastBodyHeight = null;
|
|
4293
|
+
const resizeObserver = new ResizeObserver((entries) => {
|
|
4294
|
+
const newHeight = entries[0]?.contentRect.height ?? 0;
|
|
4295
|
+
if (lastBodyHeight === null) {
|
|
4296
|
+
lastBodyHeight = newHeight;
|
|
4297
|
+
return;
|
|
4298
|
+
}
|
|
4299
|
+
if (newHeight === lastBodyHeight)
|
|
4300
|
+
return;
|
|
4301
|
+
lastBodyHeight = newHeight;
|
|
4302
|
+
logResizeEntries(entries);
|
|
4303
|
+
onChange();
|
|
4304
|
+
});
|
|
4263
4305
|
resizeObserver.observe(doc.body);
|
|
4264
|
-
const mutationObserver = new MutationObserver(
|
|
4306
|
+
const mutationObserver = new MutationObserver((mutations) => {
|
|
4307
|
+
logMutationEntries(mutations);
|
|
4308
|
+
onChange();
|
|
4309
|
+
});
|
|
4265
4310
|
mutationObserver.observe(doc.body, {
|
|
4266
4311
|
childList: true,
|
|
4267
4312
|
subtree: true,
|
|
@@ -4369,7 +4414,7 @@ async function processHeightChange(s, newHeight) {
|
|
|
4369
4414
|
}
|
|
4370
4415
|
}
|
|
4371
4416
|
function handleHeightChange(s) {
|
|
4372
|
-
if (isBlocked(s))
|
|
4417
|
+
if (!s.running || isBlocked(s))
|
|
4373
4418
|
return;
|
|
4374
4419
|
scheduleThrottledCheck(s);
|
|
4375
4420
|
}
|
|
@@ -5582,7 +5627,7 @@ function startHeightObserver(s) {
|
|
|
5582
5627
|
cooldownMs: 1000,
|
|
5583
5628
|
startDelayMs: s.config.heightObserverStartDelayMs,
|
|
5584
5629
|
onHeightChange: (result) => {
|
|
5585
|
-
s.config?.
|
|
5630
|
+
s.config?.onHeightChange?.(result);
|
|
5586
5631
|
dispatchDimensionsEvent(result);
|
|
5587
5632
|
},
|
|
5588
5633
|
onError: (error) => {
|
|
@@ -6752,6 +6797,12 @@ const useHeatmapIframeProcessor = () => {
|
|
|
6752
6797
|
setIsDomLoaded(true);
|
|
6753
6798
|
helperRef.current?.startHeightObserver();
|
|
6754
6799
|
},
|
|
6800
|
+
onHeightChange: (height) => {
|
|
6801
|
+
if (abort.signal.aborted)
|
|
6802
|
+
return;
|
|
6803
|
+
if (height)
|
|
6804
|
+
setIframeHeight(height);
|
|
6805
|
+
},
|
|
6755
6806
|
});
|
|
6756
6807
|
}, [viewport]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
6757
6808
|
useEffect(() => {
|
|
@@ -6763,7 +6814,7 @@ const useHeatmapIframeProcessor = () => {
|
|
|
6763
6814
|
return { run, reset };
|
|
6764
6815
|
};
|
|
6765
6816
|
// ── Helpers ───────────────────────────────────────────────────────────────────
|
|
6766
|
-
function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Desktop, size, t0, onSuccess, }) {
|
|
6817
|
+
function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Desktop, size, t0, onSuccess, onHeightChange, }) {
|
|
6767
6818
|
const docWidth = size.width ?? 0;
|
|
6768
6819
|
const docHeight = size.height ?? 0;
|
|
6769
6820
|
if (docHeight === 0)
|
|
@@ -6786,6 +6837,10 @@ function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Deskt
|
|
|
6786
6837
|
iframe.style.height = `${data.height}px`;
|
|
6787
6838
|
onSuccess(data.height);
|
|
6788
6839
|
},
|
|
6840
|
+
onHeightChange: (data) => {
|
|
6841
|
+
iframe.style.height = `${data.height}px`;
|
|
6842
|
+
onHeightChange?.(data.height);
|
|
6843
|
+
},
|
|
6789
6844
|
});
|
|
6790
6845
|
}
|
|
6791
6846
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"observers.d.ts","sourceRoot":"","sources":["../../../../../src/libs/iframe-processor/processors/height-observer/observers.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAE9C;
|
|
1
|
+
{"version":3,"file":"observers.d.ts","sourceRoot":"","sources":["../../../../../src/libs/iframe-processor/processors/height-observer/observers.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAE9C;AAiCD,wBAAgB,KAAK,CAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAoCrE"}
|
|
@@ -9,10 +9,16 @@ export interface IframeStyleConfig {
|
|
|
9
9
|
shopId?: string | number;
|
|
10
10
|
/** Delay (ms) before the height observer starts after DOM is loaded */
|
|
11
11
|
heightObserverStartDelayMs?: number;
|
|
12
|
+
/** Called once after initial DOM processing completes */
|
|
12
13
|
onSuccess?: (result: {
|
|
13
14
|
height: number;
|
|
14
15
|
width: number;
|
|
15
16
|
}) => void;
|
|
17
|
+
/** Called on subsequent height changes detected by the height observer */
|
|
18
|
+
onHeightChange?: (result: {
|
|
19
|
+
height: number;
|
|
20
|
+
width: number;
|
|
21
|
+
}) => void;
|
|
16
22
|
onError?: (error: Error) => void;
|
|
17
23
|
}
|
|
18
24
|
export interface IframeDimensionsDetail {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iframe-types.d.ts","sourceRoot":"","sources":["../../../../src/libs/iframe-processor/shared/iframe-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,UAAU,EAAE,WAAW,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,wFAAwF;IACxF,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,uEAAuE;IACvE,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf"}
|
|
1
|
+
{"version":3,"file":"iframe-types.d.ts","sourceRoot":"","sources":["../../../../src/libs/iframe-processor/shared/iframe-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,UAAU,EAAE,WAAW,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,wFAAwF;IACxF,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,uEAAuE;IACvE,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,yDAAyD;IACzD,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,0EAA0E;IAC1E,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHeatmapIframeProcessor.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapIframeProcessor.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useHeatmapIframeProcessor.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapIframeProcessor.ts"],"names":[],"mappings":"AAiCA,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,6BA6E5C,CAAC"}
|