SolidJS

S

SolidJS

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

Join

How can I tell solid router to navigate to a page by forcing a refresh, breaking the SPA

I need to send specific CORS headers on a specific page which I can only do with netlify by specifying a link and the set headers. But when they navigate to home page and then click the link, the headers is not set because home page link doesn't set the headers by netlify not configured as such. And I can't include the headers to be set on the home page as well. Because then contact page embedded video doesn't work because headers are too strict. So the easiest workaround is the force a refresh on a specific link to force the netlify configuration to work for that link specifically. Basically I need something like this:...

Server function not being called (?)

I'm sorry for asking help for something that should be so simple but I'm very confused. I currently have a simple async server debug function: ```tsx export const Login = async (authType: AuthType) => { "use server";...
No description

reactivity works in vite dev but fails in vite build

Hi guys I am in in quite the rabbit hole and love a sanity check, I've tried multiple refactors, but the issue is my solids reactivity is not working... In both environments...

Using createAsync in SolidJS: Handling Data Dependencies

Currently, I'm thinking of two approaches: Unified Loader Pattern: ```ts const loader = query(async (id: string) => {...

Can I Block All Back Navigation?

With A or useNavigation(), I can set replace: true to remove the most recently visited page from the browser history. But this doesn't block back navigation. If I click back, I skip the most recent page and go to the page that was visited before the page I just came from. Is there any way that I can block all back navigation on a specific page?...

SolidStart(?) useContext problem

Trying to use useContext in solidstart, but it seems that it server renders my provider and doesn't change in client, not sure what i'm doing wrong. ThemeProvider is in the root of app.tsx, trying to use ThemeSelector in routes/index.tsx ```tsx export const ThemeProvider: ParentComponent = ({ children }) => {...

useContext is undefined

Wrapped in a function with a throw, and it throws an error no matter what I've verified it's wrapped in a provider, and the context set-up is identical to the other providers ```jsx const SaveButton: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => { const ctx = useSettingsContext();...

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

eslint (solid/reactivity) warning on nested store

I'm trying to follow the "Advanced" example from https://docs.solidjs.com/concepts/stores and create a nested store: ``` const [systemStore, setSystemStore] = createStore<SystemData>(systemData);...

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