bobe 0.0.23 → 0.0.25

package/dist/index.umd.js

@@ -73,54 +73,50 @@
     }
   }
 
-  var TokenType = /* @__PURE__ */(TokenType2 => {
-    TokenType2[TokenType2["NewLine"] = 1] = "NewLine";
-    TokenType2[TokenType2["Indent"] = 2] = "Indent";
-    TokenType2[TokenType2["Dedent"] = 4] = "Dedent";
-    TokenType2[TokenType2["Identifier"] = 8] = "Identifier";
-    TokenType2[TokenType2["Assign"] = 16] = "Assign";
-    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 => {
-    FakeType2[FakeType2["If"] = 1] = "If";
-    FakeType2[FakeType2["Fail"] = 2] = "Fail";
-    FakeType2[FakeType2["Else"] = 4] = "Else";
-    FakeType2[FakeType2["For"] = 8] = "For";
-    FakeType2[FakeType2["Component"] = 16] = "Component";
-    FakeType2[FakeType2["Fragment"] = 32] = "Fragment";
-    FakeType2[FakeType2["ForItem"] = 64] = "ForItem";
-    return FakeType2;
-  })(FakeType || {});
-  const CondBit = 1 /* If */ | 2 /* Fail */ | 4 /* Else */;
-  const LogicalBit = 1 /* If */ | 2 /* Fail */ | 4 /* Else */ | 8 /* For */ | 64 /* ForItem */;
-  const TokenizerSwitcherBit = 16 /* Component */ | 32 /* Fragment */;
-  var NodeSort = /* @__PURE__ */(NodeSort2 => {
-    NodeSort2[NodeSort2["Logic"] = 1] = "Logic";
-    NodeSort2[NodeSort2["Real"] = 2] = "Real";
-    NodeSort2[NodeSort2["Component"] = 4] = "Component";
-    NodeSort2[NodeSort2["CtxProvider"] = 8] = "CtxProvider";
-    NodeSort2[NodeSort2["TokenizerSwitcher"] = 16] = "TokenizerSwitcher";
-    return NodeSort2;
-  })(NodeSort || {});
+  let TokenType = function (TokenType) {
+    TokenType[TokenType["NewLine"] = 1] = "NewLine";
+    TokenType[TokenType["Indent"] = 2] = "Indent";
+    TokenType[TokenType["Dedent"] = 4] = "Dedent";
+    TokenType[TokenType["Identifier"] = 8] = "Identifier";
+    TokenType[TokenType["Assign"] = 16] = "Assign";
+    TokenType[TokenType["Pipe"] = 32] = "Pipe";
+    TokenType[TokenType["Eof"] = 64] = "Eof";
+    TokenType[TokenType["InsertionExp"] = 128] = "InsertionExp";
+    TokenType[TokenType["Semicolon"] = 256] = "Semicolon";
+    return TokenType;
+  }({});
+  let FakeType = function (FakeType) {
+    FakeType[FakeType["If"] = 1] = "If";
+    FakeType[FakeType["Fail"] = 2] = "Fail";
+    FakeType[FakeType["Else"] = 4] = "Else";
+    FakeType[FakeType["For"] = 8] = "For";
+    FakeType[FakeType["Component"] = 16] = "Component";
+    FakeType[FakeType["Fragment"] = 32] = "Fragment";
+    FakeType[FakeType["ForItem"] = 64] = "ForItem";
+    return FakeType;
+  }({});
+  const CondBit = FakeType.If | FakeType.Fail | FakeType.Else;
+  const LogicalBit = FakeType.If | FakeType.Fail | FakeType.Else | FakeType.For | FakeType.ForItem;
+  FakeType.If | FakeType.Fail | FakeType.Else | FakeType.For | FakeType.ForItem | FakeType.Component | FakeType.Fragment;
+  const TokenizerSwitcherBit = FakeType.Component | FakeType.Fragment;
+  let NodeSort = function (NodeSort) {
+    NodeSort[NodeSort["Logic"] = 1] = "Logic";
+    NodeSort[NodeSort["Real"] = 2] = "Real";
+    NodeSort[NodeSort["Component"] = 4] = "Component";
+    NodeSort[NodeSort["CtxProvider"] = 8] = "CtxProvider";
+    NodeSort[NodeSort["TokenizerSwitcher"] = 16] = "TokenizerSwitcher";
+    return NodeSort;
+  }({});
+  (function (TerpEvt) {
+    TerpEvt["AllAttrGot"] = "all-attr-got";
+    TerpEvt["HandledComponentNode"] = "handled-component-node";
+    return TerpEvt;
+  })({});
 
   class MultiTypeStack {
-    constructor() {
-      // 记录全局栈顶
-      // private top: StackNode<T> | null = null;
-      // 记录每个类别的当前最新节点（各分类的“栈顶”）
-      this.typeTops = {};
-      this.length = 0;
-      this.stack = [];
-    }
-    /**
-     * 入栈操作
-     * @param value 数据
-     * @param bits 该节点所属的类别数组
-     */
+    typeTops = {};
+    length = 0;
+    stack = [];
     push(value, bits) {
       const newNode = {
         value,
@@ -132,18 +128,15 @@
         bit = bits & ~bits + 1;
         if (!bit) break;
         bits &= ~bit;
-        newNode.prevByType[bit] = this.typeTops[bit] || void 0;
+        newNode.prevByType[bit] = this.typeTops[bit] || undefined;
         this.typeTops[bit] = newNode;
       }
       this.stack[this.length++] = newNode;
     }
-    /**
-     * 出栈操作
-     */
     pop() {
       const poppedNode = this.stack[this.length - 1];
       this.stack[--this.length] = null;
-      if (!poppedNode) return void 0;
+      if (!poppedNode) return undefined;
       let bits = poppedNode.types;
       let bit;
       while (1) {
@@ -154,63 +147,26 @@
       }
       return [poppedNode.value, poppedNode.types];
     }
-    /**
-     * 获取某个类别的当前“顶部”元素
-     */
     peekByType(cat) {
       return this.typeTops[cat]?.value;
     }
     peekType() {
       return this.stack.at(-1).types;
     }
-    /**
-     * 获取全局栈顶
-     */
     peek() {
       return this.stack.at(-1).value;
     }
-    // /**
-    //  * 1. 全局向前遍历 (不分类)
-    //  * 从栈顶开始，沿着全局链条向栈底遍历
-    //  */
-    // forEach(callback: (value: T, types: number) => any): void {
-    //   let current = this.top;
-    //   while (current !== null) {
-    //     // 执行回调，如果返回 false 则立即停止
-    //     const shouldBreak = callback(current.value, current.types);
-    //     if (shouldBreak) break;
-    //     current = current.prevGlobal;
-    //   }
-    // }
-    // /**
-    //  * 2. 按类别向前遍历
-    //  * 仅遍历属于指定类别 cat 的节点
-    //  */
-    // forEachByType(cat: number, callback: (value: T) => any): void {
-    //   // 从该类别的当前“顶端”节点开始
-    //   let current = this.typeTops[cat];
-    //   while (current) {
-    //     const shouldBreak = callback(current.value);
-    //     if (shouldBreak) break;
-    //     // 关键点：直接跳向该节点记录的“上一个同类节点”
-    //     // 这比遍历全局栈再筛选类别要快得多 (O(m) vs O(n))
-    //     current = current.prevByType[cat];
-    //   }
-    // }
   }
 
   const _excluded = ["dentStack", "isFirstToken"];
-  new bobeShared.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;
     }
