@amplifyup/sdk 0.1.54 → 0.1.56

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();
@@ -3519,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)
@@ -3547,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",
     {
@@ -3649,13 +3679,31 @@ function htmlHasVisualChrome(html) {
   );
 }
 function canInlineEdit(name, value) {
-  if (isLikelyNonTextFieldName(name)) return false;
+  if (!name || isLikelyNonTextFieldName(name)) return false;
   if (value !== void 0 && value !== null && typeof value === "object") {
     return false;
   }
   if (typeof value === "boolean") return false;
   return true;
 }
+function canInlineEditRichText(name, value) {
+  if (!name || isLikelyNonTextFieldName(name)) return false;
+  if (typeof value === "boolean") return false;
+  if (value !== void 0 && value !== null && typeof value === "object" && !Array.isArray(value)) {
+    return false;
+  }
+  return true;
+}
+function inferEditName(explicitName, contextProps, sourceValue) {
+  if (explicitName) return explicitName;
+  if (!contextProps) return "";
+  const keys = Object.keys(contextProps).filter(
+    (key) => Object.is(contextProps[key], sourceValue)
+  );
+  if (keys.length === 1) return keys[0];
+  if (keys.length === 0 || isComposerEmptyText(sourceValue)) return "";
+  return keys[0];
+}
 function subscribeComposerEdit(onStoreChange) {
   if (typeof window === "undefined") return () => {
   };
@@ -3850,9 +3898,11 @@ function ComposerInlineHtml({
   const finishEdit = () => {
     const el = elRef.current;
     if (!el) return;
-    const next = (el.innerText ?? "").replace(/\u00a0/g, " ").replace(/\n+$/g, "");
-    if (next.trim() === sourceTextRef.current) return;
-    commitComposerField(layoutNodeId, componentId, name, next.trim());
+    const nextHtml = el.innerHTML;
+    const nextText = (el.innerText ?? "").replace(/\u00a0/g, " ").replace(/\n+$/g, "").trim();
+    if (nextText === sourceTextRef.current && nextHtml === html) return;
+    const commitValue = htmlHasVisualChrome(html) || /<[a-z][\s\S]*>/i.test(html) ? nextHtml : nextText;
+    commitComposerField(layoutNodeId, componentId, name, commitValue);
   };
   return React.createElement(Tag, {
     ref: elRef,
@@ -3894,15 +3944,10 @@ function formatFieldValue(value) {
 }
 function warnProjectionProps(component, name, hasExplicitValue) {
   if (process.env.NODE_ENV === "production") return;
-  if (hasExplicitValue && name) {
-    console.warn(
-      `[AmplifyUp SDK] ${component}: pass either value={\u2026} or deprecated name="\u2026", not both. Prefer value={\u2026} and omit name.`
-    );
-    return;
-  }
+  if (hasExplicitValue) return;
   if (name) {
     console.warn(
-      `[AmplifyUp SDK] ${component} \`name\` is deprecated and will be removed. Prefer value={${name}} from your component props and omit name.`
+      `[AmplifyUp SDK] ${component} \`name\` is deprecated and will be removed. Prefer value={${name}} from your component props.`
     );
   }
 }
@@ -3942,7 +3987,7 @@ function Field(props) {
   const composerEdit = useComposerEditMode();
   const hasExplicitValue = hasOwnProp(props, "value");
   const sourceValue = hasExplicitValue ? value : name ? context?.props?.[name] : void 0;
-  const editName = hasExplicitValue ? "" : name || "";
+  const editName = inferEditName(name, context?.props, sourceValue);
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
     editName,
@@ -3956,6 +4001,20 @@ function Field(props) {
     return fallback ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
   }
   if (render) {
+    if (composerEdit && editName && context && canInlineEdit(editName, fieldValue)) {
+      return /* @__PURE__ */ jsx(
+        ComposerInlineField,
+        {
+          name: editName,
+          value: fieldValue,
+          fallback,
+          className,
+          render,
+          layoutNodeId: context.layoutNodeId,
+          componentId: context.componentId
+        }
+      );
+    }
     return /* @__PURE__ */ jsx("span", { className, style: { display: "contents" }, children: render(fieldValue) });
   }
   if (Array.isArray(fieldValue)) {
@@ -4009,7 +4068,7 @@ function RichText(props) {
   const hasValueProp = hasOwnProp(props, "value");
   const hasExplicitValue = hasValueProp || childrenValue !== void 0;
   const sourceValue = hasValueProp ? value : childrenValue !== void 0 ? childrenValue : name ? context?.props?.[name] : void 0;
-  const editName = hasExplicitValue ? "" : name || "";
+  const editName = inferEditName(name, context?.props, sourceValue);
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
     editName,
@@ -4022,7 +4081,7 @@ function RichText(props) {
     return fallback ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
   }
   warnProjectionProps("RichText", name, hasExplicitValue);
-  const canEdit = !!editName && !!context && canInlineEdit(editName, fieldValue);
+  const canEdit = !!context && canInlineEditRichText(editName, fieldValue);
   if (isComposerEmptyText(fieldValue)) {
     if (composerEdit && canEdit && !isReactNodeFallback(fallback) && !classNameIsBlock(className)) {
       return /* @__PURE__ */ jsx(
@@ -4054,17 +4113,6 @@ function RichText(props) {
   if (!html) {
     return fallback ? /* @__PURE__ */ jsx(Tag, { className, children: fallback }) : null;
   }
-  if (composerEdit && htmlHasVisualChrome(html)) {
-    return /* @__PURE__ */ jsx(
-      Tag,
-      {
-        className,
-        "data-amplifyup-field": editName || void 0,
-        "data-amplifyup-node-id": context?.layoutNodeId || void 0,
-        dangerouslySetInnerHTML: { __html: html }
-      }
-    );
-  }
   if (composerEdit && canEdit) {
     return /* @__PURE__ */ jsx(
       ComposerInlineHtml,
@@ -4105,7 +4153,7 @@ function Image(props) {
   const sourceValue = hasExplicitValue ? value : name ? context?.props?.[name] : void 0;
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
-    hasExplicitValue ? "" : name || "",
+    inferEditName(name, context?.props, sourceValue),
     sourceValue
   );
   warnProjectionProps("Image", name, hasExplicitValue);
@@ -4198,7 +4246,7 @@ function LiveNodeRender({
     layoutNodeId: nodeId
   }) });
 }
-function AmplifyRenderer({
+function AmplifyRendererInner({
   renderComponent,
   pageConfig: serverPageConfig,
   loadingComponent,
@@ -4340,14 +4388,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(() => {
@@ -4498,7 +4554,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 }))
@@ -4507,30 +4563,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(
@@ -4545,10 +4584,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;
@@ -4586,6 +4621,7 @@ function AmplifyRenderer({
     }
   ) : layoutTree.map((node) => /* @__PURE__ */ jsx("div", { children: renderNode(node) }, node.id)) });
 }
+var AmplifyRenderer = memo(AmplifyRendererInner);
 function defaultPreviewCanvas() {
   return /* @__PURE__ */ jsx(
     "div",
@@ -4689,6 +4725,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,
@@ -4716,6 +4758,7 @@ function AmplifyUpProvider({
     }
     return currentPath;
   };
+  const loadedRouteRef = useRef(null);
   const nextPathname = usePathname ? usePathname() : null;
   const [pathname, setPathname] = useState(() => {
     if (typeof window !== "undefined") {
@@ -4749,56 +4792,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;
@@ -4834,28 +4867,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);
@@ -4863,11 +4905,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,
     {