SolidJS

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

SolidJS

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

4/14/2023

My app breaks when there is any javascript error.

I am aware of ErrorBoundary but my concern is why the whole app just crashes whenever there is any js error. I have never seen this kind of pattern in other frameworks. Ideally what should happen is just that particular component where error has occurred should stop working (functionality ) rest of the app should work I should be able to navigate between screens etc.

calvinandhobbes

4/13/2023

how to use createResource in Astro SSR

I’d like to use createResource in Astro. Right now I’m doing the data fetch in the Astro file and passing it to the Solid component as an attribute but it’s a 20kb response. I’d prefer if solid instead fetched the data and rendered the output with it and then only the final HTML was shipped down with the JavaScript to load the page. It would save a lot of time on download and parsing. How can I do this?

Grahf

4/13/2023

Reset signals when same component is navigated to

In my navbar each menu items navigates to the same location which in turn loads the same component: `<li class='text-center p-2 text-textColor'> <A href={/location/${valueOne}/${valueTwo}}> {valueTwo} </A>...

nirtamir2

4/12/2023

Solid.js event handler that depend on reactive value best practice (fix solid/reactivity lint rule)

Hi, I want to know what is the best practice for using event handers in solid.js that depend on reactive variables from different scopes. I want to create an abstraction over my component library, and I'm unsure what the recommended way is. I created a counter and 3 buttons that print the counter value onClick. I want to increase the count and the button to print the latest count. So button 2 does not work well. But for all the buttons I get lint error....

DaOfficialWizard🧙

4/12/2023

createStore causing warning

I am using createStore for a lot of my app, to reduce prop drilling and make inter-component communication a lot easier. I will preface, my app works exactly as intended. No bugs or issues that i can see (currently) - however i get this warning due to my createStore structure.

computations created outside a `createRoot` or `render` will never be disposed
createComputation @ dev.js:748

computations created outside a `createRoot` or `render` will never be disposed
createComputation @ dev.js:748

...

Menta

4/12/2023

one of my dependencies is using "buffer"

Now I can make it work in the browser?

Grahf

4/12/2023

Array of refs - keeps extranuous values - need to reset/slice

Hi. I have an array of refs I store in a signal like this. Refs are used in another component to scrollIntoView them. <h2 ref={(el) => props.setRefs((p) => [...p, el]...

Tim Basel

4/12/2023

Partial Setter for a Store

Is there a way to get a setter function for a nested object inside a store? This is a minimal example of the problem I like to solve. The getter proxy works, but I can't figure out how to get a SetStoreFunction or something else (the props the PersonForm can be changed if needed) that modifies a field inside the store. ``` const [store, setStore] = createStore({ ...

calvinandhobbes

4/12/2023

How to extend native events

I have a CurrencyManager which handles when the user inputs a number and converts it to a currency in a input field and manages the cursor position. I'd like to add the unmasked and masked value from the manager to all of the events on the input field so end users have access to it. Maybe I'm overthinking the approach but right now I have a curried wrapper function that takes a function and returns a function that receives its native event and calls the original function with the data added to it. ```ts type CurrencyManager = () => {maskedValue: string, unmaskedValue: string} ...

Mathieu

4/12/2023

Say I have a `Card` component, How can I have a `Card.Header` component?

Say I have a Card component, How can I have a Card.Header component?

guido

4/11/2023

How to have reactive getters on each element?

Let's say I have a createStore, and I want each element to have a getter, how should I go about this? I asked chat gpt, and he proposed this. ```typescript const [state, setState] = createStore([...

apademide

4/11/2023

frontend navigation: null is not an object (evaluating '_el$11.nextSibling')

When navigating in the frontend, I have that error that occurs. There's a staging server which should help you see what's going on: https://frontend.weltkern.dev.auaust.ch When you land on the page, it should look normal. If you navigate to the products page (by clicking the image at the center of the landing page hero), you should see an error. If you reload the page, it's fine. If you then navigate back to the homepage (scroll a little to see the navbar as it's currently still white-on-white) you get the error back, until you reload. ...

jesseb34r

4/11/2023

create-jd-app auth.ts type error

I'm getting a type error immediately after loading a project with create-jd-app in my auth.ts file. @orjdev is there a fix on my side for this or is this an issue with the create-jd-app config?

hel.io

4/11/2023

How to import MWS only in dev mode in solid-start

Hi, I'm creating a #solid-start starter kit and I'm integrating MWS, here's the repo: https://github.com/alveshelio/solid-start-tailwindcss-playwright-template. However I'm having errors when trying to import it in root.tsx. This is how I'm importing it: ```ts...

Martnart

4/11/2023

RouteDataArgs Type Error for nested RouteData

```ts // Root export function routeData(args: RouteDataArgs) { return () => 'foo' }...

SilentRhetoric

4/10/2023

mergeProps deeply?

How deeply does merge props actually merge objects? Could I do? ```const merged = mergeProps( defaultsObj: { key1: defaultValue1,...

Mathieu

4/10/2023

How to get the first child out of `props.children`?

I think in React it is done like so: React.Children.toArray(props.children)[0] What would be the equivalent in SolidJS?...

zishh

4/10/2023

Constraining input element not working

I want to constraint the values of some input element but I seem to have a misunderstanding of the update cycle of solid. Example: ```tsx const [value, setValue] = createSignal("");...

Martnart

4/10/2023

Make routeData blocking

Following scenario: ``` (app).tsx (app)/ route.tsx...

Silvan

4/9/2023

React user confused on how to work with createResource response

Hey Guys i feel like im missing a fundamental thing here. it works but it looks very weird. Is there a better pattern for this? Basically data is an Array. I now want 1 random children to display...

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.