SolidJS

S

SolidJS

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

Join

How to use `createResource` value to initialize another signal on the client?

I'm trying to fetch from my API a json that contains a link to Spotify preview (an audio) and then feed it to the audio primitive, the problem is that at render time it's undefined until it resolves the request and return the json, so the audio is undefined and I cannot play it. ``` const SpotifyPlayer = () => { const [song] = createResource(fetchSong); const [isPlaying, setIsPlaying] = createSignal<boolean>(false);...

Cleanup function

https://stackblitz.com/edit/solidjs-templates-unzazc?file=src%2FuseFloating.tsx 1. When you hover over the box, you'll see three console logs with the message "Update." 2. If you scroll while your mouse is over the box, you'll notice that it's reacting and automatically updating. This is because the autoUpdate function with the elementResize option returns a ResizeObserver....

Can The load() Function Access Secure Values?

If I want to take advantage of load on hover when using a url Param, I can use the following pattern. Pass the param ``typescript <A href={/${orderId}`}>Link</A>...

Use `createEffect` in a terminal environment with Deno and TypeScript

Hello everyone! I wrote the following code, but the effect doesn't work. Nothing is shown in the console: ```ts import { createEffect } from "npm:solid-js";...

Objects passing through a store are copies, even after unwrapping... why?

I'm attempting to store some objects in a solid store which I need to be able to do reference equality checks against when I pull them out of the store. Is this possible?

How to watch only one signal in createEffect?

createEffect(() => {
console.log(a(), b());
});
createEffect(() => {
console.log(a(), b());
});
...

Signals in global scope vs component scope.

Is there a preferred way or best practice in handling state for components? Should we try to keep components pure? In one of my applications, I have signals declared outside of components, making them global. Is there an disadvantage to doing this or should I aim to pass the signals as props? https://www.solidjs.com/tutorial/stores_nocontext...

Continuos refetches using Solid tanstack, / Reactivity logic?

Can someone expert on SolidJs have a look at my code and see where possibly I have an infinite loop, that triggers tanstack query indefinitly?

css loads slowly (lazily?) causing ugly page for a few frames

I just tried upgrading to latest version of SolidStart and noticed this. Others seem to have noticed similar things in the past: https://discord.com/channels/722131463138705510/910635844119982080/1233478382482620532 https://github.com/solidjs/solid-start/pull/1423 (this issue have nice pictures demonstrating what's happening)...

How to process and save Uploaded File on server side

I see examples for the frontend on how to upload a file, but how do I process and save the file on the backend using SolidJs or SolidStart?

Help Me Understand "use server" Security

I'm new to this topic. So please excuse me if my questions if they're obvious or don't sound well thought out. I'm simply trying to learn. Let's assume I have an app dashboard. When a user visits that dashboard, I run a createEffect() to check their access status. Inside that "client-side" createEffect() I call a server function getUserRecord()...

Using Router Action with Solid (not SolidStart)

I'm trying to understand how to use Solid Router actions with Solid (the core library, not Solid Start). When I submit a form which has an action the browser redirects to https://action/.... So something is going wrong that I don't see. Here is a test I created in the Solid Playground, adapting the example from the docs: https://playground.solidjs.com/anonymous/09ea99f6-f72a-4f63-8c80-7e86cba1b348....

Ideas what could cause static assets from failing to import?

import testImg from './test.png';
import testImg from './test.png';
fails with
`Cannot find module './test.png' or its corresponding type declarations....

Cloudflare Pages deployment route content not loaded

Like for 2-3 days I'm trying to deploy my test Solid Start site at least SOMEWHERE, but the only provider which seems doable is Cloudflare Pages - my site actually gets deployed successfully. But when I go to the deployment URL I can see my navbar, but I cannot see the current route content (which is wrapped in Suspense in my code): ```tsx...
No description

"[error] UnknownAction" on getSession() in AuthJS

Hello, I have tried to follow the example here on using @solid-mediakit/auth: https://www.npmjs.com/package/@solid-mediakit/auth#server-side I have implemented it as suggested but I am having trouble using getSession(). In previous versions I have used it in server-side db methods like this: ```ts export const fetchCountryInfoServer = server$(async (countryId: string) => {...

createStore doesn't trigger createResource refetch action.

``` const [pagination, setPagination] = createStore({page: 1, limit: 10}); const [perPage, setPerPage] = createSignal(10); const [constructionData] = createResource(perPage, getConstructionList); // works //const [constructionData] = createResource(pagination, getConstructionList); // does not work...

web-vitals integration

Has anyone ever integrated https://www.npmjs.com/package/web-vitals with solidjs? Can anyone help me with the example of how to integrate this ?

Is there a more proper way to set value across components?

I've tried an experiment of setting value across components. The codes in the shot screen works, but it should be a better way to do this right?...
No description

Implement 'load more' feature efficiently

I read the docs and searched this for like 3 hours but still can't find a good solution. Here is what my code currently looks like: ```ts import { For, Show, createResource } from 'solid-js'; import Post from './Post';...

How can I make sure that data from createAsync is loaded, before passing it to another function

No matter what I do dirID is always undefined when it gets to other functions, createEffect also did nothing for me but that might be because I used it incorrectly. ```ts import { createSession } from "@solid-mediakit/auth/client"; import { createAsync, useParams } from "@solidjs/router"; import { Show, For } from "solid-js";...