SolidJS

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

SolidJS

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

12/18/2022

Ref

I am getting an interesting error when using a ref to select a canvas. Code works but just wondering if I am using ref the right way. The error is Variable 'canvasRef' is used before being assigned.ts(2454) am I doing something wrong? ...

jesseb34r

12/16/2022

function MyComponent() vs arrow function Component

I am relatively new to the design space of component systems and figuring it all out. I still don't understand the tradeoffs and standards for why to use different syntaxes for declaring components. Basically, what is the best way or what are the tradeoffs between defining components in these different ways? ```jsx const MyComponent = (props) => { // logic...

bigmistqke

12/16/2022

client-side rendered solid-start, router and vercel

I am trying to deploy a CSR solid-start project to vercel. When I enter the route from the root and then navigate to a sub-route, I get properly routed, but if i directly go to a route I get a 404. Locally it works as expected. Is there something I need to add to my config for this to work?...

avant

12/16/2022

SolidStart release date

Sorry if this question is annoying, but how long do you think until SolidStart is releasing? I'm now so I don't know how much time these things take. This question is not to offend or something, just interested.

musiclover

12/16/2022

How to make child as props in For loop?

This is the way I come up. But is this right? I want to know most general pattern... I know there is props.children. But I don't see any example in 'For' loop. I want to use For's index....

musiclover

12/16/2022

How to use length for 'For'?

Sometimes I want to just use loop's length, instead of each like js's for loop. Should I always provide array to use For? Can I do something like this picture?...

KamehamehaNudel

12/16/2022

Setting up polyfills in Solid Start

Any insights on how to set up Polyfills when using solid start? Using it client side only for the moment and appearently solid seems to use some quite recent features. To what extent can it be polyfilled? i know IE11 is off the table due to proxys. Are there any other dealbreaker features like that, which can't be polyfilled or transpiled?...

avant

12/16/2022

Suspense

Can someone explain the part on why I shouldn't jump into using it? I don't understand https://www.solidjs.com/tutorial/async_suspense Thank you...

Wurfle

12/15/2022

Passing data from route to layout in solid-start

I have a group of pages with one parent layout (ie /menu/lunch, /menu/dinner, with the layout under menu.tsx). The layout has a tab bar listing each of the pages under /menu. The color of this tab bar should change depending on the current route. Therefore I would like to be able to specify the color in the routeData of that route and read it from the layout but it appears this is not possible (and I can see why things would get confusing if this were the case). What is the best way to pass da...

Jeremy

12/15/2022

Using custom element tags in JSX

I like to use descriptive custom elements e.g. <image-container> instead of <div> soup. Coming from Svelte, is there a way to make VSCode's tsx typescript checker not yell at me for doing this? It seems Solid itself handles it fine.

<Alterion.Dev>

12/15/2022

Dropdown with click outside pattern

What would be the best pattern to create a dropdown menu div or menu div with an onClick handler outside to auto close it? not a hover menu, mind you, but a click menu. I know how to show it, but I recall handling the onClick outside of the element actually implied something like portals or annoying dom manipulation in react, and I'm wondering if solid (or some community-made primitive) has a better idiomatic pattern for this? Currently my component looks like ```js export const FilteringDropdown = (props) => { const [isShown, setIsShown] = createSignal(false)...

Braveheart

12/15/2022

SOLID svg tsc error

any ideas about this?

TS2322: Type '{ children: Element[]; width: string; height: string; viewBox: string; fill: string; xmlns: string; "xmlns:xlink": string; }' is not assignable to type 'SvgSVGAttributes<SVGSVGElement>'.   Property 'xmlns:xlink' does not exist on type 'SvgSVGAttributes<SVGSVGElement>'.

TS2322: Type '{ children: Element[]; width: string; height: string; viewBox: string; fill: string; xmlns: string; "xmlns:xlink": string; }' is not assignable to type 'SvgSVGAttributes<SVGSVGElement>'.   Property 'xmlns:xlink' does not exist on type 'SvgSVGAttributes<SVGSVGElement>'.

and...

goenning

12/14/2022

Looks like solid-router doesn't like encoded forward slashes as params?

I have a route path like /app/:name/view and then the name might actually contain a forward slash, so i encode it with encodeURIComponent, but solid-router doesn't route it correct, it goes straight to 404.

phungleson

12/14/2022

Vite v4 and You appear to have multiple instances of Solid

Hey peeps, I am trying to upgrade my app to vite v4, however it ran into the error in header. The error is clear and I understand what it means. However, I couldn't pin point which part of the app/libs caused the issue....

musiclover

12/14/2022

Is my Solid app size is huge?

index.css: 16.61KiB / gzip: 3.60 KiB index.js: 87.04KiB / gzip: 27.29 KiB I always check my build size whenever I add new codes. I wonder if my app size is huge or not. Is it even small?...

Michael P. Jung

12/14/2022

ts-node not able to resolve ~ or node imports

I've got some scripts written in TypeScript in my project which I would like to execute. After some digging ts-node seams to be the obvious choice. However neither the ~ nor the import from node itself were working. After some digging I found that I can fix the node imports by either removing the types key from the tsconfig compilerOptions altogether or adding node to the array. Regarding the ~ paths however I'm stuck. I tried adding the tsconfig-paths package which doesn't seam to work at all, tried adding imports to the package.json and switching to a #root prefix instead. Nothing seams to help and I'm stuck with the annoying error message: ``` CustomError: Cannot find package '~' imported from /home/bikeshedder/projects/myproject/src/scripts/gen_schema.ts...

Razboy20

12/14/2022

Vite v4 breaking solid-auth

Updating vite to 4.0.0 is causing problems where "uuid" is failing to load for some reason. I have no clue why, and was wondering whether anyone here may have any ideas. To replicate, I used create-jd-app with solid-auth, then updated packages. When attempting to login, this error is produced: Error: Cannot read properties of undefined (reading 'v4')-coming from attempting to import { v4 } from "uuid". Vite 3 does not cause this issue.

Pridgey

12/14/2022

How to make a global layout?

I'd like to make a single layout for all of my pages within the route structure, but I'm not quite sure how to do this. If I make a routes/(root).tsx file, then the / path shows up as that html & css, but nothing from routes/index.tsx populates the <Outlet />. And if I navigate to /login then the html & css from the layout doesn't appear at all. So I'm not sure what it should be instead....

jesseb34r

12/14/2022

Is `style={}` performant?

I am using Vanilla Extract's Sprinkles API in my project to get static performance and a css-in-js feel but I can't put every style I need in a utility class. For instance sometimes I want to define a specific grid layout or gradient background. As far as I can tell my best options are using a style tag inline in the element which puts the css rules all together or to use vanilla extract's css modules which defines those specific styles in a separate file. What I don't know is the difference in performance between them. I know that in html the style tag is seen as not performant, is Solid different? Example with style tags: (I like this but don't know about performance) ```jsx // Hero.tsx...

Katja (katywings)

12/13/2022

Lazy in For results in renderToString timed out in production build

Using a bare solid-start project with the following code, and running the prod build of it, results in a "renderToString timed out". To be precise: the first request results in this time out. Every further request works without timeout. Node version: v16.13.0 ```jsx...

Previous Next

Gaming

Programming

SolidJS

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

SolidJS

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