SolidJS

S

SolidJS

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

Join

What is props.children really?

I'm trying to make an element that scrolls it's children automatically when mounted. This is what I have currently: ```ts interface AutoScrollProps { children: JSXElement }...

Serve a statically generate Solid.js app to Github Pages

Hi, sorry if this is a trivial question but I literally cannot find an answer anywhere because it seems like everyone only focus on serving Solid Start app to all the hosting services. After I tried to rund a vite build on my Solid.js web app, I received a dist folder. Now, normally, I should be able to just commit that folder to Github and use it as the roots of the Github Pages and it would have been working just fine. However, I just cannot get Github Pages to loads the assets (my css, js files) in the assets folder of the dist....

Array.includes is not reactive.

const [ activeKeys, setActiveKeys ] = createSignal<number[]> ([]) const isActive = (i: number) => activeKeys ().includes (i) I have this code. isActive () is not reative. What's problem?...

Back end framework with isomorphic rendering

Do someone has made solid work with isomorphic rendering but using something like express for the back end? Like solid, maybe even solid start, so we have things like client-side router working, but server rendered with express. Maybe some function in server rendering, that'll render solid in express route. If somebody explains me this, I'll share it further, create project initialization package, so people can go with it. It don't necessarily have to be express, but I preffer something with tha...

Best way to upload files from a form with solid-start?

Hey folks, I was wondering what the best way to upload a file with solid-start would be? Is there an easy way to use createServerAction$ or should I expose an API-route? (I couldn't really find any fully fledged examples, so if you know any, I would be very happy if you'd share them with me 🙂 )...

question about stores and effects

o/ so i have a store that stores preferences (dark theme, etc.). i want to update the local storage whenever it changes. rn, i have an effect in the Root() component. i wonder if there's any way to hoist that logic outside

Navigate then scroll

Sorry about the super accurate title This code is for an onClick event. Well, this is one version of it..... I've tried a lot of things. It's just supposed to find the right thing to scroll to and then scroll to it. It acts strangely if the if block at the beginning is executed(if the if block is skipped the code works fine). The if blocks navigates to a new page which in turn updates the paragraphRefs used here. ...

How to reload a component in solidjs (a route or a specific component) (I'm using solidjs/router)

I need to be able to reload a component clicking a button or reload the whole route page clicking another button. I want the same functionality like doing a window.location.reload but more specific with a router page or a component.

Preserving State during HMR Errors

I'm using multiple providers like: `export function InstanceProvider(props: any) { const [instance, setInstance] = createSignal(); onMount(async () => {...

Web Components from a Stencil Library (Custom Event)

Het guys, does anyone has encoured some difficulties to deal with customEvent from a Stencil Library. Its seems that the method define by the compiled interface of Stencil is not called at any time or the custom event is never raised. Any help ?

Debounce selector

How to make createMemo only refresh max once a second no matter how many signals are inside
const data = createMemo(() => {
// compute heavy stuff multiple signals
})
const data = createMemo(() => {
// compute heavy stuff multiple signals
})
...

solid-start dev works, solid-start start does not

My program uses tesseract.js, and it works fine in dev mode as the title states. However, when I try to run it with start, I get the following error: ``` file:///home/user/code/fr33split/dist/server.js:17744 workerPath: path.join(__dirname, '..', '..', 'worker-script', 'node', 'index.js'),...

Nested object signal

Hey! I have trouble getting changes in a nested object to trigger a rerender. My object looks like this: ```jsx type Alerts = { [key: string]: {...

How to reactively set height of a element?

The title is kinda vague so let me explain. I have a h1 tag that has 2 divs inside it. I want to set the height of the parent h1 tag equal to height of single child div. I've kept overflow hidden so the extra div is hidden. My component looks like this: ```tsx import { Motion } from "@motionone/solid";...

Issue with using ApexCharts (solid-apexcharts) in Start

I'm having trouble with @wobsoriano's solid-apexcharts package in SolidStart. We're getting a weird "export" error when loaded. The package seems to be exported properly for for cjs and such so I don't easily see what the problem is. I put together a recreation to tinker with: https://stackblitz.com/edit/github-eq59tk?file=src%2Froutes%2Findex.tsx,vite.config.ts...

idiomatic memo usage

is there a more idiomatic way to write this? ```ts const username = createMemo(() => state.data?.displayName?.toLowerCase().split(" ")[0]); ...

Error Tracking/Logging

Is there a way to track errors like there is in vuejs? https://vuejs.org/guide/best-practices/production-deployment.html#tracking-runtime-errors I understand that there is ErrorBoundary which will catch errors thrown from components, but was wondering if there was anything else. ...

createMemo accessor null value

I have the following code to access a Firebase collection and it depends on a user's UID which gets loaded after the page load:
const docComputed = createMemo(() => collection(db, state.data?.uid ?? "a"));
const todos = useFirestore(docComputed);
const docComputed = createMemo(() => collection(db, state.data?.uid ?? "a"));
const todos = useFirestore(docComputed);
...

useParams

looking into the params object based on my folder nav structure i=I noticed something off. ``` { "owner": "thisdot",...

solid devtools fails with O.createRoot is not a function

The extension is version 0.27.5 My deps are: ``` "solid-devtools": "^0.27.5", "solid-js": "^1.7.0",...