SolidJS

S

SolidJS

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

Join

How to import `renderToString` into a plain js/ts file

So, I have working serverless application, which has a handler.ts. Inside I atm do: ``ts const html = <html>...

Correct Syntax of passing a Component via prop

I have this component. ```tsx const Test = (props: ParentProps & { label?: JSXElement }) => { return ( <div>...

Animate on scroll in solid

Hey! I've been going through google search after search and I couldn't find any reasonable way to implement animation on scroll (basically if the element should be visible we fade it in). I've tried some interaction observer along with motion one but couldn't work out a solution. Is there any easy way to do so?...

Can a Solid store contain class objects?

Can a Solid store contain class objects? When I implement a simple type like below as a class, reactivity breaks for me when surfacing in a Solid store via a context provider. ```...

ProtectedRoute with a redirect using @solidjs/router

Hi everyone. Is there a way to implement a ProtectedRoute, but with a redirect using @solidjs/router? All the examples I have seen, do something like user ? <Component /> : <Login />, but the url remains the same..

recent SSR template or example

Hey there, I'm setting up a solidjs site to be rendered as part of an AWS Lambda function for the first time. The only template-example for a Server-Side-Rendered solid that I could find was this https://github.com/solidjs/solid/tree/main/packages/solid-ssr/examples/ssr but it's 2 years old. Anyone aware of a newer example?...

How to implement dangerously set innerHTML (which is there in react) in solid

I want to use render string HTML into the DOM. What are the best ways to do it?

Store creation and location in effector-solid and Solid Start

This may be part solid part effector question but would like to ask here because of Solid Start and the SSR setup it provides. This may be actually more generally applicable to any store or data kept outside of the tree. Is there some constraints to where/when external data should be kept or initialized when using Solid Start with SSR. I guess this is relevant also to any SSR and have found Effector specific solutions to that (https://effector.dev/docs/api/effector/fork/) but wondering if anyone knows of any specific considerations that should be taken into account for Solid. ...

Render as element kind

Hi, anyone know if you can render an element with a particular tag, from props for example. Maybe like react you do createElement(<tag>,...). There's Dynamic but that's no SSR right? Just to give a simple example, say you have a very nested structure layout so want some Flex component just like
const Flex = <T extends *someTagName*> (props:{tag:T}) => <*tag* style={{...*all the flex stuff*}}>{...}</*tag*>
const Flex = <T extends *someTagName*> (props:{tag:T}) => <*tag* style={{...*all the flex stuff*}}>{...}</*tag*>
...

"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: ```...