v1.3.0 Much improved list rendering

README.md

@@ -139,8 +139,8 @@ export const Todos = component("Todos", (props, { signal, wire, store }) => {
     <ul>
       <Each
         cursor={$todos.items}
-        renderItem={(item) => {
-          return <li>{item.task}</li>;
+        renderItem={(cursor) => {
+          return <li>{cursor().task}</li>;
         }}
       ></Each>
     </ul>
@@ -241,8 +241,8 @@ export const Prosemirror = component("Prosemirror", (props, { onUnmount }) => {
 ```tsx
 <Each
   cursor={$todos.items}
-  renderItem={(item) => {
-    return <li>{wire(item.task)}</li>;
+  renderItem={(cursor) => {
+    return <li>{wire(cursor().task)}</li>;
   }}
 ></Each>
 ```

package.json

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

src/core/state/storeAPI.ts

@@ -48,9 +48,10 @@ export const reify = <T = unknown>(cursor: T): T => {
 
 export const produce = <T = unknown>(
   cursor: T,
-  setter: (obj: T) => void
+  setter: (obj: T) => void,
+  fv?: any
 ): void => {
-  const v = reify(cursor);
+  const v = fv ? fv : reify(cursor);
   setter(v);
 };
 

src/stdlib/Each/index.tsx

@@ -60,6 +60,10 @@ export const Each: <T extends ArrayOrObject>(
     if (!isArray) throw new Error("<Each/> needs array");
 
     const getItemCursor = (item: ExtractElement<typeof listCursor>) => {
+      const listValue: typeof listCursor = getValueUsingPath(
+        store.value as any,
+        listCursorPath
+      ) as typeof listCursor;
       const index = listValue.indexOf(item);
       if (index > -1) {
         return props.cursor[index];
@@ -73,12 +77,11 @@ export const Each: <T extends ArrayOrObject>(
       //console.log("Each list change", change, listCursorPath, path);
       const pStep = parentStep.children[0];
       const previousChildren = [...(pStep.children || [])];
+      // list reset
       if (listCursorPath.join() === path.join() && !data) {
         previousChildren.forEach((node) => {
           removeNode(renderContext, node);
         });
-        //console.log("should reset list");
-
         const startIndex = 0;
         (value as typeof props.cursor).forEach((item, index) => {
           const previousChildren = [...(pStep.children || [])];