SolidJS

S

SolidJS

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

Join

Discord Invite via DM

Hello everybody, I got here some spammy DM. /cc @REEEEE...
No description

Why Would I Use An Action For Anything Other Than Form Submissions?

I’m struggling to understand why I would use an action for anything other than handling a form submission. Actions give you access to FormData, which simplifies working with forms. So, I can see a clear use case with forms. But why else would I use an action? Let me try to add some context to my confusion....

I got spam from this server.

This is a dm that I received in my chat please make sure this isn't repeated. Thanks....
No description

`vite-plugin-solid` makes Vitest take over twice as long to run

I have over a hundred test files, and they take around 8 seconds to run. Adding the vite-plugin-solid Vite plugin to the Vitest config makes it take around 18 seconds to run, despite the majority of the tests being .test.ts files and having no components (there are only two very small .test.tsx files). It slows down the execution of all other tests, even though the only usage of Solid is a return createMutable(this) at the end of the constructor of every class. The exclude option does not seem to help. My Vitest config: ```ts import { defineConfig } from 'vitest/config';...

Passing JSX around: Computations created outside a `createRoot` or `render` will never be disposed

Alright folks, buckle in because this is a long one. I've done some research through this channel already, searching for computations created outside a first, and the closest thread to my problem is <#1176430732827172874> this one. This user is doing something similar to what I'm doing- I'm storing JSX elements in an array in a store in a context, and I'm just posting to that array every time a button is clicked, creating a new element each time the button is clicked. I then have a <For> component which will go through and render each of those components. This works fine! However I am running up against an odd bug that I truly do not know how to solve. Trying to then access the context fails within these generated components, telling me that the context is undefined. Additionally, trying to create refs to elements within these elements fail. I have a couple of guesses as to why this is the case: ...

How to rerender children whenever a signal changes?

Hey there! I'm really new to Solid, so I built a tic-tac-toe game to understand more about it. I got it working having everything written in a single component. After that I wanted to extract part of the code to a new component called Board. However, after doing this, I realized that everything inside the Board component wasn't being rerendered when the squares signal changes. How can we make it rerender on changes to the signal? Is there a something similar to "createEffect" for components? Here is the source code: https://github.com/ubmit/tic-tac-toe-solid/blob/main/src/App.tsx Thanks!...

Solidjs route not working...

I am getting an error which you can see in the image and I can't see the content which I put in there. I am using Solidjs 1.8.11 with @solidjs/router 0.13.2 and JS My code - Index.jsx - ...
No description

Getting the full domain/url server side

I have a multi tenant SaaS where clients CNAME their own domains to my app. I need to get the domain / url they're using in order to get the correct data from the DB server side. How can I do this?

Does Solid Router's APIs provide any way to abort a pending submission?

My issue is that I want to do optimistic updates, but if the user decides to change things way too fast, there will probably be some flickering, or the last value they had will not be the one on the database. I could also debounce the call to the action to avoid it being called multiple times, but even there this wouldn't be optimal. I know that I can certainly have a form and use the action there instead of calling and then abort the requests that are pending before the form submits by using the window.stop, but then the problem is that, because I have multiple small actions the user can do, a abortion meant for a certain action would end up aborting the other form action. I'm not sure if Solid internally handles the actions using a fetch (I am using start so it might be more related to vinxi), but if it does, the best for me would to be able to pass in an AbortController to it. I also tried using the submission.clear function but that only clears the underlying data about the submission, it doesn't actually abort the request....

No Context when using hyper dom expressions

I've this strange behaviour that useCounter(CounterContext) returns undefined when porting the context example to use hyper dom expressions. Check codepen here: https://codepen.io/wrnrlr/pen/eYojdqV?editors=1011 Any ideas what I am doing wrong?...

How to do CSR in SolidJs?

1) How to do client-side-routing in solid with "typescipt"? 2) Is there any benefit using vite + solidjs + TS...

App is misconfigured. Please correct sub_filter.

Config file: root $dir_path; if ($deploy_path = "http://localhost:3000") {...

facing reactivity issues

Trying to use solid.js with Strap cms, while it works, I need to first refresh my browser before it reflects the data. Any suggestions? Here’s the code: https://docs.google.com/document/d/1EY9H80y_7nbnGSS-bZN-wX6fYtf9JS74YTGXxfWqyTs/edit?usp=sharing...

The props are reactive, right?

I've created a small wrapper around solid-table: ```ts export function DataTable<TData extends { id: string }>(props: { data: TableOptions<TData>["data"]; columns: TableOptions<TData>["columns"];...

Is it possible for all requests and actions to share a server side (singleton) module in memory?

In the process of updating my Chat with SSE using SolidStart example from 0.2.26 to 1.0.0-rc.0 I've hit a snag. All the responses (subscriptions) from the SSE endpoint (api/messages) share one copy of the server's pub-sub module, while all the send-message actions go to a separate copy of that module (which of course doesn't have any subscriptions registered). I've tried routing the imports through src/entry-server.ts in case that might coerce the use of one common instantiation (it didn't), and doubled down by using unjs/hookable (perhaps improperly) there, again without success....

Delete key in store

How do I delete a key in a store? My store is typed so I can't simply set the value to undefined. Will I have to use the mutate helper, whatever it's called? I'm used to changing keys in a store by just doing setMyStore("my_key", value);...

Solid Start Route for simple redirect

I've got a Start route thats sole purpose is to generate a 301 redirect to a dynamic image url I make in createServerData. It's working fine and it does redirect to the image, however if I curl -v I can see that I also get the <!DOCTYPE html><html lang="en" ><head ><title etc...; and my entire apps CSS also delivered, which is a 156kB! This is basically it:...
No description

Am I obliged to combine Suspense with Show?

I get the following error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map') I understand the cause, but I'm surprised. I was expecting that the Suspense would delay the children until the data is available. Adding a Show solves the issue, but I'm wondering if I can handle this differently. ...

computations created outside ... in a Context

I am creating a context, largely following the pattern indicated here: https://docs.solidjs.com/reference/component-apis/create-context However in said context I want to store a set of values that get initialized through createResource. Because of that I get the computations created outside... warning. This is because basically all the resources are being created at the module level (don't see how else to apply the createContext pattern) and hence as soon as I import the module, which is being done outside of createRoot or render I get the warning. Is there a way to either import the module inside of the createRoot / render or a different way I could wrapper my context so I don't get this issue? Here is a snippet of the context module:...

Need help on how to make "Kind of multipage" in SolidJs

So, basically I am new to all these frameworks stuff and solidjs is my first framework. I want to ask how can I apply a kind of multipage in Solidjs, lemme explain - I want to make a project website for a lorem ipsum company and some about us and recruitment page. I dont know how to do so that when some button or link is clicked the page will shift to other page or something like that....