SolidJS

S

SolidJS

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

Join

Dinamyc inline svg

hi everyone, good night i have a question, i am new whit solid js and i want to make a component that can render svg dynamically, these svg are in my public directory, so an example of this cloud be react-svgr, his library can import the svg an render as a component, the result is a inline svg and ou can change his props https://react-svgr.com I saw this method in react to import dinamically a svg, it is posible to make this in solidjs ? ...

how to use useParams inside a ContextProvider

I have something like this ``` return ( <Router> <MyContextProvider>...

How do y'all handle mobile phones in landscape for mediaquery breakpoints

So, we'm using suid/mui that has builtin-breakpoints, so we can do: ``` const ActiveDotPopup = styled(Box)(({ theme }) => ({ // .. basic css...

Accessing child element size from parent.

I'm trying to use createElementSize from primitives. Problem is, It seems it doesn't wait until child is rendered. My page goes blank with error. How to get child element's size properly?...

Fetching data in root.jsx

I have solidStart connected to a local postgre database. I can fetch data from it in files in the "routes" folder using createServerData$ and useRouteData. But that doesn't work in root.jsx. I was hoping to populate a navbar with items from the database. Maybe there is another way to show a component on every route(in this case the nav bar) that can also useRouteData? Or maybe I need to setup an API route to fetch data fro root.jsx?...

Testing code without a render function

I was writing some utility functions using SolidJS primitives and ran into the issue that memos don't update. This is the minimal vitest where I could reproduce the issue: ```ts test('memo', () => { createRoot(() => { const [signal, setSignal] = createSignal(false)...

Solid-Start w/ Firebase

Hey all, Looking for any sort of documentation or wrapper for firebase with solid-start. Mainly using the auth and firestore sdks. Theres seems to be a lot for normal solidjs but not solid-start...

peer dependency error when creating a new SolidStart project

created a new project, received this. not sure if i should worry or not

api route errors not being logged and the dev server just stops

api route errors not being logged and the dev server just stops

How to preserve reactivity in a multilevel object stored in a nanostore map ?

Hello, I'm trying to create a simple cart store using the nanostores library (https://github.com/nanostores/solid), the data looks like this : ```js...

onKeyPress event

Hello there, I'm trying to capture key-presses to make a gallery go left/right with the arrow keys. In react I would do: ``` <div tabIndex="0" onKeyPress={(e) => console.log("onKeyPress: ", e)}></div>...

show user data based on authorization?

Hello, I understand how I want to log users in and persist login state with localstorage but how would one show the data that is specific to them? Would every component have to render items based on a get request to the database?

Check if the code runs in CSR or CSR + hydration

Is there a way to check if the code runs during hydration or just normal CSR, the same way you are able to check if you are on the server or clinet using isServer or export conditions? This is mostly about authoring libraries, where you want to run different logic depending on if the env is SSR / CRS / CRS + hydration. it's related to the issue here: https://github.com/solidjs-community/solid-primitives/issues/310...

createResource State gets updated without directly doing so

I have a createResource function which retrieves data from a database, in the same function, I'm extracting a set of data and calling setState for an already existing object called selectedTasks. ```javascript const [clients] = createResource(async () => { const { data: clients, error } = await supabaseClient(dblogic)...

Simple SSR server redirect not working

I've found a few similar questions with auth redirects, and I thought I've ticked all the boxes, but I still can't get a server redirect happening as soon as there's an await. Everything works, response is logged properly, but the <div> still loads. As soon as I remove the fetch, the redirect works. I've tried with/without <Suspense>, reading/not reading the routeData, throwing or returning the redirect. To replicate, ...

Use breakpoints in suid `createTheme`

In Mui 5, we could do ``` let theme = createTheme() theme = createTheme(theme , { h5: {...

Deploying changes to SolidStart app then navigating the application throws strange error

Before I file this as an official issue or start nagging the rest of the team I want to make sure I'm not deploying or thinking about the issue incorrectly. Basically I'm deploying a SolidStart app on Cloudflare Workers, loading it on my browser, pushing a deploy and noticing that when I navigate between pages an error is thrown. I could be wrong but it seems to happen mostly with Outlets. When I navigate to a page with one, the application loads the nested chunked script that was compiled newly while the one currently cached in browser is older. Hence the child trips up and throws an error because the function it depends on no longer exists. So I see a lot of red errors as a result. How should I be deploying this to ensure that the function names between versions remain consistent and my deployments don't break? or is this a bug with Start's default config....

Why can't I access `useParams()` in `onClick`?

If I do ``` const handleClick = () => { console.log('useParams():', useParams()) // ......

Documentation example of context with typescript does not work

I copied the context example (CounterContext) from the docs to a solid start project. The first error I get is when I pass the store to the Context Provider value: "Type '({ count: any; } | { increment(): void; decrement(): void; })[]' is not assignable to type '({ count: number; } | { count?: undefined; })[]'". Then when I use the useContext example I get the following error "Property 'increment' does not exist on type '{ count: number; } | { count?: undefined; }'" (same for decrement) and when...