eponymous
Using Router Action with Solid (not SolidStart)
@peerreynders Nevermind. I see that you have spoken about this in one or two other discussions, and Ryan also chimed in on this recently. So in that case I'm going to just test if
submission.result is an error and not use submission.error (though that doesn't feel intuitive, however throwing an error in the action doesn't feel intuitive either).15 replies
Using Router Action with Solid (not SolidStart)
@peerreynders What's the advantage of
returning the error from the action vs throwing the error? It seems to me that it would be easier to just test if submission.error has a value, whereas you don't know if submission.result is returning an error value or a success value without an additional test.15 replies
Using Router Action with Solid (not SolidStart)
Ah, yes! That was a bad example. In my actual code I do have the component being rendered on a route.
In my app I'm using component routing, which works fine, and the particular component with which I'm trying to use the action is rendered through the route, like this
So, it is wrapped in a route. Is there something else I need to do?
P.S. For some reason I'm having trouble creating an example on StackBlitz, the route only renders a blank screen even when I use an inline component like
Route path="/hello-world" component={<h1>Hello World!</h1>} />15 replies
Create route which opens a modal
I'm putting this idea aside for now, after several hours of trying 🥲
Solid Router cannot track when you manually set
window.location (as expected), or when you use the History API to navigate. And there is no API to keep it in sync (from what I can see in the docs).
I've seen a few other complaints about the router not behaving as desired when back and forward buttons are used, and I'm experiencing the same thing.
I think a good exercise would be for me to dig some more into the router code and see how it works. Maybe I will have some ideas about how to improve it.
But for now, I'm using the more straightforward query params way to get this done.15 replies
Create route which opens a modal
Thanks for your reply. I agree with you in that it's trying to "shoehorn" functionality that the router doesn't intrinsically support. But it's the lack of compatibility with the router, and not the pattern itself which is the issue, imo. I'm going to test it out and see how much of a headache it gives me.
15 replies
Create route which opens a modal
Thanks for your reply. This seems like a good place to start when it comes to using the URL to control the modal.
What are your thoughts on using a URL without query params? So the URL would change to "example.com/login", and the modal would open up over the currently viewed page. How would you go about this?
I realize this is a more complex scenario when it comes to routing, but this is what I was envisioning, and outside of the login modal I would like to know how to implement this for other cases.
My initial thoughts are to use
useBeforeLeave to read the URL before leaving the current route. If it is for the login URL, then the navigation is cancelled and the modal is opened. Then the new path is manually added using the History API.
Your thoughts?15 replies
Is it possible to make two separate SolidJS 'apps' work on the same page?
@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.13 replies
Is it possible to make two separate SolidJS 'apps' work on the same page?
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.13 replies
Problem creating web component with solid-element
I solved this by using a ref (https://www.solidjs.com/tutorial/bindings_refs) instead of passing the class name to the Glide constructor. So...
new Glide('.glide', ...) becomes new Glide(glideRef, ...)
and <div class="glide"> becomes <div ref={glideRef} class="glide">2 replies