SolidJS

S

SolidJS

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

Join

Solid routing

so i have been trying out solid and i keep having some issues with the router, one of which is the routes tag which i believe is in the older versions but i'm using the newer one and dont really wanna downgrade... so this is my code: index.jsx:...

"Show done" in a basic todo list, and handling reactive arrays

Trying to create a basic todo app to get my grips with some basic solid/reactivity principles. So far what I have works, but I have no idea if this is the idomatic way to handle array signals (ie if i'm changing/adding/removing elements the "correct") way. I will post the code as a separate message because it's too long....

Reactive context in built-in components

I've looked into the source code of the core components, like: https://github.com/solidjs/solid/blob/fff8aed62b4bff78a0016c3c08ba644652ccac18/packages/solid/src/server/rendering.ts#L291 My question is: why are these components reactive at all? :] I mean they seem to be simple JS functions, their code is not wrapped by the usual "reactive context" providers like JSX, createMemo(), etc. Thanks....

Access ref in child component when using forwarding refs

I would like to use a forwarding ref as described in https://docs.solidjs.com/concepts/refs#forwarding-refs but also access the ref in the child component itself, like: ```tsx // Child component function Canvas(props) { let anotherRef // <-- how to assign this?...

Lots of separate requests when using lucide-solid during devmode

I tried to use lucide-solid, and it works as expected. My problem is that it downloads each icon JSX file separately during development, slowing down the initial page load, and completely "ruining" the Network view: ``` ... arrow-down-circle.jsx 304 script aliases.ts:138 145 B 591 ms...

Using useNavigate within client-only action/query

The docs says:
If you are inside of a cache or action function you will instead [of useNavigate] want to use redirect or reload.
Does that include query/actions that only run on the client (don't use "use server")?...

Looping onMount

Hey, I currently try to create an userscript and wanna use SolidJS, does anyone know why onMount keeps getting called and why productElems stays null? ``` const { default: html } = await import("https://esm.sh/[email protected]/html"); const { render } = await import("https://esm.sh/[email protected]/web"); const { onCleanup, createSignal, createEffect, createMemo, onMount, Show } = await import("https://esm.sh/[email protected]");...

Can't use `bun run vinxi dev` as a result of a hang, node infinitely increases in CPU and RAM usage

I try to run it, and it simply doesn't work. Building and then serving does work though

Derrived Signal With A Ressource

Hi! That might be an easy one. I get a resource from a Context called userData. What is the proper way to derrive further signals or just values from it? The following example doesn´t seem correct and I think it smells. ...

failed to resolve import

Hey, i'm facing something very strange, i install my pandacss and modify the tsconfig.json to add an "alias" so i can type @panda/css ... and use the functions but i receive the error Failed to resolve import ....Does the file exist? "paths": { "~/": ["./src/"], "@/": ["./drizzle/"], "@panda/": ["./styled-system/"]...

Trying to understand stores in a reactive scope

I've started rewriting my code to use stores instead of lots of signals, and I'm not sure if I understand how they work when passed into a reactive context. This is my store: ```ts export type ExplorerState = { clips: ClipTreeItem[];...

createRoot with libraries?

I have a very strange behaviour that I can't really explain. I've been building a library in which is a plugin to the rete (retejs.org) library, as part of this I have to manage component lifecycle for which I use createRoot. The strange thing is, that createRoot prevents Components from inside the library to trigger "computation created outside a 'createRoot'..." but it doesn't prevent the same if I create a child component outside the library in main code. So if I have something like the following that gets created under a createRoot call: ...

useContext returns undefined

Hi there! I am making a game launcher wich looks like an OS in frutiger aero style with Solid JS. I have a ContextProvider wrapping my whole app like so: ```ts render( () => (...
No description

Duplicate `<link rel="canonical">` in SolidStart

In my SolidStart project, I have the following code:
```tsx <Title>Home | Example</Title> <Link rel="canonical" href="https://www.example.com/" />...

Hydration error when using <Show> in SolidStart

I am new to SolidStart, I see this talked about in several places but I fail to understand how any of the mentioned solutions applies to my case. I am trying to conditionally render something using <Show>: ```tsx export function Footer() {...

Solid Router: save page state inside useBeforeLeave

Hello everyone I have a case when I want to save some of the page state inside history to be able to access it if user goes back at some point. I see useLocation router primitive, but the .state there is something passed frim useNavigate. In my case I want to save this state inside useBeforeLeave. I know I can just use history.replaceState browser API, but the problem is I need to use either standard Router, or MemoryRouter, depending on platform the app is running at, so I would love to stick to solid-only api...

Socket IO Errors

In the uploaded file is my socket.io error

Stuck on a simple router setup

I'm learning how to use Solid Router by stepping through the docs in order. My goal is to build something like this: ``` <nav> <a href="/">Home</a>...

createResource

I'm trying to be able to reuse functions for API calls, like how it's done with React Query, but the value of data.isLoading loses reactivity when I use it in my component. ```jsx /// function export function useGetUserById(id: string) {...

multiple options for auto import

I have annoying issue with my IDEs, that I get multiple import suggestions so there is no quick way to apply auto import. Maybe someone has quick idea how to fix it? There is one correct import from "solid-js" and other from "solid-js/types...".
No description