SolidJS

S

SolidJS

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

Join

Client-only resource with SSR

Is there a way to make a client-only resource? that is, don't even bother on the server, render the fallback, then start fetching immediately on the client? I can use refetch in an effect but it briefly returns the server value before refetch starts without showing the fallback. Using a source signal does not render the fallback on the server

Context undefined

I want to wrap my auth token from local storage in a ContextProvider. To this effect I've done this: ``` const TokenContext = createContext(); ...

Websockets on Solidjs

I have some code in React for websocket conexion in components, I tried to port the code to solidjs, but no success yet. ``` // Websockets onMount(() => {...

Noob question: createRenderEffect vs createEffect or onMount

This is mainly a dev experience question. I feel like I understand the differences between these but honestly I just find myself always opting to use createRenderEffect over onMount or createEffect and unsure what scenario I would use them over createRenderEffect. Perhaps the wrong way to think about it but I usually think "createRenderEffect runs before the others and I want my code to be ran as soon possible so I will use this over the others". What is the right way to think about createRenderEffect and why would I opt to use onMount or createEffect over it. (I know createRenderEffect vs createEffect is more of the question as onMount is technically more explicitly different but curious nonetheless why)...

Derived Signals vs Memos

Noob here; I'm going through the intro tutorial and I want to make sure I fully understand derived signals and memos. It seems like there are only upsides to memos over derived signals. (I am thinking along the lines of, if memos are only superior, why use derived signals at all?) So I have some questions:...

IntersectionObserver

Hi, do you have any idea how to do this better? solidjs doesn't seem to like me coding like this. ```ts <div class={styles.App2} ref={$scroll_container} >...

Effector Solid binding reactivity

I wonder if anybody knows about https://www.solidjs.com/ecosystem?search=effector. Effector is a state management system that uses event and immutable stores to handle data. In the ecosystem it mentions the binding are good performance for Solid. I've had a look on https://www.solidjs.com/docs/latest#reconcile that reconcile is the suggested way to diff immutable data into react to maintain granular reactivity. Looking at https://github.com/effector/effector/tree/master/src/solid the code I don't think it uses reconcile but It may well doing something else. I think at some point I found a discussion or something where there was a mention that the bindings are mostly good there is just maybe something not ideal at first creation or something like that but I cant remember where that was. Anyone have any knowledge of this? Thanks...

can I use solid as just a reactive library?

I'm trying but the createEffect() callbacks aren't running

Is it safe to spread props

Just wanna double check if its okay to spread props from a reactivity standpoint. I understand the possible issues with destructuring, I'm wondering if the same applies for spreading props onto child component ie ```ts...

Confused by context updating in handleOnMouseDown()

I can share more code if needed but the component is pretty large and I don't think all the context is needed for this. I have a component for a drag and drop canvas that when clicked should set the starting mouse position and then calculates it's position based on the difference between the current mouse position and the starting mouse position. The problem is that the starting mouse position gets set multiple times even though I only want it set once. Does anyone know why this is happening? ```tsx const Draggable: VoidComponent<{ id: string }> = (props) => { const dragContext = useDragContext();...

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. ...