SolidJS

S

SolidJS

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

Join

Signal Factories and eslint warnings

I've created a factory for creating signals from a yjs document. Everything seems work ok, but the linter is giving warnings. Is the linter correct or is it a false positive due to the factory? ```ts const metaSignal = <T = unknown,>( provider: Accessor<HocuspocusProvider>,...

How to handle Reactivity for nested objects?

I have a tree structure which i want to render and have reactive to changes. The tree is in its own file and should not be mixed into solidjs or jsx stuff. When calling updateTree(node, id) the tree will update from that node (including) and outward the branch, meaning all nodes after that node needs to be updated/rerenderd. Below is some simplified example code. Thank you ...

Replace part of string with a component

I found this for react: https://github.com/iansinnott/react-string-replace It seems to be able to replace a part of a string with the results of a component? That's what it looks like to me. I haven't used it.
Just wondering if anyone has done anything similar with solidJS. It's probably pretty niche....

Can the server$ call get access to the Request object?

I'm confused on why
createServerAction$(async (form: FormData, { request })
createServerAction$(async (form: FormData, { request })
has a request object but server$ does not. I'm trying to grab the current user when I do a server$ call, but I don't have any way to know what user it is because userServerContext() is {} and I don't see any way to get that data. I'm piling through the SolidStart source code right now but I don't see anything. ...

Store for binary tree object

How should i use store to dynamically render content from my binary tree? ``` class Node<T> { left: Node<T> | null; right: Node<T> | null;...

Solid-Slider docs

Hey @davedbase 🙂 Looking at the repository, I wonder what the details in the createSlider destructuring is used for. Doesn't seem to be reactive. Was wondering where I could get the length of initialized slides....

SolidJS + DenoDeploy

Hey guys, not sure where to put this but I'm looking for some documentation and I couldn't find a solid (no pun intended) one. I want to utilize SolidJS and Deno Deploy together.

Reactivity does not flow through nested structure and <For />

Hey peeps, I am building a nested structure and it is probably easier to look at the example here https://playground.solidjs.com/anonymous/6b5977b6-6709-413a-93b6-d9cae938b4e7...

useRouteData returning undefined

hi I'm trying to get the example from https://start.solidjs.com/core-concepts/data-loading to work but instead I always get this error I've tried wrapping it in Show or doing if (!students) return; but that causes hot module reloading to not work at all because I think it's never actually loading properly client side ```ts import { For, Accessor, createResource } from 'solid-js'; import { useRouteData, createRouteData } from 'solid-start';...
No description

Nested ErrorBoundary not used

Heya, I'm trying to wrap my head around handling errors with createResource and SolidJS router... The issue iss that I have two ErrorBoundaries and only the higher one catch the error instead of the one close to the function emitting the error. So I have the following configuration:...

Are there any performance implications with using the style prop?

As the title says I'm wondering if there are any performance implications with using the style prop. For example: Can it result in flashing as styles are rendered?

Losing reactivity in production build due to multi-project setup lib <--> app

So Im having an issue that my createEffect() is not being triggered. Everything works as expected as long as I use the vite command. But when I use vite build && vite preview it does not work anymore. The createEffect is only ever triggered once and subsequent accesses of the signal do not trigger it anymore. How can I debug such a case?

page not found when navigating to routes

hi guys, first time posting here. i'm getting this weird error when navigating to a specific route using A tag. I also can't find a solution in the actual github page from solid-start. is there a solution to this? thx!! p.s. this is only replicable on localhost dev environment, but when i attempted to do npm run build and npm start, it does not occur....

solid-transition-group leads to reactivity warning inside test cases

Hey folks, we just started using solid-transition-group and as soon as the <Transition />-component is present, all of our test cases start throwing the computations created outside a createRoot or render will never be disposed- error. If we remove the transition the error disappears. Any idea what could cause this?...

If I'm using createResource, why would I use Suspense?

For example if I have ```javascript function Loader() { const [resource] = createResource(fetchResourceFn); return <Suspense fallback={<div>Loading....</div>}>...

Can you use the reactive object from useSearchParams as a source signal for createResource?

I've used the property of the reactive object returned from useSearchParams as a source signal for createResource, however, it's currently not working. It does not trigger the fetcher function. However, the property of the searchParams object is updated and I see this reflected in the UI.

Issue with event delegation and a native library

Hey folks, I am currently trying to integrate a command palette library into our app. I tried various libraries and eventually ended up with solid-ninja-keys/ninja-keys. However there is one issue: solid-ninja-keys seems to be just a small wrapper around ninja-keys, ninjakeys itself seems to reliy on regular input events (e.g. keydown). Now when I have something with a keydown handler in my app (in my case it's a select field from solid-select) ninja-keys will no longer work (you can press cmd + k and the overlay appears, but all other shortcuts won't work). I have recreated the issue here: https://stackblitz.com/edit/solidjs-templates-dz5buc?file=src%2FApp.tsx...

Search params reactivity in route's data loader function

I've got a problem with search params in route's data function. Basically I've got something like in the screenshot and whenever search param changes, effect is not run, so input value isn't changing. Do you guys know how can I make this work? SOLUTION: spreading search doesn't lose reactivity, so I've just spread search const and everything works as intended....

Context is undefined during development reloads

So I use a few contexts like:
const useAppState = () => { return useContext(AppContext)! }
const useAppState = () => { return useContext(AppContext)! }
...