@skhema/embed 0.1.1 → 0.1.3

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 {
     }
   }
 }
@@ -952,6 +1031,7 @@ class SkhemaComponent extends HTMLElement {
     return [
       "component-type",
       "contributor-id",
+      "contributor-name",
       "title",
       "theme",
       "track-analytics",
@@ -966,7 +1046,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);
@@ -1085,7 +1171,8 @@ class SkhemaComponent extends HTMLElement {
     const componentLabel = getComponentTypeLabel(component_type);
     const acronym = getComponentTypeAcronym(component_type);
     const colors = COMPONENT_COLORS[component_type];
-    const displayName = this.formatContributorName(contributor_id);
+    const contributorName = this.getAttribute("contributor-name");
+    const displayName = contributorName || this.formatContributorName(contributor_id);
     const themeAttribute = this.getAttribute("theme") || "auto";
     const actualTheme = this.getActualTheme(themeAttribute);
     const redirectUrl = generateComponentRedirectUrl(
@@ -1643,6 +1730,7 @@ class SkhemaElement extends HTMLElement {
     return [
       "element-type",
       "contributor-id",
+      "contributor-name",
       "content",
       "source-url",
       "theme",
@@ -1763,7 +1851,8 @@ class SkhemaElement extends HTMLElement {
     );
     const themeAttribute = this.getAttribute("theme") || "auto";
     const actualTheme = this.getActualTheme(themeAttribute);
-    const displayName = this.formatContributorName(contributor_id);
+    const contributorName = this.getAttribute("contributor-name");
+    const displayName = contributorName || this.formatContributorName(contributor_id);
     const componentType = resolveComponentType(element_type);
     const acronym = getComponentTypeAcronym(componentType);
     const colors = COMPONENT_COLORS[componentType];