@amplifyup/sdk 0.1.66 → 0.1.68

package/dist/react.mjs

@@ -434,6 +434,13 @@ function isFieldEnvelope(value) {
   const rec = value;
   return typeof rec.name === "string" && "value" in rec && !("url" in rec);
 }
+var OBJECT_FIELD_KINDS = /* @__PURE__ */ new Set(["object", "array", "list"]);
+function isLeafFieldKind(kind) {
+  if (typeof kind !== "string") return false;
+  const normalized = kind.trim().toLowerCase();
+  if (!normalized) return false;
+  return !OBJECT_FIELD_KINDS.has(normalized);
+}
 function isPageResourceSentinel(value) {
   return !!value && typeof value === "object" && !Array.isArray(value) && typeof value.__amplifyupPageResource === "string";
 }
@@ -573,6 +580,10 @@ function toFieldEnvelopes(source, prefix = "", scope) {
       out[key] = { value: envelopeListRows(raw, owner), name: path };
       continue;
     }
+    if (ctx.leaf?.(path)) {
+      out[key] = withLeaf({ value: emptyValue(raw), name: path }, ctx);
+      continue;
+    }
     if (raw && typeof raw === "object" && !Array.isArray(raw) && !isPortableImageShape(raw) && !raw.$$typeof) {
       out[key] = toFieldEnvelopes(raw, path, ctx);
       continue;
@@ -601,15 +612,33 @@ function envelopeListRow(item, owner) {
   }
   return row;
 }
+var warnedMissingFieldKind = /* @__PURE__ */ new Set();
+function warnMissingFieldKind(fieldName) {
+  if (process.env.NODE_ENV === "production") return;
+  if (warnedMissingFieldKind.has(fieldName)) return;
+  warnedMissingFieldKind.add(fieldName);
+  console.warn(
+    `[AmplifyUp SDK] Field "${fieldName}" has no schema kind; using value-shape detection. Republish the component definition so its fields carry a type.`
+  );
+}
 function attachFieldEnvelopes(props, sources) {
   const raw = props && typeof props === "object" ? { ...props } : {};
   if (isBrandedFields(raw.fields)) return raw;
   const { fields: existing, ...content } = raw;
   const source = existing && typeof existing === "object" && !isFieldEnvelope(existing) ? existing : content;
+  const { reads } = normalizeEnvelopeSources(sources);
+  if (reads) {
+    for (const [fieldName, read] of Object.entries(reads)) {
+      if (!read?.kind) warnMissingFieldKind(fieldName);
+    }
+  }
   return {
     ...raw,
     fields: toFieldEnvelopes(source, "", {
-      owners: (fieldName) => listOwnerForField(fieldName, source, sources)
+      owners: (fieldName) => listOwnerForField(fieldName, source, sources),
+      // Top-level field paths equal field names; nested paths have no schema
+      // entry and fall back to shape-based handling.
+      leaf: (path) => isLeafFieldKind(reads?.[path]?.kind)
     })
   };
 }
