From 181de6c9a1a1c57e9c63b7960e944d5128a1f3f8 Mon Sep 17 00:00:00 2001
From: Abhishiv Saxena <abhishiv@gmail.com>
Date: Mon, 24 Jun 2024 19:54:57 +0300
Subject: [PATCH] fixed pop in Each component

---
 examples/kitchen-sink/src/index.tsx | 19 ++++++++++++++-----
 src/stdlib/Each/index.tsx           | 10 ++++++----
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/examples/kitchen-sink/src/index.tsx b/examples/kitchen-sink/src/index.tsx
index a5aed2a..818fb8f 100644
--- a/examples/kitchen-sink/src/index.tsx
+++ b/examples/kitchen-sink/src/index.tsx
@@ -83,13 +83,25 @@ export const Todos = component("Todos", (props, { signal, wire, store }) => {
           style="width: 100%; max-width: 400px;"
         />
       </form>
+      <a
+        href="#"
+        onClick={(e) => {
+          e.preventDefault();
+          produce($todos.items, (items) => {
+            //items.splice(0, 0, json);
+            items.pop();
+          });
+        }}
+      >
+        remove first(pop)
+      </a>
       <ul>
         <Each
           cursor={$todos.items}
           renderItem={(cursor, i) => {
             const v = reify(cursor);
             return (
-              <li key={i}>
+              <li key={i + ""}>
                 <span style="padding: 0 4px 0 0 ;">
                   <button
                     onClick={(e) => {
@@ -112,13 +124,10 @@ export const Todos = component("Todos", (props, { signal, wire, store }) => {
   );
 });
 
-const Test = component("Test", (props, utils) => {
-  return <div key="1">hey</div>;
-});
-
 export const Layout = component<{}>(
   "Layout",
   (props, { signal, wire, api }) => {
+    //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
index c108b6e..745cf5e 100644
--- a/src/stdlib/Each/index.tsx
+++ b/src/stdlib/Each/index.tsx
@@ -62,20 +62,22 @@ export const Each: <T extends ArrayOrObject>(
       //console.debug("change", changes, path);
 
       //      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 { treeStep, el } = renderArray(
-          parentStep,
+          pStep,
           props.renderItem,
           cursor,
           value,
           index
         );
-        const previousChildren = [...parentStep.children];
+
         const { registry, root } = reifyTree(renderContext, el, parentStep);
-        addNode(renderContext, parentStep, root);
+        addNode(renderContext, pStep, root);
       } else if (data.name === "pop") {
-        const previousChildren = [...parentStep.children];
+        if (!pStep || !pStep.children) return;
+        const previousChildren = [...pStep.children];
         const firstNode = previousChildren[0];
         if (firstNode) removeNode(renderContext, firstNode);
       } else if (data.name === "splice") {