SolidJS

S

SolidJS

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

Join

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

Route Data to Pass Signal to Children Components

Hi. I'm trying to pass a signal from a great grandparent to a its great grand children. In (home).jsx I have this: `const [selectedFont, setSelectedFont] = createSignal('inter') export function routeData() {...

Ref either locally or passed via prop

I have a TextField that requires a ref to an input field. ```tsx let input: HTMLInputElement | undefined return <div onClick={() => input?.focus()}><input ref={input} /></div>...

[solved] Tutorial: server side routing for remote API call with keys

Hello. So, my app is coming along and I'm ready to start requesting APIs at openai.com.
Can any one point me to a good tutorial that explains, and shows, how my browser code can call a server page that will actually make the API call and return the data to the browser. Currently I'm calling APIs with Supabase. I plan on hosting with Netlify. Thanks for any suggestions....

does @solidjs/testing-library render shadowDom?

I'm trying to write unit tests for a custom element that wraps some elements inside a shadow DOM. The inner HTML of these and the shadow root's inner html doesn't include them even though they're available in browser. Does anyone have a workaround?

Routes and FileRoutes

Hello! I'm new to Solid and I had some questions about Routes. I followed what was written in solidStart, but I still have some questions about FileRoutes. For example, is it possible to create a custom Layer for some pages and still using FileRoutes ? ...

Question about Contexts

In react a common pitfall with contexts is causing unnecessary re-renders to everything subscribed to any piece of the context state, including those just using the methods. (unless you carefully designed the context) Is it safe to assume(/correct to say) that solidjs' contexts are inheritly safer and easier to use since components don't rerender like react and we then only need to worry about using signals/stores adequately?...

Props/Default Defaults

The tutorial example at https://www.solidjs.com/tutorial/props_defaults does not seem to behave any differently before and after being solved. What is the difference?

Parent setting prop to child with Context?

Say I have the following component: ```jsx <ToggleButtonGroup onChange={handleToggleChange}> <ToggleButton id="key"> Foo...