SolidJS

S

SolidJS

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

Join

Pagination range not being updated

Hey all. I'm totally stuck and reaching out for some help. (see video below) I have a paginated component which seems to have all it's values updating. But somewhere reactivity is breaking at a crucial point and thus the whole component doesn't work....

Compound component find Type?

Imagine I have the following: ``` <Stepper> <Stepper.Step>...

Access Router state in application layout that wraps around routes

Hey there! I have an application structure like this: ```tsx...

How to get feedback from reactivity ?

Hey all I have the following component: ``` import { Button, Input, NumberInput, Stack } from "@mantine/core"; import { createSignal } from "solid-js";...

CSS Not Loading When Rapidly Switching Routes

I recently came across a bug on my website where rapidly switching to different routes will not load the CSS of the page and hence looks like this. I have found something similar to this although in NextJS, however idk how to get rid of this bug since i don't have a lot of information to go by

CSRF protection

I would like some assistance/guidance on how to protect against csrf in accordance with the recommended standards outlined in OWASP (any blog or repo showing would be appreciated)

onChange + onKeyDown same as react?

I have a component: ``` <For each={_value()}> {(char, index) => (...

Message storage for chat application

I'm relatively new to SolidJS and I'm currently building a chat application. It connects to the chat server via a websocket connection. I have the following questions related to message storage: 1) My niave approach is for each chatroom, to have a signal that is an array of messages. UI elements (i.e. message bubbles) are rendered based on this signal. It then occured to me that if the user keeps this app running for a long time w/o closing the browser that both the signal and the page (appending new speech bubbles into the DOM) can grow to a large size. Should I worry about this? Is there a way to control the size of a signal? Perhaps "trim" it when it exceeds a size of 100? 2) How does Discord's web app handle this?...

HighlightJS's Themes Not Working

Consider this code: ```tsx function App() { // ... ...

how to implement protected routes with FileRoutes?

For example, allow /xyz only if store.user.isAuthenticated

[SolidStart] Add another static file directory

What is the easiest way to add another static file directory like /public?
SolidStart app.config.ts says it configures Vinxi: https://docs.solidjs.com/solid-start/reference/entrypoints/app-config And Vinxi has a "static" option: https://vinxi.vercel.app/api/router/static.html ...

Reactive Store for a For html element?

Hi I have created a store using createStore but when I access it in a for element it doesnt update reactive. How can I do that?

filter reactive values by most recently updated

```tsx import { createSignal } from "solid-js"; export function App() { const [name, setName] = createSignal<string>();...

How to redirect from sub query

Hello there, I'm trying to call a query within another query to avoid duplicate database calls. For example: ```ts // This query is called in multiple places but will only run once and return data to all of them...

How to create or clone a component and add props to it

I have this snippet in react: ``` const _children = Children.toArray(children); const items = _children.map((item: any, index) =>...

Is useSubmission() not reactive?

Kind of puzzled here. So, TLDR, I am creating a contact form for a site I am developing. I need to update the UI when the form is submitted. So, naturally, I use useSubmission() as shown in the slimmed down snippet below (only showing the relevant parts as it’s kinda big). However, the UI doesn't update when the form is submitted. The form is being submitted, as I can confirm from my logs and the CRM its integrated with is getting the data). But, the UI isn't updating. Is useSubmission() not reactive? Or is there something I am doing wrong here? ``` const ContactPage: Component = () => { const [messageSent, setMessageSent] = createSignal(false);...

Batch creating children

I want to create a canvas api with solid and for this I want to batch adding children to the canvas so I only draw them once they are all added, (or one is updated). My basic idea was to just have a context called ObjectCtx which is just a signal of an array and have the children add themselves to this, but this always happens one by one. How would one go about combining them. I am open to suggestions here....

Special character route matching

Hi there, I've been having a great time getting to know solid-start since it's matured, and so far the experience has been pretty well. However there's one thing that's proving to quite the hurdle, and that has to do with specially crafted URLs. Currently solid-start supports various routes such as /todos/:todoId/attachment/:attachmentId, mapping to parameters properly, however this tends to break in some cases with special characters. Currently I'm trying to redirect users to a solid-start website, mostly re-using an existing endpoint in the form of something like /items/234932#stock/4827. The inclusion of the hash symbol however, seems to completely cut off anything after the part. In all honesty I'm really only interested in the last part, but whatever I can find, I can't seem to get a hold of the original request URL, before matching....

Confused about context.

No poc, as there's too much code. Here's the dir of the component: https://github.com/paulm17/mantinesolid/tree/main/packages/%40mantine/core/src/component/Checkbox Here's the component in action: ...

How to consume SolidJS in a TS 4 project?

SolidJS is compiled with TS ~5.7.2. I have a project using TS 4.5.5 and am running into issues compiling:
../../node_modules/solid-js/types/reactive/signal.d.ts(108,20): error TS1139: Type parameter declaration expected.
../../node_modules/solid-js/types/reactive/signal.d.ts(108,20): error TS1139: Type parameter declaration expected.
...