@amplifyup/sdk 0.1.19 → 0.1.21

package/dist/index.mjs

@@ -359,6 +359,15 @@ var AmplifyUpSDK = class {
     this.componentViewObservers = [];
     this.componentViewSeen = /* @__PURE__ */ new Set();
     this.pageEngagementActive = false;
+    /** Path of the last page() / routeChange — avoids duplicate SPA fires. */
+    this.lastTrackedPath = null;
+    this.historyHooksInstalled = false;
+    this.pageEngagementState = {
+      reached: /* @__PURE__ */ new Set(),
+      visibleMs: 0,
+      visibleSince: null,
+      lastDwellSecondsSent: 0
+    };
     this.adapter = adapter || new AWSAdapter();
     if (typeof window !== "undefined") {
       this.isVisualEditorMode = this.detectVisualEditorMode();
@@ -531,7 +540,9 @@ var AmplifyUpSDK = class {
           this.initialPageSent = true;
           const url = window.location.pathname;
           this.page(url);
+          this.lastTrackedPath = url;
           this.setupPageEngagement();
+          this.installHistoryHooks();
         }
       }
       if (this.config?.debug && this.initialized) {
@@ -574,16 +585,18 @@ var AmplifyUpSDK = class {
   }
   /**
    * Automatic page-level Scroll Depth + Time on Page (dwell heartbeat).
+   * State lives on the instance so SPA route changes can reset milestones.
    */
   setupPageEngagement() {
     if (typeof window === "undefined" || typeof document === "undefined") return;
     if (this.isPreviewMode() || this.pageEngagementActive) return;
     this.pageEngagementActive = true;
     const milestones = [25, 50, 75, 100];
-    const reached = /* @__PURE__ */ new Set();
-    let visibleMs = 0;
-    let visibleSince = document.visibilityState === "visible" ? Date.now() : null;
-    let lastDwellSecondsSent = 0;
+    const state = this.pageEngagementState;
+    state.reached = /* @__PURE__ */ new Set();
+    state.visibleMs = 0;
+    state.visibleSince = document.visibilityState === "visible" ? Date.now() : null;
+    state.lastDwellSecondsSent = 0;
     let scrollRaf = null;
     const path = () => this.currentPath();
     const measureScrollPercent = () => {
@@ -605,8 +618,8 @@ var AmplifyUpSDK = class {
       if (this.isPreviewMode()) return;
       const pct = measureScrollPercent();
       for (const milestone of milestones) {
-        if (pct >= milestone && !reached.has(milestone)) {
-          reached.add(milestone);
+        if (pct >= milestone && !state.reached.has(milestone)) {
+          state.reached.add(milestone);
           this.track("Scroll Depth", {
             percentage: milestone,
             path: path()
@@ -622,28 +635,29 @@ var AmplifyUpSDK = class {
       });
     };
     const accumulateVisible = () => {
-      if (visibleSince == null) return;
-      visibleMs += Date.now() - visibleSince;
-      visibleSince = Date.now();
+      if (state.visibleSince == null) return;
+      state.visibleMs += Date.now() - state.visibleSince;
+      state.visibleSince = Date.now();
     };
     const emitDwell = (force = false) => {
       if (this.isPreviewMode()) return;
       accumulateVisible();
-      const seconds = Math.floor(visibleMs / 1e3);
+      const seconds = Math.floor(state.visibleMs / 1e3);
       if (seconds <= 0) return;
-      if (!force && seconds <= lastDwellSecondsSent) return;
-      lastDwellSecondsSent = seconds;
+      if (!force && seconds <= state.lastDwellSecondsSent) return;
+      state.lastDwellSecondsSent = seconds;
       this.track("Time on Page", {
         seconds,
-        path: path()
+        path: this.lastTrackedPath || path()
       });
     };
+    this._emitPageDwell = emitDwell;
     const onVisibility = () => {
       if (document.visibilityState === "visible") {
-        visibleSince = Date.now();
+        state.visibleSince = Date.now();
       } else {
         emitDwell(true);
-        visibleSince = null;
+        state.visibleSince = null;
       }
     };
     const onPageHide = () => {
@@ -670,11 +684,64 @@ var AmplifyUpSDK = class {
       }
       previousCleanup?.();
       this.pageEngagementActive = false;
+      delete this._emitPageDwell;
     };
     if (this.config?.debug) {
       console.log("[AmplifyUp SDK] Page engagement tracking enabled");
     }
   }
+  resetEngagementForNewPage() {
+    const emit = this._emitPageDwell;
+    emit?.(true);
+    const state = this.pageEngagementState;
+    state.reached = /* @__PURE__ */ new Set();
+    state.visibleMs = 0;
+    state.lastDwellSecondsSent = 0;
+    state.visibleSince = typeof document !== "undefined" && document.visibilityState === "visible" ? Date.now() : null;
+    this.componentViewSeen.clear();
+  }
+  /**
+   * SPA / soft navigation: fire a page view and reset engagement.
+   * No-op when the path has not changed. Safe for React Strict Mode remounts.
+   */
+  routeChange(url, properties) {
+    if (this.isPreviewMode()) return;
+    if (!this.isInitialized()) return;
+    if (typeof window === "undefined") return;
+    const path = url || window.location.pathname || "/";
+    if (path === this.lastTrackedPath) return;
+    this.resetEngagementForNewPage();
+    this.page(path, properties);
+    this.lastTrackedPath = path;
+    if (!this.pageEngagementActive) {
+      this.setupPageEngagement();
+    }
+    if (this.config?.debug) {
+      console.log("[AmplifyUp SDK] Route change page view", path);
+    }
+  }
+  /**
+   * Patch history.pushState / replaceState + popstate for non-React SPAs.
+   * React/Next apps should also call routeChange from the provider.
+   */
+  installHistoryHooks() {
+    if (typeof window === "undefined" || this.historyHooksInstalled) return;
+    this.historyHooksInstalled = true;
+    const notify = () => {
+      queueMicrotask(() => this.routeChange(window.location.pathname));
+    };
+    const wrap = (method) => {
+      const original = history[method].bind(history);
+      history[method] = (...args) => {
+        const result = original(...args);
+        notify();
+        return result;
+      };
+    };
+    wrap("pushState");
+    wrap("replaceState");
+    window.addEventListener("popstate", notify);
+  }
   /**
    * Automatic Component View when component hosts enter the viewport.
    */
@@ -749,6 +816,7 @@ var AmplifyUpSDK = class {
       ...properties
     };
     this.adapter.page(pageProperties);
+    this.lastTrackedPath = url;
   }
   /**
    * Track an event
@@ -2289,6 +2357,7 @@ async function init(config) {
   await sdk.init(config);
 }
 var page = (url, properties) => getSDK().page(url, properties);
+var routeChange = (url, properties) => getSDK().routeChange(url, properties);
 var track = (eventName, properties) => getSDK().track(eventName, properties);
 var trackClick = (elementId, elementText, properties) => getSDK().trackClick(elementId, elementText, properties);
 var trackFormSubmit = (formId, formData) => getSDK().trackFormSubmit(formId, formData);
@@ -2324,6 +2393,6 @@ var verifyAWSConnection = () => {
 };
 var index_default = getSDK();
 
-export { AmplifyUpSDK, buildLayoutProviderUrl, buildPageRenderUrl, cleanupEventTracking, index_default as default, fetchPageConfig, getDiagnostics, getInstanceId2 as getInstanceId, getOrchestratorUrl, getSDK, getStatus, getTarget, getTrackingId, getUserId2 as getUserId, identify, init, isAmplifyUpTarget, isComposerPreview, isPreviewRequest, normalizeAmplifyUpTarget, page, refreshEventTracking, reset, resolveAmplifyUpTarget, resolveAmplifyUpUrls, setupComponentViewTracking, setupEventTracking, testTracking, track, trackClick, trackContentEngagement, trackContentView, trackFormFieldInteraction, trackFormSubmit, verifyAWSConnection };
+export { AmplifyUpSDK, buildLayoutProviderUrl, buildPageRenderUrl, cleanupEventTracking, index_default as default, fetchPageConfig, getDiagnostics, getInstanceId2 as getInstanceId, getOrchestratorUrl, getSDK, getStatus, getTarget, getTrackingId, getUserId2 as getUserId, identify, init, isAmplifyUpTarget, isComposerPreview, isPreviewRequest, normalizeAmplifyUpTarget, page, refreshEventTracking, reset, resolveAmplifyUpTarget, resolveAmplifyUpUrls, routeChange, setupComponentViewTracking, setupEventTracking, testTracking, track, trackClick, trackContentEngagement, trackContentView, trackFormFieldInteraction, trackFormSubmit, verifyAWSConnection };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map