@amplifyup/sdk 0.1.61 → 0.1.62

package/dist/AmplifyRenderer.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { createContext, memo, useState, useEffect, Fragment as Fragment$1, useContext, Component } from 'react';
+import { createContext, memo, useState, useEffect, Fragment as Fragment$1, useContext, Component, useMemo, useRef } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import 'marked';
 
@@ -405,6 +405,106 @@ function isComposerPreview() {
   return false;
 }
 
+// src/field-envelope.ts
+var FIELDS_BRAND = Symbol("amplifyup.fields");
+function isBrandedFields(value) {
+  return !!value && typeof value === "object" && FIELDS_BRAND in value;
+}
+function brandFields(bag) {
+  if (isBrandedFields(bag)) return bag;
+  Object.defineProperty(bag, FIELDS_BRAND, {
+    value: true,
+    enumerable: false,
+    configurable: false
+  });
+  return bag;
+}
+function isFieldEnvelope(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const rec = value;
+  return typeof rec.name === "string" && "value" in rec && !("url" in rec);
+}
+function isPortableImageShape(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  return "url" in value;
+}
+function joinPath(prefix, key) {
+  return prefix ? `${prefix}.${key}` : key;
+}
+function emptyValue(raw) {
+  if (raw === void 0) return null;
+  return raw;
+}
+function toFieldEnvelopes(source, prefix = "") {
+  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)) {
+    const path = joinPath(prefix, key);
+    if (isFieldEnvelope(raw)) {
+      out[key] = { value: raw.value ?? null, name: raw.name || path };
+      continue;
+    }
+    if (raw && typeof raw === "object" && !Array.isArray(raw) && !isPortableImageShape(raw) && !raw.$$typeof) {
+      out[key] = toFieldEnvelopes(raw, path);
+      continue;
+    }
+    out[key] = { value: emptyValue(raw), name: path };
+  }
+  return brandFields(out);
+}
+function attachFieldEnvelopes(props) {
+  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) };
+}
+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);
+    for (const slot of rec.slots || []) {
+      walkLayoutNodes(slot.children);
+    }
+  }
+}
+function envelopePageConfig(page) {
+  if (!page || typeof page !== "object") return page ?? null;
+  const tree = page.layoutTree;
+  if (Array.isArray(tree)) walkLayoutNodes(tree);
+  return page;
+}
+function collectFieldPatches(props) {
+  const out = [];
+  const walk = (obj, prefix) => {
+    for (const [key, raw] of Object.entries(obj)) {
+      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 });
+        continue;
+      }
+      if (raw && typeof raw === "object" && !Array.isArray(raw) && !isPortableImageShape(raw) && !raw.$$typeof) {
+        walk(raw, path);
+        continue;
+      }
+      out.push({ name: path, value: emptyValue(raw) });
+    }
+  };
+  if (props && typeof props === "object" && !Array.isArray(props)) {
+    walk(props, "");
+  }
+  return out;
+}
+
 // src/page-context.ts
 var defaultLog = {
   warn: (...args) => {
@@ -553,7 +653,70 @@ function mergeEventContext(properties, attached) {
     ...attached.pageRoute ? { pageRoute: attached.pageRoute } : {}
   };
 }
+var PAGE_RESOURCE_MARKER = "__amplifyupPageResource";
+function isPageResourceSentinel(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value) && typeof value[PAGE_RESOURCE_MARKER] === "string";
+}
+function getByDotPath(source, path) {
+  if (!path) return source;
+  const parts = path.split(".").filter(Boolean);
+  let cur = source;
+  for (const part of parts) {
+    if (cur == null || typeof cur !== "object" || Array.isArray(cur)) {
+      return void 0;
+    }
+    cur = cur[part];
+  }
+  return cur;
+}
+function hydratePageResourceValue(value, fields) {
+  if (!isPageResourceSentinel(value)) return value;
+  if (!fields) return null;
+  if (value.path) return getByDotPath(fields, value.path) ?? null;
+  return fields;
+}
+function hydrateFieldsBag(bag, fields) {
+  const out = {};
+  for (const [key, val] of Object.entries(bag)) {
+    if (val && typeof val === "object" && !Array.isArray(val) && typeof val.name === "string" && "value" in val && !("url" in val)) {
+      const env = val;
+      out[key] = {
+        name: env.name,
+        value: isPageResourceSentinel(env.value) ? hydratePageResourceValue(env.value, fields) : env.value
+      };
+      continue;
+    }
+    if (val && typeof val === "object" && !Array.isArray(val) && !("url" in val)) {
+      out[key] = hydrateFieldsBag(val, fields);
+      continue;
+    }
+    out[key] = isPageResourceSentinel(val) ? hydratePageResourceValue(val, fields) : val;
+  }
+  return out;
+}
+function hydratePageResourceProps(props, fields) {
+  const source = props && typeof props === "object" ? props : {};
+  const out = { ...source };
+  if (out.fields && typeof out.fields === "object" && !Array.isArray(out.fields)) {
+    const next = hydrateFieldsBag(out.fields, fields);
+    out.fields = isBrandedFields(out.fields) ? brandFields(next) : next;
+  }
+  for (const [key, val] of Object.entries(out)) {
+    if (key === "fields") continue;
+    if (isPageResourceSentinel(val)) {
+      out[key] = hydratePageResourceValue(val, fields);
+    }
+  }
+  return out;
+}
+
+// src/page-resource-runtime.ts
+var pageResourceFields = null;
 function setPageResourceFields(fields) {
+  pageResourceFields = fields && typeof fields === "object" ? fields : null;
+}
+function getPageResourceFields() {
+  return pageResourceFields;
 }
 
 // src/debug.ts
