SolidJS

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

SolidJS

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

5/8/2024

Ref's parentElement

Is it safe to do this? How do I make the parent reactive? ```tsx export const Child: Component = (props) => { let ref!: HTMLElement; ...

Parker Codes

5/7/2024

Get array of matched nested routes

I'm using @solid/router and would like to create a way to build breadcrumbs based on the nested routes I'm in, similar to useMatches() in Remix. Even if it just returned the simple array of matched routes, I could assign a key to each route and find a simple way to get a title and icon from there for breadcrumbs. I've searched through GitHub and here in Discord to find previous conversations and none of them seemed to find a solution, or at least didn't check back in to share. Has anyone done this or have good ideas of where to start building from scratch? Here's an alternate solution, but I don't want to get into portals and pushing to the array from the routes themselves: https://stackblitz.com/edit/solidjs-templates-wwykia?file=src%2Froutes%2Fone%2Ftwo%2Fthree.tsx...

D0Z

5/7/2024

Issues with peer dependencies found

Hello, I'm trying tu use SolidStart with Vite 5 but I'm encountering the following error ```bash WARN Issues with peer dependencies found apps/d0z...

FjordWarden

5/7/2024

Return non DOM element as component with hyper dom expressions

I'd like to create a declarative api that uses components that are not part of the DOM tree. Sort of like this Canvas API: ``` function Example(props) { return h(Canvas,...

Rubick

5/6/2024

Using babel-preset-solid in browser

here is my minimal reproduce: https://github.com/c8se/solid-babel-reproduce/blob/main/src/main.ts ```tsx import { transform } from '@babel/standalone' ...

ARSON

5/6/2024

porting over some ssr react code, getting different behavior

this nextjs code ```jsx // foo.tsx "use client"; ...

edygar

5/5/2024

createSignal + createRenderEffect

Say I have an Input component that might or not be controlled. Within this said component, I need to peek reactively into the value. Is it a good idea to have something like the following? ```typescript function Input(props) {...

GirlRacer

5/5/2024

Binding to component onClick

Hi, I am trying to bind to the onClick property of a custom component. I understand this is doable for a regular HTML element such as a button but how can I achieve the same for a custom component? e.g. <CustomImage onClick={handleMouseClick} /> ?...

SleepPolar

5/4/2024

Solidjs vs Astro with Solidjs

I was going to make a board game with solid.js, while researching I discovered that it can be used with Astro. My question is if you recommend using Astro with solid.js or just solid.js and why. I'm also curious which one performs better: using solid.js with Astro or using solid.js alone and why. I'm also curious about the pros and cons of solid.js alone and Astro with solid.js. Finally, I would like to know what you recommend for my case of a board game, solid.js or Astro with solid.js....

Zwel

5/4/2024

html range input doesn't work correctly inside <Dynamic> on android devices

```tsx work on all devices <Dynamic component="div"> <input type="range" /> </Dynamic>...

Some Call Me Tim

5/3/2024

Router primitives can be only used in side a Route.

I have a route that has a setup like this: ```JSX export const route = { load: () => getRouteData(),...

Sudhagar

5/3/2024

Getting Object.hasOwn is not a function on older browsers. Attaching the trace

Shouldn't there be polyfills in place?

Tom

5/3/2024

Style attribute not updating in Safari

I wonder if anyone has run into this. I've got a SplitPane component that I just discovered doesn't work in Safari. It turns out the style attribute is not updating. I've got it down to

<div data-foo={`width: ${width()}`} style={`width: ${width()}`}>

<div data-foo={`width: ${width()}`} style={`width: ${width()}`}>

...

Je Suis Un Ami

5/2/2024

Server Actions and Cookies sending error: Cannot set headers after they are sent to the clien

Maybe I am misunderstanding something here. I am following the docs for Actions. Basically, what this component is supposed to do is check for the pressence of a session cookie. And, if the user is authenticated, redirects the client to the dashboard page. And if not, it redirects the client to the login page. ``` export default function Home() { const loadAuthenticatedUser = useAction(getAuthenticatedUserAction); const navigate = useNavigate();...

exercise

5/2/2024

how to use bun:sqlite without it leaking to the browser?

I'm using a Drizzle DB. how do i initialize it and use it in a route file in solid start?

terenced

5/2/2024

Solid +Astro SSR + Data Fetching on hydration

Hi! I working on an Astro site with Solid and I am having trouble getting Solid to fetch data. I would like to only fetch the component has been hydrated, but can't seem to get it to work. I am trying to detect if we are on the client by looking if window is defined. The console logs are correct, but the fetch is never triggered....

João Bezerra

5/2/2024

Is it ok to use a global store to persist component state between mounts?

Sometimes I want to be able to keep some component state between mounts. Partially filled form state is a good example. Is it ok to use a global store for this? Is there a better way?

Eatham

5/2/2024

Kobalte 13.x update issue

I get the following error. Didn't have this issue until after the update. Before the class and children props were applied. There were some structural changes but dont know if this was part of it or not. Asking here first if anyone knows if there was a change made. Otherwise will create a bug report on github....

Pokadot

5/2/2024

Tagged Template Literals - Why is unwrapped props value reactive?

The docs at https://github.com/solidjs/solid/tree/main/packages/solid/html indicate that reactive variables must be manually wrapped when using tagged template literals, yet this basic example still works, https://playground.solidjs.com/anonymous/45f46e73-ac35-4455-a03b-f8501027fe23 Clarification: I am referring to line 25. It is unwrapped yet is still reactive. ...

Some Call Me Tim

5/1/2024

API route in Route Group not picked up?

Migrating to RC1 caused my API routes in Route Groups (https://start.solidjs.com/core-concepts/routing#route-groups) to stop working? For a minimal repro, do a npm init solid@latest and create the file apiget.ts ```JSX export function GET() { return new Response('Hello World');...

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.