@@ -884,6 +913,8 @@ function hydrateFieldsBag(bag, fields) {
     if (val && typeof val === "object" && !Array.isArray(val) && typeof val.name === "string" && "value" in val && !("url" in val)) {
       const env = val;
       out[key] = {
+        // Keep ref / readOnly / source — dropping them severs the write target.
+        ...val,
         name: env.name,
         value: isPageResourceSentinel2(env.value) ? hydratePageResourceValue(env.value, fields) : env.value
       };
@@ -965,6 +996,51 @@ function sdkDebugOnce(key, ...args) {
   console.log(...args);
 }
 
+// src/content/layoutProviderCache.ts
+var SETTLED_TTL_MS = 5e3;
+var inflight = /* @__PURE__ */ new Map();
+var settled = /* @__PURE__ */ new Map();
+function layoutProviderCacheKey(opts) {
+  const route = (opts.route || "/").split("?")[0] || "/";
+  return [
+    route,
+    opts.trackingId || "",
+    opts.instanceId || "",
+    opts.preview ? "1" : "0",
+    opts.working ? "1" : "0",
+    opts.zoneId || "",
+    opts.compositionId || ""
+  ].join("|");
+}
+function getSettledLayoutProvider(key) {
+  const entry = settled.get(key);
+  if (!entry) return void 0;
+  if (Date.now() - entry.at > SETTLED_TTL_MS) {
+    settled.delete(key);
+    return void 0;
+  }
+  return entry.value;
+}
+function dedupeLayoutProviderFetch(key, fetchFn) {
+  const cached = getSettledLayoutProvider(key);
+  if (cached !== void 0) return Promise.resolve(cached);
+  const existing = inflight.get(key);
+  if (existing) return existing;
+  const pending = fetchFn().then((value) => {
+    settled.set(key, { value, at: Date.now() });
+    return value;
+  }).finally(() => {
+    inflight.delete(key);
+  });
+  inflight.set(key, pending);
+  return pending;
+}
+function previewLayoutReady(opts) {
+  if (opts.hasClientLayout) return true;
+  if (opts.clientLoading) return false;
+  return opts.hasServerLayout;
+}
+
 // src/edge/normalizeRoute.ts
 function normalizeRoute(route) {
   let path = String(route || "").trim();
@@ -2378,6 +2454,32 @@ Available Console Commands:
    */
   async fetchPageConfig(route, preview = false) {
     const url = this.buildLayoutProviderUrl(route, preview);
+    const pageSearch = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : null;
+    const cacheKey = layoutProviderCacheKey({
+      route,
+      trackingId: this.getTrackingId(),
+      instanceId: getInstanceId(),
+      preview,
+      working: pageSearch ? isWorkingContentRequest(pageSearch) : false,
+      zoneId: pageSearch?.get("zoneId"),
+      compositionId: pageSearch?.get("compositionId")
+    });
+    return dedupeLayoutProviderFetch(cacheKey, async () => {
+      const startedAt = Date.now();
+      sdkDebug("[AmplifyUp SDK] layout/provider request", {
+        route,
+        at: new Date(startedAt).toISOString()
+      });
+      const page = await this.fetchPageConfigUncached(url);
+      sdkDebug("[AmplifyUp SDK] layout/provider response", {
+        route,
+        durationMs: Date.now() - startedAt,
+        hasPage: !!page
+      });
+      return page;
+    });
+  }
+  async fetchPageConfigUncached(url) {
     const response = await fetch(url);
     if (!response.ok) {
       if (response.status === 404) {
@@ -2736,6 +2838,12 @@ Available Console Commands:
           );
           return;
         }
+        if (event.data?.type === "AMPLIFYUP_LAYOUT_PATCH") {
+          window.dispatchEvent(
+            new CustomEvent("amplifyup:layout-patch", { detail: event.data })
+          );
+          return;
+        }
         if (event.data?.type === "COMPONENT_DELETABLE_STATUS") {
           const { componentId, deletable, nodeId } = event.data;
           const element = document.querySelector(`[data-component-id="${componentId}"]`);
@@ -3776,6 +3884,13 @@ function getSDK(adapter) {
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
+function useComposerPreviewFlag(force = false) {
+  const [detected, setDetected] = useState(false);
+  useEffect(() => {
+    if (!force && isComposerPreview()) setDetected(true);
+  }, [force]);
+  return force || detected;
+}
 
 // src/composer-store.ts
 var ComposerFieldStore = class {
@@ -3992,16 +4107,9 @@ function NodeWithFields({
   renderComponent,
   composerPreview
 }) {
-  return /* @__PURE__ */ jsx(
-    MaybeComposerProvider,
-    {
-      enabled: !!(composerPreview || isComposerPreview()),
-      layoutNodeId: nodeId,
-      children: renderComponent(componentId, props, slots, {
-        layoutNodeId: nodeId
-      })
-    }
-  );
+  return /* @__PURE__ */ jsx(MaybeComposerProvider, { enabled: !!composerPreview, layoutNodeId: nodeId, children: renderComponent(componentId, props, slots, {
+    layoutNodeId: nodeId
+  }) });
 }
 function AmplifyRendererInner({
   renderComponent,
@@ -4012,6 +4120,7 @@ function AmplifyRendererInner({
   composerPreview
 }) {
   const clientHook = useAmplifyUp();
+  const composerPreviewFlag = useComposerPreviewFlag(!!composerPreview);
   const pageConfig = serverPageConfig || clientHook.pageConfig || null;
   const loading = serverPageConfig ? false : clientHook.loading;
   const error = serverPageConfig ? null : clientHook.error;
@@ -4364,7 +4473,7 @@ function AmplifyRendererInner({
                 props: nodeRenderProps(node),
                 slots: slotsToPass,
                 renderComponent,
-                composerPreview
+                composerPreview: composerPreviewFlag
               }
             )
           }
@@ -4377,7 +4486,7 @@ 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: composerPreview || isComposerPreview() ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ComposerProvider, { children: /* @__PURE__ */ jsx("main", { children: composerPreviewFlag ? /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot-id": "main",
@@ -4526,7 +4635,7 @@ function AmplifyPageContent({
   errorComponent
 }) {
   const client = useAmplifyUp();
-  const preview = forceComposerPreview || isComposerPreview();
+  const preview = useComposerPreviewFlag(forceComposerPreview);
   const clientLayout = hasAmplifyLayout(client.pageConfig) ? client.pageConfig : null;
   const serverLayout = hasAmplifyLayout(pageConfigProp) ? pageConfigProp : null;
   let pageConfig = serverLayout ?? clientLayout;
@@ -4542,10 +4651,15 @@ function AmplifyPageContent({
   const previewCanvas = previewEmptyComponent ?? defaultPreviewCanvas();
   const previewLoading = previewLoadingComponent ?? previewCanvas;
   if (preview) {
+    const ready = previewLayoutReady({
+      clientLoading: client.loading,
+      hasClientLayout: !!clientLayout,
+      hasServerLayout: !!serverLayout
+    });
     return /* @__PURE__ */ jsx(
       AmplifyRenderer,
       {
-        pageConfig: pageConfig ?? void 0,
+        pageConfig: ready ? pageConfig ?? void 0 : void 0,
         renderComponent,
         composerPreview: true,
         loadingComponent: loadingComponent ?? previewLoading,
@@ -5005,6 +5119,18 @@ function warnNotScalarField(component, field, fieldValue) {
   }
   return false;
 }
+function assertNamedEnvelope(component, field) {
+  if (process.env.NODE_ENV === "production") return;
+  if (!field || typeof field !== "object" || Array.isArray(field)) return;
+  const rec = field;
+  if (!("value" in rec)) return;
+  if (typeof rec.name === "string" && rec.name) return;
+  throw new Error(
+    `[AmplifyUp SDK] ${component} received an envelope-shaped object with a \`value\` but no \`name\` \u2014 a partial envelope was manufactured upstream (keys: ${Object.keys(
+      rec
+    ).join(", ")}). Find the producer; do not strip or rebuild envelopes.`
+  );
+}
 var warnedReadOnlyFields = /* @__PURE__ */ new Set();
 function warnReadOnlyRowField(name) {
   if (process.env.NODE_ENV === "production") return;
@@ -5040,6 +5166,7 @@ function Field(props) {
   const hasField = isFieldEnvelope(field);
   const hasValue = hasOwnProp(props, "value");
   const { editName, fieldValue, ref } = useBoundField(field, value, name, "Field");
+  assertNamedEnvelope("Field", field);
   warnProjectionProps("Field", hasField, hasValue, name);
   if (warnNotScalarField("Field", field, fieldValue)) {
     return null;
@@ -5100,6 +5227,7 @@ function RichText(props) {
     name,
     "RichText"
   );
+  assertNamedEnvelope("RichText", field);
   if (!hasField && !hasValueProp && !name) {
     return null;
   }
@@ -5211,6 +5339,7 @@ function Image(props) {
     ...imgProps
   } = props;
   const context = useContext(ComponentContext);
+  assertNamedEnvelope("Image", field);
   const coerced = coerceImageField(field, value, name);
   const boundField = coerced.field;
   const hasField = isFieldEnvelope(boundField);
@@ -5247,25 +5376,8 @@ function Image(props) {
       '[AmplifyUp SDK] Image value={\u2026} requires name="\u2026" for computed values'
     );
   }
-  const img = src ? /* @__PURE__ */ jsx(
-    "img",
-    {
-      ...imgProps,
-      src,
-      alt,
-      className: fieldAttrs ? void 0 : className,
-      width,
-      height,
-      style: fieldAttrs ? {
-        display: "block",
-        width: "100%",
-        height: "100%",
-        objectFit: "cover",
-        pointerEvents: "none"
-      } : typeof imgProps.style === "object" && imgProps.style ? imgProps.style : void 0
-    }
-  ) : null;
-  if (fieldAttrs) {
+  if (!src) {
+    if (!composerEdit || !fieldAttrs) return null;
     return /* @__PURE__ */ jsx(
       "span",
       {
@@ -5280,15 +5392,28 @@ function Image(props) {
           minHeight: height ? void 0 : 80,
           width: width || "100%",
           height: height || void 0,
-          cursor: "pointer",
-          background: src ? void 0 : "color-mix(in srgb, currentColor 8%, transparent)"
-        },
-        children: img
+          background: "color-mix(in srgb, currentColor 8%, transparent)",
+          cursor: "pointer"
+        }
       }
     );
   }
-  if (!src) return null;
-  return img;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ...imgProps,
+      ...fieldAttrs,
+      src,
+      alt,
+      className,
+      width,
+      height,
+      style: {
+        ...typeof imgProps.style === "object" && imgProps.style ? imgProps.style : {},
+        ...composerEdit && fieldAttrs ? { cursor: "pointer" } : null
+      }
+    }
+  );
 }
 var usePathname = null;
 if (typeof window !== "undefined") {
@@ -5450,6 +5575,13 @@ function AmplifyUpProvider({
           description: "This page has not been published yet.",
           layoutTree: []
         };
+        if (result.pageConfig) {
+          sdk.applyResolvedPageData(
+            result.pageConfig.pageData || null,
+            result.pageConfig.route,
+            extractRouteParams(result.pageConfig.route, actualRoute)
+          );
+        }
         setInitialized(true);
         setSource((prev) => prev === result.source ? prev : result.source);
         setMeta(
@@ -5462,13 +5594,6 @@ function AmplifyUpProvider({
           }
           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;
@@ -5495,6 +5620,39 @@ function AmplifyUpProvider({
     config.clientPersonalization,
     pageContextKey
   ]);
+  useEffect(() => {
+    const applyLayoutTree = (layoutTree) => {
+      if (!Array.isArray(layoutTree)) return;
+      setPageConfig((prev) => {
+        const next = envelopePageConfig({
+          ...prev || {
+            id: "patched",
+            route: getActualRoute(),
+            title: "",
+            layoutTree: []
+          },
+          layoutTree
+        });
+        return next;
+      });
+      setLoading(false);
+    };
+    const onMessage = (event) => {
+      if (event.data?.type === "AMPLIFYUP_LAYOUT_PATCH") {
+        applyLayoutTree(event.data.layoutTree);
+      }
+    };
+    const onCustom = (event) => {
+      const detail = event.detail || {};
+      applyLayoutTree(detail.layoutTree);
+    };
+    window.addEventListener("message", onMessage);
+    window.addEventListener("amplifyup:layout-patch", onCustom);
+    return () => {
+      window.removeEventListener("message", onMessage);
+      window.removeEventListener("amplifyup:layout-patch", onCustom);
+    };
+  }, []);
   return /* @__PURE__ */ jsx(
     AmplifyUpContext.Provider,
     {