@amplifyup/sdk 0.1.19 → 0.1.21

package/dist/react.mjs

@@ -369,6 +369,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();
@@ -541,7 +550,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) {
@@ -584,16 +595,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 = () => {
@@ -615,8 +628,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()
@@ -632,28 +645,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 = () => {
@@ -680,11 +694,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.
    */
@@ -759,6 +826,7 @@ var AmplifyUpSDK = class {
       ...properties
     };
     this.adapter.page(pageProperties);
+    this.lastTrackedPath = url;
   }
   /**
    * Track an event
@@ -3003,6 +3071,7 @@ function AmplifyUpProvider({ children, config }) {
           return;
         }
         const sdk = getSDK();
+        sdk.routeChange(actualRoute);
         const isPreviewContext = isComposerPreview();
         const page = await sdk.fetchPageConfig(actualRoute, isPreviewContext);
         if (!page) {