Can I use Chakra Stack? Or does this conflict with native layout?

Can I use Chakra Stack or does this conflict with the native layout stack?
So far I have:

registerComponent(Stack, {
name: "Stack",
importPath: "@chakra-ui/react",
props: {
  ...
  children: {
    type: "slot",
    props: {
      defaultValue: [
        {type: "component", name: "Heading"},
        {type: "component", name: "Text"},
        ...
      ]
      }
  },
},
});

Which gives me an empty Stack:

image.png

Ideally I want to have the default values in a CardBody.
But this creates error in Plasmic.

  registerComponent(CardBody, {
    name: 'CardBody',
    importPath: './styles/CardBody',
    props: {
      children: {
        type: "slot",
        allowedComponents: ["Stack", "Image"],
        defaultValue: [
          {
          type: "component",
          name: "Image",
          },
          {
            type: "component",
            name: "Stack",
            props: {
              children: {
                type: "slot",
                allowedComponents: ["Heading", "Text"],
                defaultValue: [
                  {type: "component", name: "Heading"},
                  {type: "component", name: "Text"},
                  ...
                ]
              }
            }
            }
          ]
        }
      }
    }
  )

image.png

In CardBody, is the issue that I can’t have nested slots?
I think @verbal_sparrow said I can only have one. Is that what he means?

Again, this is the same error you’ve asked last time @political_magpie, I know it is extremely confusing, but think of it like this:

In the top level of registration you are introducing the first time what the component is, and what it does, hence you have type: "slot" and allowedComponents: because the editor has to know these info for your fresh new component to work.

But inside the children { } clause, you are NOT introducing those inner components anymore, the editor is already acquainted with your inner components, because you supposed to have already introduced them separately by themselves (each having their own registration), hence inside the children { } you don’t write type: "slot" and allowedComponents , you instead directly specify what goes inside it’s children, because the type and allowed components are already set on their own terms, this is not the place.

Take another look at this official code snippet I sent you 12 days ago, there are no more type:children and allowedComponents inside the defaultValue: [...] (the red brace)

Granted it’s not very straight forward, but this is how I wrap my non-coder brain around this issue, I definitely think Plasmic will need to make this registration process easier, either I would need to write a VSCode extension for this PlasmicComponentRegistration process so that we’re able to do it visually, (how ironic that Visual Studio Code has everything but visual :melting_face:) or Plasmic integrate this registration process through editor panels, anyhow the hundreds of different types of errors can be completely avoided by doing things visually, through UI

OK. So I now have :

  registerComponent(CardBody, {
    name: 'CardBody',
    importPath: './styles/CardBody',
    props: {
      children: {
        type: "slot",
        allowedComponents: ["Stack", "Image"],
        defaultValue: [
          {
          type: "component",
          name: "Image",
          },
          {
            type: "component",
            name: "Stack",
            props: {
              children: {
                defaultValue: [
                  {type: "component", name: "Heading"},
                  {type: "component", name: "Text"},
                  {type: "component", name: "Text"}
                ]
              }
            }
            }
          ]
        }
      }
    }
  )

Whopps no type: "component" right?

type: "component" is fine :smile: it should be there

or is it just type: “slot” thats a no go

I get a TypeError: Failed to fetch in terminal and in plasmic

image.png

Can’t wait for the Chakra package to come out. Then this issue falls away.

Remove the defaultValue line for all inner childrens, the defaultValue is only specified once during that component’s own initial registration

This is what tripped me up as you have only 1 child instead of 3

Remove the initial { } pair of brackets from children: so it directly faces [ ]

No errors but don’t see elements in Plasmic:

hang oin

refresh porps

YES!