SolidJS

S

SolidJS

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

Join

Create resource TS types fail when using `{ refetching }`

When creating a resource, ```ts const [value, { refetch }] = createResource( source, ...

solid-motionone/@solid-primitives/transition-group - onMount/createEffects called before add to DOM

I have a <Presence exitBeforeEnter> which is using a keyed <Show> to toggle between two components with a transition in between - however the component that comes in to replace the original component is mounted in a solid.js sense before the elements are actuallty on the page - can I check for when the elements are in DOM? A hook of some kind maybe? Cheers!

How to avoid temporary undefined values in template literals in solid-meta?

In the browser the whole string gets displayed, but the data.name is undefined momentarily until the async data resolves. So the tab title goes from This -> undefined <- is undefined temporarily to This -> hello world <- is undefined temporarily. My intended behavior is that the title should not be displayed at all (or the hostname should be display) until everything in the string literal has resolved. Is there a way to not display the string at all until the data is resolved? Alternatively, is the below code correct - should I be using accessors / derived signals or should be just be using straight string literals (I found this to not be reactive)?...

[h3] [unhandled] TypeError [ERR_INVALID_CHAR]: Invalid character in header content ["X-Error"]

For some reason in dev mode i cannot throw errors in server functions. After build it work as expected. For some reason i get this error always, but i cannot find anyone with same problem

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...