@gemx-dev/clarity-visualize 0.8.67 → 0.8.69

package/src/layout.ts

@@ -107,7 +107,7 @@ const imageMaskedSvg = {
 /* END imageMaskedSvgs */
 
 export class LayoutHelper {
-    static TIMEOUT = 3000;
+    static TIMEOUT = 7000;
 
     primaryHtmlNodeId: number | null = null;
     isMobile: boolean;
@@ -249,8 +249,17 @@ export class LayoutHelper {
     }
 
     public customElement = (event: DecodedLayout.CustomElementEvent): void => {
-        if (!this.state.window.customElements.get(event.data.name)) {
-            this.state.window.customElements.define(event.data.name, class extends (this.state.window as typeof window).HTMLElement {});
+        const tagName = event.data.name;
+        if (!this.state.window.customElements.get(tagName)) {
+            try {
+                // Use eval to create class in target window context (avoids ES5 transpilation issues)
+                const EmptyElement = (this.state.window as any).eval(
+                    '(class extends HTMLElement { constructor() { super(); } })'
+                );
+                this.state.window.customElements.define(tagName, EmptyElement);
+            } catch (e) {
+                console.error(`Failed to define custom element ${tagName}:`, e);
+            }
         }
     }
 

package/src/visualizer.ts

@@ -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;
     }
 
+    private 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/tsconfig.json

@@ -1,6 +1,7 @@
 {
     "extends": "../../tsconfig.json",
     "compilerOptions": {
+        "target": "es6",
         "baseUrl": ".",
         "paths": {
             "@src/*": ["src/*"],