SolidJS

S

SolidJS

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

Join

how do i use Drizzle?

I'm trying to use Drizzle db on the server only and its giving me "Uncaught TypeError: promisify is not a function" in the browser. ```ts import { cache, createAsync } from "@solidjs/router"; import { db } from "~/lib/db";...

Problems changing the value of a reactive signal returned from a function

I was testing what would happen if I changed the entire value of the board, not the squares but the entire board, in case at some point I want to change the board. And I saw that if I change the value of the board, the anonymous function "loadBoard.get("chess_standard_8x8")();" is executed again. But I don't understand why this happens or how to solve it.

OptionalParams in route not working

I'm not getting the expected result using optional params - routes -- users ---- [[id]].tsx...

Reactivity resulting from updates in a websocket event listener

I am struggling to understand why setting a signal in an event listener is not driving re-rendering for the signal. In the code below I observe reactivity for count2 (that is set in the setInterval callback), but not for count (that is set when a message is received on the websocket). I can see from the console.log in the message event handler that the values passed to setCount are changing. So my expectation is that the rendered value should change. I don't doubt that the reason for this is covered somewhere in the docs. I suspect that I'm simply misreading or misunderstanding something....

How do i conditionally add something to <head> based on what createAsync returns?

I need to wait for a resource coming from createAsync so then i can decide whether i should add google recaptcha to <head> using useHead from @solidjs/meta ```ts const getChat = cache(async () => { return { messages: [{ text: "hi", author: "me" }] }; }, "chat");...

How do you delete an entry in an array when using `createStore`

In the following documentation, this case is not presented: https://docs.solidjs.com/guides/complex-state-management It could be trivial but I'm unsure of the right way for doing that 🙏...

Uncaught ReferenceError: React is not defined

Hey there! Please help. I can't figure out this error. I have a tiny solid-js project that works ok. I wanted to reuse some code and created this npm package(https://www.npmjs.com/package/@illlia/solid-css-styled?activeTab=code) (1 file basically). In essence I replace my inside project code with a 1:1 replica from that npm package. All npm package does is creates "tailwind-styled" utility that works like solid-styled-components, but uses tailwind classes. Anyway, that function returns <Dynamic ... > solid-js component. When i try to use code from that npm package in my solid-js project I get ...

What do I do if I have to wait for things to happen, meanwhile define extra state or what

this piece of code come up as crucial functionality all over the place for me, for an interactive application of solidjs ```ts createEffect(on(uci, uci => {...

Vinxi build failing in CI

Hi, I wanted to use SolidStart for my project and the website builds fine locally, but in GItHub actions, the job is failing.
Error: [vite:load-fallback] Could not load /home/runner/work/website-broken-ci/website-broken-ci/website/src/app.tsx (imported by node_modules/.pnpm/@solidjs+start@1.0.0-rc.1_solid-js@1.8.17_vinxi@0.3.11_vite@5.2.11/node_modules/@solidjs/start/dist/server/StartServer.jsx): ENOENT: no such file or directory, open '/home/runner/work/website-broken-ci/website-broken-ci/website/src/app.tsx'
https://github.com/alven-shin/website-broken-ci/actions/runs/9149884716/job/25154004092 ...

Reactivity in single table cell from memoized data

[Moving from this thread (https://discord.com/channels/722131463138705510/1241054227485425734/1241622154437726360) since this is a separate question] Question: How do I do some transformation/aggregation on store data before displaying it in a tabular format, when I want only a single cell to update? For example, in https://stackblitz.com/edit/solidjs-templates-inkran?file=src%2FApp.tsx , I aggregate over each of the keys. With a createMemo and some use of prev, I can get just a single row to update, but would ideally just update a single cell. (My understanding is that in this case, because createMemo returns a Signal (not a Store), there isn't a good way to listen for nested values, but I'm not sure about that...)...

Insights on my component library

Hello, i'm building my own component library to fit my project needs. I'm having a bit of a problem with state management Do anyone have a better way to work with state other than using Provider? On this particular component im using a signal state to know if its open or not. And i must wrap it into a provider or else when i have two or more dropdown they share state, but passing a provider makes the overall api feels clunky. Any improvements suggestions?...

Assistance with SolidStart and Supabase Auth in SSR

I am currently trying to piece together exactly how to setup SolidStart with the @supabase/ssr package. The Supabase package expects: ```ts import { createBrowserClient, createServerClient, type CookieOptions } from '@supabase/ssr'...

Why is solid start dev site so heavy?

I ran pnpm create solid, picked the basic template, then ran dev to encounter almost 10mb of js being loaded. I'm aware that building will minify, bundle and tree shake most of this, but building takes almost 6 seconds to build an empty app, even when building after a succesful build. Something as equally confusing is that the heaviest resource is 1.5mb of shikiji, a syntax highlighter. I found this issue, maybe related? https://github.com/solidjs/solid-start/issues/1281...

<Show /> vs React-style conditional rendering.

I'm trying to implement a long conditional rendeirng statement in React into Show. It ends up pretty buggy. I just copied the React conditional statement and it seems to just work no problem. Are there any disadvantages to this? By the way this solid port project is @wobsoriano 's port of Sonner....

Reactivity in single cell in nested For tags

I have a large-ish (~20x20) table with cells that update very regularly. When only a single cell value changes, I would like to update only that cell, not all the cells in the row. I'm currently implementing this with nested For loops, but it seems like the inner loop always re-renders (which makes sense because the For children function gets called). Simplified example here: https://stackblitz.com/edit/solidjs-templates-jebc3v?file=src%2FApp.tsx I'm assuming there's a straightforward way to do this, but I can't see anything in the support section, docs, or github issues. Thanks for any help!...

Filter and <For each />

Just a question, is there anything wrong with using .filter with For each={} /> Like: ...

Is it possible to have a nextjs-style app router?

... where (inside app/) route.ts are API calls and page.ts are pages. Is the intention to not move in that direction to clearly separate API code from client side code?...

Potential upstream problem in solid for users of Astro + solid + cloudflare?

Summary: The lastest versions of Astro, their cloudflare adapters, and solid-js are breaking buildings during hydration, and then when a component uses onMount. Here are the referenced issues. https://github.com/withastro/adapters/issues/224 and then https://github.com/withastro/adapters/issues/263. Both have minimal reproductions attached.
I'm not sure who might be helpful to ping on any of this, and I tried to look around for any related issues in this discord, but wasn't sure. Can someone from the solid team perhaps weigh in on these issues? Specifically, you'll see https://github.com/withastro/adapters/issues/263#issuecomment-2117106206, with suggests this might be the upstream issue?...

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/>...