@amplifyup/sdk 0.1.26 → 0.1.28

package/dist/AmplifyRenderer.mjs

@@ -1610,6 +1610,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}"]`);
@@ -1796,6 +1802,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;
@@ -2033,6 +2043,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() {
@@ -2341,6 +2359,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;
@@ -2547,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 {
@@ -2612,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,
@@ -2966,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
+          }
+        )
       }
     ) });
   };