Fix for <List> "unused" signal (#791)

Author: thetarnav

.changeset/clean-bulldogs-pump.md

@@ -0,0 +1,5 @@
+---
+"@solid-primitives/list": patch
+---
+
+Fix for `<List>` "unused" signal returning wrong values when read only after changes. (#791)

packages/list/README.md

@@ -36,8 +36,7 @@ function Component() {
       {(value, index) => {
         return (
           <div>
-            {" "}
-            {index()}: {value()}{" "}
+            {index()}: {value()}
           </div>
         );
       }}
@@ -54,7 +53,7 @@ Every element is keyed by item reference and index, but item reference is priori
 
 Underlying helper for `<List>` unkeyed control flow. Returns array with elements mapped using provided mapping function.
 
-Mapping function may use provided reactive value and reactive index, but signals for each of them are created only if they are used. Mapping function is ran only when original array has more elements than before. Elements are disposed only if original array has less elements than before.
+Mapping function may use provided reactive value and reactive index. Mapping function is ran only when original array has more elements than before. Elements are disposed only if original array has less elements than before.
 
 ## Demo
 

packages/list/src/index.ts

@@ -169,24 +169,22 @@ export function listArray<T, U>(
   }
   function mapper(disposer: () => void) {
     const t: ListItem<T> = {
-        value: newValue,
-        index: i,
-        disposer,
-      },
-      scopedV = newValue,
-      scopedI = i;
+      value: newValue,
+      index: i,
+      disposer,
+    };
     items.push(t);
     // signal created when used
     let sV: Accessor<T> = () => {
         [sV, t.valueSetter] = isDev
-          ? createSignal(scopedV, { name: "value" })
-          : createSignal(scopedV);
+          ? createSignal(t.value, { name: "value" })
+          : createSignal(t.value);
         return sV();
       },
       sI: Accessor<number> = () => {
         [sI, t.indexSetter] = isDev
-          ? createSignal(scopedI, { name: "index" })
-          : createSignal(scopedI);
+          ? createSignal(t.index, { name: "index" })
+          : createSignal(t.index);
         return sI();
       };
 

packages/list/test/index.test.tsx

@@ -302,4 +302,45 @@ describe("List", () => {
     unmount();
     document.body.removeChild(container);
   });
+
+  test("later used signal reports correct values", () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+
+    const startingArray = [1, 2, 3];
+    const [s, set] = createSignal(startingArray);
+    const callbacks: (() => { v: number; i: number })[] = [];
+    const unmount = render(
+      () => (
+        <List each={s()}>
+          {(v, i) => {
+            // this could be event callback (eg. onClick), v & i read only later
+            function futureAction() {
+              return {
+                v: v(),
+                i: i(),
+              };
+            }
+            callbacks.push(() => futureAction());
+
+            return <div>No signals used in this fn</div>;
+          }}
+        </List>
+      ),
+      container,
+    );
+
+    set([2, 1, 4]); // swap 1,2 & replace 3 with 4 (swap for index update, replace for value update)
+
+    // get entries, sort by index & check values in order
+    const values = callbacks
+      .map(x => x())
+      .sort((a, b) => a.i - b.i)
+      .map(x => x.v);
+
+    expect(values).toStrictEqual([2, 1, 4]);
+
+    unmount();
+    document.body.removeChild(container);
+  });
 });