SolidJS

S

SolidJS

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

Join

With Solid Auth template, I get "UnknownAction: cannot parse action at /api/auth/session"

I am using the Solid Start with Auth template and created a server action form form submission ```tsx import { getSession } from "@solid-mediakit/auth"; import { action } from "@solidjs/router";...

Is this a good method to secure routes?

```javascript <Route path="" component={RequireAuthContextProvider}> <Route path="" component={RequireAdminContextProvider}> <Route path="" component={SystemContextProvider}> <Route path="/system">...

solidjs pnpm workspace

I'm trying to set up a pnpm workspace to share a library within my main app, but I can't get it to work. I tried to follow a few repository examples, but I have no idea why it's not working. I made an exact copy of my architecture and the problem im facing: https://github.com/mrVin99/solid-workspace/tree/main ```...

Return error when try to setting session

when i trying to set SolidStart Session with firestore databse is returning Cannot access "node:async_hooks.AsyncLocalStorage" in client code. and not show pop up google login with firebase. ```...
No description

Reactivity not referentially transparent?

I don't understand why CounterList doesn't work here: https://playground.solidjs.com/anonymous/656ba247-562b-4c2b-b32a-bf734e09fd90. Clicking the others works fine but the middle row of buttons doesn't update. At least there is an ESLint warning, but it seems like adding a let shouldn't change anything. It seems to be something with how the compile-time reactivity works. The message mentions "tracked scopes" but I have no idea how they work and there is very little mention in the documentation. Isn't Index a tracked scope? ```JS <Index each={countList()}> {(count) => { let c = count(); ...

How to opt-out of re-triggering page-level resources after server action invocation

I'm wondering if I can opt-out of the default behavior of re-triggering page-level resources created with createAsync and cache after a server action invocation. I want more control and explicitly opt-in to cache invalidation. Is this possible with SolidStart or solid-router? For example, in the code below, loadHelloWorld is being executed after each submission of runServerAction even though no cache invalidation is required as the data on the page will not change as a result of the server action. ```tsx const runServerAction = action(async (data: unknown) => { "use server";...

Implications of using multiple routers across app

Hi, I was wondering, given certain patterns, where for example you may have a webapp with lots of view/kind of like windows. And without really digging into how routers specifically works in detail. Whether it would be possible to have just multiple routers across the app, kind of spread on the app or index component. Like a way to kind of organize the views in a decoupled way. I tried it, and seems to work, but wonder if anyone has any ideas or knowledge about anything to look out for, or any opinion about it. Thanks...

SOLVED: Non-Reactive Memo for Reactive Values?

I wish to perform a memoized calculation on demand rather than optimistically. Here we see createMemo running optimistically: https://playground.solidjs.com/anonymous/63165594-60fe-4ff2-966f-620574dd5761 ...

Context providers inside <Routes> don't provide context values to routed content - Issue #273

This works: ``` <FooProvider> <Routes> <Route path=... component=... /> // the elements have access to context values...

Recommended CSS Compiler for Solid

hey y'all. It's been a minute since I've worked with SASS or LESS, and I'm wondering if there are any new compilers that have come up in recent years that do a great job of supporting nested classes. I have a project where the goal is to compile custom CSS and ensure it works well with Solid hot reload. Are SASS and LESS still relevant, and are there any gotchas when implementing them in solid?

Unable to deploy solid-start website to netlify

The docs say that I should set dist as my publish folder but building doesn't generate a dist folder. Just an .output one and when I set the publish folder to either .output,.output/public or .output/server it still doesn't work. Could anyone help me out? (I am using Bun + solidStart)...
No description

Beginner question about signals

I have this code: ```ts const signal = createSignal(''); ...

DOMException *sometimes* after changing element order

I have a solid-js website that populates an html table with data, using a <For /> to render, with a createResource() signal as the source for the list. After the data is rendered, the user can sort the table, which directly changes the order of the table rows in the DOM. When the refetch() is called on the resource, often a DOMException is thrown Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node....

Layout rendering breaking

This is my folder structure while using <FileRoutes/> in SolidStart. Now, a lot of times when I move from /documentation to / (root page), I get the URL to change, but the content of / (root) shows under the content of /documentation. ...
No description

Best way to pass complex values (e.g. objects) to a route?

Given a route that needs somewhat complex data, like an object, what's the best way to pass this data to the route? If multiple other areas of the app need to redirect the user to this one route, how would the pass data to it?

DeepTrack for a `Component[]` (Deeptrack for functions)

Hi! Is this possible? Let's say I have: ```ts const L1 = () => {};...

How to make full static generation

Hello, I'm trying to build a blog site using a JamStack like architecture. I want to deploy it to Cloudflare Pages as a completely static site, including the API responses. I wrote app.config.ts as follows and used the fetch method to get data from the API. However, when I build and run the site, API requests using the values from process.env are made during the page load. I want to save the API responses at build time, similar to the full static generation in Nuxt.js or Next.js, so that no API requests are needed after deployment....
No description

Reactivity in store

I think I may be missing the point of stores or just how to use them because I simply can't get it to trigger reactivity in a component. Below is a barebones example where I'm trying to have a value in a store and a function to update it - when the value changes I want to render it on the screen in a paragraph tag. Is there some obvious thing I'm missing here? ```ts import { createContext, ParentProps, useContext } from "solid-js"; import { createStore } from "solid-js/store";...

Redirect in production:

I have this simple action: ```jsx export const login = action(async (email: string, password: string) => { "use server";...

routing based on subdomain

Hi, I want to show a specific component when there is any subdomain *.example.com and in that component I need to get the subdomain name ...