SolidJS

S

SolidJS

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

Join

Should custom stores have embedded effects like this?

So lets have I have a custom store to manage updating a value and a debounce version (so that an expensive action can trigger on the debounce value) like this: ```ts import { debounce } from 'lodash'; import { type Accessor, createEffect, createSignal } from 'solid-js'; ...

Web Trading Terminal in SolidJS

This is a continuation of something I posted in the general channel. I'm interested in building a web trading terminal and I really want to use Solid and to use the opportunity to somehow add to the ecosystem in such a way to support others doing the same thing down the road. The following things already exist for use: 1. Solid Lightweight Charts 2. Solid TradingView Widgets ...

New to JS frameworks in general, can Solid do what I'm looking for?

Hello Everyone! tl;dr - Can Solid do client-side JS only? If so, how? ...

solid library with styling

So for like the past 4 days ive been trying to generate a buildable library with css modules or whatever and I just simply cant. Is there any minimal reproducible monorepo with styles? I've scoured everything trying to find something because most of the libraries that are using tsup preset solid dont have css or styling?

How to build SolidStart with relative base URL?

I have a project I created with a SolidStart TypeScript template, which I'd like to build. I would like all links and navigation in the built to be relative. That is because itch.io doesn't host web pages on domain's root, but on a path like '/html/18718715' with the specific number being unknown in advance. Server-side rendering is not necessary: I need static files for itch.io. How can I achieve this? ...

Getting SSG to work nicely

Hey everyone, I'm facing an issue when trying to get SSG working. I am currently using Sanity and want to prerender all the routes to static html. I'm using vercel for production. This is my current setup: app.config.ts...

Dynamic meta - computations outside createRoot warning

Navigating from a blog page ([slug].tsx) to the blog index/list page shows the computations created outside a createRoot or render will never be disposed warning. Here is the snippet of the line referenced from the browser: ```ts...

How the `name` option in `createResource` is used?

The docs says that the name option in createResource is used for "debugging purposes". But it's not clear to me how it's used for debugging. Is it for internal usage only, or it provide a value to the users? This if for the docs @core-team....

No clear answer for "computations created outside a `createRoot` or `render` will never be disposed"

I spent 5+ hours today reading about, running experiments and trying to find out exactly what warning message:
computations created outside a createRoot or render will never be disposed
actually means, but there is no definitive info. I get this message for some global createMemo, as well as expression inside the <Title> component. Global createMemo scenarios...

Can't use binary dependencies in api endpoints

Hi, i'm currently using the "@node-rs/argon2" package in a trpc api being exposed as an endpoint via solidstart, and when I try to build the app, I get the following error:
ERROR [commonjs--resolver] ../../node_modules/.pnpm/@node-rs+argon2-darwin-arm64@2.0.2/node_modules/@node-rs/argon2-darwin-arm64/argon2.darwin-arm64.node (1:0): Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)
ERROR [commonjs--resolver] ../../node_modules/.pnpm/@node-rs+argon2-darwin-arm64@2.0.2/node_modules/@node-rs/argon2-darwin-arm64/argon2.darwin-arm64.node (1:0): Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)
Is there some way I can specify "@node-rs/argon2" as an external dependency to not be bundled, and just manually include it in node_modules in my (node22) docker image?...

Proper methodology for creating UI Component Library for SSR?

I'm looking to create a simple UI componentl ibrary for use in my solid-start projects. In some of the components I'm utilizing client only API for sake of better component functionality (utilizing setTimeout for determining a long press for example). This obviously causes hydration errors in solid-start unless I wrap the component in clientOnly I can't seem to export client only components from my library, as solid-start doesn't seem to recognize them as client only, even though I export them wrapped. I could create a layer in my solid-start application where I import it from the library and wrap them in clientOnly() there, but that feels weird. Is there a "right" way to do something like this? Some industry standard I'm unaware of? Happy to hear all opinions....

classList causes unnecessary re-runs (but createEffect or HTML text in the same spot doesn't)

I found myself in a situation where classList specifically seems to cause unnecessary re-runs. In the following code, createEffect only reruns when fst() changes (I manually examined w.fsts). Similarly, HTML text re-runs only when fst() changes (I only get one render for ${i} for the element, which was updated. Yet, every single change of any element (executionState()[i]) I get classList for ${i} for every single of my tests(). I don't understand why, especially considering that classList and HTML renders are right next to each other. ```tsx <Index each={tests()}>{(t, i) => { console.log('Test render:', i);...

Solid Start on RPi 4 Gives Illegal Instruction

I recently started using Solid Start and am really enjoying the experience, but when I tried to deploy my website to my home server (just a Raspberry Pi 4), both building and running the dev server result in the following crash immediately after printing out vinxi v0.5.8:
zsh: illegal hardware instruction (core dumped) npm run build
zsh: illegal hardware instruction (core dumped) npm run build
...

Change `query` cache lifetime

Is there any way to change the cache lifetime of a query in Solid? I am trying to speculatively preload page data, but the preload operation is often >5 seconds before the page might actually be loaded, meaning the query cache expires.

Solved: Vinxi `getRequestURL` forces SRR even when wrapped in `isServer` / `import.meta.env.SSR`

```ts import { isServer } from "solid-js/web"; import { createForm, Field, Form } from '@formisch/solid'; import { getRequestURL } from "vinxi/http"; ...

Using 'createMemo' inside JSX (to render things which are only available in sections of UI)

I am trying to figure out how to createMemo for information, which is only relevant to some sections of the UI (which are rendered conditionally). Top-level (typical) createMemo will crash because the data based on which I'd like to compute it is not available in the entire component (but it is guaranteed to be available for some sections when those sections pass conditional rendering). Self-contained example Gist: in case array() is not null, we'd like to display UI about it, which includes its sum in two different places. Challenge is to do it without double-computation and code-duplication....

Properties not reactive with dynamic

I have this code (in brief). ``` const elementProps = createMemo(() => { return {...

js_jsx-runtime.js?v=848ce2cb' does not provide an export named 'Fragment'

I built a component lib and bundling it with tsdown, this is my config. ```js import { defineConfig } from "tsdown"; ...
No description

Understanding action return values

My understanding is that actions that don't return any value are automatically cleared. When I look at the code, it seems that when an action returns a falsey value, it should also be automatically cleared. However, I don't see this happening in practice. Consider the following code: ```tsx import { query,...

Looking for a way to build a library components with Solid + Vite

I'm looking for a way to reuse SolidJs components in different projects. Currently the starter template of Vite only offer a website solution. In Vite, it has library mode, but it doesn't seem like an ideal solution for multiple entries. Let's say 50 entries should be enough to think about an automatic solution right? (Moreover, the rollupOptions config part confuse me badly) So I hope that you guys could show me a easier way or share me any repo already did it so I can learn from them. It doesn't have to stick with Vite all the time (but I appreciate the Vite dev mode though) Thanks in advance...
Next