SolidJS•17mo ago

How do I export components as child objects in a JavaScript object?

Hi Comunnity, i have a quick question: How can I export a component, using Dialog as the root, for example, Dialog.Content?

<Dialog>
    <Dialog.Content>
      Lorem...
    </Dialog.Content>
</Dialog>

<Dialog>
    <Dialog.Content>
      Lorem...
    </Dialog.Content>
</Dialog>

I have already tried to export with:

export default Object.assign(Dialog, {
   Content: DialogContent
})

export default Object.assign(Dialog, {
   Content: DialogContent
})

However, SolidJS doesn't quite want to do that, as it occasionally fails to render the child component 🤷‍♂️ Is there an alternative, with Typescript support? Greetings Tobi ✌️

3 Replies

TOBIIOP•17mo ago

I already know that you can export a component like this:

export const Dialog = {
  Root: DialogRoot,
  Content: DialogContent
}

export const Dialog = {
  Root: DialogRoot,
  Content: DialogContent
}

but this is a bit impractical for the button, because I have to write Button.Root every time:

export const Button = {
  Root: ButtonRoot,
  Spinner: ButtonSpinner
}

export const Button = {
  Root: ButtonRoot,
  Spinner: ButtonSpinner
}

Otonashi•17mo ago

Object.assign should work fine, not sure why it's failing to render, that aside typescript allows you to directly assign properties to functions and will type it accordingly i.e.

Dialog.Content = DialogContent;

Dialog.Content = DialogContent;

TOBIIOP•17mo ago

Oops, my mistake, I applied Object.assign twice to the same function, so the sub component was overwritten 🤦‍♂️ Thanks for your answer anyway @otonashi9

Gaming

Programming

How do I export components as child objects in a JavaScript object?