Using Solid with mobx-jsx

[svicalifornia]

Hi @ryansolid — thanks for making these libraries. My question is about whether it makes sense to use Solid together with mobx-jsx. I enjoy MobX and would like to use mobx-jsx, but I see that it hasn't had a release in a while, and I don't want to miss out on new developments in Solid. Is it possible and worthwhile to use them together and get the best of both worlds?

[ryansolid]

Hmm seamless integration is a no. Basically reactive systems work off a singleton tracking context. So interopt with other reactive libraries is always a bit clunky since it basically involves granular synchronization. It's possible but also once you start doing that you start wondering why you just didn't pick one and do an API level integration.

The libraries probably can be used together in the same project if there was a good way to figure out how to get the build step to apply the right JSX transforms where. Maybe via file extension. Since both projects work the same way with real DOM children and no re-render I imagine it would be much easier than integrating with React. It would just require wrapping the entry points with a function wrapper to basically handle the synchronization of props. One tailored for each direction. Each nested context would be its own render mount point. There are definitely details there to work out.

As for the library itself, it has been a while and I can post an update again soon. I tend to update it every 6 months or so, so it can leverage the latest compiler improvements etc.. but honestly, I wasn't able to generalize a lot of the features from Solid so about a year to a year and a half ago I stopped trying to as much. Things like Suspense got to a point that I couldn't generalize the solution anymore, even things like how Solid has introduced scheduled lifecycles through its reactive system. Like createEffect runs after rendering in Solid. Small details like that

[tennox]

@ryansolid in your example, when enabling the recommended linting options, it complains about things like:

[mobx] Derivation 'externalSource@1' is created/updated without reading any observable value. 

Is that a given, or can this be improved?

[szagi3891]

@ryansolid - I used this way to integrate mobx with solid that you wrote about in previous comments:
https://github.com/szagi3891/solid-start/blob/main/src/lib/enableMobXWithSolidJS.ts

Only this method does not work very well.
This is a repository with my small example:
https://github.com/szagi3891/solid-start/blob/main/src/routes/index.tsx

1. When I go to http://localhost:3000/ , the counter starts properly

2. I am going to the website: http://localhost:3000/about
   the counter stops correctly

3. I am returning to the website: http://localhost:3000/
   The counter turns on for a short while and then turns off

What could be wrong with this integration ?

[tennox]

@szagi3891 we're using this pretty heavily in our app (code), so I don't think it's an issue with the glue code. 🤔

The only issue we're facing is when we accidentally somehow trigger/read a mobx observable in the component body, the solid component will re-render... - which is then rather hard to debug why. 🫠

[szagi3891]

In my case, I use createAtom
https://mobx.js.org/custom-observables.html

It may be that this error has not yet surfaced, for the reason that no one has yet used this itegration in this way.

[szagi3891]

That's why I have provided a test repository, in which any post-launch can easily reproduce this error

[knoopx]

@ryansolid just found solidjs and mobx-jsx at the same time and wondering how exactly they differ? to me mobx-jsx offers a way better observable-tracking api compared to the explicit way solidjs does but given you started solidjs afterwards I guess mobx had some limitation.

[ryansolid]

Mostly for what you'd expect. Firstly I was looking for the best performance. Enough to make the framework the most performant approach in benchmarks. The second is I prefer the explicit way completely. I've written about this in dozens of articles but for me this was one of the things I wanted to "solve". I've used other reactive systems for years and been teaching people for about as long and there are a lot considerations that go beyond the simple reactivity when building a system around it. MobX realizes this to a degree with strict mode and actions. I wanted to build this sort of protection right into the primitives.

That being said I'm surprised anyone who likes MobX wouldn't feel at home with createStore or createMutable. It isn't like we don't have the same proxies or that our tracking works differently. Maybe we are heavy-handed on the immutable interface but it isn't like we don't have the same primitives. In Solid people just use observable.box more than observable.

[titoBouzout]

The whole hooks thingy is the only thing that push me away from solid. I have been using svelte now. I just can't stand the "hook way". Code and more important logic becomes very messy and confusing with hooks. If this project provided a more intuitive way to deal with reactive statement, it would have become the library of choice.

[ryansolid]

That's unfortunate but there is one really cool thing about building a system off reactive primitives. I can't stop you. Even if I disagree wholeheartedly and think this applied to Solid is akin to strapping automatics to your legs pointing at your feet. Unless something fundamentally changes I don't see this as something we ever do as even Svelte has protection built in because reactivity doesn't really leave their files. For me, no native composition model is a non-starter.

But here is the thing there are a lot of options. You can:

1. createMutable which is very similar to MobX observable https://www.solidjs.com/docs/latest/api#createmutable
2. Use our externalSource feature which lets you use MobX directly in Solid with no wrappers. It won't be the most performant but probably similar to Svelte: https://codesandbox.io/s/mobx-external-source-0vf2l
3. You can use one of the many preprocessors that give you different syntaxes in Solid that resemble Svelte or Vue Sugar RFC. There are a few but if I can recommend one: https://github.com/LXSMNSYC/solid-labels

Solid's adaptability is its super power. I might not like everything people do with it and may never make that the default, but the sky is the limit with a good set of powerful primitives.

[titoBouzout]

createMutable must be what I am looking for! I just love the simplicity of observables, they allow me to express with ease without having to think how stuff works. I'm not happy with Svelte, but started using it for lack of alternatives that appeal my desires. Very interesting, the preprocessors for alternative syntaxes. Thanks for your efforts, always informative and your eternal kindness.