+    rootComponent = null;
     program(root, componentNode, before, ctxProvider) {
       this.rootComponent = componentNode;
       this.tokenizer.nextToken();
@@ -253,7 +209,7 @@
           }, !ctx.current.__logicType ? NodeSort.Real : (ctx.current.__logicType & LogicalBit ? NodeSort.Logic : 0) | (ctx.current.__logicType & TokenizerSwitcherBit ? NodeSort.TokenizerSwitcher : 0) | (ctx.current.__logicType === FakeType.Component ? NodeSort.Component : 0) | NodeSort.CtxProvider);
           if (ctx.current.__logicType) {
             if (isLogicNode) {
-              aoye.setPulling(ctx.current.effect.ins);
+              aoye.setPulling(ctx.current.effect);
             }
           } else {
             if (ctx.current) {
@@ -285,7 +241,7 @@
             if (sort & NodeSort.Logic) {
               const parentLogic = stack.peekByType(NodeSort.Logic)?.node;
               if (parentLogic) {
-                aoye.setPulling(parentLogic.effect.ins);
+                aoye.setPulling(parentLogic.effect);
               } else {
                 aoye.setPulling(rootPulling);
               }
@@ -295,7 +251,8 @@
               this.tokenizer = switcher.tokenizer;
             }
             if (parent.__logicType === FakeType.ForItem) {
-              const forNode = parent.forNode;
+              const _ref = parent,
+                forNode = _ref.forNode;
               const i = forNode.i,
                 arr = forNode.arr,
                 snapshot = forNode.snapshot;
@@ -321,7 +278,7 @@
       }
       return componentNode;
     }
-    insertAfterAnchor(name = "anchor") {
+    insertAfterAnchor(name = 'anchor') {
       const _this$ctx = this.ctx,
         realParent = _this$ctx.realParent,
         prevSibling = _this$ctx.prevSibling,
@@ -332,12 +289,6 @@
       this.handleInsert(realParent, afterAnchor, prevSibling);
       return afterAnchor;
     }
-    /** 处理
-     *                    是逻辑                               是普通
-     * 父节点       将子节点加入 directList         调用 insert 方法挨个插入子节点
-     * 子节点           仅插入到父逻辑节点              将本节点插入父节点
-     * 理论上父节点不能是一个 逻辑节点，遇到if 时 Terp 会重新执行 program 这种情况下，会指定 root 为真实 dom
-     */
     handleInsert(parent, child, prev, parentComponent) {
       if (!child.__logicType) {
         if (!prev || !prev.__logicType) {
@@ -356,7 +307,6 @@
         }
       }
     }
-    /** 考虑到同级 逻辑模块 */
     getPrevRealSibling(prevSibling) {
       if (!prevSibling || !prevSibling.__logicType) {
         return prevSibling;
@@ -369,38 +319,33 @@
         point = point.anchor;
       }
     }
-    /**
-     * 声明部分：
-     * 包含首行定义和（可选的）多行属性扩展
-     * <declaration> ::= <tagName=token> <headerLine> <extensionLines>
-     *  */
     declaration(ctx) {
       const _this$tokenizer$_hook = this.tokenizer._hook({}),
         _this$tokenizer$_hook2 = _slicedToArray(_this$tokenizer$_hook, 2),
         hookType = _this$tokenizer$_hook2[0],
         value = _this$tokenizer$_hook2[1];
       let _node;
-      if (value === "if" || value === "else" || value === "fail") {
+      if (value === 'if' || value === 'else' || value === 'fail') {
         return this.condDeclaration(ctx);
-      } else if (value === "for") {
+      } else if (value === 'for') {
         return this.forDeclaration();
       } else if (hookType) {
         const data = this.getData();
-        if (hookType === "static") {
-          if (typeof value === "function") {
+        if (hookType === 'static') {
+          if (typeof value === 'function') {
             _node = this.componentOrFragmentDeclaration(value, ctx);
           } else {
-            throw new SyntaxError(`declaration \u4E0D\u652F\u6301 ${value} \u7C7B\u578B\u7684\u9759\u6001\u63D2\u503C`);
+            throw new SyntaxError(`declaration 不支持 ${value} 类型的静态插值`);
           }
         } else {
           const valueIsMapKey = Reflect.has(data[aoye.Keys.Raw], value);
           const val = data[aoye.Keys.Raw][value];
-          if (typeof val === "function") {
+          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);
+            _node = this.createNode('text');
+            this.onePropParsed(data, _node, 'text', str, valueIsMapKey, false);
           }
         }
       } else {
@@ -422,12 +367,12 @@
       const isDestruct = itemToken.type === TokenType.InsertionExp;
       let itemExp = itemToken.value;
       if (isDestruct) {
-        itemExp = "{" + itemExp + "}";
-        const vars = itemExp.match(bobeShared.jsVarRegexp).join(",");
-        itemExp = new Function("item", `let ${vars}; (${itemExp}=item); return {${vars}};`);
+        itemExp = '{' + itemExp + '}';
+        const vars = itemExp.match(bobeShared.jsVarRegexp).join(',');
+        itemExp = new Function('item', `let ${vars}; (${itemExp}=item); return {${vars}};`);
       }
       let indexName, keyExp;
-      while (this.tokenizer.code[this.tokenizer.i] !== "\n") {
+      while (this.tokenizer.code[this.tokenizer.i] !== '\n') {
         const next = this.tokenizer.nextToken();
         if (next.type !== TokenType.Semicolon) {
           if (!indexName) {
@@ -441,7 +386,7 @@
       const prevSibling = this.ctx.prevSibling;
       const forNode = {
         __logicType: FakeType.For,
-        snapshot: this.tokenizer.snapshot(["dentStack", "isFirstToken"]),
+        snapshot: this.tokenizer.snapshot(['dentStack', 'isFirstToken']),
         realParent: this.ctx.realParent,
         prevSibling,
         realBefore: prevSibling?.realAfter || prevSibling,
@@ -456,25 +401,21 @@
         i: 0
       };
       if (keyExp) {
-        forNode.getKey = new Function("data", `let v;with(data){v=${keyExp}};return v;`);
+        forNode.getKey = new Function('data', `let v;with(data){v=${keyExp}};return v;`);
       }
-      window["for1"] = forNode;
+      window['for1'] = forNode;
       const data = this.getData();
       const cells = data[aoye.Keys.Meta].cells;
       const hasArrExpKey = Reflect.has(data[aoye.Keys.Raw], arrExp);
-      const arrSignal = hasArrExpKey ? (
-      // 有 key 直接拿
-      data[arrExp], cells.get(arrExp)) :
-      // 无key
-      aoye.$(this.getFn(data, arrExp));
-      forNode.realAfter = this.insertAfterAnchor("for-after");
+      const arrSignal = hasArrExpKey ? (data[arrExp], cells.get(arrExp)) : new aoye.Computed(this.getFn(data, arrExp));
+      forNode.realAfter = this.insertAfterAnchor('for-after');
       const _forNode$snapshot = forNode.snapshot;
         _forNode$snapshot.dentStack;
         _forNode$snapshot.isFirstToken;
         const snapshotForUpdate = _objectWithoutProperties(_forNode$snapshot, _excluded);
       let isFirstRender = true;
-      forNode.effect = aoye.effect(() => {
-        let arr = forNode.arr = arrSignal.v;
+      forNode.effect = new aoye.Effect(() => {
+        let arr = forNode.arr = arrSignal.get();
         arr[aoye.Keys.Iterator];
         arr = aoye.toRaw(arr);
         const children = forNode.children;
@@ -483,7 +424,7 @@
           for (let i = len; i--;) {
             const nextItem = children[i + 1];
             const item = this.createForItem(forNode, i, data);
-            const anchor = this.insertAfterAnchor("for-item-after");
+            const anchor = this.insertAfterAnchor('for-item-after');
             item.realAfter = anchor;
             if (nextItem) {
               nextItem.realBefore = anchor;
@@ -510,7 +451,7 @@
                 const child = children[i];
                 this.removeLogicNode(child);
                 this.remove(child.realAfter);
-                child.effect();
+                child.effect.dispose();
               }
             }
             if (oldLen < newLen) {
@@ -519,7 +460,7 @@
                 const item = this.createForItem(forNode, i, data);
                 newChildren[i] = item;
                 const nextItem = newChildren[i + 1];
-                const anchor = this.createAnchor("for-item-after");
+                const anchor = this.createAnchor('for-item-after');
                 this.insertAfter(forNode.realParent, anchor, lastAfter);
                 item.realAfter = anchor;
                 if (nextItem) {
@@ -531,7 +472,7 @@
                 this.tokenizer.useDedentAsEof = false;
                 aoye.runWithPulling(() => {
                   this.program(forNode.realParent, forNode.owner, lastAfter, item);
-                }, item.effect.ins);
+                }, item.effect);
               }
               const firstInsert = newChildren[oldLen];
               if (firstInsert) {
@@ -541,7 +482,7 @@
             for (let i = minLen; i--;) {
               const child = children[i];
               newChildren[i] = child;
-              if (typeof itemExp === "string") {
+              if (typeof itemExp === 'string') {
                 child.data[itemExp] = arr[i];
               } else {
                 Object.assign(child.data, itemExp(arr[i]));
@@ -554,27 +495,32 @@
       });
       return forNode.children[0] || forNode;
     }
+    forItemId = 0;
     createForItem(forNode, i, parentData) {
       let forItemNode;
-      const effect2 = aoye.scope(() => {}, null);
+      const scope = new aoye.Scope(() => {});
+      scope.scope = null;
+      aoye.runWithPulling(() => {
+        scope.get();
+      }, null);
       const arr = forNode.arr,
         itemExp = forNode.itemExp,
         indexName = forNode.indexName,
         getKey = forNode.getKey;
       let data;
-      if (typeof itemExp === "string") {
-        data = aoye.$(indexName ? {
+      if (typeof itemExp === 'string') {
+        data = aoye.deepSignal(indexName ? {
           [itemExp]: arr[i],
           [indexName]: i
         } : {
           [itemExp]: arr[i]
-        });
+        }, aoye.getPulling());
       } else {
         const rawData = itemExp(arr[i]);
         if (indexName) {
           rawData[indexName] = i;
         }
-        data = aoye.$(rawData);
+        data = aoye.deepSignal(rawData, aoye.getPulling());
       }
       Object.setPrototypeOf(data, parentData);
       forItemNode = {
@@ -588,7 +534,7 @@
         effect: null,
         data
       };
-      forItemNode.effect = effect2;
+      forItemNode.effect = scope;
       return forItemNode;
     }
     getData() {
@@ -596,24 +542,16 @@
         node = _this$ctx$stack$peekB.node;
       return node.data || node.owner.data;
     }
-    /**
-     * key 元素，组件的 key
-     * value
-     * 1. 静态类型值
-     * 2. 插值计算 函数，可以考虑 使用 effect 或 computed 做处理
-     *
-     * mapKey 映射, 对应子组件的属性
-     *  */
     onePropParsed(data, node, key, value, valueIsMapKey, isFn, hookI) {
       if (isFn) {
         this.setProp(node, key, value, hookI);
-      } else if (typeof value === "function") {
-        aoye.effect(() => {
+      } else if (typeof value === 'function') {
+        new aoye.Effect(() => {
           const res = value();
           this.setProp(node, key, res, hookI);
         });
       } else if (valueIsMapKey) {
-        aoye.effect(() => {
+        new aoye.Effect(() => {
           const res = data[value];
           this.setProp(node, key, res, hookI);
         });
@@ -621,6 +559,7 @@
         this.setProp(node, key, value, hookI);
       }
     }
+    oneRealPropParsed = this.onePropParsed.bind(this);
     componentOrFragmentDeclaration(ComponentOrRender, ctx) {
       let Component, render, child;
       const isCC = ComponentOrRender.prototype instanceof aoye.Store;
@@ -639,7 +578,7 @@
         realBefore: null,
         realAfter: null,
         data: child,
-        tokenizer: render ? render(true) : child["ui"](true)
+        tokenizer: render ? render(true) : child['ui'](true)
       };
       this.onePropParsed = (data, _, key, value, valueIsMapKey, isFn, hookI) => {
         if (isFn) {
@@ -649,32 +588,31 @@
         } else {
           const meta = child[aoye.Keys.Meta];
           const cells = meta.cells;
-          if (typeof value === "function") {
-            const computed = aoye.$(value);
+          if (typeof value === 'function') {
+            const computed = new aoye.Computed(value);
             cells.set(key, computed);
-            child[aoye.Keys.Raw][key] = void 0;
+            child[aoye.Keys.Raw][key] = undefined;
           } else {
             cells.set(key, {
-              v: value
+              get: () => value
             });
             child[aoye.Keys.Raw][key] = value;
           }
         }
       };
-      node.realAfter = this.insertAfterAnchor("component-after");
+      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);
+      return new Function('data', `let v;with(data){v=${expression}};return v;`).bind(undefined, data);
     }
-    // TODO: 优化代码逻辑，拆分 if elseif else
     condDeclaration(ctx) {
       const prevSibling = ctx.prevSibling;
       const keyWord = this.tokenizer.token;
       const expToken = this.tokenizer.condExp();
       const value = expToken.value;
-      const isElse = keyWord.value === "else";
-      const isIf = keyWord.value === "if";
+      const isElse = keyWord.value === 'else';
+      const isIf = keyWord.value === 'if';
       const preIsCond = prevSibling?.__logicType & CondBit;
       const data = this.getData();
       const noCond = value === true;
@@ -682,7 +620,6 @@
       const owner = ctx.stack.peekByType(NodeSort.TokenizerSwitcher)?.node;
       const ifNode = {
         __logicType: isElse ? FakeType.Else : isIf ? FakeType.If : FakeType.Fail,
-        // 此时 token 是 exp, 下次解析 从 \n 开始
         snapshot: this.tokenizer.snapshot(),
         realParent: null,
         realBefore: null,
@@ -695,22 +632,22 @@
       };
       let signal;
       switch (keyWord.value) {
-        case "if":
+        case 'if':
           if (valueIsMapKey) {
             aoye.runWithPulling(() => data[value], null);
             const cells = data[aoye.Keys.Meta].cells;
             signal = cells.get(value);
           } else {
             const fn = this.getFn(data, value);
-            signal = aoye.$(fn);
+            signal = new aoye.Computed(fn);
           }
           break;
-        case "else":
+        case 'else':
           if (noCond) {
-            signal = aoye.$(() => {
+            signal = new aoye.Computed(() => {
               let point = ifNode.preCond;
               while (point) {
-                if (point.condition.v) {
+                if (point.condition.get()) {
                   return false;
                 }
                 if (point.__logicType === FakeType.If) {
@@ -722,10 +659,10 @@
             });
           } else {
             const fn = valueIsMapKey ? null : this.getFn(data, value);
-            signal = aoye.$(() => {
+            signal = new aoye.Computed(() => {
               let point = ifNode.preCond;
               while (point) {
-                if (point.condition.v) {
+                if (point.condition.get()) {
                   return false;
                 }
                 if (point.__logicType === FakeType.If) {
@@ -737,11 +674,11 @@
             });
           }
           break;
-        case "fail":
-          signal = aoye.$(() => {
+        case 'fail':
+          signal = new aoye.Computed(() => {
             let point = ifNode.preCond;
             while (point) {
-              if (point.condition.v) {
+              if (point.condition.get()) {
                 return false;
               }
               point = point.preCond;
@@ -752,7 +689,7 @@
       }
       ifNode.condition = signal;
       ifNode.realAfter = this.insertAfterAnchor(`${keyWord.value}-after`);
-      ifNode.effect = aoye.effect(({
+      const ef = aoye.effect(({
         val
       }) => {
         if (val) {
@@ -774,6 +711,7 @@
         }
         ifNode.isFirstRender = false;
       }, [signal]);
+      ifNode.effect = ef.ins;
       return ifNode;
     }
     removeLogicNode(node) {
@@ -787,10 +725,6 @@
         point = next;
       }
     }
-    /**
-     * <extensionLines> ::= PIPE <attributeList> NEWLINE <extensionLines>
-     *                    | ε
-     */
     extensionLines(_node) {
       while (1) {
         if ((this.tokenizer.token.type & TokenType.Pipe) === 0) {
@@ -804,25 +738,10 @@
         this.tokenizer.nextToken();
       }
     }
-    /**
-     * 首行：
-     * 节点名称 + 属性列表 + 换行
-     * <headerLine> ::= <attributeList> NEWLINE
-     */
     headerLine(_node) {
       this.attributeList(_node);
       this.tokenizer.nextToken();
     }
-    /**
-     * 属性列表：
-     * 可以是空的，或者包含多个属性
-     * <attributeList> ::= <attribute> <attributeList>
-     *                    | ε
-     *
-     * <attribute> ::= <key> = <value>
-     * 1. 普通节点 执行 setProps 🪝
-     * 2. 组件节点 收集映射关系，或 产生 computed
-     */
     attributeList(_node) {
       let key, eq;
       const data = this.getData();
@@ -830,7 +749,7 @@
         if (key == null) {
           key = this.tokenizer.token.value;
         } else if (eq == null) {
-          eq = "=";
+          eq = '=';
         } else {
           const _this$tokenizer$_hook3 = this.tokenizer._hook({}),
             _this$tokenizer$_hook4 = _slicedToArray(_this$tokenizer$_hook3, 3),
@@ -838,12 +757,12 @@
             value = _this$tokenizer$_hook4[1],
             hookI = _this$tokenizer$_hook4[2];
           const rawVal = data[aoye.Keys.Raw][value];
-          const isFn = typeof rawVal === "function";
-          if (hookType === "dynamic") {
+          const isFn = typeof rawVal === 'function';
+          if (hookType === 'dynamic') {
             const valueIsMapKey = Reflect.has(data[aoye.Keys.Raw], value);
             const fn = isFn ? rawVal : valueIsMapKey ? value : this.getFn(data, value);
             this.onePropParsed(data, _node, key, fn, valueIsMapKey, isFn, hookI);
-          } else if (hookType === "static") {
+          } else if (hookType === 'static') {
             this.onePropParsed(data, _node, key, value, false, isFn, hookI);
           } else {
             this.onePropParsed(data, _node, key, value, false, isFn, hookI);
@@ -894,7 +813,6 @@
     remove(node, parent, prev) {
       return this.defaultRemove(node, parent, prev);
     }
-    // TODO: 默认改成 prevItem
     defaultRemove(node, parent, prevSibling) {
       const next = node.nextSibling;
       if (prevSibling) {
@@ -910,76 +828,33 @@
   }
 
   class Tokenizer {
+    TabSize = 2;
+    Tab = Array.from({
+      length: this.TabSize
+    }, () => ' ').join('');
+    static EofId = `__EOF__${Date.now()}`;
+    static DedentId = `__DEDENT__${Date.now()}`;
+    needIndent = false;
+    isFirstToken = true;
+    dentStack = [0];
+    i = 0;
+    handledTokens = [];
+    waitingTokens = new bobeShared.Queue();
     constructor(hook, useDedentAsEof) {
       this.hook = hook;
       this.useDedentAsEof = useDedentAsEof;
-      /** 缩进大小 默认 2 */
-      this.TabSize = 2;
-      /** 缩进字符 */
-      this.Tab = Array.from({
-        length: this.TabSize
-      }, () => " ").join("");
-      /** 回车后需要判断缩进 */
-      this.needIndent = false;
-      /** 用于跳过第一个节点前的空白字符串，以及生成基础缩进 */
-      this.isFirstToken = true;
-      /** 记录历史缩进的长度，相对于行首 */
-      this.dentStack = [0];
-      /** 当前字符 index */
-      this.i = 0;
-      // TODO: 生产环境不需要这个，导致不必要的内存占用
-      this.handledTokens = [];
-      /**
-       * 有些标识符能产生多个 token
-       * 例如 dedent
-       * parent1
-       *   child
-       *     subChild
-       * parent2 <- 产生两个 dedent
-       */
-      this.waitingTokens = new bobeShared.Queue();
-      /** 模板字符串动态节点的占位符 */
-      this.HookId = "_h_o_o_k_";
-      /** 模板字符串动态节点索引 */
-      this.hookI = 0;
-      this._hook = props => {
-        const value = this.token.value;
-        const isDynamicHook = this.token.type & TokenType.InsertionExp;
-        const isStaticHook = typeof value === "string" && value.indexOf(this.HookId) === 0;
-        const hookType = isDynamicHook ? "dynamic" : isStaticHook ? "static" : void 0;
-        if (this.hook && isStaticHook) {
-          const hookI = Number(value.slice(this.HookId.length));
-          const res = this.hook({
-            ...props,
-            HookId: this.HookId,
-            i: hookI
-          });
-          return [hookType, res, hookI];
-        } else if (isDynamicHook) {
-          return [hookType, value];
-        }
-        return [hookType, value];
-      };
       if (useDedentAsEof) {
-        this.setToken(TokenType.Indent, "");
+        this.setToken(TokenType.Indent, '');
         this.isFirstToken = true;
       }
     }
-    static {
-      /** Eof 标识符的值 */
-      this.EofId = `__EOF__${Date.now()}`;
-    }
-    static {
-      this.DedentId = `__DEDENT__${Date.now()}`;
-    }
     consume() {
       const token = this.token;
       this.nextToken();
       return token;
     }
-    // /** 恢复至某一个现场，进行 token 重算 */
     resume(_snapshot) {
-      this.token = void 0;
+      this.token = undefined;
       this.needIndent = false;
       this.isFirstToken = true;
       this.dentStack = [0];
@@ -993,7 +868,7 @@
       if (keys) {
         for (const k of keys) {
           snap[k] = this[k];
-          if (k === "dentStack") {
+          if (k === 'dentStack') {
             snap[k] = this[k].slice();
           }
         }
@@ -1004,10 +879,10 @@
       const logicDentLen = this.dentStack[this.dentStack.length - 1];
       let needIndent = false;
       let skipFragment = ``;
-      this.token = void 0;
+      this.token = undefined;
       while (1) {
         const char = this.code[this.i];
-        if (char === "\n") {
+        if (char === '\n') {
           needIndent = true;
           skipFragment += char;
           this.i++;
@@ -1031,7 +906,7 @@
             const expLen = this.dentStack[i];
             if (currLen === expLen) break;
             if (currLen > expLen) {
-              throw SyntaxError(`\u7F29\u8FDB\u9519\u8BEF\uFF0C\u7F29\u8FDB\u957F\u5EA6\u4E0D\u5339\u914D`);
+              throw SyntaxError(`缩进错误，缩进长度不匹配`);
             }
             if (this.shorterThanBaseDentEof()) {
               break;
@@ -1056,13 +931,12 @@
       return skipFragment;
     }
     setCode(code) {
-      this.code = "\n" + code.trimEnd() + `
-${Tokenizer.EofId}`;
+      this.code = '\n' + code.trimEnd() + `\n${Tokenizer.EofId}`;
     }
     tokenize() {
       do {
         this.nextToken();
-        console.log("token:", TokenType[this.token?.type], JSON.stringify(this.token?.value || ""));
+        console.log('token:', TokenType[this.token?.type], JSON.stringify(this.token?.value || ''));
       } while (!this.isEof());
     }
     isEof() {
@@ -1082,7 +956,7 @@ ${Tokenizer.EofId}`;
         if (this.isEof()) {
           return this.token;
         }
-        this.token = void 0;
+        this.token = undefined;
         if (this.waitingTokens.len) {
           const item = this.waitingTokens.shift();
           this.setToken(item.type, item.value);
@@ -1094,40 +968,39 @@ ${Tokenizer.EofId}`;
           } else {
             const char = this.code[this.i];
             switch (char) {
-              case "	":
-              case " ":
+              case '\t':
+              case ' ':
                 break;
-              // 找后续所有 newLine
-              case "\n":
+              case '\n':
                 this.newLine();
                 this.needIndent = true;
                 break;
-              case "=":
+              case '=':
                 this.assignment();
                 break;
-              case "|":
+              case '|':
                 this.pipe();
                 break;
               case "'":
               case '"':
                 this.str(char);
                 break;
-              case "{":
+              case '{':
                 const braceToken = this.brace();
                 this.setToken(TokenType.InsertionExp, braceToken);
                 break;
-              case "$":
+              case '$':
                 const handled = this.dynamic(char);
                 if (handled) break;
-              case ";":
-                this.setToken(TokenType.Semicolon, ";");
+              case ';':
+                this.setToken(TokenType.Semicolon, ';');
                 break;
               default:
                 if (bobeShared.isNum(char)) {
                   this.number(char);
                   break;
                 }
-                if (typeof char === "string" && bobeShared.matchIdStart2(char, 0)) {
+                if (typeof char === 'string' && bobeShared.matchIdStart2(char, 0)) {
                   this.identifier(char);
                 }
                 break;
@@ -1147,11 +1020,11 @@ ${Tokenizer.EofId}`;
       }
     }
     condExp() {
-      let value = "";
+      let value = '';
       this.token = null;
       while (1) {
         const char = this.code[this.i];
-        if (char === "\n") {
+        if (char === '\n') {
           break;
         }
         value += char;
@@ -1161,21 +1034,14 @@ ${Tokenizer.EofId}`;
       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 value = '';
       let count = 0;
       while (1) {
         const char = this.code[this.i];
-        const isSemicolon = char === ";";
-        if (isSemicolon || char === "\n") {
+        const isSemicolon = char === ';';
+        if (isSemicolon || char === '\n') {
           value = value.trim();
           if (!this.token) {
             this.setToken(TokenType.Identifier, value);
@@ -1186,10 +1052,10 @@ ${Tokenizer.EofId}`;
               value
             });
           }
-          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]`);
+            throw SyntaxError(`for 循环最多可包含三个表达式, 分别为 arr ; item index [; key]`);
           }
           if (!isSemicolon) return count === 3;
         } else {
@@ -1199,27 +1065,27 @@ ${Tokenizer.EofId}`;
       }
     }
     assignment() {
-      this.setToken(TokenType.Assign, "=");
+      this.setToken(TokenType.Assign, '=');
     }
     pipe() {
-      this.setToken(TokenType.Pipe, "|");
+      this.setToken(TokenType.Pipe, '|');
     }
     dynamic(char) {
       let nextC = this.code[this.i + 1];
-      if (nextC !== "{") {
+      if (nextC !== '{') {
         return false;
       }
       this.i++;
-      let value = "${";
+      let value = '${';
       let innerBrace = 0;
       while (1) {
         nextC = this.code[this.i + 1];
         value += nextC;
         this.i++;
-        if (nextC === "{") {
+        if (nextC === '{') {
           innerBrace++;
         }
-        if (nextC === "}") {
+        if (nextC === '}') {
           if (!innerBrace) {
             break;
           }
@@ -1233,14 +1099,14 @@ ${Tokenizer.EofId}`;
       let inComment,
         inString,
         count = 0,
-        value = "",
+        value = '',
         backslashCount = 0;
       while (1) {
         const char = this.code[this.i];
         const nextChar = this.code[this.i + 1];
-        if (inComment === "single" && char === "\n") {
+        if (inComment === 'single' && char === '\n') {
           inComment = null;
-        } else if (inComment === "multi" && char === "*" && nextChar === "/") {
+        } else if (inComment === 'multi' && char === '*' && nextChar === '/') {
           inComment = null;
           value += this.code[this.i];
           this.i++;
@@ -1248,21 +1114,21 @@ ${Tokenizer.EofId}`;
           if (char === inString && backslashCount % 2 === 0) {
             inString = null;
           }
-          backslashCount = char === "\\" ? backslashCount + 1 : 0;
+          backslashCount = char === '\\' ? backslashCount + 1 : 0;
         } else {
-          if (char === "/" && nextChar === "/") {
-            inComment = "single";
+          if (char === '/' && nextChar === '/') {
+            inComment = 'single';
             value += this.code[this.i];
             this.i++;
-          } else if (char === "/" && nextChar === "*") {
-            inComment = "multi";
+          } else if (char === '/' && nextChar === '*') {
+            inComment = 'multi';
             value += this.code[this.i];
             this.i++;
-          } else if (char === "'" || char === '"' || char === "`") {
+          } else if (char === "'" || char === '"' || char === '`') {
             inString = char;
-          } else if (char === "{") {
+          } else if (char === '{') {
             count++;
-          } else if (char === "}") {
+          } else if (char === '}') {
             count--;
           }
         }
@@ -1274,11 +1140,11 @@ ${Tokenizer.EofId}`;
       }
     }
     newLine() {
-      let value = "\n";
+      let value = '\n';
       let nextC;
       while (1) {
         nextC = this.code[this.i + 1];
-        if (nextC !== "\n") {
+        if (nextC !== '\n') {
           break;
         }
         value += nextC;
@@ -1290,26 +1156,26 @@ ${Tokenizer.EofId}`;
       this.setToken(TokenType.NewLine, value);
     }
     getDentValue() {
-      let value = "";
+      let value = '';
       let nextC;
       let isEmptyLine = false;
       while (1) {
         const nextChar = this.code[this.i];
         switch (nextChar) {
-          case "	":
+          case '\t':
             nextC = this.Tab;
             break;
-          case " ":
-            nextC = " ";
+          case ' ':
+            nextC = ' ';
             break;
-          case "\n":
-            nextC = "\n";
+          case '\n':
+            nextC = '\n';
             break;
           default:
-            nextC = "";
+            nextC = '';
             break;
         }
-        if (nextC === "\n") {
+        if (nextC === '\n') {
           isEmptyLine = true;
           break;
         }
@@ -1350,7 +1216,7 @@ ${Tokenizer.EofId}`;
           const expLen = this.dentStack[i];
           if (currLen === expLen) break;
           if (currLen > expLen) {
-            throw SyntaxError("\u7F29\u8FDB\u5927\u5C0F\u4E0D\u7EDF\u4E00");
+            throw SyntaxError('缩进大小不统一');
           }
           if (this.shorterThanBaseDentEof()) {
             return;
@@ -1375,7 +1241,7 @@ ${Tokenizer.EofId}`;
       if (yes) {
         if (!this.token) {
           if (this.useDedentAsEof) {
-            this.setToken(TokenType.Dedent, "");
+            this.setToken(TokenType.Dedent, '');
           } else {
             this.setToken(TokenType.Identifier, Tokenizer.EofId);
           }
@@ -1384,7 +1250,7 @@ ${Tokenizer.EofId}`;
             this.waitingTokens.push({
               type: TokenType.Dedent,
               typeName: TokenType[TokenType.Dedent],
-              value: ""
+              value: ''
             });
           } else {
             this.waitingTokens.push({
@@ -1402,27 +1268,27 @@ ${Tokenizer.EofId}`;
       let nextC;
       while (1) {
         nextC = this.code[this.i + 1];
-        if (typeof nextC !== "string" || !bobeShared.matchIdStart2(nextC, 0)) {
+        if (typeof nextC !== 'string' || !bobeShared.matchIdStart2(nextC, 0)) {
           break;
         }
         value += nextC;
         this.i++;
       }
       if (value === Tokenizer.EofId && this.useDedentAsEof) {
-        this.setToken(TokenType.Dedent, "");
+        this.setToken(TokenType.Dedent, '');
         return;
       }
-      let realValue = value === "null" ? null : value === "undefined" ? void 0 : value === "false" ? false : value === "true" ? true : value;
+      let realValue = value === 'null' ? null : value === 'undefined' ? undefined : value === 'false' ? false : value === 'true' ? true : value;
       this.setToken(TokenType.Identifier, realValue);
     }
     str(char) {
-      let value = "";
+      let value = '';
       let nextC;
       let continuousBackslashCount = 0;
       while (1) {
         nextC = this.code[this.i + 1];
         const memoCount = continuousBackslashCount;
-        if (nextC === "\\") {
+        if (nextC === '\\') {
           continuousBackslashCount++;
         } else {
           continuousBackslashCount = 0;
@@ -1449,13 +1315,33 @@ ${Tokenizer.EofId}`;
       this.setToken(TokenType.Identifier, Number(value));
     }
     eof() {
-      this.setToken(TokenType.Eof, "End Of File");
-    }
+      this.setToken(TokenType.Eof, 'End Of File');
+    }
+    HookId = '_h_o_o_k_';
+    hookI = 0;
+    _hook = props => {
+      const value = this.token.value;
+      const isDynamicHook = this.token.type & TokenType.InsertionExp;
+      const isStaticHook = typeof value === 'string' && value.indexOf(this.HookId) === 0;
+      const hookType = isDynamicHook ? 'dynamic' : isStaticHook ? 'static' : undefined;
+      if (this.hook && isStaticHook) {
+        const hookI = Number(value.slice(this.HookId.length));
+        const res = this.hook({
+          ...props,
+          HookId: this.HookId,
+          i: hookI
+        });
+        return [hookType, res, hookI];
+      } else if (isDynamicHook) {
+        return [hookType, value];
+      }
+      return [hookType, value];
+    };
     init(fragments) {
-      if (typeof fragments === "string") {
+      if (typeof fragments === 'string') {
         this.setCode(fragments);
       } else {
-        let code = "";
+        let code = '';
         for (let i = 0; i < fragments.length - 1; i++) {
           const fragment = fragments[i];
           code += fragment + `${this.HookId}${i}`;
@@ -1466,7 +1352,7 @@ ${Tokenizer.EofId}`;
   }
 
   function bobe(fragments, ...values) {
-    const ui = function ui2(isSub) {
+    const ui = function ui(isSub) {
       const tokenizer = new Tokenizer(({
         i
       }) => {
@@ -1481,7 +1367,7 @@ ${Tokenizer.EofId}`;
   function customRender(option) {
     return function render(Ctor, root) {
       const store = Ctor.new();
-      const tokenizer = store["ui"](false);
+      const tokenizer = store['ui'](false);
       const terp = new Interpreter(tokenizer);
       terp.config(option);
       const componentNode = {