@gemx-dev/clarity-visualize 0.8.67 → 0.8.68

package/package.json

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

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/tsconfig.json

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