@amplifyup/sdk 0.1.26 → 0.1.28

package/dist/AmplifyRenderer.js

@@ -1612,6 +1612,12 @@ Available Console Commands:
         return;
       }
       try {
+        if (event.data?.type === "AMPLIFYUP_FIELD_PATCH") {
+          window.dispatchEvent(
+            new CustomEvent("amplifyup:field-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}"]`);
@@ -1798,6 +1804,10 @@ Available Console Commands:
   setEventSelectionMode(enabled) {
     if (typeof document === "undefined") return;
     this.eventSelectionMode = enabled;
+    if (typeof window !== "undefined") {
+      window.__AMPLIFYUP_EVENT_SELECTION__ = enabled;
+      window.dispatchEvent(new CustomEvent("amplifyup:composer-edit"));
+    }
     if (this.eventSelectionClickHandler) {
       document.removeEventListener("click", this.eventSelectionClickHandler, true);
       this.eventSelectionClickHandler = null;
@@ -2035,6 +2045,14 @@ Available Console Commands:
         el.classList.add("amplifyup-selected");
       }
     });
+    if (typeof window !== "undefined") {
+      window.__AMPLIFYUP_COMPOSER_EDIT__ = highlightComponents;
+      window.dispatchEvent(
+        new CustomEvent("amplifyup:composer-edit", {
+          detail: { enabled: highlightComponents }
+        })
+      );
+    }
   }
   /** Document-level drag/drop for cross-iframe drags from Composer sidebar. */
   setupComposerDragDrop() {
@@ -2343,6 +2361,12 @@ Available Console Commands:
     const clearSelection = opts?.clearSelection !== false;
     this.highlightingEnabled = false;
     this.teardownComposerDragDrop();
+    if (opts?.clearSelection !== false && typeof window !== "undefined") {
+      window.__AMPLIFYUP_COMPOSER_EDIT__ = false;
+      window.dispatchEvent(
+        new CustomEvent("amplifyup:composer-edit", { detail: { enabled: false } })
+      );
+    }
     if (this.mutationObserver) {
       this.mutationObserver.disconnect();
       this.mutationObserver = null;
@@ -2549,6 +2573,36 @@ var trackContentView = (contentId, contentType, properties) => getSDK().trackCon
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
 react.createContext(null);
+function useLiveComposerProps(layoutNodeId, props) {
+  const [live, setLive] = react.useState(props);
+  react.useEffect(() => {
+    setLive(props);
+  }, [props]);
+  react.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 {
@@ -2614,6 +2668,18 @@ var ComponentRenderBoundary = class extends react.Component {
     return this.props.children;
   }
 };
+function LiveNodeRender({
+  nodeId,
+  componentId,
+  props,
+  slots,
+  renderComponent
+}) {
+  const liveProps = useLiveComposerProps(nodeId, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderComponent(componentId, liveProps, slots, {
+    layoutNodeId: nodeId
+  }) });
+}
 function AmplifyRenderer({
   renderComponent,
   pageConfig: serverPageConfig,
@@ -2968,20 +3034,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__ */ jsxRuntime.jsx("div", { "data-node-id": node.id, "data-amplifyup-node": "", children: /* @__PURE__ */ jsxRuntime.jsx(
       ComponentRenderBoundary,
       {
         componentId: node.componentId,
         nodeId: node.id,
-        children: renderComponent(node.componentId, node.props || {}, slotsToPass, {
-          layoutNodeId: node.id
-        })
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          LiveNodeRender,
+          {
+            nodeId: node.id,
+            componentId: node.componentId,
+            props: node.props || {},
+            slots: slotsToPass,
+            renderComponent
+          }
+        )
       }
     ) });
   };