SolidJS

S

SolidJS

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

Join

ERR_HTTP_HEADERS_SENT

```ts import { APIEvent } from "@solidjs/start/server"; export async function POST(event: APIEvent) { const data = new FormData();...

Initial search params

Is there a way to set initial search parameters for a route? I'm building an application where users are able to save their table sorting/filters into local storage and the next time they visit the page, those are automatically populated to the search params. ```javascript function Route() { const defaultParams = getDefaultParamsFromStorage();...

How do I best have createMemo in a store?

I'm used to MobX, where I can put a @computed on any method in a store. In Solid, how do I best replicate this? If I do this:...

I can't initialize a session

In this code, I use useSession to create a session and initialize it with "light" if it doesn't have a value: ```ts import { createAsync, query } from "@solidjs/router"; import { useSession } from "vinxi/http";...

Using Solid Signals/Stores in React

I have an app with various frontends implemented in React. I'd like to switch to SolidJS for new frontend code (and eventually convert the old ones) but it's too big a lift to do all in one go, so I was going to try adpoting Solid incrementally. There is some logic that concerns state that is shared by all the frontends so as a first step I was thinking of converting that logic to use Solid signals/stores. It seems like signals are an independent concept and implementation and could be used as a standalone state management system, but am I missing something?...

Help understanding the `solid` export condition, and how SolidStart uses it

Hi everyone. I am trying to build a Solidjs library and I keep seeing that a solid condition export is needed for libraries to work with SSR and SolidStart. I hope to get some help understanding what this it, why is it needed for SSR, and what is its relation with the generate: 'ssr' option of the babel preset

SSG isn't truly static

It seems like I have wrong presumption about what SSG meant. I want some routes on my site to be static - i.e. at build time it should do some async server stuff (like reading data from DB, read some files from file system, etc. ) --> Then populate the data into the markup, and return the page static. But that doesn't seem to work. One demonstration is: I have a route called random that generates a random number --> I configured server: { prerender: {routes: ['/random'] }}} (route code below)...

Error during navigation

I have an error during navigation, possibly because of mishandling URL parameters by the router's useSearch() or useParams() (but this is only a guess). My problem is that the stack trace does not help at all, I attached a screenshot. Do you have any ideas how can I track the real location of the error? Thanks....
No description

Dependency error using npm init solid@latest

I am unable to initialize a SolidStart project using npm init solid@latest. I have tried multiple templates including basic, with-authjs, and with-tailwindcss, but all have failed with dependency errors when running npm install for the first time. Since the length of the error exceeds the character limit (2000), I'll include the error in the comments....

How to dynamically 'render' a string interweaved with `<span />`'s

I am attepting to make a text area where I can manually mark words, or sets of words, as either a spelling or grammatical error. in order to do this I switched from a plain <textarea /> to a <div contenteditable /> so that I have full control on how to render the text inside. Now my question is, the way I mark spelling and grammer errrors in with an array of index ranges ([number, number][]). right now I do the 'rendering' with this code ```tsx...

Component in test is not updating despite signal change

I am currently writing some tests for a library I'm building with Solid. I have the following test: ```ts const AuthStateComponent = () => { const { user, signIn, signOut } = useSSO();...

SingleFlight does not work (See Example)

I'm trying to make a single flight request work, but I'm always getting two requests: What am I missing here? ```tsx...

shadcn-solid plain install ? (maybe a tailwind issue?)

Hey there, is anyone using https://shadcn-solid.com/ ? I created a clean project, followed their installation by the book ( https://shadcn-solid.com/docs/installation/solid-start ) and still getting ...

Context provider breaks while using esbuild-plugin-solid

I don't know if the problem is actually related to building component with esbuild with esbuild-plugin-solid, but whenever I call useContext from a child component, context is undefined. Am I missing something? Wrapper: `export default function CollectionWrapper() { return (...

Questions on the `preload` functionality

I am reading the docs on the preload functionality and the related query function. The doc says there are some caveats to be aware of when using preload, specifically
1. The preload function is called once per route, which is the first time the user comes to that route. Following that, the fine-grained resources that remain alive synchronize with state/url changes to refetch data when needed. If the data needs a refresh, the refetch function returned in the createResource can be used. 2. Before the route is rendered, the preload function is called. It does not share the same context as the route. The context tree that is exposed to the preload function is anything above the Page component....

Generate static UI elements from server data only ONCE

I want to generate my navbar components based on my server folder structure Specifically, I have folder countries which contains file us.json and ca.json. For each file in folder countries, I want to generate an <A> element onto the Layout component. I struggle to know how to "send" this data from server to client and construct the UI, but only ONCE at startup - since the countries folder is static Stackblitz: https://stackblitz.com/~/github.com/bhuynhdev/solid-start-test...

Do a one-time server operation upon page load, and then re-use that data

I am looking for a way to do a one-time database query for a very rarely changed dataset -> And then store that data into server memory for subsequent re-use More details: 1. I have a dynamic route /map/[country].tsx 2. Upon loading this page the first time, I want to query database for list of country and store that data into server memory. So that subsequent navigation to the map/[country].tsx can just index the maps object instead of querying the db again...

Component routing vs config-based routing

In Solid Router, what's the difference between component routing and config-based routing? Is the a particular reason someone wants to use one over the other?

Client-only API called on the server side.

There's this one nice library which can bundle MDX as a JSX Component. Thanks to _jsx_runtime it's easy-ish to adapt it from react-only to other JSX supporting libraries. (https://github.com/kentcdodds/mdx-bundler) I've managed to nail it down for some of the libraries, unfortunately I'm stuck with Solid's one, and I'm not that familiar with Solid (https://github.com/kentcdodds/mdx-bundler/pull/236) I've...
Next