SolidJS

S

SolidJS

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

Join

defineConfig import.meta.dev

Hi Everybody! I need to archive a (theoretically) easy thing. In my defineConfig inside of app.config.ts, I need to resolve a variable based on if I'm running the server with bun run dev or with bun start. ...

Best approach for using createResource

I have a question. The createResource should be used outside the component and not inside the component, is this a correct statement? I only ask because I noticed the fetcher runs twice if put inside a component vs having it outside the component?

Context with children(() => props.children) helper triggers an error

Hey! I've been trying to create a Stepper component in which I'd have StepperContext with its API. however, somehow I need to control the displayed children, I found the children helper but it doesn't work with context https://playground.solidjs.com/anonymous/92dca985-17bc-4cbb-b2d8-d4b95fb33a33 am I missing something?...

Solid-Start vinxi/http issue with useWebRequest

Hey, when using getWebRequest from vinxi/http inside a Context I get the error,
Error: Module "node:async_hooks" has been externalized for browser compatibility. Cannot access "node:async_hooks.AsyncLocalStorage" in client code.
Error: Module "node:async_hooks" has been externalized for browser compatibility. Cannot access "node:async_hooks.AsyncLocalStorage" in client code.
...

How to use a common header with solid-router nested layouts

Hi, If i have a nested layout like bellow what is the best way for routes that share the layout to change the title shown in the shared layout? ```...

Creating a <ProtectedRoute/> component to use with solid router

Hi, Currently i have this which results in a Uncaught Error: <A> and 'use' router primitives can be only used inside a Route. ProtectedRoute.tsx:...

Cannot build for Vercel

For context So far I'm not satisfied with Solid Start because I wasn't able to deploy the app at least anywhere (I tried Vercel, Netlify and Cloudflare). But Vercel is my main target so this question is about deploying to Vercel specifically. Also I haven't really seen anyone to have the same problem as I do. ...

How to use a resource in a structure field as a reactive signal?

I am having serious skill issues and starting to lose my mind a bit. Maybe someone has ideas how to make price reactive? For now as far as I understand price field is created with NaN values because in the beginning of a page load I suppose the fetch is not yet executed because everything is async. ```js...

Slider packages

Hi everyone Any package like https://keen-slider.io/ or others to create sliders and carousels? Thanks 🙏...

Binding events in a typesafe way with typescript?

I'm following the binding events (https://docs.solidjs.com/concepts/components/event-handlers#binding-events) section of the docs so solid can optimize my event handlers, but I'm not able to do this in a typesafe way. For example: ```typescript function square(number: number, event: Event) { const squaredNumber = number * number;...

SSR Cookies

Hi all, I'm new to SSR and don't fully understand in the solidstart basic example which components are being rendered server side / client side. I'm using tanstack solid-query and for testing I have a button that on press calls a /click route on my server and adds a row to the database consisting of: - a deviceId cookie...

How do I refresh data without reloading the page

I have a CRUD form working great, but with one last feature needed: refresh datasource. I have tried some recommendations using Route's reload and revalidation technique's but with no success. Here is a basic breakdown of what I have.

HOC for Suspense and ErrorBoundary

I was wondering whether it's possible to have following component: ``` export const RepositoryWrapper = ({ children, loading = <div class="text-sky-800 p-4">Loading...</div>,...

Optimize image loading

Hi everyone I'm trying to create an image component to be optimized the loading, etc. I see this repository on a video: https://github.com/w3cj/solid-vs-react/blob/main/solid-image-search/src/components/ImageLoader.tsx ...

Hydration Mismatch. Unable to find DOM nodes for hydration key

Hi everyone After create my "card" to list all projects I starting having the error Hydration Mismatch. Unable to find DOM nodes for hydration key, initial I suspect that is because I'm trying to use createPagination primitive, but after comment the code related with the pagination the error persists. I will leave the code on the thread...

JWT to Cookie

I am getting pretty confused on when to use something like @solid-primitives/storage versus vinxi/http to set cookies or if I should use a middleware similar to how sveltekit implements middlewares for locals. example I am working through is authenticating my user. I have the standard OIDC flow. user clicks the 'login with google' button and is sent to auth.mydomain.com/auth/google/authorize which generates the url sends them to google to signin. The user signs in with google and is send back to auth.mydomain.com/callback/google which validates them in my DB and generates a JWT and sends them back to the location.origin with the url containing the access_token. (example: localhost:3000/#eyJhbG.... I want to take that jwt access_token and set it as the Authorization: Bearer $AUTH_TOKEN and remove the hashed value from the url?...

Pagination

Hi everyone Anyone already did pagination or infinite scrolling on Solid? If yes, can share how to do it please? I found a primitive for that, but I can't use the data fetching I have with the createInfiniteScroll....

Creating a store with data returned from an async function

Simplifying greatly, this is what I would like to achieve: ```javascript const [tab, setTab] = createStore({ path: await homeDir(),...

Prisma integration example fails in build

Could someone help me try to reproduce a bug I get in the official npm init solid@latest? 1. npm init solid@latest 2. Select the following options: Solid-Start: Yes, TypeScript: Yes, template: "with-prisma" 3. cd into project folder...

Confusion about Preload mechanism

I am confused about the preload mechanism. According to my understanding, adding an asynchronous function wrapped by a cache in preload initiates data fetching when the route is accessed, ensuring the data is ready when the page starts rendering. Observing the console, this indeed happens. When the function is called within the route component, the data should already be prepared. Even if an asynchronous function calls this function, it should immediately return the data. However, my observation is different; there is still an asynchronous process to re-fetch the data. The sample code is as follows: ```typescript // function in the preload()...