SolidJS

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

SolidJS

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

6/22/2024

Proper Usage of load() for Authentication and Redirection in Solid-Start

Scenario: When a user tries to access a route that requires authentication, they should be redirected to the login route. After logging in, the user should be redirected back to the originally requested route. To achieve this, I created a function getUserWithQueryPara. This function checks if a session token is saved. If a token exists, it fetches the user information based on the token; if not, it redirects to the login component. To ensure the user is redirected back to the originally requested route after authentication, a query parameter is added to the login route. ...

Daniel Sousa @TutoDS

6/22/2024

Different header for specific routes

Hi everyone Maybe it's noob question and sorry for that. It's possible have different layouts for specific routes? For example transparent header and a header with background in certain routes....

Numnumberry

6/22/2024

Returning Errors and not throwing

I am messing around with actions and useSubmission and I have seen Ryan and the docs mention it is best to return, not throw, Errors

Rather than throwing errors, it is recommended to return them from actions. This helps with the typing of submissions that would be used with useSubmission. This is important when handling progressive enhancement where no JavaScript is present in the client, so that errors can be used declaratively to render the updated page on the server.

Rather than throwing errors, it is recommended to return them from actions. This helps with the typing of submissions that would be used with useSubmission. This is important when handling progressive enhancement where no JavaScript is present in the client, so that errors can be used declaratively to render the updated page on the server.

I dont understand the "so that errors can be used declaratively to render the updated page on the server" part...

Liquido

6/22/2024

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";...

David C.

6/22/2024

Is this a good method to secure routes?

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

mrVinicius

6/22/2024

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

Maar

6/21/2024

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

finsook

6/20/2024

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

Erik

6/20/2024

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";...

Max

6/20/2024

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

halu

6/20/2024

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

Carlo Nyte

6/19/2024

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

Noel (Shadow)

6/19/2024

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?

lili

6/19/2024

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

ile

6/19/2024

Beginner question about signals

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

obesecoder

6/18/2024

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.

...

Siddharth

6/18/2024

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

aryzing

6/18/2024

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?

Blankeos

6/18/2024

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

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

seigo2016

6/18/2024

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

Previous Next

Gaming

Programming

SolidJS

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

SolidJS

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