SolidJS

S

SolidJS

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

Join

useContext. why doest get the value

dashboard is part of props.chilren. can i pass it on props.children ?
No description

A vs Link

hello guys I have some question about solid-router, for example, there are two ways of navigating in solid Router the Link component and the A component, what is the differences between those, and also when we use solid-router, we are using SSR by default? for example in the docs I see you have to use renderToString to serve SSR components, by default solid is not SEO friendly as I see maybe I am wrong

How do I implement authentication?

Hey there! I want to implement a very authentication, how would I go about implementing it? The user visits /register to create a new account. After they have created a new account, they must authentication by successfully logging in usingthe /login, at this point, they should be able to see the content of the /proc route

Custom signal for observable props parameter - Reactivity issue

have library which contains objects with observable properties. To make this work with solid I want to create a custom signal which triggers the reactive functionality. Basically something like this: https://playground.solidjs.com/anonymous/749a49e0-da6f-465b-995a-947e7d6bbdf9 ...

Set headers inside createServerAction$()

Hey folks, I am currently trying to explicitely set my content type header to Content-Type: application/json; charset=utf-8 because of some encoding issues. However I don't quite understand how I can do so inside a call of createServerAction$(). ...

`unstable_clientOnly` doesn't solve SSR issues when importing a dependency

I'm running SolidStart and have had some issues throughout with certain deps that do not play well on the server side. Usually this has been resolved using unstable_clientOnly to ignore the dependency on the server side. This time it's not working though. This works fine in my component using npm run dev, but not using npm run build. ...

How to handle hydration on client side?

I'm using localstorage to save my local items. Component renders on server if I press F5 and throws an hydration error and it's logically, because server component doesn't have an elements from client sides and it's handled by isServer. But main question: how do I handle this hydration error? How can I manage to synchronize states between server & client?...

Change Component Name

Actually I'm developing for a design system a component Title and I want to be able to have a props named tag to change the tag of the component (h1/h2/h3). When I try to do this I have "Comp is not a function" This is the code : ...

Cache dom elements with router

I'm trying to cache dom elements between route changes with @solidjs/router where instead of recreating dom elements between route changes, instead i use pre-created ones i tried using ```tsx const home = <Home />;...

Use of `<Outlet />` vs `props.children` leads to duplicated code?

```typescript const EnsureAuthenticated: VoidComponent = () => { return ( <Switch> <Match when={/* ... */}>...

Added the official solid-router, followed the docs, now nothing loads

I'm very new to Solid but I had a working SPA (I'm using vite and plain JS) until I added the official solid-router, followed all the steps in the docs, and now none of my components load. Feeling pretty frustrated and hoping someone can help! index.jsx ```import { render } from 'solid-js/web'; import { Router } from "@solidjs/router";...

Where does <ErrorBoundary/> catch errors?

The docs example shows an error being caught at component creation which makes sense, but what about * createEffect() calls * onMount()/createRenderEffect() * JSX expressions * event handlers...

Warning when modal uses state

I have created a context provider ModalProvider that is meant to display a modal whenever it's visible state is true. This container is displayed on top of any other element that exists within the App. It worked well, until I created a state within the modal itself - at which point it began throwing the following warning: `` computations created outside a createRoot or render` will never be disposed...

Is there a way to render a solid component to html string from the browser?

I want to send raw html string to another service where it gets printed as a pdf. The renderToString functions dont work on the browser and I get 'computation outside of render' errors when I run the component function and try to convert it to string. Do I need to port the project to SolidStart in order to achieve this or is there a way to do it inside the browser?

CRUD App - Suggestion for Utility Functionality

Hey there! I'm developing an app which contains mostly CRUD functionality using typescript + solid. But contrary to all examples I've found on the web, there are a lot of details which have to be handled e.g. client-side validation before saving the data; handling of server-side validation responses; failure handling in general, ... So while my setup works, it feels like there is boilerplate which is repeated for every type. So what I thought might make sense is to create a helper like createCrudResource which already has a save, load, a signal for the current value, ... Does something like this make sense? Is there some article and/or open source project which shows a solution for this problem?...

cant set signal exported from a context

I've recreated a simple example based on my code: https://stackblitz.com/edit/solidjs-templates-dhbcft?file=src%2Fcomponents%2Fcontext.tsx,src%2Fcomponents%2FCardWrapper.tsx In context.tsx I have a signal inTransit which tells if some HTTP request is in progress. It works fine in the submit function which is in the context, but when I use setInTransit in a createEffect in another component (CardWrapper.tsx), it does not works as expected. What I expect is to keep seeing "Processing..." till the createEffect in CardWrapper.tsx is also done executing after clicking the submit button....

Error: Hydration Mismatch

Hello, I have an error with one of my plugin. I have always an issue with Hydration MisMatch. Can some one help me please ? https://github.com/qlaffont/rosetty-solid/blob/master/src/index.tsx...

Prevent a route component from running before the old routes `onCleanup` runs

When I move from one page to another with the router, the flow seems to be: on PageA -> trigger move to PageB -> PageB component function runs -> PageA cleanup runs The issue I am running into in the PageA and PageB use a common store and on the cleanup of PageA, the store is reset however because it run after PageB's component function runs, it is reseting stuff the PageB it setting up....

Error: Hydration Mismatch with component from node_modules

Hello, I have an issue with Solid-Start Hydration process. Everything is described on the github issue and i have put a reproduction : ...

Bundled package breaks when used in PROD

I am working on a package which provides hooks and components to be used in a Solid app. The package is build with Rollup (config in next comment). It’s well tested and all test are successful. I linked that package in a Solid-Start app to test the behaviour. Everything works fine as long as the app runs in DEV mode and all the hooks and components work as expected, but once I build then app and run it in PROD my package breaks: ...