SolidJS

S

SolidJS

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

Join

createSignal equals: false on mutable object value

Hi guys, I have a resource source signal with { equals: false } that does not trigger fetching unless I wrap and deep copy the object literal value in the source param. The value itself is a propety of an instance wrapped with createMutable, which I suspect is at the crux of this....

Third party authentication

What is the best way to implement third-party authentication like google and Facebook in solide.js? I used to auth0 in react.js but for solid js its not supported...

Calling a JSX event handler explicitly

How can I call an event handler explicitly? ```ts const handleFocus = (e: FocusEvent) => { // perform some operation ...

How to filter/remove elements from an array within a Store

If I have the following createStore invocation: ```tsx export type WeeklyTimesheetSubmission = { readonly cards: TimesheetCard[];...

Related components

How would you implement a <Form> and <ValidatedField> component? ``` <Form> <ValidedField ... /> <ValidedField ... />...

Error when using protected$ from @solid-mediakit/auth.

The error message is [error] node_modules/vinxi/runtime/http.js (71:9): "AsyncLocalStorage" is not exported by "__vite-browser-external", imported by "node_modules/vinxi/runtime/http.js".

Range input issue with Dynamic component

Range slider input can't slide on Android devices. Please kindly check below sandbox demo. https://codesandbox.io/p/devbox/694lr9...

solid router, absolute routes?

So i have compiled my solid app and have a few things i would like to change but dont know how, right now i host the app on my school server so for example server.com/name.surname/project_name/index.html so as u can see the app should run inside the project name folder but when i use the routing in the app, the search bar domain says for example server.com/contact and not server.com/name.surname/project_name/contact like it should which also makes the links not work when manually browsing to them, any fix? <Router root={Bars}>...

behaviour of createAsync in hooks - why cached?

I'm trying to get a better understanding on createAsync & query, and weather or not it is an appropriate way to share state. I created a hook and use it like this. This works perfectly fine. But I'm confused why the logs appear in the console, but no requests are made. I understood, that the query() cashes for only 5 seconds - so why is it not making requests all the timem even on navigation? I can import the hook and access the data from everywhere simultaneously. ...

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/solid-js@1.8.1/html"); const { render } = await import("https://esm.sh/solid-js@1.8.1/web"); const { onCleanup, createSignal, createEffect, createMemo, onMount, Show } = await import("https://esm.sh/solid-js@1.8.1");...

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[];...