fixed <Each> implementation

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();
         }}
@@ -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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "alfama",
-  "version": "0.3.24",
+  "version": "0.9.0",
   "author": "Abhishiv Saxena<[email protected]>",
   "license": "MIT",
   "description": "Fine-grained reactive library with no compiler, no magic, and no virtual DOM",

src/dom/api.ts

@@ -104,11 +104,7 @@ export const addNode = (
     const elementsToInsert = node.dom;
     if (before) {
       const beforeIndex = parentStep.children.indexOf(before);
-      parentStep.children.splice(
-        beforeIndex === 0 ? 0 : beforeIndex - 1,
-        0,
-        node
-      );
+      parentStep.children.splice(beforeIndex, 0, node);
 
       const refNode: HTMLElement = before.dom as HTMLElement;
       refNode.before(elementsToInsert);

src/stdlib/Each/index.tsx

@@ -97,6 +97,7 @@ export const Each: <T extends ArrayOrObject>(
         // Add the new nodes being spliced in
         items.forEach((item, i) => {
           const index = startIndex + i;
+          const previousChildren = [...(pStep.children || [])];
           const { treeStep, el } = renderArray(
             pStep,
             props.renderItem,
@@ -106,6 +107,15 @@ export const Each: <T extends ArrayOrObject>(
           );
           const { registry, root } = reifyTree(renderContext, el, pStep);
           const before = previousChildren[startIndex + i] || null;
+          console.log(previousChildren);
+          console.log("before", {
+            startIndex,
+            i,
+            before,
+            pStep,
+            parentStep,
+            root,
+          });
           addNode(renderContext, pStep, root, before);
         });
       }