SolidJS

S

SolidJS

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

Join

MobX + SolidJS enableExternalSource untracked bug?

I am evaluating using MobX with SolidJS and now that there is an untrack parameter to enableExternalSource I have tried putting MobX's untracked in it, but I'm running into an issue with <For> updates Please see: https://github.com/solidjs/solid/issues/1850#issuecomment-1976086047...

how to efficiently make nested data structures in solid

Hello, I am new to Solid atm, but am aware of some reactivity principles like singals, memos, effects, etc. I was wondering what is the best way to go about implementing UI for a data structure that is nested (one of its elements is itself). For my usecase. I have an object called Questions. Each question can have sub-questions inside it , the object basically looks like this ```js const questions = { body: "", //the text inside the question, e.g. "when did x happen", id: 0, //just an id used for dynamic rendering keys,...

SolidStart - Nitro Module missing `context` keys in `request`

Hey guys, I understand what I am asking about is likely out of scope, as this is dealing with a 3rd party package. However, with the stack I am unsure where to start asking questions. I'm seeing that SolidStart uses Vinxi + Nitro internally for the dev / build server. ...

Handle user interactions to send backend

I would like to know what are methods that can handle identification of user interaction points like post by post id, comment by comment id etc. HTML ID attribute can be use for add specific id to identify but I think some developers use different methods. Therefore I would like to what are methods do you use for that, what are best practices and security methods....

How do I use solid for reactivity without a build step?

I like solid as a frontend library, and I want to use it as a "vanilla" state management library for reactivity. However, I'm confused why running this script without bundling does nothing: ``` import { createRoot, createSignal, createEffect } from "solid-js";...

use directive typescript error

When i try to use the use: directive i get the error
Type '{ type: string; placeholder: string; value: string; "use:test": true; oninput: (e: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement; }) => void; }' is not assignable to type 'InputHTMLAttributes<HTMLInputElement>'.
Property 'use:test' does not exist on type 'InputHTMLAttributes<HTMLInputElement>'.ts(2322)
Type '{ type: string; placeholder: string; value: string; "use:test": true; oninput: (e: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement; }) => void; }' is not assignable to type 'InputHTMLAttributes<HTMLInputElement>'.
Property 'use:test' does not exist on type 'InputHTMLAttributes<HTMLInputElement>'.ts(2322)
I tried to put ```...

I have to fetch initial information in a component, how do I do it?

const App: Component = () => { const resp = await fetch(...); // show Home component after fetch is completed }...

Dynamically creating resources based on reactive state in Solid Store

What would be the right approach to solve this using solids reactivity? I want to achieve the following fetch the sources (the headings in the picture attached to this message) and then fetch the entities (what is below each of the headings) belonging to each of the sources. Inspired by the solid-realworld example I was trying to do something like this which doesn't work unfortunately:...
No description

Struggling to understand the correct way to use createResource with a store

I have a global store export const [dataStore, setDataStore] = createStore({ some: "data"}) , which should get populated with data fetched from my api. In one of my components i want to automatically renavigate to another url if there is an error from the fetch request as the component cant be displayed correctly. For this i wrote this: ```const [data, setData] = createResource<any, any>(fetchData) ...

How do I "protect" routes? I am using @solidjs/router

Now that Outlet is not supported anymore? How do I implement a route guard for nested routes?

What are canonical patterns to separate UI from domain logic in SolidJS?

I am developing an app that helps guitarists to learn notes. Users learn notes by exercising. The exercise asks to play a note, listens to the audio on mic, and gives feedback and further instructions. I would like to separate domain logic from presentation to reach following objectives: 1) Test domain logic separately as it is relatively complex ( music theory, web audio, learning management ) 2) Allow to swap different visual components. For instance I want to A/B test what visual components work better for learners hence I don't want to re-implement domain logic for each. In addition users might have own preferences about appearance. So the same domain logic should be able to work with different appearance....

someone used the plugin postcss-functions ?

how to set the visibility of functions in css files. ide shows that there is an unknown function, what should I do with these

Hydration Mismatch. Unable to find DOM nodes for hydration key

I'm trying to setup a SolidJS SSR project with Vite, Fastify, and the @fastify/vite plugin. I've finally got something rendering, but am getting this error: ``` Uncaught Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: 0-0 at getNextElement (chunk-TJVPM3FD.js?v=ff79f117:398:13) at _$$component.location (App.tsx:8:2)...

solid primitives storage is bug

I can't set value 0 number what is this. Secondly please fix the types in documentation like this asdf = (props) {...

memo with dynamic props pass

am I doing something heavily retarded? I find myself doing this pattern a lot to enforce that props item is subscribed to ```tsx export interface AccordionProps { items: AccordionItem[];...

Pass authed user data to protected routes

I am trying to pass validated data to protected routes so I don't have to check undefined. Routes are currently protected with RouteGuard which redirects to the sign in page if there is no user. If there is a user, I want to pass the validated data to all nested routes without having to manually pass the data to each route or setup a context provider for each route. ...

AWS Amplify with SSR Solid Start

Hi all! Has anybody been able to successfully deploy Solid Start SSR onto AWS Amplify since Amplify recently stated they support SSR and Next.js? Thank you!

Why is it considered wrong to destruct props?

Why is it considered wrong to destruct props (https://docs.solidjs.com/concepts/components/props#:~:text=of%20the%20property.-,destructuring%20props,-Props%20are%20read), even thought the reactivity can be retained by just not calling the signal immediately when passing it and just passing reference and calling it only by last children or wrapping it in Accessor and modifying it as it would be needed. And why is there no standard for naming signals like `const [_name, setName] = createSig...

If I am using a singleton class why would I use a context

```tsx class ProfileStore { active_user: Signal<string> = makePersistent(createSignal('hello')) ...