SolidJS

S

SolidJS

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

Join

How can I inject json-ld data into my route page?

This is the json I want to inject ``` { "@context": "http://schema.org", "@type": "Product",...

Is this Firebase Context correct?

I got this code online but not sure about it. Will the values come to me reactively. I'm worried that if I have a few protected(authenticated) routes, and firebase auth is still loading, then my user will get redirected to login page. ``` import { JSXElement, createContext, useContext } from "solid-js"; import { createStore } from "solid-js/store"; import { app } from "../configs/firebase";...

`onClick` delegated event fires wrong handler

I have a fixed action button and it sometimes overlaps with another button that has a click handler and sometimes when they overlap, clicking the action button fires the other one's handler. In my experience this only happens on mobile, is it a bug with firefox or delegated events?

Is it possible to access Request in action?

```ts const myAction = action(async (data: FormData) => { "use server"; // can I access Request here? // to extract request url, cookies and so on?...

SolidStart with TanStack Query causing hydration error

I have an almost barebone SolidStart project that was init using npm init solid@latest and selected tailwindcss and TS during setup I am trying to fetch some data using TanStack Query but i keep running into hydration error My index.tsx...

Side effect in bundled code `ie(["click", "keydown"]);`

I'm trying to import types from a lib I'm building that contains a Solid.js component. However, when building using a vanilla Vite + Solid setup, the lib's build output has a top-level call to ie(["click", "keydown"]); . In turn, this call is added to the output build of the second package. Where is this coming from? Can Solid.js be fixed to not produce these top level function calls?

Dynamically remove effect

Is it possible to remove an effect created with createEffect()? Or is there a different way to think about dynamically adding and removing effects? I am in the beginning stages of building a UI where the user can dynamically route signal flow + relationships between elements... still working on fully wrapping my head around reactivity, etc!...

I see my Solid Start app downloading tons of ts, tsx, scss files - Attaching Screenshot

Basically most of the project file are being downloaded. Isn't the framework supposed to bundle them up? What am I missing?
No description

onLoad attribute on a link tag in entry-server not running

I'm on @solidjs/start 0.7.7 and trying to add an onload="this.onload=null;this.rel='stylesheet'" on a link tag. The purpose is more widely explained here. Problem with this approach is that typescript keeps shouting Type 'string' is not assignable to type 'EventHandlerUnion<HTMLLinkElement, Event> | undefined'. So I rewrote the single liner above to the following: ```ts...

Reactive field inside objects of an array

```ts import { Accessor, ParentComponent, Setter,...

How do you keep reactivity?

I'm trying to organize my code but I lose the reactivity on the way... When the searchParams.id value is set from undefined to a correct string value, I would expect the query to be executed and the effect to be triggered. It is not. If I uncomment the createQuery section instead of using getProgram, it works....

Configure Background for routes

I have a solid app where I want to change my background images dynamically based on which route/page it is. How can I configure bg1.png to automatically change based on which route is used. Should i create a global backgroundSignal, then use the Route."load" property to set the backgroundSignal to the current background. Then put the img in a switch to update when backgroundSignal changes?...

Transparent Border styling is weird

Attached is my component. It has the following css properties ```css .card { width: 175px;...
No description

Adapting a list of objects to signals

I've got an API that returns a list of objects like ```json [ { name: "foo", value: 200, message: "whatever" }, { name: "foo", value: 44, message: "" },...

Using Kobalte, am trying to use the Tooltip. But I don't like how the trigger is a button.

Here is the source code to the trigger: https://github.com/kobaltedev/kobalte/blob/main/packages/core/src/tooltip/tooltip-trigger.tsx The trigger is the object the "triggers" the tooltip to appear. However I want to have the tooltip work on my own components and don't want to have my own component within a button. So I decided to try and modify kobalte's code to work with my own. However the problem now is that I don't know the best way to implement it so that the tooltip works with anything I set to be the trigger. Thanks...

Difference between using `const` and `function` to declare a function

I am relatively new to JavaScript and in my time learning I have noticed that people decalare their functions/components using const and also function. E.g. Using function ``` function MyComponent(props) {...

Refs to children elements?

Quick one. Could have multiple answers. I have a passthrough component that renders two children elements in a specific layout. I want to grab refs to these two child elements. Currently the way that I am rendering these two child elements are just by props.children[0] and props.children[1], but that doesn't give me a slot to stick a couple of refs in them. How would I go about doing that?...

Stores, context, & reactivity

Hey crew, got another question for y'all I have the following code: ```tsx...

Authentication in both component and middleware

After did some search I'm still confused how solid start handles the authentication. In some auth libraries, they are using middleware to protect api routes and actions but not components(middlewares do not get called when route changes). I looked at the auth example, it only applies a simple action, not a layout. I simply created an auth middleware (from lucia example) and protected component, but I think the solution is not clear....

Dynamically rendering components

My objective in a nutshell is making a small user card appear on an element hover, like on twitter. The way I'm making it is the following: This is a barebones representation ```tsx // UserPopup.tsx...