Puck 0.19: Slots API & performance gains

const config = {
  components: {
    Flexbox: {
      fields: {
        items: { type: "slot" },
      },
      render: ({ items: Items }) => {
        return <Items style={{ display: "flex" }} />;
      },
    },
  },
};

{
  "type": "Flexbox",
  "props": {
    "id": "Flexbox-1",
    "items": [
      {
        "type": "Header",
        "props": {
          "id": "Header-2",
          "title": "Nested header"
        }
      }
    ]
  }
}

const config = {
  components: {
    Flexbox: {
      fields: {
        items: { type: "slot" },
      },
      // Include a Header in this slot when the Flexbox is added to the page
      defaultProps: {
        items: [
          {
            type: "Header",
            props: {
              title: "Hello, world",
            },
          },
        ],
      },
      render: ({ items: Items }) => {
        return <Items style={{ display: "flex" }} />;
      },
    },
  },
};

import { walkTree } from "@measured/puck";
 
const transformedData = walkTree(data, config, (nestedComponents) => {
  // Add the "example" prop to all children
  return nestedComponents.map((child) => ({
    ...child,
    props: { ...child.props, example: "Hello, world" },
  }));
});

import { createUsePuck } from "@measured/puck";
 
const usePuck = createUsePuck();
 
const LeftSideBarButton = () => {
  // Will only re-render when closing or opening the left sidebar
  const isOpen = usePuck((s) => s.appState.ui.leftSideBarVisible);
 
  return <button>{isOpen ? "Close" : "Open"}</button>;
};

import { useGetPuck } from "@measured/puck";
 
const SaveDataButton = () => {
  const getPuck = useGetPuck();
 
  const handleClick = useCallback(() => {
    // Access the latest appState only when the button gets clicked
    const { appState } = getPuck();
 
    saveData(appState.data);
  }, [getPuck]);
 
  return <button onClick={handleClick}>Save your page</button>;
};

const metadata = {
  pageId: "1234",
};
 
const config = {
  components: {
    Header: {
      render: ({ puck }) => <p>Page ID: {puck.metadata.pageId}</p>,
    },
  },
};
 
const Editor = () => {
  return <Puck config={config} data={{}} metadata={metadata} />;
};

const metadata = {
  pageId: "1234",
};
 
const config = {
  components: {
    Header: {
      resolveData: async (data, { metadata }) => {
        return { props: { title: `Page ID: ${metadata.pageId}` } };
      },
      render: ({ title }) => {
        return <h1>{title}</h1>;
      },
    },
  },
};
 
const Editor = () => {
  return <Puck config={config} data={{}} metadata={metadata} />;
};

$ npx create-puck-app my-app
 
# Type "react-router"
? Which recipe would you like to use? react-router

HeadingBlock: {
  fields: {
    title: { type: "text" },
  },
  render: ({ title }) => (
    <div style={{ padding: 64 }}>
      <h1>{title}</h1>
    </div>
  ),
},

getItemBySelector({
  index: 0,
  // The item is in the "children" slot field of the component with id "Flex-123"
  zone: "Flex-123:children",
});
// Returns: { type: "HeadingBlock", props: {...} }
 
getItemById("HeadingBlock-123");
// Returns: { type: "HeadingBlock", props: {...} }
 
getSelectorForId("HeadingBlock-123");
// Returns: { index: 0, zone: "Flex-123:children" }

const config = {
  components: {
    Header: {
      resolveData: async (data, params) => {
        // Resolve and add the title only when the Header is first dropped in
        if (params.trigger === "insert") {
          const resolvedTitle = await getTitle();
 
          return { props: { title: resolvedTitle } };
        }
        return data;
      },
      render: ({ title }) => {
        return <h1>{title}</h1>;
      },
    },
  },
};

import { TextCursor } from "lucide-react";
 
const config = {
  components: {
    Header: {
      fields: {
        title: {
          type: "text",
          labelIcon: <TextCursor size={16} />,
        },
      },
      render: ({ title }) => {
        return <h1>{title}</h1>;
      },
    },
  },
};

const config = {
  components: {
    CompanyInfo: {
      fields: {
        name: {
          type: "text",
          placeholder: "Your company name here...",
        },
      },
      render: ({ name }) => {
        return <p>{name}</p>;
      },
    },
  },
};

const config = {
  components: {
    EmptySpace: {
      fields: {
        height: {
          type: "number",
          step: 2,
        },
      },
      render: ({ height }) => {
        return <div style={{ height }} />;
      },
    },
  },
};

const config = {
  components: {
    Header: {
      fields: {
        title: { type: "text" },
        hiddenField: {
          type: "text",
          visible: false,
        },
      },
      defaultProps: {
        title: "Title",
        hiddenField: "The field of this value is hidden",
      },
      render: ({ title, hiddenField }) => {
        return (
          <div>
            <span>{hiddenField}</span>
            <h1>{title}</h1>
          </div>
        );
      },
    },
  },
};

import { RootConfig } from "@measured/puck";
 
const rootConfig: RootConfig<{ title: string }> = {
  fields: {
    title: { type: "text" },
  },
  defaultProps: { title: "My Page" },
  root: ({ children, title }) => {
    return (
      <div>
        <h1>{title}</h1>
        {children}
      </div>
    );
  },
};

import { useGetPuck } from "@measured/puck";
 
const RootTitleSetter = () => {
  const getPuck = useGetPuck();
 
  const handleClick = useCallback(() => {
    // Get the dispatcher
    const { dispatch } = getPuck();
 
    // Dispatch the action to update the root
    dispatch({ action: "replaceRoot", rootData: { title: "New Title" } });
  }, [getPuck]);
 
  return <button onClick={dispatch}>Set Title</button>;
};