bobe 0.0.15 → 0.0.17

package/dist/bobe.cjs.js

@@ -14,25 +14,27 @@ var TokenType = /* @__PURE__ */ ((TokenType2) => {
   TokenType2[TokenType2["InsertionExp"] = 128] = "InsertionExp";
   return TokenType2;
 })(TokenType || {});
-var LogicType = /* @__PURE__ */ ((LogicType2) => {
-  LogicType2[LogicType2["If"] = 1] = "If";
-  LogicType2[LogicType2["Fail"] = 2] = "Fail";
-  LogicType2[LogicType2["Else"] = 4] = "Else";
-  LogicType2[LogicType2["For"] = 8] = "For";
-  LogicType2[LogicType2["Component"] = 16] = "Component";
-  LogicType2[LogicType2["Fragment"] = 32] = "Fragment";
-  LogicType2[LogicType2["Root"] = 64] = "Root";
-  LogicType2[LogicType2["Real"] = 128] = "Real";
-  return LogicType2;
-})(LogicType || {});
-const Logical = 1 /* If */ | 2 /* Fail */ | 4 /* Else */ | 8 /* For */;
-const CondType = 1 /* If */ | 2 /* Fail */ | 4 /* Else */;
-var NodeType = /* @__PURE__ */ ((NodeType2) => {
-  NodeType2[NodeType2["Logic"] = Logical] = "Logic";
-  NodeType2[NodeType2["Real"] = 128 /* Real */] = "Real";
-  NodeType2[NodeType2["Component"] = 16 /* Component */] = "Component";
-  return NodeType2;
-})(NodeType || {});
+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 || {});
 var TerpEvt = /* @__PURE__ */ ((TerpEvt2) => {
   TerpEvt2["AllAttrGot"] = "all-attr-got";
   TerpEvt2["HandledComponentNode"] = "handled-component-node";
@@ -40,140 +42,123 @@ var TerpEvt = /* @__PURE__ */ ((TerpEvt2) => {
 })(TerpEvt || {});
 const IsAnchor = /* @__PURE__ */ Symbol("is-anchor");
 
-class TypedStack {
+class MultiTypeStack {
   constructor() {
+    // 记录全局栈顶
     this.top = null;
-    // 存储每种类型最近一次出现的包装单元引用
-    // 使用 Record 来动态支持不同的类型标签
-    this.lastNodes = {};
+    // 记录每个类别的当前最新节点（各分类的“栈顶”）
+    this.typeTops = {};
     this.length = 0;
   }
   /**
-   * @param rawNode 原始节点数据
-   * @param type 节点类型
+   * 入栈操作
+   * @param value 数据
+   * @param bits 该节点所属的类别数组
    */
-  push(rawNode, type) {
-    var _a;
+  push(value, bits) {
     const newNode = {
-      data: rawNode,
-      type,
-      prev: this.top,
-      prevSameType: (_a = this.lastNodes[type]) != null ? _a : null
+      value,
+      types: bits,
+      prevGlobal: this.top,
+      prevByType: {}
     };
+    let bit;
+    while (1) {
+      bit = bits & ~bits + 1;
+      if (!bit) break;
+      bits &= ~bit;
+      newNode.prevByType[bit] = this.typeTops[bit] || void 0;
+      this.typeTops[bit] = newNode;
+    }
     this.top = newNode;
     this.length++;
-    this.lastNodes[type] = newNode;
   }
   /**
    * 出栈操作
-   * @returns 原始节点数据或 null
    */
   pop() {
-    if (!this.top) return null;
-    const popped = this.top;
-    this.lastNodes[popped.type] = popped.prevSameType;
-    this.top = popped.prev;
+    if (!this.top) return void 0;
+    const poppedNode = this.top;
+    let { types: bits } = poppedNode;
+    let bit;
+    while (1) {
+      bit = bits & ~bits + 1;
+      if (!bit) break;
+      bits &= ~bit;
+      this.typeTops[bit] = poppedNode.prevByType[bit];
+    }
+    this.top = poppedNode.prevGlobal;
     this.length--;
-    return popped.data;
+    return [poppedNode.value, poppedNode.types];
   }
   /**
-   * O(1) 获取栈顶节点的前一个同类型节点
+   * 获取某个类别的当前“顶部”元素
    */
-  getPrevSameType() {
-    if (!this.top || !this.top.prevSameType) {
-      return null;
-    }
-    return this.top.prevSameType.data;
-  }
-  findPrevSameType(cb) {
-    if (!this.top) {
-      return null;
-    }
-    let point = this.top.prevSameType;
-    while (point) {
-      if (cb(point.data)) {
-        return point.data;
-      }
-      point = point.prevSameType;
-    }
-    return null;
+  peekByType(cat) {
+    var _a;
+    return (_a = this.typeTops[cat]) == null ? void 0 : _a.value;
   }
-  /**
-   * 获取当前栈顶的类型
-   */
-  get peekType() {
-    return this.top ? this.top.type : null;
+  peekType() {
+    var _a;
+    return (_a = this.top) == null ? void 0 : _a.types;
   }
   /**
-   * 获取栈顶元素
+   * 获取全局栈顶
    */
   peek() {
-    return this.top.data;
+    var _a;
+    return (_a = this.top) == null ? void 0 : _a.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];
+  //   }
+  // }
 }
 
-var __defProp$1 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 const tap = new bobeShared.BaseEvent();
 class Interpreter {
   constructor(tokenizer) {
     this.tokenizer = tokenizer;
-    /** 模板字符串动态节点的占位符 */
-    this.HookId = "_h_o_o_k_";
-    /** 用于渲染的数据 */
-    this.data = {};
-    /** 模板字符串动态节点索引 */
-    this.hookI = 0;
-    this._hook = (props) => {
-      const value = this.tokenizer.token.value;
-      const isDynamicHook = this.tokenizer.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(__spreadProps$1(__spreadValues$1({}, props), {
-          HookId: this.HookId,
-          i: hookI
-        }));
-        this.hookI++;
-        return [hookType, res];
-      } else if (isDynamicHook) {
-        return [hookType, value];
-      }
-      return [hookType, value];
-    };
+    this.rootComponent = null;
   }
   isLogicNode(node) {
-    return node && node.__logicType & Logical;
+    return node && node.__logicType & LogicalBit;
   }
-  program(root, before) {
-    var _a;
-    const componentNode = {
-      __logicType: LogicType.Component,
-      realParent: root,
-      store: new aoye.Store()
-    };
-    this.tokenizer.consume();
-    const stack = new TypedStack();
-    stack.push({ node: root, prev: null }, NodeType.Real);
-    const ctx = {
+  program(root, componentNode, before) {
+    var _a, _b;
+    this.rootComponent = componentNode;
+    this.tokenizer.nextToken();
+    const stack = new MultiTypeStack();
+    stack.push({ node: root, prev: null }, NodeSort.Real);
+    stack.push(
+      { node: componentNode, prev: null },
+      NodeSort.Component | NodeSort.CtxProvider | NodeSort.TokenizerSwitcher
+    );
+    const ctx = this.ctx = {
       realParent: root,
       prevSibling: before,
       current: null,
@@ -189,14 +174,14 @@ class Interpreter {
       }
       const token = this.tokenizer.token;
       if (token.type & TokenType.Indent) {
-        this.tokenizer.consume();
+        this.tokenizer.nextToken();
         const isLogicNode = this.isLogicNode(ctx.current);
         stack.push(
           {
             node: ctx.current,
             prev: ctx.prevSibling
           },
-          ctx.current.__logicType ? isLogicNode ? NodeType.Logic : NodeType.Component : NodeType.Real
+          !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) {
@@ -212,28 +197,31 @@ class Interpreter {
         continue;
       }
       if (ctx.current) {
-        if (stack.length === 1 && !ctx.prevSibling) {
+        if (stack.length === 2 && !ctx.prevSibling) {
           ctx.prevSibling = before;
         }
         this.handleInsert(ctx.realParent, ctx.current, ctx.prevSibling);
       }
       if (this.tokenizer.token.type & TokenType.Dedent) {
-        this.tokenizer.consume();
-        const { node: parent, prev } = stack.peek();
+        this.tokenizer.nextToken();
+        const [{ node: parent, prev }, sort] = stack.pop();
         if (!parent.__logicType) {
-          const prevSameType = stack.getPrevSameType();
+          const prevSameType = stack.peekByType(NodeSort.Real);
           ctx.realParent = (prevSameType == null ? void 0 : prevSameType.node) || root;
         } else {
-          if (this.isLogicNode(parent)) {
-            const parentLogic = (_a = stack.getPrevSameType()) == null ? void 0 : _a.node;
+          if (sort & NodeSort.Logic) {
+            const parentLogic = (_a = stack.peekByType(NodeSort.Logic)) == null ? void 0 : _a.node;
             if (parentLogic) {
               aoye.setPulling(parentLogic.effect.ins);
             } else {
               aoye.setPulling(rootPulling);
             }
           }
+          if (sort & NodeSort.TokenizerSwitcher) {
+            const switcher = (_b = stack.peekByType(NodeSort.TokenizerSwitcher)) == null ? void 0 : _b.node;
+            this.tokenizer = switcher.tokenizer;
+          }
         }
-        stack.pop();
         ctx.prevSibling = prev;
         ctx.current = parent;
       } else {
@@ -243,10 +231,15 @@ 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 === 1 && !prevSibling ? before : prevSibling;
+    ctx.prevSibling = stack.length === 2 && !prevSibling ? before : prevSibling;
     this.handleInsert(realParent, afterAnchor, prevSibling);
     return afterAnchor;
   }
@@ -293,7 +286,7 @@ class Interpreter {
    * <declaration> ::= <tagName=token> <headerLine> <extensionLines>
    *  */
   declaration(ctx) {
-    const [hookType, value] = this._hook({});
+    const [hookType, value] = this.tokenizer._hook({});
     let _node;
     if (value === "if" || value === "else" || value === "fail") {
       return this.condDeclaration(ctx);
@@ -302,34 +295,42 @@ class Interpreter {
         if (typeof value === "function" && value.prototype instanceof aoye.Store) {
           _node = this.componentDeclaration(value, ctx);
         } else if (typeof value === "function") {
-          _node = this.fragmentDeclaration(value);
+          _node = this.fragmentDeclaration(value, ctx);
         } else {
           throw new SyntaxError(`declaration \u4E0D\u652F\u6301 ${value} \u7C7B\u578B\u7684\u9759\u6001\u63D2\u503C`);
         }
       } else {
-        Boolean(this.data[aoye.Keys.Raw][value]);
+        const data = this.getData();
+        Boolean(data[aoye.Keys.Raw][value]);
         new Function("data", `let v;with(data){v=(${value})};return v`);
         _node = this.createNode(value);
       }
     } else {
       _node = this.createNode(value);
     }
-    this.tokenizer.consume();
+    this.tokenizer.nextToken();
     this.headerLine(_node);
     this.extensionLines(_node);
-    if (_node.__logicType === LogicType.Component) {
+    if (_node.__logicType === FakeType.Component) {
       tap.once(TerpEvt.HandledComponentNode, (node) => _node = node);
       tap.emit(TerpEvt.AllAttrGot);
     }
     return _node;
   }
+  getData() {
+    const { node } = this.ctx.stack.peekByType(NodeSort.CtxProvider);
+    return node.data || node.owner.data;
+  }
   // TODO: 指定挂载位置
-  fragmentDeclaration(renderFragment) {
+  fragmentDeclaration(renderFragment, ctx) {
+    const data = this.getData();
+    const tokenizer = renderFragment.call(data, this.opt, { data, root: "", anchor: "" });
     const fragmentNode = {
-      __logicType: LogicType.Fragment,
-      realParent: null
+      __logicType: FakeType.Fragment,
+      realParent: null,
+      tokenizer,
+      data: null
     };
-    renderFragment.call(this.data, this.opt, { data: this.data, root: "", anchor: "" });
     return fragmentNode;
   }
   /**
@@ -340,15 +341,17 @@ class Interpreter {
    *
    * mapKey 映射, 对应子组件的属性
    *  */
-  onePropParsed(node, key, value, valueIsMapKey, hookI) {
-    if (typeof value === "function") {
+  onePropParsed(data, node, key, value, valueIsMapKey, isFn, hookI) {
+    if (isFn) {
+      this.setProp(node, key, value, hookI);
+    } else if (typeof value === "function") {
       aoye.effect(() => {
         const res = value();
         this.setProp(node, key, res, hookI);
       });
     } else if (valueIsMapKey) {
       aoye.effect(() => {
-        const res = this.data[value];
+        const res = data[value];
         this.setProp(node, key, res, hookI);
       });
     } else {
@@ -357,10 +360,18 @@ class Interpreter {
   }
   componentDeclaration(Component, ctx) {
     const child = Component.new();
+    const componentNode = {
+      __logicType: FakeType.Component,
+      realParent: ctx.realParent,
+      data: child,
+      tokenizer: null
+    };
     const prevOnePropParsed = this.onePropParsed;
-    this.onePropParsed = (node, key, value, valueIsMapKey, hookI) => {
-      if (valueIsMapKey) {
-        aoye.shareSignal(this.data, value, child, key);
+    this.onePropParsed = (data, node, key, value, valueIsMapKey, isFn, hookI) => {
+      if (isFn) {
+        child[aoye.Keys.Raw][key] = value;
+      } else if (valueIsMapKey) {
+        aoye.shareSignal(data, value, child, key);
       } else if (typeof value === "function") {
         const meta = child[aoye.Keys.Meta];
         const cells = meta.cells;
@@ -370,37 +381,41 @@ class Interpreter {
         child[aoye.Keys.Raw][key] = value;
       }
     };
-    const afterAnchor = this.insertAfterAnchor(ctx);
+    componentNode.realAfter = this.insertAfterAnchor(ctx);
     const { realParent, prevSibling } = ctx;
     tap.once(TerpEvt.AllAttrGot, () => {
-      const parent = realParent;
-      const prev = prevSibling;
       this.onePropParsed = prevOnePropParsed;
-      const componentNode = child["ui"](this.opt, { data: child }, parent, prev);
-      componentNode.realAfter = afterAnchor;
+      const subTkr = child["ui"](true);
+      componentNode.tokenizer = subTkr;
+      this.tokenizer = subTkr;
       tap.emit(TerpEvt.HandledComponentNode, componentNode);
     });
-    return { __logicType: LogicType.Component };
+    return componentNode;
   }
   // TODO: 优化代码逻辑，拆分 if elseif else
   condDeclaration(ctx) {
+    var _a;
     const { prevSibling } = ctx;
     const snapbackUp = this.tokenizer.snapshot();
-    const keyWord = this.tokenizer.consume();
+    const keyWord = this.tokenizer.token;
+    this.tokenizer.nextToken();
     const noSelfCond = this.tokenizer.token.type === TokenType.NewLine;
-    const [hookType, value] = this._hook({});
+    const [hookType, value] = this.tokenizer._hook({});
     const isElse = keyWord.value === "else";
     const isIf = keyWord.value === "if";
-    const preIsCond = (prevSibling == null ? void 0 : prevSibling.__logicType) & CondType;
+    const preIsCond = (prevSibling == null ? void 0 : prevSibling.__logicType) & CondBit;
     const needCalcWithPrevIf = isElse && preIsCond;
+    const data = this.getData();
+    const owner = (_a = ctx.stack.peekByType(NodeSort.TokenizerSwitcher)) == null ? void 0 : _a.node;
     const ifNode = {
-      __logicType: isElse ? LogicType.Else : isIf ? LogicType.If : LogicType.Fail,
+      __logicType: isElse ? FakeType.Else : isIf ? FakeType.If : FakeType.Fail,
       snapshot: noSelfCond ? snapbackUp : this.tokenizer.snapshot(),
       condition: null,
       realParent: null,
       preCond: preIsCond ? prevSibling : null,
       isFirstRender: true,
-      effect: null
+      effect: null,
+      owner
     };
     let signal;
     if (noSelfCond) {
@@ -411,7 +426,7 @@ class Interpreter {
             if (point.condition.v) {
               return false;
             }
-            if (point.__logicType === LogicType.If) {
+            if (point.__logicType === FakeType.If) {
               break;
             }
             point = point.preCond;
@@ -431,13 +446,13 @@ class Interpreter {
         });
       }
     } else {
-      const valueIsMapKey = Reflect.has(this.data[aoye.Keys.Raw], value);
+      const valueIsMapKey = Reflect.has(data[aoye.Keys.Raw], value);
       if (valueIsMapKey && !needCalcWithPrevIf) {
-        aoye.runWithPulling(() => this.data[value], null);
-        const { cells } = this.data[aoye.Keys.Meta];
+        aoye.runWithPulling(() => data[value], null);
+        const { cells } = data[aoye.Keys.Meta];
         signal = cells.get(value);
       } else {
-        const fn = new Function("data", `let v;with(data){v=${value}};return v;`).bind(void 0, this.data);
+        const fn = new Function("data", `let v;with(data){v=${value}};return v;`).bind(void 0, data);
         if (needCalcWithPrevIf) {
           signal = aoye.$(() => {
             let point = ifNode.preCond;
@@ -445,7 +460,7 @@ class Interpreter {
               if (point.condition.v) {
                 return false;
               }
-              if (point.__logicType === LogicType.If) {
+              if (point.__logicType === FakeType.If) {
                 break;
               }
               point = point.preCond;
@@ -464,12 +479,13 @@ class Interpreter {
         if (val) {
           if (ifNode.isFirstRender) {
             if (!noSelfCond) {
-              this.tokenizer.consume();
+              this.tokenizer.nextToken();
             }
-            this.tokenizer.consume();
+            this.tokenizer.nextToken();
           } else {
+            this.tokenizer = ifNode.owner.tokenizer;
             this.tokenizer.resume(ifNode.snapshot);
-            this.program(ifNode.realParent, ifNode.realBefore);
+            this.program(ifNode.realParent, ifNode.owner, ifNode.realBefore);
           }
         } else {
           if (ifNode.isFirstRender) {
@@ -480,7 +496,7 @@ class Interpreter {
             this.tokenizer.skip();
           } else {
             const { realBefore, realAfter, realParent } = ifNode;
-            let point = realBefore ? this.nextSib(realBefore) : this.kid(realParent);
+            let point = realBefore ? this.nextSib(realBefore) : this.firstChild(realParent);
             while (point !== realAfter) {
               const next = this.nextSib(point);
               this.remove(point, realParent, realBefore);
@@ -500,15 +516,15 @@ class Interpreter {
    */
   extensionLines(_node) {
     while (1) {
-      if (!(this.tokenizer.token.type & TokenType.Pipe)) {
+      if ((this.tokenizer.token.type & TokenType.Pipe) === 0) {
         return;
       }
-      this.tokenizer.consume();
+      this.tokenizer.nextToken();
       this.attributeList(_node);
-      if (!(this.tokenizer.token.type & TokenType.NewLine)) {
+      if ((this.tokenizer.token.type & TokenType.NewLine) === 0) {
         return;
       }
-      this.tokenizer.consume();
+      this.tokenizer.nextToken();
     }
   }
   /**
@@ -518,7 +534,7 @@ class Interpreter {
    */
   headerLine(_node) {
     this.attributeList(_node);
-    this.tokenizer.consume();
+    this.tokenizer.nextToken();
   }
   /**
    * 属性列表：
@@ -528,30 +544,33 @@ class Interpreter {
    *
    * <attribute> ::= <key> = <value>
    * 1. 普通节点 执行 setProps 🪝
-   * 2. 组件节点 收集映射关系，或通过 effect 直接设值
+   * 2. 组件节点 收集映射关系，或 产生 computed
    */
   attributeList(_node) {
     let key, eq;
-    while (!(this.tokenizer.token.type & TokenType.NewLine)) {
+    const data = this.getData();
+    while ((this.tokenizer.token.type & TokenType.NewLine) === 0) {
       if (key == null) {
         key = this.tokenizer.token.value;
       } else if (eq == null) {
         eq = "=";
       } else {
-        const [hookType, value] = this._hook({});
+        const [hookType, value, hookI] = this.tokenizer._hook({});
+        const rawVal = data[aoye.Keys.Raw][value];
+        const isFn = typeof rawVal === "function";
         if (hookType === "dynamic") {
-          const valueIsMapKey = Reflect.has(this.data[aoye.Keys.Raw], value);
-          const fn = valueIsMapKey ? value : new Function("data", `let v;with(data){v=${value}};return v;`).bind(void 0, this.data);
-          this.onePropParsed(_node, key, fn, valueIsMapKey, this.hookI);
+          const valueIsMapKey = Reflect.has(data[aoye.Keys.Raw], value);
+          const fn = isFn ? rawVal : valueIsMapKey ? value : new Function("data", `let v;with(data){v=${value}};return v;`).bind(void 0, data);
+          this.onePropParsed(data, _node, key, fn, valueIsMapKey, isFn, hookI);
         } else if (hookType === "static") {
-          this.onePropParsed(_node, key, value, false, this.hookI);
+          this.onePropParsed(data, _node, key, value, false, isFn, hookI);
         } else {
-          this.onePropParsed(_node, key, value, false, this.hookI);
+          this.onePropParsed(data, _node, key, value, false, isFn, hookI);
         }
         key = null;
         eq = null;
       }
-      this.tokenizer.consume();
+      this.tokenizer.nextToken();
     }
   }
   config(opt) {
@@ -568,7 +587,7 @@ class Interpreter {
   nextSib(node) {
     return node.nextSibling;
   }
-  kid(node) {
+  firstChild(node) {
     return node.firstChild;
   }
   _createAnchor() {
@@ -612,28 +631,35 @@ class Interpreter {
   setProp(node, key, value, hookI) {
     node.props[key] = value;
   }
-  init(fragments) {
-    if (typeof fragments === "string") {
-      this.tokenizer.setCode(fragments);
-    } else {
-      let code = "";
-      for (let i = 0; i < fragments.length - 1; i++) {
-        const fragment = fragments[i];
-        code += fragment + `${this.HookId}${i}`;
-      }
-      this.tokenizer.setCode(code + fragments[fragments.length - 1]);
-    }
-  }
 }
 
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const _Tokenizer = class _Tokenizer {
-  constructor() {
+  constructor(hook, isSubToken) {
+    this.hook = hook;
+    this.isSubToken = isSubToken;
     /** 缩进大小 默认 2 */
     this.TabSize = 2;
     /** 缩进字符 */
     this.Tab = Array.from({ length: this.TabSize }, () => " ").join("");
-    /** 匹配标识符 */
-    this.IdExp = /[\d\w\/]/;
     /** 回车后需要判断缩进 */
     this.needIndent = false;
     /** 用于跳过第一个节点前的空白字符串，以及生成基础缩进 */
@@ -642,6 +668,7 @@ const _Tokenizer = class _Tokenizer {
     this.dentStack = [0];
     /** 当前字符 index */
     this.i = 0;
+    // TODO: 生产环境不需要这个，导致不必要的内存占用
     this.handledTokens = [];
     /**
      * 有些标识符能产生多个 token
@@ -652,6 +679,31 @@ const _Tokenizer = class _Tokenizer {
      * 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(__spreadProps(__spreadValues({}, props), {
+          HookId: this.HookId,
+          i: hookI
+        }));
+        return [hookType, res, hookI];
+      } else if (isDynamicHook) {
+        return [hookType, value];
+      }
+      return [hookType, value];
+    };
+    if (isSubToken) {
+      this.setToken(TokenType.Indent, "");
+      this.isFirstToken = true;
+    }
   }
   consume() {
     const token = this.token;
@@ -678,16 +730,16 @@ const _Tokenizer = class _Tokenizer {
     let skipFragment = ``;
     this.token = void 0;
     while (1) {
-      const char = this.char;
+      const char = this.code[this.i];
       if (char === "\n") {
         needIndent = true;
         skipFragment += char;
-        this.next();
+        this.i++;
         continue;
       }
       if (!needIndent) {
         skipFragment += char;
-        this.next();
+        this.i++;
         continue;
       }
       needIndent = false;
@@ -740,21 +792,6 @@ ${_Tokenizer.EofId}`;
     if (!this.token) return false;
     return this.token.type & TokenType.Identifier && this.token.value === _Tokenizer.EofId;
   }
-  get char() {
-    return this.code[this.i];
-  }
-  get prev() {
-    return this.code[this.i - 1];
-  }
-  get after() {
-    return this.code[this.i + 1];
-  }
-  next() {
-    const prev = this.code[this.i];
-    this.i++;
-    const curr = this.code[this.i];
-    return [prev, curr];
-  }
   setToken(type, value) {
     this.token = {
       type,
@@ -763,10 +800,6 @@ ${_Tokenizer.EofId}`;
     };
     this.isFirstToken = false;
   }
-  testId(value) {
-    if (typeof value !== "string") return false;
-    return this.IdExp.test(value);
-  }
   nextToken() {
     try {
       if (this.isEof()) {
@@ -782,7 +815,7 @@ ${_Tokenizer.EofId}`;
         if (this.needIndent) {
           this.dent();
         } else {
-          let { char } = this;
+          const char = this.code[this.i];
           switch (char) {
             case "	":
             case " ":
@@ -813,12 +846,12 @@ ${_Tokenizer.EofId}`;
                 this.number(char);
                 break;
               }
-              if (this.testId(char)) {
+              if (typeof char === "string" && bobeShared.matchIdStart(char)) {
                 this.identifier(char);
               }
               break;
           }
-          this.next();
+          this.i++;
         }
         if (this.token) {
           break;
@@ -827,6 +860,7 @@ ${_Tokenizer.EofId}`;
       return this.token;
     } catch (error) {
       console.error(error);
+      return this.token;
     } finally {
       this.handledTokens.push(this.token);
     }
@@ -838,17 +872,17 @@ ${_Tokenizer.EofId}`;
     this.setToken(TokenType.Pipe, "|");
   }
   dynamic(char) {
-    let nextC = this.after;
+    let nextC = this.code[this.i + 1];
     if (nextC !== "{") {
       return false;
     }
-    this.next();
+    this.i++;
     let value = "${";
     let innerBrace = 0;
     while (1) {
-      nextC = this.after;
+      nextC = this.code[this.i + 1];
       value += nextC;
-      this.next();
+      this.i++;
       if (nextC === "{") {
         innerBrace++;
       }
@@ -865,13 +899,14 @@ ${_Tokenizer.EofId}`;
   brace() {
     let inComment, inString, count = 0, value = "", backslashCount = 0;
     while (1) {
-      const char = this.char;
-      const nextChar = this.after;
+      const char = this.code[this.i];
+      const nextChar = this.code[this.i + 1];
       if (inComment === "single" && char === "\n") {
         inComment = null;
       } else if (inComment === "multi" && char === "*" && nextChar === "/") {
         inComment = null;
-        value += this.next()[0];
+        value += this.code[this.i];
+        this.i++;
       } else if (inString) {
         if (char === inString && backslashCount % 2 === 0) {
           inString = null;
@@ -880,10 +915,12 @@ ${_Tokenizer.EofId}`;
       } else {
         if (char === "/" && nextChar === "/") {
           inComment = "single";
-          value += this.next()[0];
+          value += this.code[this.i];
+          this.i++;
         } else if (char === "/" && nextChar === "*") {
           inComment = "multi";
-          value += this.next()[0];
+          value += this.code[this.i];
+          this.i++;
         } else if (char === "'" || char === '"' || char === "`") {
           inString = char;
         } else if (char === "{") {
@@ -896,19 +933,20 @@ ${_Tokenizer.EofId}`;
         this.setToken(TokenType.InsertionExp, value.slice(1));
         return;
       }
-      value += this.next()[0];
+      value += this.code[this.i];
+      this.i++;
     }
   }
   newLine() {
     let value = "\n";
     let nextC;
     while (1) {
-      nextC = this.after;
+      nextC = this.code[this.i + 1];
       if (nextC !== "\n") {
         break;
       }
       value += nextC;
-      this.next();
+      this.i++;
     }
     if (this.isFirstToken) {
       return;
@@ -920,7 +958,7 @@ ${_Tokenizer.EofId}`;
     let nextC;
     let isEmptyLine = false;
     while (1) {
-      const nextChar = this.char;
+      const nextChar = this.code[this.i];
       switch (nextChar) {
         case "	":
           nextC = this.Tab;
@@ -943,7 +981,7 @@ ${_Tokenizer.EofId}`;
         break;
       }
       value += nextC;
-      this.next();
+      this.i++;
     }
     return {
       value,
@@ -966,7 +1004,7 @@ ${_Tokenizer.EofId}`;
     const prevLen = this.dentStack[this.dentStack.length - 1];
     if (currLen > prevLen) {
       this.dentStack.push(currLen);
-      this.setToken(TokenType.Indent, String(currLen));
+      this.setToken(TokenType.Indent, currLen);
       return indentHasLen;
     }
     if (currLen < prevLen) {
@@ -998,13 +1036,25 @@ ${_Tokenizer.EofId}`;
     const yes = this.dentStack.length === 1;
     if (yes) {
       if (!this.token) {
-        this.setToken(TokenType.Identifier, _Tokenizer.EofId);
+        if (this.isSubToken) {
+          this.setToken(TokenType.Dedent, "");
+        } else {
+          this.setToken(TokenType.Identifier, _Tokenizer.EofId);
+        }
       } else {
-        this.waitingTokens.push({
-          type: TokenType.Identifier,
-          typeName: TokenType[TokenType.Identifier],
-          value: _Tokenizer.EofId
-        });
+        if (this.isSubToken) {
+          this.waitingTokens.push({
+            type: TokenType.Dedent,
+            typeName: TokenType[TokenType.Dedent],
+            value: ""
+          });
+        } else {
+          this.waitingTokens.push({
+            type: TokenType.Identifier,
+            typeName: TokenType[TokenType.Identifier],
+            value: _Tokenizer.EofId
+          });
+        }
       }
     }
     return yes;
@@ -1013,98 +1063,98 @@ ${_Tokenizer.EofId}`;
     let value = char;
     let nextC;
     while (1) {
-      nextC = this.after;
-      if (!this.testId(nextC)) {
+      nextC = this.code[this.i + 1];
+      if (typeof nextC !== "string" || !bobeShared.matchIdStart(nextC)) {
         break;
       }
       value += nextC;
-      this.next();
+      this.i++;
+    }
+    if (value === _Tokenizer.EofId && this.isSubToken) {
+      this.setToken(TokenType.Dedent, "");
+      return;
     }
     let realValue = value === "null" ? null : value === "undefined" ? void 0 : 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.after;
-      value += nextC;
+      nextC = this.code[this.i + 1];
       const memoCount = continuousBackslashCount;
       if (nextC === "\\") {
         continuousBackslashCount++;
       } else {
         continuousBackslashCount = 0;
       }
-      this.next();
+      this.i++;
       if (nextC === char && memoCount % 2 === 0) {
         break;
       }
+      value += nextC;
     }
-    this.setToken(TokenType.Identifier, JSON.parse(value.slice(0, -1) + '"'));
+    this.setToken(TokenType.Identifier, value);
   }
   number(char) {
     let value = char;
     let nextC;
     while (1) {
-      nextC = this.after;
+      nextC = this.code[this.i + 1];
       if (!bobeShared.isNum(nextC)) {
         break;
       }
       value += nextC;
-      this.next();
+      this.i++;
     }
     this.setToken(TokenType.Identifier, Number(value));
   }
   eof() {
     this.setToken(TokenType.Eof, "End Of File");
   }
+  init(fragments) {
+    if (typeof fragments === "string") {
+      this.setCode(fragments);
+    } else {
+      let code = "";
+      for (let i = 0; i < fragments.length - 1; i++) {
+        const fragment = fragments[i];
+        code += fragment + `${this.HookId}${i}`;
+      }
+      this.setCode(code + fragments[fragments.length - 1]);
+    }
+  }
 };
 /** Eof 标识符的值 */
 _Tokenizer.EofId = `__EOF__${Date.now()}`;
+_Tokenizer.DedentId = `__DEDENT__${Date.now()}`;
 let Tokenizer = _Tokenizer;
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 function bobe(fragments, ...values) {
-  const ui = function ui2(options, valueOpt, root, before) {
-    const tokenizer = new Tokenizer();
-    const cmp = new Interpreter(tokenizer);
-    Object.assign(cmp, valueOpt);
-    cmp.config(__spreadProps(__spreadValues({}, options), {
-      hook({ i }) {
-        return values[i];
-      },
-      setProp(node, key, value, hookI) {
-        node.props[key] = value;
-      }
-    }));
-    cmp.init(Array.from(fragments));
-    return cmp.program(root, before);
+  const ui = function ui2(isSub) {
+    const tokenizer = new Tokenizer(({ i }) => {
+      return values[i];
+    }, isSub);
+    tokenizer.init(Array.from(fragments));
+    return tokenizer;
   };
   return ui;
 }
 function customRender(option) {
   return function render(Ctor, root) {
     const store = Ctor.new();
-    return [store["ui"](option, { data: store }, root), store];
+    const tokenizer = store["ui"](false);
+    const terp = new Interpreter(tokenizer);
+    terp.config(option);
+    const componentNode = {
+      __logicType: FakeType.Component,
+      realParent: root,
+      data: store,
+      tokenizer
+    };
+    terp.program(root, componentNode);
+    return [componentNode, store];
   };
 }