bobe 0.0.26 → 0.0.28

package/dist/bobe.esm.js

@@ -1,4 +1,4 @@
-import { getPulling, setPulling, Keys, Computed, Effect, toRaw, Scope, runWithPulling, deepSignal, Store, shareSignal, effect } from 'aoye';
+import { getPulling, setPulling, Keys, Computed, Effect, toRaw, runWithPulling, Scope, deepSignal, Store, shareSignal, effect } from 'aoye';
 export * from 'aoye';
 import { jsVarRegexp, Queue, isNum, matchIdStart2 } from 'bobe-shared';
 
@@ -156,6 +156,47 @@ class MultiTypeStack {
   }
 }
 
+function macInc(arr) {
+  const len = arr.length;
+  let candyLast = [],
+    i = 0;
+  while (i < len) {
+    const it = arr[i];
+    if (it !== -1) {
+      candyLast = [i];
+      break;
+    }
+    i++;
+  }
+  if (i + 1 >= len) return candyLast;
+  const toPrev = new Int32Array(len);
+  while (i < len) {
+    const target = arr[i];
+    if (target === -1) continue;
+    let start = -1,
+      end = candyLast.length;
+    while (start + 1 < end) {
+      const mid = start + end >> 1;
+      if (arr[candyLast[mid]] < target) {
+        start = mid;
+      } else {
+        end = mid;
+      }
+    }
+    candyLast[end] = i;
+    toPrev[i] = candyLast[start];
+    i++;
+  }
+  let length = candyLast.length;
+  for (let j = length - 1; j > 0; j--) {
+    const prev = toPrev[candyLast[j]];
+    candyLast[j - 1] = prev;
+  }
+  return candyLast;
+}
+
+const KEY_INDEX = '__BOBE_KEY_INDEX';
+
 const _excluded = ["dentStack", "isFirstToken"];
 class Interpreter {
   constructor(tokenizer) {
@@ -208,6 +249,9 @@ class Interpreter {
         if (ctx.current.__logicType) {
           if (isLogicNode) {
             setPulling(ctx.current.effect);
+            if (ctx.current.__logicType & FakeType.ForItem) {
+              ctx.prevSibling = ctx.current.realBefore;
+            }
           }
         } else {
           if (ctx.current) {
@@ -258,8 +302,8 @@ class Interpreter {
               this.tokenizer.resume(snapshot);
               this.tokenizer.nextToken();
               this.tokenizer.nextToken();
-              ctx.prevSibling = parent;
               ctx.current = forNode.children[++forNode.i];
+              ctx.prevSibling = ctx.current.realBefore;
               continue;
             }
             ctx.prevSibling = forNode.prevSibling;
@@ -363,21 +407,25 @@ class Interpreter {
     this.tokenizer.nextToken();
     const itemToken = this.tokenizer.nextToken();
     const isDestruct = itemToken.type === TokenType.InsertionExp;
-    let itemExp = itemToken.value;
+    let itemExp = itemToken.value,
+      vars;
     if (isDestruct) {
       itemExp = '{' + itemExp + '}';
-      const vars = itemExp.match(jsVarRegexp).join(',');
-      itemExp = new Function('item', `let ${vars}; (${itemExp}=item); return {${vars}};`);
+      vars = itemExp.match(jsVarRegexp);
+      const varStr = vars.join(',');
+      itemExp = new Function(itemExp, `return {${varStr}};`);
     }
-    let indexName, keyExp;
-    while (this.tokenizer.code[this.tokenizer.i] !== '\n') {
-      const next = this.tokenizer.nextToken();
-      if (next.type !== TokenType.Semicolon) {
-        if (!indexName) {
-          indexName = next.value;
-        } else {
-          keyExp = next.value;
-        }
+    let indexName,
+      keyExp,
+      char = this.tokenizer.peekChar();
+    if (char === ';') {
+      this.tokenizer.nextToken();
+      if (this.tokenizer.peekChar() !== '\n') keyExp = this.tokenizer.jsExp().value;
+    } else if (char === '\n') ; else {
+      indexName = this.tokenizer.nextToken().value;
+      if (this.tokenizer.peekChar() === ';') {
+        this.tokenizer.nextToken();
+        if (this.tokenizer.peekChar() !== '\n') keyExp = this.tokenizer.jsExp().value;
       }
     }
     const owner = this.ctx.stack.peekByType(NodeSort.TokenizerSwitcher)?.node;
@@ -390,12 +438,14 @@ class Interpreter {
       realBefore: prevSibling?.realAfter || prevSibling,
       realAfter: null,
       arr: null,
+      arrSignal: null,
       itemExp,
       indexName,
       getKey: null,
       children: [],
       effect: null,
       owner,
+      vars,
       i: 0
     };
     if (keyExp) {
@@ -406,6 +456,7 @@ class Interpreter {
     const cells = data[Keys.Meta].cells;
     const hasArrExpKey = Reflect.has(data[Keys.Raw], arrExp);
     const arrSignal = hasArrExpKey ? (data[arrExp], cells.get(arrExp)) : new Computed(this.getFn(data, arrExp));
+    forNode.arrSignal = arrSignal;
     forNode.realAfter = this.insertAfterAnchor('for-after');
     const _forNode$snapshot = forNode.snapshot;
       _forNode$snapshot.dentStack;
@@ -413,26 +464,23 @@ class Interpreter {
       const snapshotForUpdate = _objectWithoutProperties(_forNode$snapshot, _excluded);
     let isFirstRender = true;
     forNode.effect = new Effect(() => {
-      let arr = forNode.arr = arrSignal.get();
+      let arr = arrSignal.get();
       arr[Keys.Iterator];
-      arr = toRaw(arr);
+      const prevCtx = getPulling();
+      setPulling(null);
+      forNode.arr = arr = toRaw(arr);
       const children = forNode.children;
       if (isFirstRender) {
         const len = arr.length;
         for (let i = len; i--;) {
-          const nextItem = children[i + 1];
           const item = this.createForItem(forNode, i, data);
-          const anchor = this.insertAfterAnchor('for-item-after');
-          item.realAfter = anchor;
-          if (nextItem) {
-            nextItem.realBefore = anchor;
-          }
+          item.realAfter = this.insertAfterAnchor('for-item-after');
+          item.realBefore = this.insertAfterAnchor('for-item-before');
           item.realParent = forNode.realParent;
           children[i] = item;
         }
         const firstInsert = children[0];
         if (firstInsert) {
-          firstInsert.realBefore = forNode.realBefore;
           this.tokenizer.nextToken();
           this.tokenizer.nextToken();
         } else {
@@ -446,65 +494,214 @@ class Interpreter {
         if (!forNode.getKey) {
           if (newLen < oldLen) {
             for (let i = oldLen - 1; i >= newLen; i--) {
-              const child = children[i];
-              this.removeLogicNode(child);
-              this.remove(child.realAfter);
-              child.effect.dispose();
+              this.removeForItem(children, i);
             }
           }
           if (oldLen < newLen) {
             const lastAfter = children.at(-1)?.realAfter || forNode.realBefore;
             for (let i = newLen - 1; i >= oldLen; i--) {
-              const item = this.createForItem(forNode, i, data);
-              newChildren[i] = item;
-              const nextItem = newChildren[i + 1];
-              const anchor = this.createAnchor('for-item-after');
-              this.insertAfter(forNode.realParent, anchor, lastAfter);
-              item.realAfter = anchor;
-              if (nextItem) {
-                nextItem.realBefore = anchor;
-              }
-              item.realParent = forNode.realParent;
-              this.tokenizer = owner.tokenizer;
-              this.tokenizer.resume(snapshotForUpdate);
-              this.tokenizer.useDedentAsEof = false;
-              runWithPulling(() => {
-                this.program(forNode.realParent, forNode.owner, lastAfter, item);
-              }, item.effect);
-            }
-            const firstInsert = newChildren[oldLen];
-            if (firstInsert) {
-              firstInsert.realBefore = lastAfter;
+              this.insertForItem(forNode, i, data, newChildren, lastAfter, snapshotForUpdate);
             }
           }
           for (let i = minLen; i--;) {
             const child = children[i];
             newChildren[i] = child;
-            if (typeof itemExp === 'string') {
-              child.data[itemExp] = arr[i];
+            this.reuseForItem(child, arr[i], itemExp, i, indexName);
+          }
+        } else {
+          let s = 0,
+            e1 = oldLen - 1,
+            e2 = newLen - 1;
+          while (s <= e1 && s <= e2) {
+            const child = children[s];
+            const old = child.key;
+            const itemData = this.getItemData(forNode, s, data);
+            const key = forNode.getKey(itemData);
+            if (old === key) {
+              newChildren[s] = child;
+              this.reuseForItem(child, arr[s], itemExp, s, indexName);
+              s++;
+            } else {
+              break;
+            }
+          }
+          while (s <= e1 && s <= e2) {
+            const child = children[e1];
+            const old = child.key;
+            const itemData = this.getItemData(forNode, e2, data);
+            const key = forNode.getKey(itemData);
+            if (old === key) {
+              newChildren[e2] = child;
+              this.reuseForItem(child, arr[e2], itemExp, e2, indexName);
+              e1--;
+              e2--;
             } else {
-              Object.assign(child.data, itemExp(arr[i]));
+              break;
+            }
+          }
+          if (s > e1) {
+            if (s <= e2) {
+              const firstBefore = s > 0 ? children.at(-1)?.realAfter || forNode.realBefore : forNode.realBefore;
+              for (let i = e2; i >= s; i--) {
+                this.insertForItem(forNode, i, data, newChildren, firstBefore, snapshotForUpdate);
+              }
+            }
+          } else if (s > e2) {
+            if (s <= e1) {
+              for (let i = e1; i >= s; i--) {
+                this.removeForItem(children, i);
+              }
+            }
+          } else {
+            let s1 = s,
+              s2 = s;
+            const mixLen = e2 - s2 + 1;
+            const key2new = new Map();
+            for (let i = s2; i <= e2; i++) {
+              const itemData = this.getItemData(forNode, i, data);
+              const key = forNode.getKey(itemData);
+              key2new.set(key, i);
+            }
+            let maxIncNewI = -1;
+            let hasMove = false;
+            const new2oldI = new Array(mixLen).fill(-1);
+            for (let i = s1; i <= e1; i++) {
+              const key = children[i].key;
+              const newI = key2new.get(key);
+              if (newI == null) {
+                this.removeForItem(children, i);
+                continue;
+              }
+              const child = children[i];
+              newChildren[newI] = child;
+              this.reuseForItem(child, arr[newI], itemExp, newI, indexName);
+              new2oldI[newI - s2] = i;
+              key2new.delete(key);
+              if (newI < maxIncNewI) {
+                hasMove = true;
+              } else {
+                maxIncNewI = newI;
+              }
+            }
+            if (!hasMove) {
+              key2new.forEach((i, key) => {
+                const before = i === 0 ? forNode.realBefore : newChildren[i - 1].realAfter;
+                this.insertForItem(forNode, i, data, newChildren, before, snapshotForUpdate);
+              });
+            } else {
+              const incI = macInc(new2oldI),
+                incLen = incI.length;
+              let p1, p2;
+              for (p1 = s2, p2 = 0; p1 <= e2; p1++) {
+                const oldI = new2oldI[p1];
+                if (oldI === -1) {
+                  const before = p1 === 0 ? forNode.realBefore : newChildren[p1 - 1].realAfter;
+                  this.insertForItem(forNode, p1, data, newChildren, before, snapshotForUpdate);
+                  continue;
+                }
+                const staticIdx = incI[p2] + s2;
+                if (p1 === staticIdx) {
+                  p2 <= incLen && p2++;
+                  continue;
+                }
+                let before = p1 === 0 ? forNode.realBefore : newChildren[p1 - 1].realAfter;
+                const child = newChildren[p1];
+                const realBefore = child.realBefore,
+                  realAfter = child.realAfter,
+                  realParent = child.realParent;
+                let point = realBefore,
+                  next;
+                do {
+                  next = this.nextSib(point);
+                  this.insertAfter(realParent, point, before);
+                  before = point;
+                  if (point === realAfter) break;
+                  point = next;
+                } while (true);
+              }
             }
           }
-          forNode.children = newChildren;
         }
+        forNode.children = newChildren;
       }
       isFirstRender = false;
+      setPulling(prevCtx);
+      return isDestroy => {
+        if (isDestroy) {
+          for (let i = 0; i < forNode.children.length; i++) {
+            const item = forNode.children[i];
+            item.effect.dispose();
+          }
+        }
+      };
     });
     return forNode.children[0] || forNode;
   }
+  insertForItem(forNode, i, parentData, newChildren, before, snapshotForUpdate) {
+    const item = this.createForItem(forNode, i, parentData);
+    newChildren[i] = item;
+    let realAfter = this.createAnchor('for-item-after');
+    this.handleInsert(forNode.realParent, realAfter, before);
+    let realBefore = this.createAnchor('for-item-before');
+    this.handleInsert(forNode.realParent, realBefore, before);
+    item.realBefore = realBefore;
+    item.realAfter = realAfter;
+    this.tokenizer = forNode.owner.tokenizer;
+    this.tokenizer.resume(snapshotForUpdate);
+    this.tokenizer.useDedentAsEof = false;
+    runWithPulling(() => {
+      this.program(forNode.realParent, forNode.owner, realBefore, item);
+    }, item.effect);
+  }
+  removeForItem(children, i) {
+    const child = children[i];
+    this.removeLogicNode(child);
+    this.remove(child.realBefore);
+    this.remove(child.realAfter);
+    child.effect.dispose();
+  }
+  reuseForItem(child, data, itemExp, i, indexName) {
+    if (typeof itemExp === 'string') {
+      child.data[itemExp] = data;
+      if (indexName) {
+        child.data[indexName] = i;
+      }
+    } else {
+      indexName = indexName || KEY_INDEX;
+      child.data[indexName] = i;
+    }
+  }
   forItemId = 0;
   createForItem(forNode, i, parentData) {
     let forItemNode;
+    let data;
     const scope = new Scope(() => {});
     scope.scope = null;
     runWithPulling(() => {
       scope.get();
     }, null);
+    data = this.getItemData(forNode, i, parentData);
+    forItemNode = {
+      id: this.forItemId++,
+      __logicType: FakeType.ForItem,
+      realParent: null,
+      realBefore: null,
+      realAfter: null,
+      forNode,
+      key: forNode.getKey?.(data),
+      effect: null,
+      data
+    };
+    forItemNode.effect = scope;
+    return forItemNode;
+  }
+  getItemData(forNode, i, parentData) {
     const arr = forNode.arr,
       itemExp = forNode.itemExp,
-      indexName = forNode.indexName,
+      vars = forNode.vars,
+      arrSignal = forNode.arrSignal,
       getKey = forNode.getKey;
+    let indexName = forNode.indexName;
     let data;
     if (typeof itemExp === 'string') {
       data = deepSignal(indexName ? {
@@ -514,26 +711,21 @@ class Interpreter {
         [itemExp]: arr[i]
       }, getPulling());
     } else {
-      const rawData = itemExp(arr[i]);
-      if (indexName) {
-        rawData[indexName] = i;
-      }
+      indexName = indexName ?? KEY_INDEX;
+      const rawData = {
+        [indexName]: i
+      };
       data = deepSignal(rawData, getPulling());
+      const computedData = new Computed(() => itemExp(arrSignal.get()[getKey ? data[indexName] : i]));
+      const cells = data[Keys.Meta].cells;
+      for (let i = 0; i < vars.length; i++) {
+        const name = vars[i];
+        rawData[name] = undefined;
+        cells.set(name, new Computed(() => computedData.get()[name]));
+      }
     }
     Object.setPrototypeOf(data, parentData);
-    forItemNode = {
-      id: this.forItemId++,
-      __logicType: FakeType.ForItem,
-      realParent: null,
-      realBefore: null,
-      realAfter: null,
-      forNode,
-      key: getKey?.(data),
-      effect: null,
-      data
-    };
-    forItemNode.effect = scope;
-    return forItemNode;
+    return data;
   }
   getData() {
     const _this$ctx$stack$peekB = this.ctx.stack.peekByType(NodeSort.CtxProvider),
@@ -1032,36 +1224,27 @@ class Tokenizer {
     this.setToken(TokenType.Identifier, value || true);
     return this.token;
   }
-  forLoopSubExp() {
+  jsExp() {
     this.token = null;
     let value = '';
-    let count = 0;
     while (1) {
       const char = this.code[this.i];
-      const isSemicolon = char === ';';
-      if (isSemicolon || char === '\n') {
-        value = value.trim();
-        if (!this.token) {
-          this.setToken(TokenType.Identifier, value);
-        } else {
-          this.waitingTokens.push({
-            type: TokenType.Identifier,
-            typeName: TokenType[TokenType.Identifier],
-            value
-          });
-        }
-        value = '';
-        count++;
-        if (count > 3) {
-          throw SyntaxError(`for 循环最多可包含三个表达式, 分别为 arr ; item index [; key]`);
-        }
-        if (!isSemicolon) return count === 3;
+      if (char === ';' || char === '\n') {
+        this.setToken(TokenType.Identifier, value.trim());
+        return this.token;
       } else {
         value += char;
       }
       this.i++;
     }
   }
+  peekChar() {
+    let i = this.i;
+    while (this.code[i] === ' ' || this.code[i] === '\t') {
+      i++;
+    }
+    return this.code[i];
+  }
   assignment() {
     this.setToken(TokenType.Assign, '=');
   }