SolidJS

S

SolidJS

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

Join

Loading data into context

Hi what's the best practice to load data from server (like using prisma) into the context? i did try some method like using createServerData$ but seems like only if I call the getter function inside the JSX Element, then the fetcher will work, other wise it won't, the data.state is just pending, won't beready...

Listening to all changes in an array or object in a store

Hi! I have a store that has arrays and objects inside it. I want to listen to all changes in a tree. For instance, suppose this is my store: ```json {...

Problem creating web component with solid-element

Hi, I'm trying to create an image carousel web component by wrapping an existing JS library (called Glide) within a Solid component. As a regular solid component it works fine, but when I try to convert it to a web component I get an error from the Glide saying indicating that it cannot find the root element on which to mount the image carousel. It seems the initialization which I place within the onMount hook cannot access the elements of the shadow DOM (???) The code is below. Any insights would be appreciated. ``` import {Component, createEffect, createSignal, JSX, onMount} from "solid-js" import Glide from "@glidejs/glide"...

Confusion around solid-query

coming from Angular, so I'm new to both solidJS and solid-query/react-query, when writing a useAuth hook, how would you go about fetching and storing the initial session? ```typescript...

[solved] DB change not being reactive?

Isn't createResource reactive? I have one and when I changed the value in the db the fetcher didn't respond. Or is reactivity just within the code base interactivity? Or should I be using createMemo So, I tried createMemo together with createEffect but that doesn't seem to be working either. My initial try was with createResource Thoughts?...

How to add child to parent component outside of parent?

I know this doesn't work. But is there way to add child like this instead doing <div > <Child /> < /div>...
No description

Transform property on all elements

I want to write my JSX with Linaria like this: ```jsx <div class="w-full font-mono" ...

Context store issue with array

Hello, I apologize but I just allowed myself to make a second post, since now I have a codesandbox to reproduce the issue I have in my app. Situation: I have a store in a context, and the context object also contains setters to update the store (I tried to do the same as the CounterContext in the documentation: https://www.solidjs.com/docs/latest#createcontext). The problem is, in my app I have several components, each of them containing the value at their own index in an array of my store. And each component receives, from the context, a setter function that updates the value in the array at their index....

[solved] createEffect signal is Undefined

I can't seem to figure out why the signal user is not updating (the output near Profile). The signal does get populated. Clues? Tutorial link with real-world example? Thanks....

Hydration fails with start-cloudflare-pages

For some reason, all the data-hk attributes in the SSR-generated page have a single number (e.g. data-hk="1", data-hk="2", ..., data-hk="88"), unlike the dev mode ssr where I get an hierarchical value such as 0-0-0-0-0-0-0-0-0-1-0-0-0-0-0-0-0-2-0-1-1-4-0-1-1-4-0-1-0-1-0 ). Seems like start-cloudflare-pages is unable to track the hierarchy while rendering the SSR page. Any pointers how to further debug this?...

client-side solid-router prepends every relative link with hash, even when not desired

I am using hashIntegration with the solid-router for an SPA running on our site - but the entire site is not an SPA, and <Link>, <a>, <NavLink> (solid-bootstrap), etc., treat any links as hashed links for the router. E.g., I do not want "/about/home" to go the client solid-router, I want it to go be handled by the .NET MVC router. Yet it doesn't seem to matter what tag I use, the links are automatically converted to "#/about/home", which traps the user inside the SPA. Is there any way I can break out of this by setting something on the tag itself?...

Passing signal from one template's function to a different template function

I've been reading so much I think I've confused myself more. If I createSignal() in header.jsx how can I use that value in footer.jsx Any pointers would be appreciated....

Monorepo error with SolidStart `__vite_ssr_import_0__.template is not a function`

I've got a shared UI library (compiled into esm + cjs with vite) that is used with both a regular SolidJS app and a SolidStart app. It's working fine in the SolidJS app, but when importing the lib in the SolidStart app, I'm getting a pretty cryptic error: ``` vite_ssr_import_0.template is not a function TypeError: vite_ssr_import_0.template is not a function...

undefined context for dynamically added component

Hi team, I am coding a toast component. The idea is to expose a success method via context. Users can pass in any components as the first param of the success method to be displayed inside a toast. Users can use ToastBody as the first param, which will contain a close button. The close button will close the toast via onClose method exposed in the context. ...

Do we have an ExtractProps helper?

Finally have a need for this, but managed to avoid it till now. lol

Property 'pathLength' does not exist on type 'CircleSVGAttributes<SVGCircleElement>'

I was trying setting the pathLength property but I get the TS error above, not sure if the property is missing in the types or what ``` <circle cx="50"...

Events (oninput on keyup) stopped working?

I just asked in the solid-start channel but this may be a bigger issue than that. I may have done something dumb but I'm using solid start and my event handlers have stopped working. They were fine a little while ago but now none of them seem to fire (the value never changes). I've even gone back to the tutorial to get a basic example (code below) and it does not work. Any ideas on what I could have goofed up? I don't see any errors or warnings in either the browser console or the server window.
import { createSignal } from "solid-js";export default function FormExample() { const [value, setValue] = createSignal(""); function handleInput(e: Event) { console.log("WTF"); const target = e.target as HTMLInputElement; setValue(target.value); } return ( <div> <div> The value is {value()}</div> <input type="text" oninput={handleInput} /> </div> );}
import { createSignal } from "solid-js";export default function FormExample() { const [value, setValue] = createSignal(""); function handleInput(e: Event) { console.log("WTF"); const target = e.target as HTMLInputElement; setValue(target.value); } return ( <div> <div> The value is {value()}</div> <input type="text" oninput={handleInput} /> </div> );}
...

How to add calculated getter in a existing store?

const [store, setStore] = createStore({firstName: "Foo", lastName: "Bar"})

using createResource on node

I am trying to create a filesystem primitive that abstracts different file systems (virtual on localStorage, typescript-vfs, web filesystem api, web filesystem access api, node, tauri); synchronous file systems return signals on read access, whereas asynchronous file systems are supposed to return resources. Unfortunately, I get an error on node with asynchronous file systems; sharedContext is not defined. Is that correct?