@amplifyup/sdk 0.1.76 → 0.1.78

package/dist/react.mjs

@@ -1,5 +1,5 @@
 'use client';
-import React3, { createContext, memo, useState, useEffect, Fragment as Fragment$1, useContext, useRef, Component, useMemo, useSyncExternalStore, useCallback } from 'react';
+import React3, { createContext, memo, useState, useEffect, Fragment as Fragment$1, useContext, useRef, Component, useCallback, useSyncExternalStore } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { marked } from 'marked';
 
@@ -166,6 +166,7 @@ var AWSAdapter = class {
       return;
     }
     const trackingId = eventData?.trackingId || this.config?.trackingId;
+    const debug = this.config?.debug;
     const query = trackingId ? `?tid=${encodeURIComponent(trackingId)}` : "";
     const url = `${this.apiGatewayUrl}${endpoint}${query}`;
     try {
@@ -180,15 +181,15 @@ var AWSAdapter = class {
         keepalive: true
       });
       if (!response.ok) {
-        if (this.config.debug) {
+        if (debug) {
           console.warn(`AmplifyUp SDK: Event tracking failed: ${response.status} ${response.statusText}`);
         }
-      } else if (this.config.debug) {
+      } else if (debug) {
         const result = await response.json().catch(() => ({}));
         console.log("AmplifyUp SDK: Event tracked", result);
       }
     } catch (error) {
-      if (this.config.debug) {
+      if (debug) {
         console.error("AmplifyUp SDK: Event tracking error:", error);
       }
     }
@@ -1089,9 +1090,8 @@ function dedupeLayoutProviderFetch(key, fetchFn) {
   return pending;
 }
 function previewLayoutReady(opts) {
-  if (opts.hasClientLayout) return true;
-  if (opts.clientLoading) return false;
-  return true;
+  if (opts.hasClientLayout || opts.hasServerLayout) return true;
+  return !opts.clientLoading;
 }
 
 // src/edge/variantKeys.ts
@@ -3952,6 +3952,14 @@ function getSDK(adapter) {
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
+var PageContentRegistryContext = createContext(null);
+function useRegisterPageContent(enabled = true) {
+  const register = useContext(PageContentRegistryContext);
+  useEffect(() => {
+    if (!enabled || !register) return;
+    return register();
+  }, [enabled, register]);
+}
 function useInComposer(force = false) {
   const [detected, setDetected] = useState(false);
   useEffect(() => {
@@ -4010,14 +4018,16 @@ function applyComposerPatch(store, name, value, ref, layoutNodeId) {
   store.set(composerStoreKey(name, ref, layoutNodeId), value);
 }
 function ComposerProvider({
-  children
+  children,
+  enabled = true
 }) {
   const existing = useContext(ComposerStoreContext);
   const storeRef = useRef(null);
   if (!storeRef.current) storeRef.current = new ComposerFieldStore();
-  const store = existing || storeRef.current;
+  const ownsStore = !existing && enabled;
+  const store = existing || (enabled ? storeRef.current : null);
   useEffect(() => {
-    if (existing) return;
+    if (!ownsStore || !store) return;
     const applyField = (fieldName, value, nodeId, ref) => {
       if (!fieldName || typeof fieldName !== "string") return;
       const fieldRef = isFieldRef(ref) ? ref : void 0;
@@ -4075,8 +4085,7 @@ function ComposerProvider({
       window.removeEventListener("amplifyup:props-patch", onPropsPatch);
       window.removeEventListener("message", onMessage);
     };
-  }, [existing, store]);
-  if (existing) return /* @__PURE__ */ jsx(Fragment, { children });
+  }, [ownsStore, store]);
   return /* @__PURE__ */ jsx(ComposerStoreContext.Provider, { value: store, children });
 }
 function useComposerFieldValue(name, fallback, ref) {
@@ -4103,9 +4112,7 @@ function MaybeComposerProvider({
   layoutNodeId,
   children
 }) {
-  const content = useMemo(() => children, [children]);
-  if (!enabled) return /* @__PURE__ */ jsx(Fragment, { children: content });
-  return /* @__PURE__ */ jsx(ComposerProvider, { children: /* @__PURE__ */ jsx(ComposerNodeContext.Provider, { value: layoutNodeId, children }) });
+  return /* @__PURE__ */ jsx(ComposerProvider, { enabled, children: /* @__PURE__ */ jsx(ComposerNodeContext.Provider, { value: enabled ? layoutNodeId : void 0, children }) });
 }
 function nodeRenderProps(node) {
   const settings = node.settings || {};
@@ -4191,6 +4198,7 @@ function AmplifyRendererInner({
   composerPreview
 }) {
   const clientHook = useAmplifyUp();
+  useRegisterPageContent(!serverPageConfig);
   const composerPreviewFlag = useComposerPreviewFlag(!!composerPreview);
   const pageConfig = serverPageConfig || clientHook.pageConfig || null;
   const loading = serverPageConfig ? false : clientHook.loading;
@@ -4538,17 +4546,16 @@ function AmplifyRendererInner({
   if (layoutTree.length === 0) {
     return /* @__PURE__ */ jsx("main", { children: emptyComponent || /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 py-16", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No content configured for this page." }) }) });
   }
-  return /* @__PURE__ */ jsx(ComposerProvider, { children: /* @__PURE__ */ jsx("main", { children: composerPreviewFlag ? /* @__PURE__ */ jsx(
-    "div",
+  return /* @__PURE__ */ jsx(ComposerProvider, { children: /* @__PURE__ */ jsx(
+    "main",
     {
-      "data-slot-id": "main",
-      "data-amplifyup-slot": "main",
-      "data-slot-source": "page",
-      "data-slot-state": layoutTree.length === 0 ? "empty" : "filled",
-      "data-slot-empty": layoutTree.length === 0 ? "true" : void 0,
+      "data-slot-id": composerPreviewFlag ? "main" : void 0,
+      "data-amplifyup-slot": composerPreviewFlag ? "main" : void 0,
+      "data-slot-source": composerPreviewFlag ? "page" : void 0,
+      "data-slot-state": composerPreviewFlag ? "filled" : void 0,
       children: layoutTree.map((node) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id))
     }
-  ) : layoutTree.map((node) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id)) }) });
+  ) });
 }
 var AmplifyRenderer = memo(AmplifyRendererInner);
 function AddComponentIcon({ size = 28 }) {
@@ -4706,6 +4713,7 @@ function AmplifyPageContent({
   errorComponent
 }) {
   const client = useAmplifyUp();
+  useRegisterPageContent();
   const preview = useComposerPreviewFlag(forceComposerPreview);
   const clientLayout = hasAmplifyLayout(client.pageConfig) ? client.pageConfig : null;
   const serverLayout = hasAmplifyLayout(pageConfigProp) ? pageConfigProp : null;
@@ -4724,11 +4732,14 @@ function AmplifyPageContent({
   if (preview) {
     const ready = previewLayoutReady({
       clientLoading: client.loading,
-      hasClientLayout: !!clientLayout});
+      hasClientLayout: !!clientLayout,
+      hasServerLayout: !!serverLayout
+    });
     if (!ready) {
       return /* @__PURE__ */ jsx(ComposerLayoutStatusProvider, { ready: false, children: previewLoading });
     }
-    return /* @__PURE__ */ jsx(ComposerLayoutStatusProvider, { ready: true, children: /* @__PURE__ */ jsx(
+    const layoutSettled = !client.loading || !!clientLayout;
+    return /* @__PURE__ */ jsx(ComposerLayoutStatusProvider, { ready: layoutSettled, children: /* @__PURE__ */ jsx(
       AmplifyRenderer,
       {
         pageConfig: pageConfig ?? void 0,
@@ -4750,7 +4761,7 @@ function AmplifyPageContent({
   if (!hasAmplifyLayout(pageConfig)) {
     return fallback ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ComposerLayoutStatusProvider, { ready: true, children: /* @__PURE__ */ jsx(
     AmplifyRenderer,
     {
       pageConfig: pageConfig ?? void 0,
@@ -4759,7 +4770,7 @@ function AmplifyPageContent({
       emptyComponent,
       errorComponent
     }
-  );
+  ) });
 }
 
 // src/slot-state.ts
@@ -5599,11 +5610,24 @@ function AmplifyUpProvider({
     if (!initialized || !pageContext) return;
     getSDK().setPageContext(pageContext);
   }, [initialized, pageContextKey]);
+  const contentMountsRef = useRef(0);
+  const [hasPageContent, setHasPageContent] = useState(false);
+  const registerPageContent = useCallback(() => {
+    contentMountsRef.current += 1;
+    setHasPageContent(true);
+    return () => {
+      contentMountsRef.current -= 1;
+      if (contentMountsRef.current === 0) setHasPageContent(false);
+    };
+  }, []);
+  const [initVersion, setInitVersion] = useState(0);
+  const overlayEnabled = () => isComposerPreview() || config.clientPersonalization !== false;
   useEffect(() => {
     let cancelled = false;
     const sdk = getSDK();
-    const heldRoute = isComposerPreview() || config.clientPersonalization !== false ? getActualRoute() : null;
-    if (heldRoute) sdk.beginPageResolve(heldRoute);
+    if (contentMountsRef.current > 0 && overlayEnabled()) {
+      sdk.beginPageResolve(getActualRoute());
+    }
     const run = async () => {
       try {
         await sdk.init({
@@ -5613,20 +5637,59 @@ function AmplifyUpProvider({
         if (cancelled) return;
         if (pageContext) sdk.setPageContext(pageContext);
         const actualRoute = getActualRoute();
-        if (!actualRoute) {
+        if (actualRoute) sdk.routeChange(actualRoute);
+      } catch (err) {
+        if (cancelled) return;
+        console.error("Error initializing AmplifyUp SDK:", err);
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        if (!cancelled) {
           setInitialized(true);
-          setLoading(false);
-          return;
+          setInitVersion((v) => v + 1);
         }
-        sdk.routeChange(actualRoute);
+      }
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    pathname,
+    config.trackingId,
+    config.target,
+    config.debug,
+    config.dev,
+    config.siteId,
+    config.clientPersonalization,
+    pageContextKey
+  ]);
+  const resolveRunRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (resolveRunRef.current) resolveRunRef.current.cancelled = true;
+    };
+  }, []);
+  useEffect(() => {
+    if (initVersion === 0) return;
+    if (resolveRunRef.current?.version === initVersion) return;
+    const sdk = getSDK();
+    const actualRoute = getActualRoute();
+    if (!actualRoute || contentMountsRef.current === 0 || !overlayEnabled()) {
+      if (actualRoute) sdk.endPageResolve(actualRoute);
+      setPageConfig(null);
+      setLoading(false);
+      return;
+    }
+    if (resolveRunRef.current) resolveRunRef.current.cancelled = true;
+    const runState = { version: initVersion, cancelled: false };
+    resolveRunRef.current = runState;
+    const finish = () => {
+      sdk.endPageResolve(actualRoute);
+      if (!runState.cancelled) setLoading(false);
+    };
+    const run = async () => {
+      try {
         const preview = isComposerPreview();
-        const overlay = preview || config.clientPersonalization !== false;
-        if (!overlay) {
-          setInitialized(true);
-          setPageConfig(null);
-          setLoading(false);
-          return;
-        }
         if (loadedRouteRef.current && loadedRouteRef.current !== actualRoute) {
           setPageConfig(null);
           setError(null);
@@ -5635,9 +5698,7 @@ function AmplifyUpProvider({
         const orchestratorUrl = sdk.getOrchestratorUrl();
         const trackingId = sdk.getTrackingId();
         if (!trackingId || !orchestratorUrl || !edgeUrl) {
-          setInitialized(true);
           setError("SDK not initialized");
-          setLoading(false);
           return;
         }
         let variantKeys;
@@ -5670,7 +5731,7 @@ function AmplifyUpProvider({
           variantKeys,
           fetchOrchestratorPage: (route, isPreview) => sdk.fetchPageConfig(route, isPreview)
         });
-        if (cancelled) return;
+        if (runState.cancelled) return;
         const nextConfig = result.pageConfig || {
           id: "default",
           route: actualRoute,
@@ -5687,7 +5748,6 @@ function AmplifyUpProvider({
             result.pageConfig.pageTaxonomies || null
           );
         }
-        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
@@ -5701,31 +5761,17 @@ function AmplifyUpProvider({
         });
         loadedRouteRef.current = actualRoute;
       } catch (err) {
-        if (cancelled) return;
+        if (runState.cancelled) return;
         console.error("Error fetching page config:", err);
-        setInitialized(true);
         setError(err instanceof Error ? err.message : "Unknown error");
         setSource(null);
         setMeta(null);
       } finally {
-        if (heldRoute) sdk.endPageResolve(heldRoute);
-        if (!cancelled) setLoading(false);
+        finish();
       }
     };
     void run();
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    pathname,
-    config.trackingId,
-    config.target,
-    config.debug,
-    config.dev,
-    config.siteId,
-    config.clientPersonalization,
-    pageContextKey
-  ]);
+  }, [initVersion, hasPageContent]);
   useEffect(() => {
     const applyLayoutTree = (layoutTree) => {
       if (!Array.isArray(layoutTree)) return;
@@ -5759,13 +5805,13 @@ function AmplifyUpProvider({
       window.removeEventListener("amplifyup:layout-patch", onCustom);
     };
   }, []);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PageContentRegistryContext.Provider, { value: registerPageContent, children: /* @__PURE__ */ jsx(
     AmplifyUpContext.Provider,
     {
       value: { pageConfig, loading, error, source, meta },
       children
     }
-  );
+  ) });
 }
 function useAmplifyUp() {
   const context = useContext(AmplifyUpContext);