Metadata API

[chrisvxd]

Add a metadata API to enable the user to inject their own data down the Puck tree. This can provide a viable alternative to state management solutions, and should work for server components.

Proposal

Proposal 1

Add a metadata prop to the Puck component:

<Puck metadata={{ foo: "bar" }} />

Pass into components via the `puck.metadata prop:

{
  render: ({ puck }) => <div>{puck.metadata.foo}</div>
}

Proposal 2

Add a mapMetadata function to component config, with the result passed to all children

{
  fields: {
    example: { type: "text" }
  },
  mapMetadata: (metadata, props) => ({ ...metadata, example: props.example }),
}

Then, in a child component

{
  render: ({ puck }) => <div>{puck.metadata.example}</div>
}

Considerations

• Consider generic typing of metadata, especially when user is using Config or ComponentConfig types
• If making reactive, consider how to isolate rerenders