bobe 0.0.53 → 0.0.54

package/dist/bobe.compiler.esm.js

@@ -1682,6 +1682,44 @@ class Interpreter {
     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();
@@ -1718,6 +1756,8 @@ class Interpreter {
       realBefore: prevSibling?.realAfter || prevSibling,
       realAfter: null,
       arr: null,
+      reactiveArr: null,
+      keys: null,
       arrSignal: null,
       itemExp,
       indexName,
@@ -1744,11 +1784,17 @@ class Interpreter {
       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[Keys.Iterator];
       const prevCtx = getPulling();
       setPulling(null);
-      forNode.arr = arr = toRaw(arr);
+      forNode.reactiveArr = formattedArr;
+      forNode.arr = Array.isArray(collection) ? toRaw(arr) : arr;
+      forNode.keys = keys;
       const children = forNode.children;
       if (isFirstRender) {
         const len = arr.length;
@@ -1786,7 +1832,7 @@ class Interpreter {
           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,
@@ -1799,7 +1845,7 @@ class Interpreter {
             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;
@@ -1812,7 +1858,7 @@ class Interpreter {
             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 {
@@ -1854,7 +1900,7 @@ class Interpreter {
               }
               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) {
@@ -1940,15 +1986,15 @@ class Interpreter {
     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;
@@ -1982,23 +2028,24 @@ class Interpreter {
       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 = deepSignal(indexName ? {
         [itemExp]: arr[i],
-        [indexName]: i
+        [indexName]: keys?.[i] ?? i
       } : {
         [itemExp]: arr[i]
       }, getPulling());
     } else {
       indexName = indexName ?? KEY_INDEX;
       const rawData = {
-        [indexName]: i
+        [indexName]: keys?.[i] ?? i
       };
       data = deepSignal(rawData, getPulling());
-      const computedData = new Computed(() => itemExp(arrSignal.get()[getKey ? data[indexName] : i]));
+      const computedData = new Computed(() => itemExp((arrSignal.get(), forNode.reactiveArr)[getKey ? data[indexName] : keys ? (data[indexName], i) : i]));
       const cells = data[Keys.Meta].cells;
       for (let i = 0; i < vars.length; i++) {
         const name = vars[i];