SolidJS

S

SolidJS

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

Join

Super slow _server function

My server functions are taking 22 seconds + when I'm running my app in production.

Fundamental reactivity

I must be missing something fundamental about how to implement that reactivity in SolidJS. I have a Card component (multiple for testing). That component includes some inputs with data that will be passed to child component (chart) which should trigger an update for that child component. Parent Card(s) Component ``` import { createSignal, createEffect } from 'solid-js'...

Random Crashes when redirecting via middleware

On dev i will get regular crashes with the below error when redirecting via the middleware Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client...

Input type="reset" clears out wrapped inputs

If the native input element is wrapped in a solid component, <input type="reset" /> does not reset it back to its initial value but clears it out. https://playground.solidjs.com/anonymous/0a32e8f4-fab8-4583-a9a0-32e73e0a837a

Stores & CreateResource

Why createResources doesn't work with a store? console.log("currentPageParam", params.currentPage) properly shows me that the store itself is being updated, but the signal change is not being passed into createResource like with a regular signal does. If instead i use a regular signal currentPage() the signal is triggered on createResource, what i am missing? ```tsx const pagination = createPagination(); const [params, setParams] = createStore<ConstructionCatalogItemListParams>();...

Is there a hook for causing a reactive update manually?

As the title says. Context: I have some operations in a derived reactive primitive, where the current way to cause the update is to reallocate a lot of memory. In this derived primitive I do have a lot more knowledge about the data being manipualted compared to what the base version is working with, so if there was a manual way to trigger an update, I could optimize a lot....

How to implement a simple search-button?

We are quite new to solid, so a big sorry, if this question is repetitive, but I was not able to find a satisfying answer to our problem, yet. There are some controlled input-fields like selects, etc. which are stored / managed in a createStore and provided via a createContext. Those values have to be used in a fetch-function as query-params. My initial thought was to use createResource to manage the data, and use those reactive values as a source....

Solid Router 0.14 Suspense Behaviour

I have a non-Start app with Router 0.14. I wrapped Suspense around the children slot so I get blocking navigation which works correctly. But when I have a refetch button, it hides the current page instead of suspending Is this intended? In my real app which is still using router 0.8, this behaves correctly - I originally wanted to check if I can reproduce another strange behaviour with transitions & routing; but it's still 0.8, so I wanted to port to 0.14 first...
No description

Any way to pass the value of an event to say an onChange handler?

I am guessing I would need to do something like:
onChange={(event) => {customHandler(event.target.value)}}
onChange={(event) => {customHandler(event.target.value)}}
Is there a better way to do this?...

How do one test a custom primitives?

Hi, I made an extension atop createStore for arrays as I use them a lot, and to provide some useful api for mutating it correctly. (I found general store use for this a little messy) The question is - how do I test if reactivity is preserved? More specifically, I have this test, which currently fails because the createEffect does not trigger and I don't quite know whether the test is wrong, or the implementation is (it could be both): ...

Are component props reactive?

Hi, I've used solid for some time now, and just need some clarification on how props are handled in regards to the reactivity graph. My question can be boiled down to: If a give a prop the value of some Accessor (propName={accessor()}) - will the sub component always update based on where and how that prop is used in the sub component? Similarly, if I give a prop, which changes state, but isn't given as a signal accessed through the Accessor, will this update the sub component?...

Blank page while using vercel analytics

I deployed a website made in solid js in vercel i want to use vercel analytics but when i add it to the app.tsx all pages go blank here is the code for app.tsx file ```import Home from "./pages/Home/Home"; import Login from "./pages/Login/Login"; import type { Component } from "solid-js"; import Verify from "./pages/verify/Verify"; import { Router, Route } from "@solidjs/router";...

Weird solid start behavior

I'm not sure I understand how solid router actions work. The following code is causing a hard full page refresh. ```tsx // src/hooks/createUserTheme.ts import { createAsync, cache, action, json, reload } from "@solidjs/router";...

npx solidui-cli failing

npx solidui-cli@latest add navigation-menu is failing with Invalid configuration found in /Users/redacted/Documents/repos/redacted/ui.config.json. ...

Server Action Invalid URL

Deployed solidstart in a lambda and GET requests to pages work. However when I make a POST request via actions I see it does everything correctly on the server side (logs a message) the response on the client is: ```js ;0x000002f2; ((self.$R = self.$R || {})["server-fn:0"] = [],...

Can't make Router Work

Hello I've been trying to make react router work. Here's what I have as of now in the index.tsx file ```typescript /* @refresh reload */...
No description

createResource and createContext

Hey! I want avoid prop-drilling for a large resource that is referenced and used by many leaf components.. is there any recommanded way of settinng up createResource with createContext.. i'm having trouble with useContext, as the leafs are rendered when the provider is not ready with a context value.. what is best-pratice or an idomatic way to combine these two primitives together?...

Auth in layout?

Is it safe to do auth in layout components? For instance if I have a function like so and call it in the layout component with createAsync will it work on all page changes within that layout? Or is it like Nextjs where it should be called per page? ```jsx export const authOrRedirect = cache(async (url?: string) => { "use server";...

get return cache type

does a generic type for return cache fonction exist ? did i miss it ? right now, i do it on my own but i feel this should be import from solid ```ts type CachedFunctionResolved<T extends (...args: any[]) => Promise<unknown>> = Accessor<Awaited<ReturnType<T>>>; ...

how to make an input field that only allows numbers ?

that's an very beginner question. How to only allow number's in an input field BUT with out the usage of dedicated Signal's for an field or anything really complicated ? (I am using TypeScript ) It would also have to include float numbers...