SolidJS

S

SolidJS

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

Join

SolidStart render page from POST function

I have a form in SolidStart with method="post" and action="". To validate the form on server side, I export a POST function. However I am wondering how I could, if the data I got isn't valid, show the form again with the data the user already submitted (and maybe additional error messages) from this POST function?...

How to update nested store values such that it triggers updates

I have a store with the shape IUserState. Now I want to update some projectGroup to add a new project to it. How can I achieve this so that updates are triggered? ```typescript export interface IUserState { projectGroups: IProjectGroup[];...

How to have data attribute on Custom component?

I want to do something like <Foo data-something = { 'hello' } /> How to provide data props ?...

createStore from fetched data ?

Hello! I'm sorry for asking this because I'm sure this is stupid. But here I go: I'm fetching kind of heavy data from my own API and using useRouteData() in my component, and would like to display it in a table with actions, like delete, update some values, etc. So far so good, I'm getting the data, but it takes a few seconds, and my createStore call isn't waiting for the data to be available : const routeData = useRouteData();...

`xyz` is not a function

Hi, I'm new to Solid/SolidStart and trying to play with prisma. I have the following code:...

I have too long Switch, Match

Is there any alternative in this case? I have 50 components to match.....

Can we use solid's For and Index component for data that isn't stored as a signal?

Let's say we're using something like react-query or urql to fetch some data from the server and render it. We're not making a raw fetch request and storing the results in solid's signals. Instead the results are controlled by an external library. Would we get the benefits of solid's For and Index components with this approach?

Property 'giscus-widget' does not exist on type 'JSX.IntrinsicElements'

I'm trying to add wrapper for giscus library: https://github.com/giscus/giscus-component for Solid I'm now probably at the last step but I'm getting this error. ``` import { createEffect, createSignal } from "solid-js"; import type { GiscusProps } from "./types";...

SSR Performance (SolidJS vs Next)

I ran a simple wrk benchmark on a project initialized with npm init solid and npx create-next-app@13 and found the following numbers. The Next.js front page is 3.11 kB in size and the one from solid is only 1.78 kB. Both projects were started using npm start.

Solid Router Layouts

What is the correct way to handle layouts in solid router? I was thinking of something similar to sveltekit, but I can't find anything about it

Is this considered good practice?

Hey! I have a createResource that only runs when params.id and isEditMode are active. My question. Is this considered a good practice? My component has 2 modes. Create and Editing. I'm trying to combine both into one view. Is it good practice to create 2 api fetches from a createResource and conditionally handle what the output is in a createEffect? I would love some feedback on the code below and maybe explain if this is a good approach....

how to use from or reconcile with an external producer

I try to use an external store (https://github.com/nerdslabs/storex) with solid. To try it out I copied the https://www.solidjs.com/tutorial/stores_createstore?solved example and replaced addTodo() with a commit to the external store. The store seems to produce data just fine. This is the console output from the subscribe callback below (After I created the first todo from the frontend)....

Export an IIFE build with esbuild not working as expected

Is there any guide on how to export an IIFE build? I tried setting up esbuild to do that but it doesn't work as expect (cf video)

SVG path animation in Solid like Svelte's transition draw

https://v2.svelte.dev/repl?version=2.6.2&gist=897a0ede58c59201d57cee7f119bee50 https://github.com/sveltejs/svelte-transitions-draw I came from Svelte, One thing I miss from svelte is transition:draw feature. When chaning svg path's "d" attribute, it smoothly redraw. Can I do this kind of thing in Solid?...

Getting User Info from route page

I might be fundamentally misunderstanding how this is supposed to work, so if that is the case please let me know. I'm authenticating with Supabase via the /signin route, which stores the jwt in a cookie. Now, when I load up index.tsx I'm hoping to get the User data to render on the page. Something simple like a "Hello {Username}". ...

How to properly type the `mergeProps` with Typescript?

I'm using the mergeProps function to enter some default props for my component, but this is causing a Typescript error because some properties that are using string literals are being replaced with just type string. ```ts interface ButtonBaseProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> { variant?: ButtonVariant;...

reactive initialValue on createResource

is it possible to make initialValue react based on a signal? I have this: ``` const [namespaces] = createResource(contexts, fetchNamespaces, { initialValue: getCachedNamespaces(contexts()),...

Can I create a hole in Suspense

I might just be having a brain fart here - so please be gentle. I confess to not using Suspense in our apps so far. Typically, we're CSR and have just managed our own loading states. But I'm investigating adding Suspense above our router - which creates some other issues for us. ...

Is the on change broken for file inputs?

It only ever seems to trigger once, and it's not processing updates. I might have screwed something up.