#Are we allowed to use a "slot" within an objectField?

1 messages · Page 1 of 1 (latest)

graceful ferry
#

I can't seem to ever see the slots in the render function when using them inside an object:

export type RootProps = DefaultRootProps;

export const Root: RootConfig<RootProps> = {
  defaultProps: {
    array: [{
      title: "Title",
    }],
    object: {},
  },
  fields: {
    slot: {
      type: "slot",
    },
    object: {
      type: "object",
      objectFields: {
        slot: {
          type: "slot",
        },
      },
    },
    array: {
      label: "Array",
      type: "array",
      arrayFields: {
        title: {
          label: "Title",
          type: "text",
        },
        slot: {
          type: "slot",
        }

      }
    }
  },
  render: ({ puck: { isEditing, renderDropZone: DropZone }, ...props}) => {
    console.log("Root render", props?.object?.slot, props.array?.[0]?.slot);
    ...

Is this intentional? are slots only allowed at the top level for field definitions? I can't seem to see the slot field appear within an array either of a default value, they only appear when you manually add an item to the array from the UI

inland shale
storm blaze
#

Hey @graceful ferry ! I don't know why, but I can't replicate your issues.

For reference, I just tried your use cases with this example in Puck 0.19.3:

Example: {
  fields: {
    object: { type: "object", objectFields: { content: { type: "slot" } } },
    array: {
      type: "array",
      arrayFields: { content: { type: "slot" } },
    },
  },
  defaultProps: {
    object: {
      content: [{ type: "Heading", props: { title: "Hello from the header" } }],
    },
    array: [
      {
        content: [{ type: "Heading", props: { title: "Hello from the array" } }],
      },
    ],
  },
  render: ({ object: { content: Content }, array }) => {
    console.log(Content, array);

    return (
      <>
        <Content />
        {array.map(({ content: ArrayContent }, index) => (
          <ArrayContent key={index} />
        ))}
      </>
    );
  },

When I try to add an Example component, it does include an array item with a slot that has a header inside, and I also get a default item with a header inside for the object.

graceful ferry
#

Sorry @storm blaze I was specifically talking about the "root" config, not the component config - i tried the above code example in the puck demo repo and couldn't get it to work

storm blaze
#

Ahhh I see! I just tried it out, there is a bug with this, because using default props with slots at the root level doesn't automatically assign an id, so it breaks

#

I was able to make it work by assigning a component id to the default props at the root level. I suggest this as a workaround for now:

root: {
  fields: {
    object: { type: "object", objectFields: { content: { type: "slot" } } },
    array: {
      type: "array",
      arrayFields: { content: { type: "slot" } },
    },
  },
  defaultProps: {
    object: {
      content: [
        {
          type: "Heading",
          // Assign an id here
          props: { id: "Heading-4321", title: "Hello from the header" },
        },
      ],
    },
    array: [
      {
        content: [
          {
            type: "Heading",
            // Assign an id here
            props: { id: "Heading-1234", title: "Hello from the array" },
          },
        ],
      },
    ],
  },
  render: ({ children, object: { content: Content }, array }) => {
    return (
      <div>
        <h2>Default content:</h2>
        {children}
        <hr />
        <h2>Object content:</h2>
        <Content />
        <hr />
        <h2>Array content:</h2>
        {array.map(({ content: ArrayContent }, index) => (
          <ArrayContent key={index} />
        ))}
      </div>
    );
  },
},

Could you let me know if this works for your integration?

This behavior shouldn’t be happening, though, it should be consistent with other components. I'll open an issue to track it. Thank you for reporting it!

storm blaze
graceful ferry
#

That's okay man, I can wait for it to be fixed, I do agree it should behave the same way as normal configurations but all good!