@@ -1236,6 +1399,7 @@ var AmplifyUpSDK = class {
         this.resolvedPageData,
         this.resolvedPageRoute
       );
+      setPageResourceFields(null);
       return;
     }
     this.attachedPageContext = applyPageContext(this.pendingPageContext, {
@@ -1664,7 +1828,7 @@ Available Console Commands:
         this.refreshEventTracking();
       }, 800);
     }
-    return pageConfig;
+    return envelopePageConfig(pageConfig);
   }
   /**
    * Set up view-level event tracking based on configuration
@@ -3037,31 +3201,66 @@ function getSDK(adapter) {
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
-createContext(null);
-function useLiveComposerProps(layoutNodeId, props) {
-  const [patch, setPatch] = useState(null);
-  useEffect(() => {
-    setPatch(null);
-    const matchesNode = (nodeId) => {
-      if (nodeId && layoutNodeId && String(nodeId) !== String(layoutNodeId)) {
-        return false;
-      }
-      return true;
+
+// src/composer-store.ts
+var ComposerFieldStore = class {
+  constructor() {
+    this.values = /* @__PURE__ */ new Map();
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  get(name) {
+    return this.values.has(name) ? this.values.get(name) : void 0;
+  }
+  set(name, value) {
+    if (!name) return;
+    this.values.set(name, value);
+    const set = this.listeners.get(name);
+    if (!set) return;
+    for (const fn of set) fn();
+  }
+  subscribe(name, fn) {
+    if (!name) return () => {
     };
+    let set = this.listeners.get(name);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.listeners.set(name, set);
+    }
+    set.add(fn);
+    return () => {
+      set.delete(fn);
+      if (set.size === 0) this.listeners.delete(name);
+    };
+  }
+};
+var ComposerStoreContext = createContext(null);
+function matchesNode(eventNodeId, layoutNodeId) {
+  if (eventNodeId && layoutNodeId && String(eventNodeId) !== String(layoutNodeId)) {
+    return false;
+  }
+  return true;
+}
+function ComposerProvider({
+  layoutNodeId,
+  children
+}) {
+  const storeRef = useRef(null);
+  if (!storeRef.current) storeRef.current = new ComposerFieldStore();
+  const store = storeRef.current;
+  useEffect(() => {
     const applyField = (fieldName, value, nodeId) => {
       if (!fieldName || typeof fieldName !== "string") return;
-      if (!matchesNode(nodeId)) return;
-      setPatch((prev) => ({ ...prev || {}, [fieldName]: value }));
+      if (!matchesNode(nodeId, layoutNodeId)) return;
+      store.set(fieldName, value);
     };
     const applyProps = (nextProps, nodeId) => {
       if (!nextProps || typeof nextProps !== "object" || Array.isArray(nextProps)) {
         return;
       }
-      if (!matchesNode(nodeId)) return;
-      setPatch((prev) => ({
-        ...prev || {},
-        ...nextProps
-      }));
+      if (!matchesNode(nodeId, layoutNodeId)) return;
+      for (const patch of collectFieldPatches(nextProps)) {
+        store.set(patch.name, patch.value);
+      }
     };
     const onPatch = (event) => {
       const detail = event.detail || {};
@@ -3087,9 +3286,19 @@ function useLiveComposerProps(layoutNodeId, props) {
       window.removeEventListener("amplifyup:props-patch", onPropsPatch);
       window.removeEventListener("message", onMessage);
     };
-  }, [layoutNodeId]);
-  return patch ? { ...props, ...patch } : props;
+  }, [layoutNodeId, store]);
+  return /* @__PURE__ */ jsx(ComposerStoreContext.Provider, { value: store, children });
 }
