SolidJS

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

SolidJS

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

12/9/2022

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.

Davide

12/9/2022

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

Aaron

12/9/2022

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....

sebb8200

12/8/2022

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)....

Baptiste

12/8/2022

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)

musiclover

12/8/2022

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?...

Pridgey

12/8/2022

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}". ...

Ninguern

12/7/2022

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

goenning

12/7/2022

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()),...

Brendan

12/7/2022

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. ...

lili/lilith

12/6/2022

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.

Ciantic

12/6/2022

How to use Hash Mode Router in SolidStart?

I think this is not possible at the moment, as properties for StartRouter isn't configurable, but I'd prefer hash mode routing for SPA.

musiclover

12/6/2022

How to have kind of 'named slot' in Solid like Vue?

I know there is 'props.children' But I want to place each children to different location inside component. What should I have to do?...

Max

12/5/2022

Conditional rendering approach

Hi, it's often the case there is a need to conditionally render components given data that may be undefined. Given how Solid handles reactivity it seems it is not type safe to use boolean evaluation or ternary statement to conditionally render something. The Show component seems to solve this issue but will only provide a callback to render children of keyed is true, I am unsure of the consequences of using keyed. Please see the example below which should illustrate the question fairly clearly. Thanks, any information would be cool....

musiclover

12/5/2022

Solid Show animation?

I'm currently using '@motionone/solid' library. But the bundle size is 20k, very huge... I hope Solid officially support show animation natively ...with small bundle size.....

Tur

12/5/2022

How to set delay on signal's setter

Hello! I'm trying to set a delay between mouseover and then menu opening. The menu is opened depending on signal state <li>on:mouseover={ setDropdownVisible('block') }</li> Once dropdownVisible() has set I set style display block on the menu I try to create the delay like this : <li>on:mouseover={ setTimeout(setDropdownVisible('block'), 1000) }</li> ...

musiclover

12/5/2022

Should I use 'batch' for store?

I want to call multiple setState. But i'm afraid it will render multiple times. So I wrapped with 'batch'. Is this right?...

musiclover

12/5/2022

How to make custom getter for store?

Can I do it like this? I don't guess the getState function would be reactive. is it possible?...

musiclover

12/5/2022

Plz, What's best store design pattern in this case?

I made a simple example code to explain my current situation. Please see my picture. I have color property as global, also in pages. I made getter and setter to change page color. But if global color is active, The global color should be changed, also should be returned by getter....

Menta

12/4/2022

I'm having issues deployment a Solid start site to cloudflare pages

The site is working on local and I already follow the steps on start-cloudflare-pages but then I use the command: CLOUDFLARE_ACCOUNT_ID=MY_ACCOUINT npx wrangler pages publish dist/public --project-name=PROJECT_Name I got this error...

Previous Next

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.