SolidJS

S

SolidJS

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

Join

Why is it considered wrong to destruct props?

Why is it considered wrong to destruct props (https://docs.solidjs.com/concepts/components/props#:~:text=of%20the%20property.-,destructuring%20props,-Props%20are%20read), even thought the reactivity can be retained by just not calling the signal immediately when passing it and just passing reference and calling it only by last children or wrapping it in Accessor and modifying it as it would be needed. And why is there no standard for naming signals like `const [_name, setName] = createSig...

If I am using a singleton class why would I use a context

```tsx class ProfileStore { active_user: Signal<string> = makePersistent(createSignal('hello')) ...

Deployed in Vercel, but doesnt load CSS files

I am developing with Solid Start, try to deploy with GitHub Pages and Vercel. I'm looking to deploy, it doesn't matter which one I use. With Vercel I overwrote the output directory to .output/public (before it was in .output and it gave me a 404 assuming it couldn't find the index.html) after overwriting, I was able to get it to take the index.html but it didn't load the files. CSS files. With GitHub Pages in the main.yaml of the workflow I do specify the same output, but it shows me the root Readme. could you help me plz? 🙏...

How to create a nested menu from a nested object?

I'm building a system where I have data from an external source that is structured as an object with nested levels, such as: ``` const menu = { id: 1,...

is it possible to use matchFilters from @solidjs/router in file routes?

```ts import { useParams } from '@solidjs/router' import { Show, createResource } from 'solid-js' import { query } from '~/lib/db/utils' ...

What am I missing for HMR, here?

I have an old project where I was able to set up HMR with SSR. However, I went to make some changes to it today, and noticed that HMR wasn't working. After a few hours of trying to fix it, I thought I'd try starting fresh: https://stackblitz.com/edit/stackblitz-starters-pjadua, and from what I can see, it should work, however, despite vite recognizing file updates and logging that it has performed an HMR update, and the browser console indicating that it received and performed that HMR update, t...

dev environment constantly not showing pages correctly

o/ i'm running into weird issues with my dev environment. certain pages do not work, and signals/resources also seem to break. any idea? something probably relevant: the download.tsx file in /routes/ was called subscriptions.tsx earlier. i renamed it, and stuff seemed to break. this also seemed to repeatedly happen when i create a new route or a new file. any idea?...

How to make optimistic update using solidjs?

Currently I do not have any code for optimistic update. I need simple example for this considering below code. ```javascript import { createSignal } from "solid-js"; ...

Reacting to a store change outside the context of a root or render function

I have a user store to manage user token etc. global-store.ts ```jsx export const [userStore, setUserStore] = makePersisted(...

Setting properties to the unwrapped value of a store doesn't always propagate into the store

This is a bit of a mouthful but its actually a simple thing to see if you consider the following playground: https://playground.solidjs.com/anonymous/671217f5-1742-45be-932f-494c85ee3a85 I also opened an issue on this because I feel a lot like this is a bug https://github.com/solidjs/solid/issues/2085. ...

Is there any approach to invalidate the back/forward browser cache in solid-router (v 0.12.x)?

I previously asked this question in github discussions before realizing this more-active Discord existed: https://github.com/solidjs/solid-router/discussions/384. I thought maybe somebody here might have run into this issue in recent versions of solid-router in combination with solid-start. Repeated here: I'm working on page which requires an authorized user to manage a list of data. When the user logs out, I redirect them to a login page....

Sharing data between routes

How can I share data between routes in the new Solid Start? I used nested data loading to do this in the old API, but I'm not sure how to replicate it in 0.4+.

Modifying <body> tag

I am trying to figure out how to modify the body tag to remove a certain class for certain pages to no avail. The class needs to be removed from the body for pages that do not have a sidebar. ```jsx function NavbarSpacer() {...

Anchor doesn't load the page

The anchor tag doesn't seem to want to load the page for me. I have a core router in the index.jsx file ```jsx render( () => (...

Scope styles to a page

Heyo! I want to be able to scope some CSS to only apply when that page component is mounted. This CSS targets the html and body tags and is not for the component itself. Currently I am doing import "./layout.css";, which correctly applies the styles when on this page, but then the styles remain in effect when I navigate to other pages. I could use :has() but support isn't all the way there yet. I could utilize mount and cleanup, but not sure how I could "run" and dispose of the CSS because that's not how CSS works....

Code review request: Optional context Provider pattern

I'm trying to find a context pattern that works with/without having to wrap context Provider in app tree. The expected behavior: When there's context Provider in the app tree, consuming component receive states relative to Provider. Otherwise, the states should be scoped locally to the consuming component. ```tsx...
No description

Import error with Outlet

This is the code I apply to my routes to protect them from users who are not logged in, and I get this error in the browser console, I don't understand why I get this error if I followed the documentation. ```import { Outlet, useNavigate } from "@solidjs/router"; export default function ProtectedRoute({ canActivate,...