@amplifyup/sdk 0.1.62 → 0.1.64

package/dist/AmplifyRenderer.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { createContext, memo, useState, useEffect, Fragment as Fragment$1, useContext, Component, useMemo, useRef } from 'react';
+import { createContext, memo, useState, useEffect, Fragment as Fragment$1, useContext, useRef, Component, useMemo } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import 'marked';
 
@@ -407,6 +407,16 @@ function isComposerPreview() {
 
 // src/field-envelope.ts
 var FIELDS_BRAND = Symbol("amplifyup.fields");
+var IDENTIFIER_KEYS = /* @__PURE__ */ new Set([
+  "id",
+  "_id",
+  "slug",
+  "key",
+  "_key",
+  "docId",
+  "_type",
+  "type"
+]);
 function isBrandedFields(value) {
   return !!value && typeof value === "object" && FIELDS_BRAND in value;
 }
@@ -428,6 +438,76 @@ function isPortableImageShape(value) {
   if (!value || typeof value !== "object" || Array.isArray(value)) return false;
   return "url" in value;
 }
+function isIdentifierKey(key) {
+  return IDENTIFIER_KEYS.has(key);
+}
+function isRecordList(value) {
+  if (!Array.isArray(value) || value.length === 0) return false;
+  const sample = value.find((item) => item != null);
+  if (sample === void 0) return false;
+  if (typeof sample !== "object" || Array.isArray(sample)) return false;
+  if (isPortableImageShape(sample)) return false;
+  if (sample.$$typeof) return false;
+  return true;
+}
+function isFieldRef(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const rec = value;
+  return typeof rec.providerId === "string" && !!rec.providerId && typeof rec.entity === "string" && !!rec.entity && typeof rec.id === "string" && !!rec.id;
+}
+function isListOwner(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const rec = value;
+  return typeof rec.providerId === "string" && !!rec.providerId && typeof rec.entity === "string" && !!rec.entity;
+}
+function composerStoreKey(name, ref, layoutNodeId) {
+  if (isFieldRef(ref)) {
+    return `record:${ref.providerId}:${ref.entity}:${ref.id}:${name}`;
+  }
+  return layoutNodeId ? `page:${layoutNodeId}:${name}` : name;
+}
+function listOwnerFromConnection(conn) {
+  if (!conn || typeof conn !== "object") return void 0;
+  if (conn.mode === "query") {
+    const providerId = String(conn.spec?.providerId || "").trim();
+    const entity = String(conn.spec?.entity || "").trim();
+    return providerId && entity ? { providerId, entity } : void 0;
+  }
+  if (conn.mode === "item" || conn.mode === "items") {
+    const providerId = String(conn.providerId || "").trim();
+    const entity = String(conn.entity || "").trim();
+    return providerId && entity ? { providerId, entity } : void 0;
+  }
+  return void 0;
+}
+function listOwnerFromSpec(spec) {
+  const providerId = String(spec?.providerId || "").trim();
+  const entity = String(spec?.entity || "").trim();
+  return providerId && entity ? { providerId, entity } : void 0;
+}
+function isEnvelopeSources(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const rec = value;
+  return rec.connections != null || rec.reads != null;
+}
+function normalizeEnvelopeSources(sources) {
+  if (!sources) return {};
+  if (isEnvelopeSources(sources) && !("mode" in sources)) {
+    return sources;
+  }
+  return { connections: sources };
+}
+function listOwnerForField(fieldName, props, sources) {
+  const { connections, reads } = normalizeEnvelopeSources(sources);
+  const resourceName = reads?.[fieldName]?.resource || fieldName;
+  const fromConn = listOwnerFromConnection(connections?.[resourceName]);
+  if (fromConn) return fromConn;
+  const paging = props?.[`${fieldName}Pagination`];
+  if (paging && typeof paging === "object" && !Array.isArray(paging)) {
+    return listOwnerFromSpec(paging.spec);
+  }
+  return void 0;
+}
 function joinPath(prefix, key) {
   return prefix ? `${prefix}.${key}` : key;
 }
@@ -435,39 +515,101 @@ function emptyValue(raw) {
   if (raw === void 0) return null;
   return raw;
 }
-function toFieldEnvelopes(source, prefix = "") {
+function rowId(raw) {
+  const candidates = [raw.id, raw._id, raw.docId, raw.key, raw._key];
+  for (const c of candidates) {
+    if (typeof c === "string" && c.trim()) return c;
+  }
+  return "";
+}
+function withLeaf(envelope, scope) {
+  if (isFieldRef(scope?.ref)) envelope.ref = scope.ref;
+  else if (scope?.readOnly) envelope.readOnly = true;
+  return envelope;
+}
+function toFieldEnvelopes(source, prefix = "", scope) {
+  const ctx = isFieldRef(scope) ? { ref: scope } : scope || {};
   const input = source && typeof source === "object" && !Array.isArray(source) ? source : {};
   if (isBrandedFields(input)) {
     return input;
   }
   const out = {};
   for (const [key, raw] of Object.entries(input)) {
+    if (isIdentifierKey(key) && (typeof raw === "string" || raw == null)) {
+      out[key] = raw ?? "";
+      continue;
+    }
     const path = joinPath(prefix, key);
     if (isFieldEnvelope(raw)) {
-      out[key] = { value: raw.value ?? null, name: raw.name || path };
+      const inner = raw.value;
+      if (isRecordList(inner)) {
+        const owner = ctx.owners?.(key);
+        out[key] = {
+          value: envelopeListRows(inner, owner),
+          name: raw.name || path
+        };
+        continue;
+      }
+      out[key] = withLeaf(
+        { value: raw.value ?? null, name: raw.name || path },
+        raw.ref ? { ref: raw.ref } : ctx
+      );
+      continue;
+    }
+    if (isRecordList(raw)) {
+      const owner = ctx.owners?.(key);
+      out[key] = { value: envelopeListRows(raw, owner), name: path };
       continue;
     }
     if (raw && typeof raw === "object" && !Array.isArray(raw) && !isPortableImageShape(raw) && !raw.$$typeof) {
-      out[key] = toFieldEnvelopes(raw, path);
+      out[key] = toFieldEnvelopes(raw, path, ctx);
       continue;
     }
-    out[key] = { value: emptyValue(raw), name: path };
+    out[key] = withLeaf({ value: emptyValue(raw), name: path }, ctx);
   }
   return brandFields(out);
 }
-function attachFieldEnvelopes(props) {
+function envelopeListRows(items, owner) {
+  return items.map((item) => envelopeListRow(item, owner));
+}
+function envelopeListRow(item, owner) {
+  if (isBrandedFields(item) && typeof item.id === "string") {
+    return item;
+  }
+  const raw = item && typeof item === "object" && !Array.isArray(item) ? item : {};
+  const id = rowId(raw);
+  const ref = isListOwner(owner) && id ? { providerId: owner.providerId, entity: owner.entity, id } : void 0;
+  const fields = toFieldEnvelopes(raw, "", {
+    ref,
+    readOnly: !ref
+  });
+  const row = fields;
+  if (typeof row.id !== "string") {
+    row.id = id;
+  }
+  return row;
+}
+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;
-  return { ...raw, fields: toFieldEnvelopes(source) };
+  return {
+    ...raw,
+    fields: toFieldEnvelopes(source, "", {
+      owners: (fieldName) => listOwnerForField(fieldName, source, sources)
+    })
+  };
 }
 function walkLayoutNodes(nodes) {
   if (!Array.isArray(nodes)) return;
   for (const node of nodes) {
     if (!node || typeof node !== "object") continue;
     const rec = node;
-    rec.props = attachFieldEnvelopes(rec.props);
+    rec.props = attachFieldEnvelopes(rec.props, {
+      connections: rec.resources,
+      reads: rec.reads
+    });
     for (const slot of rec.slots || []) {
       walkLayoutNodes(slot.children);
     }
@@ -481,15 +623,36 @@ function envelopePageConfig(page) {
 }
 function collectFieldPatches(props) {
   const out = [];
+  const walkRows = (items) => {
+    for (const item of items) {
+      if (isBrandedFields(item) || item && typeof item === "object" && !Array.isArray(item) && !isFieldEnvelope(item)) {
+        walk(item, "");
+      }
+    }
+  };
   const walk = (obj, prefix) => {
     for (const [key, raw] of Object.entries(obj)) {
+      if (isIdentifierKey(key)) continue;
       if (key === "fields" && raw && typeof raw === "object" && !Array.isArray(raw) && !isFieldEnvelope(raw)) {
         walk(raw, prefix);
         continue;
       }
       const path = joinPath(prefix, key);
       if (isFieldEnvelope(raw)) {
-        out.push({ name: raw.name || path, value: raw.value });
+        if (isRecordList(raw.value)) {
+          walkRows(raw.value);
+          continue;
+        }
+        const patch = {
+          name: raw.name || path,
+          value: raw.value
+        };
+        if (raw.ref) patch.ref = raw.ref;
+        out.push(patch);
+        continue;
+      }
+      if (isRecordList(raw)) {
+        walkRows(raw);
         continue;
       }
       if (raw && typeof raw === "object" && !Array.isArray(raw) && !isPortableImageShape(raw) && !raw.$$typeof) {
@@ -3232,39 +3395,62 @@ var ComposerFieldStore = class {
       if (set.size === 0) this.listeners.delete(name);
     };
   }
+  keys() {
+    return [...this.values.keys()];
+  }
+  delete(name) {
+    if (!name || !this.values.has(name)) return;
+    this.values.delete(name);
+    const set = this.listeners.get(name);
+    if (!set) return;
+    for (const fn of set) fn();
+  }
 };
 var ComposerStoreContext = createContext(null);
-function matchesNode(eventNodeId, layoutNodeId) {
-  if (eventNodeId && layoutNodeId && String(eventNodeId) !== String(layoutNodeId)) {
-    return false;
-  }
-  return true;
+var ComposerNodeContext = createContext(void 0);
+function applyComposerPatch(store, name, value, ref, layoutNodeId) {
+  store.set(composerStoreKey(name, ref, layoutNodeId), value);
 }
 function ComposerProvider({
-  layoutNodeId,
   children
 }) {
+  const existing = useContext(ComposerStoreContext);
   const storeRef = useRef(null);
   if (!storeRef.current) storeRef.current = new ComposerFieldStore();
-  const store = storeRef.current;
+  const store = existing || storeRef.current;
   useEffect(() => {
-    const applyField = (fieldName, value, nodeId) => {
+    if (existing) return;
+    const applyField = (fieldName, value, nodeId, ref) => {
       if (!fieldName || typeof fieldName !== "string") return;
-      if (!matchesNode(nodeId, layoutNodeId)) return;
-      store.set(fieldName, value);
+      const fieldRef = isFieldRef(ref) ? ref : void 0;
+      const layoutNodeId = typeof nodeId === "string" && nodeId ? nodeId : void 0;
+      applyComposerPatch(store, fieldName, value, fieldRef, layoutNodeId);
     };
     const applyProps = (nextProps, nodeId) => {
       if (!nextProps || typeof nextProps !== "object" || Array.isArray(nextProps)) {
         return;
       }
-      if (!matchesNode(nodeId, layoutNodeId)) return;
-      for (const patch of collectFieldPatches(nextProps)) {
-        store.set(patch.name, patch.value);
+      const layoutNodeId = typeof nodeId === "string" && nodeId ? nodeId : void 0;
+      for (const patch of collectFieldPatches(
+        nextProps
+      )) {
+        applyComposerPatch(
+          store,
+          patch.name,
+          patch.value,
+          patch.ref,
+          patch.ref ? void 0 : layoutNodeId
+        );
       }
     };
     const onPatch = (event) => {
       const detail = event.detail || {};
-      applyField(detail.fieldName, detail.value, detail.layoutNodeId);
+      applyField(
+        detail.fieldName,
+        detail.value,
+        detail.layoutNodeId,
+        detail.ref
+      );
     };
     const onPropsPatch = (event) => {
       const detail = event.detail || {};
@@ -3276,7 +3462,12 @@ function ComposerProvider({
         return;
       }
       if (event.data?.type !== "AMPLIFYUP_FIELD_PATCH") return;
-      applyField(event.data.fieldName, event.data.value, event.data.layoutNodeId);
+      applyField(
+        event.data.fieldName,
+        event.data.value,
+        event.data.layoutNodeId,
+        event.data.ref
+      );
     };
     window.addEventListener("amplifyup:field-patch", onPatch);
     window.addEventListener("amplifyup:props-patch", onPropsPatch);
@@ -3286,7 +3477,8 @@ function ComposerProvider({
       window.removeEventListener("amplifyup:props-patch", onPropsPatch);
       window.removeEventListener("message", onMessage);
     };
-  }, [layoutNodeId, store]);
+  }, [existing, store]);
+  if (existing) return /* @__PURE__ */ jsx(Fragment, { children });
   return /* @__PURE__ */ jsx(ComposerStoreContext.Provider, { value: store, children });
 }
 function MaybeComposerProvider({
@@ -3296,7 +3488,7 @@ function MaybeComposerProvider({
 }) {
   const content = useMemo(() => children, [children]);
   if (!enabled) return /* @__PURE__ */ jsx(Fragment, { children: content });
-  return /* @__PURE__ */ jsx(ComposerProvider, { layoutNodeId, children });
+  return /* @__PURE__ */ jsx(ComposerProvider, { children: /* @__PURE__ */ jsx(ComposerNodeContext.Provider, { value: layoutNodeId, children }) });
 }
 createContext(null);
 var usePathname = null;
@@ -3773,7 +3965,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("main", { children: composerPreview || isComposerPreview() ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ComposerProvider, { children: /* @__PURE__ */ jsx("main", { children: composerPreview || isComposerPreview() ? /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot-id": "main",
@@ -3782,7 +3974,7 @@ function AmplifyRendererInner({
       "data-slot-empty": layoutTree.length === 0 ? "true" : 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)) });
+  ) : layoutTree.map((node) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id)) }) });
 }
 var AmplifyRenderer = memo(AmplifyRendererInner);