@amplifyup/sdk 0.1.76 → 0.1.77

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, useSyncExternalStore, useCallback } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { marked } from 'marked';
 
@@ -1089,9 +1089,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
@@ -4010,14 +4009,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 +4076,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 +4103,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 || {};
@@ -4538,17 +4536,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 }) {
@@ -4724,11 +4721,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 +4750,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 +4759,7 @@ function AmplifyPageContent({
       emptyComponent,
       errorComponent
     }
-  );
+  ) });
 }
 
 // src/slot-state.ts