SolidJS

S

SolidJS

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

Join

Prisma integration example fails in build

Could someone help me try to reproduce a bug I get in the official npm init solid@latest? 1. npm init solid@latest 2. Select the following options: Solid-Start: Yes, TypeScript: Yes, template: "with-prisma" 3. cd into project folder...

Confusion about Preload mechanism

I am confused about the preload mechanism. According to my understanding, adding an asynchronous function wrapped by a cache in preload initiates data fetching when the route is accessed, ensuring the data is ready when the page starts rendering. Observing the console, this indeed happens. When the function is called within the route component, the data should already be prepared. Even if an asynchronous function calls this function, it should immediately return the data. However, my observation is different; there is still an asynchronous process to re-fetch the data. The sample code is as follows: ```typescript // function in the preload()...

whats this

I get many files like this one
No description

How to add vitest

How can i add vitest for unit testing after creating my solidstart project with the tailwind template

chat why do i get strapi app i want a solid app

``` yarn create solid yarn create v1.22.19 [1/4] Resolving packages... [2/4] Fetching packages......

Outlet issue on routes

Hey everyone, I'm struggling at the moment with setting up my routes... I have the following in app.tsx: ```ts return (...

Generic yet obscure Vinxi error when compiling

``` ┌──────────────────────────────────────┐ │ 📦 Compiling server-fns router... │ └──────────────────────────────────────┘ vinxi building router server-fns in http mode...

component not update

I'm trying to build Unovis for Solid, but I'm facing a problem similar to this issue https://github.com/f5/unovis/pull/272#issuecomment-1747767724. With the code that I commented on, the data only updates when it is in the container; if it's in an individual component, it won't update at all. I made some changes to try to fix it, but the result was not what I imagined. When the data changes, it should show a morphing animation. In my code, it does this if the data is in the container, but if the data is in the line component, it shows flashing content instead....

Question Relating to Arrays

Hey, I have been working with Svelte for the past couple months and I am thinking about rewriting one of my projects in Solid. One of the biggest things that plighted me with Svelte was the lack of support for nested reactivity. I understand that Solid supports nested reactivity via stores, but in my project I am working with arrays all the time, especially reordering elements in arrays. Now my question, how, for example, would I reorder elements in an array based off a user provided index? After looking through the docs I have only seen examples of prepending and appending of arrays, and even those examples are slightly confusing....

Is this a bug?

This is an <a> link. After rendering, the href attribute is correct, but the span is totally empty.
No description

Can i set a temp variable in template?

For example, if I have a for loop and each item is an object, can i set a variable to a part of the iterating object? ``` <Index each={bigList()}>{(item, i) => // access item().aaa.bbb.ccc.zzz...

changing route with useNavigate() causes onMount() of the child route to be fired twice

Hey, i have a problem that i cant wrap my mind. When i load my Route in a new window/tab or with F5 the onMount() function of one of my children is only fired one. But when i use useNavigate(), then onMount() gets fired twice. Why could that be? I am working on replicating the bug....

Cant set signal from getting another signal typescript error

```tsx function update<T>(target: Accessor<T | undefined>) { let [current, set_current] = createSignal<T | undefined>(undefined) ...

is it ok to use `action()` to handle form submission in a SPA?

my idea is to handle form submission as follow: ```ts ...
const submit = action(async (formData: FormData) => {...

What type a derived signal should be?

just () => boolean or Accessor<boolean>?

Can I Preload Data in Non-Route Components?

In SolidStart, I can use preload to fetch data when a route is loaded, ensuring that the data is ready by the time the route component is rendered. This is particularly useful for scenarios such as route guards and data display. However, if there are other components within the pages corresponding to these routes that also need data, can preload be used for them as well? For example, every page includes a Nav component, as shown in the following code: ```typescript // app.tsx...

"Cannot find module" for image files

Whenever I do something like
import favicon from "./assets/favicon.ico";
import favicon from "./assets/favicon.ico";
I get a TS error of
Cannot find module './assets/favicon.ico' or its corresponding type declarations.ts(2307)
Cannot find module './assets/favicon.ico' or its corresponding type declarations.ts(2307)
. Same goes for .module.css files, but .css imports correctly. I tried adding a declarations.d.ts file: ``` declare module '*.module.css' {...

How to create a `resource` which accepts two signals but only refetches when the second one changes?

Here is my use-case: I have a form with some settings (let's say that their combined values are the first signal) and an "apply" button (which should trigger the actual refetch, so it increments an integer signal just to update it). Now the fetcher needs the first signal to know what data to fetch, but the actual fetching should be triggered when the second signal changes. Any ideas?...

Button click not working

For some reason clicking button and changing route doesn't work. when routing to another page it doesn't load content even tho it moves to new route in the case of button it doesn't do anything. I tried to clear browser cache but it isn't working tried to use different browser but its the same

Is there a type for children?

Something like React.PropsWithChildren<{}>