SolidJS

S

SolidJS

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

Join

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') {...

$server rpc call failing (404) in production mode

Call works fine when running npm run dev but get 404 when build then run npm run start ... has anybody run into this?

How to re-render <Portal> if target component is removed or added?

I want to use <Portal> with id to dynamically insert component to other component. The problem is the target component (mount) can be also dynamically removed or added. What should I do in this case? I found the <Portal> component is not rendered after re-adding target component after removing it....

Modal Implementation

Has anyone ever written a generic component for a modal? Something lean and not an external UI framework is enough for me. I heard the <portal> component is quite useful for this. Background is that I want/need to implement a small DSGVO modal....

createServerData$ question

Hi, In example page below, why do I need to call data() in the export page function for the data to load (or to enable reactivity)? It's not blocking me, but curious if I'm doing something wrong, and seems like it should be unnecessary, esp. since data is referenced in the templated section....

Load component after createServerData$ fetches data and it is rendered

Once upon a time, using solidJS, I used .state from createResource to check when the .state was equal to "ready". I used <Show> to render a component when the .state was "ready". Basically trying to do the same thing in SolidStart but I'm using createServerData$ to get the data. Just want to load a component after the data is loaded and NOT before. Once it gets the data I'd like to show a component. I know createRouteData has a state property. But I'm not using that since m y createServerData$ function takes a prop as a value and as far as I know createRouteData can't use a prop value since it has to be exported, hence appear at the top level and wouldn't have access to props....

Can I make getElementById reactive?

I want to use document.getElementById () as signal. Is it possible?...

how to handle POST in a route?

Hey there, I was looking for something like remix’s action/useActionData, but I don’t even have the request on the routeData, how do I do it? The usecase is simply to render what was posted in formatted and interactive way, I don’t want to redirect or anything like it...

useServerContext() returns empty object in server$() callback

how come useServerContext() returns an empty object in server$() callbacks?

How to not render <Portal> if mount is undefined?

It seems <Portal> always insert to document.body if the mount is null. But I only want to render the mount has element....

get cookie inside $server rpc call

Hi, how can I get an http cookie inside $server rpc context? This is possible using tRPC, and I'm hoping possible w/ $server because it's working out well for me, and I'd hate pull in tRPC just to get a cookie. (edit: or make rest API call, which is prob what will do on second thought if not supported, but bummer to lose the easy type safety)

Solid PointerEvents, Firefox, RequestAnimationFrame and OffsetX/Y

Here's one that took up a bit of my afternoon after I wrote a RAF debouncer. Does Solid 'do' anything with events, like React does, or are they simply browser events? If you do an addEventListener on an element for pointermove, and place these in the handler: `` requestAnimationFrame(() => { console.log(event RAF`, event.offsetX, event.offsetY);...

Suspense triggered witout reading data

So... trying to wrap my head around suspense. This is based off the "Real word" Solid example: I have a service with a store which is populated through actions on singin/signup. ...