SolidJS

S

SolidJS

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

Join

How to use <Show> in ssr?

Hi everyone. I have this simple code: ```jsx export default function Home() { const [error, setShowError] = createSignal(false);...

Nested layouts

Is there a way to opt out of nested layouts for a certain child route in solid-start?

Show doesn't hide component when signal changes

Hi everyone. I'm having trouble wrapping my head around why a <Show> isn't working the way I think it should work. I have an onClick handler that toggles the signal. A few different onClick handlers are rendered and clicking each one toggles signal appropriately. Then the Show shows the child component with the right props. But when one click handler is clicked the other child components should go away since the conditions in the when block is no longer valid. But I'm just getting more child components each time I click a different event handler when only one child component should be shown. No comprende Tried a few different tactics and this is what I'm working with now. const [selected, setSelected] = createSignal(null)...

How to use <Hydration> and <NoHydration>?

Hi there, I was reading the release notes of SolidJS 1.6.0 and it mentions new Components to handle Hydration: <Hydration> and <NoHydration> . https://github.com/solidjs/solid/releases/tag/v1.6.0 I couldn't find any further docs on them. Do they exists yet or does someone have any additional info/reference/example about how to use them?...

document is not defined in HMR

I have some logic that is running in onMount and onCleanup that adds/removes a data-attribute from an element. It works. However when I make a change somewhere in my project, I get document is not defined error from HMR. It seems to be triggered by cleanNode so I am pretty sure it's from the onCleanup. The code itself looks like this shouldn't happen though because I use optional chaining. Any ideas? ```tsx...

"WARN  Issues with peer dependencies found" on fresh project

```  WARN  Issues with peer dependencies found . └─┬ solid-start-node 0.2.24 └─┬ @rollup/plugin-node-resolve 13.3.0...

Is it possible for a route to have async data loader?

I want to know if it's possible for a route to have lazy import of a data function, just like in SolidStart, when you're exporting routeData . As you can see on this screenshot, component is being lazily loaded, but the data function is not. I'm thinking about something like this - ```typescript const UserData = () => import("./pages/users/[id].data.js"...

Using solid-element, how do you get the children of a web component?

I'm trying to get the children of a custom component created with solid-element. In plain SolidJS I would simply use props.children, but this is undefined on the solid-element component. Is there a particular way to get this done using solid element?

Can't use `useRouteData`

Hi guys, I'm using basic routing without FileRouter and whenever I'm trying to use useRouteData inside of my component, I'm getting Make sure your app is wrapped in a <Router /> , without using it, everything works just fine. Do you have an idea what can be the issue? I've got a lazy component inside <Route component={

function prop destructure

Just wondering if there are any implications of passing only accessors or functions as props and then destructuring them vs passing values directly and accessing from props object. I know the reactivity linting is limited in what it can detect but besides that are there some things that should be thought about. More generally are there any good resources to really understand the reactivity system in solid, I've seen some of the older discussion and issues on solid's github has interesting stuff to read but looking for a somewhat structured explanation that goes into some detail....

granularly derived store

My use-case: I have an array of coordinates as input. For each coordinate I want to keep a set of offsets. The input can change, coordinates can get removed or added to the array. I contorted something together with mapArray https://playground.solidjs.com/anonymous/981e35fd-a794-479e-a8dd-777306b24a87 but I wonder if there isn't something a bit more elegant/primitive-y to do the same....

How to make a layout for every page except index?

As the title says, i want to make a layout to affect every page but index in routes directory using solid start and im not sure how to

Animate on scroll

hi i am trying to make animations on scroll in solidjs without a component wrapper, just passing the class as identificator and add the class to animate, but the observer is not working in solidjs, how do you guys make this, please, without ref or wrapper

How can I skip the first effect run with createEffect?

I have a createEffect hook that runs when my signal does. Awesome. What I don't want, is for the effect to run when the initial signal value is set. I tried the following without success: ```ts const [getVal, setVal] = createSignal("initial"); ...

Catching Errors from async requests started in onMount

There must be a hole in my Solid knowledge. I want to run a fetch request on component mount. This is not fetching any data so I don't want to use createResource This async request is taking state and saving it to the database. However, how do I catch any errors. When the async function throws... the error is always uncaught....

Nested Routes for index and route debugging

Is there any way to view the file based routes as they are generated or similar. I'm having difficulties with creating a shared layout at the index level. The closes I've gotten is by doing what's shown in https://discord.com/channels/722131463138705510/1057754962110730381/1057782711919579326. Struggling to see what's happening behind the scenes as it seems inconsistent between refresh, udpate.. etc. The expected outlet content seems to flash initially but then disappears.

using readFile in routeData

I have a directory /src/data with markdown files. I'd like to readFile a markdown file from that directory during createRouteData, but it can't seem to find the file. Is this possible?

Component doesn't react to changes in Signal

Hi! So I'm not sure why but my component is not reacting when a Signal changes. The signal is defined globally: ```ts export const [authState, setAuthState] = createSignal<AuthState | null>(null);...

Await resolution of previous routeData in nested routeData

I have a route that fetches some data. ```tsx export function routeData({ params }) { return createRouteData(async (key) => doMyFetch(key), { key: () => params.id }) }...

How can I circumvent the wrapping Router requirement error?

I have a ui library that lives in a monorepo with my core application. I'm structuring a lot of component in the ui package so that it can be shared across projects. I have a header and footer inside that library that wants to use utilities that require solid-router ie. <A> specifically. Since UI isn't directly wrapped in a router context it errors. Curious to know if anyone has any suggestions to get around this and ship the components without that will eventually be used within a router context?...