SolidJS

S

SolidJS

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

Join

Tanstack Query+Virtual Suspense reactivity

I am having problems with suspense and query+virtual, using it without virtual works fine though. Just comment out suspense to see that it works afterwards https://stackblitz.com/edit/solidjs-templates-ztdgo1...

How to make setStore treat a class/interface as an opaque value instead of a partiable one?

So, I'm currently using a UOM library called @buge/ts-units. It has this interface called Quantity that I want to use in my stores. For example: ```ts type Rectangle = { // Length is an instance of Quanity // Length = Quantity<...>...

Reactive array transformation

What is the correct way to make the result of a filtering+mapping operation on an array reactive? ``` return store.productTreeData .filter(e => e.parentId == parentId) .map(e => {...

Display HTML entity

How can I display a text containing HTML entities? <div>{props.text}</div> displays the source code version of the entity. Thanks....

server function error handling

Is there any error handling in server functions? Because if an RPC gets called and throws an error, it gets stringified and returned with a 200 status code. ```tsx export const serverFnCommentAdd = query( async (args: typeof commentInsertSchema.static) => {...

Re: Reset a store to its initial value, doesn't react

Hi, I'm trying to reset a store to its initial value, but when I do so the state doesn't react. The only way I can make it to work is to set each property of the store manually. ```tsx...

exporting css from solid-lib-starter

I am using solid-lib-starter as a template to build a library which exports components and one .css file. I can see it being present in the dist directory, but when I am using the library, vite says it cannot find that specificier for .css. Anyone knows how to handle this?...

CreateEffect and store properties

I have a store with a property xyz that is of type undefined | { a: number, b: number} and I ran into something I don't quite understand with createEffect. I pass store.xyz to a component as a prop and on changing the value, this triggers: ``` createEffect(() => {...

How to make use of <Suspense>

I have some code that I think might benefit from the Suspense component. I understand that for suspense to work the actual component being rendered needs to be asynchronous, but I don't understand how I can make the OsFolderCard async as the get_os_folders function returns all of them at once. If someone could explain how I could do that, or if it's even beneficial or not bcz of the way I fetch my data ```tsx export default function Dashboard() {...

`classList` does not seem to apply the classes on render

Here a reduced reproduction of the issue: https://playground.solidjs.com/anonymous/ba014c69-d95a-4e45-91cd-f95af6293f37 The issue: present should be underline. only when you click on past then present, then the classList is correctly applied ...

Reactivity with shadcn-solid textfield

I created my own NumberInput using https://shadcn-solid.com/docs/components/textfield. I see they have a number field, but I wanted the more typical html number input. My implementation has 4 number inputs that are clamped based on min/max values. I'm testing by manually typing -1 in the field. Technically a 1 and then I'm adding a - to it since it won't input otherwise. The clamp works for 2 of the inputs, but fails for the other 2. It seems to be losing the reactivity somehow. I've tried adding createMemo around the value to ensure the reactivity is present although I don't believe that shouldn't be necessary since I'm passing the accessor. I might see about creating a minimal example for this, but for now here's the code for the NumberInput and the implementation using is. ...

Bootstrap event handlers using on:* directive

I'm trying to handle the bootstrap dropdown events using the on:* directive. ```tsx <div class="dropdown"> <button...

Create resource TS types fail when using `{ refetching }`

When creating a resource, ```ts const [value, { refetch }] = createResource( source, ...

solid-motionone/@solid-primitives/transition-group - onMount/createEffects called before add to DOM

I have a <Presence exitBeforeEnter> which is using a keyed <Show> to toggle between two components with a transition in between - however the component that comes in to replace the original component is mounted in a solid.js sense before the elements are actuallty on the page - can I check for when the elements are in DOM? A hook of some kind maybe? Cheers!

How to avoid temporary undefined values in template literals in solid-meta?

In the browser the whole string gets displayed, but the data.name is undefined momentarily until the async data resolves. So the tab title goes from This -> undefined <- is undefined temporarily to This -> hello world <- is undefined temporarily. My intended behavior is that the title should not be displayed at all (or the hostname should be display) until everything in the string literal has resolved. Is there a way to not display the string at all until the data is resolved? Alternatively, is the below code correct - should I be using accessors / derived signals or should be just be using straight string literals (I found this to not be reactive)?...

Solid Start tanstack query prefetch

I want to prefetch data into tanstack query server side only, if I do like this I can still see the request in network tab I am comming from nextjs react server components where you can use HydrationBoundary and have the data load server side only, I just dont understand how to do it in solid start ```tsx import { RouteDefinition } from "@solidjs/router";...

[h3] [unhandled] TypeError [ERR_INVALID_CHAR]: Invalid character in header content ["X-Error"]

For some reason in dev mode i cannot throw errors in server functions. After build it work as expected. For some reason i get this error always, but i cannot find anyone with same problem

Should I use reconcile everytime I use produce?

So when creating a store, I can use produce utility to work with draft state and this then returns the new immutable state. So when that store is update using setStore, does it update it completelty? Do I need to use reconcile?

Vinci build API issue

I think I found a quite critical bug, or I did something wrong. Can someone maybe take a look and correct me? Or is this a vinxi or h3 or some other issue: https://github.com/solidjs/solid-start/issues/1664 Silent changing of compiled code can have bad effects...

<Show> not tracking signals

For some reason when I use another signal inside of Show's callback, it does not track that signal. When I don't use Show's callback, everything works fine. https://playground.solidjs.com/anonymous/9581e103-9f05-4744-ba92-f285dc89d19f...