bobe 0.0.22 → 0.0.24

package/dist/bobe.esm.js

@@ -1,6 +1,6 @@
-import { getPulling, setPulling, Keys, $, effect, toRaw, scope, Store, deepSignal, shareSignal, runWithPulling } from 'aoye';
+import { getPulling, setPulling, Keys, Computed, Effect, toRaw, Scope, runWithPulling, deepSignal, Store, shareSignal, effect } from 'aoye';
 export * from 'aoye';
-import { BaseEvent, jsVarRegexp, Queue, isNum, matchIdStart2 } from 'bobe-shared';
+import { jsVarRegexp, Queue, isNum, matchIdStart2 } from 'bobe-shared';
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -71,54 +71,50 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-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,
@@ -130,18 +126,15 @@ class MultiTypeStack {
       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) {
@@ -152,63 +145,26 @@ class MultiTypeStack {
     }
     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 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();
@@ -251,7 +207,7 @@ class Interpreter {
         }, !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) {
-            setPulling(ctx.current.effect.ins);
+            setPulling(ctx.current.effect);
           }
         } else {
           if (ctx.current) {
@@ -283,7 +239,7 @@ class Interpreter {
           if (sort & NodeSort.Logic) {
             const parentLogic = stack.peekByType(NodeSort.Logic)?.node;
             if (parentLogic) {
-              setPulling(parentLogic.effect.ins);
+              setPulling(parentLogic.effect);
             } else {
               setPulling(rootPulling);
             }
@@ -293,7 +249,8 @@ class Interpreter {
             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;
@@ -319,7 +276,7 @@ class Interpreter {
     }
     return componentNode;
   }
-  insertAfterAnchor(name = "anchor") {
+  insertAfterAnchor(name = 'anchor') {
     const _this$ctx = this.ctx,
       realParent = _this$ctx.realParent,
       prevSibling = _this$ctx.prevSibling,
@@ -330,12 +287,6 @@ class Interpreter {
     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) {
@@ -354,7 +305,6 @@ class Interpreter {
       }
     }
   }
-  /** 考虑到同级 逻辑模块 */
   getPrevRealSibling(prevSibling) {
     if (!prevSibling || !prevSibling.__logicType) {
       return prevSibling;
@@ -367,38 +317,33 @@ class Interpreter {
       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[Keys.Raw], value);
         const val = data[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 {
@@ -420,12 +365,12 @@ class Interpreter {
     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}};`);
+      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") {
+    while (this.tokenizer.code[this.tokenizer.i] !== '\n') {
       const next = this.tokenizer.nextToken();
       if (next.type !== TokenType.Semicolon) {
         if (!indexName) {
@@ -439,7 +384,7 @@ class Interpreter {
     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,
@@ -454,25 +399,21 @@ class Interpreter {
       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[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 arrSignal = hasArrExpKey ? (data[arrExp], cells.get(arrExp)) : new 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 = effect(() => {
-      let arr = forNode.arr = arrSignal.v;
+    forNode.effect = new Effect(() => {
+      let arr = forNode.arr = arrSignal.get();
       arr[Keys.Iterator];
       arr = toRaw(arr);
       const children = forNode.children;
@@ -481,7 +422,7 @@ class Interpreter {
         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;
@@ -508,7 +449,7 @@ class Interpreter {
               const child = children[i];
               this.removeLogicNode(child);
               this.remove(child.realAfter);
-              child.effect();
+              child.effect.dispose();
             }
           }
           if (oldLen < newLen) {
@@ -517,7 +458,7 @@ class Interpreter {
               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) {
@@ -529,7 +470,7 @@ class Interpreter {
               this.tokenizer.useDedentAsEof = false;
               runWithPulling(() => {
                 this.program(forNode.realParent, forNode.owner, lastAfter, item);
-              }, item.effect.ins);
+              }, item.effect);
             }
             const firstInsert = newChildren[oldLen];
             if (firstInsert) {
@@ -539,7 +480,7 @@ class Interpreter {
           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]));
@@ -552,27 +493,32 @@ class Interpreter {
     });
     return forNode.children[0] || forNode;
   }
+  forItemId = 0;
   createForItem(forNode, i, parentData) {
     let forItemNode;
-    const effect2 = scope(() => {}, null);
+    const scope = new Scope(() => {});
+    scope.scope = null;
+    runWithPulling(() => {
+      scope.get();
+    }, null);
     const arr = forNode.arr,
       itemExp = forNode.itemExp,
       indexName = forNode.indexName,
       getKey = forNode.getKey;
     let data;
-    if (typeof itemExp === "string") {
-      data = $(indexName ? {
+    if (typeof itemExp === 'string') {
+      data = deepSignal(indexName ? {
         [itemExp]: arr[i],
         [indexName]: i
       } : {
         [itemExp]: arr[i]
-      });
+      }, getPulling());
     } else {
       const rawData = itemExp(arr[i]);
       if (indexName) {
         rawData[indexName] = i;
       }
-      data = $(rawData);
+      data = deepSignal(rawData, getPulling());
     }
     Object.setPrototypeOf(data, parentData);
     forItemNode = {
@@ -586,7 +532,7 @@ class Interpreter {
       effect: null,
       data
     };
-    forItemNode.effect = effect2;
+    forItemNode.effect = scope;
     return forItemNode;
   }
   getData() {
@@ -594,24 +540,16 @@ class Interpreter {
       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") {
-      effect(() => {
+    } else if (typeof value === 'function') {
+      new Effect(() => {
         const res = value();
         this.setProp(node, key, res, hookI);
       });
     } else if (valueIsMapKey) {
-      effect(() => {
+      new Effect(() => {
         const res = data[value];
         this.setProp(node, key, res, hookI);
       });
@@ -619,6 +557,7 @@ class Interpreter {
       this.setProp(node, key, value, hookI);
     }
   }
+  oneRealPropParsed = this.onePropParsed.bind(this);
   componentOrFragmentDeclaration(ComponentOrRender, ctx) {
     let Component, render, child;
     const isCC = ComponentOrRender.prototype instanceof Store;
@@ -637,7 +576,7 @@ class Interpreter {
       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) {
@@ -647,32 +586,31 @@ class Interpreter {
       } else {
         const meta = child[Keys.Meta];
         const cells = meta.cells;
-        if (typeof value === "function") {
-          const computed = $(value);
+        if (typeof value === 'function') {
+          const computed = new Computed(value);
           cells.set(key, computed);
-          child[Keys.Raw][key] = void 0;
+          child[Keys.Raw][key] = undefined;
         } else {
           cells.set(key, {
-            v: value
+            get: () => value
           });
           child[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;
@@ -680,7 +618,6 @@ class Interpreter {
     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,
@@ -693,22 +630,22 @@ class Interpreter {
     };
     let signal;
     switch (keyWord.value) {
-      case "if":
+      case 'if':
         if (valueIsMapKey) {
           runWithPulling(() => data[value], null);
           const cells = data[Keys.Meta].cells;
           signal = cells.get(value);
         } else {
           const fn = this.getFn(data, value);
-          signal = $(fn);
+          signal = new Computed(fn);
         }
         break;
-      case "else":
+      case 'else':
         if (noCond) {
-          signal = $(() => {
+          signal = new Computed(() => {
             let point = ifNode.preCond;
             while (point) {
-              if (point.condition.v) {
+              if (point.condition.get()) {
                 return false;
               }
               if (point.__logicType === FakeType.If) {
@@ -720,10 +657,10 @@ class Interpreter {
           });
         } else {
           const fn = valueIsMapKey ? null : this.getFn(data, value);
-          signal = $(() => {
+          signal = new Computed(() => {
             let point = ifNode.preCond;
             while (point) {
-              if (point.condition.v) {
+              if (point.condition.get()) {
                 return false;
               }
               if (point.__logicType === FakeType.If) {
@@ -735,11 +672,11 @@ class Interpreter {
           });
         }
         break;
-      case "fail":
-        signal = $(() => {
+      case 'fail':
+        signal = new Computed(() => {
           let point = ifNode.preCond;
           while (point) {
-            if (point.condition.v) {
+            if (point.condition.get()) {
               return false;
             }
             point = point.preCond;
@@ -750,7 +687,7 @@ class Interpreter {
     }
     ifNode.condition = signal;
     ifNode.realAfter = this.insertAfterAnchor(`${keyWord.value}-after`);
-    ifNode.effect = effect(({
+    const ef = effect(({
       val
     }) => {
       if (val) {
@@ -772,6 +709,7 @@ class Interpreter {
       }
       ifNode.isFirstRender = false;
     }, [signal]);
+    ifNode.effect = ef.ins;
     return ifNode;
   }
   removeLogicNode(node) {
@@ -785,10 +723,6 @@ class Interpreter {
       point = next;
     }
   }
-  /**
-   * <extensionLines> ::= PIPE <attributeList> NEWLINE <extensionLines>
-   *                    | ε
-   */
   extensionLines(_node) {
     while (1) {
       if ((this.tokenizer.token.type & TokenType.Pipe) === 0) {
@@ -802,25 +736,10 @@ class Interpreter {
       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();
@@ -828,7 +747,7 @@ class Interpreter {
       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),
@@ -836,12 +755,12 @@ class Interpreter {
           value = _this$tokenizer$_hook4[1],
           hookI = _this$tokenizer$_hook4[2];
         const rawVal = data[Keys.Raw][value];
-        const isFn = typeof rawVal === "function";
-        if (hookType === "dynamic") {
+        const isFn = typeof rawVal === 'function';
+        if (hookType === 'dynamic') {
           const valueIsMapKey = Reflect.has(data[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);
@@ -892,7 +811,6 @@ class Interpreter {
   remove(node, parent, prev) {
     return this.defaultRemove(node, parent, prev);
   }
-  // TODO: 默认改成 prevItem
   defaultRemove(node, parent, prevSibling) {
     const next = node.nextSibling;
     if (prevSibling) {
@@ -908,76 +826,33 @@ class Interpreter {
 }
 
 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 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 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];
@@ -991,7 +866,7 @@ class Tokenizer {
     if (keys) {
       for (const k of keys) {
         snap[k] = this[k];
-        if (k === "dentStack") {
+        if (k === 'dentStack') {
           snap[k] = this[k].slice();
         }
       }
@@ -1002,10 +877,10 @@ class Tokenizer {
     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++;
@@ -1029,7 +904,7 @@ class Tokenizer {
           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;
@@ -1054,13 +929,12 @@ class Tokenizer {
     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() {
@@ -1080,7 +954,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);
@@ -1092,40 +966,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 (isNum(char)) {
                 this.number(char);
                 break;
               }
-              if (typeof char === "string" && matchIdStart2(char, 0)) {
+              if (typeof char === 'string' && matchIdStart2(char, 0)) {
                 this.identifier(char);
               }
               break;
@@ -1145,11 +1018,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;
@@ -1159,21 +1032,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);
@@ -1184,10 +1050,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 {
@@ -1197,27 +1063,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;
         }
@@ -1231,14 +1097,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++;
@@ -1246,21 +1112,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--;
         }
       }
@@ -1272,11 +1138,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;
@@ -1288,26 +1154,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;
       }
@@ -1348,7 +1214,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;
@@ -1373,7 +1239,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);
         }
@@ -1382,7 +1248,7 @@ ${Tokenizer.EofId}`;
           this.waitingTokens.push({
             type: TokenType.Dedent,
             typeName: TokenType[TokenType.Dedent],
-            value: ""
+            value: ''
           });
         } else {
           this.waitingTokens.push({
@@ -1400,27 +1266,27 @@ ${Tokenizer.EofId}`;
     let nextC;
     while (1) {
       nextC = this.code[this.i + 1];
-      if (typeof nextC !== "string" || !matchIdStart2(nextC, 0)) {
+      if (typeof nextC !== 'string' || !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;
@@ -1447,13 +1313,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}`;
@@ -1464,7 +1350,7 @@ ${Tokenizer.EofId}`;
 }
 
 function bobe(fragments, ...values) {
-  const ui = function ui2(isSub) {
+  const ui = function ui(isSub) {
     const tokenizer = new Tokenizer(({
       i
     }) => {
@@ -1479,7 +1365,7 @@ function bobe(fragments, ...values) {
 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 = {