SolidJS

S

SolidJS

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

Join

ParentProps usage and reactivity

When using Parent Props do i still need to use the children helper function or would this be okay ```tsx import {ParentProps} from "solid-js"; ...

useContext not working properly

i am trying to use createContext in my solid app but it is not working properly giving undefined

what's the point of Dynamic?

reading through the tutorial,
<Dynamic component={options[selected()]} />
<Dynamic component={options[selected()]} />
seems to do the same thing as...

Cloudflare Worker x Route Pre-rendering

I have the following setup: Page: ``` const getWorkData = query(async () => {...

mediakit/video - setting `currentTime`

Using mediakit, I'm trying to create a master seek bar that sets the percent duration for multiple videos, so I need to be able to control the currentTime of the video manually. Its createVideo hook returns a component that accepts its own props to pass to the underlying <video> element. Example: ```ts const { Video, play, pause, paused, canBeUnmuted, isVideoLoading } = createVideo({...})...

How do I create a signal that can be a value or null?

I tried doing:
const [val, setVal] = createSignal<string | null>(null)
const [val, setVal] = createSignal<string | null>(null)
but then val is infered as Accessor<string>...

What are non-hydratable components?

The createUniqueId documentation mentions that it only works in "hydratable components". What does that mean? Is there a common scenario in which a component is considered non-hydratable?

Solid ESLINT rules stop working, after no-unused-vars: "warn"

``` import js from "@eslint/js"; import solid from "eslint-plugin-solid/configs/typescript"; import * as tsParser from "@typescript-eslint/parser"; import globals from "globals";...

[Violation] Forced reflow while executing JavaScript took 32ms

I am getting this annoying warning on a pretty basic solid.js web application. It has a bunch of lists rendered and nothing else fancy. How do I resolve this warning, or debug where the issue happens. Because I removed parts of the application to see where it happens, but I am even more confused now....

createMutable/createStore with classes

I have a JS class with other classes being used inside its arrays etc. I was very confused as to why the inner ones are not being wrapped by a proxy. I found this https://github.com/solidjs/solid/discussions/1474 1) What is the purpose of this?...

Function as signal value

Using the accessor of createSignal<null | (x:any)=>...>() doesn't work as expected. I need to wrap the function in an array or object for it to become callable. What's the purpose of that behavior?

CSS bug causes severe perf slowdown

Hey y'all! I know you are all busy but I though I'd bring this issue to your attention. I've been running performance tests on deployed apps, and solidstart should be doing great but... it is not. The issue is with CSS optimization. https://github.com/solidjs/solid-start/issues/1324 The issue above lays out the problem....

createEffect in loops

In my SolidJS project the user is able to create new widgets by calling a function and passing in a config object. Within that config object there is a property called 'sets' that's a record containing a name as key and some other properties. Let's say for my example it looks like this: config object: { ...,...

Web Fragment Issue

I am trying to create a PoC for a Web Fragment implementation using SolidStart as a remote app within a Nuxt host app but encountering an issue on the SolidStart side of things. There are no console errors in the server or the client but it displays the error shown in the screenshot. I asked for help in the WF server and after some troubleshooting, @IgorMinar asked me to raise the question over here:
...If solid no longer supports assetDir config then that’s a bug overnight. It’s more likely just a documentation issue. Every framework supports this setting and even solid used to...
Per the SolidStart docs assetDir isn't exposed by the defineConfig API and I didn't see anything helpful via command clicking either. I also checked the Vinxi docs but didn't find anything useful as well. I am happy to create a minimal reproduction or just share the repos themselves, as they're still very simplistic....
No description

How much compiler magic does SolidJS use?

When I started learning SolidJS, a lot of things seemed like magic because I failed to read the explanation of how they worked (or there wasn't one). Tracking Scopes Reactivity of props etc ...

Idiomatic Props

ATM I'm passing a Signal<T> to a component, which of course boils down to [() => T, (value: T) => void]. However I could also do it with [T, (value: T) => void] and use the reactivity provided by prop instead of relying on a Signal. The second case seems more idiomatic?...

File based routing - pass props from nested layout to children

I have an app where the outer/wrapper/layout component has state stored as signals, and then the different routes have children which also use this state so the signals are passed down via props. This worked fine as an SPA but I am migrating to SolidStart so that I can make use of SSG and SSR and as far as I can tell it is not possible to pass props down to child components when using file-based-routing ["nested layouts"](https://docs.solidjs.com/solid-start/building-your-application/routing#nes...

Is getElementById("app") Magic?

I've gotten through most of the tutorials, but one thing that is bothering me is the render mount with document.getElementById("app"). None of the top-level components set their id to "app", but they're successfully mounted anyway. I figured I'd try testing my assumptions and knowledge by making a simple table using a store and setting a cell to a black block on mouse click. However, I can't seem get my component to mount in the playground here: https://playground.solidjs.com/anonymous/d9c86a2c-af76-4ab4-a397-94bc212c2370 I can see there is a div element with an id of "app", but nothing is rendered inside. I thought the button would be rendered at the very least if the iteration over the store array is failing. Could anyone explain the assumption that I'm probably misunderstanding? It would be much appreciated!...

Is there any Spatial navigation (LRUD navigate in grid/list)

Hello, I'm currently developing a SOLID based OTT platform service, and nowadays looking for some spatial navigation library that can be used in Solidjs framework. Previously, our solution was based on react, so using https://devportal.noriginmedia.com/docs/Norigin-Spatial-Navigation/ this one for that, but for smart tv devices, with lower h/w spec, we have to find alternative solution, and solidjs is that one what we're looking for. do you have any experience or suggestable packages for that?...

Reconcile array of nested objects

Hi. I'm having an issue where I do an api call and I get back facets and whenever you select a value for a facet you get another list of facets back. Now I'm using reconcile to update the store and it mostly works. However, when I get a new list with a new facet in front and after, in my case the Category facet, it rerenders the entire category facet. I've setup some test data here to check it out: https://playground.solidjs.com/anonymous/59500506-e221-4e9a-9d2b-70a3e8fc60d7 So even though I reconcile based on the "key" key, it still sees it as a different object because of it's placement in the array or something? Anyone know how to fix this or is it a bug of some sort?...
Next