Classy-solid and nested createEffect observations

Question

Considering moving to SolidJS. I really like its simplicity. I like the createMutable, too, as it means I can pass single items around and eliminate a lot of set/get code. Finally, I prefer classes, and having classes own/update their own state, so I'm using classy-solid.

I ran into a case, though, where an effect is not getting run. I'm not sure if this not supported, or if it is supported and I'm doing something wrong. Here's the simplified code:

export @reactive class ItemList 
{
  constructor() {
    // This effect doesn't get called when items changes.
    createEffect(() => {
      let s = 0
      this.items.forEach(i => s += i.x)
      this.sum = s;
    })
  }
  @signal sum: number = 0
  @signal items: Item[] = []
}

export @reactive class Item 
{ 
  constructor(x: number) {
    this.x = x;
  }
    @signal x: number
}

The top level code is as follows:

function App (): JSX.Element {
  const iList = createMutable(new ItemList())
  // Uncommenting this effect makes the code work as expected.
  // createEffect(() => {
  //   let s = 0
  //   iList.items.forEach(i => s += i.x)
  //   console.log(s)
  //   iList.sum = s;
  // })
  
  return (
    <div>
      <button onClick={() => iList.items.push(new Item(5))}>Add</button><br/>
      <For each={iList.items}>{(item,i) =>
        <>{i}: x = <input value={item.x} onInput={e => item.x = Number(e.currentTarget.value)}/><br/></>
      }</For><br/>
      Sum: {iList.sum}
    </div>
  )
}

I expect the createEffect in the ItemList constructor to update sum when new items are added or x values are changed. However, it is not getting called.

If I uncomment the createEffect in the App, the sum values are getting updated correctly.

I'm guessing I've run into a case where createMutable and classy-solid don't work together?

Thanks in advance for any help!

Classy-solid and nested createEffect observations

0 Answers0