Make passing store props consistent with passing signal props

[matt-way]

I started using createStore to manage my nested state object, and noticed a glaring inconsistency that should be fixed.

If you build a custom component that expects a signal as a prop, passing a store value crashes the child component unless you create a memo, or pass it as an inline function. For example:

const MyComp = props => <div>{props.value()}</div>

With signals:

const [sig] = createSignal('hello')
...
<MyComp value={sig}/>

With store

const [store] = createStore({ say: 'hello' })
...
<MyComp value={store.say}/>

The above crashes unless you do <MyComp value={() => store.say}/>

There is literally never a situation where you would want to pass in a store value directly to a custom component. To a primitive component, it makes sense, but never to a custom component.

My idea is that solid should be changed to convert all store values passed in as props to functions (to maintain signal passing consistency), so that custom components expecting signals never get tripped up by passing in store values. This would remove the need to always wrap store values in functions when passing them into props (after realising the mistake was made). The result would allow:

<MyComp value={store.say}/>

MyComp would then not break as calling props.value() would work as expected. To summarise, this would break the inconsistent API surrounding store signals and regular signals. store.say is already reactive so it shouldnt be adding overhead.

[atk]

You can just use <MyComp value={() => store.say}/> to fulfill the requirement of your component. Or you check in your component if the prop is a function and wrap it if not.

[matt-way]

Yes, but as I wrote, you end up having to put ({) => store.whatever} into every prop you pass around which isn't great, and inconsistent with regular signals. It looks really bad when a bunch of your props are passed in directly (signals), while other need to be wrapped (store). It is way too easy to make the mistake of passing a store prop directly. Then you have to wait until the child component crashes to remember you need to wrap it.

Checking if a prop is a function or not isn't robust, as functions could be part of your actual state. Also this would mean having to write prop wrappers into every component. This should be done under the hood automatically.

I'd just like to see a consistent prop passing API with solid.

[ryansolid]

The consistent API with Solid is not passing signals. Basically never author components that expect Signals as a prop. We will wrap reactive expressions automatically.

Read:
https://dev.to/this-is-learning/thinking-locally-with-signals-3b7h

[matt-way]

Thank you so much for getting back to me, and sorry for wasting your time. It seems that I had my entire mental model of solid backwards. It started by passing mysignal() into a component which wasn't updating due to a different bug, but led me to believe I had to pass in a signal to get reactivity. Solid feels so much better now. Thanks again.