SolidJS

S

SolidJS

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

Join

API w/o File Routes Component Possible?!

Are there any ways to create api routes w/o using the file routes component please? Like a way to specify a url path in the code and not via the file name please? Thanks!

How to trigger focus and scroll across the app?

What is the best way to trigger DOM element related reactions across the app? By across I mean for example by keyboard, related to a different component, etc. In practice, there is a global store, where you want to have a function focus() or scrollToBottom() etc. My current idea is to have a large, random integer in a variable in the store, and in the component rendering the DOM element I just put a dummy createEffect() with this integer and a scroll/focus effect....

Clarification on createAsync and Suspense behavior

i have an async data which relies on params id and offset. id is the slug of the page (location.params.id) while offset is just a signal. the async data is wrapped by a Suspense component with a fallback....

Layouts w/ Component Rendering please?!

How may we group routes w/o a common path while using component rendering please? Below I tried not putting a path for the layout components but when I test this the app is a white screen & the server terminal says 'No route matched for preloading js assets". If I add a path for each layout this works but then the url has to be example: /guest/sign-in but the goal is for the url to be /sign-in and for the layout to be Guest w/ component rendering please! ``` import { Suspense } from 'solid-js' import { MetaProvider } from '@solidjs/meta'...

Solid router, suspense and navigate

<Router root={<App>{props.children}</App>}>
{routes}
</Router>
<Router root={<App>{props.children}</App>}>
{routes}
</Router>
...

Deploy SolidStart with cluster?

I've completed development with SolidStart. Currently, I need to deploy it to my vps. So I'm wondering about performance and want to deploy solid-start application with cluster mode. I've to trying the nitro preset for node-cluster with full app.config.ts ```typescript import { defineConfig } from "@solidjs/start/config"; import tailwindcss from "@tailwindcss/vite";...

Astro/Solidjs

Greetings! How could I encapsulate this logic so I could use it in multiple components? It would be similar to using React custom hooks. I tried to do it in a normal FN, but it didn't work as expected.
No description

useNavigate to set search params

Whats the preferred way to set search params from useNavigate. I was thinking navigate("/path?foo=" + bar) but this feels wrong.

onCleanup is running on server

When I put client side code in an onCleanup & then refresh the page the server crashes b/c it's trying to run the client side code on the server, super simple repo is: 1. npm create solid > Solid Start > Basic > TS 2. swap index.tsx for this: ...

How to Abstract Routers using Classes

I'm trying to create a library that leverages a subset of routing functions under the hood. With the release of TanStack Router for SolidJS, I do not want to couple the library specifically to Solid Router and want to provide a Router abstraction that consumers of the library can configure with their router of choice. The way I'm going about that is providing abstract Router classes. Below is one example: ```tsx import { type Accessor, createSignal } from "solid-js"; ...

Correct type for props.children?

I have wrapper component that wraps an <input> in one component and a <select> in another component. It takese these props: type Props = {...

SSR doesn't auto fetching data when CSR

Hi, Currently, I've create some routes for SSR purpose and they work perfectly. However, If I go to the page SSR then navigating through some page and back to the SSR page the data SSR before is loss. ```typescript...

Solid-Start error when using fetch/axios/ky to call to external service SSR

Hi I'm new at Solid-Start. Currently, I'd like to call to external API. I try to use all of fetch/axios/ky but all of them returned error. For detail: 1. If I call API inside onMount() it can work as normal. ...

Current User Items Cache

- I have a page in my solid start project called /contracts - My goal is to get the current users contracts on this page - My original solutions was like this in the contracts.tsx page: ...

Does store setState check for equality before updating signals?

Does it make sense to manually check if a value is actually different before running setState/setStore? I mean, are reactions run even if the value is the same as it was before? If not, does it make sense to make like a helper function, which wraps setState in an if block, and only runs it if it's actually needed? Of course it wouldn't work on functions, etc. passed in, but I'm talking about basic cases, like setting strings or arrays of strings....

tanStackQuery/Solid/Astro

Greetings! I don't understand why it's generating two fetches when I render this component. Any ideas? It's supposed to do just 1 fetch, not 2 T.T
No description

Getting hydration error

Can someone help this is my first time using solidstart
No description

Update array of signal by index, it does unfocus on typing

When i type a letter on the input it loses focus trying to update and arr based on index. ``` <For each={names()}> {(name, index) => (...

Second component instantiation has no owner when under vinxi start in a npm linked component

Anyone tried linked components? I have a reproduction where getOwner() goes null and this happens in an application I'm upgrading from solid-start 0.3.11 (worked under pnpm link). Seems like this would be something in vinxi, but I'm not sure. Could there be an issue in Solid-Js?
https://github.com/nksaraf/vinxi/issues/473 I'm simply using npm i --save ./cmp which saves the folder as a file link "file:cmp" in package.json. Then (in the reproduction), I installed solid-js in cmp and create a component that logs getOwner() and then I included that component in the parent solid starter route/index.tsx....

I'm struggle with createResource

```tsx import { createResource, createEffect } from 'solid-js'; function YourAssignments(props: { me?: typeof users.$inferSelect }) { // Fetch data using createResource...
Next