Wes Posts - Answer Overflow

Wes

Explore posts from servers

•Created by Wes on 11/16/2024 in #support

All of a sudden `classList` is typed as string | undefined

I am using SolidJS with Astro and at one point I duplicated a component file to extract logic into it and now class and classList have unexpected types:

src/Wes95/components/Window.tsx:159:14 - error ts(2322): Type '{ children: Element[]; class: string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
  Property 'class' does not exist on type 'HTMLAttributes<HTMLDivElement>'.

159         <div class="WindowTitleButtons">

src/Wes95/components/Window.tsx:159:14 - error ts(2322): Type '{ children: Element[]; class: string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
  Property 'class' does not exist on type 'HTMLAttributes<HTMLDivElement>'.

159         <div class="WindowTitleButtons">

src/Wes95/components/Window.tsx:128:7 - error ts(2322): Type '{ Window: true; '-active': boolean; '-maximized': boolean | undefined; '-minimized': boolean | undefined; }' is not assignable to type 'string'.

128       classList={{
          ~~~~~~~~~

src/Wes95/components/Window.tsx:128:7 - error ts(2322): Type '{ Window: true; '-active': boolean; '-maximized': boolean | undefined; '-minimized': boolean | undefined; }' is not assignable to type 'string'.

128       classList={{
          ~~~~~~~~~

The reference is node_modules/.pnpm/[email protected]/node_modules/solid-js/types/jsx.d.ts and it does only contain:

  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // ...
    classList?: string | undefined;

  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // ...
    classList?: string | undefined;

What's going on?!

58 replies

SSolidJS

•Created by Wes on 2/28/2024 in #support

How to create a nested menu from a nested object?

I'm building a system where I have data from an external source that is structured as an object with nested levels, such as:

const menu = {
  id: 1,
  label: "One",
  items: [
    {
      id: 2,
      label: "Two",
      items: [
        {
          id: 3,
          label: "Three",
        },
      ],
    },
  ],
};

const menu = {
  id: 1,
  label: "One",
  items: [
    {
      id: 2,
      label: "Two",
      items: [
        {
          id: 3,
          label: "Three",
        },
      ],
    },
  ],
};

It can have an arbitrary number of options and submenus. How do I make a <Menu /> component that reacts to this object and renders recursively? My current solution is passing the properties after reading them, which is not reactive and therefore never updates.

12 replies

SSolidJS

•Created by Wes on 2/8/2024 in #support

How to better handle `from`'s possible `undefined` state?

I'm using from to observe a value from an external source. Because that's an observed value, it will be undefined at start. Further in my code I am using the value, for instance on a <Match>:

const volume = from<number>(bridge.observeVolume);

...

<Match when={volume() > 0}>

const volume = from<number>(bridge.observeVolume);

...

<Match when={volume() > 0}>

The problem here is that volume() is possibly undefined, which makes TypeScript mad because comparing undefined with number is a sin. Did I choose the wrong pattern nere? Do I need to further wrap the volume accessor in a memo to guarantee an initial value? Shouldn't it be possible to set the initial value as such?

const volume = from<number>(bridge.observeVolume, bridge.volume);

...

<Match when={volume() > 0}>

const volume = from<number>(bridge.observeVolume, bridge.volume);

...

<Match when={volume() > 0}>

8 replies

SSolidJS

•Created by Wes on 3/15/2023 in #support

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. Am I missing something?

7 replies

Gaming

Programming