bobe 0.0.15 → 0.0.17

package/dist/index.umd.js

@@ -15,25 +15,27 @@
     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";
@@ -41,140 +43,123 @@
   })(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,
@@ -190,14 +175,14 @@
         }
         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) {
@@ -213,28 +198,31 @@
           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 {
@@ -244,10 +232,15 @@
       }
       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;
     }
@@ -294,7 +287,7 @@
      * <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);
@@ -303,34 +296,42 @@
           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;
     }
     /**
@@ -341,15 +342,17 @@
      *
      * 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 {
@@ -358,10 +361,18 @@
     }
     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;
@@ -371,37 +382,41 @@
           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) {
@@ -412,7 +427,7 @@
               if (point.condition.v) {
                 return false;
               }
-              if (point.__logicType === LogicType.If) {
+              if (point.__logicType === FakeType.If) {
                 break;
               }
               point = point.preCond;
@@ -432,13 +447,13 @@
           });
         }
       } 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;
@@ -446,7 +461,7 @@
                 if (point.condition.v) {
                   return false;
                 }
-                if (point.__logicType === LogicType.If) {
+                if (point.__logicType === FakeType.If) {
                   break;
                 }
                 point = point.preCond;
@@ -465,12 +480,13 @@
           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) {
@@ -481,7 +497,7 @@
               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);
@@ -501,15 +517,15 @@
      */
     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();
       }
     }
     /**
@@ -519,7 +535,7 @@
      */
     headerLine(_node) {
       this.attributeList(_node);
-      this.tokenizer.consume();
+      this.tokenizer.nextToken();
     }
     /**
      * 属性列表：
@@ -529,30 +545,33 @@
      *
      * <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) {
@@ -569,7 +588,7 @@
     nextSib(node) {
       return node.nextSibling;
     }
-    kid(node) {
+    firstChild(node) {
       return node.firstChild;
     }
     _createAnchor() {
@@ -613,28 +632,35 @@
     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;
       /** 用于跳过第一个节点前的空白字符串，以及生成基础缩进 */
@@ -643,6 +669,7 @@
       this.dentStack = [0];
       /** 当前字符 index */
       this.i = 0;
+      // TODO: 生产环境不需要这个，导致不必要的内存占用
       this.handledTokens = [];
       /**
        * 有些标识符能产生多个 token
@@ -653,6 +680,31 @@
        * 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;
@@ -679,16 +731,16 @@
       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;
@@ -741,21 +793,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,
@@ -764,10 +801,6 @@ ${_Tokenizer.EofId}`;
       };
       this.isFirstToken = false;
     }
-    testId(value) {
-      if (typeof value !== "string") return false;
-      return this.IdExp.test(value);
-    }
     nextToken() {
       try {
         if (this.isEof()) {
@@ -783,7 +816,7 @@ ${_Tokenizer.EofId}`;
           if (this.needIndent) {
             this.dent();
           } else {
-            let { char } = this;
+            const char = this.code[this.i];
             switch (char) {
               case "	":
               case " ":
@@ -814,12 +847,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;
@@ -828,6 +861,7 @@ ${_Tokenizer.EofId}`;
         return this.token;
       } catch (error) {
         console.error(error);
+        return this.token;
       } finally {
         this.handledTokens.push(this.token);
       }
@@ -839,17 +873,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++;
         }
@@ -866,13 +900,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;
@@ -881,10 +916,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 === "{") {
@@ -897,19 +934,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;
@@ -921,7 +959,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;
@@ -944,7 +982,7 @@ ${_Tokenizer.EofId}`;
           break;
         }
         value += nextC;
-        this.next();
+        this.i++;
       }
       return {
         value,
@@ -967,7 +1005,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) {
@@ -999,13 +1037,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;
@@ -1014,98 +1064,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];
     };
   }