SolidJS

S

SolidJS

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

Join

Special character route matching

Hi there, I've been having a great time getting to know solid-start since it's matured, and so far the experience has been pretty well. However there's one thing that's proving to quite the hurdle, and that has to do with specially crafted URLs. Currently solid-start supports various routes such as /todos/:todoId/attachment/:attachmentId, mapping to parameters properly, however this tends to break in some cases with special characters. Currently I'm trying to redirect users to a solid-start website, mostly re-using an existing endpoint in the form of something like /items/234932#stock/4827. The inclusion of the hash symbol however, seems to completely cut off anything after the part. In all honesty I'm really only interested in the last part, but whatever I can find, I can't seem to get a hold of the original request URL, before matching....

Confused about context.

No poc, as there's too much code. Here's the dir of the component: https://github.com/paulm17/mantinesolid/tree/main/packages/%40mantine/core/src/component/Checkbox Here's the component in action: ...

How to consume SolidJS in a TS 4 project?

SolidJS is compiled with TS ~5.7.2. I have a project using TS 4.5.5 and am running into issues compiling:
../../node_modules/solid-js/types/reactive/signal.d.ts(108,20): error TS1139: Type parameter declaration expected.
../../node_modules/solid-js/types/reactive/signal.d.ts(108,20): error TS1139: Type parameter declaration expected.
...

Rendering dynamic components

Hi Solid community, I could really use your help: Here’s the situation: ```js...

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