@measured/puck 0.10.0-canary.c276b23 → 0.10.0-canary.e308381

package/README.md

@@ -112,7 +112,11 @@ The plugin API follows a React paradigm. Each plugin passed to the Puck editor c
 - `renderRootFields` (`Component`): Render the root fields
 - `renderFields` (`Component`): Render the fields for the currently selected component
 
-Each render function receives the `children` prop, which you must render, and the `data` prop, which can be used to read the data model.
+Each render function receives three props:
+
+- **children** (`ReactNode`): The normal contents of the root or field. You must render this.
+- **state** (`AppState`): The current application state, including data and UI state
+- **dispatch** (`(action: PuckAction) => void`): The Puck dispatcher, used for making data changes or updating the UI. See the [action definitions](https://github.com/measuredco/puck/blob/main/packages/core/reducer/actions.tsx) for a full reference of available mutations.
 
 #### Example
 
@@ -285,9 +289,19 @@ A `Field` represents a user input field shown in the Puck interface.
   - **onChange** (`(value: any) => void`): Callback to change the value
   - **readOnly** (`boolean` | `undefined`): Whether or not the field should be in readOnly mode
 
+### `AppState`
+
+The `AppState` object stores the puck application state.
+
+- **data** (`Data`): The page data currently being rendered
+- **ui** (`object`):
+  - **leftSideBarVisible** (boolean): Whether or not the left side bar is visible
+  - **itemSelector** (object): An object describing which item is selected
+  - **arrayState** (object): An object describing the internal state of array items
+
 ### `Data`
 
-The `Data` object stores the puck state.
+The `Data` object stores the puck page data.
 
 - **root** (`object`):
   - **title** (string): Title of the content, typically used for the page title

package/dist/index.d.ts

@@ -250,15 +250,18 @@ declare const IconButton: ({ children, href, onClick, variant, type, disabled, t
 type Plugin = {
     renderRootFields?: (props: {
         children: ReactNode;
-        data: Data;
+        dispatch: (action: PuckAction) => void;
+        state: AppState;
     }) => ReactElement<any>;
     renderRoot?: (props: {
         children: ReactNode;
-        data: Data;
+        dispatch: (action: PuckAction) => void;
+        state: AppState;
     }) => ReactElement<any>;
     renderFields?: (props: {
         children: ReactNode;
-        data: Data;
+        dispatch: (action: PuckAction) => void;
+        state: AppState;
     }) => ReactElement<any>;
 };
 
@@ -270,11 +273,11 @@ declare function Puck({ config, data: initialData, onChange, onPublish, plugins,
     plugins?: Plugin[];
     renderHeader?: (props: {
         children: ReactNode;
-        data: Data;
         dispatch: (action: PuckAction) => void;
+        state: AppState;
     }) => ReactElement;
     renderHeaderActions?: (props: {
-        data: Data;
+        state: AppState;
         dispatch: (action: PuckAction) => void;
     }) => ReactElement;
     headerTitle?: string;

package/dist/index.js

@@ -4557,12 +4557,13 @@ var defaultPageFields = {
 };
 var PluginRenderer = ({
   children,
-  data,
+  dispatch,
+  state,
   plugins,
   renderMethod
 }) => {
   return plugins.filter((item) => item[renderMethod]).map((item) => item[renderMethod]).reduce(
-    (accChildren, Item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Item, { data, children: accChildren }),
+    (accChildren, Item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Item, { dispatch, state, children: accChildren }),
     children
   );
 };
@@ -4610,7 +4611,8 @@ function Puck({
         {
           plugins,
           renderMethod: "renderRoot",
-          data: pageProps.data,
+          dispatch: pageProps.dispatch,
+          state: pageProps.state,
           children: ((_a2 = config.root) == null ? void 0 : _a2.render) ? (_b2 = config.root) == null ? void 0 : _b2.render(__spreadProps(__spreadValues({}, pageProps), { editMode: true })) : pageProps.children
         }
       );
@@ -4623,7 +4625,8 @@ function Puck({
       {
         plugins,
         renderMethod: "renderRootFields",
-        data: props.data,
+        dispatch: props.dispatch,
+        state: props.state,
         children: props.children
       }
     ),
@@ -4635,7 +4638,8 @@ function Puck({
       {
         plugins,
         renderMethod: "renderFields",
-        data: props.data,
+        dispatch: props.dispatch,
+        state: props.state,
         children: props.children
       }
     ),
@@ -4753,8 +4757,8 @@ function Puck({
                             children: "Publish"
                           }
                         ),
-                        data,
-                        dispatch
+                        dispatch,
+                        state: appState
                       }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                         "div",
                         {
@@ -4849,7 +4853,10 @@ function Puck({
                                       }
                                     )
                                   ] }),
-                                  renderHeaderActions && renderHeaderActions({ data, dispatch }),
+                                  renderHeaderActions && renderHeaderActions({
+                                    state: appState,
+                                    dispatch
+                                  }),
                                   /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                                     Button,
                                     {
@@ -4940,7 +4947,15 @@ function Puck({
                                 style: {
                                   border: "1px solid var(--puck-color-grey-8)"
                                 },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Page, __spreadProps(__spreadValues({ data }, data.root), { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropZone, { zone: rootDroppableId }) }))
+                                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                  Page,
+                                  __spreadProps(__spreadValues({
+                                    dispatch,
+                                    state: appState
+                                  }, data.root), {
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropZone, { zone: rootDroppableId })
+                                  })
+                                )
                               }
                             )
                           }
@@ -4970,7 +4985,7 @@ function Puck({
                         flexDirection: "column",
                         background: "var(--puck-color-white)"
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldWrapper, { data, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldWrapper, { dispatch, state: appState, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                         SidebarSection,
                         {
                           noPadding: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.10.0-canary.c276b23",
+  "version": "0.10.0-canary.e308381",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",