SolidJS

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

SolidJS

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

9/23/2023

Is the following a "clean" way of handling modals?

I'm trying to figure out a "clean", "best-practice" way of handling modals in an app. Have been experimenting in the following playground: https://playground.solidjs.com/anonymous/d3e943ee-e2fd-48e8-87ce-76d271f72b23 Please take a look and let me know if you have any feedback, or what your thoughts are regarding this...

Max

9/22/2023

Is it possible to use Outlet inside conditional render like Show?

Hi, is doing the above okay or not recommended ? Trying it seems to have strange results with route data on routes and eventually nothing renders,. Moving the outlet to outside Show it works fine. I can try make some reproducible example somewhere but meantime wondering if there's a clear guideline like Outlet should not be rendered conditionally ...

Arvalaan

9/21/2023

Navigate user in login/logout functions

I'm trying to make it generic to send my users either to the main page or to the login page when they either login or logout but I'm having trouble doing this in a generic way. ```javascript import { createContext, createSignal, useContext } from "solid-js" import type { Session } from "@supabase/supabase-js"...

Arvalaan

9/21/2023

Multiple Path Routes still Re-rendering, why?

```javascript <Routes> <Route path={["/auth/signin","/auth/signup"]} component={Authentication} /> <FileRoutes /> </Routes>...

Fabian

9/21/2023

ErrorBoundary requires string fallback when root is not a fragment

Hi, I'm running into an issue with ErrorBoundary and wanted to make sure that this is not a user error before filing a bug. When the top-level element is not a fragment, the ErrorBoundary chokes on any fallback value that's not a string: https://playground.solidjs.com/anonymous/799b7473-b4e8-40ab-840d-c6a19f922241...

Delt

9/21/2023

Looking for some advice for a new tech stack

I'm looking into building a dashboard that loads fast, navigates fast, and is capable of preloading and caching pages in a service worker for a native-like experience. SolidJS certainly meets the criteria of rendering fast. However, I am not sure if it is possible to combine SSR with CSR for a fast initial-load followed by subsequent smooth page navigation (preload and cache pages that are likely to be seen by the user). Not to mention how PWA ties into that. Any information, links, or repositories with this would be very helpful!...

Eric

9/20/2023

Async TRPC query with ssr

hi; I've got 2 trpc queries on a solid page This is actually the first time for me working with the ssr of solid, so I'm not too sure when it's server rendering and when it isnt - but the same queries work when I disable ssr globally. ...

AesthetiCoder

9/20/2023

How can i go back with @solidjs/router package ?

i want to go back in the history of the url with all the search parameters and more, is this posible i dnt se in the doc that method

TripleSmile

9/19/2023

What are the differences? Produce vs regular setStore

This is Astro + SolidJS components. Question: Besides produce allowing to neatly update specific properties of an object, are there any other differences? Any performance nuances between these 2 approaches dealing with stores? ```js...

9/19/2023

How to create an effect that runs on page navigate

I think this should be fairly straightforward. How can I define a createEffect that runs each time navigation occurs?

halu

9/19/2023

Integrate External, Read-Only Data Source Into Reactive System

Suppose the following: ```tsx // Hypothetical external data let externalData = new Map() EventEmitter.emit("dataChanged", /no event info/)...

Revxrsal

9/18/2023

vite bundling unused components from external libraries (SSR)

o/ question, i'm using https://github.com/x64Bits/solid-icons for icons and while i really like it, it seems to be including icons that i'm not using in the final build. my website is SSR'd and deployed in vercel, and it's complaining that the render function is too big. is there anything i can do to make it exclude icons i am not using?

Arvalaan

9/18/2023

How to mutate a createResource storage

Hi all, I'd like to get some help with mutating a store that is set as a createResource storage. ```javascript function createDeepSignal<T>(value: T): Signal<T> { const [store, setStore] = createStore({...

Max

9/18/2023

Are there any important considerations to creating signals in control component callbacks like For

Hi, wondering if there's anything to consider in terms of tracking etc in having something like this ```ts <For each={props.data}> {(data) => {...

eVinAu

9/18/2023

Dispose function not actually disposing of anything

I'm running Solid as a partial view inside another, non-Solid app. I've used webpack to export Solid's render function and assign it to the Window object (so i can access it from the outer app by calling window.render) and then I dynamically import the components I need and render them to a div on the page, and I hold on to the return value of the render function so I can dispose of it later. When I want to swap one component out for another, I call that dispose function, dynamically import the new component, and render that instead. The problem is that this doesn't work. When I call the dispose function, it clears out the div on the page, but it doesn't trigger any cleanup functions, so all effects keep tracking and any content rendered outside that div with portals persist. If, instead, I export render within each component, and then import it along with the component and use that render function to render, then it does dispose properly. However, I'd like to not have to add export { render } from "solid-js/web" at the end of every file if I can avoid it. Is there a solution for this issue that lets me render a dynamically imported component and dispose of it when I need to without having to export render in every component?...

James

9/18/2023

React key prop substitute!

I know what you're thinking, James, you silly sausage - Solid.js doesn't require keys for loops, and you're absolutely right but... I need key={} for another reason, I need to cause a component to be entirely unmounted and remounted, which was easily viable in React by just updating its key value in its parent. Any ideas how I can do that in Solid.js? Cheers, James...

oneiro

9/18/2023

Best way to dynamically access i18n-translations with typescript

Hey folks, I am currently using @solid-primitives/i18n (https://github.com/solidjs-community/solid-primitives/tree/main/packages/i18n#readme) for translation purposes. However there's one thing i struggle with:...

oneiro

9/18/2023

i18n and context issues

Hey folks, I am currently migrating to the 2.0.0 release of @solid-primitives/i18n. (https://github.com/solidjs-community/solid-primitives/tree/main/packages/i18n#readme) However I have a few questions:...

wonrax

9/18/2023

Difference between `setState` and `produce`?

I have appState as a store, and I'm trying to pass appState.selectedTable as a prop to a child component. When I simply use setAppState, it doesn't trigger a prop change in the child component. I've found that I need to use produce for it to work. The problem is, the documentation only gives a one-liner about the produce API. Could someone provide more information on how to properly use produce and createStore in this context?

Eric

9/17/2023

Solid Start not deploying on vercel in turborepo

Hi all, my solid start project doesn't deploy to vercel, aka every build fails. There are no error's though, the build fails, because the deployment duration takes over 45 minutes. ...

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.