SolidJS

S

SolidJS

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

Join

What should I use if I want features of both Resources and Stores?

I'm using createResource in a RouteDataFunc, which fetches a JSON tree asynchrconously. I love using a Resource here because I get access to its state (to show loading etc). However, I want to be able to mutate said data using the amazing API that Store has, such as function addChild(thingId) { myData.update('things', (t) => t.id === thingId, 'child', { foo: 'bar' }); }. Sadly, that mutation API is only available on Store, not Resource -- and state is only available on `Resourc...

noUiSlider rerenders when moving slider

Hello, I have an issue with noUiSlider(https://refreshless.com/nouislider/) i want to make a slider with 2 knobs. Everytime i move a knob on the slider, i get the following error message in the console. Uncaught Error: noUiSlider: Slider was already initialized. ...

Array of components gets re-render every time that a new component is added

Hi, I'm struggling to allow users to add new inputs "on-the-fly" without forcing all elements to re-render (and therefore, losing their internal state). Not sure what I'm doing wrong, see the relevant part of my code below: ```js export default function RecipeForm() { const referenceForm = () => ( <div class="mb-2">...

<Show when={}> typescript error question.

I'm encountering a type error while working with the following code: const [loggedIn, setLoggedIn] = createSignal(false); In the return section of my component, I'm using the following code:...
No description

Kobalte popover not opening in testing

I'm using a Kobalte popover component. It works just fine in the browser, but for some reason it isn't opening in testing: ```typescript test("Clicking the button opens the popover", async () => { const openButton = screen.getByRole("button", { name: "open popover" }) await userEvent.click(openButton)...

Setting cookies (or headers in general) from `createServerData$`

Is it possible to set cookies (or any other headers) from the fetcher passed to createServerData$? I have the following code: ```tsx...

file routes callbacks on parameter change or top level useParams

Wondering if there's a good way to get and use route parameters either outside of the render process or on a level where it is called every route change, regardless of matches route. I don't think that's explained so well but cant really find the words for that right now. But the situation is basically that I would like to run some effect or even regular function whenever a parameter may change. But there are multiple routes and route files that may be matches (e.g. just /a, /a/b ..etc ). And I would like to avoid putting the same useParams call on each route component. A callback on the router or similar would maybe be close to what I'm looking for, just any information would be great, thanks....

efficient way of parsing markdown files with solidjs and solid-start

I'm recently starting to learn to write a blog from scratch with solidjs and solid-start. After watching many videos, I'm still a bit confused about several concepts here about SSR and file parsing etc: 1. I have a folder that contains many markdown files, with front-matter (title, date, tag, etc.). 2. Like most blog website, I'm planning to have a front page (P1) showing the most 10 recent posts, each is a link that link to a separate page (Pn) with that post. ...

SSR in Turbo Repo

Hi you all, I've recently converted 2 solid start projects of mine in a single turborepo Since doint that, I'm not able to use SSR anymore. No matter on what page I navigate, I'm prompted with this error:...

Better Way to Write This?

Hey y'all! I have some code that works, but I can't help but feel there must be a better way to write it. I have this form, and I created a Field component. Field's will only be input elements or textarea elements. ...

Integrating IndexedDB with Solid.js for Real-time Updates

Hello, I'm working on integrating IndexedDB with a Solid.js application. My objective is to display data from IndexedDB and ensure that any changes in the database are reflected in real-time within the app without manual refreshes. Here's a brief overview of my current approach: I've set up IndexedDB to store and retrieve data....

How to make footer that shows at least at the 100vh down?

I tried making footer component at root. Tsx that is below Routes component and giving body class of flex and 100vh But it always shows up below navbar on csr, before content loads up....

ReactiveMap global signal

Reactive map that i use does not triger updated when i do operations like forEach is there way to make it still work like signal ?

D3 Force Graph in SolidJS with TypeScript

I've originally asked this on StackOverflow.
D3 seems so complicated to make work with basically any framework... Specially when it comes to TypeScript, since they apparently keep changing their APIs, rendering so many past examples from gists and other posts close to useless. At the moment, I would like to make work with TypeScript and SolidJS the canonical force graph example....

an error that occurs every time something changes, but disappears with refresh

o/ i've run into some really odd behavior today. whenever i change anything in my code, the hot reload thing does its job but the program runs into this error ```Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. Error: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. at cleanChildren (http://localhost:3000/node_modules/.vite/deps/chunk-K2MOVHHE.js?v=ef9131dd:664:12) at insertExpression (http://localhost:3000/node_modules/.vite/deps/chunk-K2MOVHHE.js?v=ef9131dd:559:15)...

What is wrong with this reactive select list?

https://playground.solidjs.com/anonymous/886c5e97-4d2e-427f-abf0-95df02ab0c71 The first select list in the playground works. But the second doesn't. If you click on an element and then another, there will be 2 selected elements. Any idea as to why is this happening for the second example but not the first?...

How do i write routes which update automatically based on if authenticated or not

Lets say that I have the below code and when i hit root path(/) i want to navigate to /login if I am not authenticated and /orders if I am authenticated. I tried using <Show> and it was not helping me out. I checked if the <Router> navigate("/orders") is changing the url to /orders but the page doesn't load the respective component I am a noob in Solidjs. Have been learning it from yesterday only. So any pointers or additional info would help me ...

template not exported from solidjs/web

I'm trying to use the solid-spinner library https://github.com/lenniezelk/solid-spinner but am getting an error that solidjs/web doesn't export 'template'. Does anyone know what's going on here?

Solid Start + Tailwind?

Hello, I tried to use Solid Start with Tailwind, but my build ignores cssnano and the classes in the output are not minified/compressed. Is this a known issue? Thanks a lot....

What's the best way to debug `Buffer is not defined`

Hey folks, I am currently trying to re-restructure my code a bit, so it becomes more maintainable. One thing I noticed, is that I sometimes receive a Buffer is not defined runtime error inside the browser when moving things. This happened for example, when I accidentally put a module inside one of my routes sub-directories which wasn't a module and just contained some stuff to be consumed. However I also seem to get the issue, when I export server-specific functions in various places. Generally there seem to be various sources leading to this error....