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/21/2023

Best way to implement a dialog in Solid.js

I'm using Solid.js for a library and need to implement a dialog to capture some user input (say, a selection from a set of multiple options). I want to provide a function that will display the dialog and return a promise that will resolve with the result of the dialog (e.g. the option the user selected). What's the best way to go about this? What I have in mind is to render the dialog and add an event handler for an option being selected that will resolve the promise and destroy the dialog. However, I can't figure out how I should destroy it. Is there a better method I'm missing?...

Aaron

5/21/2023

Reactivity when passing props down not reactive on nested component

Hi guys and girls, I'm currently struggling with reactivity. Here's a look at the code: ParentComponent.tsx ```typescript ...

Starwort

5/20/2023

Cannot find package 'solid-start-node' imported from 'solid-start/bin.cjs'

I created a new project with npm init solid@latest, with the options [with-websocket], [ssr], [typescript] - after npm i and npm i --include=dev, npm run dev throws the error from the title (ERR_MODULE_NOT_FOUND)

avant

5/20/2023

Nested routing not working

One video is with npm, the other with pnpm Both not working, what am I doing wrong? cat.tsx ```tsx...

Mathieu

5/20/2023

How to share .env files among NPM Workspaces?

.env files are read from a workspace root folder (e.g. /packages/foo-app/.env), but the .env files are not read from the root of the npm workspaces. This leads me to duplicate the .env files for every workspace, or to have some hacky copy script. How can I have just one set of .env files for all workspaces?...

baxuz

5/19/2023

splitProps instead of destructuring?

How does splitProps work exactly? ```ts export const ResultDisplay: Component<{ result: Result }> = (props) => { const [res] = splitProps(props, ["result"]);...

Mathieu

5/19/2023

How to route in a callback function?

The SolidJS Router docs explain how to add a link that wraps some component (needing routing) with an <a> tag, via the <A> component: https://github.com/solidjs/solid-router#create-links-to-your-routes However, how do I route in a callback function? I.e. how do I render some routed component from the onClick callback? That isn't possible?...

alrightsure

5/18/2023

useRouteData empty on HMR

I'm just curious about the expected behavior of useRouteData in Solid Start. It seems to return an empty response after HMR, but only in certain situations. I created two identical pages with different route data functions. One pulls from the Pokemon API and another accesses my firestore instance: ```export const routeData = () => { return createServerData$(async () => { const resp = await fetch("https://pokeapi.co/api/v2/pokemon/ditto");...

nikiv.dev

5/17/2023

Don't know why solid context complains it is not called in the right place

https://github.com/kuskusapp/kuskus code of app the thing I don't understand is that we have this store https://github.com/kuskusapp/kuskus/blob/main/src/GlobalContext/userDetails.ts it wraps the whole app here: https://github.com/kuskusapp/kuskus/blob/main/src/pages/App.tsx#L69...

eponymous

5/16/2023

Why does routeData() return undefined?

I am fetching data from my Directus backend in createServerData$ like this: ``` export function routeData() { return createServerData$(...

dmayo2

5/16/2023

Page Refresh or Browser Button or ...

Good Day. I'm trying to figure out if a page has been reloaded or entered naturally via a link, etc. I've tried window.performance.getEntriesByType("navigation") but when I redirect via navigate('/page2') that api thinks the page was refreshed. ...

FjordWarden

5/16/2023

How to iterate over Object.entries()?

How does one use <index> or <for> together with Object.entries(obj) ``` function Example() { const [schema] = createSignal({'paths':{'/foo':{'a':'a'},'/bar':{'b':'b'}}})...

DaOfficialWizard🧙

5/16/2023

Help with Forward Ref and Ref from solid-primatives

I am still pretty new to solidjs and typescipt in general, i am trying to port a library from react to solid and am 90% of the way there - however i am having difficulties with using a forward Ref. There are two sections that are confusing me - that i would like help trying to solve.

Chart.tsx...

Max

5/15/2023

Updating only one property on an object

Hi, as I understand if one property of an object that is a signal updates, then all other properties will also rerun. It that correct? If yea is it because the object itself is dependent on its own properties so if one change the rest do. I have this as a simple example with style ```ts...

avant

5/15/2023

createRouteAction Form TypeScript

Why is she screaming at me?

Braveheart

5/15/2023

using the callback to <Show> and update store, results in whole store being set to new value

  <Show when={'companyName' in formDataStore && formDataStore}>
      {(currentDataStore) => {
        return (

  <Show when={'companyName' in formDataStore && formDataStore}>
      {(currentDataStore) => {
        return (

...

deluksic

5/15/2023

Resource has wrong types?

Please take a look at this example: https://playground.solidjs.com/anonymous/1c0baf1f-20e7-4bc8-a878-6afe824ce4c1 In the createEffect, the type of shouldBeUndefinedButItsNot is number, but console writes undefined on first run. Am I misusing createResource?...

avant

5/14/2023

Where to protect SolidStart routes?

I tried layouts, but it loads data only once per page if I'm right, so if user gets logged out it doesn't react I tried middleware like in here https://start.solidjs.com/advanced/middleware, but it didn't re-load either, so am I doing something wrong (I'm not the sharpest tool) or is there a better way?...

davedbase

5/13/2023

Identifying multiple versions of Solid installed

I'm having a bit of trouble with a large app. I have a number of Solid dependencies and one of those is likely somehow pulling in a version that is not congruent with my main app (which is on 1.7.5+). I usually use the lockfile to track down the dependency issues but it's super cumbersome because I have a lot of various dependencies. The issue I'm seeing is when I launch my start app, I get the duplicate versions error. Wondering how other people would would approach the problem?...

romanobro

5/12/2023

html not rendering consistently inside span

onFocusOut={() => {
          const newText = document.getElementById(id)?.innerHTML
          updateNote(id, newText)
        }}

...

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.