SolidJS

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

SolidJS

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

2/24/2025

How does Solid attach event handlers to DOM elements?

I want to test wether a DOM element has an onclick event handler. However, using the onclick (delgated event) in the JSX component, there is a $$click property added to the DOM element with the event handler and the onclick property is null. Using on:click (native element) on the JSX component, there is no $$click property and onclick is still null. What is the underlying mechanism for adding an event handler to DOM elements? ref: https://docs.solidjs.com/concepts/components/event-handlers Also, as a follow up, how would I test that an event handler is present on a DOM element? I'm currently using Vitest and Testing Library....

Luka

2/24/2025

Routes and fetch requests

I am trying to setup routes the way that whenever user visits "/xelosani/[id]" path they will get the profile page of user and when they visit "/xelosani/[id]/services/all" I want to have new page where user services will be rendered. - Current behavior Whenever I go to path: "/xelosani/[id]/services/all" the createAsync function that I have in "xelosani(details)/[id].jsx" file gets executed going to "/xelosani/[id]" works as expected it works just alright....

Hussein

2/24/2025

<Suspense> not fallbacking correctly

```tsx import { createAsync, query } from "@solidjs/router"; import { Suspense } from "solid-js"; const getData = query(async () => {...

tizu

2/23/2025

@solid-primitives/spring: obtain velocity?

is there some way I can obtain the velocity of the spring? xy: I want to detect if the popup is being dragged faster than x pixels, to then dismiss in a "flick" mode...

tizu

2/23/2025

router: "background" page

Hello everyone, I am trying to recreate this effect. My main issue at the moment is that I need the back button to function as a back button, so I'm not sure how I could do this. specifically, I need to be able to open the route that's in the drawer while keeping the old one in the background, if that makes any sense. I hope the video explains. thanks!...

McBrincie212

2/23/2025

Having The Same Context Transfer Different Properties

im trying to make a base widget, where it has common stuff amongst the widget elements(canvas for now, there will be the reference panel as well) ```jsx import {Context, createContext, JSXElement, useContext} from "solid-js"; export const BaseWidgetContext: Context<BaseCanvasPropertiesInterface | undefined> = createContext();...

snorbi

2/22/2025

Handling loading state

What is the correct way to implement a component that depends on state loaded asynchronously? The component function is executed only once, so I guess that I have to create all effects and memos during that single execution. My problem is that because the used data may still be loading, my code is full of null-checks. It is a top-level component (like a bookmarkable page of an SPA), so I cannot "hoist up" its state. Thanks....

binajmen

2/22/2025

[valibot] Types generic

Hi there ! I'm trying to create a small helper get (then post later). I think you can guess what is the endpoint. ...

Puru

2/22/2025

useDraggable how to make second argument reactive

I am building a draggable library neodrag v3, writing the solidJS adapter for it. I want the usage to look like this: ```ts useDraggable(draggableRef, [...

hyperknot

2/22/2025

How to modify array partially?

I'm using a store to store an array. I'm displaying that array in a For component. What I don't understand is how can I possibly use the "smart" feature of the For component, which only renders the changing part of the array. I mean all I can do in a store is setState(), where I put my full array in. So how can I possible send a partial update to a component? I see no way to push() at the end of an existing array in state or for example modify the last element of the array. What am I missing?...

hyperknot

2/21/2025

Why does my component only update in a dummy For loop?

The component works correctly in the For loop, but doesn't do anything on it's own. ``` <For each={[props.string]}> {(t) => <Item content={t} />}...

noxy

2/21/2025

navigate - Wait for navigation to finish

Hello, I'm reevaluating SolidJS and somehow it started really click in my head. There's one thing that I'm trying to do right now, basically I'm wrapping my whole app with UserProvider and and to expose two 'hooks' useUser and useMaybeUser with the only difference between them being that useUser would enforce that user is present or navigate you to login page. Here's what I came up with for now. ```ts import { useNavigate } from "@solidjs/router";...

Pridgey

2/21/2025

Another `template2 is not a function` issue

Took a look at the other posts mentioning this issue and can't seem to find anything that helps solve the case. I have a Tab Switch component to display different JSX.Elements with. I'm about 98% sure the error is coming out of this component because when I return a simple <h1>Hej</h1> there is no template2 error. I was originally using @kobalte/core's Tabs component, then decided to try and make my own rough tab switch component. Both have produced this error and I'm not really sure how best to proceed or troubleshoot. So any guidance would be helpful....

Joshua

2/21/2025

solid-router causes error: "cleanups created outside a `createRoot` or `render` will never be run"

Hi I am relatively new to solid so I could be making a simple mistake. I recently added solid router to my solid.js project and I am using the config based approach. Since I added the router and using it I get multiple errors like this: - cleanups created outside a createRoot or render will never be run - computations created outside a createRoot or render will never be disposed Since the router is actually rendered inside the render() method of solid, I am not sure what I am doing wrong, any help how to fix the warnings would be appreciated. Below you can see my code (I also uploaded the full files because pasting entire code is higher than the discord message limit....

App.tsx

hyperknot

2/20/2025

How to check if createMemo should be used?

I'm trying to figure out if using createMemo is or isn't worth it. I know that for super basic equality checks, there is probably no point. But what about something slow, like code highlighting?...

anthy

2/20/2025

"Simulating" loading state with createAsync

Here's a very simplified example what I'm trying to achieve: ```typescript import { createAsync, query } from '@solidjs/router'; import { Suspense } from 'solid-js'; ...

stereokai

2/19/2025

Exclude store property from `unwrap` or from being watched

When updating a SolidJS store, the entire next state of the store gets unwrapped (for example by updateArray()). Let's say the store is an array of objects, and each object has a data property which is a really big array. Unwrapping each of these arrays adds up to a very noticeable slow down every time the store is updated. Is there a way to exclude this property from being unwrapped, or from being "watched" by SolidJS? Thanks.

Norman

2/19/2025

can i change the path of `_server` and `_build` ?

can i change the path of _server and _build ? cuz i wana create discord activity and it's you can't have "/_" path

KiaClouth

2/17/2025

When I use blockly, nothing is on the page

I tried using blockly as the logic editor for my app, but when I use it, nothing renders and the console doesn't print anything out. I don't know how to troubleshoot this error. I didn't find the answer on both vite and blockly issues. Can anyone help me?

webstrand

2/16/2025

How to onCleanup an async resource from createResource?

```ts createResource(url, async (url) => { var resource; tryOnCleanup(() => resource?.close()); return resource = await connectToUrl(url);...

Gaming

Programming

SolidJS

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

SolidJS

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