SolidJS

S

SolidJS

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

Join

Does the Solid compiler convert JSX to template variables? Know anything about this issue here?

Hi y'all! Does the Solid compiler have anything to do with converting JSX to a template variable in JS? var _tmpl$ = template(...)? This library I'm using seems to be facing an issue where when it's deployed to npm, it loses the quotes in the template. For instance: <div class="sonner-loading"/> becomes div class=sonner-loading/>...

Any recommendations, or does it look good?

It's my first time using SolidJS, I started a Chess game project, first I decided to make the board to see how it went, and that's how it stayed. I wanted to know what you think, is that okay? It can improve? Some recommendations? I decided to use Div instead of Table because it is more comfortable for me...
No description

Styled-components or Tailwind?

Is there any significant difference in page performance when using styled-components and Tailwind CSS?

should you manually remove event listeners from onMount with onCleanup

Title pretty much sums it up. I see the primitives package says its done automatically, but I'm wondering if any cleanup is automatically for listeners set up on components in onMount, I know (or think) solid does some processing of event listeners in terms of event propagation for certain kinds of events, so wondering if it were to do something like this for disposal of listeners on component. thanks

Standards/Conventions for Solid/SolidStart project setup

Hey Coders, still new to SolidJS and trying to wrap my head around overall project setup/dev workflow. I'm curious to know if there are any agreed upon conventions of project scaffolding, composition patterns, and overall best practices for both Solid & Solid Start. Most information seems geared towards developers in or coming from React but I've been stuck in a bespoke JS framework for 6+ years. I don't have a frame of reference to the popular libraries out there so I'm just trying to fill in some knowledge gags. (e.g. usage of JSX-- thought it was tied to React only, not sure where JSX ends and SolidJSX begins). I would appreciate any input, opinions, recommended reading, watching, etc. The livestreams have been invaluable, and I'm super greatful Ryan takes the time to do those....

Solid Router within Router

Hi I am encountering something weird and can't figure out either what I am doing wrong. I have an initial Router a the App.tsx level like so: `<Router base="/"> <Route path="/" component={StartApp} />...

Shared Layouts with SolidStart

I wondered if its possible to have a shared Layout for the routes / and /pricing but not for /dashboard e.g. I have a navbar I want to show only on that routes....

Confused with SolidStart and context provider

Hello. First of all - complete noob in frontend dev. I have a problem with the context and context providers. I saw some basic tutorial for React and AuthContext - basically a context that contains a login, logout functions and hooks for the user and the user's token. I have adapted it for Solid (somewhat) and tried it in plain SolidJS - it worked fine. So I tried yoinking it to SolidStart with the same idea - wrap my app in an AuthProvider and call a useAuth hook where I need to do stuff with auth. Well the context is always undefined... Again, I am a complete noob and I may be doing things completely wrong. If you can help me or show me another way to solve my issue, I'd appreciate it....

createAsyncResource and <Suspense>

```ts import { createAsync, cache } from "@solidjs/router"; import { For, Suspense } from "solid-js"; import * as edgedb from "edgedb"; import e from "../../dbschema/edgeql-js";...

Save global var in SolidJS

Hi everyone, I m new with SolidJS and I'm trying to make an event handler but I have some difficulty. Is it possible to define a global variable in the client to save a User connection token and reuse it on every component as i want. For now i only know do it by pass it on params of all my components one by one. Does it existe a best way to do that Thanks in advance...

Custom renderer with hyper dom expressions

I've been trying to write my own custom renderer with the solid-js/universal module, but I am failing to understand how I should integrate the renderer into for example a Canvas component. I've studied the solid-three example and solid-universal-renderer-template examples and they seem to use directive in vite.config.js to tell the transpiler somehow to use the other renderer. I'm just using vanilla js so maybe I need to path solid/h in some way to get this to work. At any rate I'd appreciate if someone could tell me this is the right direction to take....

How do I stream search results to client with solid-start?

I’m new to SolidJS so sorry if I’m missing something. I want to use solid start for my project and I’m not sure what’s the best approach to stream search results to client. I’m planning to do auth with server handlers via AuthJS on solid-start.

How Do I Update The createAsync() Signal?

I've been trying to use cache(), load(), and createAsync() because this pattern appears to be the preferred method for fetching data with SolidStart. Unfortunately, I can't figure out how to update the createAsync() signal. When using createStore() you get access to a getter and a setter: ```typescript...

Reactivity of my component

I'm having problems with the reactivity of my component. In this example, the 'currentCplId' variable inside the createEffect is always updated, but outside of it, it is not updated. Why? And how to fix it? Can someone help me? ``` import { pageStore } from '@store/index' const Component = (props) => { const [ cpdId, setCplId ] = createSignal(pageStore.pageSettings.cplId)...

Create route which opens a modal

In SolidStart and using Solid Router, I'm trying to create a route for a modal. Specifically, I want to have a log in link that opens a modal when it is clicked, with whatever page the user was on to remain in the background. I also want the URL to be updated to reflect that the modal is open, which is where the difficulty comes in. How could I accomplish this?...

Comp is not a function when using remarkMath

I have been migrating a static site from solid-start 0.3 and it's mostly working. It has a remarkFrontmatter plugin that I use to grab the frontmatter of posts. To get the post data I use import.meta.glob from vite and all is working again. When putting math into a mdx file, I get the error Comp is not a function. ...

Stop infinite recursion when updating state

I need to update a store using it's previous value inside a createEffect. I am using import { useKeyDownEvent } from "@solid-primitives/keyboard"; to handle keyboard inputs....

Grouping/Combining multiple context providers

Does anyone know how I can group multiple context providers to my <App /> Without nesting a bunch of it?

Solid.js onClick event is not firing when app is in ShadowRoot.

Solid.js onClick event is not firing when app is in ShadowRoot. Registered clicks only to component root, but not the elements inside the app.