SolidJS

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

SolidJS

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

12/9/2023

Suspending or creating a resource from a Signal

I'm new to solid and trying to integrate it with Dexie. I looked at solid-dexie (https://github.com/faassen/solid-dexie) but I have a couple issues with it so I'm exploring taking it in my own direction. One problem, however, has me stumped. Dexie exports an observable that is easy to link into with from. My issue is that there is a (very short) period between when the signal is defined and when it actually has a value. After that, it's guaranteed to have a value, and the signal fires repeatedly thereafter whenever the db content updates. This means that I have to litter my code with <Show> tags to check if each Dexie query I make actually has content. If only there was a way I could wait for all my signals to have content before I render anything....

Mr Void

12/9/2023

Unable to edit data in store ( Solved )

I have a store function that is meant to update some of the properties of an existing collection within an array of collections. I am trying to update the properties using the Object.assign method: ```ts let collection = { title: "original title", color: "yellow" } // assume > original object...

Grahf

12/8/2023

Felte Form server error handling

Hello. I'm having trouble displaying errors from the server with a Felte form. According to the docs "You can add an onError function to the createForm configuration that will be called if the onSubmit function throws an error." I've added the onError function but I'm not getting the errors from the onSubmit function. My form looks like this: ```js const { form, errors } = createForm({...

TaQuanMinhLong

12/8/2023

solid router's Data API

I'm a little bit confused about createAsync with the load function In the example of the GitHub repo, there's a cache fn to fetch data ```ts const getUser = cache((id) => {...

Zack Pitcher

12/8/2023

routeData params are empty but not useParams

I am using the basic <FileRoutes /> setup and I have a file located at routes/stuff/[slug].tsx. When I read params.slug from useParams, I can read it properly, but when I try to do useRouteData with an exported routeData function in the same file, the params field of args: RouteDataArgs is empty :/ Here's a minimum repro:...

Ninguern

12/7/2023

Error while installing dependencies on template

I've just ran npm create vite@latest my-app -- --template solid-ts to start a new template and got this error after trying to run npm install: Node version: v20.10.0 npm version: 10.2.3 ...

ephons

12/7/2023

Usage of createResource and correct access to the result

I'm not really sure why latest can be undefined here. Am I missing something or is it TS being TS?

apademide

12/6/2023

useContext() from custom element

I'm trying to access a context from a web component. It's a single global context holding a singleton class as the value which provides access to the logged in user. It works as expected, but I can't find a way to make it accessible from web components. I use web components to pass template strings as html from a JSON API; the aim here with wk-user is to be able to achieve syntax such as Hello, <wk-user property="name"></wk-user>! rather than creating a whole templating system. ...

aryzing

12/6/2023

How to clear a store?

From the docs, seems that setting a store's value explicitly to undefined will delete it from the store,

setStore({foo: undefined}) // foo is removed from store

setStore({foo: undefined}) // foo is removed from store

...

adrien

12/6/2023

Lazy-initialized createMemo's updating once, but not again

I'm trying to debug this createMemo issue I'm running into. What I'm really trying to get at is a nested memoized object, but given that something like that doesn't appear to exist in the API as is, this is how I'm doing it. I threw together some sample code (I'll leave it as the next comment) to show a minimal example of the issue I'm running into. When you click either of the counter buttons, the count increments, and the fibonacci memoized value for that counter updates. But then any subsequent increment, the fibonacci value does not update. So it appears that the memoized computation performs properly for the initial state, and for the 2nd state (which implies that the dependencies are being inferred properly). But then it just stops working after that. In the real-world thing I'm working on that inspired this sample, there could be thousands of items (counters in this example), and only one might be looked at at a time. So I'd like for the memoized computation to be lazily initialized when needed (so that 1000 computations aren't kicked off when they're not needed), and for the memoized computation to be remembered if the view changes to another "counter", and then back to a previous one, and so that the memoized result can be shared between different views that have access to the memoized computation....

Billy Hawkes

12/5/2023

HMR not working

Am I missing something about HMR? For the life of me I can't get it working. I've tried in • Stackblitz: https://vite.new/solid-ts • On my system with base solid ts and also vue...

bigmistqke

12/4/2023

setting signal inside createRenderEffect

say I have the following code ```tsx function Counter() { const [count, setCount] = createSignal(1);...

JCM

12/4/2023

`reconcile` object to array mutation

I have a data structure coming as JSON from the server that is put in a store. When a new state from server comes, reconcile is used to update the store in order to keep fine grained updates. So far so good, however reconcile doesn't do the expected thing when I have an object in the old state, which needs to be an array in the new state. Here is minimal reproducible example:...

Kvngrashy_fx

12/3/2023

does not provide an export named 'createRef'

I tried to import useRef

lucy

12/1/2023

"comp is not a function" or "class constructors must be invoked with 'new'"

Tried to embed: https://www.npmjs.com/package/react-image-crop using it via: ```js...

navi.ToTskie

12/1/2023

Data on fetch must be updated everytime like realtime data

Im thinking now that if i setinterval the fetch everytime i might cause performance issue. How to have the right way to get realtime data on fetch get method.

ElitoGame

12/1/2023

Get DOM id attribute from current element

Hey there! How do I get the id attribute of the current element in an inline function, similar to how it's possible in basic HTML? This code snippet works in basic HTML: ```html...

Sphere

12/1/2023

Router nested in Context breaks in Astro

Hey guys I finally made a reproduction regarding <Router> not working inside <Context> in an astro project https://stackblitz.com/edit/withastro-astro-rfcdyu?file=src%2Fcomponents%2FRouted.jsx / https://github.com/aspheresedge/astro-solid-router If someone could point me in the right direction / or tell me who to bring this up with, would appreciate it ...

Liquido

12/1/2023

How to make SolidJS tags not return HTML elements for a custom renderer?

I have created a custom SolidJS renderer that returns JSON but the JSX tags that are being called always return HTML elements. ```ts export const renderer = createRenderer<ElementComponent>({...

SeanAye

12/1/2023

show is rendering children when still falsy

I have a simple parent component in a CSR setup ``` const [data] = createResource(params, async ({ id }) => { const out: AlreadyExistingForm = await invoke("get_config", { id: Number(id),...

Previous Next

Gaming

Programming

SolidJS

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

SolidJS

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