@measured/puck 0.19.0-canary.85ee736 → 0.19.0-canary.8d459e4e

package/dist/rsc.js

@@ -68,7 +68,8 @@ var __async = (__this, __arguments, generator) => {
 var rsc_exports = {};
 __export(rsc_exports, {
   Render: () => Render,
-  resolveAllData: () => resolveAllData
+  resolveAllData: () => resolveAllData,
+  transformProps: () => transformProps
 });
 module.exports = __toCommonJS(rsc_exports);
 
@@ -80,7 +81,7 @@ var rootAreaId = "root";
 var rootZone = "default-zone";
 var rootDroppableId = `${rootAreaId}:${rootZone}`;
 
-// lib/setup-zone.ts
+// lib/data/setup-zone.ts
 var setupZone = (data, zoneKey) => {
   if (zoneKey === rootDroppableId) {
     return data;
@@ -92,8 +93,76 @@ var setupZone = (data, zoneKey) => {
   return newData;
 };
 
-// components/ServerRender/index.tsx
+// lib/use-slots.tsx
+var import_react2 = require("react");
+function useSlots(config, props, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
+  const slotProps = (0, import_react2.useMemo)(() => {
+    if (!(config == null ? void 0 : config.fields)) return props;
+    const slotProps2 = {};
+    const fieldKeys = Object.keys(config.fields);
+    for (let i = 0; i < fieldKeys.length; i++) {
+      const fieldKey = fieldKeys[i];
+      const field = config.fields[fieldKey];
+      if ((field == null ? void 0 : field.type) === "slot") {
+        const content = props[fieldKey] || [];
+        const render = (readOnly == null ? void 0 : readOnly[fieldKey]) || forceReadOnly ? renderSlotRender : renderSlotEdit;
+        const Slot = (dzProps) => render(__spreadProps(__spreadValues({
+          allow: field.allow,
+          disallow: field.disallow
+        }, dzProps), {
+          zone: fieldKey,
+          content
+        }));
+        slotProps2[fieldKey] = Slot;
+      }
+    }
+    return slotProps2;
+  }, [config, readOnly, forceReadOnly]);
+  return __spreadValues(__spreadValues({}, props), slotProps);
+}
+
+// components/SlotRender/server.tsx
+var import_react3 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var SlotRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlotRender, __spreadValues({}, props));
+var Item = ({
+  config,
+  item,
+  metadata
+}) => {
+  const Component = config.components[item.type];
+  const props = useSlots(Component, item.props, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component.render,
+    __spreadProps(__spreadValues({}, props), {
+      puck: __spreadProps(__spreadValues({}, props.puck), {
+        renderDropZone: DropZoneRender,
+        metadata: metadata || {}
+      })
+    })
+  );
+};
+var SlotRender = (0, import_react3.forwardRef)(
+  function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style, ref, children: content.map((item) => {
+      if (!config.components[item.type]) {
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Item,
+        {
+          config,
+          item,
+          metadata
+        },
+        item.props.id
+      );
+    }) });
+  }
+);
+
+// components/ServerRender/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function DropZoneRender({
   zone,
   data,
