@measured/puck 0.15.0-canary.480467a → 0.15.0-canary.b1c40c6

package/README.md

@@ -60,10 +60,7 @@ const config = {
 };
 
 // Describe the initial data
-const initialData = {
-  content: [],
-  root: {},
-};
+const initialData = {};
 
 // Save the data to your database
 const save = (data) => {};

package/dist/{Config-550396e1.d.ts → Config-25917005.d.ts}

@@ -152,8 +152,16 @@ type ComponentConfig<ComponentProps extends DefaultComponentProps = DefaultCompo
     label?: string;
     defaultProps?: DefaultProps;
     fields?: Fields<ComponentProps>;
+    resolveFields?: (data: DataShape, params: {
+        changed: Partial<Record<keyof ComponentProps, boolean>>;
+        fields: Fields<ComponentProps>;
+        lastFields: Fields<ComponentProps>;
+        lastData: DataShape;
+        appState: AppState;
+    }) => Promise<Fields<ComponentProps>> | Fields<ComponentProps>;
     resolveData?: (data: DataShape, params: {
         changed: Partial<Record<keyof ComponentProps, boolean>>;
+        lastData: DataShape;
     }) => Promise<{
         props?: Partial<ComponentProps>;
         readOnly?: Partial<Record<keyof ComponentProps, boolean>>;
@@ -179,7 +187,7 @@ type Config<Props extends Record<string, any> = Record<string, any>, RootProps e
         children?: ReactNode;
     }, Partial<RootProps & {
         children?: ReactNode;
-    }>, RootDataWithProps>>;
+    }>, RootData>>;
 };
 type BaseData<Props extends {
     [key: string]: any;
@@ -192,11 +200,11 @@ type ComponentData<Props extends DefaultComponentProps = DefaultComponentProps>
     type: keyof Props;
     props: WithPuckProps<Props>;
 } & BaseData<Props>;
