SolidJS

S

SolidJS

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

Join

How to implement an ErrorHandle to wrap the handle error and loading of a resource?

I want to handle both the error and loading of a resource in the same component to wrap a page with this comonent so it renders a message error when there's one and loading when it's loading. Something like that but don't get the right sintax. ``` ...

Object.entries not updating

I made a little example of my problem, basically I'm trying to loop with For over a keyed object with object.entries without much success https://playground.solidjs.com/anonymous/935af2d2-30b0-452e-a999-c6edef0e8d52...

solid-three

Is there an alternative to solid-three it seems to be broken - it fails to work for me, even the basic example.

Why is this onClick handler not called? (Playground code)

https://playground.solidjs.com/anonymous/b2bfddd1-102a-4f7a-a6e3-5d22846695e4 In the following playground code, when putting the focus on the text field, then clicking on the text (exactly in that order), the onClick on the text is not called (no "HELLO!" print). I have no idea why the onClick callback is ignored. ...

Resources and fetching state kind

Just wondering is it okay to fetch with resource then use that to set state, for example on a store or even a reactive map from @solid-primitives/map. Or should the custom storage config option be used. I saw the example with create reactive deep signal on https://www.solidjs.com/docs/latest/api#createresource but that's just stores as I understand. wondering if storage option is useful rather than effect or something on resource and if it is any one can help to try and explain how could go about writing the value for map storage option....

Noob question: Axios vs Fetch

I did not see anything in the docs explaining fetch. Does fetch have some built in "magic" that makes it preferable to use over Axios or another request package?...

routedata not updating on A tag navigation

I am navigating with a standard solid-start imported <A>. When <A> is clicked routdata is not refetched. I tried putting a refetchRoutData in a createdRenderEffect on useLocation().pathname change but it gives me strange lifecycle errors about code needing to be wrapped in a isServer....

Animation capture like Remotion?

"Asking for a friend" Is there something like Remotion or this for Solid? https://github.com/mifi/reactive-video...

Derived value in event handler causing router error

Error: Make sure your app is wrapped in a <Router /> when calling an eventhandler. Just trying to log a derived signal/prop in my buy function. The values from product() get printed correctly in my DOM ``` const product = () => props.product const [qty, setQty] = createSignal(0)...

Efficient reactive rebuild of large derived object

A question about how best to use the reactive primitives for (re)building derived state. I don't think a simple createMemo will do the job well here. I have a store with a large number of 'blocks' (just objects), stored as a large object with id/block pairs, e.g. store.blocks[someID].name I want to build a grouped and sorted "index" of the blocks, e.g an array of 'sections' that groups the blocks by type e.g. ...

My app breaks when there is any javascript error.

I am aware of ErrorBoundary but my concern is why the whole app just crashes whenever there is any js error. I have never seen this kind of pattern in other frameworks. Ideally what should happen is just that particular component where error has occurred should stop working (functionality ) rest of the app should work I should be able to navigate between screens etc.

how to use createResource in Astro SSR

I’d like to use createResource in Astro. Right now I’m doing the data fetch in the Astro file and passing it to the Solid component as an attribute but it’s a 20kb response. I’d prefer if solid instead fetched the data and rendered the output with it and then only the final HTML was shipped down with the JavaScript to load the page. It would save a lot of time on download and parsing. How can I do this?

Reset signals when same component is navigated to

In my navbar each menu items navigates to the same location which in turn loads the same component: `<li class='text-center p-2 text-textColor'> <A href={/location/${valueOne}/${valueTwo}}> {valueTwo} </A>...

Solid.js event handler that depend on reactive value best practice (fix solid/reactivity lint rule)

Hi, I want to know what is the best practice for using event handers in solid.js that depend on reactive variables from different scopes. I want to create an abstraction over my component library, and I'm unsure what the recommended way is. I created a counter and 3 buttons that print the counter value onClick. I want to increase the count and the button to print the latest count. So button 2 does not work well. But for all the buttons I get lint error....

createStore causing warning

I am using createStore for a lot of my app, to reduce prop drilling and make inter-component communication a lot easier. I will preface, my app works exactly as intended. No bugs or issues that i can see (currently) - however i get this warning due to my createStore structure.
computations created outside a `createRoot` or `render` will never be disposed
createComputation @ dev.js:748
computations created outside a `createRoot` or `render` will never be disposed
createComputation @ dev.js:748
...

one of my dependencies is using "buffer"

Now I can make it work in the browser?

Array of refs - keeps extranuous values - need to reset/slice

Hi. I have an array of refs I store in a signal like this. Refs are used in another component to scrollIntoView them. <h2 ref={(el) => props.setRefs((p) => [...p, el]...

Partial Setter for a Store

Is there a way to get a setter function for a nested object inside a store? This is a minimal example of the problem I like to solve. The getter proxy works, but I can't figure out how to get a SetStoreFunction or something else (the props the PersonForm can be changed if needed) that modifies a field inside the store. ``` const [store, setStore] = createStore({ ...

How to extend native events

I have a CurrencyManager which handles when the user inputs a number and converts it to a currency in a input field and manages the cursor position. I'd like to add the unmasked and masked value from the manager to all of the events on the input field so end users have access to it. Maybe I'm overthinking the approach but right now I have a curried wrapper function that takes a function and returns a function that receives its native event and calls the original function with the data added to it. ```ts type CurrencyManager = () => {maskedValue: string, unmaskedValue: string} ...

Say I have a `Card` component, How can I have a `Card.Header` component?

Say I have a Card component, How can I have a Card.Header component?