@gemx-dev/clarity-visualize 0.8.68 → 0.8.70

package/build/clarity.visualize.module.js

@@ -2334,11 +2334,11 @@ class Visualizer {
             if (decoded && decoded.length > 0 && target) {
                 try {
                     // Flatten the payload and parse all events out of them, sorted by time
-                    let merged = this.merge(decoded);
+                    let merged = this.mergeForHtml(decoded);
                     yield this.setup(target, { version: decoded[0].envelope.version, dom: merged.dom, useproxy, portalCanvasId });
                     // Render all mutations on top of the initial markup
-                    while (merged.events.length > 0) {
-                        let entry = merged.events.shift();
+                    for (let i = 0; i < merged.events.length; i++) {
+                        let entry = merged.events[i];
                         switch (entry.event) {
                             case 45 /* Data.Event.StyleSheetAdoption */:
                             case 46 /* Data.Event.StyleSheetUpdate */:
@@ -2424,6 +2424,34 @@ class Visualizer {
             merged.events = merged.events.sort(this.sortEvents);
             return merged;
         };
+        this.mergeForHtml = (decoded) => {
+            let merged = { timestamp: null, envelope: null, dom: null, events: [] };
+            decoded = decoded.sort(this.sortPayloads);
+            this.enrich = this.enrich || new EnrichHelper();
+            helper.selector.config(this._excludeClassNames);
+            this.enrich.reset();
+            for (let payload of decoded) {
+                merged.timestamp = merged.timestamp ? merged.timestamp : payload.timestamp;
+                merged.envelope = payload.envelope;
+                const domEntries = payload["dom" /* Constant.Dom */];
+                if (Array.isArray(domEntries)) {
+                    for (let entry of domEntries) {
+                        let enriched = this.enrich.selectors(entry);
+                        if (entry.event === 5 /* Data.Event.Discover */) {
+                            merged.dom = enriched;
+                        }
+                        else if (entry.event === 6 /* Data.Event.Mutation */ ||
+                            entry.event === 45 /* Data.Event.StyleSheetAdoption */ ||
+                            entry.event === 46 /* Data.Event.StyleSheetUpdate */ ||
+                            entry.event === 51 /* Data.Event.CustomElement */) {
+                            merged.events.push(entry);
+                        }
+                    }
+                }
+            }
+            merged.events = merged.events.sort(this.sortEvents);
+            return merged;
+        };
         this.setup = (target, options) => __awaiter(this, void 0, void 0, function* () {
             this.reset();
             if (options.excludeClassNames) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemx-dev/clarity-visualize",
-  "version": "0.8.68",
+  "version": "0.8.70",
   "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.68"
+    "@gemx-dev/clarity-decode": "^0.8.70"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",