SolidJS

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

Join

SolidJS

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

Join

lili/lilith

1/12/2023

How to make an Isomorphic Component Library?

What's the proper way to deploy a SolidJS component library with isomorphic rendering?

Michael P. Jung

1/11/2023

How to access browser language during SSR?

In an SPA you would normally access navigator.language but during SSR the navigator is undefined. How can I access the browser language/locale during SSR?

Baptiste

1/11/2023

Currently, I need to give default values to component properties if I want them to be registered: ```ts customElement( 'typebot-standard',...

Tur

1/11/2023

how to make a route working after page reload

Hello! I bumped into a nasty problem with solid-route.
It works while I'm surfing from the root page to other pages. But once I refreshed a page, that is not root, it stop working. It throws 404. The mistake is showed just on production build. When I use npm start it works properly. What may be the reasons?...

XxX_MLG Noob_XxX

1/11/2023

Does SolidStart Have a Global `Context` That Server Functions Can Use?

Other SSR frameworks have a concept of a "context" that is globally available to all server functions. For instance, Svelte Kit has event.locals (https://kit.svelte.dev/docs/load#shared-state), which can be set at the server entry point (hooks.server.ts). This context info is then available to all of the server data loaders. Similarly, Remix passes a context argument to its loader and actions. The value of context can be set by getLoadContext (https://remix.run/docs/en/v1/route/loader#context). Does SolidStart have anything similar? Or are there at least plans to add something like this in the future? Having a global context is really helpful when it comes to user identifiers....

Boku 🜲

1/11/2023

how do i make my component to accept class and classList ?

baxuz

1/10/2023

disposing of a `createRoot` nested inside a `createEffect`?

I am creating a nested effect, like: ```ts createEffect(() => { // create nested effect...

Your local wobbler: Suya

1/10/2023

SSR build failing

I'm attempting to get solid SSR working with deno via esbuild and esbuild-plugin-solid. In order to access solid, I have an import map where solid-js uses npm:solid-js and solid-js/web, ditto. In order to run the app, I need to import the SSR build. However, the following error occurs ```...

Tom

1/10/2023

solid-router nested routes - access child params from parent component

It seems like a parent component can't access the full set of params - it can't see params for child routes. Is that right? I get the logic but I have a classic master/detail view, list on the left, with a selected item showing up on the right. In the list I need to be able to detect which item is active, which depends on the nested route param which is not available. My routes:...

Razboy20

1/10/2023

Math.random() overwritten on hydration

I have a skeleton component which I want to have a slight randomness to its width, so I have

<span class="skeleton-text text-clip whitespace-nowrap">{"a".repeat(7 + Math.floor(Math.random() * 20))}</span>

<span class="skeleton-text text-clip whitespace-nowrap">{"a".repeat(7 + Math.floor(Math.random() * 20))}</span>

However, on hydration, the inner text of the span is removed....

bigmistqke

1/9/2023

how to add package to https://www.solidjs.com/ecosystem?

I made a package and would like to add it to the solidjs website. Is there a write-up somewhere how to contribute?

bigmistqke

1/9/2023

window.getComputedStyle returns react-style CSSStyleDeclaration?

if i const style = window.getComputedStyle(node) style has type CSSStyleDeclaration which follows react's camelCase formatting. I could cast it to JSX.CSSProperties but JSX.CSSProperties allow for numbers | string while window.getComputedStyle only returns string. what would be the solid way to type this?...

Revxrsal

1/9/2023

add fade-in and fade-out animations when navigating routes (using solid-routes)

o/ is there any way to add some sort of fade-in and fade-out animations when navigating between routes? this is what i basically have at the moment ```ts <ErrorBoundary fallback={<p>some problem</p>}> <Routes> <Route path="/" component={Home}/>...

Ho-kage

1/9/2023

Loading google fonts

I'm trying to load a google font with the <Link> component but it doesn't seem to be working <Link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Recursive:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" /> It puts an <a> tag in the body with link=true as an attribute but nothing the font is not working....

Kasper

1/9/2023

Resource not being called when componet loads

I have create a resource, that i want to update when the "cursor" is changed. I followed the tutorial, but this dose not load when the componet loads. ``` const fetchSubjects = async (source: any, { value, refetching }: any) => { console.log("fetching subjects", source, value); return await await urqlClient().query(GET_SUBJECTS, { after: "", first: 2 }).toPromise();...

Grahf

1/9/2023

Updating signal value doesn't always update DOM?

I have a situation where on line 98 here (https://stackblitz.com/edit/solidjs-templates-gguy1g?file=README.md,src%2Fcomponents%2Fbook-parts%2FSlider.jsx) the maxPage() state/signal)is being updated and set as the inputs max value correctly. But on line 136 where the value of maxPage() is displayed the maxPage() state/signal value isn't updated every time it changes value. I submit as evidence this screen shot showing that I can set the inputs max value one past what's being displayed as the maxPage() value but no further. No issues at all as long as maxPage() value doesn't change but when it changes the displayed value and behavior don't align. I am adding and removing elements that would affect the maxPage() value and the input max attribute is always updated correctly but not the <h3> elements displaying the value of maxPage()...

bigmistqke

1/8/2023

vite-template for building libraries

Is there a vite-template for writing ts (component-) libraries for solid? I can not seem to get the config right to bundle with type declaration-files.

Ping for toast

1/8/2023

Await Resource

I have an authentication context wrapping the router ```tsx export const [SessionProvider, useSession] = createContextProvider(() => { const cookie = isServer ? useRequest().request.headers.get("cookie") ?? ""...

bigmistqke

1/8/2023

get types of HTMLElement-attributes

Is there a way to get the attributes of an HTMLElement? Similar to React.TextareaHTMLAttributes<HTMLTextAreaElement>? Can't seem to find anything about in the docs...

Robin Lindner

1/8/2023

Passive Event Listeners

How can I mark onWheel as { passive: true } ```jsx import "./NewsElements.scss"; import { NewsElement } from "./NewsElement";...

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.