@skhema/embed 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -265,10 +265,10 @@ class AnalyticsBatcher {
   }
   async sendComponentEmbeds(embeds) {
     if (embeds.length === 0) return;
-    try {
-      const payload = {
-        action: "component_embed",
-        events: embeds.map((embed) => ({
+    for (const embed of embeds) {
+      try {
+        const payload = {
+          action: "component_embed",
           contributor_id: embed.contributorId,
           component_type: embed.componentType,
           component_hash: embed.componentHash,
@@ -281,11 +281,11 @@ class AnalyticsBatcher {
           page_url: embed.pageUrl,
           page_title: embed.pageTitle || "",
           user_agent: embed.userAgent || ""
-        }))
-      };
-      await sendWithRetry(ANALYTICS_ENDPOINT, payload, "json");
-    } catch (error) {
-      console.debug("Component embed tracking failed:", error);
+        };
+        await sendWithRetry(ANALYTICS_ENDPOINT, payload, "json");
+      } catch (error) {
+        console.debug("Component embed tracking failed:", error);
+      }
     }
   }
   async sendComponentClicks(clicks) {
@@ -312,11 +312,90 @@ class AnalyticsBatcher {
       }
     }
   }
-  // Ensure batch is sent when page unloads
+  // Ensure batch is sent when page unloads.
+  // Uses sendBeacon for reliability — async fetch won't complete during unload.
   flush() {
-    const hasItems = this.batch.embeds.length > 0 || this.batch.clicks.length > 0 || this.batch.componentEmbeds.length > 0 || this.batch.componentClicks.length > 0;
-    if (hasItems) {
-      this.sendBatch();
+    if (this.batchTimeout) {
+      clearTimeout(this.batchTimeout);
+      this.batchTimeout = null;
+    }
+    const currentBatch = { ...this.batch };
+    this.batch = {
+      embeds: [],
+      clicks: [],
+      componentEmbeds: [],
+      componentClicks: []
+    };
+    if (currentBatch.embeds.length > 0) {
+      const payload = {
+        action: "embed",
+        events: currentBatch.embeds.map((embed) => ({
+          contributor_id: embed.contributorId,
+          element_type: embed.elementType,
+          content_hash: embed.contentHash,
+          content: embed.content,
+          page_url: embed.pageUrl,
+          page_title: embed.pageTitle || "",
+          user_agent: embed.userAgent || ""
+        }))
+      };
+      this.sendViaBeacon(payload);
+    }
+    for (const click of currentBatch.clicks) {
+      this.sendViaBeacon({
+        action: "click",
+        contributor_id: click.contributor_id,
+        content_hash: click.content_hash,
+        source_url: click.source_url,
+        element_type: click.element_type
+      });
+    }
+    for (const embed of currentBatch.componentEmbeds) {
+      this.sendViaBeacon({
+        action: "component_embed",
+        contributor_id: embed.contributorId,
+        component_type: embed.componentType,
+        component_hash: embed.componentHash,
+        title: embed.title,
+        elements: embed.elements.map((el) => ({
+          element_type: el.elementType,
+          content: el.content,
+          content_hash: el.contentHash
+        })),
+        page_url: embed.pageUrl,
+        page_title: embed.pageTitle || "",
+        user_agent: embed.userAgent || ""
+      });
+    }
+    for (const click of currentBatch.componentClicks) {
+      this.sendViaBeacon({
+        action: "component_click",
+        contributor_id: click.contributor_id,
+        component_type: click.component_type,
+        component_hash: click.component_hash,
+        title: click.title,
+        source_url: click.source_url
+      });
+    }
+  }
+  sendViaBeacon(payload) {
+    try {
+      if (typeof navigator !== "undefined" && navigator.sendBeacon) {
+        navigator.sendBeacon(
+          ANALYTICS_ENDPOINT,
+          new Blob([JSON.stringify(payload)], { type: "application/json" })
+        );
+      } else {
+        fetch(ANALYTICS_ENDPOINT, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+          credentials: "omit",
+          keepalive: true
+        }).catch(() => {
+        });
+      }
+    } catch {
     }
   }
 }
@@ -966,7 +1045,13 @@ class SkhemaComponent extends HTMLElement {
       this.addEventListener("skhema:element-ready", () => {
         this.scheduleRender();
       });
-      this.scheduleRender();
+      if (typeof customElements.whenDefined === "function") {
+        customElements.whenDefined("skhema-element").then(() => {
+          this.scheduleRender();
+        });
+      } else {
+        this.scheduleRender();
+      }
       this.setupThemeListeners();
     } catch (error) {
       this.renderError("Failed to initialize component", error);