@gemx-dev/heatmap-react 3.5.92-dev.8 → 3.5.92-dev.9

package/dist/esm/hooks/viz-render/useHeatmapRender.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHeatmapRender.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapRender.ts"],"names":[],"mappings":"AAiBA,UAAU,uBAAuB;IAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAUD,eAAO,MAAM,gBAAgB,QAAO,uBA+DnC,CAAC"}
+{"version":3,"file":"useHeatmapRender.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapRender.ts"],"names":[],"mappings":"AAgCA,UAAU,uBAAuB;IAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAaD,eAAO,MAAM,gBAAgB,QAAO,uBAoEnC,CAAC"}

package/dist/esm/index.js

@@ -3904,6 +3904,85 @@ function useVizLiveIframeMsg(options = {}) {
     };
 }
 
+/**
+ * Performance tracker — measures render pipeline timings and stores results
+ * in `window.__gemxPerf` for inspection in DevTools.
+ *
+ * Usage:
+ *   perf.startSession('render-1');
+ *   const t = perf.mark('viewport.run');
+ *   perf.measure('viewport.run', t);
+ *   perf.endSession();
+ *
+ *   // In DevTools:
+ *   window.__gemxPerf.latest
+ *   window.__gemxPerf.sessions
+ */
+const s = {
+    enabled: true,
+    current: null,
+    sessions: [],
+    maxSessions: 20,
+};
+// ── Functions ─────────────────────────────────────────────────────────────────
+function startSession(id) {
+    if (!s.enabled)
+        return;
+    s.current = { id, startedAt: performance.now(), entries: [] };
+}
+function endSession() {
+    if (!s.enabled || !s.current)
+        return null;
+    const session = s.current;
+    session.total = performance.now() - session.startedAt;
+    s.sessions = [session, ...s.sessions].slice(0, s.maxSessions);
+    s.current = null;
+    flush();
+    return session;
+}
+/** Record a point-in-time mark. Returns `performance.now()` for use with measure(). */
+function mark$1(label) {
+    const now = performance.now();
+    if (s.enabled && s.current) {
+        s.current.entries.push({ label, t: now - s.current.startedAt });
+    }
+    return now;
+}
+/** Record a duration from a previous mark() timestamp. */
+function measure$1(label, t0) {
+    const duration = performance.now() - t0;
+    if (s.enabled && s.current) {
+        s.current.entries.push({ label, t: t0 - s.current.startedAt, duration });
+    }
+    return duration;
+}
+function getReport() {
+    return {
+        sessions: s.sessions,
+        latest: s.sessions[0] ?? null,
+    };
+}
+function clear$1() {
+    s.current = null;
+    s.sessions = [];
+    if (typeof window !== 'undefined')
+        delete window.__gemxPerf;
+}
+function enable$1() {
+    s.enabled = true;
+}
+function disable$1() {
+    s.enabled = false;
+}
+// ── Internal ──────────────────────────────────────────────────────────────────
+function flush() {
+    if (typeof window === 'undefined')
+        return;
+    window.__gemxPerf = getReport();
+}
+// ── Singleton export ──────────────────────────────────────────────────────────
+const perf = { startSession, endSession, mark: mark$1, measure: measure$1, getReport, clear: clear$1, enable: enable$1, disable: disable$1 };
+
 /**
  * DOM observation setup — ResizeObserver + MutationObserver.
  * Returns a cleanup function that disconnects both observers.
@@ -4644,15 +4723,20 @@ const HEIGHT_RELATED_PROPERTIES = ['height', 'min-height', 'max-height', 'top',
 let elementsWithViewportUnits = new Set();
 let originalValues = new WeakMap();
 // ─── Regex ────────────────────────────────────────────────────────────────────
-/** Fresh instance every call — avoids shared lastIndex state with the g flag. */
+/**
+ * Stateless test-only regex (no `g` flag) — safe to share across calls.
+ * Used exclusively for `.test()` checks before doing a full replacement.
+ */
+const VIEWPORT_RE_TEST = /([-.?\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/i;
+/** Fresh `g`-flagged instance for String.replace() callbacks. */
 function createRegex() {
-    return /([-.\\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
+    return /([-.?\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
 }
 // ─── Unit conversion ─────────────────────────────────────────────────────────
 function px(value) {
     return `${value.toFixed(2)}px`;
 }
-function getUnitMap(ctx) {
+function buildUnitMap(ctx) {
     return {
         vh: ctx.targetHeight,
         svh: ctx.targetHeight,
@@ -4664,15 +4748,15 @@ function getUnitMap(ctx) {
         dvw: ctx.targetWidth,
     };
 }
-function toPx(value, unit, ctx) {
+function toPx(value, unit, unitMap, targetHeight) {
     const u = unit.toLowerCase();
     if (u === '%')
-        return (value / 100) * ctx.targetHeight;
-    return (value / 100) * (getUnitMap(ctx)[u] ?? 0);
+        return (value / 100) * targetHeight;
+    return (value / 100) * (unitMap[u] ?? 0);
 }
-function convert(value, unit, ctx) {
+function convert(value, unit, unitMap, targetHeight) {
     const num = parseFloat(value);
-    return isNaN(num) ? value : px(toPx(num, unit, ctx));
+    return isNaN(num) ? value : px(toPx(num, unit, unitMap, targetHeight));
 }
 function isHeightRelated(prop) {
     return HEIGHT_RELATED_PROPERTIES.includes(prop);
@@ -4687,11 +4771,13 @@ function extractProperty(cssText, matchOffset) {
     return m ? m[1].toLowerCase() : '';
 }
 function replaceInText(cssText, ctx) {
+    const unitMap = buildUnitMap(ctx);
+    const { targetHeight } = ctx;
     return cssText.replace(createRegex(), (match, value, unit, offset) => {
         if (unit === '%') {
-            return isHeightRelated(extractProperty(cssText, offset)) ? convert(value, unit, ctx) : match;
+            return isHeightRelated(extractProperty(cssText, offset)) ? convert(value, unit, unitMap, targetHeight) : match;
         }
-        return convert(value, unit, ctx);
+        return convert(value, unit, unitMap, targetHeight);
     });
 }
 // ─── Element tracking ─────────────────────────────────────────────────────────
@@ -4720,7 +4806,7 @@ function processInlineStyles(ctx) {
     let count = 0;
     ctx.doc.querySelectorAll('[style]').forEach((el) => {
         const style = el.getAttribute('style');
-        if (style && createRegex().test(style)) {
+        if (style && VIEWPORT_RE_TEST.test(style)) {
             elementsWithViewportUnits.add(el);
             el.setAttribute('style', replaceInText(style, ctx));
             count++;
@@ -4733,7 +4819,7 @@ function processStyleTags(ctx) {
     let count = 0;
     ctx.doc.querySelectorAll('style').forEach((tag) => {
         const css = tag.textContent || '';
-        if (createRegex().test(css)) {
+        if (VIEWPORT_RE_TEST.test(css)) {
             tag.textContent = replaceInText(css, ctx);
             count++;
         }
@@ -4751,7 +4837,7 @@ function processRule(rule, ctx) {
         for (let i = 0; i < style.length; i++) {
             const prop = style[i];
             const value = style.getPropertyValue(prop);
-            if (value && createRegex().test(value)) {
+            if (value && VIEWPORT_RE_TEST.test(value)) {
                 hasVp = true;
                 propOriginals.set(prop, value);
                 style.setProperty(prop, replaceInText(value, ctx), style.getPropertyPriority(prop));
@@ -4762,8 +4848,11 @@ function processRule(rule, ctx) {
             trackSelector(cssRule.selectorText, propOriginals, ctx);
     }
     if ('cssRules' in rule) {
-        for (const r of Array.from(rule.cssRules || [])) {
-            count += processRule(r, ctx);
+        const nested = rule.cssRules;
+        if (nested) {
+            for (let i = 0; i < nested.length; i++) {
+                count += processRule(nested[i], ctx);
+            }
         }
     }
     return count;
@@ -4771,25 +4860,29 @@ function processRule(rule, ctx) {
 /** Processes only inline <style> sheets. Linked sheets are handled by processLinkedStylesheets. */
 function processStylesheets(ctx) {
     let total = 0;
-    Array.from(ctx.doc.styleSheets).forEach((sheet) => {
+    const sheets = ctx.doc.styleSheets;
+    for (let i = 0; i < sheets.length; i++) {
+        const sheet = sheets[i];
         if (sheet.href)
-            return; // deferred to processLinkedStylesheets
+            continue; // deferred to processLinkedStylesheets
         try {
-            for (const rule of Array.from(sheet.cssRules || [])) {
-                total += processRule(rule, ctx);
+            const rules = sheet.cssRules;
+            for (let j = 0; j < rules.length; j++) {
+                total += processRule(rules[j], ctx);
             }
         }
         catch (e) {
             logger$1.warn('Cannot read stylesheet (CORS?):', e.message);
         }
-    });
+    }
     logger$1.log(`Replaced ${total} rules in inline stylesheets`);
     return total;
 }
 async function processLinkedStylesheets(ctx) {
     const links = ctx.doc.querySelectorAll('link[rel="stylesheet"]');
     let count = 0;
-    for (const link of Array.from(links)) {
+    for (let i = 0; i < links.length; i++) {
+        const link = links[i];
         // Skip cross-origin — already in browser CSSOM, handled via processStylesheets
         if (link.href && !link.href.startsWith(ctx.win.location.origin)) {
             logger$1.log('Skipping cross-origin CSS:', link.href);
@@ -4798,7 +4891,7 @@ async function processLinkedStylesheets(ctx) {
         try {
             const res = await fetch(link.href);
             let css = await res.text();
-            if (createRegex().test(css)) {
+            if (VIEWPORT_RE_TEST.test(css)) {
                 css = replaceInText(css, ctx);
                 const style = ctx.doc.createElement('style');
                 style.textContent = css;
@@ -5057,35 +5150,52 @@ function configure(debug) {
 }
 async function run$1(ctx, activeGlobal, shopFix) {
     // ── Phase 1: beforeProcess ────────────────────────────────────────────────
+    const t1 = perf.mark('phase1.beforeProcess');
     for (const fix of activeGlobal) {
         if (fix.beforeProcess) {
             logger.log(`[beforeProcess] ${fix.name}`);
+            const t = perf.mark(`phase1.${fix.name}.beforeProcess`);
             await fix.beforeProcess(ctx);
+            perf.measure(`phase1.${fix.name}.beforeProcess`, t);
         }
     }
     if (shopFix?.beforeProcess) {
         logger.log('[beforeProcess] shop');
+        const t = perf.mark('phase1.shop.beforeProcess');
         await shopFix.beforeProcess(ctx);
+        perf.measure('phase1.shop.beforeProcess', t);
     }
+    perf.measure('phase1.beforeProcess', t1);
     // ── Phase 2: process ──────────────────────────────────────────────────────
+    const t2 = perf.mark('phase2.process');
     for (const fix of activeGlobal) {
         if (fix.process) {
             logger.log(`[process] ${fix.name}`);
+            const t = perf.mark(`phase2.${fix.name}.process`);
             await fix.process(ctx);
+            perf.measure(`phase2.${fix.name}.process`, t);
         }
     }
+    perf.measure('phase2.process', t2);
     // ── Phase 3: afterProcess ─────────────────────────────────────────────────
+    const t3 = perf.mark('phase3.afterProcess');
     if (shopFix?.afterProcess) {
         logger.log('[afterProcess] shop');
+        const t = perf.mark('phase3.shop.afterProcess');
         await shopFix.afterProcess(ctx);
+        perf.measure('phase3.shop.afterProcess', t);
     }
     for (const fix of activeGlobal) {
         if (fix.afterProcess) {
             logger.log(`[afterProcess] ${fix.name}`);
+            const t = perf.mark(`phase3.${fix.name}.afterProcess`);
             await fix.afterProcess(ctx);
+            perf.measure(`phase3.${fix.name}.afterProcess`, t);
         }
     }
+    perf.measure('phase3.afterProcess', t3);
     // ── Phase 4: getDimensions ────────────────────────────────────────────────
+    const t4 = perf.mark('phase4.getDimensions');
     return new Promise((resolve) => {
         requestAnimationFrame(() => {
             let dimensions = null;
@@ -5110,6 +5220,7 @@ async function run$1(ctx, activeGlobal, shopFix) {
                 dimensions = { height: getFinalHeight(ctx.doc, ctx.win), width: getFinalWidth(ctx.doc) };
             }
             logger.log('Final dimensions:', dimensions);
+            perf.measure('phase4.getDimensions', t4);
             resolve(dimensions);
         });
     });
@@ -5237,10 +5348,14 @@ async function run(s) {
     const activeGlobal = getActiveFixes(ctx);
     if (activeGlobal.length > 0)
         s.logger.log(`Active global fixes: ${activeGlobal.map((f) => f.name).join(', ')}`);
+    const tRun = perf.mark('viewport.run');
     try {
-        return await run$1(ctx, activeGlobal, s.shopFix);
+        const result = await run$1(ctx, activeGlobal, s.shopFix);
+        perf.measure('viewport.run', tRun);
+        return result;
     }
     catch (err) {
+        perf.measure('viewport.run', tRun);
         s.logger.error('Critical error:', err);
         return { height: s.doc.body?.scrollHeight || 1000, width: s.doc.body?.scrollWidth || 1000 };
     }
@@ -5289,16 +5404,23 @@ async function process(s) {
         s.config.onError?.(new Error('Cannot access iframe document'));
         return;
     }
+    const sessionId = `render-${Date.now()}`;
+    perf.startSession(sessionId);
+    const t0 = perf.mark('orchestrator.process');
     try {
         s.logger.log('Processing viewport units...');
         s.viewportReplacer.start(s.iframe, s.config);
         s.navigationBlocker.start(s.iframe, { debug: s.config.debug });
         const result = await s.viewportReplacer.run();
+        perf.measure('orchestrator.process', t0);
+        perf.endSession();
         s.logger.log('Process completed:', result);
         s.config.onSuccess?.(result);
         dispatchDimensionsEvent(result);
     }
     catch (error) {
+        perf.measure('orchestrator.process', t0);
+        perf.endSession();
         s.logger.error('Failed to process:', error);
         s.config.onError?.(error);
     }
@@ -5792,6 +5914,17 @@ class GXVisualizer extends Visualizer {
     };
 }
 
+// ── Performance timing ────────────────────────────────────────────────────────
+function mark(label) {
+    const t = performance.now();
+    console.log(`[Render] ⏱ ${label}`);
+    return t;
+}
+function measure(label, startMs) {
+    const ms = (performance.now() - startMs).toFixed(1);
+    console.log(`[Render] ✅ ${label} — ${ms}ms`);
+}
+// ── Hook ──────────────────────────────────────────────────────────────────────
 const useHeatmapRender = () => {
     const viewId = useViewIdContext();
     const data = useHeatmapDataContext((s) => s.data);
@@ -5809,6 +5942,7 @@ const useHeatmapRender = () => {
             return;
         if (!payloads || payloads.length === 0)
             return;
+        const t0 = mark('renderHeatmap start');
         const visualizer = vizRef ?? new GXVisualizer();
         if (!vizRef)
             setVizRef(visualizer);
@@ -5816,12 +5950,15 @@ const useHeatmapRender = () => {
         const iframe = iframeRef.current;
         if (!iframe?.contentWindow)
             return;
+        const tHtml = mark('visualizer.html start');
         await visualizer.html(payloads, iframe.contentWindow, viewId);
+        measure('visualizer.html', tHtml);
         startIframe({
             helperRef,
             iframe,
             deviceType,
             size: { width: contentWidth, height: wrapperHeight },
+            t0,
             onSuccess: (height) => {
                 if (height)
                     setIframeHeight(height);
@@ -5849,12 +5986,14 @@ const useHeatmapRender = () => {
         iframeRef,
     };
 };
-function startIframe({ helperRef, iframe, deviceType = EDeviceType.Desktop, size, onSuccess }) {
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function startIframe({ helperRef, iframe, deviceType = EDeviceType.Desktop, size, t0, onSuccess }) {
     const docWidth = size.width ?? 0;
     const docHeight = size.height ?? 0;
     if (docHeight === 0)
         return;
     helperRef.current?.stop();
+    const tHelper = mark('IframeHelper.start');
     const helper = createIframeHelper();
     helperRef.current = helper;
     helper.start({
@@ -5864,6 +6003,8 @@ function startIframe({ helperRef, iframe, deviceType = EDeviceType.Desktop, size
         iframe,
         debug: true,
         onSuccess: (data) => {
+            measure('IframeHelper processing', tHelper);
+            measure('Total render', t0);
             iframe.style.height = `${data.height}px`;
             onSuccess(data.height);
         },