Is it possible to make two separate SolidJS 'apps' work on the same page?
I have a page running SolidJS and I'm trying to get another SolidJS 'app' to render on the same page within a specific element. However, I notice that the second instance only runs when I remove the first instance.
Is there any way to make this work?
9 Replies
Yes, there is a way to do this. You bootstrap the apps to separate elements:
https://www.solidjs.com/docs/latest/api#render
SolidJS
Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.
Works both as siblings, or parent/child.
I'll need a bit more information about your specific setup in order to help further.
I.e. is the one app running inside the other? Is this a Vite SPA app, or is there server rendering?
Actually, my question isn't accurately describing my problem:
I used Solid to create web components which I then used on a WordPress website. Due to how cumbersome it is to work with web components (for me), I decided to just use Solid directly and render the components to separate elements. The plan is to replace each web component one by one with the new elements.
On my first attempt, I'm rendering the navigation bar to a div with id
#navroot. It doesn't show unless I remove the .js file importing all the previously created web components.There is also this new improvement.
https://github.com/solidjs/solid/blob/main/CHANGELOG.md#better-guards-on-global-scripts
is your wordpress front-end and backend completely separate, or do you use php to render the frontend too?
I'm aware sometimes people use wordpress php backend just for the CMS and then have an entirely different frontend - is that your setup, or do you have a more classic setup?
It's a typical WordPress theme (using PHP) with Solid components sprinkled in - so the more classic setup.
Try to use solid-js 1.8, it's out just now and might actually fix your issue.
Okay. I'll give it a try. Thanks!
@Ron W how do use a solidjs component in wordpress? I need to create a wordpress page and my solid app in the page. I thought of creating a wordpress plugin or a page in in child-theme. (wp makes things so much more complicated :/)
@vik Previously I used
solid-element (https://github.com/solidjs/solid/tree/main/packages/solid-element) to create a web component from each solid component. Then I could use my components like any other HTML element in my PHP files. That worked okay, but managing common dependencies between components ( such as styles, icons, etc. ) is a chore. (I also suspect that I may not have been taking the right approach, and there isn't much documentation on using solid-element).
Currently, I'm trying a different way - which is to render each Solid component to it's own root. So, by default Solid renders the whole app to a single HTML element with an ID of root, like so: render(() => <App />, root!);. So instead of the whole app, I'm going to render each individual component to its own element, and I can "sprinkle" the elements throughout my PHP just like with web components.
Just like with any other JS file, you enqueue your Solid build in functions.php. The same goes for the stylesheet.
I'm just in the early stages of doing this, so I can't report the pros and cons vs web components just yet. But I'll report back in a day or so.