SolidJS

S

SolidJS

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

Join

Action triggering revalidation without cookie

I am implementing an admin site which uses BetterAuth. When implementing an action it seems it tries to fetch fresh data (my createAsync call) but it fails my admin validation because the cookie doesn't seem to be present. Not quite sure how I get around this. The isAdmin function is shown below (it gets called by functions in a "use server" context). ``` import { getRequestEvent } from "solid-js/web"; import { auth } from "./auth";...

Pre rendering

Hey all, after the svelte 5 update I've decided to switch. My question: is it possible to prerender parts of the website like in sveltekit, when building the app?...

Suspense and dealing with large data

I am trying to display loading states until the data is arrvied, but I am facing some struggles, for now I am making a profile page where I am fetching large user data with just one createAsync with deferStream: true, this requires me to wrap the whole page in Suspense I am thinking this will lead to me making one large loading layout for just one suspense I don't think this is convenient. Should I be fetching user data just by one createAsync or fetch some user data seperately I have about 22.5kb of data just by one fetch. should I have multiple fetches which I think should Allow me to use multiple suspenses here is what I am doing and what I think I should change but I want just approval or direction I might be wrong...

Jetbrains IntelliSense doesn't work

I am trying to use signals within my code but I get an error for no reason. I am assuming there is something that I haven't configured. Or maybe a vite issue... The site runs fine....
No description

SolidJS + Typescript

After trying to use solid with ts, I have found out that ts is still trying to use react for jsx. How can I fix this? ```js // src/Button.tsx var Button = () => {...

Using solid js in a chrome extension to spawn button

I am trying to understand if it is possible to render different components in different roots? In my case I need to spawn some buttons in inputs of different forms. I am a bit worried having too many reactive roots an cause performance issues...

can I handle a group of useSubmisson?

if an action is still pending (like during a synchronization) and another modification occurs that triggers a second update, how should useSubmission handle this? Would it be better to avoid new action submissions while an update is pending, or is there a pattern you would recommend for handling overlapping updates gracefully? thanks...

Server Side Rendering

So I started learning solidjs/solidstart around 3 months ago and instantly after 1-2 weeks I basically started building a project thinking I would learn more which actually is an easier way to learn for me. I've written some code but I don't really know if it is Server Side Rendered or not I want it to be SSR I am going to include some code here ` // I have some imports up as well didn't want to include it const user = createAsync(() => get_xelosani(props.params.id))...

useContext(someContext) returns undefined if the component is inside fallback prop for <Show ... />

Is this normal behavior? Usind solid-js 1.9.3 on dev env (win10). The following renders the LoginScreen file just fine. It uses Context from Notifications....

BUG?: clientOnly inside Suspense boundary is not shown

I'm using SolidStart and I'm trying to render component based on createAsync result. This component is wrapped with clientOnly - because it depends in the DOM. I did not understand why it did not render this component. Here is a small reproduction ```tsx...
No description

Is this a correct implementation? :)

I'm new to both JSX and Solid. Is this a correct implementation or can it be simplified? ``` const NavLink = (props) => { const [_, restProps] = splitProps(props, ["href", "children"]);...

pnpm and ffmpeg-static

Hi folks ! I am having an issue with node_modules-installed binaries. I am using ffmpeg-static and fluent-ffmpeg to do audio conversion with the SolidStart framework. When building my application with vinxi build, it seem to copy my root node_modules inside .output/server/node_modules, with everything, excepted the ffmpeg binary that I downloaded through the pnpm install command. Is there any workaround in order to get the ffmpeg copoied into it ? Or to get the actual path of ffmpeg binary ? Because the relative path I get from the ffmpeg-static module once ran contains the .output/server part, which is false. I could just remove that section from the path, but it looks like a dirty hack to get around this issue. Any thoughts ?...

How to Implement Page Caching

I’m developing an admin panel, and users will frequently navigate between different feature pages. If every page transition requires reloading data, it would lead to a very poor experience. Is there a way to cache the pages? For example, when a user switches back from route A to route B, they should still see the content as they left it, including the scroll position, data, etc.

Css modules not getting nonce attribute

I am setting up my app with a strict CSP header and passing the nonce in createHandler work as expected for all assets in the header. But I don't get the nonce attribute on <style /> elements that solid and/or vite injects into the body for a route's css module. does anyone maybe know how to solve this? or otherwise point me to the code in solid's repo where css modules are handled...

Nested Stores not tracking with `trackDeep`/`trackStore`

I have a top-level store created in parent component A. This store contains an array of objects, like so: ``` type MyType = { field1: boolean[],...

mutate & refetch not causing a re render

```tsx const [mainParentFolder] = createResource(folderPath, get_os_folder_by_path); const [osVideos, { mutate }] = createResource( () => mainParentFolder() ? mainParentFolder()?.path : null,...

Matching Error State with createAsync

When using createResource one has access to resource.error to handle the case when we get an error from our remote calls. ```tsx <Switch> <Match when={user.error}>...

SolidStart layout shifts using createAsync

Hi, I found out that I experience layout shifts whenever a createAsync is re-triggered. For example here: ```tsx...

pRPC - redirect not working in callers

When using the redirect$ function from prcp or the redirect function from solid-router it just does not redirect. ```ts export const redirectAction = createAction(async () => { throw redirect$("/hello");...

Tanstack Query+Virtual Suspense reactivity

I am having problems with suspense and query+virtual, using it without virtual works fine though. Just comment out suspense to see that it works afterwards https://stackblitz.com/edit/solidjs-templates-ztdgo1...