+function MaybeComposerProvider({
+  enabled,
+  layoutNodeId,
+  children
+}) {
+  const content = useMemo(() => children, [children]);
+  if (!enabled) return /* @__PURE__ */ jsx(Fragment, { children: content });
+  return /* @__PURE__ */ jsx(ComposerProvider, { layoutNodeId, children });
+}
+createContext(null);
 var usePathname = null;
 if (typeof window !== "undefined") {
   try {
@@ -3109,9 +3318,19 @@ function useAmplifyUp() {
   return context;
 }
 function nodeRenderProps(node) {
+  const settings = node.settings || {};
+  const hydrated = hydratePageResourceProps(
+    node.props || {},
+    getPageResourceFields()
+  );
+  const fields = hydrated.fields;
+  const branded = isBrandedFields(fields) ? fields : brandFields(
+    fields && typeof fields === "object" ? fields : {}
+  );
   return {
-    ...node.settings || {},
-    ...node.props || {}
+    ...settings,
+    ...hydrated,
+    fields: branded
   };
 }
 var ComponentRenderBoundary = class extends Component {
@@ -3161,17 +3380,24 @@ var ComponentRenderBoundary = class extends Component {
     return this.props.children;
   }
 };
-function LiveNodeRender({
+function NodeWithFields({
   nodeId,
   componentId,
   props,
   slots,
-  renderComponent
+  renderComponent,
+  composerPreview
 }) {
-  const liveProps = useLiveComposerProps(nodeId, props);
-  return /* @__PURE__ */ jsx(Fragment, { children: renderComponent(componentId, liveProps, slots, {
-    layoutNodeId: nodeId
-  }) });
+  return /* @__PURE__ */ jsx(
+    MaybeComposerProvider,
+    {
+      enabled: !!(composerPreview || isComposerPreview()),
+      layoutNodeId: nodeId,
+      children: renderComponent(componentId, props, slots, {
+        layoutNodeId: nodeId
+      })
+    }
+  );
 }
 function AmplifyRendererInner({
   renderComponent,
@@ -3527,13 +3753,14 @@ function AmplifyRendererInner({
             componentId: node.componentId,
             nodeId: node.id,
             children: /* @__PURE__ */ jsx(
-              LiveNodeRender,
+              NodeWithFields,
               {
                 nodeId: node.id,
                 componentId: node.componentId,
                 props: nodeRenderProps(node),
                 slots: slotsToPass,
-                renderComponent
+                renderComponent,
+                composerPreview
               }
             )
           }