@amplifyup/sdk 0.1.53 → 0.1.55

package/dist/react.mjs

@@ -1,7 +1,7 @@
 'use client';
-import React, { createContext, useState, useEffect, useContext, Fragment as Fragment$1, useSyncExternalStore, useRef, Component } from 'react';
+import React, { createContext, memo, useState, useEffect, useContext, Fragment as Fragment$1, Component, useRef, useSyncExternalStore } from 'react';
 import { marked } from 'marked';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 /* @amplifyup/sdk - https://amplifyup.ai */
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
@@ -608,6 +608,49 @@ function getPageResourceFields() {
   return pageResourceFields;
 }
 
+// src/debug.ts
+function envFlag(value) {
+  if (!value) return false;
+  const v = value.trim().toLowerCase();
+  return v === "1" || v === "true" || v === "yes";
+}
+function readAmplifyUpDebugEnv() {
+  try {
+    if (typeof process === "undefined") return false;
+    return envFlag(process.env.NEXT_PUBLIC_AMPLIFYUP_DEBUG) || envFlag(process.env.AMPLIFYUP_DEBUG);
+  } catch {
+    return false;
+  }
+}
+var configDebug;
+function setAmplifyUpDebug(enabled) {
+  configDebug = enabled;
+}
+function isAmplifyUpDebug() {
+  if (configDebug === true) return true;
+  if (configDebug === false) return false;
+  return readAmplifyUpDebugEnv();
+}
+var onceKeys = /* @__PURE__ */ new Set();
+var onceRoute = "";
+function resetOnceIfRouteChanged() {
+  const route = typeof window !== "undefined" ? window.location.pathname : "";
+  if (route === onceRoute) return;
+  onceKeys.clear();
+  onceRoute = route;
+}
+function sdkDebug(...args) {
+  if (!isAmplifyUpDebug()) return;
+  console.log(...args);
+}
+function sdkDebugOnce(key, ...args) {
+  if (!isAmplifyUpDebug()) return;
+  resetOnceIfRouteChanged();
+  if (onceKeys.has(key)) return;
+  onceKeys.add(key);
+  console.log(...args);
+}
+
 // src/edge/normalizeRoute.ts
 function normalizeRoute(route) {
   let path = String(route || "").trim();
@@ -1181,13 +1224,13 @@ var AmplifyUpSDK = class {
     }
     this.config = {
       trackingId: previewOverrides.trackingId || config.trackingId,
-      debug: config.debug ?? true,
-      // Enable debug by default
+      debug: config.debug ?? readAmplifyUpDebugEnv(),
       target: this.target,
       dev: config.dev,
       ...config.siteId ? { siteId: config.siteId } : {},
       ...config.pageContext ? { pageContext: config.pageContext } : {}
     };
+    setAmplifyUpDebug(!!this.config.debug);
     if (config.pageContext) {
       this.pendingPageContext = config.pageContext;
       this.recomputeAttachedContext();
@@ -3434,11 +3477,9 @@ function EmptySlotHint({
 }
 var ComponentContext = createContext(null);
 function useLiveComposerProps(layoutNodeId, props) {
-  const [live, setLive] = useState(props);
-  useEffect(() => {
-    setLive(props);
-  }, [props]);
+  const [patch, setPatch] = useState(null);
   useEffect(() => {
+    setPatch(null);
     const matchesNode = (nodeId) => {
       if (nodeId && layoutNodeId && String(nodeId) !== String(layoutNodeId)) {
         return false;
@@ -3448,15 +3489,15 @@ function useLiveComposerProps(layoutNodeId, props) {
     const applyField = (fieldName, value, nodeId) => {
       if (!fieldName || typeof fieldName !== "string") return;
       if (!matchesNode(nodeId)) return;
-      setLive((prev) => ({ ...prev, [fieldName]: value }));
+      setPatch((prev) => ({ ...prev || {}, [fieldName]: value }));
     };
     const applyProps = (nextProps, nodeId) => {
       if (!nextProps || typeof nextProps !== "object" || Array.isArray(nextProps)) {
         return;
       }
       if (!matchesNode(nodeId)) return;
-      setLive((prev) => ({
-        ...prev,
+      setPatch((prev) => ({
+        ...prev || {},
         ...nextProps
       }));
     };
@@ -3485,7 +3526,7 @@ function useLiveComposerProps(layoutNodeId, props) {
       window.removeEventListener("message", onMessage);
     };
   }, [layoutNodeId]);
-  return live;
+  return patch ? { ...props, ...patch } : props;
 }
 function useComponentProps() {
   const context = useContext(ComponentContext);
@@ -3521,23 +3562,12 @@ function Slot({
   className
 }) {
   const context = useContext(ComponentContext);
-  console.log(`[Slot:${name}] Rendering slot`, {
-    hasContext: !!context,
-    availableSlotKeys: context?.slots ? Object.keys(context.slots) : [],
-    slotContent: context?.slots?.[name] ? "EXISTS" : "MISSING",
-    contextSlots: context?.slots
-  });
   if (!context) {
     console.warn(`[AmplifyUp SDK] Slot "${name}" used outside ComponentContextProvider`);
     return null;
   }
   const slotContent = context.slots?.[name];
   const isEmpty = !slotContent;
-  console.log(`[Slot:${name}] Slot state`, {
-    isEmpty,
-    hasSlotContent: !!slotContent,
-    slotContentType: slotContent ? typeof slotContent : "null"
-  });
   const isEditorMode = typeof window !== "undefined" && // Check for preview mode flag set by proxy
   (window.__AMPLIFYUP_PREVIEW_MODE__ === true || // Check URL query params
   new URLSearchParams(window.location.search).get("preview") === "true" || new URLSearchParams(window.location.search).get("visualEditor") === "true" || // Check if in iframe from orchestrator (check referrer hostname/port)
@@ -3549,17 +3579,15 @@ function Slot({
       return false;
     }
   })());
-  console.log(`[Slot:${name}] Editor mode detection`, {
-    isEditorMode,
-    isWindowDefined: typeof window !== "undefined",
-    previewModeFlag: typeof window !== "undefined" ? window.__AMPLIFYUP_PREVIEW_MODE__ : void 0,
-    urlParams: typeof window !== "undefined" ? {
-      preview: new URLSearchParams(window.location.search).get("preview"),
-      visualEditor: new URLSearchParams(window.location.search).get("visualEditor")
-    } : void 0,
-    inIframe: typeof window !== "undefined" ? window.self !== window.top : false,
-    referrer: typeof window !== "undefined" && document.referrer ? document.referrer : void 0
-  });
+  sdkDebugOnce(
+    `slot:${context.layoutNodeId || ""}:${name}`,
+    `[Slot:${name}]`,
+    {
+      isEmpty,
+      isEditorMode,
+      availableSlotKeys: context.slots ? Object.keys(context.slots) : []
+    }
+  );
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3784,9 +3812,10 @@ function ComposerInlineField({
         event.stopPropagation();
       },
       onClick: (event) => {
+        if (!isComposerEditMode()) return;
         const link = event.target?.closest?.("a");
         if (link) event.preventDefault();
-        if (render && isComposerEditMode()) {
+        if (render) {
           setEditing(true);
         }
       },
@@ -4199,7 +4228,7 @@ function LiveNodeRender({
     layoutNodeId: nodeId
   }) });
 }
-function AmplifyRenderer({
+function AmplifyRendererInner({
   renderComponent,
   pageConfig: serverPageConfig,
   loadingComponent,
@@ -4341,14 +4370,22 @@ function AmplifyRenderer({
         return `${indent}- ${n.id} (${n.componentId || "?"})${slotsDesc ? "\n" + slotsDesc : ""}`;
       }).join("\n");
     };
-    console.log("[AmplifyRenderer] layoutTree received:\n%s", describeLayoutTree(layoutTree2));
+    sdkDebugOnce(
+      `layoutTree:${pageConfig?.id || ""}:${pageConfig?.route || ""}`,
+      "[AmplifyRenderer] layoutTree received:\n%s",
+      describeLayoutTree(layoutTree2)
+    );
     if (typeof window !== "undefined" && window.parent && window.parent !== window) {
       const message = {
         type: "COMPONENT_TREE",
         tree: componentTree
       };
       window.parent.postMessage(message, "*");
-      console.log("[AmplifyRenderer] Sent component tree from layoutTree:", componentTree.length, "root components");
+      sdkDebug(
+        "[AmplifyRenderer] Sent component tree from layoutTree:",
+        componentTree.length,
+        "root components"
+      );
     }
   }, [pageConfig]);
   useEffect(() => {
@@ -4499,7 +4536,7 @@ function AmplifyRenderer({
       );
     }
     let slotChildren = {};
-    console.log(`[AmplifyRenderer] Rendering node ${node.id} (${node.componentId})`, {
+    sdkDebugOnce(`node:${node.id}`, `[AmplifyRenderer] Rendering node ${node.id} (${node.componentId})`, {
       hasSlots: !!(node.slots && node.slots.length > 0),
       slotCount: node.slots?.length || 0,
       slots: node.slots?.map((s) => ({ slotId: s.slotId, zoneId: s.zoneId, childrenCount: s.children?.length || 0 }))
@@ -4508,30 +4545,13 @@ function AmplifyRenderer({
       for (const slot of node.slots) {
         const slotKey = `${node.id}-${slot.slotId}`;
         let childrenToRender = [];
-        console.log(`[AmplifyRenderer] Processing slot ${slot.slotId} for node ${node.id}`, {
-          slotKey,
-          hasZoneId: !!slot.zoneId,
-          hasVariants: !!slot.variants,
-          hasVariantCache: !!variantCache[slotKey],
-          directChildrenCount: slot.children?.length || 0
-        });
         if (slot.zoneId && slot.variants && variantCache[slotKey]) {
           childrenToRender = variantCache[slotKey].children;
-          console.log(`[AmplifyRenderer] Using cached variant for slot ${slot.slotId}`, {
-            variantId: variantCache[slotKey].variantId,
-            childrenCount: childrenToRender.length
-          });
         } else if (slot.zoneId && slot.variants) {
           const defaultVariant = slot.variants.find((v) => v.isDefault);
           childrenToRender = defaultVariant?.children || [];
-          console.log(`[AmplifyRenderer] Using default variant for slot ${slot.slotId}`, {
-            childrenCount: childrenToRender.length
-          });
         } else {
           childrenToRender = Array.isArray(slot.children) ? slot.children : [];
-          console.log(`[AmplifyRenderer] Using direct children for slot ${slot.slotId}`, {
-            childrenCount: childrenToRender.length
-          });
         }
         const safeChildren = Array.isArray(childrenToRender) ? childrenToRender : [];
         slotChildren[slot.slotId] = /* @__PURE__ */ jsx(
@@ -4546,10 +4566,6 @@ function AmplifyRenderer({
           },
           slot.slotId
         );
-        console.log(`[AmplifyRenderer] Created slot content for ${slot.slotId}`, {
-          slotId: slot.slotId,
-          renderedChildrenCount: childrenToRender.length
-        });
       }
     }
     const slotsToPass = Object.keys(slotChildren).length > 0 ? slotChildren : void 0;
@@ -4587,6 +4603,7 @@ function AmplifyRenderer({
     }
   ) : layoutTree.map((node) => /* @__PURE__ */ jsx("div", { children: renderNode(node) }, node.id)) });
 }
+var AmplifyRenderer = memo(AmplifyRendererInner);
 function defaultPreviewCanvas() {
   return /* @__PURE__ */ jsx(
     "div",
@@ -4690,6 +4707,12 @@ if (typeof window !== "undefined") {
   }
 }
 var AmplifyUpContext = createContext(null);
+function normalizeRoutePath2(route) {
+  if (!route) return "";
+  const path = route.split("?")[0] || "/";
+  if (path.length > 1 && path.endsWith("/")) return path.replace(/\/+$/, "");
+  return path || "/";
+}
 function AmplifyUpProvider({
   children,
   config,
@@ -4717,6 +4740,7 @@ function AmplifyUpProvider({
     }
     return currentPath;
   };
+  const loadedRouteRef = useRef(null);
   const nextPathname = usePathname ? usePathname() : null;
   const [pathname, setPathname] = useState(() => {
     if (typeof window !== "undefined") {
@@ -4750,56 +4774,46 @@ function AmplifyUpProvider({
       };
     }
   }, [nextPathname]);
-  useEffect(() => {
-    let cancelled = false;
-    const sdk = getSDK();
-    sdk.init({
-      ...config,
-      ...pageContext ? { pageContext } : {}
-    }).then(() => {
-      if (!cancelled) {
-        setInitialized(true);
-      }
-    }).catch((err) => {
-      if (cancelled) return;
-      console.error("Failed to initialize AmplifyUp SDK:", err);
-      setError("Failed to initialize tracking");
-      setLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [config.trackingId, config.target, config.debug, config.dev, config.siteId, pageContext]);
+  const pageContextKey = pageContext ? `${pageContext.resourceType}:${pageContext.key}` : "";
   useEffect(() => {
     if (!initialized || !pageContext) return;
     getSDK().setPageContext(pageContext);
-  }, [initialized, pageContext]);
+  }, [initialized, pageContextKey]);
   useEffect(() => {
-    if (!initialized) return;
     let cancelled = false;
-    const load = async () => {
+    const sdk = getSDK();
+    const run = async () => {
       try {
+        await sdk.init({
+          ...config,
+          ...pageContext ? { pageContext } : {}
+        });
+        if (cancelled) return;
+        if (pageContext) sdk.setPageContext(pageContext);
         const actualRoute = getActualRoute();
         if (!actualRoute) {
+          setInitialized(true);
           setLoading(false);
           return;
         }
-        const sdk = getSDK();
         sdk.routeChange(actualRoute);
         const preview = isComposerPreview();
         const overlay = preview || config.clientPersonalization !== false;
         if (!overlay) {
+          setInitialized(true);
           setPageConfig(null);
           setLoading(false);
           return;
         }
-        setPageConfig(null);
-        setError(null);
-        setLoading(false);
+        if (loadedRouteRef.current && loadedRouteRef.current !== actualRoute) {
+          setPageConfig(null);
+          setError(null);
+        }
         const edgeUrl = sdk.getEdgeUrl();
         const orchestratorUrl = sdk.getOrchestratorUrl();
         const trackingId = sdk.getTrackingId();
         if (!trackingId || !orchestratorUrl || !edgeUrl) {
+          setInitialized(true);
           setError("SDK not initialized");
           setLoading(false);
           return;
@@ -4835,28 +4849,37 @@ function AmplifyUpProvider({
           fetchOrchestratorPage: (route, isPreview) => sdk.fetchPageConfig(route, isPreview)
         });
         if (cancelled) return;
-        setSource(result.source);
-        setMeta(result.meta);
-        setError(result.error);
-        if (!result.pageConfig) {
-          setPageConfig({
-            id: "default",
-            route: actualRoute,
-            title: "Page Not Configured",
-            description: "This page has not been published yet.",
-            layoutTree: []
-          });
-        } else {
-          setPageConfig(result.pageConfig);
+        const nextConfig = result.pageConfig || {
+          id: "default",
+          route: actualRoute,
+          title: "Page Not Configured",
+          description: "This page has not been published yet.",
+          layoutTree: []
+        };
+        setInitialized(true);
+        setSource((prev) => prev === result.source ? prev : result.source);
+        setMeta(
+          (prev) => prev === result.meta || JSON.stringify(prev) === JSON.stringify(result.meta) ? prev : result.meta
+        );
+        setError((prev) => prev === result.error ? prev : result.error);
+        setPageConfig((prev) => {
+          if (prev && prev.id === nextConfig.id && normalizeRoutePath2(prev.route) === normalizeRoutePath2(nextConfig.route) && JSON.stringify(prev.layoutTree) === JSON.stringify(nextConfig.layoutTree)) {
+            return prev;
+          }
+          return nextConfig;
+        });
+        if (result.pageConfig) {
           sdk.applyResolvedPageData(
             result.pageConfig.pageData || null,
             result.pageConfig.route,
             extractRouteParams(result.pageConfig.route, actualRoute)
           );
         }
+        loadedRouteRef.current = actualRoute;
       } catch (err) {
         if (cancelled) return;
         console.error("Error fetching page config:", err);
+        setInitialized(true);
         setError(err instanceof Error ? err.message : "Unknown error");
         setSource(null);
         setMeta(null);
@@ -4864,11 +4887,20 @@ function AmplifyUpProvider({
         if (!cancelled) setLoading(false);
       }
     };
-    void load();
+    void run();
     return () => {
       cancelled = true;
     };
-  }, [pathname, initialized, config.clientPersonalization]);
+  }, [
+    pathname,
+    config.trackingId,
+    config.target,
+    config.debug,
+    config.dev,
+    config.siteId,
+    config.clientPersonalization,
+    pageContextKey
+  ]);
   return /* @__PURE__ */ jsx(
     AmplifyUpContext.Provider,
     {