@gemx-dev/clarity-visualize 0.8.70 → 0.8.71

package/build/clarity.visualize.module.js

@@ -1668,6 +1668,35 @@ class LayoutHelper {
             // Reset dialog render state for new render cycle
             resetDialogRenderState();
         };
+        /** Rebuild internal node/hash maps from a pre-rendered document (used for HTML cache restore). */
+        this.hydrate = (doc) => {
+            this.nodes = {};
+            this.hashMapAlpha = {};
+            this.hashMapBeta = {};
+            // querySelectorAll does not include documentElement itself
+            const htmlEl = doc.documentElement;
+            if (htmlEl === null || htmlEl === void 0 ? void 0 : htmlEl.hasAttribute("data-clarity-id" /* Constant.Id */)) {
+                const id = parseInt(htmlEl.getAttribute("data-clarity-id" /* Constant.Id */), 10);
+                if (!isNaN(id) && id > 0) {
+                    this.nodes[id] = htmlEl;
+                }
+            }
+            const elements = doc.querySelectorAll(`[${"data-clarity-id" /* Constant.Id */}]`);
+            for (const el of Array.from(elements)) {
+                const id = parseInt(el.getAttribute("data-clarity-id" /* Constant.Id */), 10);
+                if (!isNaN(id) && id > 0) {
+                    this.nodes[id] = el;
+                    const ha = el.getAttribute("data-clarity-hashalpha" /* Constant.HashAlpha */);
+                    const hb = el.getAttribute("data-clarity-hashbeta" /* Constant.HashBeta */);
+                    if (ha) {
+                        this.hashMapAlpha[ha] = el;
+                    }
+                    if (hb) {
+                        this.hashMapBeta[hb] = el;
+                    }
+                }
+            }
+        };
         this.get = (hash) => {
             if (hash in this.hashMapBeta && this.hashMapBeta[hash].isConnected) {
                 return this.hashMapBeta[hash];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemx-dev/clarity-visualize",
-  "version": "0.8.70",
+  "version": "0.8.71",
   "description": "Clarity visualize",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -9,7 +9,7 @@
   "unpkg": "build/clarity.visualize.min.js",
   "types": "types/index.d.ts",
   "dependencies": {
-    "@gemx-dev/clarity-decode": "^0.8.70"
+    "@gemx-dev/clarity-decode": "^0.8.71"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

package/src/layout.ts

@@ -146,6 +146,30 @@ export class LayoutHelper {
         dialogCustom.resetDialogRenderState();
     }
 
+    /** Rebuild internal node/hash maps from a pre-rendered document (used for HTML cache restore). */
+    public hydrate = (doc: Document): void => {
+        this.nodes = {};
+        this.hashMapAlpha = {};
+        this.hashMapBeta = {};
+        // querySelectorAll does not include documentElement itself
+        const htmlEl = doc.documentElement;
+        if (htmlEl?.hasAttribute(Constant.Id)) {
+            const id = parseInt(htmlEl.getAttribute(Constant.Id), 10);
+            if (!isNaN(id) && id > 0) { this.nodes[id] = htmlEl; }
+        }
+        const elements = doc.querySelectorAll(`[${Constant.Id}]`);
+        for (const el of Array.from(elements)) {
+            const id = parseInt(el.getAttribute(Constant.Id), 10);
+            if (!isNaN(id) && id > 0) {
+                this.nodes[id] = el;
+                const ha = el.getAttribute(Constant.HashAlpha);
+                const hb = el.getAttribute(Constant.HashBeta);
+                if (ha) { this.hashMapAlpha[ha] = el as HTMLElement; }
+                if (hb) { this.hashMapBeta[hb] = el as HTMLElement; }
+            }
+        }
+    }
+
     public get = (hash) => {
         if (hash in this.hashMapBeta && this.hashMapBeta[hash].isConnected) {
             return this.hashMapBeta[hash];

package/types/visualize.d.ts

@@ -31,6 +31,13 @@ export class Visualizer {
     configure: (opts: { excludeClassNames?: string[] }) => void;
     time: () => number;
     get: (hash: string) => HTMLElement;
+    layout: {
+        styleChange: (entry: Layout.StyleSheetEvent) => void;
+        customElement: (entry: Layout.CustomElementEvent) => void;
+        markup: (event: Layout.DomEvent, useproxy?: LinkHandler) => void;
+    };
+    mergeForHtml: (decoded: Data.DecodedPayload[]) => MergedPayload;
+    shortCircuitRendering: (strategy: ShortCircuitStrategy, domEvent: Layout.DomEvent, hash: string | null) => boolean;
 }
 
 export type ResizeHandler  = (width: number, height: number) => void;