fixed <List> for push, and pop

abhishiv · Jun 27, 2024 · 738eb32 · 738eb32
1 parent 3df121a
commit 738eb32
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 24 deletions.
diff --git a/examples/kitchen-sink/src/index.tsx b/examples/kitchen-sink/src/index.tsx
@@ -69,8 +69,8 @@ export const Todos = component("Todos", (props, { signal, wire, store }) => {
           json.stats = { count: 0 };
           console.log(json);
           produce($todos.items, (items) => {
-            items.splice(1, 0, json);
-            //items.push(json);
+            //items.splice(1, 0, json);
+            items.push(json);
           });
           (e.target as HTMLFormElement).reset();
         }}
@@ -93,7 +93,7 @@ export const Todos = component("Todos", (props, { signal, wire, store }) => {
             });
           }}
         >
-          remove first[Array#pop]
+          remove last[Array#pop]
         </a>
       </div>
       <ul>
@@ -128,7 +128,7 @@ export const Todos = component("Todos", (props, { signal, wire, store }) => {
 export const Layout = component<{}>(
   "Layout",
   (props, { signal, wire, api }) => {
-    //return <Todos />;
+    return <Todos />;
     const $count = signal("count", 0);
     const $doubleCount = wire(($) => $count($) * 2); // explicit subscription
 

diff --git a/src/stdlib/Each/index.tsx b/src/stdlib/Each/index.tsx
@@ -63,26 +63,24 @@ export const Each: <T extends ArrayOrObject>(
 
       //      console.log("list change", data, path, value);
       const pStep = parentStep.children[0];
-      if (data.name == "push") {
-        const index = (data.result as number) - 1; // push returns index
+      const previousChildren = [...(pStep.children || [])];
+      if (data.name === "push") {
+        const index = (data.result as number) - 1; // push returns new length
         const { treeStep, el } = renderArray(
           pStep,
           props.renderItem,
           cursor,
           value,
           index
         );
-
         const { registry, root } = reifyTree(renderContext, el, pStep);
         addNode(renderContext, pStep, root);
       } else if (data.name === "pop") {
-        if (!pStep || !pStep.children) return;
-        const previousChildren = [...pStep.children];
-
-        const firstNode = previousChildren[0];
-        if (firstNode) removeNode(renderContext, firstNode);
+        if (previousChildren.length > 0) {
+          const lastNode = previousChildren[previousChildren.length - 1];
+          removeNode(renderContext, lastNode);
+        }
       } else if (data.name === "splice") {
-        const previousChildren = [...parentStep.children];
         const [startIndex, deleteCount, ...items] = data.args as [
           number,
           number,
@@ -92,7 +90,11 @@ export const Each: <T extends ArrayOrObject>(
           startIndex,
           startIndex + deleteCount
         );
+
+        // Remove the nodes that are being spliced out
         nodesToRemove.forEach((n) => removeNode(renderContext, n));
+
+        // Add the new nodes being spliced in
         items.forEach((item, i) => {
           const index = startIndex + i;
           const { treeStep, el } = renderArray(
@@ -102,20 +104,10 @@ export const Each: <T extends ArrayOrObject>(
             value,
             index
           );
-          const previousChildren = [...pStep.children];
-          const before = previousChildren[index];
-          console.log("p", {
-            previousChildren,
-            before: before,
-            parentStep,
-            pStep,
-            index,
-          });
           const { registry, root } = reifyTree(renderContext, el, pStep);
+          const before = previousChildren[startIndex + i] || null;
           addNode(renderContext, pStep, root, before);
         });
-        // todo: add nodes at proper position
-        // needs modification of addNode function to take a treestep after which insertion should occur
       }
     };
     const task = { path, observor };