bobe 0.0.26 → 0.0.27

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Store, Scope, Effect, SignalNode } from 'aoye';
+import { Store, Scope, Signal, Computed, Effect, SignalNode } from 'aoye';
 export * from 'aoye';
 import { Queue } from 'bobe-shared';
 
@@ -52,7 +52,8 @@ declare class Tokenizer {
      * for arr ; item index; item.key
      * @returns {boolean} 是否含有 key
      */
-    forLoopSubExp(): boolean;
+    jsExp(): Token;
+    peekChar(): string;
     private assignment;
     private pipe;
     private dynamic;
@@ -101,8 +102,12 @@ declare class Interpreter {
      *  */
     declaration(ctx: ProgramCtx): any;
     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;
     forItemId: number;
     createForItem(forNode: ForNode, i: number, parentData: any): ForItemNode;
+    getItemData(forNode: ForNode, i: number, parentData: any): Record<any, any>;
     getData(): any;
     /**
      * key 元素，组件的 key
@@ -254,10 +259,12 @@ type ForNode = LogicNode & {
     indexName?: string;
     getKey?: (data: any) => any;
     arr: any[];
+    arrSignal: Signal<any[]> | Computed<any[]>;
     effect: Effect;
     i: number;
     owner: ComponentNode | FragmentNode;
     prevSibling: any;
+    vars: string[];
 };
 type ForItemNode = LogicNode & {
     id: number;

package/dist/index.umd.js

@@ -158,6 +158,45 @@
     }
   }
 
+  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 _excluded = ["dentStack", "isFirstToken"];
   class Interpreter {
     constructor(tokenizer) {
@@ -210,6 +249,9 @@
           if (ctx.current.__logicType) {
             if (isLogicNode) {
               aoye.setPulling(ctx.current.effect);
+              if (ctx.current.__logicType & FakeType.ForItem) {
+                ctx.prevSibling = ctx.current.realBefore;
+              }
             }
           } else {
             if (ctx.current) {
@@ -260,8 +302,8 @@
                 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;
@@ -365,21 +407,25 @@
       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(bobeShared.jsVarRegexp).join(',');
-        itemExp = new Function('item', `let ${vars}; (${itemExp}=item); return {${vars}};`);
+        vars = itemExp.match(bobeShared.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;
@@ -392,12 +438,14 @@
         realBefore: prevSibling?.realAfter || prevSibling,
         realAfter: null,
         arr: null,
+        arrSignal: null,
         itemExp,
         indexName,
         getKey: null,
         children: [],
         effect: null,
         owner,
+        vars,
         i: 0
       };
       if (keyExp) {
@@ -408,6 +456,7 @@
       const cells = data[aoye.Keys.Meta].cells;
       const hasArrExpKey = Reflect.has(data[aoye.Keys.Raw], arrExp);
       const arrSignal = hasArrExpKey ? (data[arrExp], cells.get(arrExp)) : new aoye.Computed(this.getFn(data, arrExp));
+      forNode.arrSignal = arrSignal;
       forNode.realAfter = this.insertAfterAnchor('for-after');
       const _forNode$snapshot = forNode.snapshot;
         _forNode$snapshot.dentStack;
@@ -415,26 +464,23 @@
         const snapshotForUpdate = _objectWithoutProperties(_forNode$snapshot, _excluded);
       let isFirstRender = true;
       forNode.effect = new aoye.Effect(() => {
-        let arr = forNode.arr = arrSignal.get();
+        let arr = arrSignal.get();
         arr[aoye.Keys.Iterator];
-        arr = aoye.toRaw(arr);
+        const prevCtx = aoye.getPulling();
+        aoye.setPulling(null);
+        forNode.arr = arr = aoye.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 {
@@ -448,65 +494,210 @@
           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;
-                aoye.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 {
-                Object.assign(child.data, itemExp(arr[i]));
+                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 {
+                break;
+              }
+            }
+            if (s > e1) {
+              if (s <= e2) {
+                const lastAfter = children.at(-1)?.realAfter || forNode.realBefore;
+                for (let i = e2; i >= s; i--) {
+                  this.insertForItem(forNode, i, data, newChildren, lastAfter, 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;
+        aoye.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;
+      aoye.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;
+        }
+      }
+    }
     forItemId = 0;
     createForItem(forNode, i, parentData) {
       let forItemNode;
+      let data;
       const scope = new aoye.Scope(() => {});
       scope.scope = null;
       aoye.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,
-        getKey = forNode.getKey;
+        vars = forNode.vars,
+        arrSignal = forNode.arrSignal;
       let data;
       if (typeof itemExp === 'string') {
         data = aoye.deepSignal(indexName ? {
@@ -516,26 +707,18 @@
           [itemExp]: arr[i]
         }, aoye.getPulling());
       } else {
-        const rawData = itemExp(arr[i]);
-        if (indexName) {
-          rawData[indexName] = i;
+        data = aoye.deepSignal(indexName ? {
+          [indexName]: i
+        } : {}, aoye.getPulling());
+        const computedData = new aoye.Computed(() => itemExp(arrSignal.get()[i]));
+        const cells = data[aoye.Keys.Meta].cells;
+        for (let i = 0; i < vars.length; i++) {
+          const name = vars[i];
+          cells.set(name, new aoye.Computed(() => computedData.get()[name]));
         }
-        data = aoye.deepSignal(rawData, aoye.getPulling());
       }
       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),
@@ -1034,36 +1217,27 @@
       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, '=');
     }