S
SolidJS
Solid is a declarative reactive Javascript library for creating user interfaces.
Join ServerChannels
SolidJS UI library + Astro
Hey, would anyone happen to have experience using a UI library together with Astro?
I can get it working if I just export some simple components, but if I then add an import to another SolidJS library (eg.
@kobalte/core or @ark-ui/solid to help build my primitives), then I run into:
```
The requested module 'solid-js/web' does not provide an export named 'effect'...Nested Reactivity not working
Hi, i'm trying to figure out why my a particular component (combatdisplay.jsx) of my solidjs project isn't updating when I change a deeply nested property in a store through the deployCard function in my stores class (context.jsx). What's weird is that all the other components in my project that also react to nested properties works without issue, so I am very confused as to why it is not working for this particular component
When debugging myself, I found that the backend data updating code looks to be right, as it does update values in the store correctly so I don't believe there's anything wrong with that. Simply put, the component just doesn't react to updated data. I've also rewritten the deployCard functions two different ways (one with and without using produce), but the component still doesn't update.
Here is a github repo for all the code...
createMemo with `{equals: false}` not reactive
I am wondering if this is a bug or not:
```tsx
function Counter() {
const [count, setCount] = createSignal(1);...
Using a function outside of components
Hi all, I've come across an interesting situation. I am currently doing a project using SolidJS. I have a hook (hello React) that handles authentication:
```js
import { createSignal } from "solid-js";
...
Make sure your app is wrapped in a <Router />
I have a mini app which contains its own route path something like below . This root component is exported out and is being used in main app as a package dependency. Below is the usage
mini-app code
``` <Route path="/path1" component={MainLayout}>
<Route path="/" element={<Navigate href='/home'/>}/>...
TypeScript type for classes that extend class
This Stack Overflow question is what I'm asking, but none of the answers provide intellisense for the function argument: https://stackoverflow.com/questions/76913841/generic-type-to-specify-a-class-which-extends-another
I'd like to be able to do something like:
```ts
// These class would be accepted:...
Store item = undefined, causes typescript error
items[item.id] = undefined
items[item.id] = undefined
My first solid component
Just wrote my first component. I only wrote React before so I wanted to know if there are better ways to do things than what I figured out so far :)
```tsx
import { createBreakpoints } from "@solid-primitives/media";
import { children, For, mergeProps } from "solid-js";
...
How to keep store in sync with supabase's multitab session?
A logged in user's data is stored in store:
```ts
const initialState = {
id: null,
username: null,...
noob question regarding solid-router
Hey guys, I'm running through this tutorial on Solid-JS as I am new to web dev, I got to the video on the solid-router and noted it broke so I ran through the documentation and saw there were changes made recently. I tried figuring it out myself but my page still doesn't render the Home component.
Solid-UI The `border-border` class does not exist.
Recently got started with
...
solid-ui and i love it a lot, however when i add it to projects where i am using daisyui as my styling system (just a wrapper ontop of tailwindcss) i get an error:
The `border-border` class does not exist. If `border-border` is a custom class, make sure it is defined within a `@layer` directive.
The `border-border` class does not exist. If `border-border` is a custom class, make sure it is defined within a `@layer` directive.
How to Inform children of the active status of it's parent <A/>
I'm looking at something like:
```ts
<A href=".." class=".." activeClass="..">
{({ active }) =>
<span classList={{ "my-class": active }}>..</span>...
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. ...