SolidJS•2mo ago

Insights on my component library

Hello, i'm building my own component library to fit my project needs. I'm having a bit of a problem with state management Do anyone have a better way to work with state other than using Provider? On this particular component im using a signal state to know if its open or not. And i must wrap it into a provider or else when i have two or more dropdown they share state, but passing a provider makes the overall api feels clunky. Any improvements suggestions?

3 Replies

peerreynders•2mo ago

I'm not saying your approach is wrong. My style is much more data-driven and I would describe your approach as "component-driven". So the question is: What trade-offs are show stoppers for you to implementing this as a single component whose configuration is data-driven. Stated differently: Try to express the commonalities (of your use cases) in terms of your component while capturing the variability (across your various known use cases) in terms of the configuration data (e.g. an options prop) that it can adapt to. But that is just a suggestion. (The point being if it's a single component then it may not need a global context)

Dakotys•2mo ago

I suggest you look how for example Switch and Match components were created https://github.com/solidjs/solid/blob/a72d393a07b22f9b7496e5eb93712188ccce0d28/packages/solid/src/server/rendering.ts#L233-L257. So instead of creating individual options in DropDown.Option i would just upstream individual props to main DropDown component and handle creation of individual options there using For loop. Not only would the whole code be cleaner but it would also unlock second way of declaring a dropdown. Not only:

<DropDown.Container>
        <DropDown.Group>
            <DropDown.Option value={"Edit"} />
            <DropDown.Option value={"Delete"} />
        </DropDown.Group>
    </DropDown.Container>

<DropDown.Container>
        <DropDown.Group>
            <DropDown.Option value={"Edit"} />
            <DropDown.Option value={"Delete"} />
        </DropDown.Group>
    </DropDown.Container>

But also:

<DropDown.Container options={[["Edit", "Delete"]]}>

<DropDown.Container options={[["Edit", "Delete"]]}>

ps: the first link shows how the concept of upstreaming works and how its rendered on server, here is link to how the code would normally look in ts https://github.com/solidjs/solid/blob/a72d393a07b22f9b7496e5eb93712188ccce0d28/packages/solid/src/render/flow.ts#L160-L234, but you won't need createMemo and so many type declarations.

mrVinicius•2mo ago

I'm all hears man! This is my first time building such a thing. We use Bootstrap at work and i find myself repeating a lot of components via copy paste, this leads to some inconsistency which i wish to replace in the future, for our next project i'll introduce them to SolidJS and i wish to have a few of our use cases covered as example I found a middleground, i wrapped my whole component within a context call instead of calling it myself everytime. I somewhat agree with the options array as it is more straight forward, but as im not sure yet of what other capabilities my dropdown is gonna need, i dont want to abstract too much yet. im happy for now of how im exposing the api, when i actually put this thing to use i'll fine tune it. usage:

<DropDown.Component>
  <DropDown.Button name="toggler" />
  <DropDown.Group>
      <DropDown.Option value={"some value"} />
  </DropDown.Group>
</DropDown.Component>

// OR

<DropDownComponent name="toggler" values={["value1", "value2"]} />

<DropDown.Component>
  <DropDown.Button name="toggler" />
  <DropDown.Group>
      <DropDown.Option value={"some value"} />
  </DropDown.Group>
</DropDown.Component>

// OR

<DropDownComponent name="toggler" values={["value1", "value2"]} />

Gaming

Programming

Insights on my component library