bobe 0.0.53 → 0.0.54

package/dist/index.d.ts

@@ -31,10 +31,16 @@ declare class Interpreter {
      *  */
     declaration(ctx: ProgramCtx): any;
     createContextNode(): ContextNode;
+    formatForCollection(collection: any): {
+        arr: any[];
+        keys: string[] | null;
+    };
     forDeclaration(): ForNode | ForItemNode;
     insertForItem(forNode: ForNode, i: number, parentData: any, newChildren: ForItemNode[], before: any, snapshotForUpdate: any): void;
     removeForItem(children: ForItemNode[], i: number): void;
-    reuseForItem(child: ForItemNode, data: any, itemExp: string | ((value: any) => any), i: number, indexName?: string): void;
+    reuseForItem(child: ForItemNode, data: any, itemExp: string | ((value: any) => any), i: number, indexName?: string, 
+    /** Map/Set 等有 key 时，index 值为 key */
+    indexValue?: any): void;
     forItemId: number;
     createForItem(forNode: ForNode, i: number, parentData: any): ForItemNode;
     getItemData(forNode: ForNode, i: number, parentData: any): Record<any, any>;
@@ -258,6 +264,9 @@ type ForNode = Omit<LogicNode, 'data'> & {
     indexName?: string;
     getKey?: (data: any) => any;
     arr: any[];
+    /** 响应式版本：数组为 proxy、Map/Set 的 item 已被 deepSignal 包装 */
+    reactiveArr: any[];
+    keys: string[] | null;
     arrSignal: Signal<any[]> | Computed<any[]>;
     effect: Effect;
     i: number;

package/dist/index.umd.js

@@ -1657,6 +1657,44 @@
       node.realAfter = this.insertAfterAnchor('context-after');
       return node;
     }
+    formatForCollection(collection) {
+      const res = {
+        arr: [],
+        keys: null
+      };
+      if (Array.isArray(collection)) {
+        res.arr = collection;
+        return res;
+      }
+      if (collection instanceof Map) {
+        res.keys = [];
+        collection.forEach((v, k) => {
+          res.arr.push(v);
+          res.keys.push(k);
+        });
+        return res;
+      }
+      if (typeof collection === 'object' && collection !== null) {
+        if (collection[Symbol.iterator]) {
+          res.arr = Array.from(collection);
+          return res;
+        }
+        res.arr = Object.values(collection);
+        res.keys = Object.keys(collection);
+        return res;
+      }
+      if (typeof collection === 'number') {
+        res.arr = Array.from({
+          length: collection
+        });
+        return res;
+      }
+      if (typeof collection === 'string') {
+        res.arr = collection.split('');
+        return res;
+      }
+      return res;
+    }
     forDeclaration() {
       const arrExp = this.tokenizer.jsExp().value;
       this.tokenizer.nextToken();
@@ -1693,6 +1731,8 @@
         realBefore: prevSibling?.realAfter || prevSibling,
         realAfter: null,
         arr: null,
+        reactiveArr: null,
+        keys: null,
         arrSignal: null,
         itemExp,
         indexName,
@@ -1719,11 +1759,17 @@
         const snapshotForUpdate = _objectWithoutProperties(_forNode$snapshot, _excluded);
       let isFirstRender = true;
       forNode.effect = new this.Effect(() => {
-        let arr = arrSignal.get();
+        const collection = arrSignal.get();
+        const _this$formatForCollec = this.formatForCollection(collection),
+          formattedArr = _this$formatForCollec.arr,
+          keys = _this$formatForCollec.keys;
+        let arr = formattedArr;
         arr[aoye.Keys.Iterator];
         const prevCtx = aoye.getPulling();
         aoye.setPulling(null);
-        forNode.arr = arr = aoye.toRaw(arr);
+        forNode.reactiveArr = formattedArr;
+        forNode.arr = Array.isArray(collection) ? aoye.toRaw(arr) : arr;
+        forNode.keys = keys;
         const children = forNode.children;
         if (isFirstRender) {
           const len = arr.length;
@@ -1761,7 +1807,7 @@
             for (let i = minLen; i--;) {
               const child = children[i];
               newChildren[i] = child;
-              this.reuseForItem(child, arr[i], itemExp, i, indexName);
+              this.reuseForItem(child, arr[i], itemExp, i, indexName, keys?.[i]);
             }
           } else {
             let s = 0,
@@ -1774,7 +1820,7 @@
               const key = forNode.getKey(itemData);
               if (old === key) {
                 newChildren[s] = child;
-                this.reuseForItem(child, arr[s], itemExp, s, indexName);
+                this.reuseForItem(child, arr[s], itemExp, s, indexName, keys?.[s]);
                 s++;
               } else {
                 break;
@@ -1787,7 +1833,7 @@
               const key = forNode.getKey(itemData);
               if (old === key) {
                 newChildren[e2] = child;
-                this.reuseForItem(child, arr[e2], itemExp, e2, indexName);
+                this.reuseForItem(child, arr[e2], itemExp, e2, indexName, keys?.[e2]);
                 e1--;
                 e2--;
               } else {
@@ -1829,7 +1875,7 @@
                 }
                 const child = children[i];
                 newChildren[newI] = child;
-                this.reuseForItem(child, arr[newI], itemExp, newI, indexName);
+                this.reuseForItem(child, arr[newI], itemExp, newI, indexName, keys?.[newI]);
                 new2oldI[newI - s2] = i;
                 key2new.delete(key);
                 if (newI < maxIncNewI) {
@@ -1915,15 +1961,15 @@
       this.remove(child.realAfter);
       child.effect.dispose();
     }
-    reuseForItem(child, data, itemExp, i, indexName) {
+    reuseForItem(child, data, itemExp, i, indexName, indexValue) {
       if (typeof itemExp === 'string') {
         child.data[itemExp] = data;
         if (indexName) {
-          child.data[indexName] = i;
+          child.data[indexName] = indexValue ?? i;
         }
       } else {
         indexName = indexName || KEY_INDEX;
-        child.data[indexName] = i;
+        child.data[indexName] = indexValue ?? i;
       }
     }
     forItemId = 0;
@@ -1957,23 +2003,24 @@
         itemExp = forNode.itemExp,
         vars = forNode.vars,
         arrSignal = forNode.arrSignal,
-        getKey = forNode.getKey;
+        getKey = forNode.getKey,
+        keys = forNode.keys;
       let indexName = forNode.indexName;
       let data;
       if (typeof itemExp === 'string') {
         data = aoye.deepSignal(indexName ? {
           [itemExp]: arr[i],
-          [indexName]: i
+          [indexName]: keys?.[i] ?? i
         } : {
           [itemExp]: arr[i]
         }, aoye.getPulling());
       } else {
         indexName = indexName ?? KEY_INDEX;
         const rawData = {
-          [indexName]: i
+          [indexName]: keys?.[i] ?? i
         };
         data = aoye.deepSignal(rawData, aoye.getPulling());
-        const computedData = new aoye.Computed(() => itemExp(arrSignal.get()[getKey ? data[indexName] : i]));
+        const computedData = new aoye.Computed(() => itemExp((arrSignal.get(), forNode.reactiveArr)[getKey ? data[indexName] : keys ? (data[indexName], i) : i]));
         const cells = data[aoye.Keys.Meta].cells;
         for (let i = 0; i < vars.length; i++) {
           const name = vars[i];