SolidJS

S

SolidJS

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

Join

<input> has no value inside <dialog>

If I use an example controlled input component on an <App /> root it renders with the initial signal value. But if I move the same code inside a dialog, when opening the dialog the input shows no value. Calling the input value outside of input displays the value correctly. The dialog is just an html dialog, opening it via ref on button click ”dialogRef.showModal()”...

Understanding `createRoot`

There isn't a lot of accessible and straightforward information about how createRoot works, why it exists, and when it should be used. To my knowledge, it's a relatively advanced topic, and there is rarely a need to use it. I don't have a specific use case for it either, but I wanted to update the documentation, so I need to understand it better first. Specifically, I want to address this issue. Here are my questions; please provide simple explanations: 1. Why is it named createRoot? Root of what?...

How to set route info for file routes?

I'm attempting to implement breadcrumb. I see the docs mentions a solution that involves useCurrentMatches and an info object. But how does one set such an object for file routes? Is there a special export similar to Remix's handle?

renderToString in Elysia BFF Layer

Random question, I have a Solid SPA with a BFF server (implemented using Elysia) -- so this is not Solid Start. This all lives under a single repository with the following root, high-level structure: ```tsx - shared (contains things shared across both Elysia BFF and Solid SPA) - server (Elysia BFF: contains only normal TypeScript files)...

Solid Router Nested Urls

Having trouble getting my nested Urls to show up. I have layout files that I want to have for only a group of urls, but when I try what the docs say nothing shows up.

Solid Start, how to add backend/nitro plugin?

Lets say I want to have this code initializing when i start/restart the server itself, independent of any clients visiting the webapp? ``` console.log('Plugin started') setInterval(()=>{ console.log('Plugin running') }, 5000)...

how to add auth protected route or layout in a better way?

```ts // Auth Layout import { useNavigate } from "@solidjs/router"; import type { ParentProps } from "solid-js"; import { useAuth } from "~/context/auth-context";...

Preferred way of handling `429 Too Many Requests` with `createResource`?

I have an API that returns 429 with a retry-after header. The way I handle it right now seems... suboptimal to me. It works fine, don't get me wrong, but I have a feeling it culd be handled better. ```ts const [canLoad, setCanLoad] = createSignal(true); const loadQuote = async () => {...

Passing signal value as a prop

Hey, I just started learning solid today and I'm already having some troubles with it. I'm trying to create a quick project overview carousel, but for some reason, title won't update. The only thing that "somehow" worked, was to call signal getter inside Title component, but its kinda now what i'm looking for. Title.tsx ```tsx import { JSX } from 'solid-js';...

solid-primitives/storage help for a persistent user config store not loading properly on refresh/

I have user config in a store that I want to persist. I added makePersisted from solid-primitives/storage 4.3.1. I do a check for if it is the first time the user has visited to give initial config. I load the components based on each config item in the store array. When I refresh the page, the UI does not reflect values from localStorage; it loads the same as first initialized. When I make a config change, one div "catches up" (the For with Show), but the other one doesn't load the correct value until I re-toggled them myself. I've tried a resource from init tied to Suspense or even Show. Any help appreciated. `import { makePersisted } from "@solid-primitives/storage"; export default function Home() {...

Solid Start in pnpm workspaces monorepo

Hi, does anyone know how to make solidstart work in a monorepo with pnpm workspaces ? After seeing the section talking about monorepo support on solidstart readme, I tried this in pnpm-workspace.yaml: ```yaml shamefullyHoist: true...

Stale read in <List><Show><List>

https://playground.solidjs.com/anonymous/ccb906d4-c9f1-437f-9f72-e94279b0e25d I am stumped, I don't know why the stale read is happening, I don't know why it's triggered by that stream of states and not others. Note that the playground doesn't render the error message correctly, here's the dev message:...

Untrack on store arrays

Yesterday I had some misunderstandings around createEffect and stores. Today I probably have similar misunderstandings around untrack. My assumption was that, e.g. ``` createEffect(() => {...

createEffect vs createEffect + on

What could be the reason that the first createEffect is triggered but not the second one using on? I feel there is something obvious I'm missing. Using solid-js 1.9.5 ``` createEffect(() => { console.log("effect", props.nearestPointConfig);...

SolidJS Router Missunderstanding

Can someone help me setup a basic router with the "@solidjs/router" I am not sure where to put what. My current understanding was that this is the way to do but document.getElementById is underlined red: ``` Argument of type 'HTMLElement | null' is not assignable to parameter of type 'MountableElement'....

Clearing form after action in solid-start

Searches on this discord return old posts that suggest using createEffect on submission.pending along with a ref to the form to do clearing. I'm just checking if this is still the right way to handle form clearing after successful actions. Please let me know if you have a better suggestion. Thanks...

Would this break reactivity?

I'm new to signals. The solidstart tutorial mentioned that destructuring may break reactivity in components. I don't fully understand that just yet and wonder if that means the following hook would break reactivity. This is a convenience hook I'm writing to simplify usage of the better-auth useSession hook. If it can potentially break reactivty, how would you suggest accomplishing the goal of unpacking the data field into user and session? ```...

Multi Layout Children

Is it possible for a page to set some data to go into different layout locations, like named slots for children please?

Getting Page Title

If this is in a route: <Title>Example 🧘‍♀️</Title> Is there anyway to get that information in the Layout of that route please? I figured I could hack like an onMount + js thing but wondering if server side in the layout i could know this info w/ Solid's api please?...
Next