SolidJS

S

SolidJS

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

Join

How do you use rewrite in production?

Hello, I have a simple solid start app. It has a backend server written using nestjs. I was using vite proxy to rewrite /api routes to the backend url. Pushed the app to production today in digital ocean. ...

modern equivalent of `createRouteData()`

I'm in a solid start project and am looking for the modern equivalent of createRouteData(). I used to be able to use it have data that was refetched after a form was submitted. the closest modern equivalent I can find is cache() and createAsync() but that is very overkill and has an annoying (in this use case) feature where it caches for 1 second which means if a user is rapidly clicking a button which is rapidly submitting a form, changes can only be observed once a second rather than as soon as the user clicked. Thanks....

Force rerender of entire component on prop change

I have a component that takes some data that is derived by keying into a large data object and the key is from useParams. When this data is passed into the component, some derived signals are created etc .. and I think some not neceassarily reactive objects are created. But I think details dont matter much, I can often work around with some effects to reset certain things on prop changes. But in cases like these, just wondering if there is a way to instruct a rerender of that branch, I tried using dynamic but since it still renders the same component with different props it maintains whatever was there. ...

prevent portal from bubbling events

is there any way to prevent this? I have the following ```jsx...
No description

Push params to url without page scrolling to top

I have a route that looks like this:
<Route path="/:page_type?/:page_url?" component={Page} />
<Route path="/:page_type?/:page_url?" component={Page} />
When page_type and page_url is available, a popup appears. But when the url changes, the page scrolls to the top. How do I avoid that? I've tried:...

Console.log inside createEffect not printing...Even the setUser was called.

```import { createEffect, createSignal, onMount } from "solid-js"; import { useSession } from "vinxi/http"; function getSession() { return useSession({...

Keep client bundle small

Hi all, I'm new to Solid and SolidStart, but I'm building a library with support for SolidStart, and I want to be sure that I get the sample right. In a nutshell, my library (https://content-collections.dev) collects markdown, YAML, and JSON files and turns them into JavaScript arrays that can be imported anywhere. However, the problem with that approach is that the created array could be very large, especially for apps with many markdown files. So, I want to ensure that only the required content is loaded. After looking at the SolidStart documentation, I found that I can use cache/"use server"/createAsync to load only the required data from the server. ```tsx...

Template doesn't react to property change in store of array of objects

Using either of the 2 methods, when I log the users store, I see that the name of the user has changed in the store object. However, the template doesn't update/react to the new name. Why is that? ```jsx // user: { name: string } ...

hydration mismatch when using SuspenseList

Hi, all. When using SuspenseList in solidstart i ran into this error: ``` Hydration Mismatch. Unable to find DOM nodes for hydration key: 000000000010001000000300003...
No description

solid func for beforeunload

I have some user data which I want to save before tab is closed. Using onCleanup() doesn't save the data. I had to write this, but wondering if solid provides something similar...

(!) Failed to retrieve local session state from cookies after a successful session refresh

When I call hello, this exception pops up: Failed to retrieve local session state from cookies after a successful session refresh. This indicates a configuration error or that the browser is preventing cookie writes..
No description

SolidJS renderToString with Hono: Undefined or 'React not defined' error

Hi everyone, I'm trying to use SolidJS's renderToString function within a Hono server to generate SVG components, but I'm running into issues. The renderToString call always returns undefined, or I get a "React is not defined" error (if I change tsconfig.json to "jsxImportSource": "solid-js"). Has anyone successfully integrated SolidJS's JSX rendering with Hono or has ideas how to do so? If so, could you share how you resolved the JSX compilation for SolidJS? Thanks 🙂 ...

Client Only - Local Storage

I created a global store that's backed by window.localstorage. I don't think that I can use clientOnly because the module doesn't export an Element. What do I do? ```TSX import { createEffect } from "solid-js"; import { createStore } from "solid-js/store";...

Prevent re-rendering many components when object in store-array is updated

I have a grid view where multiple card components are rendered. The issue is that all cards are re-rendered when one of the cards' data is updated in the store. Is there a way to prevent re-rendering everything when one object in the array is modified? This is how the card is modified:...

Reset signals when prop value changes

How can I reset the showFront state of Card when Card's props.data changes? ```ts type CardProps = { data: Card...

Abort server function

I want to allow users to upload image in preview stage, then I have a button where they can decide if they want to upload the image to server then s3, But when user decides to upload the image to server and clicks a "upload" button, "Cancel" button appears. What I want to achieve is when user clicks "Cancel" button I want to abort the server function execution....

Animate page transition

I am trying to animate route changes with Motion One. However, I seem to not get the overall logic of Solid Router since no route is shown at all in my MWE: ```Typescript import {render} from 'solid-js/web'; import {A, Route, Router} from '@solidjs/router'; import {Motion} from 'solid-motionone';...

"use server"; RPC calls cannot access global objects

I dont have a reproduction rn because stackblitz has no solid start option :/ basically i have a global Map<K,V> (export const mymap = ...)and values are inserted using a server route /api/login.ts and on SSR the value from the map is read correctly. But when i have a server rpc call the map appears empty ```ts...

Issue with nested routes

When navigating to /app-1/items in the following example the Items component is rendered correctly: https://stackblitz.com/edit/solidjs-templates-huocfk?file=src%2FApp.tsx When clicking on Settings in the menu, the Settings component is not rendered. It is rendered when reloading the page though. It seems the nested Router is not notified about the location change. ...

Create one global store with multiple createResource

Hello, I am a beginner programmer developing a small local app with Tauri and SolidStart. In the past, I have already worked on a personal website with Nuxt/Vue/Pinia. The data being exclusively stored on a local sqlite database, I am trying to load all the data from the start of the program execution, and intend to make it available to all components from a store....