SolidJS

S

SolidJS

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

Join

Nicest way of having computed properties in a store?

I'm trying to model my store in a concise way, I want to have some base properties, and some computed properties, I think the cleanest way is to use getter/setters but currently they are not reactive as I'm clearly doing something wrong. This is what I have currently: ```ts...

Typesafe way to render conditionally based on whether array has zero, one or many elements?

Given an array with one or more elements, the idea is to display different UIs. With React, this can be done in a typesafe way by returning different JSX after an if check, ```ts if (array.length === 0) { // return emtpy sate...

How to implement JWT authentication in SolidJS, without SolidStart?

I'm currently learning SolidJS for a SPA app with JWT-based auth. Right now I'm trying to implement that JWT auth but I have a lot of problems and not sure if my approach is proper. What I currently have is a <LoginPage/> that calls the API and then saves the token as a cookie. ```TSX...

Attempting to access a stale value from <Show>...

Hi peeps, I have a rather complex application with lots of stores and recently have this issue. ```...

solidJS equivalent of react's cloneElement

I'm trying to convert a react component that uses cloneElement to a solidJS component. I've briefly glanced at some of the messages on discord concerning cloneElement and I haven't seen anything definitive. lxsmnsyc mentioned using solid-headless. Original react code: ```js import React from 'react';...

How to properly memoize children?

I have a small reactivity puzzle that I'm a little stumped on. I'm not sure if I just haven't structured my signals granularly enough, or simply don't understand something, or both. Essentially I have a pattern like this, in order to implement a list of dynamic inputs (1-N of them): ``` <For each={inputStates()>...

Nested Routing

Hello Friends. i think this isn't something new. and probably asked before. Im coming from stuff like react router or even next/sveltekit. I know theres Outlets. i know i could probably match urls and return the right component. But i dont see a recommended way of doing this....
No description

stack overflow internal to solidjs?

``` Exception has occurred: RangeError: Maximum call stack size exceeded at runUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:896:5) at completeUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:942:17) at runUpdates (file:/c:/typescript/node_modules/solid-js/dist/dev.js:891:5)...

confused on rendering issue

```tsx const [selectedFile, setSelectedFile] = createSignal<File | null>(null) return ( <div>...

No known conditions for "./browser" specifier in "msw" package

I'm trying to setup msw with my test environment in vitest and solid. Any idea why is this caused? Code [setup.ts]: ```typescript import { HttpResponse, http } from "msw";...

Checking if children exists breaks refs

This has been driving me insane, but I just figured out that if you do something like this : https://playground.solidjs.com/anonymous/67fefe74-34a1-48a0-8d2c-b05d3ceb7abd , then the ref you end up with isn't actually in the dom, since the ref was assigned twice, once for the actual node in the dom, and once for the props.children && "some-class-name" thing. 1) Is this a bug? 2) Is there a general pattern I should use to avoid this?...

Confusion with signal not updating the dom

I am not sure what to make of this other than the fact that I am confused, but the filename() signal doesn't update the dom whatsoever. Even though the createEffect is working fine and outputs the correct state of the filename signal. In my simplified example updating the signal doesn't update the dom but only when removing the filename after an initial filename value is passed, but still it wont update after inserting a new file. I uploaded the file as an image and the actual file, if you want to take a look and help me out. Because it's a bit bigger than the allowed non-subscription text length * cries in poor *....

This expression is not callable. Type 'Number' has no call signatures.

Hey! I added typescript to my project and now one of my createSignal isn't working properly and I can't understand why. code: ```jsx import { createResource, createSignal } from 'solid-js'...

SyntaxError: The requested module 'solid-js/web' does not provide an export named 'classList'

I am getting this error when using the solid-slider library in my code during SSR. I am using Solid 1.8.3 and solid-slider 1.3.15. Does anyone have any pointers what could cause this?...

Unrecoverable Hydration Mismatch error when trying to implement pagination on a custom table

I am relatively new to Solid, and I am running into an error that I don't quite understand.. I am implementing a generic table component that can have multiple tabs. The data for each tab is passed seperately then appropriately rendered based on which tab is currently active. I want to implement pagination as well, and I thought it would be as simple as doing a slice on the data being passed to the table based on what the current page should be, but I am consistently running into a Unrecoverable Hydration Mismatch. No template for key: <key>. I feel as though there is something fundamental I am missing. Has anyone run into this before? I can provide my code if needed. Thanks!...

How to set a store back to a default state at the top level (or clear it)?

Hi, I'm trying to use a store to represent the state of a dynamic number of inputs, where the inputs all map to a column in a db. A store seems like a good fit for this at first glance - I can store the input values keyed by the column id, and quickly get a set of signals for a dynamic number of inputs (then use those to determine form validity). My problem is when I submit - at that point I want to reset the entire store, thus also resetting all the controlled inputs to be blank as well, in preparation for the next input. How do I do this? For example:...

How to fetch chunks of data with createResouce?

How can I use createResource to fetch chunks of data from a paginated API endpoint? I need to fetch more data when the user clicks a button and then store that somewhere. Afaict you can't update the data createResource stores since refetching, mutating will get rid of the old data right? Do I need to store the data in a signal for this?

How to use async functions inside of synchronous components?

I tried await for a fetch inside my App component, but it went all wazoo and said promise is not valid JSX... I mean ofc but what do i do?

Good pattern for refetching the data

Hi folks, What would be a good way to trigger refetch outside the component? I tried extracting the createResource outside the Tasks component, but that means it'll fetch as soon as component is imported....

useContext. why doest get the value

dashboard is part of props.chilren. can i pass it on props.children ?
No description