SolidJS

S

SolidJS

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

Join

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...

Passing a component as a context value

I want to implement a dynamic sidebar which can show different content based on where you are in the component hierarchy. To achieve this I was trying to use the context API to supply the sidebar content. My goal was that descendants could either provide their own sidebar content or use one defined higher up in the hierarchy. ``` import { RouteSectionProps } from "@solidjs/router"; import { SidebarNavProvider } from "~/lib/shell";...
No description

vxini seems to be packaging and shipping all server code to the client

I'm trying to upgrade from solid-start 0.3.11 to the latest @solidjs/start. My smallest page load went from 1MB to 63MB. Under the browser's source tab, I can see that vinxi dev seams to be sending every JavaScript file in my project, probably even code accessed only from "use server" functions (although I can't be 100% sure yet). I understand I should wrap code in isServer conditions which, prior, I only used when necessary and I'm confused why there is such big change to cause so much code to load. This is all in one page load as well. Adding more isServer functions for tree-shaking will be a lot of changes, I would like to know a bit about what is going on first and make sure I'm doing everything I can using app.config.js. The first thing that raised a red flag was all the rollup warnings about externalizing many node packages which mostly went away when I added rollupOptions.external: [/^node:/] .. How did solid-start 0.3.11 know not to import all of the node packages without this external pattern? Is there something I can do or something I can disable to get things running more like solid-start 0.3.11 so I can slowly transition into more of a isServer tree-shaking approach? It seams that 0.3.11 was doing a better job, although I'm sure there are good reasons for changing this. But with 0.3.11 I never encountered any issues with missing client-side code. Thank you for any insight that would help me better navigate how to tackle this one!...

How to avoid page flickering when asynchronous resource updates

Hello everyone, I'm a beginner with SolidJS. As shown in the code in the image, I want the page to update when item changes. Currently, when I click a button, the page immediately turns blank until the new data is fetched, and then it reappears. I want the page to stay as it is during this time instead of going blank. How can I achieve this?
No description

Prevent queries revalidation if error in action

Hi. I'm a little lost with the revalidate function. Is it a server or client function ?...

Trying to implement Wrappy bot for my product

Hello we deep dived in your GitHub for wrappy bot can you guys please help us in it's implementation

Nesting server side functions in namespaces or any kind of block of code.

Is there any way to make nested server functions for example I would like to have an namespace called Users and then I could use .all() or .query() server-side function. It would make my code much cleaner after all. I tried to implement the namespaces like so: Library database code src/lib/db.ts...

How to test for is loaded for a create async source change

In the real world example there are these methods that loads some async data: ```tsx loadArticles(predicate) { setArticleSource(["articles", predicate]);...