Solidjs VList reactivity not working

[imascha]

Describe the bug
As a minimal reproducable example, i created a VList with some example data and an Button that updates the example data.
But the DOM Elements don't update when the data is accessed trough the VList item, they only update when they are accessed trough the index. Is this wanted behaviour?

Example:

function App() {
  const [data, setData] = createSignal(["a", "b", "c", "d"]);
  return (
    <>
      <button onClick={() => setData(data().map((item) => item + item))}>
        Update data
      </button>
      <VList data={data()} style={{ height: "800px" }}>
        {(item, i) => (
          <div>
            {item} {data()[i]}
          </div>
        )}
      </VList>
    </>
  );
}

In this example only the {data()[i]} updates, when i click the button, the {item} never updates

To Reproduce
Here is a CodeSanbox of the Example: link

Expected behavior
Both the {data()[i]} and {item} should update, when i click the button

Platform:

• OS: Windows
• Browser: Chrome
• Version of this package: 0.29.1
• Version of framework: solid-js 1.8.14

[inokawa]

Hi, thank you for the reproduction.
Probably this is a bug. Perhaps we have to change the children API to have signal like (item, i) => <div>{item()} {i()}</div>.

I'll check this problem later, but it may take some time because I'm not a experienced Solid.js developer.
Any PR or contribution is welcome.

[imascha]

I was expecting it to work similar to the For primative from solid. There the item is not a function. I don't know if that is going to be difficult to implement. I'll check out if it is something i can fix.

[inokawa]

Released in 0.29.2. Thank you for the PR!