SolidJS

S

SolidJS

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

Join

Looping onMount

Hey, I currently try to create an userscript and wanna use SolidJS, does anyone know why onMount keeps getting called and why productElems stays null? ``` const { default: html } = await import("https://esm.sh/[email protected]/html"); const { render } = await import("https://esm.sh/[email protected]/web"); const { onCleanup, createSignal, createEffect, createMemo, onMount, Show } = await import("https://esm.sh/[email protected]");...

Can't use `bun run vinxi dev` as a result of a hang, node infinitely increases in CPU and RAM usage

I try to run it, and it simply doesn't work. Building and then serving does work though

Derrived Signal With A Ressource

Hi! That might be an easy one. I get a resource from a Context called userData. What is the proper way to derrive further signals or just values from it? The following example doesn´t seem correct and I think it smells. ...

failed to resolve import

Hey, i'm facing something very strange, i install my pandacss and modify the tsconfig.json to add an "alias" so i can type @panda/css ... and use the functions but i receive the error Failed to resolve import ....Does the file exist? "paths": { "~/": ["./src/"], "@/": ["./drizzle/"], "@panda/": ["./styled-system/"]...

Trying to understand stores in a reactive scope

I've started rewriting my code to use stores instead of lots of signals, and I'm not sure if I understand how they work when passed into a reactive context. This is my store: ```ts export type ExplorerState = { clips: ClipTreeItem[];...

createRoot with libraries?

I have a very strange behaviour that I can't really explain. I've been building a library in which is a plugin to the rete (retejs.org) library, as part of this I have to manage component lifecycle for which I use createRoot. The strange thing is, that createRoot prevents Components from inside the library to trigger "computation created outside a 'createRoot'..." but it doesn't prevent the same if I create a child component outside the library in main code. So if I have something like the following that gets created under a createRoot call: ...

useContext returns undefined

Hi there! I am making a game launcher wich looks like an OS in frutiger aero style with Solid JS. I have a ContextProvider wrapping my whole app like so: ```ts render( () => (...
No description

Duplicate `<link rel="canonical">` in SolidStart

In my SolidStart project, I have the following code:
```tsx <Title>Home | Example</Title> <Link rel="canonical" href="https://www.example.com/" />...

Hydration error when using <Show> in SolidStart

I am new to SolidStart, I see this talked about in several places but I fail to understand how any of the mentioned solutions applies to my case. I am trying to conditionally render something using <Show>: ```tsx export function Footer() {...

Solid Router: save page state inside useBeforeLeave

Hello everyone I have a case when I want to save some of the page state inside history to be able to access it if user goes back at some point. I see useLocation router primitive, but the .state there is something passed frim useNavigate. In my case I want to save this state inside useBeforeLeave. I know I can just use history.replaceState browser API, but the problem is I need to use either standard Router, or MemoryRouter, depending on platform the app is running at, so I would love to stick to solid-only api...

Socket IO Errors

In the uploaded file is my socket.io error

Stuck on a simple router setup

I'm learning how to use Solid Router by stepping through the docs in order. My goal is to build something like this: ``` <nav> <a href="/">Home</a>...

createResource

I'm trying to be able to reuse functions for API calls, like how it's done with React Query, but the value of data.isLoading loses reactivity when I use it in my component. ```jsx /// function export function useGetUserById(id: string) {...

multiple options for auto import

I have annoying issue with my IDEs, that I get multiple import suggestions so there is no quick way to apply auto import. Maybe someone has quick idea how to fix it? There is one correct import from "solid-js" and other from "solid-js/types...".
No description

Why do I end up with a server-fns for a number input component?

I noticed in the build log these lines (see attachment). I do not understand why I have the InputNumber component in the server fns assets: .vinxi/build/server-fns/_server/number-input.mjs 0.90 kB ...

Is there away to pass all variable to all children components

I want to do simple i18n: ```ts // i18n.ts file export default {...

Mixing async and signals

I have a -probably stipid- question: can I create a createAsyncMemo function? and how would I go about that? I am looking for a memo that can handle async browser api's. I thought that I could just use createAsync for this. however since it seems to be tied to the page's state I get a flickering page because the source signal I use has an internal use of createPolled. So in that train of thought I think the next logical step is to basically make a createAsync that is not tied to the router. But I am not having much luck, likely due to my limited knowledge in regards to signals. For some more concrete context, I have a function that I feed an Accessor<FileSystemDirectoryHandle> and this returns me a signal of all the .json files in that directory. Interally I also poll the files' lastModified so that my output signal is updated every time a file is CRUD'ed outside of my app. Next, and this is my problem code, I want to consume this file-list-signal. The file API's are however all async, and I often have trouble mixing async and signals. So guessing this is all due to a lack of knowledge on my part, how would I go about mixing async and signals best?...

Solid-Meta on dynamic SSR routes

I am trying to set dynamically set metadata for Slack/X preview cards. ```js const getVideo = query(async (videoId) => { "use server";...

How to extract common reactive code?

I have some common code that I want to use in multiple components, like: ```tsx const [currentTime, setCurrentTime] = createSignal(getCurrentTimeMinutePrecision()) let timer: NodeJS.Timer...

How to integrate Apollo Client into Solid Start with SSR?

I got Apollo working fine with my own custom functions/provider (solid-apollo hasn't been touched in 3 years and the author has made no attempt to fix anything, and I don't believe it supported reactivity in the variables anyways, so variables needs to be a function call in createQuery), but I'm having trouble getting it to properly work with SSR. The client on the server doesn't talk to the client on the browser and I was trying to go through the server rendering docs https://www.apollographql....
No description