SolidJS•2y ago

Is it possible to create fully functional component without JSX/TSX syntax?

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")
      })
    ]
  });

return Dynamic({
    component: "div",
    children: [
      val(),
      Dynamic({
        component: "button",
        children: "Test",
        onClick: () => setVal("testVal")
      })
    ]
  });

10 Replies

aquarazordaOP•2y ago

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
    }));
}

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

lxsmnsyc•2y ago

destructuring breaks reactivity, I wouldn't recommend this

aquarazordaOP•2y ago

yup, changed it already, thanks @lxsmnsyc @lxsmnsyc can I create a fragment with Dynamic, if you know?

lxsmnsyc•2y ago

you'd have to use this:

function Fragment(props) {
  return createMemo(() => props.children);
}

function Fragment(props) {
  return createMemo(() => props.children);
}

aquarazordaOP•2y ago

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

aquarazordaOP•2y ago

https://playground.solidjs.com/anonymous/c79c20bf-9895-4c44-af13-1925cdf7fb58

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

aquarazordaOP•2y ago

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. @ryansolid 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. Seems like using Dynamic as the main building block, doesn't really work, it does extra re-renders.. 😦

aquarazordaOP•2y ago

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

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

ryansolid•2y ago

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.

aquarazordaOP•2y ago

That's it, thanks a lot, That mergeProps solved my issues, now I can enjoy using Solid with PureScript. Thanks a lot, good luck and looking forward for updates, streams and all kinds of good stuff that you are doing, I appreciate that you replied.

Gaming

Programming

Is it possible to create fully functional component without JSX/TSX syntax?