SolidJS

S

SolidJS

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

Join

Understanding behavior of rendering list of objects using For

I have an array of User objects ({id, name, age, hobbies}) that I would like to render into a list of HTML div elements that display the contents of the objects (fields and associated values). I know I can use the built-in For element to render this list. I need help understanding the differences between using signals vs stores in terms of whether or not the entire list of HTML div elements will be re-rendered in the following scenarios: 1. Insert a new User object in the middle of the array...

Testing server functions

Hallo! For my application I’d like to write automated API tests, but I noticed that there’s currently no way to access the endpoint URL of a server function declared using query() with "use server". Would it be possible to expose or simulate something like a .url or .fetch() helper so that we can test these functions from tools like Playwright or other API clients?...

How to reset a deep store?

I have some object within a store. Some filed inside of it has an array of objects. How can I reset the state properly? Here is the demo: https://playground.solidjs.com/anonymous/17bdf18c-3b03-4a27-ab94-2c8a6a3a458d I have notices some weird behavior: add new item, and press reset after....

Theme-switcher for solid

I'm building my project using SolidJS, PandaCSS, and Park UI. I'm currently looking for a robust theme switcher, similar to "next-themes", to toggle between light and dark modes effectively. https://github.com/pacocoursey/next-themes If there's a SolidJS-friendly solution or best practice for managing color mode that integrates well with PandaCSS, I’d love to explore it. #helpasap...

createComputed, one dependency changes quickly the first dependencies first reactivity is lost

``` createComputed(on(() => { let pvs = stockfish.pvs[fen()] console.log('dep', fen(), pvs)...

`vinxi start` fails with "Cannot find module" error with Vercel preset

Repro steps: 1. pnpm create solid with all default options 2. cd solid-project 3. pnpm update 4. Update app.config.ts to:...

@Floating-ui/solid port. 2 stories don't work.

Hello.
Firstly, thank you for taking a look at this humble support request. 😄 I do apologise in advance for the body of work this will entail. There is quite a lot of code to go through and due to that. This will probably take some time to not only understand the problem but also to provide a fix.
So I appreciate anyone who takes a look! Thank you! 🙇‍♂️ ...

Inconsistent Behavior with `clearSession` in SolidStart's `vinxi/http` Compared to Expectations

I’ve noticed that the behavior of clearSession in vinxi/http in SolidStart doesn’t align with my expectations, and I’m unsure if I’m misremembering or if there was an update that changed the behavior. The specific issue is: after clearing the session, the revalidated data still reflects the session state before it was cleared (similar to the behavior of deleteCookie). However, I recall that clearing a session should take effect immediately upon revalidation, unlike deleteCookie. For testing, I have the following code: ```typescript...

2nd createEffect always runs

I'm testing a @floating-ui/react port to solid. I have these two effects: ```...

What is the cause of hydration mismatch here?

I'm trying to create an authentication check which redirects the user to the login page when they aren't authenticated, however I am encountering a hydration mismatch when trying to show a loading page in the flow. ``` export default function AuthProvider({ children }) {...

Creating an "group index provider" context

For context I am developing a group component which places its children in a flex manner. I want any child of the group (as well as nested ones) be able to access its previous and next sibling sizes in the group, but that seems impossible to do without wrapping each direct child of the group with a context provider....

css import order changes between ssr: false and ssr: true

I have been working towards enabling ssr so I can get prerendering working for some of my unauthenticated routes, and now that I have it building I noticed the styles are all messed up. and it's because it isn't using the same css import order when ssr is enabled as when it isn't. I tried combining all my stylesheets together by importing them in my sass file, and that seems to resolve the issue, but it's not possible to make sure that the css modules are loaded after the initial index.css in that case, so the library css I'm using tends to override the module css. any ideas?...

Same Code when pasted in editor shows error logs in console.

``` import { render } from "solid-js/web"; import { createContext, useContext,...
No description

client only routes

Hey all, I am running into issues with ssr enabled again. I am trying to prerender my marketing pages, and then keep everything else that requires auth as client only. I tried using ...

What is the proper way to insert into an array that is rendered with <For>?

The docs talk about inserting at an arbitrary index: https://docs.solidjs.com/concepts/stores#appending-new-values When I used an index other than array.length, it replaced the item at that index rather than inserting a new one, unless there is some profound problem with my rendering....

SolidStart SSR: Why does createAsync data work in JSX but not in a child component?

当然,这是你这段问题的英文翻译,适合用来在 SolidStart 或相关社区中提问: ⸻ In a SolidStart project using SSR, I encountered an issue with a route component that uses createAsync to fetch an async resource. I’ve set deferStream: true, and here’s the problem:...

onCleanup and props

I thought I knew how onCleanup works.. but I don't. It would be great to understand the component lifecycle since the documentation barely explains how createEffect/onMount/onCleanup really work. Here is the piece of code that I find strange: ...

Improving Performance On CSS Transitions

I made a hover animation via CSS however it is very unoptimised, when i have a background behind it crawls to a halt. Its unbearably slow and i want to retain 99% of animation (including glows, scaling, backgroud animations and so on) and the this pattern background behind the cards(most likely due to the drop shadow), ```css .paper-pattern-background { width: 100vw; height: 80rem;...

Unexpected Actions dependency cross-contamination

Hello! I found some problems with actions and I would like to discuss them. This may be an issue from my part, but due to the time I spent on these problems I'm very confident this has something weird. It's about how actions' dependencies cross-contaminate other actions' result values. I want to highlight 2 noticeable problems. ...

Pagination range not being updated

Hey all. I'm totally stuck and reaching out for some help. (see video below) I have a paginated component which seems to have all it's values updating. But somewhere reactivity is breaking at a crucial point and thus the whole component doesn't work....