feat: rename page to root in API

README.md

@@ -86,19 +86,19 @@ Puck can be configured to work with plugins. Plugins can extend the functionalit
 
 The plugin API follows a React paradigm. Each plugin passed to the Puck editor can provide three functions:
 
-- `renderPage` (`Component`): Render the root node of the preview content
-- `renderPageFields` (`Component`): Render the page fields
+- `renderRoot` (`Component`): Render the root node of the preview content
+- `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 should render to show the page or fields, and the `data` prop, which can be used to read the data model for the page.
+Each render function receives the `children` prop, which you must render, and the `data` prop, which can be used to read the data model.
 
 #### Example
 
-Here's a basic plugin that renders a "My plugin" heading in the page field area:
+Here's a basic plugin that renders a "My plugin" heading in the root field area:
 
 ```jsx
 const myPlugin = {
-  renderPageFields: (props) => (
+  renderRootFields: (props) => (
     <div>
       {props.children}
 
@@ -123,7 +123,7 @@ The `<Puck>` component renders the Puck editor.
 
 ### `<Render>`
 
-The `<Render>` component renders a user-facing page using Puck data.
+The `<Render>` component renders user-facing UI using Puck data.
 
 - **config** (`Config`): Puck component configuration
 - **data** (`Data`): Data to render
@@ -132,10 +132,10 @@ The `<Render>` component renders a user-facing page using Puck data.
 
 The `Config` object describes which components Puck should render, how they should render and which inputs are available to them.
 
-- **page** (`object`)
+- **root** (`object`)
   - **fields** (`object`):
-    - **title** (`Field`): A mandatory field for the page title.
-    - **[fieldName]** (`Field`): User defined fields, used to describe the input data stored in the `page` key.
+    - **title** (`Field`): Title of the content, typically used for the page title.
+    - **[fieldName]** (`Field`): User defined fields, used to describe the input data stored in the `root` key.
   - **render** (`Component`): Render a React component at the root of your component tree. Useful for defining context providers.
 - **components** (`object`): Definitions for each of the components you want to show in the visual editor
   - **[componentName]** (`object`)
@@ -161,11 +161,11 @@ A `Field` represents a user input field shown in the Puck interface.
 
 ### `Data`
 
-The `Data` object stores the state of a page.
+The `Data` object stores the puck state.
 
-- **page** (`object`):
-  - **title** (string): Page title
-  - **[prop]** (string): User defined data from page fields
+- **root** (`object`):
+  - **title** (string): Title of the content, typically used for the page title
+  - **[prop]** (string): User defined data from `root` fields
 - **content** (`object[]`):
   - **type** (string): Component name
   - **props** (object):
@@ -184,8 +184,8 @@ An `Adaptor` can be used to load content from an external content repository, li
 
 Plugins that can be used to enhance Puck.
 
-- **renderPage** (`Component`): Render the root node of the preview content
-- **renderPageFields** (`Component`): Render the page fields
+- **renderRoot** (`Component`): Render the root node of the preview content
+- **renderRootFields** (`Component`): Render the root fields
 - **renderFields** (`Component`): Render the fields for the currently selected component
 
 ## License

apps/demo/app/[framework]/[...puckPath]/client.tsx

@@ -38,9 +38,9 @@ export function Client({
 
   useEffect(() => {
     if (!isEdit) {
-      document.title = data?.page?.title || "";
+      document.title = data?.root?.title || "";
     }
-  }, [data]);
+  }, [data, isEdit]);
 
   if (isEdit) {
     return (

apps/demo/app/configs/antd/index.tsx

@@ -14,7 +14,7 @@ type Props = {
 
 // We avoid the name config as next gets confused
 export const conf: Config<Props, RootProps> = {
-  page: {
+  root: {
     fields: {
       title: {
         type: "text",
@@ -59,7 +59,7 @@ export const initialData: Record<string, Data> = {
         },
       },
     ],
-    page: { title: "Home", layout: "" },
+    root: { title: "Home", layout: "" },
   },
   "/about": {
     content: [
@@ -72,7 +72,7 @@ export const initialData: Record<string, Data> = {
         },
       },
     ],
-    page: { title: "About us", layout: "" },
+    root: { title: "About us", layout: "" },
   },
 };
 

apps/demo/app/configs/custom/index.tsx

@@ -23,7 +23,7 @@ type Props = {
 
 // We avoid the name config as next gets confused
 export const conf: Config<Props, RootProps> = {
-  page: {
+  root: {
     render: Root,
   },
   components: {
@@ -302,15 +302,15 @@ export const initialData: Record<string, Data> = {
         props: { size: "96px", id: "VerticalSpace-1687284290127" },
       },
     ],
-    page: { title: "Custom Example" },
+    root: { title: "Custom Example" },
   },
   "/pricing": {
     content: [],
-    page: { title: "Pricing" },
+    root: { title: "Pricing" },
   },
   "/about": {
     content: [],
-    page: { title: "About Us" },
+    root: { title: "About Us" },
   },
 };
 

apps/demo/app/configs/custom/root.tsx

@@ -1,12 +1,12 @@
 import { ReactNode } from "react";
 
-import { DefaultPageProps } from "@measured/puck/types/Config";
+import { DefaultRootProps } from "@measured/puck/types/Config";
 import { Footer } from "./components/Footer";
 
 export type RootProps = {
   children: ReactNode;
   title: string;
-} & DefaultPageProps;
+} & DefaultRootProps;
 
 const NavItem = ({ label, href }: { label: string; href: string }) => {
   const navPath = window.location.pathname.replace("/edit", "") || "/";

apps/demo/app/configs/material-ui/index.tsx

@@ -19,7 +19,7 @@ type Props = {
 
 // We avoid the name config as next gets confused
 export const conf: Config<Props, RootProps> = {
-  page: {
+  root: {
     fields: {
       title: {
         type: "text",
@@ -140,7 +140,7 @@ export const initialData: Record<string, Data> = {
         },
       },
     ],
-    page: { title: "MUI Demo" },
+    root: { title: "MUI Demo" },
   },
 };
 

packages/core/components/Puck/index.tsx

@@ -38,7 +38,7 @@ const PluginRenderer = ({
   children: ReactNode;
   data: Data;
   plugins;
-  renderMethod: "renderPage" | "renderPageFields" | "renderFields";
+  renderMethod: "renderRoot" | "renderRootFields" | "renderFields";
 }) => {
   return plugins
     .filter((item) => item[renderMethod])
@@ -51,7 +51,7 @@ const PluginRenderer = ({
 
 export function Puck({
   config,
-  data: initialData = { content: [], page: { title: "" } },
+  data: initialData = { content: [], root: { title: "" } },
   onChange,
   onPublish,
   plugins = [],
@@ -75,22 +75,22 @@ export function Puck({
     (pageProps) => (
       <PluginRenderer
         plugins={plugins}
-        renderMethod="renderPage"
+        renderMethod="renderRoot"
         data={pageProps.data}
       >
-        {config.page?.render
-          ? config.page?.render({ ...pageProps, editMode: true })
+        {config.root?.render
+          ? config.root?.render({ ...pageProps, editMode: true })
           : pageProps.children}
       </PluginRenderer>
     ),
-    [config.page]
+    [config.root]
   );
 
   const PageFieldWrapper = useCallback(
     (props) => (
       <PluginRenderer
         plugins={plugins}
-        renderMethod="renderPageFields"
+        renderMethod="renderRootFields"
         data={props.data}
       >
         {props.children}
@@ -115,15 +115,15 @@ export function Puck({
   const FieldWrapper =
     selectedIndex !== null ? ComponentFieldWrapper : PageFieldWrapper;
 
-  const pageFields = config.page?.fields || defaultPageFields;
+  const rootFields = config.root?.fields || defaultPageFields;
 
   let fields =
     selectedIndex !== null
       ? (config.components[data.content[selectedIndex].type]?.fields as Record<
           string,
           Field<any>
         >) || {}
-      : pageFields;
+      : rootFields;
 
   useEffect(() => {
     if (onChange) onChange(data);
@@ -298,7 +298,7 @@ export function Puck({
                 zoom: 0.75,
               }}
             >
-              <Page data={data} {...data.page}>
+              <Page data={data} {...data.root}>
                 <DroppableStrictMode droppableId="droppable">
                   {(provided, snapshot) => (
                     <div
@@ -412,7 +412,7 @@ export function Puck({
                     if (selectedIndex !== null) {
                       currentProps = data.content[selectedIndex].props;
                     } else {
-                      currentProps = data.page;
+                      currentProps = data.root;
                     }
 
                     if (fieldName === "_data") {
@@ -457,7 +457,7 @@ export function Puck({
                         }),
                       });
                     } else {
-                      setData({ ...data, page: newProps });
+                      setData({ ...data, root: newProps });
                     }
                   };
 
@@ -485,9 +485,9 @@ export function Puck({
                         name={fieldName}
                         label={field.label}
                         readOnly={
-                          data.page._meta?.locked?.indexOf(fieldName) > -1
+                          data.root._meta?.locked?.indexOf(fieldName) > -1
                         }
-                        value={data.page[fieldName]}
+                        value={data.root[fieldName]}
                         onChange={onChange}
                       />
                     );

packages/core/components/Render/index.tsx

@@ -9,11 +9,11 @@ export function Render({ config, data }: { config: Config; data: Data }) {
     return <Component key={item.props.id} {...item.props} />;
   });
 
-  if (config.page) {
+  if (config.root) {
     return (
-      <config.page.render {...data.page} editMode={false}>
+      <config.root.render {...data.root} editMode={false}>
         {children}
-      </config.page.render>
+      </config.root.render>
     );
   }
 

packages/core/types/Config.tsx

@@ -33,7 +33,7 @@ export type Field<
   }[];
 };
 
-export type DefaultPageProps = {
+export type DefaultRootProps = {
   children: ReactNode;
   title: string;
   editMode: boolean;
@@ -61,12 +61,12 @@ export type ComponentConfig<
 
 export type Config<
   Props extends { [key: string]: any } = { [key: string]: any },
-  PageProps extends DefaultPageProps = DefaultPageProps
+  RootProps extends DefaultRootProps = DefaultRootProps
 > = {
   components: {
     [ComponentName in keyof Props]: ComponentConfig<Props[ComponentName]>;
   };
-  page?: ComponentConfig<PageProps & { children: ReactNode }>;
+  root?: ComponentConfig<RootProps & { children: ReactNode }>;
 };
 
 type MappedItem<Props extends { [key: string]: any } = { [key: string]: any }> =
@@ -79,11 +79,11 @@ type MappedItem<Props extends { [key: string]: any } = { [key: string]: any }> =
 
 export type Data<
   Props extends { [key: string]: any } = { [key: string]: any },
-  PageProps extends { title: string; [key: string]: any } = {
+  RootProps extends { title: string; [key: string]: any } = {
     title: string;
     [key: string]: any;
   }
 > = {
-  page: PageProps;
+  root: RootProps;
   content: MappedItem<Props>[];
 };

packages/core/types/Plugin.ts

@@ -2,11 +2,11 @@ import { ReactElement, ReactNode } from "react";
 import { Data } from "./Config";
 
 export type Plugin = {
-  renderPageFields?: (props: {
+  renderRootFields?: (props: {
     children: ReactNode;
     data: Data;
   }) => ReactElement<any>;
-  renderPage?: (props: {
+  renderRoot?: (props: {
     children: ReactNode;
     data: Data;
   }) => ReactElement<any>;

packages/plugin-heading-analyzer/src/HeadingAnalyzer.tsx

@@ -195,7 +195,7 @@ const HeadingOutlineAnalyer = ({
 };
 
 const HeadingAnalyzer: Plugin = {
-  renderPageFields: HeadingOutlineAnalyer,
+  renderRootFields: HeadingOutlineAnalyer,
 };
 
 export default HeadingAnalyzer;