SolidJS

S

SolidJS

Solid is a declarative reactive Javascript library for creating user interfaces.

Join

index.html <script> tag doesn't work?

Hi I'm using solidStart. The script tag in the index.html doesn't appear to be working. I add a console log in it and don't see the console log on either the client or server.

delay execution of createEffect.

I have a use case where I want one of my createEffect to be called before another . Currently they are called one after the other. I want to swap the executing sequence.

Breaking out proxied Stores object as a signal (while retaining reactivity)

Let's say I have an album object... ``` type Album = { id: string; artist: string;...

SSR Hydration error in ChildRoute with Context set in ParentRoute and intermediate Context Update

I have a ParentRoute that retrieves RouteData and uses that data to populate a Context ```tsx export default function Main() { const data = useRouteData();...

Right way of getting errors out of async context functions

I have a context that has methods that are async, the method itself on the context is sync, but that calls an Async method. This async method can throw an Unauthorized exception, it that happens i would like to redirect the user to "/signin". Would the correct way here be to have "error" signal that is read somewhere else on the UI thread and if that contains an error throw it, or are there a better way to do this? ``` export function PortfolioProvider(props: ProviderProps) { const { user, isAuthenticated } = useUser();...

Avoid Provider nesting

I am going to have a lot of Providers in my App, and i did not want to have 5+ nesting around my rotes. Here is the example with just 2 providers: ``` return ( <ErrorBoundary fallback={(err, reset) => <div onClick={reset}>Error: {err.toString()}</div>}>...

Tailwind Not applying?

hello, I am creating a set of fake "note cards" to display with different colors. When I created one card with one color, it worked, but now I'm using onMount to create many notecards in a loop and the tailwind color style is not applying. The font color is though, so I am inclined to believe it has to do with the order of rendering and applying styles. Any tips?

contextProvider using signal

Hi, noob question here -- just getting feet wet w/ SolidStart. Any help is appreciated!! Trying to create a context provider for setting theme, and prop is getting passed down but child comps not reacting. ```...

Guide for more complex usage of stores

Were can i find a more complex guid of how to use SolidJS stores. The example i wanted to do is to have a store of transactions, i will have a component to list all transactions, a component to create a new transaction with a parent page to contain it all. Down in the list component is a child component for each transaction. In the child component i can delete the given transaction, when this is done i would like to send a signal to the store that it needs to re-fetch the list of transactions, s...

Is it possible to create a `createCustomAction$`?

@nksaraf is it technically possible to create a custom createCustomAction$ function that builds on createServerAction$ or server$? This would allow library authors to keep the API simple, making the code more concise. Specifically, I would like to provide a SolidStart integration for my form library Modular Forms to enable the creation of progressively enhanced forms. Below is a code example. ```tsx...

filebased routing for 'regular' csr solidjs

since filebased routing is a vite-plugin and afaik it's isomorphic too, is it possible to set it up in a 'regular' client side rendered solidjs project?

$server v. tRPC

Hello, I'm kicking the tires on solid start and it looks amazing! (been using svelte-kit for past couple months for a project, but decided to give solid-start a try before getting deep in). One noob question I have is being able to make rpc call by simply defining $server function is -- like I said -- A M A Z I N G !!! -- so, why are folks using tRPC? (unless to other server backend).

useBeforeLeave or similar for tracking route change in Start

I need to track route changes within Start. Solid Router comes with useBeforeLeave which I can use to track the page the user is moving to however Start doesn't export it. Is everyone else importing router directly in this case?

useParams doesn't auto decode URI component?

I am getting %20 instead of spaces in my app

How to send data between different pages using Solid js?

Hello! I need to send user's phone number between 2 different pages. I know I could use a browser's Session Storage to do that but I'm not sure it is a good practice. Is there smth like VueX in vue.js or other ideas?

How would I wrap over some p5.js code to create a solid component

I want to make confetti in Solid. I found this Codepen: https://codepen.io/Gthibaud/pen/ENzXbp I am thinking though how can I use it. Do I have to rewrite the js code to work for solid or can I wrap over p5.js somehow and put it inside my solid app? API wise I want to essentially create <Confetti /> and then have conditional render in one of the routes to render <Confetti /> for say 2 seconds after successful form submit....

onfocus or onFocus or onFocusIn?

It is probably not solid issue, but not sure which one to use. I upgraded latest solid-js and onFocus seems to be gone, not sure if it was even there before? I tried to use onFocusIn but it seem to work with playwright but not vitest i.e. fireEvent.focus?...

useMatch not updating?

Ive been stuck on this for quite some time, so I would appreciative some help 🙂

Strategies for not calling setters in effects

I'm helping train someone on the dos and donts of reactivity and I got stumped with a pretty basic question regarding calling setters in effects. Most of the time I'm able to design my reactivity to ensure I'm not calling a setter but there's one pattern that got me curious. Say I have a signal that exists at the root of the application. I want a child component deep down the tree to be able to temporarily effect that signal as an override. In my case when I display a modal I want the navigation elements on the page to be hidden then reappear when the modal is closed. This is basically what would seem like the only reasonable solution:...

Scrolling to id is not consistent

Clicking a <A href="/#some_id"> link does nothing if the current route already matches the link completely. Is there a way to fix this behavior, so clicking the link on the same page repeatedly would scroll the element into view?