bobe 0.0.18 → 0.0.20

package/dist/bobe.esm.js

@@ -1,6 +1,6 @@
-import { getPulling, setPulling, effect, Store, deepSignal, Keys, shareSignal, $, runWithPulling } from 'aoye';
+import { getPulling, setPulling, Keys, $, effect, toRaw, scope, Store, deepSignal, shareSignal, runWithPulling } from 'aoye';
 export * from 'aoye';
-import { BaseEvent, Queue, isNum, matchIdStart } from 'bobe-shared';
+import { BaseEvent, jsVarRegexp, Queue, isNum, matchIdStart2 } from 'bobe-shared';
 
 var TokenType = /* @__PURE__ */ ((TokenType2) => {
   TokenType2[TokenType2["NewLine"] = 1] = "NewLine";
@@ -11,6 +11,7 @@ var TokenType = /* @__PURE__ */ ((TokenType2) => {
   TokenType2[TokenType2["Pipe"] = 32] = "Pipe";
   TokenType2[TokenType2["Eof"] = 64] = "Eof";
   TokenType2[TokenType2["InsertionExp"] = 128] = "InsertionExp";
+  TokenType2[TokenType2["Semicolon"] = 256] = "Semicolon";
   return TokenType2;
 })(TokenType || {});
 var FakeType = /* @__PURE__ */ ((FakeType2) => {
@@ -34,7 +35,6 @@ var NodeSort = /* @__PURE__ */ ((NodeSort2) => {
   NodeSort2[NodeSort2["TokenizerSwitcher"] = 16] = "TokenizerSwitcher";
   return NodeSort2;
 })(NodeSort || {});
-const IsAnchor = /* @__PURE__ */ Symbol("is-anchor");
 
 class MultiTypeStack {
   constructor() {
@@ -129,17 +129,33 @@ class MultiTypeStack {
   // }
 }
 
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 new BaseEvent();
 class Interpreter {
   constructor(tokenizer) {
     this.tokenizer = tokenizer;
     this.rootComponent = null;
+    this.forItemId = 0;
     this.oneRealPropParsed = this.onePropParsed.bind(this);
   }
   isLogicNode(node) {
     return node && node.__logicType & LogicalBit;
   }
-  program(root, componentNode, before) {
+  program(root, componentNode, before, ctxProvider) {
     var _a, _b;
     this.rootComponent = componentNode;
     this.tokenizer.nextToken();
@@ -149,6 +165,12 @@ class Interpreter {
       { node: componentNode, prev: null },
       NodeSort.Component | NodeSort.CtxProvider | NodeSort.TokenizerSwitcher
     );
+    if (ctxProvider) {
+      stack.push(
+        { node: ctxProvider, prev: null },
+        (ctxProvider.__logicType & LogicalBit ? NodeSort.Logic : 0) | NodeSort.CtxProvider
+      );
+    }
     const ctx = this.ctx = {
       realParent: root,
       prevSibling: before,
@@ -212,6 +234,21 @@ class Interpreter {
             const switcher = (_b = stack.peekByType(NodeSort.TokenizerSwitcher)) == null ? void 0 : _b.node;
             this.tokenizer = switcher.tokenizer;
           }
+          if (parent.__logicType === FakeType.ForItem) {
+            const { forNode } = parent;
+            const { i, arr, snapshot } = forNode;
+            if (i + 1 < arr.length) {
+              this.tokenizer.resume(snapshot);
+              this.tokenizer.nextToken();
+              this.tokenizer.nextToken();
+              ctx.prevSibling = parent;
+              ctx.current = forNode.children[++forNode.i];
+              continue;
+            }
+            ctx.prevSibling = forNode.prevSibling;
+            ctx.current = forNode;
+            continue;
+          }
         }
         ctx.prevSibling = prev;
         ctx.current = parent;
@@ -222,15 +259,10 @@ class Interpreter {
     }
     return componentNode;
   }
-  switcherIsRootComponent() {
-    var _a;
-    const currentSwitcher = (_a = this.ctx.stack.peekByType(NodeSort.TokenizerSwitcher)) == null ? void 0 : _a.node;
-    return currentSwitcher === this.rootComponent;
-  }
-  insertAfterAnchor(ctx) {
-    const { realParent, prevSibling, stack, before } = ctx;
-    const afterAnchor = this.createAnchor();
-    ctx.prevSibling = stack.length === 2 && !prevSibling ? before : prevSibling;
+  insertAfterAnchor(name = "anchor") {
+    const { realParent, prevSibling, stack, before } = this.ctx;
+    const afterAnchor = this.createAnchor(name);
+    this.ctx.prevSibling = stack.length === 2 && !prevSibling ? before : prevSibling;
     this.handleInsert(realParent, afterAnchor, prevSibling);
     return afterAnchor;
   }
@@ -252,7 +284,7 @@ class Interpreter {
       const childCmp = child;
       childCmp.realParent = parent;
       if (prev == null ? void 0 : prev.__logicType) {
-        childCmp.realBefore = prev.realAfter;
+        childCmp.realBefore = prev.forNode ? prev.forNode.realAfter : prev.realAfter;
       } else {
         childCmp.realBefore = prev;
       }
@@ -281,7 +313,10 @@ class Interpreter {
     let _node;
     if (value === "if" || value === "else" || value === "fail") {
       return this.condDeclaration(ctx);
+    } else if (value === "for") {
+      return this.forDeclaration();
     } else if (hookType) {
+      const data = this.getData();
       if (hookType === "static") {
         if (typeof value === "function") {
           _node = this.componentOrFragmentDeclaration(value, ctx);
@@ -289,7 +324,15 @@ class Interpreter {
           throw new SyntaxError(`declaration \u4E0D\u652F\u6301 ${value} \u7C7B\u578B\u7684\u9759\u6001\u63D2\u503C`);
         }
       } else {
-        _node = this.componentOrFragmentDeclaration(value, ctx);
+        const valueIsMapKey = Reflect.has(data[Keys.Raw], value);
+        const val = data[Keys.Raw][value];
+        if (typeof val === "function") {
+          _node = this.componentOrFragmentDeclaration(val, ctx);
+        } else {
+          const str = valueIsMapKey ? value : this.getFn(data, value);
+          _node = this.createNode("text");
+          this.onePropParsed(data, _node, "text", str, valueIsMapKey, false);
+        }
       }
     } else {
       _node = this.createNode(value);
@@ -303,6 +346,183 @@ class Interpreter {
     }
     return _node;
   }
+  forDeclaration() {
+    var _a;
+    const arrExp = this.tokenizer.nextToken().value;
+    this.tokenizer.nextToken();
+    const itemToken = this.tokenizer.nextToken();
+    const isDestruct = itemToken.type === TokenType.InsertionExp;
+    let itemExp = itemToken.value;
+    if (isDestruct) {
+      itemExp = "{" + itemExp + "}";
+      const vars = itemExp.match(jsVarRegexp).join(",");
+      itemExp = new Function("item", `let ${vars}; (${itemExp}=item); return {${vars}};`);
+    }
+    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;
+        }
+      }
+    }
+    const owner = (_a = this.ctx.stack.peekByType(NodeSort.TokenizerSwitcher)) == null ? void 0 : _a.node;
+    const prevSibling = this.ctx.prevSibling;
+    const forNode = {
+      __logicType: FakeType.For,
+      snapshot: this.tokenizer.snapshot(["dentStack", "isFirstToken"]),
+      realParent: this.ctx.realParent,
+      prevSibling,
+      realBefore: (prevSibling == null ? void 0 : prevSibling.realAfter) || prevSibling,
+      realAfter: null,
+      arr: null,
+      itemExp,
+      indexName,
+      getKey: null,
+      children: [],
+      effect: null,
+      owner,
+      i: 0
+    };
+    if (keyExp) {
+      forNode.getKey = new Function("data", `let v;with(data){v=${keyExp}};return v;`);
+    }
+    window["for1"] = forNode;
+    const data = this.getData();
+    const cells = data[Keys.Meta].cells;
+    const hasArrExpKey = Reflect.has(data[Keys.Raw], arrExp);
+    const arrSignal = hasArrExpKey ? (
+      // 有 key 直接拿
+      (data[arrExp], cells.get(arrExp))
+    ) : (
+      // 无key
+      $(this.getFn(data, arrExp))
+    );
+    forNode.realAfter = this.insertAfterAnchor("for-after");
+    const _b = forNode.snapshot, { dentStack, isFirstToken } = _b, snapshotForUpdate = __objRest(_b, ["dentStack", "isFirstToken"]);
+    let isFirstRender = true;
+    forNode.effect = effect(() => {
+      var _a2;
+      let arr = forNode.arr = arrSignal.v;
+      arr[Keys.Iterator];
+      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.realParent = forNode.realParent;
+          children[i] = item;
+        }
+        const firstInsert = children[0];
+        if (firstInsert) {
+          firstInsert.realBefore = forNode.realBefore;
+          this.tokenizer.nextToken();
+          this.tokenizer.nextToken();
+        } else {
+          this.tokenizer.skip();
+        }
+      } else {
+        const oldLen = children.length;
+        const newLen = arr.length;
+        const minLen = Math.min(oldLen, newLen);
+        const newChildren = [];
+        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();
+            }
+          }
+          if (oldLen < newLen) {
+            const lastAfter = ((_a2 = children.at(-1)) == null ? void 0 : _a2.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.ins);
+            }
+            const firstInsert = newChildren[oldLen];
+            if (firstInsert) {
+              firstInsert.realBefore = lastAfter;
+            }
+          }
+          for (let i = minLen; i--; ) {
+            const child = children[i];
+            newChildren[i] = child;
+            if (typeof itemExp === "string") {
+              child.data[itemExp] = arr[i];
+            } else {
+              Object.assign(child.data, itemExp(arr[i]));
+            }
+          }
+          forNode.children = newChildren;
+        }
+      }
+      isFirstRender = false;
+    });
+    return forNode.children[0] || forNode;
+  }
+  createForItem(forNode, i, parentData) {
+    let forItemNode;
+    const effect2 = scope(() => {
+    }, null);
+    const { arr, itemExp, indexName, getKey } = forNode;
+    let data;
+    if (typeof itemExp === "string") {
+      data = $(
+        indexName ? {
+          [itemExp]: arr[i],
+          [indexName]: i
+        } : {
+          [itemExp]: arr[i]
+        }
+      );
+    } else {
+      const rawData = itemExp(arr[i]);
+      if (indexName) {
+        rawData[indexName] = i;
+      }
+      data = $(rawData);
+    }
+    Object.setPrototypeOf(data, parentData);
+    forItemNode = {
+      id: this.forItemId++,
+      __logicType: FakeType.ForItem,
+      realParent: null,
+      realBefore: null,
+      realAfter: null,
+      forNode,
+      key: getKey == null ? void 0 : getKey(data),
+      effect: null,
+      data
+    };
+    forItemNode.effect = effect2;
+    return forItemNode;
+  }
   getData() {
     const { node } = this.ctx.stack.peekByType(NodeSort.CtxProvider);
     return node.data || node.owner.data;
@@ -334,104 +554,89 @@ class Interpreter {
   }
   componentOrFragmentDeclaration(ComponentOrRender, ctx) {
     let Component, render, child;
-    const data = this.getData();
-    if (typeof ComponentOrRender === "string") {
-      ComponentOrRender = data[ComponentOrRender];
-    }
     const isCC = ComponentOrRender.prototype instanceof Store;
     if (isCC) {
       Component = ComponentOrRender;
       child = Component.new();
     } else {
       render = ComponentOrRender;
+      const boundStore = render.boundStore;
       child = deepSignal({}, getPulling(), true);
-      Object.setPrototypeOf(child, data);
+      Object.setPrototypeOf(child, boundStore);
     }
     const node = {
       __logicType: isCC ? FakeType.Component : FakeType.Fragment,
       realParent: ctx.realParent,
+      realBefore: null,
+      realAfter: null,
       data: child,
       tokenizer: render ? render(true) : child["ui"](true)
     };
-    this.onePropParsed = (data2, _, key, value, valueIsMapKey, isFn, hookI) => {
+    this.onePropParsed = (data, _, key, value, valueIsMapKey, isFn, hookI) => {
       if (isFn) {
         child[Keys.Raw][key] = value;
       } else if (valueIsMapKey) {
-        shareSignal(data2, value, child, key);
-      } else if (typeof value === "function") {
+        shareSignal(data, value, child, key);
+      } else {
         const meta = child[Keys.Meta];
         const cells = meta.cells;
-        const computed = $(value);
-        cells.set(key, computed);
-      } else {
-        child[Keys.Raw][key] = value;
+        if (typeof value === "function") {
+          const computed = $(value);
+          cells.set(key, computed);
+          child[Keys.Raw][key] = void 0;
+        } else {
+          cells.set(key, { v: value });
+          child[Keys.Raw][key] = value;
+        }
       }
     };
-    node.realAfter = this.insertAfterAnchor(ctx);
+    node.realAfter = this.insertAfterAnchor("component-after");
     return node;
   }
+  getFn(data, expression) {
+    return new Function("data", `let v;with(data){v=${expression}};return v;`).bind(void 0, data);
+  }
   // TODO: 优化代码逻辑，拆分 if elseif else
   condDeclaration(ctx) {
     var _a;
     const { prevSibling } = ctx;
-    const snapbackUp = this.tokenizer.snapshot();
     const keyWord = this.tokenizer.token;
-    this.tokenizer.nextToken();
-    const noSelfCond = this.tokenizer.token.type === TokenType.NewLine;
-    const [hookType, value] = this.tokenizer._hook({});
+    const expToken = this.tokenizer.condExp();
+    const value = expToken.value;
     const isElse = keyWord.value === "else";
     const isIf = keyWord.value === "if";
     const preIsCond = (prevSibling == null ? void 0 : prevSibling.__logicType) & CondBit;
-    const needCalcWithPrevIf = isElse && preIsCond;
     const data = this.getData();
+    const noCond = value === true;
+    const valueIsMapKey = !noCond && Reflect.has(data[Keys.Raw], value);
     const owner = (_a = ctx.stack.peekByType(NodeSort.TokenizerSwitcher)) == null ? void 0 : _a.node;
     const ifNode = {
       __logicType: isElse ? FakeType.Else : isIf ? FakeType.If : FakeType.Fail,
-      snapshot: noSelfCond ? snapbackUp : this.tokenizer.snapshot(),
-      condition: null,
+      // 此时 token 是 exp, 下次解析 从 \n 开始
+      snapshot: this.tokenizer.snapshot(),
       realParent: null,
+      realBefore: null,
+      realAfter: null,
+      condition: null,
       preCond: preIsCond ? prevSibling : null,
       isFirstRender: true,
       effect: null,
       owner
     };
     let signal;
-    if (noSelfCond) {
-      if (isElse) {
-        signal = $(() => {
-          let point = ifNode.preCond;
-          while (point) {
-            if (point.condition.v) {
-              return false;
-            }
-            if (point.__logicType === FakeType.If) {
-              break;
-            }
-            point = point.preCond;
-          }
-          return true;
-        });
-      } else {
-        signal = $(() => {
-          let point = ifNode.preCond;
-          while (point) {
-            if (point.condition.v) {
-              return false;
-            }
-            point = point.preCond;
-          }
-          return true;
-        });
-      }
-    } else {
-      const valueIsMapKey = Reflect.has(data[Keys.Raw], value);
-      if (valueIsMapKey && !needCalcWithPrevIf) {
-        runWithPulling(() => data[value], null);
-        const { cells } = data[Keys.Meta];
-        signal = cells.get(value);
-      } else {
-        const fn = new Function("data", `let v;with(data){v=${value}};return v;`).bind(void 0, data);
-        if (needCalcWithPrevIf) {
+    switch (keyWord.value) {
+      case "if":
+        if (valueIsMapKey) {
+          runWithPulling(() => data[value], null);
+          const { cells } = data[Keys.Meta];
+          signal = cells.get(value);
+        } else {
+          const fn = this.getFn(data, value);
+          signal = $(fn);
+        }
+        break;
+      case "else":
+        if (noCond) {
           signal = $(() => {
             let point = ifNode.preCond;
             while (point) {
@@ -443,43 +648,57 @@ class Interpreter {
               }
               point = point.preCond;
             }
-            return fn();
+            return true;
           });
         } else {
-          signal = $(fn);
+          const fn = valueIsMapKey ? null : this.getFn(data, value);
+          signal = $(() => {
+            let point = ifNode.preCond;
+            while (point) {
+              if (point.condition.v) {
+                return false;
+              }
+              if (point.__logicType === FakeType.If) {
+                break;
+              }
+              point = point.preCond;
+            }
+            return valueIsMapKey ? data[value] : fn();
+          });
         }
-      }
+        break;
+      case "fail":
+        signal = $(() => {
+          let point = ifNode.preCond;
+          while (point) {
+            if (point.condition.v) {
+              return false;
+            }
+            point = point.preCond;
+          }
+          return true;
+        });
+        break;
     }
     ifNode.condition = signal;
-    ifNode.realAfter = this.insertAfterAnchor(ctx);
+    ifNode.realAfter = this.insertAfterAnchor(`${keyWord.value}-after`);
     ifNode.effect = effect(
       ({ val }) => {
         if (val) {
           if (ifNode.isFirstRender) {
-            if (!noSelfCond) {
-              this.tokenizer.nextToken();
-            }
+            this.tokenizer.nextToken();
             this.tokenizer.nextToken();
           } else {
             this.tokenizer = ifNode.owner.tokenizer;
             this.tokenizer.resume(ifNode.snapshot);
-            this.program(ifNode.realParent, ifNode.owner, ifNode.realBefore);
+            this.tokenizer.useDedentAsEof = false;
+            this.program(ifNode.realParent, ifNode.owner, ifNode.realBefore, ifNode);
           }
         } else {
           if (ifNode.isFirstRender) {
-            if (noSelfCond) {
-              this.tokenizer.i = this.tokenizer.i - 1;
-              this.tokenizer.needIndent = false;
-            }
             this.tokenizer.skip();
           } else {
-            const { realBefore, realAfter, realParent } = ifNode;
-            let point = realBefore ? this.nextSib(realBefore) : this.firstChild(realParent);
-            while (point !== realAfter) {
-              const next = this.nextSib(point);
-              this.remove(point, realParent, realBefore);
-              point = next;
-            }
+            this.removeLogicNode(ifNode);
           }
         }
         ifNode.isFirstRender = false;
@@ -488,6 +707,15 @@ class Interpreter {
     );
     return ifNode;
   }
+  removeLogicNode(node) {
+    const { realBefore, realAfter, realParent } = node;
+    let point = realBefore ? this.nextSib(realBefore) : this.firstChild(realParent);
+    while (point !== realAfter) {
+      const next = this.nextSib(point);
+      this.remove(point, realParent, realBefore);
+      point = next;
+    }
+  }
   /**
    * <extensionLines> ::= PIPE <attributeList> NEWLINE <extensionLines>
    *                    | ε
@@ -538,7 +766,7 @@ class Interpreter {
         const isFn = typeof rawVal === "function";
         if (hookType === "dynamic") {
           const valueIsMapKey = Reflect.has(data[Keys.Raw], value);
-          const fn = isFn ? rawVal : valueIsMapKey ? value : new Function("data", `let v;with(data){v=${value}};return v;`).bind(void 0, data);
+          const fn = isFn ? rawVal : valueIsMapKey ? value : this.getFn(data, value);
           this.onePropParsed(data, _node, key, fn, valueIsMapKey, isFn, hookI);
         } else if (hookType === "static") {
           this.onePropParsed(data, _node, key, value, false, isFn, hookI);
@@ -568,14 +796,9 @@ class Interpreter {
   firstChild(node) {
     return node.firstChild;
   }
-  _createAnchor() {
-    const anchor = this.createAnchor();
-    anchor[IsAnchor] = true;
-    return anchor;
-  }
-  createAnchor() {
+  createAnchor(name) {
     return {
-      name: "anchor",
+      name,
       nextSibling: null
     };
   }
@@ -631,9 +854,9 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const _Tokenizer = class _Tokenizer {
-  constructor(hook, isSubToken) {
+  constructor(hook, useDedentAsEof) {
     this.hook = hook;
-    this.isSubToken = isSubToken;
+    this.useDedentAsEof = useDedentAsEof;
     /** 缩进大小 默认 2 */
     this.TabSize = 2;
     /** 缩进字符 */
@@ -678,7 +901,7 @@ const _Tokenizer = class _Tokenizer {
       }
       return [hookType, value];
     };
-    if (isSubToken) {
+    if (useDedentAsEof) {
       this.setToken(TokenType.Indent, "");
       this.isFirstToken = true;
     }
@@ -696,11 +919,20 @@ const _Tokenizer = class _Tokenizer {
     this.dentStack = [0];
     Object.assign(this, _snapshot);
   }
-  snapshot() {
-    return {
+  snapshot(keys) {
+    const snap = {
       i: this.i,
       waitingTokens: this.waitingTokens.clone()
     };
+    if (keys) {
+      for (const k of keys) {
+        snap[k] = this[k];
+        if (k === "dentStack") {
+          snap[k] = this[k].slice();
+        }
+      }
+    }
+    return snap;
   }
   skip() {
     const logicDentLen = this.dentStack[this.dentStack.length - 1];
@@ -814,17 +1046,21 @@ ${_Tokenizer.EofId}`;
               this.str(char);
               break;
             case "{":
-              this.brace();
+              const braceToken = this.brace();
+              this.setToken(TokenType.InsertionExp, braceToken);
               break;
             case "$":
               const handled = this.dynamic(char);
               if (handled) break;
+            case ";":
+              this.setToken(TokenType.Semicolon, ";");
+              break;
             default:
               if (isNum(char)) {
                 this.number(char);
                 break;
               }
-              if (typeof char === "string" && matchIdStart(char)) {
+              if (typeof char === "string" && matchIdStart2(char, 0)) {
                 this.identifier(char);
               }
               break;
@@ -843,6 +1079,58 @@ ${_Tokenizer.EofId}`;
       this.handledTokens.push(this.token);
     }
   }
+  condExp() {
+    let value = "";
+    this.token = null;
+    while (1) {
+      const char = this.code[this.i];
+      if (char === "\n") {
+        break;
+      }
+      value += char;
+      this.i++;
+    }
+    value = value.trim();
+    this.setToken(TokenType.Identifier, value || true);
+    return this.token;
+  }
+  /**
+   * 解析到 for 时使用这个方法获取 for 后方的子表达式
+   * 表达式通过 “;” 分割
+   * // 最多可有三个表达式
+   * for arr ; item index; item.key
+   * @returns {boolean} 是否含有 key
+   */
+  forLoopSubExp() {
+    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 \u5FAA\u73AF\u6700\u591A\u53EF\u5305\u542B\u4E09\u4E2A\u8868\u8FBE\u5F0F, \u5206\u522B\u4E3A arr ; item index [; key]`);
+        }
+        if (!isSemicolon) return count === 3;
+      } else {
+        value += char;
+      }
+      this.i++;
+    }
+  }
   assignment() {
     this.setToken(TokenType.Assign, "=");
   }
@@ -908,8 +1196,7 @@ ${_Tokenizer.EofId}`;
         }
       }
       if (count === 0 && inString == null && inComment == null) {
-        this.setToken(TokenType.InsertionExp, value.slice(1));
-        return;
+        return value.slice(1);
       }
       value += this.code[this.i];
       this.i++;
@@ -1014,13 +1301,13 @@ ${_Tokenizer.EofId}`;
     const yes = this.dentStack.length === 1;
     if (yes) {
       if (!this.token) {
-        if (this.isSubToken) {
+        if (this.useDedentAsEof) {
           this.setToken(TokenType.Dedent, "");
         } else {
           this.setToken(TokenType.Identifier, _Tokenizer.EofId);
         }
       } else {
-        if (this.isSubToken) {
+        if (this.useDedentAsEof) {
           this.waitingTokens.push({
             type: TokenType.Dedent,
             typeName: TokenType[TokenType.Dedent],
@@ -1042,13 +1329,13 @@ ${_Tokenizer.EofId}`;
     let nextC;
     while (1) {
       nextC = this.code[this.i + 1];
-      if (typeof nextC !== "string" || !matchIdStart(nextC)) {
+      if (typeof nextC !== "string" || !matchIdStart2(nextC, 0)) {
         break;
       }
       value += nextC;
       this.i++;
     }
-    if (value === _Tokenizer.EofId && this.isSubToken) {
+    if (value === _Tokenizer.EofId && this.useDedentAsEof) {
       this.setToken(TokenType.Dedent, "");
       return;
     }
@@ -1117,6 +1404,7 @@ function bobe(fragments, ...values) {
     tokenizer.init(Array.from(fragments));
     return tokenizer;
   };
+  ui.boundStore = Store.Current;
   return ui;
 }
 function customRender(option) {