SolidJS

S

SolidJS

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

Join

Compile specific routes into static html

I'm building an app that has the following routes: - home - about - contact - login...

I'm sure this is a stupid question...

I have a a situation where I want to take the current state of part of a store, and create a new store based on said state, which won't affect the original store. This is my current attempt: ```ts const [statStore, setStatStore] = createStore( unwrap(systemStore.stats),...

Don't know how to find config directory ZEBAR

I am currently attempting to rice my windows 11 setup. I have GlazeWM and Zebar installed and running. I am trying to download "neo brutal" which changes the way zebar looks. I have to unzip the contents of neo brutal in the zebar directory but I have no idea where to begin. this is my first time ricing a system. Thanks

Having issues with properly typing a higher-order component

I have a, seemingly, simple HOC that adds styles to a solid-element component: ```ts import type { FunctionComponent } from "component-register"; import type { ComponentType } from "solid-element"; import { onMount } from "solid-js";...
No description

template is not a function with npx serve

I am trying to migrate from vite to solid-start, and I have it prerendering a couple of pages. when I try to load those pages I am receiving npx serve .output/public any guidance on how to troubleshoot this?...
No description

Server-side redirects are done client-side

Why redirects made from a server query is done client-side ? Is it mandatory to use middlewares to have true server redirect ?
No description

why store not updated in createAsync?

```typescript import { createStore } from "solid-js/store"; import { createAsync } from "solid-js"; export default function Demo() {...

when in createAsync with deferStream, if I update state, it not immediatly updating createMemo.

```typescript // ExampleSolidAsync.tsx import { createSignal, createMemo, createAsync } from "solid-js"; export default function ExampleSolidAsync() {...

Same route for private and protected content

Hi, Is there a way to have a single route show different content depending on the user being logged in or not? I came up with this, but I'm pretty sure it's incorrect:...

Accessing functions declared in child elements

Noob here, only been using solid for a few days in a tauri project. Included the relevant files. In TilesetGFX, i have declared a function called "drawTileset", which is used inside of the TilesetGFX component. However, in the tileset_editor component, I'd like to also be able to call that same function from within the onChange event of a "select" tag (at line 33) I haven't found any way currently to achieve this yet, so i was wondering if someone could help me, surely smth like this must be possible? ...

Async route guards in Solid Router, and serverside props (not using SolidStart)

I'm building something very similar to Interia.js with a Go backend and a Solid frontend. Pages are rendered by a Node process that uses renderToStringAsync, and clientside pages are hydrated. See below for the rest of the thread....

SolidTable infinite loop with `createAsync` query, createMemo but not createSignal + createEffect?

I'm writing a SolidStart project, using SolidTable to display data from a backend DB. I'm using SolidStart query to fetch data and SolidStart actions to insert data. I'm running into an issue where if I supply the createAsync accessor of the query directly as the data parameter for the table - it hangs / hits out of memory errors when I insert a row using the action. I'm not 100% sure what causes the issue but it seems like it might be an infinite re-render of the table. If I keep everything the same but change the table data to be an empty array then it works no problems - so not an issue with the DB/query/action by themselves, it's only when its used as data for the table. I've tried some alternative approaches - createMemo of the createAsync accessor does not work - but strangely if I use createSignal and then update it with the value of the createAsync query in createEffect then it does work? Why createSignal/createEffect here work when createAsync does not? Does createAsync not have stable references? Please help me work this out - I'd really like to not use createEffect to make this work if I can avoid it. Thanks!...

SolidStart behind nginx reverse proxy

Hello kind peoples, I am having trouble running SolidStart behind an NGINX reverse proxy It "sort of works", I get the page to load with most content. but there's some buggy behavior, it does not seem to load javascript nor handle redirects, which work perfectly fine if I am just running in a docker container without the reverse proxy, ...

<input> has no value inside <dialog>

If I use an example controlled input component on an <App /> root it renders with the initial signal value. But if I move the same code inside a dialog, when opening the dialog the input shows no value. Calling the input value outside of input displays the value correctly. The dialog is just an html dialog, opening it via ref on button click ”dialogRef.showModal()”...

Understanding `createRoot`

There isn't a lot of accessible and straightforward information about how createRoot works, why it exists, and when it should be used. To my knowledge, it's a relatively advanced topic, and there is rarely a need to use it. I don't have a specific use case for it either, but I wanted to update the documentation, so I need to understand it better first. Specifically, I want to address this issue. Here are my questions; please provide simple explanations: 1. Why is it named createRoot? Root of what?...

How to set route info for file routes?

I'm attempting to implement breadcrumb. I see the docs mentions a solution that involves useCurrentMatches and an info object. But how does one set such an object for file routes? Is there a special export similar to Remix's handle?

renderToString in Elysia BFF Layer

Random question, I have a Solid SPA with a BFF server (implemented using Elysia) -- so this is not Solid Start. This all lives under a single repository with the following root, high-level structure: ```tsx - shared (contains things shared across both Elysia BFF and Solid SPA) - server (Elysia BFF: contains only normal TypeScript files)...

Solid Router Nested Urls

Having trouble getting my nested Urls to show up. I have layout files that I want to have for only a group of urls, but when I try what the docs say nothing shows up.

Solid Start, how to add backend/nitro plugin?

Lets say I want to have this code initializing when i start/restart the server itself, independent of any clients visiting the webapp? ``` console.log('Plugin started') setInterval(()=>{ console.log('Plugin running') }, 5000)...
Next