SolidJS

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

SolidJS

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

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

Max

1/7/2023

Using lifecycle functions in abstract function?

Just wondering if there are any consideration to be taken into account when calling lifecycle functions like onMount or onCleanup inside some abstracted function made to reuse code, like a hook in react. Would it work fine so long as the function gets called in a component, or anything else to keep in mind? And is this something inline with what custom directives like use are designed for, or its unrelated? ...

Robin Lindner

1/6/2023

Modals in SolidJS

Is there some proper way implementing modals in solid? I have a special button component and I want to open a modal on clicking this button. I read something about Portal. Can you help me here :)? ...

Revxrsal

1/6/2023

route not rendering sometimes

o/ so I have two routes: the index one (home) and the /settings one. here's my root.tsx: https://pastebin.com/K8ykT5C2 here's my settings.tsx: ```ts export default function Settings() { return (...

D0Z

1/6/2023

Argument of type 'StoreState' is not assignable to parameter of type 'PartStoreState, layers'

Am I dumb ? I think so... the error occur in setOne method declaration ```ts...

Kasper

1/6/2023

Why dose createServerData$ return undefined

I am learning solid start, i am having some issues getting routeData and createServerData to work correctly, the below example prints Test: undefined where it should return Test: { Foo: "Bar" } ``` export function routeData() { const user = createServerData$(async (_, { request }) => { return {...

avant

1/5/2023

Image loading SSR

Is it possible to display loading indicator while <img> is loading in SolidStart?

CatNoir

1/5/2023

How can I execute a function from parent?

How does ref work? I want to execute a function from parent, something like this: ```jsx // Parent function Parent () {...

Revxrsal

1/5/2023

add keybinds to buttons

o/ i'd like to make my website possible to use using a keyboard only (similar to monkey type), so i came up with this (probably half-baked) solution to easily bind buttons to keyboard buttons using everything i know about solidjs here it is: https://gist.github.com/Revxrsal/105163383fa6e84448ff0ad733301b9b where i use it like this: ```html...

eponymous

1/5/2023

How do I pass props to child components which are accessed through props.children?

I'm coming upon this kind of issue a lot. In this particular case, I have a <Tabs> component that can have an arbitrary number of <Tab> and <TabContent> children. There are other ways to do this, but this is the way I have chosen. I need to update props.index on the children from the parent; and also set their visibility either through a props.visible property. 1. Is there a way to pass props from parent to child by getting the child through props.children (or some other way)?...

Kasper

1/5/2023

How to getUser without doing a server request on every page.

I am following the guide on https://tahazsh.com/blog/building-a-solidjs-app-from-scratch/ (expanding on the session in the https://start.solidjs.com/advanced/session) to create a authentication system in SolidJS Start. It works fine but it loads the if i want to use in a page, it dose a POST request to the backend server each time the page is loaded. How can i cache the user in the client, that also updates if the user logs out. ```export function routeData() { const user = createServerData$(async (_, { request }) => { const user = await getUser(request);...

Boku 🜲

1/5/2023

can i propagate event to child?

is there a mechanism to propagate click event from parent to child? or is there any alternative? for example by returning component and a signal Accessor. but todo so, i need factory function. i want to avoid the need for factory function....

Revxrsal

1/4/2023

Interpolate percentage?

o/ I have this basic clock implementation (https://gist.github.com/Revxrsal/faf598ac48efb9db0b11769ce9ac408d) and it renders like this: https://gyazo.com/804070195d25a5cc5baf4115af74f30a I wonder if there's any way to make it smoother? I know other UI libraries (not in web dev tho) that achieve this with animating floats by interpolating them into certain values. maybe solid-transition-group can help?...

RATIU5

1/4/2023

Reading localstorage theme value before rendering components not working

I'm setting up a theme toggle. It can successfully set the theme in localstorage. When loading a specific theme from storage, there is a brief "flash" of the default theme before converting to the desired theme. Here is the function that loads the theme from localstorage. It's being loaded within the <Head/> tag from Solid Start. ```jsx function themeScript() {...

KokoNeot

1/4/2023

Lazy loading routes instead of components

Hi, I'd like to have a separate file for each main route, but I'm not sure how to do that using lazy ```js...

bigmistqke

1/4/2023

minimal ssr|ssg-setup, general pointers for solid on the server

I am hacking around with having a solid jsx-template generate a typescript-file describing the schema (https://codesandbox.io/p/github/bigmistqke/solid-three-parser/master?file=%2Fsrc%2FCMSApp.tsx be aware it's a bit unconventional). I have the typing sorted, but I need to open the browser to generate them. Ideally it would generate those types and save them in a file everytime I change them (inspired by payloadcms), without having to open the browser, but I am a bit puzzled with what would be the best way to approach that. It does not need reactivity, so I believe it could be done in node and ssr-mode, but am a complete noob regarding solid on the server so could really use some points. I thought a more minimal set-up, compared to solidstart, could help for me to play around with this, but can not immediately find anything when googling. if something like this would be possible in solidstart i would also be interested in these suggestions!...

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.