-type RootDataWithProps<Props extends DefaultRootProps = DefaultRootProps> = {
+type RootDataWithProps<Props extends DefaultRootProps = DefaultRootProps> = BaseData<Props> & {
     props: Props;
 };
 type RootDataWithoutProps<Props extends DefaultRootProps = DefaultRootProps> = Props;
-type RootData<Props extends DefaultRootProps = DefaultRootProps> = BaseData<Props> & Partial<RootDataWithProps<Props>> & Partial<RootDataWithoutProps<Props>>;
+type RootData<Props extends DefaultRootProps = DefaultRootProps> = Partial<RootDataWithProps<Props>> & Partial<RootDataWithoutProps<Props>>;
 type MappedItem = ComponentData;
 type Data<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultRootProps = DefaultRootProps> = {
     root: RootData<RootProps>;

package/dist/index.css

@@ -1462,11 +1462,14 @@ textarea._Input-input_1qi5b_46 {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
-._PuckFields_17k3p_1 {
+._PuckFields_1o0if_1 {
   position: relative;
   font-family: var(--puck-font-family);
 }
-._PuckFields-loadingOverlay_17k3p_6 {
+._PuckFields--isLoading_1o0if_6 {
+  min-height: 48px;
+}
+._PuckFields-loadingOverlay_1o0if_10 {
   background: var(--puck-color-white);
   display: flex;
   justify-content: center;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { U as UiState, D as Data, A as AppState, C as Config, a as DefaultRootProps, I as ItemSelector, b as DropZoneProps, F as Field, V as Viewports, c as DefaultComponentProps, M as MappedItem, R as RootDataWithProps, d as RootData, e as ComponentData } from './Config-550396e1.js';
-export { i as Adaptor, h as ArrayField, s as ArrayState, p as BaseData, B as BaseField, o as ComponentConfig, m as Content, k as CustomField, j as ExternalField, E as ExternalFieldWithAdaptor, l as Fields, r as ItemWithId, N as NumberField, O as ObjectField, P as PuckComponent, n as PuckContext, g as RadioField, q as RootDataWithoutProps, S as SelectField, T as TextField, f as TextareaField } from './Config-550396e1.js';
+import { U as UiState, D as Data, A as AppState, C as Config, a as DefaultRootProps, I as ItemSelector, b as DropZoneProps, F as Field, V as Viewports, c as DefaultComponentProps, M as MappedItem, R as RootDataWithProps, d as RootData, e as ComponentData } from './Config-25917005.js';
+export { i as Adaptor, h as ArrayField, s as ArrayState, p as BaseData, B as BaseField, o as ComponentConfig, m as Content, k as CustomField, j as ExternalField, E as ExternalFieldWithAdaptor, l as Fields, r as ItemWithId, N as NumberField, O as ObjectField, P as PuckComponent, n as PuckContext, g as RadioField, q as RootDataWithoutProps, S as SelectField, T as TextField, f as TextareaField } from './Config-25917005.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, ReactElement, CSSProperties, SyntheticEvent } from 'react';
@@ -232,7 +232,7 @@ type IframeConfig = {
 declare function Puck<UserConfig extends Config = Config>({ children, config, data: initialData, ui: initialUi, onChange, onPublish, plugins, overrides, renderHeader, renderHeaderActions, headerTitle, headerPath, viewports, iframe, dnd, }: {
     children?: ReactNode;
     config: UserConfig;
-    data: Data;
+    data: Partial<Data>;
     ui?: Partial<UiState>;
     onChange?: (data: Data) => void;
     onPublish?: (data: Data) => void;
@@ -266,7 +266,7 @@ declare namespace Puck {
 
 declare function Render<UserConfig extends Config = Config>({ config, data, }: {
     config: UserConfig;
-    data: Data;
+    data: Partial<Data>;
 }): react_jsx_runtime.JSX.Element;
 
 declare function migrate(data: Data): Data;
@@ -280,9 +280,9 @@ type PropTransform<Props extends DefaultComponentProps = DefaultComponentProps,
         [key: string]: any;
     }) => RootProps;
 }>;
-declare function transformProps<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultComponentProps = DefaultComponentProps>(data: Data, propTransforms: PropTransform<Props, RootProps>): Data;
+declare function transformProps<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultComponentProps = DefaultComponentProps>(data: Partial<Data>, propTransforms: PropTransform<Props, RootProps>): Data;
 
-declare function resolveAllData(data: Data, config: Config, onResolveStart?: (item: MappedItem) => void, onResolveEnd?: (item: MappedItem) => void): Promise<{
+declare function resolveAllData(data: Partial<Data>, config: Config, onResolveStart?: (item: MappedItem) => void, onResolveEnd?: (item: MappedItem) => void): Promise<{
     root: RootDataWithProps<DefaultRootProps> | RootData<DefaultRootProps>;
     content: any[];
     zones: Record<string, MappedItem[]>;

package/dist/index.js

@@ -31095,6 +31095,20 @@ var import_react13 = require("react");
 
 // lib/resolve-component-data.ts
 init_react_import();
+
+// lib/get-changed.ts
+init_react_import();
+var getChanged = (newItem, oldItem) => {
+  return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
+    const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
+    const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
+    return __spreadProps(__spreadValues({}, acc), {
+      [item]: oldItemProps[item] !== newItemProps[item]
+    });
+  }, {}) : {};
+};
+
+// lib/resolve-component-data.ts
 var cache = { lastChange: {} };
 var resolveAllComponentData = (content, config, onResolveStart, onResolveEnd) => __async(void 0, null, function* () {
   return yield Promise.all(
@@ -31111,25 +31125,15 @@ var resolveAllComponentData = (content, config, onResolveStart, onResolveEnd) =>
 var resolveComponentData = (item, config, onResolveStart, onResolveEnd) => __async(void 0, null, function* () {
   const configForItem = config.components[item.type];
   if (configForItem.resolveData) {
-    let changed = Object.keys(item.props).reduce(
-      (acc, item2) => __spreadProps(__spreadValues({}, acc), { [item2]: true }),
-      {}
-    );
-    if (cache.lastChange[item.props.id]) {
-      const { item: oldItem, resolved } = cache.lastChange[item.props.id];
-      if (oldItem === item) {
-        return resolved;
-      }
-      Object.keys(item.props).forEach((propName) => {
-        if (oldItem.props[propName] === item.props[propName]) {
-          changed[propName] = false;
-        }
-      });
+    const { item: oldItem = {}, resolved = {} } = cache.lastChange[item.props.id] || {};
+    if (item && item === oldItem) {
+      return resolved;
     }
+    const changed = getChanged(item, oldItem);
     if (onResolveStart) {
       onResolveStart(item);
     }
-    const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, { changed });
+    const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, { changed, lastData: oldItem });
     const { readOnly: existingReadOnly = {} } = item || {};
     const newReadOnly = __spreadValues(__spreadValues({}, existingReadOnly), readOnly);
     const resolvedItem = __spreadProps(__spreadValues({}, item), {
@@ -31172,26 +31176,16 @@ var applyDynamicProps = (data, dynamicProps, rootData) => {
 init_react_import();
 var cache2 = {};
 var resolveRootData = (data, config) => __async(void 0, null, function* () {
-  var _a, _b;
+  var _a, _b, _c, _d, _e;
   if (((_a = config.root) == null ? void 0 : _a.resolveData) && data.root.props) {
-    let changed = Object.keys(data.root.props).reduce(
-      (acc, item) => __spreadProps(__spreadValues({}, acc), { [item]: true }),
-      {}
-    );
-    if (cache2.lastChange) {
-      const { original, resolved } = cache2.lastChange;
-      if (original === data.root) {
-        return resolved;
-      }
-      Object.keys(data.root.props).forEach((propName) => {
-        if (original.props[propName] === data.root.props[propName]) {
-          changed[propName] = false;
-        }
-      });
+    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 (_b = config.root) == null ? void 0 : _b.resolveData(rootWithProps, {
-      changed
+    const resolvedRoot = yield (_e = config.root) == null ? void 0 : _e.resolveData(rootWithProps, {
+      changed,
+      lastData: ((_d = cache2.lastChange) == null ? void 0 : _d.original) || {}
     });
     cache2.lastChange = {
       original: data.root,
@@ -32321,7 +32315,7 @@ var InputOrGroup = (_a) => {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
 init_react_import();
-var styles_module_default14 = { "PuckFields": "_PuckFields_17k3p_1", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_17k3p_6" };
+var styles_module_default14 = { "PuckFields": "_PuckFields_1o0if_1", "PuckFields--isLoading": "_PuckFields--isLoading_1o0if_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_1o0if_10" };
 
 // components/Puck/components/Fields/index.tsx
 var import_react19 = require("react");
@@ -32334,13 +32328,73 @@ var DefaultFields = ({
   children,
   isLoading
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: getClassName19(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: getClassName19({ isLoading }), children: [
     children,
     isLoading && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_spinners6.ClipLoader, { "aria-label": "loading" }) })
   ] });
 };
+var useResolvedFields = () => {
+  var _a;
+  const { selectedItem, state, config } = useAppContext();
+  const { data } = state;
+  const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
+  const componentConfig = selectedItem ? config.components[selectedItem.type] : null;
+  const defaultFields = selectedItem ? componentConfig == null ? void 0 : componentConfig.fields : rootFields;
+  const rootProps = data.root.props || data.root;
+  const [lastSelectedData, setLastSelectedData] = (0, import_react19.useState)(
+    {}
+  );
+  const [resolvedFields, setResolvedFields] = (0, import_react19.useState)(defaultFields || {});
+  const [fieldsLoading, setFieldsLoading] = (0, import_react19.useState)(false);
+  const defaultResolveFields = (_componentData, _params) => defaultFields;
+  const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
+  const resolveFields = (0, import_react19.useCallback)(
+    (..._0) => __async(void 0, [..._0], function* (fields = {}) {
+      var _a2, _b, _c;
+      const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : {};
+      const changed = getChanged(componentData, lastData);
+      setLastSelectedData(componentData);
+      if (selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields)) {
+        return yield componentConfig == null ? void 0 : componentConfig.resolveFields(
+          componentData,
+          {
+            changed,
+            fields,
+            lastFields: resolvedFields,
+            lastData,
+            appState: state
+          }
+        );
+      }
+      if (!selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields)) {
+        return yield (_c = config.root) == null ? void 0 : _c.resolveFields(componentData, {
+          changed,
+          fields,
+          lastFields: resolvedFields,
+          lastData,
+          appState: state
+        });
+      }
+      return defaultResolveFields(componentData, {
+        changed,
+        fields,
+        lastFields: resolvedFields,
+        lastData
+      });
+    }),
+    [data, config, componentData, selectedItem, resolvedFields, state]
+  );
+  (0, import_react19.useEffect)(() => {
+    setFieldsLoading(true);
+    resolveFields(defaultFields).then((fields) => {
+      setResolvedFields(fields || {});
+      setFieldsLoading(false);
+    });
+  }, [data, defaultFields]);
+  return [resolvedFields, fieldsLoading];
+};
 var Fields = () => {
-  var _a, _b, _c, _d;
+  var _a, _b;
   const {
     selectedItem,
     state,
@@ -32352,9 +32406,9 @@ var Fields = () => {
   } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
-  const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
-  const fields = selectedItem ? ((_b = config.components[selectedItem.type]) == null ? void 0 : _b.fields) || {} : rootFields;
-  const isLoading = selectedItem ? (_c = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _c.loading : (_d = componentState["puck-root"]) == null ? void 0 : _d.loading;
+  const [fields, fieldsResolving] = useResolvedFields();
+  const componentResolving = selectedItem ? (_a = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.loading : (_b = componentState["puck-root"]) == null ? void 0 : _b.loading;
+  const isLoading = fieldsResolving || componentResolving;
   const rootProps = data.root.props || data.root;
   const Wrapper = (0, import_react19.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -32366,6 +32420,8 @@ var Fields = () => {
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Wrapper, { isLoading, itemSelector, children: Object.keys(fields).map((fieldName) => {
         const field = fields[fieldName];
+        if (!(field == null ? void 0 : field.type))
+          return null;
         const onChange = (value, updatedUi) => {
           var _a2, _b2;
           let currentProps;
@@ -33644,7 +33700,7 @@ function Puck({
     () => createReducer({ config, record: historyStore.record })
   );
   const [initialAppState] = (0, import_react29.useState)(() => {
-    var _a2, _b, _c, _d, _e;
+    var _a2, _b, _c, _d, _e, _f;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
     if (typeof window !== "undefined") {
@@ -33671,11 +33727,12 @@ function Puck({
         };
       }
     }
-    const rootProps2 = initialData.root.props || initialData.root;
-    const defaultedRootProps = __spreadValues(__spreadValues({}, (_e = config.root) == null ? void 0 : _e.defaultProps), rootProps2);
+    const rootProps2 = ((_e = initialData == null ? void 0 : initialData.root) == null ? void 0 : _e.props) || initialData.root || {};
+    const defaultedRootProps = __spreadValues(__spreadValues({}, (_f = config.root) == null ? void 0 : _f.defaultProps), rootProps2);
     return __spreadProps(__spreadValues({}, defaultAppState), {
       data: __spreadProps(__spreadValues({}, initialData), {
-        root: defaultedRootProps
+        root: defaultedRootProps,
+        content: initialData.content || []
       }),
       ui: __spreadProps(__spreadValues(__spreadValues({}, initial), clientUiState), {
         // Store categories under componentList on state to allow render functions and plugins to modify
@@ -34043,10 +34100,14 @@ function Render({
   data
 }) {
   var _a;
-  const rootProps = data.root.props || data.root;
+  const defaultedData = __spreadProps(__spreadValues({}, data), {
+    root: data.root || {},
+    content: data.content || []
+  });
+  const rootProps = defaultedData.root.props || defaultedData.root;
   const title = (rootProps == null ? void 0 : rootProps.title) || "";
   if ((_a = config.root) == null ? void 0 : _a.render) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZoneProvider, { value: { data: defaultedData, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       config.root.render,
       __spreadProps(__spreadValues({}, rootProps), {
         puck: {
@@ -34059,7 +34120,7 @@ function Render({
       })
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZone, { zone: rootDroppableId }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZoneProvider, { value: { data: defaultedData, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZone, { zone: rootDroppableId }) });
 }
 
 // lib/migrate.ts
@@ -34087,6 +34148,15 @@ function migrate(data) {
 
 // lib/transform-props.ts
 init_react_import();
+
+// lib/default-data.ts
+init_react_import();
+var defaultData = (data) => __spreadProps(__spreadValues({}, data), {
+  root: data.root || {},
+  content: data.content || []
+});
+
+// lib/transform-props.ts
 function transformProps(data, propTransforms) {
   const mapItem = (item) => {
     if (propTransforms[item.type]) {
@@ -34096,18 +34166,19 @@ function transformProps(data, propTransforms) {
     }
     return item;
   };
-  const rootProps = data.root.props || data.root;
-  let newRoot = __spreadValues({}, data.root);
+  const defaultedData = defaultData(data);
+  const rootProps = defaultedData.root.props || defaultedData.root;
+  let newRoot = __spreadValues({}, defaultedData.root);
   if (propTransforms["root"]) {
-    if (data.root.props) {
+    if (defaultedData.root.props) {
       newRoot.props = propTransforms["root"](rootProps);
     } else {
       newRoot = propTransforms["root"](rootProps);
     }
   }
-  const afterPropTransforms = __spreadProps(__spreadValues({}, data), {
+  const afterPropTransforms = __spreadProps(__spreadValues({}, defaultedData), {
     root: newRoot,
-    content: data.content.map(mapItem),
+    content: defaultedData.content.map(mapItem),
     zones: Object.keys(data.zones || {}).reduce(
       (acc, zoneKey) => __spreadProps(__spreadValues({}, acc), {
         [zoneKey]: data.zones[zoneKey].map(mapItem)
@@ -34122,7 +34193,8 @@ function transformProps(data, propTransforms) {
 init_react_import();
 function resolveAllData(data, config, onResolveStart, onResolveEnd) {
   return __async(this, null, function* () {
-    const dynamicRoot = yield resolveRootData(data, config);
+    const defaultedData = defaultData(data);
+    const dynamicRoot = yield resolveRootData(defaultedData, config);
     const { zones = {} } = data;
     const zoneKeys = Object.keys(zones);
     const resolvedZones = {};
@@ -34135,10 +34207,10 @@ function resolveAllData(data, config, onResolveStart, onResolveEnd) {
         onResolveEnd
       );
     }
-    return __spreadProps(__spreadValues({}, data), {
+    return __spreadProps(__spreadValues({}, defaultedData), {
       root: dynamicRoot,
       content: yield resolveAllComponentData(
-        data.content,
+        defaultedData.content,
         config,
         onResolveStart,
         onResolveEnd

package/dist/rsc.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, D as Data } from './Config-550396e1.js';
+import { C as Config, D as Data } from './Config-25917005.js';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config>({ config, data, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.15.0-canary.480467a",
+  "version": "0.15.0-canary.b1c40c6",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",