SolidJS

S

SolidJS

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

Join

Confusion with suspense and nested routeData

I have two pages relying on the same data, so I put them in routes app/page1 and app/page2. My goal is to have route data for the app route forwarded to the two pages. The idea is to have a routes/app.tsx that looks something like this: ```TSX export const routeData = () => createServerData$(async (_, event) => ...)...

Dev server works build/start doesn't

It complains about $HY not being defined among many components not working. Just asking if somebody has had the same problem and how they solved it....

How do you consume server actions response?

It might look as a silly question, but it is unclear for me how you must consume the response (either is it result or error). ```ts export default function Users() { const users = useRouteData<typeof routeData>();...

Link to imported component w/ parameter with Module Federation

I have been following a tutorial from about 2 years ago, aimed at React, with my newfound love of Solid (I have replaced the React icons in Material UI Theme extension for VS Code): https://www.youtube.com/watch?v=lKKsjpH09dU Jack's been a good sport about the issues I've had up to this point, but I don't want to keep bothering him. In any case, I'm attempting to link to the product detail page from the HomeComponent in this way:...

Context undefined when called from a function in onClick, but not if called in component

I have a component which has a button that onClick calls a function. That function tries to access a few contexts but they are all undefined. If I try to access the contexts from the caller component they work. Is there a specific reason why this happens? Any workarounds aside from passing down all the contexts to the function every time?

How to trigger update on resource update?

Do I need to pair each resource with signal to add item to the list that's originally loaded as resource?

Unresolved createResource doesn't trigger Suspense boundaries?

https://playground.solidjs.com/anonymous/65d5e1a1-df41-47c4-989f-2a0fc0885274 Is it expected that unresolved resource doesn't trigger Suspense boundaries? I would expect my loading screen to come up even if the resource is still waiting for its dependency....

Kobalte Paginator

Hello, I'm encountering an issue with Kobalte Paginator. Kobalte Version: 0.11...
No description

Spinner component questions about best practices

What would be the best way to show a spinner only if a loading() signal spends more than 2 seconds (that is when a resource). I'm thinking setting that on the Spinner component directly but there's a better way? Also the spinner usually appears on each page of the app centered so I created a prop that wraps it in a div and centers it, rendered conditionally with the wrapper or alone, what do you thing? ```typescript import { Component, Show, createSignal, onCleanup, onMount } from 'solid-js'; import './Spinner.scss';...

how to better understand `createDeferred`?

The doc says idle, what is the difference between requestIdleCallback and this? Should it be considerred as reactive version of requestIdleCallback? Moreover, after searching across gh and discord channels, there is few examples to show how to use createDeferred correctly. Is there any best-practice or learning resource about it?...

Vercel deployment issue.

I Just migrated my small project from astro framework to solid start. I am trying to publish the project on vercel but am running into this error: Error: No Output Directory named ".output" found after the Build completed. You can configure the Output Directory in your Project Settings....

Custom cursor not working

I have this simple custom cursor component. When I try to hover over some sections (all sections except headers for some reason) it starts jumping and disappears. I have no idea what that could be. Am I missing something? Btw it's used on an Astro project, in case it's relevant ```javascript...

better way to type props with default props

```tsx import { mergeProps, type JSX } from "solid-js"; // helper type which creates props type from defaultprops + adds children // this would be somewhere in global.d.ts or imported....

"Make sure your app is wrapped in a `<Router>`" with Lucia-Auth

I'm trying to move over to Lucia-Auth, and I'm following this guide. I have a routeData function that looks like this: ```Typescript export const routeData = createServerData$(async (_, event) => { const authRequest = auth.handleRequest(event.request)...

ErrorBoundary explanation

Can someone explain why this first one works and other doesnt: 1. ```js...

catch 401 error in entry server

```tsx async function preProcessor(forward: MiddlewareFn, event: FetchEvent, session: Session) { const response = await forward(event); console.log("status", response.status); if (response.status === 401) {...

How do you disable SSR on a specific route/part of a route?

Is there a way to mark a whole route or at least a portion of a route as being client only? I know there's syntax that allows something similar to use but finding documentation on it has been tricky. Halp? 🙂

how solid.js handles props

Hello, I’m new to solid.js. My aim is to teach other developers too(after getting myself farmiliar) . I’m trying to understand how solid.js handles props and came up with this theory “ solid.js differentiates itself from other frameworks by using fine-grained reactivity to update only specific parts of a component affected by changing props, without the requirement for a virtual DOM. It is also built on reactivity which ensures real-time synchronization between data and user interface” I wanted to know if I’m correct on this. And also got some questions like - what is solid.js approach to type-checking...

root.tsx & cookies

I need to read cookie data so I can setup my theme (i.e., an html data attribute) and load a script (based on runtime data), so need access to request object from within root.tsx. A solution appears to be anything but straight-forward. I found a couple related threads (below) on loading data into root.tsx but I feel they lead down the wrong path for something that should be so simple. Is there an SS prescribed method for reading cookie data from root.tsx? Thanks!...

Best way of passing props from Provider to Context

So I'm making a simple context with a Provider "wrapper" as is quite common to wrap functionality. I pass some values to it in JSX that should then be available when using the context. ```typescript interface DataGridContextValue { readonly markets: Record<string, string>;...