SolidJS

S

SolidJS

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

Join

Nesting server side functions in namespaces or any kind of block of code.

Is there any way to make nested server functions for example I would like to have an namespace called Users and then I could use .all() or .query() server-side function. It would make my code much cleaner after all. I tried to implement the namespaces like so: Library database code src/lib/db.ts...

How to test for is loaded for a create async source change

In the real world example there are these methods that loads some async data: ```tsx loadArticles(predicate) { setArticleSource(["articles", predicate]);...

Error in production only: <A> and 'use' router primitives can be only used inside a Route.

This is really weird one. Using vite + SolidJS on the latest versions. The error occurs only when serving a production build. Dev works fine. I've been banging my head on a wall trying to figure this out. Any debugging ideas? It's in a very complex app so somewhat hard to debug by elimination or reproduction although I will attempt a repro today. Possibly helpful to say production builds were working on my local machine but showed this error when deployed after being build in Docker. Seeing this, I rm -rfed node_modules and reinstalled, which made my local behavior match the deployed (showing this context error)....

Why is this store change doesn't trigger a reactive computation

It looks like this: ```tsx // Reactive state store that can update UI const [state, setState] = createStore<StoreState>({ current: { state: 'boot' },...

Making a custom graph reactive

I am building a custom rendering graph which then gets serialized and rebuilt in a web worker. I would like to keep the graph logic as decoupled from Solid as possible so I could easily reuse it outside of SolidJS. The graph is composed of nodes which have some options that can be changed. I'm using SolidJS for rendering a UI for these options so that they can be passed to the rendering graph later. The graph itself already has an internal update function that can be bubbled up. Basically what I want to achieve is that whenever a graph node is changed (usually through the solid component), the component triggers a full rerender of the control component. I know I'm losing fine grained reactivity here, but that's fine for my usecase. Does anyone have any ideas on how to achieve that? Here's some pseudocode to make it clearer (don't worry about any errors here) ```ts...

Spooky behaviour while deploying in production

Hi everyone, I'm having a hard time to deploy solid start. I'm using docker on a VPS, and from one deployment to another, the bundled assets are sometimes corrupted. I noticed two strange behaviours so far: 1. Some bundled assets seems incomplete...

beta docs for solid-start 0.3.11

Where is the github source code for solid-start 0.3.11 [beta]?

can't setup a basic state machine interactive quiz type of game

I am trying to make a quiz application. It has several states, like first it has to load the list of questions, then it has to load data for a specific question at play, it has to select the next question to play at random. It also displays previous solved attempts, when they are clicked, it has to display that specific question, and when the question list is empty display an empty message. This kind of app. I quickly learned createEffect is evil. But also I am trying to juggle how the state eff...

Hydration Mismatch + any client logic don't work

Hey everyone! I'm doing using Solid-Start and face with some problems Firstly, I have a hydration error in usual component like this:...
No description

how to trigger <Suspense> on revalidate?

in tanstack query, you can use resetQueries to do that, what is the solid router equivalent of that?

What's the right way to conditionally import based on whether code is running on the client?

I've got some code that uses playwright. This won't work on the client. It's abstracted into a service (with effect-ts) so I could easily provide a separate implementation that would be client friendly. What's the beset way to conditionally import based on whether code is running client side or server side?

I need to run an effect when an async signal or a store signal, or another async signal are equal

```tsx import { createEffect, createMemo, createSignal } from 'solid-js'; import { render } from 'solid-js/web'; import { createAsync } from '@solidjs/router' ...

Can't initialize SolidStart

I have problems with initializing project using npm it logs "directory not empty rmdir /{foldername}/.project" while there's nothing in the folder at all, I ran ls -a but nothing odd shows up Above problems happen only when building non typescript project, while with typescript it builds it well...

How do you refresh a non-solid children?

I'm using lexical editor inside one SolidJS component. It is initialised using ref={ref} + onMount(). It works correctly, mounts, unmount cleanups, etc. everything is fine. Now I need to programmatically clear it's content from a global store. I see two solutions:...

Do I still need `/* @refresh reload */` even if I have `"vite-plugin-solid"`?

Hi 👋 This is from npm create vite NOTE: AI said no...

Different routes using different layouts, while doing file based routing please?

For example route /a uses layout ./src/lib/layouts/One.tsx and routes /b and /c use layout /Two.tsx I'd rather not just wrap the layout component in the route b/c then if we swap between pages that use the same layout state is lost Thanks!...

SSG / Partial Hydration

Hello all, I am doing SSG without SolidStart and it works for the most part, but I can't get on click to work on a button. My current flow is:...

Using solid-mdx in an SPA app (without solid-start/vinxi)

solid-mdxin verison 0.0.7 seems to be widely used as it's part of the solid-start mdx template, and also used for the solidjs and kobalte doc. Unfortunately it has no documentation. All these uses cases are for solid-start where the mdx is rendered on the server. My use case for MDX is to show help pages in an SPA page (it needs to stay SPA, there is no option for JS on the server). I have some trouble in this use case. In the solid-start template the "@vinxi/plugin-mdx" is used, which is not applicable for my application using vite directly. Older samples and the doc of the similar package solidjs-mdx seem to suggest to use @mdx-js/rollup instead. I had some success with follwing vite plugin config (but some issues as classNameinstead of classis passed in MDXProvider):...

Lazy loading components work with SSR with solidStart?

Hello all, i'm working on an e-commerce demo, and need to load a grid with data of the products, the problem is that the grid and the content, is based on admin preferences, so i want to load it with lazy loading. We will have like 5 or 6 very complex-different grids, so i don't want to LOAD ALL the options and use a switch or somethig because is just send JS to the client without optimizations. looks like "lazy" api is just for this. to load a component with dynamic import....

resource.error works unexpectedly

Consider this sample: https://playground.solidjs.com/anonymous/095fcbf7-6807-4c6b-ac41-223a5f2fde21 Per docs: data.error: if the request has errored out. createResource: provides an Error object for data.error. It will show even if the fetcher throws something else. If the fetcher throws a string, data.error.message will contain that string. I would expect the div with the error string be rendered to the dom but its not the case...