SolidJS

S

SolidJS

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

Join

"The reactive variable 'head' should be wrapped in a function for reactivity."

I'm a little confused specifically as to what this warning from eslint-plugin-solid means:
The reactive variable 'head' should be wrapped in a function for reactivity. This includes event handler bindings on native elements, which are not reactive like other JSX props.
The reactive variable 'head' should be wrapped in a function for reactivity. This includes event handler bindings on native elements, which are not reactive like other JSX props.
...

How to create a generic Input when passing prop `class` to override styles?

Hi, I'm trying to create a generic input. I'm using Tailwindcss for the styling with cva (class-variance-authority) which allows me to create variants. I want to allow users to pass class to override the input....

Waiting for context provider to load before rendering children

My context provider doesn't load before the children are rendered. Therefore, the context is undefined when it is used. I've tried using suspense to fix this, but the same error persists...

How does reactivity works in createStore?

Hi, I'm quite new to SolidJS and Reactivity and I'm not sure how I should implement things. So, I've created a context with a createStore for an Auth service. ...

Possible to use routeData outside a component ?

I want to use RouteData outside JSX. is it possible to do that ?

How to update store with arary

When updating a store that is an array is this not the correct way updating one of the items? When i do this, no error is thrown but my view is not updated ``` const [uploadFiles, setUploadFiles] = createStore<FileUpload[]>([]); ...

Is it possible to have generic children for a generic component?

I'm trying to create a type-safe form, with a generic component. I pass a generic type argument to the parent component and I want it's children to derive that generic type. Here's my attempt: ```tsx import { render } from "solid-js/web"; import { children, Component, JSX } from "solid-js";...

Components Props and Text

Hey mates! I need to know 2 things
1. How can I add required props? 2. How can I add text to a Component like in the Example?...

invalidateAll

Is there SS equivalent to SvelteKit invalidateAll? (https://kit.svelte.dev/docs/modules#$app-navigation-invalidateall) The use case is when the user updates their profile (e.g, change profile photo or user handle), want to update session state so changes are reflected (by requerying it from server), and w/o a page refresh....

CORS when running solid client from VPS

This is a cross post: https://discord.com/channels/722131463138705510/910635844119982080/1077921463899787314 The summary is that in running into CORS errors when running the client from a VPS. I’m hoping to understand how to leverage inbuilt middleware to open it to the server...

How to untrack() or on() a props value?

Maybe I'm thinking about this the wrong way? But I'm wondering how to untrack() a props value the way you'd untrack() a signal in a createEffect for example. Since the reactive values in props are wrapped in a getter, it seems impossible to get the Accessor that can be used in untrack() or on(). I suppose I could derive a new Accessor with something like: ```...

Setting innerhtml causes error

using contenteditable h1 tag, I have been able to make a "notecard" which you can edit and the content of which is bound to a signal. onFocusOut causes the following function to run
(e) =>{
setText(e.currentTarget.innerText || "")}
(e) =>{
setText(e.currentTarget.innerText || "")}
. I have tried many ways to make sure that the inner text is not null, yet i am still getting this error. Any tips would be much appreciated...

Manually refetching server data, causes double request

Hi, I was wondering if this is correct behavior or am I missing something. There's following code: ...

Any workarounds or guidance for circular dependency warnings?

I realize Vite issue, but I was able to resolve in SvelteKit and no such luck (yet) w/ SS. Specifically, inclusion if AWS S3 client module is resulting in a lot of circular dependency spew at build time. W/ Svelte using node adapter, just need to regular dep (instead of dev dependency) so module doesn't get rolled-up, resulting in clean build output. Everything seems to be working fine, but the number of warnings being generated is unsettling. Same problem w/ auth-core, but to much lesser extent. Somebody has to have run into this w/ SS given S3 client usage. Any workarounds for SS, or folks just ignoring? Related thread: https://github.com/aws/aws-sdk-js-v3/issues/4435...

use:clickOutside not defined

Heyhey. I copy pasted the code from https://www.solidjs.com/tutorial/bindings_directives?solved but I get a runtime error ReferenceError: clickOutside is not defined. What am I missing here? I've added the TS declaration as mentioned in the docs here https://www.solidjs.com/docs/latest/api#use___ . My linter is complaining but I don't think it would have any impact on the solid compilation anyway?

Is it possible to create fully functional component without JSX/TSX syntax?

I'm trying to use Solid with PureScript, but seems like when component gets compiled from TSX to JS, a lot of stuff is happening. Basically, is it possible somehow to make something like this work? ```...

Typescript type for generic html props passthrough?

Looking to create a generic wrapper component that can take arbitrary HTML props (class, etc) without manually defining each prop. The Component type is too generic in this case. Is there a simple way to union the Component type with the generic HTML types? React has the React.HTMLProps option. Is there recommended approach?

Don't send component logic to client conditionally on data?

Hey everyone! I'm trying to wrap my head around this use case and can't understand how one would do it in SolidStart, if someone can help. In full SSR world: Very simple: on the server I have a backend request that tells me if user has permission A or not. ...

Adding aws-amplify libs adds 5s each time I change a line of code

So after adding "aws-amplify": "^5.0.15", to my project, as well as ``` { find: "./runtimeConfig",...

Component is not updated when prop is changed

I have a component "ShowDocument" with a resource inside, the component has a variables that needs to used in the resources. The component is called with the following: <ShowDocument documentId={showDoc()} onClose={closePanel} /> my issues is that when signal showDoc() in the prop "documentId" is updated the component ShowDocument is not updated, and will continue to show what was there when it was first rendered. ``` const ShowDocument = (props: { documentId: string | undefined; onClose: () => void }) => { console.log("ShowDocument: ", props.documentId); const { getSecureDocumentLink } = useDocuments();...