Merge pull request solidjs#1699 from mdynnl/fix-stores

stores: array items tracking, removal, fixes solidjs#1695
minh0ref · Apr 30, 2023 · 775edd3 · 775edd3
2 parents f04bdc9 + 8e7a483
commit 775edd3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/packages/solid/store/src/store.ts b/packages/solid/store/src/store.ts
@@ -228,8 +228,10 @@ export function setProperty(
     node: DataNode | undefined;
   if ((node = getDataNode(nodes, property, prev))) node.$(() => value);
 
-  if (Array.isArray(state) && state.length !== len)
+  if (Array.isArray(state) && state.length !== len) {
+    for (let i = state.length; i < len; i++) (node = nodes[i]) && node.$();
     (node = getDataNode(nodes, "length", len)) && node.$(state.length);
+  }
   (node = nodes._) && node.$();
 }
 

diff --git a/packages/solid/store/test/store.spec.ts b/packages/solid/store/test/store.spec.ts
@@ -292,6 +292,27 @@ describe("Tracking State changes", () => {
     setState("user", "firstName", "Jake");
   });
 
+  test("Track array item on removal", () => {
+    const [state, setState] = createStore([1]);
+    createRoot(() => {
+      let executionCount = 0;
+
+      expect.assertions(2);
+      createEffect(() => {
+        if (executionCount === 0) {
+          expect(state[0]).toBe(1);
+        } else if (executionCount === 1) {
+          expect(state[0]).toBe(undefined);
+        } else {
+          // should never get here
+          expect(executionCount).toBe(-1);
+        }
+        executionCount++;
+      });
+    });
+    setState([]);
+  });
+
   test("Tracking Top-Level Array iteration", () => {
     const [state, setState] = createStore(["hi"]);
     let executionCount = 0;