SolidJS

S

SolidJS

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

Join

Routes and FileRoutes

Hello! I'm new to Solid and I had some questions about Routes. I followed what was written in solidStart, but I still have some questions about FileRoutes. For example, is it possible to create a custom Layer for some pages and still using FileRoutes ? ...

Question about Contexts

In react a common pitfall with contexts is causing unnecessary re-renders to everything subscribed to any piece of the context state, including those just using the methods. (unless you carefully designed the context) Is it safe to assume(/correct to say) that solidjs' contexts are inheritly safer and easier to use since components don't rerender like react and we then only need to worry about using signals/stores adequately?...

Props/Default Defaults

The tutorial example at https://www.solidjs.com/tutorial/props_defaults does not seem to behave any differently before and after being solved. What is the difference?

Parent setting prop to child with Context?

Say I have the following component: ```jsx <ToggleButtonGroup onChange={handleToggleChange}> <ToggleButton id="key"> Foo...

Solid-Primitives Key compatible with 1.7 beta (types)?

Hi, wondering if anyone has tried using https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyed#Key together with solid-js@1.7.0-beta.0. After updating getting
'Key' cannot be used as a JSX component.
Its return type 'Accessor<Element[]>' is not a valid JSX element.
'Key' cannot be used as a JSX component.
Its return type 'Accessor<Element[]>' is not a valid JSX element.
when using Key....

Pass data from Express up to Solid

I have already install and run npm run build, How can I pass data from express to solid just as how I would do it for EJS or Handlebars???

Does anyone else find it annoying that you can't pass a store as a source signal for createResource?

I have a complex request to pass into the body of a POST request to an API. It has many different nested properties of various depths. I store the request in a solid createStore in the app, so I can efficently set it thoughout my app. But to make this system reactive, so Solid refetches content you have to pull off indvidual signals. I had to build a recursiveFlattener helper function to make it work so if I change any property in the request it refetches. Am I doing something wrong or is that annoying to anyone else. Shouldn't it be something that the compiler can take care of? Also, maybe a separate post but what's the right way to diff the large response from the resource in the right way? I see helpers like reconcile do I need that? Is there a better example than the docs? What if I needed optimistic updates? What if I need to do an infinite scroll like twitter? Just use solidQuery?...

Eslint, am I doing something wrong?

```js const ToggleButton: Component<Props> = (props) => { const [local, others] = splitProps(props, ["toggled"]); const [toggle, setToggle] = createSignal(local.toggled); ...

CreateEffect has infinite loop

So I am having an infinite loop issue with an effect that I am trying to figure out how to handle without having to resort to createReaction() since I find those are less than ideal to work with but maybe that is the only SingleInFormAutoShowOptions. I have this code: ```ts...

createResource returning undefined when data is fetched

I'm just learning solid and did something like a hook? maybe? dunno. Anyways, I'm just calling createResource with a fetch on it and returning it's json. But, for any reason, that fn is returning undefined, even when the data is properly fetched("tested" by logging the json)....

Question about onError

```jsx onError((err) => { console.error(err); }) ...

[solved] Brain fart: in need of fresh eyes

I just can't seem to access the results outside of the function in my returned jsx. Hoping to loop and create <option value={item.id}>{item.name}</option> Thank you in advance....

[Solved] Reactivity problem when refreshing the page

I've got a route, where I'm fetching data with server$ function, which sits inside createResource and it works fine, when I'm navigating. But when I'm refreshing, I can see that it fetches on the server, but Resource doesn't get updated on client side. What am I doing wrong? ```typescript const [data] = fetchFolders(); createEffect(() => console.log(data()));...

Is Static Site Generation possible with SolidJS?

I want to know if it's possible to implement ssg with SolidJS without SolidStart? Any libraries etc.? Thanks...

Does <Show> narrow types in typescript?

I am getting undefined errors even though I wrap it in a show block.

Get SSR attribute value when hydrating

Hi guys! The server generates an attribute value for an element and I don't want to re-generate that attribute value on the browser side because it's unnecessary load on the user device. Is it possible to access the to-be-updated element from within the client side component function code? e.g. ```js const myAttr = createSignal(isServer ? doHeavyCalculationThing() : hydrationEl.dataset.myAttr);...

Cannot find name 'React' when using Astro + TypeScript

I configured my Astro project to use SolidJS and even though I added the required tsconfig.json VSCode highlights every JSX tag with an error: Cannot find name 'React'.ts(2304) Astro compiles and runs fine, and tsc --noEmit also shows no errors. ...

Loading data into context

Hi what's the best practice to load data from server (like using prisma) into the context? i did try some method like using createServerData$ but seems like only if I call the getter function inside the JSX Element, then the fetcher will work, other wise it won't, the data.state is just pending, won't beready...

Listening to all changes in an array or object in a store

Hi! I have a store that has arrays and objects inside it. I want to listen to all changes in a tree. For instance, suppose this is my store: ```json {...

Problem creating web component with solid-element

Hi, I'm trying to create an image carousel web component by wrapping an existing JS library (called Glide) within a Solid component. As a regular solid component it works fine, but when I try to convert it to a web component I get an error from the Glide saying indicating that it cannot find the root element on which to mount the image carousel. It seems the initialization which I place within the onMount hook cannot access the elements of the shadow DOM (???) The code is below. Any insights would be appreciated. ``` import {Component, createEffect, createSignal, JSX, onMount} from "solid-js" import Glide from "@glidejs/glide"...