valid fern
I'm trying to use Solid with PureScript, but seems like when component gets compiled from TSX to JS, a lot of stuff is happening.
Basically, is it possible somehow to make something like this work?
return Dynamic({
component: "div",
children: [
val(),
Dynamic({
component: "button",
children: "Test",
onClick: () => setVal("testVal")
})
]
});
I think I figured it out.
export const dynamic = (component) => (props) => () => {
const { children, ...rest } = props;
return createComponent(
Dynamic,
({
component,
get children() {
return children?.map(c => typeof c === 'string' ? c : createMemo(() => c()))
},
...rest
}));
}
this one works
grave smelt
destructuring breaks reactivity, I wouldn't recommend this
valid fern
yup, changed it already, thanks @grave smelt
valid fern
@grave smelt can I create a fragment with Dynamic, if you know?
grave smelt
<@317910247995867139> can I create a fragment with Dynamic, if you know?
you'd have to use this:
function Fragment(props) {
return createMemo(() => props.children);
}
hmm, then it means, instead of mapping that children and memoing it, I can simply return Fragment(props) in above component and it will work as expected
perfect
valid fern
Seems like this doesn't really do the justice and I'm missing some of stuff with this approach.
Isn't there a way to somehow get the same output with plain js (maybe by using some internal functions) and if not, what can be the best approach in this case or even maybe there's absolutely no point of doing this and it's a generally a bad idea to use Solid with TypeScript.
@next heart I'll tag you if you don't mind, I've watched couple of streams by you and haven't really got an answers for this question. I saw how you did something like this, but you didn't say what are the downsides with this and maybe you haven't thought about this kind of usage of Solid. With PureScript and React, it's very easy, since React's JSX gets transformed to JS without this extra stuff.
valid fern
Seems like using Dynamic as the main building block, doesn't really work, it does extra re-renders.. 😦
here's an example - https://playground.solidjs.com/anonymous/619ecfaa-e283-41c4-95a2-fa91fd4ff2d4
You can swap Counter with Counter2 and check in dev tools' Elements, how things are being re-rendered.
There's also clear difference how they are being compiled. I've replicated this with PureScript and then figured out that it doesn't really work like this correctly.. :X
next heart
Hmm.. interestingly I see what you see in the dev tools.. However it is the same DOM elements
It's more like they are being re-inserted in the same spot I guess
It doesn't create extra DOM nodes
Chrome doesn't even collapse the nodes in the inspector
In general prop manipulation is where a lot of the work of the compiler comes in. If we didn't do this people would be having to handle this wrapping themselves on both sides to figure out what is a signal what isn't etc.. and ensure all their expressions that need to be wrapped are. Generally I don't recommend people using the standard JSX transform for this reason or Tagged Template Literals. It is more complicated. We do have functions to wrap props in DOM Expressions and we have a mergeProps function which is basically our equivalent to Object.assign to retain reactivity but like this isn't the experience I'd wish on anyone.