SolidJS

S

SolidJS

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

Join

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

refetch failed resources whenever their sources change?

here's a playground: https://playground.solidjs.com/anonymous/df720f20-833b-420d-af40-f1dc385ceb69 i wrapped the component that imitates data fetching in ErrorBoundary and want the boundary to automatically reset whenever a resource that failed is invalidated...

Invalid Frame Header only on production build websockets

I wrote this simple tutorial, only to realize it's a minimum reproducible example that demonstrates the bug: Steps to Reproduce: ```bash git clone https://github.com/eguneys/solidstart-websockets-chat-tutorial...

production build runs my code twice

I have a solid start app I coded some things. When I run pnpm dev it works fine. But when I do pnpm build, and node .output/index.mjs it logs the things twice on the server log, and my websocket connection breaks with invalid frame header, which is likely related to this running twice thing....

cache doesnt revalidate inside websocket on('message')

I have this: ```tsx await make_game_move({ id: this.game_id, board, status, sans })...

Validation of the props

I've been looking through the documentation and I don't see any way to type props and I have no idea

Hydration errors with inline JSX

```const EyeIcon = (props: { show: boolean }) => { const closedEye = (<svg/>/omitted for brevity/</svg>); const openEye = (<svg/>/omitted for brevity/</svg>); return (<Show when={props.show} fallback={closedEye}> {openEye}...

Delete items from store array issue

I am attempting to remove an array element by one of its objects id properties. this is my method ```const removeSound = async (soundId) => {...

solid-plotly.js a new wrapper for Plotly.js

I could use some more experienced eyes to check the SolidJS implementation details. Eventually I'd like to get this into the official plotly.js distributions. https://github.com/ralphsmith80/solid-plotly.js/tree/main I've posted on there support forum about that as well. ...

Why can I return a function from onMount?

Quick question: I'm allowed to (as in "TypeScript allows me to") return a function from the function I declare inside onMount. The docs does not comment on this (https://docs.solidjs.com/reference/lifecycle/on-mount), so what does it do? When is the returned function run? Example:...

"use server" doesn't work if put at the top of the file

I have this code which causes reactive triggers when user is changed by an useAction: ```tsx import { cache } from "@solidjs/router"; import { useSession } from "vinxi/http";...

How do I do something after a redirect, like reload the page, or in this case reconnect a websocket?

there is no redirect reload, or some kind of hook that gets called after a redirect has happened to the same dynamic route with different params.

SRR And Web Crawlers. Help Me Understand

I just released a new business that has more than 150 pages of docs. I custom-coded the entire site and docs section using SolidStart. I have SSR turned on. Here's my issue. Crawlers aren't finding my pages. I'll give two examples. 1. Algolia just added a crawler to my site. Their crawler only found 2 pages, not 150....