SolidJS

S

SolidJS

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

Join

Accessing functions declared in child elements

Noob here, only been using solid for a few days in a tauri project. Included the relevant files. In TilesetGFX, i have declared a function called "drawTileset", which is used inside of the TilesetGFX component. However, in the tileset_editor component, I'd like to also be able to call that same function from within the onChange event of a "select" tag (at line 33) I haven't found any way currently to achieve this yet, so i was wondering if someone could help me, surely smth like this must be possible? ...

Async route guards in Solid Router, and serverside props (not using SolidStart)

I'm building something very similar to Interia.js with a Go backend and a Solid frontend. Pages are rendered by a Node process that uses renderToStringAsync, and clientside pages are hydrated. See below for the rest of the thread....

SolidTable infinite loop with `createAsync` query, createMemo but not createSignal + createEffect?

I'm writing a SolidStart project, using SolidTable to display data from a backend DB. I'm using SolidStart query to fetch data and SolidStart actions to insert data. I'm running into an issue where if I supply the createAsync accessor of the query directly as the data parameter for the table - it hangs / hits out of memory errors when I insert a row using the action. I'm not 100% sure what causes the issue but it seems like it might be an infinite re-render of the table. If I keep everything the same but change the table data to be an empty array then it works no problems - so not an issue with the DB/query/action by themselves, it's only when its used as data for the table. I've tried some alternative approaches - createMemo of the createAsync accessor does not work - but strangely if I use createSignal and then update it with the value of the createAsync query in createEffect then it does work? Why createSignal/createEffect here work when createAsync does not? Does createAsync not have stable references? Please help me work this out - I'd really like to not use createEffect to make this work if I can avoid it. Thanks!...

SolidStart behind nginx reverse proxy

Hello kind peoples, I am having trouble running SolidStart behind an NGINX reverse proxy It "sort of works", I get the page to load with most content. but there's some buggy behavior, it does not seem to load javascript nor handle redirects, which work perfectly fine if I am just running in a docker container without the reverse proxy, ...

<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...