SolidJS

S

SolidJS

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

Join

Events (oninput on keyup) stopped working?

I just asked in the solid-start channel but this may be a bigger issue than that. I may have done something dumb but I'm using solid start and my event handlers have stopped working. They were fine a little while ago but now none of them seem to fire (the value never changes). I've even gone back to the tutorial to get a basic example (code below) and it does not work. Any ideas on what I could have goofed up? I don't see any errors or warnings in either the browser console or the server window.
import { createSignal } from "solid-js";export default function FormExample() { const [value, setValue] = createSignal(""); function handleInput(e: Event) { console.log("WTF"); const target = e.target as HTMLInputElement; setValue(target.value); } return ( <div> <div> The value is {value()}</div> <input type="text" oninput={handleInput} /> </div> );}
import { createSignal } from "solid-js";export default function FormExample() { const [value, setValue] = createSignal(""); function handleInput(e: Event) { console.log("WTF"); const target = e.target as HTMLInputElement; setValue(target.value); } return ( <div> <div> The value is {value()}</div> <input type="text" oninput={handleInput} /> </div> );}
...

How to add calculated getter in a existing store?

const [store, setStore] = createStore({firstName: "Foo", lastName: "Bar"})

using createResource on node

I am trying to create a filesystem primitive that abstracts different file systems (virtual on localStorage, typescript-vfs, web filesystem api, web filesystem access api, node, tauri); synchronous file systems return signals on read access, whereas asynchronous file systems are supposed to return resources. Unfortunately, I get an error on node with asynchronous file systems; sharedContext is not defined. Is that correct?

Trying to update a value at index in a store array, updates all elements

Hello everyone, I'm sorry this is probably gonna be a bit long, I'm having a hard time trying to explain myself. Here is my issue: I'm working on an app using a context, and inside this context there is a store. I did like in the stores_context tutorial: I have a function that initializes a store, and returns it with some setter functions to update it. I have a useContext() function that returns the whole thing and it works....

Redirect to current location from createServerAction$()

I have a logout action that I would like to logout the user without changing the location. My current code looks like this: ```jsx const [, logOut] = createServerAction$(async (_, { request }) => { const session = await storage.getSession(request.headers.get('Cookie')); return redirect('/', {...

looking for better solid solution

Hi I have this app that I making about create a food menu. I want to add to my list of foods for specific meal an ingredient. Currently I use naive approach that uses simple getting the value from button click. wanted to know if there is better why or more solidjs API for this instead. I saw there is createComputed and a lot more of other cool reactive function so I have wander how can I this power of reactivity inside my app more. Hope for suggestion or examples you know, I found the API doc little bit lucking of examples and implementation how should I use this functions for me. really hope this one will improve...

Questions on the `owner` of using children() helper inside a context

I'm writing a component to show Toast. The idea is to wrap the main component inside a ToastContext. It exposes a method success() to show a Toast for a successful action. The shorten demo code is here https://playground.solidjs.com/anonymous/b8a41bdc-5569-41a0-86f5-d8fe42583d8f ...

createStore array containing arrays

I have a store that is an array of objects where some properties are arrays. Then I do <For each={props.store}>...

Track Variable Changes

i quite don't remember a lot the splid js syntax can someone explain to me how can i track variable changes and based on that i execute a function

`createServerData` with `fetch` is returning `undefined` in `createEffect`

Here's a minimal example. ```tsx import { Component, createEffect} from "solid-js"; import { useRouteData } from "solid-start";...

Netlify Fails to accept `dist`

I have many sites on Netlify from HUGO, and this is my first SolidJS. I ran npm run build and created the /dist dir. I drag that dir to netlify and it gives an error (but no error code). This is my first attempt. I searched here, didn't see anything relevant, and followed the directinos on netlify site (https://www.netlify.com/blog/how-to-deploy-solidjs/). "Looks like something went wrong!" No errors on build npm run build other than css/responsive.css doesn't exist at build time, it will remain unchanged to be resolved at runtime which are in /public/assets Any suggestions where/how to start my search?...

Is there a way to hook into the router's match (client)?

Is there a way to hook into the router (client-side) to override router.location in the <Routes> component? I want to alter the matched route that I rewrote on the server using a middleware. ```tsx export const Routes = (props: RoutesProps) => { const router = useRouter();...

What to save to database with authjs to preserve privacy?

Basically authjs with most oauth providers gives for example name or email as a scope. But I dont want their email address or name saved on my database. Whats should i do to prevent me the admin from having access to private information, but still allow the user to authorize for example delete their data on my server? Or am I completely off base on how this oauth stuff works in the first place?

Cannot reference properties of object stored in a signal after being fetched from API

I fetch some data via a REST API and store it in a signal within the onMount hook. The signal stores an array of the fetched data. I can reference all top level members of that array, but when I try to reference their properties I get an error. This only happens for me when I fetch the data from an API. When I pass in the static data via prop or just initialize the signal with the data, it doesn't happen. A reproduction of the problem is below (and also here: https://playground.solidjs.com/anonymous/cd6419ab-38e5-43c8-846e-44dcc9233896)...

`crossOrigin` and `playsInline` types don't work with solid & typescript

When running tsc --jsx preserve -t es2020 --outDir js --noEmit false on my solidjs site, I get the following compile errors. What gives? ```bash src/components/MainPlayer.tsx:117:18 - error TS2322: Type '{ children: Element; playsInline: true; }' is not assignable to type 'AudioHTMLAttributes<HTMLAudioElement>'. Property 'playsInline' does not exist on type 'AudioHTMLAttributes<HTMLAudioElement>'. ...

solid-js reactivity eslint with functions

I'm getting the following warning: This function should be passed to a tracked scope (like createEffect) or an event handler because it contains reactivity.eslintsolid/reactivity ```tsx...

routeData not being refreshed when navigating

Given the following code: ```tsx import { Show } from "solid-js"; import type { RouteDataArgs } from "solid-start"; import { useRouteData } from "solid-start";...

with-auth unused export

Hello all, in the solid start with-auth template, there is the export requireUserId, that is not used anywhere. Why is it there? should it be removed?...

Anyone has tested Tauri App with Solid Start ?

Hello all, I would like to know if anyone has already created a project with solid start and Tauri. If not with tauri, did you tried Client Side Rendering with Sold-Start ? I don't see so much doc on this subject. Thx all 🙂...

Getting accurate scrollWidth is hard

I can not get the correct value for scrollWidth in a child component. When I say correct value I mean the scroll width changes based on certain buttons clicked. This is my current approach:
Parent Component createEffect that gets the correct scrollWidth of a div when I console log it. That's great. From here it's not so great. `createEffect(() => { if (data() === 'ready') {...