SolidJS

S

SolidJS

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

Join

API route in Route Group not picked up?

Migrating to RC1 caused my API routes in Route Groups (https://start.solidjs.com/core-concepts/routing#route-groups) to stop working? For a minimal repro, do a npm init solid@latest and create the file apiget.ts ```JSX export function GET() { return new Response('Hello World');...

computations created outside a `createRoot` or `render` will never be disposed

Escaping reactivity contexts is presumably usually because of async operations. Well, I create this effect inside an event handler. My component is attached to a specific part of the DOM, creating a small island of reactivity. However the event in question is a keydown event attached to the document. ```...

"AsyncLocalStorage" is not exported by "__vite-browser-external"

Installed the rc1, moved my code over, fixed up the issues coming from the v.3 release, npm run build dies with ../node_modules/vinxi/runtime/http.js (70:9): "AsyncLocalStorage" is not exported by "__vite-browser-external", imported by "../node_modules/vinxi/runtime/http.js" Any suggestions on how to fix it up? Using node v20.12.2...
No description

About tracking re-renders and Store usage

Hey there folks, how would one go about tracking the reasons of a re-render? Is there anything similar to React's why-did-you-render? 1) There's a bug in my app that re-renders the whole application (like does a full refresh / remounts the page) when a store field changes. I just cannot get to the bottom of it. What would you do about this? 2) My main suspect is my global Store instance which is outside the component hierarchy. I just declared it as a global export in a module. The thing is it works perfectly well in most cases except this one field - when I modify that field the whole app is weirdly reloaded. Is it fine to use Store/Signal instances declared globally outside the component hierarchy like that or should I just stick it inside a Context and inject that into my component tree?...

Get the request header inside a form action? For Solid Start

Let's say I have a login action and I first want to check if the user is already logged in, and if their session is already there (in the db). I want to do something conditionally for that.
No description

“Push synchronization to the edge of the reactive graph”

TL;DR: Is this a thing? In the Clojure community there was a saying: “Push your impure functions to the edge of the system”...

Router preload and cache.set don't seem to be working

I've got an app that uses a HashRouter, and a couple of routes. The first route is a search page for events, which loads up suggested events for the user and has a form for custom searches, and then displays a list of events, and each list item is wrapped in an A component, pointed at the second route. The second route has a param for event id, and contains methods for interacting with events, as well as an A component linking back to the search page. Following the docs, I've written a file that exports API call functions to get the list of suggested events and the data for each event, which are wrapped in the cache method. In the top level component, where the router lives, I'm importing both API methods and wrapping them in functions that pass the relevant param to each method, which then becomes the load prop for the route. Within each route, I'm importing the relevant API method and wrapping createAsync around it to create a reactive signal for the API data. I can tell it's working, because I'm seeing the right data and page loads are instant after the initial load. However, preloads don't appear to be being triggered. The functions don't actually run when I hover over links. Also, the intent parameter is set to "native", not "navigate" when I click on an A component, which isn't what the docs say....

Is this (completely 🫣) illegal in Solid world?

what is the best primitives/library to use when dealing with deep nested structure? the data I'm dealing with looks like a graph with nodes and leaves. every nodes/leaves has a component that should update his data that should stay reactive. pretty hard to explain the context 😅 ...

Calling root render multiple times

In React, if you call render on the same root more than once (e.g. root.render(<App someProp={43}/>), React will update the DOM as necessary to reflect the latest JSX you passed. Calling render on the same root again is similar to calling the set function on the root component. What's the suggested way to achieve a similar behavior using solid render(() => <App />, document.getElementById("app"));?...

Vite 5.2.x / Vitest 1.5.x: How to Resolve Multiple Instances of Solid

I am nearing my wits end trying to resolve these error messages I receive when trying to run my SolidJS tests with @solidjs/testing-library and vitest ``` stderr | file:~/Developer/github/.../nm/node_modules/solid-js/dist/dev.js:1932:13 You appear to have multiple instances of Solid. This can lead to unexpected behavior....

When to use createEffect

I have a signal that depends on another signal. My todos signal is depended on my user signal. When there is a user, I want to subscribe to the todos collection, and when there isn't I want to unsubscribe. When there is again (login), I want to resubscribe (user could change too). Should I use createEffect for this? I thought you shouldn't set a signal inside a signal though? Here is my code: ```ts export function useTodos() { const _user = useUser();...

Force effect computation, or alternate approach?

I'm trying to write my own force directed graph, I am able to display nodes and links just fine with a random initial coordinate. I also have a simple function that calculates the next positions for the nodes. However I need to call that function at a rather high rate. When I put it inside of an interval, nothing gets updated. I'm pobbably missing something here. ...

How to update a table of textfields? (stop re-rendering when users type)

So, I essentially have a : ```ts const [values, setValues] = createSignal<{a: string, b: string}[] | undefined>([]); ...

direct Access to pages resulting in 404 error

i'm encountering a situation where accessing pages directly via their URLs leads to a 404 error, but navigating to them after loading the main website doesn't produce any errors. could someone help me troubleshoot this issue? it seems to be related to routing. thank you!

Does the createMemo() in the "Solid in 100 secs" vid make sense?

Hi - I just stumbled upon Solid, and the two introductory vids really made me curious, coming from React. I just wonder if the createMemo() usage in the video makes sense, assuming computation was really heavy. Because I would think that squared only gets recomputed when its dependencies - count in this case - change. Here's the code: ``` function Counter() {...

How do i make a dropdown menu?

This is what I/ChatGpt currently have come up with, but the handleClickOutside function doesnt work. I didnt find any docs/examples online. https://github.com/raphaelladinig/musikbezirk-silz/blob/master/src/components/dropdown.tsx...

getRequestEvent not return the correct type in monorepo

I need a package that shared between apps. I add solid-js and @solidjs/start as peerDependencies in the package.json of the package. When I do import { getRequestEvent } from "solid-js/web";, it only returns the type from solid-js/web not the declare module in the solid/start. How can I fix this? Thanks.

What's the correct way to make store persistent?

I am making some sort of widget manager and i have no control over how many options/ styles will the widget have so the store can reach size of around 30KB and more. I am making the store persistent using solid-primitive but I am not sure if it is right approach since there is no option for debouncing and for example when i am dragging the widget, the store updates => the widget's jsx updates, but the whole store is stored in localstorage without debounce. I am not sure if i should make separate store for each widget and also add createEffect that would somehow debounce the change to main store or maybe make them each a separate persistent stores? Or is the store not that big and I don't have to worry about it?...

Why can't I change the path alias "~/*" to "@/*" in the tsconfig.json?

Using @/* would be easier on my keyboard. After changing it the imports work correctly in VS Code typescript, but when I run the app it complains that modules are not found. Trying to change the alias to anything else other than ~/* (eg. src/*) also doesn't work. Do I need to change it somewhere else to make it work for runtime?...

Does SolidStart support private folders in the routes directory?

Like described here: https://nextjs.org/docs/app/building-your-application/routing/colocation#project-organization-features Otherwise, is there a way to organize the components used for a route in a subfolder of the folder the route is in? Or is there any way to opt out a file or folder in the routes directory from the routing system?...