SolidJS

S

SolidJS

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

Join

Should I use reconcile everytime I use produce?

So when creating a store, I can use produce utility to work with draft state and this then returns the new immutable state. So when that store is update using setStore, does it update it completelty? Do I need to use reconcile?

Vinci build API issue

I think I found a quite critical bug, or I did something wrong. Can someone maybe take a look and correct me? Or is this a vinxi or h3 or some other issue: https://github.com/solidjs/solid-start/issues/1664 Silent changing of compiled code can have bad effects...

<Show> not tracking signals

For some reason when I use another signal inside of Show's callback, it does not track that signal. When I don't use Show's callback, everything works fine. https://playground.solidjs.com/anonymous/9581e103-9f05-4744-ba92-f285dc89d19f...

Fetch request render HTML content to my page

So, I am trying to do a GET fetch request, client-sided even though I should do it server-side, because of CORS, but I don't know yet how to do that. Anyway, the request was made to https://www.youtube.com/watch?v=blablabla but it seems that now, the page on which the request was made is rendering the HTML output of the YouTube video. I tried everything : - commenting out the request call - clearing Firefox' cache - opening the page on private tab...

RPC "use server" and CSRF Attacks

I’m looking to better understand the CSRF risks associated with SolidStart, specifically regarding the use of RPC calls with the "use server" function. In Next.js, when I process a form with server actions, the risk of CSRF attacks is significantly reduced for a few reasons: 1. Server actions are limited to POST requests....

Default SEO vs Route SEO

Hi everyone I'm facing an issue where my DEFAULT SEO overrides the ROUTE SEO. I created two components (on the thread): - the default.tsx where I import on app.tsx; - the page.tsx where I import on each route....

is middleware strictly for server?

basically title ^- is the middleware basically meant for server functions/api routes? eg. if i'm running with ssr: false, this is basically only gonna run on page load when the dev server serves the app right? i'm using the clerk-solid package to integrate clerk and would love to find a way to avoid attaching my auth token on every request, but not sure if this is possible...

solidjs/html use: attributes

What's the correct syntax for use: attributes when using lit-dom-expressions ? I've tried html`<div use:${myFunction}></div>` but that doesn't work and any properties following the use: are omitted.

Reactivity stopped - advice for debugging?

My app uses ProseMirror. ProseMirror lets you embed little UI widgets in the document ("node views"). It works great with Solid. The node-views are not part of the normal Solid render tree so I wrap the UI code in a createRoot I've got a bug where in a certain situation a node-view UI becomes non-reactive. I've reduced it down to a simple createEffect(() => console.log(...)) so I think it's unrelated to any dom issues....

can I import a `named export` while lazy loading the `default export`?

Not sure how lazy loading works, I want to ask if this breaks lazy loading: ```ts export const path = "/login" export default (function LoginScreen() {...}) satisfies Component...

export route = {}

Where to find more docs about specificly what is this in the screenshot I don't understand difference between "preload" and "load"...
No description

How to transform into getters outside of props?

When you pass a prop into a component it is transformed into a getter like <MyProp color={color()}, the props are { get color() { return color() } }. Is there a way to trigger such compile transformation for normal js code, like creating a normal object and transforming it into an object of getters?...

Restricting children to specific component types

I'm wondering if it's possible to define a pair of components, e.g. SpecialTable and SpecialRow, such that the former type only accepts children of the latter type: ``` <SpecialTable> <SpecialRow/> <SpecialRow/>...

`createResource` for Create and Update Requests?

I'm using createResource to fetch data displayed in a form. When a user modifies the form I want to update the resource using a PUT HTTP request. If I want to trigger Suspense, then should I wrap the PUT in another createResource call?

Uncaught Error: Failed attempt to create new DOM elements during hydration. Check that the libraries

This is my first time trying to create solid component with tsup https://github.com/solidjs-community/tsup-preset-solid and I'm assuming I'm doing something wrong 🙂 I never seen this error message before so I'm at a loss on where to start debugging this 🙂 setup on library side is pretty minimal, here's my index.tsx ```tsx...

Dynamic Component & Props

I'm having a hard time making use of the <Dynamic/> component and passing props to the underlying component. This is the dynamic component: Here, it should pass to the underlying component the id and onClick properties ```tsx...

Setting custom 'children' type

I'm attempting to create a carousel component for my Astro site using Ark UI and need to pass some elements into it for the items. I attempted to use the Component type instead of ParentComponent with a children parameter set to accept an array of elements. There seems to be no issues in the editor and the type is even correctly checked when using the component. When I run the site, however, the children property returns what looks like the standard JSX element. Is this intended behavior? If so...

Modifying subsets of resources, not re-rendering

I'm struggling with updating a subset of a resource, and using mutate to mark it as changed. my code is more complex but I think it's the same as this minimal example: https://playground.solidjs.com/anonymous/6c48c136-2c08-47b6-99a0-8b91068ccafa I suppose my question is, when updating a resource which is a list of items (which I guess are all individual signals), who do I update just one of those items, and trigger a UI re-render accordingly?...

How does Solid’s JSX attribute vs. prop implicit binding work?

Hey there, I am trying to get a better understanding on a deeper level about when to use attr:, when to use prop: and how the JSX compiler handles any prop automatically when I don’t use attr or prop explicitly. For example if I use edit on a web component (custom element), it works (it correctly uses the underlying prop that was defined on that element). But if I use onComplete, it doesn’t unless I specify it as prop:onComplete. But why does the edit work even though its not a regular DOM attribute? Does Solid ignore non-explicit and unknown props? If so, where is this defined? I'm a bit confused here, especially where the “magic’ happens....

H3Error: Cannot find module 'bun:sqlite' imported from

Same code works just fine with better-sqlite3 File has "use server" at start, so how it tries to find it seems to be important?...