API ReferenceFunctionswalkTree

walkTree

Recursively walk the entire tree for the Data or a single ComponentData node, using a depth-first approach where the deepest slots are processed first.

Receives a callback function that is called once for each slot. You can optionally return a value to update the slot.


import { walkTree } from "@measured/puck";
 
// Add the example prop to all children in the data
const newData = walkTree(data, config, (content) =>
  content.map((child) => ({
    ...child,
    props: { ...child.props, example: "Hello, world" },
  }))
);
 
console.log(newData);
// {
//   "root": {},
//   "content": [
//     {
//       "type": "Component",
//       "props": {
//         "id": "1234",
//         "content": [
//           {
//             "type": "Child",
//             "props": { "id": "5678", "example": "Hello, world" }
//           }
//         ],
//         "example": "Hello, world"
//       }
//     }
//   ]
// }

Args

Param	Example	Type
`data`	`{ root: {}, content: [] }`	Data \| ComponentData
`config`	`{ components: {} }`	Config
`callbackFn()`	`(content) => content.slice(0, 1)`	Function

`data`

The Data or ComponentData to traverse.

`config`

A Puck config object, used to determine which components contain slots.

`callbackFn(content, options)`

A callback function called for each slot. Receives an array of ComponentData. Optionally returns an updated array of ComponentData to update the content for this slot.

Args

Param	Example	Type
`content`	`[{ type: "Heading", props: {} }]`	`ComponentData[]`
`options`	`{ parentId: "Flex-123", propName: "Content" }`	object

`content`

An array of ComponentData, containing all the nodes for this slot.

`options`

An object containing additional options

`options.parentId`

The id of the parent component that defines this slot.

`options.propName`

The name of the slot field.

Returns

Optionally return an updated array of ComponentData objects.

Returns

A new Data or ComponentData object populated with any values returned by the callbackFn.

usePuck

Overrides