SolidJS

S

SolidJS

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

Join

Handle data fetching the correct way.

I am building a tab based UI. On inital load, I would load a list of pinned tabs and one tab detail (via api1) On tab switch, I would reload the detail content of one tab (via api2) The problem here is that the detail content of tab on the UI is come from 2 source listed above. ...

Docs for universal renderer

I can't seem to find the docs for the universal renderer...are there actually somewhere?

Passing props from parent to children (React.cloneElement replacement)

Hi team, I’d be grateful for your help. I have a wrapper component that should play a sound on mouseenter for various JSX elements. To achieve this, I pass an enhanced onMouseEnter handler to each child. I need to use a wrapper rather than adding local logic to each component, since I’ll apply this functionality throughout the app to different types of JSX elements and components. ...

Not understanding signals

I have this component: ``` const [opened, setOpened] = createSignal(false); ...

Hello,

I am using a store + createeffect to run a function when i set a specific value in the store. Is there a way to always trigger the effect even if the value didnt change ? I know its possible with a signal and {equals:false}, but for a value in a store ?...

React vs Solid wrt contexts

Lets say I have a component. ``` const Foo = (..... <component Provider>...

Determine component type

With react it's possible to tag a component with a type: ``` <Card withBorder> <Card.Section inheritPadding py="md" withBorder>...

Default behaviour to have undefined in children?

``` const b = children(() => props.children).toArray(); console.log(b); const c = children(() => props.children).toArray().filter((item) => !!item);...
No description

Review Show wrapper for multiple signals in TypeScript

Hello! I need your help reviewing a solution I created. I initially encountered a problem when using Solid + TypeScript to conditionally render multiple signals. I want to pass several signals to a Show component that may contain undefined values and, within the children function, access all the passed signals separately. https://playground.solidjs.com/anonymous/cd0b9dce-db4a-400f-88b9-8a23ea88e05e...

Recursive routes with Solid Router

I'm trying to build something akin to a file explorer using solid router, where each sub path is like a directory and the final slug is the file. However, trying to model this naively with a recursive router component runs into a call stack max depth. Makes sense, I guess. I attempted lazy loading, but only the rendered component is lazy loaded - not the route itself....

onMount

So in my app there are routes that follow the patter /project/:projid , and I run an onmount function every time I get to it, but there is an issue. Whenever I go from one project to another via /project/:projid -> /project/:projid2 it doesn't run the onmount again. Is there any way to trigger this?

Using `createScriptLoader` raises `computations created outside a `createRoot`` alert

When I use the createScriptLoader inside a component as described on https://www.npmjs.com/package/@solid-primitives/script-loader/v/1.0.0 I get the
computations created outside a `createRoot` or `render` will never be disposed
computations created outside a `createRoot` or `render` will never be disposed
...

How do you trigger population of db on startup of app in SolidStart?

How do you trigger population of db on startup of app in SolidStart?

Reconcile not recognising equality in Date() objects

It seems like reconcile() doesn't recognise equality in Date() objects. It recognises strings, numbers, booleans, arrays, objects as equal. It doesn't recognise Date() objects as such. Is it possible to somehow overwrite the equality operation for Date() in reconcile? I mean, it should be comparing by timestamp seconds and recognise when they are equal....

Learning solid and need some understanding

Hey all. I have created a sandbox here: https://playground.solidjs.com/anonymous/797a7004-7703-4e4c-a72d-cef2e4baae26 The react for reference: https://playcode.io/2374626 The result of the toggle, is that a div should expand and then contract. But instead showing and then hiding. 😩 ...

Async Context and Store using route param

I'm sure the answer to this will be deceptively simple but I can't figure it out. In my SolidStart project, a user navigates to a "project" by route, e.g. /project/foo. The file is /project[key].tsx and using const params = useParams() can retrieve params.key perfectly. ...

How to do partial reconcile?

I'd like to use reconcile on a partial / subset of my data. How do you do this? My best idea so far is to write this for loop:...

Understanding Component Render Timings with Contexts and <Show />

Seems like I have a gap in my understanding of something with regards to render timing of components when using things like <Show> with contexts. I have the following: ```ts const Foo = () => { // ...stuff...

Layout Files & Async Loading

Do layout files load differently than regular route files OR in a different order? I keep getting an uncaught exception when deep linking to a route that uses a Layout. I'm not getting the same exception when deep linking to a route that does not use a Layout file. For context, I'm using Capacitor JS to build mobile apps with SolidStart....

Uncaught Client Exception

Hi! I recently deployed my blog website on cloudflare, and I hit a uncaught exception (Error | Uncaught Client Exception) when going to a post that doesn't exists. https://a2va.dev/blog/example It doesn't happens in local where it return the 404 page. Code:...