@amplifyup/sdk 0.1.27 → 0.1.29

package/dist/AmplifyRenderer.mjs

@@ -2571,6 +2571,36 @@ var trackContentView = (contentId, contentType, properties) => getSDK().trackCon
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
 createContext(null);
+function useLiveComposerProps(layoutNodeId, props) {
+  const [live, setLive] = useState(props);
+  useEffect(() => {
+    setLive(props);
+  }, [props]);
+  useEffect(() => {
+    const apply = (fieldName, value, nodeId) => {
+      if (!fieldName || typeof fieldName !== "string") return;
+      if (nodeId && layoutNodeId && String(nodeId) !== String(layoutNodeId)) {
+        return;
+      }
+      setLive((prev) => ({ ...prev, [fieldName]: value }));
+    };
+    const onPatch = (event) => {
+      const detail = event.detail || {};
+      apply(detail.fieldName, detail.value, detail.layoutNodeId);
+    };
+    const onMessage = (event) => {
+      if (event.data?.type !== "AMPLIFYUP_FIELD_PATCH") return;
+      apply(event.data.fieldName, event.data.value, event.data.layoutNodeId);
+    };
+    window.addEventListener("amplifyup:field-patch", onPatch);
+    window.addEventListener("message", onMessage);
+    return () => {
+      window.removeEventListener("amplifyup:field-patch", onPatch);
+      window.removeEventListener("message", onMessage);
+    };
+  }, [layoutNodeId]);
+  return live;
+}
 var usePathname = null;
 if (typeof window !== "undefined") {
   try {
@@ -2636,6 +2666,18 @@ var ComponentRenderBoundary = class extends Component {
     return this.props.children;
   }
 };
+function LiveNodeRender({
+  nodeId,
+  componentId,
+  props,
+  slots,
+  renderComponent
+}) {
+  const liveProps = useLiveComposerProps(nodeId, props);
+  return /* @__PURE__ */ jsx(Fragment, { children: renderComponent(componentId, liveProps, slots, {
+    layoutNodeId: nodeId
+  }) });
+}
 function AmplifyRenderer({
   renderComponent,
   pageConfig: serverPageConfig,
@@ -2990,20 +3032,21 @@ function AmplifyRenderer({
       }
     }
     const slotsToPass = Object.keys(slotChildren).length > 0 ? slotChildren : void 0;
-    console.log(`[AmplifyRenderer] Calling renderComponent for ${node.componentId}`, {
-      hasSlots: !!slotsToPass,
-      slotKeys: slotsToPass ? Object.keys(slotsToPass) : [],
-      propKeys: Object.keys(node.props || {}),
-      props: node.props || {}
-    });
     return /* @__PURE__ */ jsx("div", { "data-node-id": node.id, "data-amplifyup-node": "", children: /* @__PURE__ */ jsx(
       ComponentRenderBoundary,
       {
         componentId: node.componentId,
         nodeId: node.id,
-        children: renderComponent(node.componentId, node.props || {}, slotsToPass, {
-          layoutNodeId: node.id
-        })
+        children: /* @__PURE__ */ jsx(
+          LiveNodeRender,
+          {
+            nodeId: node.id,
+            componentId: node.componentId,
+            props: node.props || {},
+            slots: slotsToPass,
+            renderComponent
+          }
+        )
       }
     ) });
   };