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/13/2022

Lazy in For results in renderToString timed out in production build

Using a bare solid-start project with the following code, and running the prod build of it, results in a "renderToString timed out". To be precise: the first request results in this time out. Every further request works without timeout. Node version: v16.13.0 ```jsx...

<Alterion.Dev>

12/13/2022

Virtual Scrolling with animation and dynamic loading

I don't have the bandwidth to expend too much on this idea, so it's more of a thought experiment for later, unless someone in the ecosystem team has come up with an elegant, premade solution for this. I have a list of cards rendered in a wrapper, where I need to scroll horizontally on clicking a button. My current idea that's unoptimised but functional (probably) is to just have an overflow:hidden CSS, and control the current scrolling position of the wrapper manually, setting it to "n * the width of a card*. The main issue with that is that will a grand total of 4700 cards over 70 wrappers with individual scroll control, this might be... A bit slow. Is virtual scrolling a solved problem in Solid? Is there a currently updated plugin that does it well enough? If not, I'll reserve some personal time to possibly work on it outside of work development time, but I was wondering... ☺️...

musiclover

12/13/2022

Should I use createMemo always?

I had a similar question when I used React before. What's downside of createMemo?...

Fabian Hiller

12/13/2022

Refetch routeData when dynamic route changes

I use a dynamic route [slug].tsx to display a blogpost for example. To get the data of the post from the database I use routeData in combination with createRouteData. Thereby I set the slug as the key. If I now navigate with a link between blogposts, routeData or createRouteData is not executed again, so the content of the dynamic route does not change. Is this intended or a bug? Do I need to use refetchRouteData to trigger this myself e.g. in createEffect? ```tsx export function routeData({ params }: RouteDataArgs) { return {...

apollo79

12/13/2022

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

Raqueebuddin Aziz

12/13/2022

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

musiclover

12/13/2022

How to have data attribute on Custom component?

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

Nyantastic

12/12/2022

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

bigmistqke

12/12/2022

losing reactivity in For component

example repo: https://playground.solidjs.com/anonymous/b106963a-0ea6-4da2-a066-8bbf42bfc1f0 why is todo.nested.data not updated when i set the store?...

binajmen

12/11/2022

`xyz` is not a function

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

musiclover

12/11/2022

I have too long Switch, Match

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

╾━╤デ╦︻(▀̿Ĺ̯▀̿ ̿)

12/11/2022

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?

flashblaze

12/11/2022

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

Michael P. Jung

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

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.