@@ -110,28 +179,26 @@ function DropZoneRender({
     zoneCompound = `${areaId}:${zone}`;
     content = setupZone(data, zoneCompound).zones[zoneCompound];
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: content.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: content.map((item) => {
     const Component = config.components[item.type];
-    if (Component) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        Component.render,
-        __spreadProps(__spreadValues({}, item.props), {
-          puck: {
-            renderDropZone: ({ zone: zone2 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              DropZoneRender,
-              {
-                zone: zone2,
-                data,
-                areaId: item.props.id,
-                config,
-                metadata
-              }
-            ),
+    const props = __spreadProps(__spreadValues({}, item.props), {
+      puck: {
+        renderDropZone: ({ zone: zone2 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          DropZoneRender,
+          {
+            zone: zone2,
+            data,
+            areaId: item.props.id,
+            config,
             metadata
           }
-        }),
-        item.props.id
-      );
+        ),
+        metadata
+      }
+    });
+    const propsWithSlots = useSlots(Component, props, (props2) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
+    if (Component) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component.render, __spreadValues({}, propsWithSlots), item.props.id);
     }
     return null;
   }) });
@@ -139,44 +206,43 @@ function DropZoneRender({
 function Render({
   config,
   data,
-  metadata
+  metadata = {}
 }) {
   var _a;
+  const rootProps = data.root.props || data.root;
+  const title = rootProps.title || "";
+  const props = __spreadProps(__spreadValues({}, rootProps), {
+    puck: {
+      renderDropZone: ({ zone }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        DropZoneRender,
+        {
+          zone,
+          data,
+          config,
+          metadata
+        }
+      ),
+      isEditing: false,
+      dragRef: null,
+      metadata
+    },
+    title,
+    editMode: false,
+    id: "puck-root"
+  });
+  const propsWithSlots = useSlots(config.root, props, (props2) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
   if ((_a = config.root) == null ? void 0 : _a.render) {
-    const rootProps = data.root.props || data.root;
-    const title = rootProps.title || "";
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      config.root.render,
-      __spreadProps(__spreadValues({}, rootProps), {
-        puck: {
-          renderDropZone: ({ zone }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            DropZoneRender,
-            {
-              zone,
-              data,
-              config,
-              metadata
-            }
-          ),
-          isEditing: false,
-          dragRef: null
-        },
-        title,
-        editMode: false,
-        id: "puck-root",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          DropZoneRender,
-          {
-            config,
-            data,
-            zone: rootZone,
-            metadata
-          }
-        )
-      })
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(config.root.render, __spreadProps(__spreadValues({}, propsWithSlots), { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      DropZoneRender,
+      {
+        config,
+        data,
+        zone: rootZone,
+        metadata
+      }
+    ) }));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     DropZoneRender,
     {
       config,
@@ -187,6 +253,40 @@ function Render({
   );
 }
 
+// lib/data/is-slot.ts
+var isSlot = (prop) => {
+  var _a, _b;
+  return Array.isArray(prop) && typeof ((_a = prop[0]) == null ? void 0 : _a.type) === "string" && typeof ((_b = prop[0]) == null ? void 0 : _b.props) === "object";
+};
+var createIsSlotConfig = (config) => (itemType, propName, propValue) => {
+  var _a, _b;
+  const configForComponent = itemType === "root" ? config == null ? void 0 : config.root : config == null ? void 0 : config.components[itemType];
+  if (!configForComponent) return isSlot(propValue);
+  return ((_b = (_a = configForComponent.fields) == null ? void 0 : _a[propName]) == null ? void 0 : _b.type) === "slot";
+};
+
+// lib/data/map-slots.ts
+function mapSlotsAsync(_0, _1) {
+  return __async(this, arguments, function* (item, map, recursive = true, isSlot2 = isSlot) {
+    const props = __spreadValues({}, item.props);
+    const propKeys = Object.keys(props);
+    for (let i = 0; i < propKeys.length; i++) {
+      const propKey = propKeys[i];
+      const itemType = "type" in item ? item.type : "root";
+      if (isSlot2(itemType, propKey, props[propKey])) {
+        const content = props[propKey];
+        const mappedContent = recursive ? yield Promise.all(
+          content.map((item2) => __async(this, null, function* () {
+            return yield mapSlotsAsync(item2, map, recursive, isSlot2);
+          }))
+        ) : content;
+        props[propKey] = yield map(mappedContent, propKey);
+      }
+    }
+    return __spreadProps(__spreadValues({}, item), { props });
+  });
+}
+
 // lib/get-changed.ts
 var getChanged = (newItem, oldItem) => {
   return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
@@ -199,26 +299,15 @@ var getChanged = (newItem, oldItem) => {
 };
 
 // lib/resolve-component-data.ts
+var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
 var cache = { lastChange: {} };
-var resolveAllComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (content, config, metadata = {}, onResolveStart, onResolveEnd) {
-  return yield Promise.all(
-    content.map((item) => __async(void 0, null, function* () {
-      return yield resolveComponentData(
-        item,
-        config,
-        metadata,
-        onResolveStart,
-        onResolveEnd
-      );
-    }))
-  );
-});
-var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd) {
-  const configForItem = config.components[item.type];
-  if (configForItem.resolveData) {
-    const { item: oldItem = null, resolved = {} } = cache.lastChange[item.props.id] || {};
-    if (item && item === oldItem) {
-      return resolved;
+var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace", recursive = true) {
+  const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
+  if ((configForItem == null ? void 0 : configForItem.resolveData) && item.props) {
+    const id = "id" in item.props ? item.props.id : "root";
+    const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
+    if (item && (0, import_fast_deep_equal.default)(item, oldItem)) {
+      return { node: resolved, didChange: false };
     }
     const changed = getChanged(item, oldItem);
     if (onResolveStart) {
@@ -227,97 +316,151 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
     const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, {
       changed,
       lastData: oldItem,
-      metadata
+      metadata: __spreadValues(__spreadValues({}, metadata), configForItem.metadata),
+      trigger
     });
-    const resolvedItem = __spreadProps(__spreadValues({}, item), {
+    let resolvedItem = __spreadProps(__spreadValues({}, item), {
       props: __spreadValues(__spreadValues({}, item.props), resolvedProps)
     });
+    if (recursive) {
+      resolvedItem = yield mapSlotsAsync(
+        resolvedItem,
+        (content) => __async(void 0, null, function* () {
+          return Promise.all(
+            content.map(
+              (childItem) => __async(void 0, null, function* () {
+                return (yield resolveComponentData(
+                  childItem,
+                  config,
+                  metadata,
+                  onResolveStart,
+                  onResolveEnd,
+                  trigger,
+                  false
+                )).node;
+              })
+            )
+          );
+        }),
+        false,
+        createIsSlotConfig(config)
+      );
+    }
     if (Object.keys(readOnly).length) {
       resolvedItem.readOnly = readOnly;
     }
-    cache.lastChange[item.props.id] = {
+    cache.lastChange[id] = {
       item,
       resolved: resolvedItem
     };
     if (onResolveEnd) {
       onResolveEnd(resolvedItem);
     }
-    return resolvedItem;
+    return { node: resolvedItem, didChange: !(0, import_fast_deep_equal.default)(item, resolvedItem) };
   }
-  return item;
+  return { node: item, didChange: false };
 });
 
-// lib/resolve-root-data.ts
-var cache2 = {};
-function resolveRootData(data, config, metadata) {
-  return __async(this, null, function* () {
-    var _a, _b, _c, _d, _e;
-    if (((_a = config.root) == null ? void 0 : _a.resolveData) && data.root.props) {
-      if (((_b = cache2.lastChange) == null ? void 0 : _b.original) === data.root) {
-        return cache2.lastChange.resolved;
-      }
-      const changed = getChanged(data.root, (_c = cache2.lastChange) == null ? void 0 : _c.original);
-      const rootWithProps = data.root;
-      const resolvedRoot = yield (_e = config.root) == null ? void 0 : _e.resolveData(rootWithProps, {
-        changed,
-        lastData: ((_d = cache2.lastChange) == null ? void 0 : _d.original) || {},
-        metadata: metadata || {}
-      });
-      cache2.lastChange = {
-        original: data.root,
-        resolved: resolvedRoot
-      };
-      return __spreadProps(__spreadValues(__spreadValues({}, data.root), resolvedRoot), {
-        props: __spreadValues(__spreadValues({}, data.root.props), resolvedRoot.props)
-      });
-    }
-    return data.root;
-  });
-}
-
-// lib/default-data.ts
+// lib/data/default-data.ts
 var defaultData = (data) => __spreadProps(__spreadValues({}, data), {
   root: data.root || {},
   content: data.content || []
 });
 
+// lib/data/to-component.ts
+var toComponent = (item) => {
+  return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
+    props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
+    type: "root"
+  });
+};
+
 // lib/resolve-all-data.ts
 function resolveAllData(_0, _1) {
   return __async(this, arguments, function* (data, config, metadata = {}, onResolveStart, onResolveEnd) {
+    var _a;
     const defaultedData = defaultData(data);
-    const dynamicRoot = yield resolveRootData(
-      defaultedData,
-      config,
-      metadata
-    );
-    const { zones = {} } = data;
-    const zoneKeys = Object.keys(zones);
-    const resolvedZones = {};
-    for (let i = 0; i < zoneKeys.length; i++) {
-      const zoneKey = zoneKeys[i];
-      resolvedZones[zoneKey] = yield resolveAllComponentData(
-        zones[zoneKey],
+    const resolveNode = (_node) => __async(this, null, function* () {
+      const node = toComponent(_node);
+      onResolveStart == null ? void 0 : onResolveStart(node);
+      const resolved = (yield resolveComponentData(
+        node,
         config,
         metadata,
-        onResolveStart,
-        onResolveEnd
+        () => {
+        },
+        () => {
+        },
+        "force",
+        false
+      )).node;
+      const resolvedDeep = yield mapSlotsAsync(
+        resolved,
+        processContent,
+        false
       );
-    }
-    return __spreadProps(__spreadValues({}, defaultedData), {
-      root: dynamicRoot,
-      content: yield resolveAllComponentData(
-        defaultedData.content,
-        config,
-        metadata,
-        onResolveStart,
-        onResolveEnd
-      ),
-      zones: resolvedZones
+      onResolveEnd == null ? void 0 : onResolveEnd(toComponent(resolvedDeep));
+      return resolvedDeep;
+    });
+    const processContent = (content) => __async(this, null, function* () {
+      return Promise.all(content.map(resolveNode));
+    });
+    const processZones = () => __async(this, null, function* () {
+      var _a2;
+      const zones = (_a2 = data.zones) != null ? _a2 : {};
+      Object.entries(zones).forEach((_02) => __async(this, [_02], function* ([zoneKey, content]) {
+        zones[zoneKey] = yield Promise.all(content.map(resolveNode));
+      }));
+      return zones;
     });
+    const dynamic = {
+      root: yield resolveNode(defaultedData.root),
+      content: yield processContent(defaultedData.content),
+      zones: yield processZones()
+    };
+    Object.keys((_a = defaultedData.zones) != null ? _a : {}).forEach((zoneKey) => __async(this, null, function* () {
+      const content = defaultedData.zones[zoneKey];
+      dynamic.zones[zoneKey] = yield processContent(content);
+    }), {});
+    return dynamic;
+  });
+}
+
+// lib/transform-props.ts
+function transformProps(data, propTransforms) {
+  const mapItem = (item) => {
+    if (propTransforms[item.type]) {
+      return __spreadProps(__spreadValues({}, item), {
+        props: propTransforms[item.type](item.props)
+      });
+    }
+    return item;
+  };
+  const defaultedData = defaultData(data);
+  const rootProps = defaultedData.root.props || defaultedData.root;
+  let newRoot = __spreadValues({}, defaultedData.root);
+  if (propTransforms["root"]) {
+    if (defaultedData.root.props) {
+      newRoot.props = propTransforms["root"](rootProps);
+    } else {
+      newRoot = propTransforms["root"](rootProps);
+    }
+  }
+  const afterPropTransforms = __spreadProps(__spreadValues({}, defaultedData), {
+    root: newRoot,
+    content: defaultedData.content.map(mapItem),
+    zones: Object.keys(data.zones || {}).reduce(
+      (acc, zoneKey) => __spreadProps(__spreadValues({}, acc), {
+        [zoneKey]: data.zones[zoneKey].map(mapItem)
+      }),
+      {}
+    )
   });
+  return afterPropTransforms;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Render,
-  resolveAllData
+  resolveAllData,
+  transformProps
 });

package/dist/rsc.mjs

@@ -1,113 +1,14 @@
 import {
-  __spreadProps,
-  __spreadValues,
+  Render,
   init_react_import,
   resolveAllData,
-  rootAreaId,
-  rootDroppableId,
-  rootZone,
-  setupZone
-} from "./chunk-T6VJEBJD.mjs";
+  transformProps
+} from "./chunk-D6ENWNOG.mjs";
 
 // rsc.tsx
 init_react_import();
-
-// components/ServerRender/index.tsx
-init_react_import();
-import { Fragment, jsx } from "react/jsx-runtime";
-function DropZoneRender({
-  zone,
-  data,
-  areaId = "root",
-  config,
-  metadata = {}
-}) {
-  let zoneCompound = rootDroppableId;
-  let content = (data == null ? void 0 : data.content) || [];
-  if (!data || !config) {
-    return null;
-  }
-  if (areaId !== rootAreaId && zone !== rootZone) {
-    zoneCompound = `${areaId}:${zone}`;
-    content = setupZone(data, zoneCompound).zones[zoneCompound];
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children: content.map((item) => {
-    const Component = config.components[item.type];
-    if (Component) {
-      return /* @__PURE__ */ jsx(
-        Component.render,
-        __spreadProps(__spreadValues({}, item.props), {
-          puck: {
-            renderDropZone: ({ zone: zone2 }) => /* @__PURE__ */ jsx(
-              DropZoneRender,
-              {
-                zone: zone2,
-                data,
-                areaId: item.props.id,
-                config,
-                metadata
-              }
-            ),
-            metadata
-          }
-        }),
-        item.props.id
-      );
-    }
-    return null;
-  }) });
-}
-function Render({
-  config,
-  data,
-  metadata
-}) {
-  var _a;
-  if ((_a = config.root) == null ? void 0 : _a.render) {
-    const rootProps = data.root.props || data.root;
-    const title = rootProps.title || "";
-    return /* @__PURE__ */ jsx(
-      config.root.render,
-      __spreadProps(__spreadValues({}, rootProps), {
-        puck: {
-          renderDropZone: ({ zone }) => /* @__PURE__ */ jsx(
-            DropZoneRender,
-            {
-              zone,
-              data,
-              config,
-              metadata
-            }
-          ),
-          isEditing: false,
-          dragRef: null
-        },
-        title,
-        editMode: false,
-        id: "puck-root",
-        children: /* @__PURE__ */ jsx(
-          DropZoneRender,
-          {
-            config,
-            data,
-            zone: rootZone,
-            metadata
-          }
-        )
-      })
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    DropZoneRender,
-    {
-      config,
-      data,
-      zone: rootZone,
-      metadata
-    }
-  );
-}
 export {
   Render,
-  resolveAllData
+  resolveAllData,
+  transformProps
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@measured/puck",
-  "version": "0.19.0-canary.85ee736",
-  "author": "Measured Corporation Ltd <hello@measured.co>",
+  "version": "0.19.0-canary.8d459e4e",
+  "author": "Chris Villa <chris@puckeditor.com>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",
   "homepage": "https://puckeditor.com",
@@ -27,7 +27,8 @@
       "require": "./dist/rsc.js"
     },
     "./puck.css": "./dist/index.css",
-    "./dist/index.css": "./dist/index.css"
+    "./dist/index.css": "./dist/index.css",
+    "./package.json": "./package.json"
   },
   "typesVersions": {
     "*": {
@@ -76,9 +77,9 @@
     "react-hotkeys-hook": "^4.6.1",
     "use-debounce": "^9.0.4",
     "uuid": "^9.0.1",
-    "zustand": "^5.0.2"
+    "zustand": "^5.0.3"
   },
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+    "react": "^18.0.0 || ^19.0.0"
   }
 }