@gemx-dev/clarity-visualize 0.8.68 → 0.8.70

package/src/visualizer.ts

@@ -38,7 +38,7 @@ export class Visualizer implements VisualizerType {
         return this.layout?.get(hash);
     }
 
-    private shortCircuitRendering = (strategy: ShortCircuitStrategy, domEvent: Layout.DomEvent, hash: string) => {
+    public shortCircuitRendering = (strategy: ShortCircuitStrategy, domEvent: Layout.DomEvent, hash: string) => {
         switch (strategy) {
             case ShortCircuitStrategy.HashFirstTimestamp:
                 return this.layout.exists(hash);
@@ -64,11 +64,11 @@ export class Visualizer implements VisualizerType {
         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);
                 await 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 Data.Event.StyleSheetAdoption:
                         case Data.Event.StyleSheetUpdate:
@@ -154,6 +154,38 @@ export class Visualizer implements VisualizerType {
         return merged;
     }
 
+    public mergeForHtml = (decoded: DecodedData.DecodedPayload[]): MergedPayload => {
+        let merged: MergedPayload = { 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[Constant.Dom];
+            if (Array.isArray(domEntries)) {
+                for (let entry of domEntries) {
+                    let enriched = this.enrich.selectors(entry);
+                    if (entry.event === Data.Event.Discover) {
+                        merged.dom = enriched;
+                    } else if (
+                        entry.event === Data.Event.Mutation ||
+                        entry.event === Data.Event.StyleSheetAdoption ||
+                        entry.event === Data.Event.StyleSheetUpdate ||
+                        entry.event === Data.Event.CustomElement
+                    ) {
+                        merged.events.push(entry);
+                    }
+                }
+            }
+        }
+        merged.events = merged.events.sort(this.sortEvents);
+        return merged;
+    }
+
     public setup = async (target: Window, options: Options): Promise<Visualizer> => {
         this.reset();
         if (options.excludeClassNames) {

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import { MergedPayload, ResizeHandler, Visualize, Visualizer, ShortCircuitStrategy } from "./visualize";
+import { MergedPayload, ResizeHandler, Visualize, Visualizer, ShortCircuitStrategy, Options, PlaybackState, LinkHandler, ErrorLogger, Activity, ScrollMapInfo } from "./visualize";
 import { Data, Diagnostic, Interaction, Layout } from "@gemx-dev/clarity-decode"
 
 /**
@@ -6,5 +6,4 @@ import { Data, Diagnostic, Interaction, Layout } from "@gemx-dev/clarity-decode"
  */
 declare const visualize: Visualize;
 
-export { visualize, Visualizer, Data, Diagnostic, Interaction, Layout, MergedPayload, ResizeHandler, ShortCircuitStrategy };
-
+export { visualize, Visualizer, Data, Diagnostic, Interaction, Layout, MergedPayload, ResizeHandler, ShortCircuitStrategy, Options, PlaybackState, LinkHandler, ErrorLogger, Activity, ScrollMapInfo };

package/types/visualize.d.ts

@@ -19,6 +19,7 @@ export interface Visualize {
 
 export class Visualizer {
     readonly state: PlaybackState;
+    renderTime: number;
     dom: (event: Layout.DomEvent) => Promise<void>;
     html: (decoded: Data.DecodedPayload[], target: Window, portalCanvasId?: string, hash?: string, useproxy?: LinkHandler, logerror?: ErrorLogger, shortCircuitStrategy?: ShortCircuitStrategy) => Promise<Visualizer>;
     clickmap: (activity?: Activity) => void;