SolidJS

S

SolidJS

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

Join

Solid-start + mdx: remark-shiki-twoslash does not work

I tried the current version of solid-start with mdx and attempted to integrate remark-shiki-twoslash (same as the docs), but no luck so far. I do not see syntax highlighting.

How props.children get informed in router.jsx value change ? eg: logined =true,children refresh

```jsx //app.jsx const App = (props) => { const [logined, setLogined] = createSignal(false); return (...

Error while using useNavigate() or <Navigate />

PrivateRoute.tsx ` import { Route, useNavigate } from '@solidjs/router' import Index from '../pages'...

Lowercase props

What is point of lowercase props "tabIndex" vs "tabindex", "onClick" vs "onclick" and etc?

Good library for handling combobox-style search UI? (with Pagefind)

I'm trying to create an Algolia-style interface with Pagefind's search API, but I'm not sure how to handle the arrow navigation in an accessibility-friendly way. I was wondering what the best approach to this would be, and whether I should use an existing SolidJS component library (I don't know which one would work for this), write my own solution (not sure how to do that in an accessible way), or if this is possible with just HTML. I made a GitHub Discussion in the Kobalte repo about potentially using the their combobox component, but looking through their documentation, I don't think that would be supported behavior....

Which Solidjs Router library should we use

There are different libraries for SolidJs Router in different documentations earlier it was " solid-app-router" and later" @solidjs/router", where to use which router, all confusion.

Router with hash integration or hash Router in SolidJS

How to setup has Router or Router with hash integration in new version of SolidJS Router!

“use server”; Is Breaking Everything In My App

I’ve got one post going that touches on this subject of “use server”; breaking my app: A New Way to Chat with Friends & Communities I’ve been working on this for days at this point. If I use “use server”; on its own, it works. If I use client side code on its own, it works. But any time I try to pass data between the client and the server everything breaks. My last comment in the post above uses the example right out of the docs to show the errors. I get a long list of errors. $R reference errors, internal server errors, Uncaught type errors, etc. ...

Help with Transitions (solid-transition-group)

Can someone help me debug why this is not animating? ``` import { createSignal, Show } from 'solid-js' import { Transition } from 'solid-transition-group'...

Failed to build with Vite plugin and Vercel adapter.

Hi all, I'm trying to deploy my app to Vercel. I've had no luck so far (I can see the project files on Vercel's directory listing no matter what I change). I then came across the solid-start-vercel package which provides an adapter for the vite config, hoping it might work. The current vite config is as follows:...

Help with some JSX logic in Typescript on an Advanced Resizing Component

I am working on making a custom resizing component wrapper for my app. I have the resizing logic all working as i would like it to, however i am trying to implement edge handlers so that i can attach the resize event handlers to the edge of a child component. Here is the github gist to my resizer.tsx The following is an example usage:...

Using kobalte ui combobox with asynchronous options

Hi all! I'm new to kobalte and solid in general, so I would appreciate some help here! I'm using solid-ui, which uses kobalte for the Combobox component. I noticed, though, that giving the ComboBox.Root component's options field the result of an asynchronous operation (im using createResource) somewhat breaks the component visually. Here's a snippet of my code to show you what I mean: ```ts export const NetworkInterfaceSelector: Component<NetworkInterfaceSelectorProps> = (props) => {...

How Do I Update Client Signals When Using "use server";

I've set up a Supabase AuthService that tracks the error state with a signal.
export const [supabaseError, setSupabaseError] = createSignal("");
export const [supabaseError, setSupabaseError] = createSignal("");
...

dev or build when using new solid start

since defineConfig doesn't allow passing a callback anymore, how does else can I check whether I'm doing a production build or running a dev server? previously I did this: ```ts import {defineConfig} from "vite" ...

SolidJS Router problem

I am really fed up with setting up the navbar for my test app. Can someone help me to setup Router for my two links say (Home, Link1) in navigation bar. How to set up {Router} and {Route} tags? like I have main <App.jsx> file, then <Nav.jsx> in Component folder, <Home.jsx>, <Link1.jsx> in Pages folder. what should I declare in <index.jsx> and what should with <App.jsx> files. The related tutorial is very confusing, there is no mention about, in which file we should set up the <Router> and <Route> tags. thanks in advance....

Need clarity on eslint(solid/reactivity) warning use-case

I need help understanding how to deal with this ESLint warning when I am building a custom SolidJS hook library that doesn't have any visual components. There is a portion of my custom hook code that gets called out by this warning and I don't know how I should properly resolve it (or if it is safe to ignore it). The code snippet where I receive the warning is the following:...

Help with solid-router

So i'm trying to to use solid router options like useNavigate and useIsRouting but i get the error
Error: Make sure your app is wrapped in a <Router />
Error: Make sure your app is wrapped in a <Router />
idk what i'm doing wrong i followed the readme on github here is my index.jsx ```jsx /* @refresh reload */ import { render } from 'solid-js/web'...

Question about async effects and their underlying reactivity

Hello! I'm learning solid, coming from a react background, and had a question about something mentioned on the docs. One of the considerations listed is that "This approach only tracks synchronously. If you have a setTimeout or use an async function in your Effect the code that executes async after the fact won't be tracked." I was wondering why this is the case behind the scenes? Just because its a setTimeout or async function in the effect, it still is calling the primitives that manages all of the reactivity, so why wouldnt the code that runs async follow the same typical reactive behavior / wouldn’t be tracked? Thanks!...

How to wait for the value from a useAction?

I am using useAction with a server action, but when I call the action it is returning a Promise, how do I wait for the Promise and display the result?

How to create effect for each element of mapArray?

Hello, I'm exploring reactive patterns, and I'm stumped on how to create effects for elements of the result of mapArray. What I've got so far: ...