SolidJS

S

SolidJS

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

Join

Implications of using multiple routers across app

Hi, I was wondering, given certain patterns, where for example you may have a webapp with lots of view/kind of like windows. And without really digging into how routers specifically works in detail. Whether it would be possible to have just multiple routers across the app, kind of spread on the app or index component. Like a way to kind of organize the views in a decoupled way. I tried it, and seems to work, but wonder if anyone has any ideas or knowledge about anything to look out for, or any opinion about it. Thanks...

SOLVED: Non-Reactive Memo for Reactive Values?

I wish to perform a memoized calculation on demand rather than optimistically. Here we see createMemo running optimistically: https://playground.solidjs.com/anonymous/63165594-60fe-4ff2-966f-620574dd5761 ...

Context providers inside <Routes> don't provide context values to routed content - Issue #273

This works: ``` <FooProvider> <Routes> <Route path=... component=... /> // the elements have access to context values...

Recommended CSS Compiler for Solid

hey y'all. It's been a minute since I've worked with SASS or LESS, and I'm wondering if there are any new compilers that have come up in recent years that do a great job of supporting nested classes. I have a project where the goal is to compile custom CSS and ensure it works well with Solid hot reload. Are SASS and LESS still relevant, and are there any gotchas when implementing them in solid?

Unable to deploy solid-start website to netlify

The docs say that I should set dist as my publish folder but building doesn't generate a dist folder. Just an .output one and when I set the publish folder to either .output,.output/public or .output/server it still doesn't work. Could anyone help me out? (I am using Bun + solidStart)...
No description

Beginner question about signals

I have this code: ```ts const signal = createSignal(''); ...

DOMException *sometimes* after changing element order

I have a solid-js website that populates an html table with data, using a <For /> to render, with a createResource() signal as the source for the list. After the data is rendered, the user can sort the table, which directly changes the order of the table rows in the DOM. When the refetch() is called on the resource, often a DOMException is thrown Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node....

Layout rendering breaking

This is my folder structure while using <FileRoutes/> in SolidStart. Now, a lot of times when I move from /documentation to / (root page), I get the URL to change, but the content of / (root) shows under the content of /documentation. ...
No description

Best way to pass complex values (e.g. objects) to a route?

Given a route that needs somewhat complex data, like an object, what's the best way to pass this data to the route? If multiple other areas of the app need to redirect the user to this one route, how would the pass data to it?

DeepTrack for a `Component[]` (Deeptrack for functions)

Hi! Is this possible? Let's say I have: ```ts const L1 = () => {};...

How to make full static generation

Hello, I'm trying to build a blog site using a JamStack like architecture. I want to deploy it to Cloudflare Pages as a completely static site, including the API responses. I wrote app.config.ts as follows and used the fetch method to get data from the API. However, when I build and run the site, API requests using the values from process.env are made during the page load. I want to save the API responses at build time, similar to the full static generation in Nuxt.js or Next.js, so that no API requests are needed after deployment....
No description

Reactivity in store

I think I may be missing the point of stores or just how to use them because I simply can't get it to trigger reactivity in a component. Below is a barebones example where I'm trying to have a value in a store and a function to update it - when the value changes I want to render it on the screen in a paragraph tag. Is there some obvious thing I'm missing here? ```ts import { createContext, ParentProps, useContext } from "solid-js"; import { createStore } from "solid-js/store";...

Redirect in production:

I have this simple action: ```jsx export const login = action(async (email: string, password: string) => { "use server";...

routing based on subdomain

Hi, I want to show a specific component when there is any subdomain *.example.com and in that component I need to get the subdomain name ...

Routing: Component/UI Element not rendered

Running with the dev server, I have been having a frequent problem with routing. I think it is related to adding new routes but haven't been able to confirm that. A demo of the problem is here: https://youtu.be/iykA-sMtf3E I didn't realize my mouse was not being captured so here is what is happening...

`class` vs `classList` behaviour

Hello! Currently doing something like ``` const InternalInbox = () => {...

How to set URL for static assets?

Trying to have static files served from S3. ```ts import { defineConfig } from "@solidjs/start/config"; ...

Solid Start Nested Router

Hi Guys! How to Implement Partial Page Refresh (Nested Routing) I am developing an admin dashboard with a top navigation bar, a left-side menu, and a right-side content area. I am not sure how to simultaneously handle a standalone login page and update the right content area by clicking on the left-side menu using a single file routing approach. ...

Reactivity issues with array items

Hey, I am having trouble figuring out how to create an effect that only runs when a property inside an object inside an array changes. I have a store that is a top level array and contains objects with an id and some content (which can be null). https://playground.solidjs.com/anonymous/b6728a0c-03a2-48e8-b8d7-27e483d22a8a In this playground I set up a minimal example. The effect logs the containers with content (where the content is not null) to the console....

Using Lucide Icons removes all components from the DOM.

I have a simple task of just loading icons to a page in Solid Start. src/routes/index.tsx ```jsx import { Title } from "@solidjs/meta";...