bobe 0.0.9 → 0.0.11

package/dist/bobe.esm.js

@@ -1,3 +1,7 @@
+import { Store, Keys, effect, shareSignal, $ } from 'aoye';
+export * from 'aoye';
+import { BaseEvent, Queue, isNum } from 'bobe-shared';
+
 var TokenType = /* @__PURE__ */ ((TokenType2) => {
   TokenType2[TokenType2["NewLine"] = 1] = "NewLine";
   TokenType2[TokenType2["Indent"] = 2] = "Indent";
@@ -6,6 +10,7 @@ var TokenType = /* @__PURE__ */ ((TokenType2) => {
   TokenType2[TokenType2["Assign"] = 16] = "Assign";
   TokenType2[TokenType2["Pipe"] = 32] = "Pipe";
   TokenType2[TokenType2["Eof"] = 64] = "Eof";
+  TokenType2[TokenType2["InsertionExp"] = 128] = "InsertionExp";
   return TokenType2;
 })(TokenType || {});
 var LogicType = /* @__PURE__ */ ((LogicType2) => {
@@ -13,28 +18,37 @@ var LogicType = /* @__PURE__ */ ((LogicType2) => {
   LogicType2[LogicType2["ElseIf"] = 2] = "ElseIf";
   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";
   return LogicType2;
 })(LogicType || {});
+var TerpEvt = /* @__PURE__ */ ((TerpEvt2) => {
+  TerpEvt2["AllAttrGot"] = "all-attr-got";
+  TerpEvt2["HandledComponentNode"] = "handled-component-node";
+  return TerpEvt2;
+})(TerpEvt || {});
 
-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) => {
+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.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]);
+    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 = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+const tap = new BaseEvent();
 class Interpreter {
   constructor(tokenizer) {
     this.tokenizer = tokenizer;
@@ -44,107 +58,112 @@ class Interpreter {
     this.data = {};
     /** 模板字符串动态节点索引 */
     this.hookI = 0;
-    this.stack = [];
     this._hook = (props) => {
       const value = this.tokenizer.token.value;
-      const isHook = typeof value === "string" && value.indexOf(this.HookId) === 0;
-      if (this.hook && isHook) {
+      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(__spreadValues({}, props), {
+        const res = this.hook(__spreadProps$1(__spreadValues$1({}, props), {
           HookId: this.HookId,
           i: hookI
         }));
         this.hookI++;
-        return [isHook, res];
+        return [hookType, res];
+      } else if (isDynamicHook) {
+        return [hookType, value];
       }
-      return [isHook, value];
+      return [hookType, value];
     };
   }
-  program() {
+  // /** program 要挂载的父节点位置 */
+  // root: any;
+  // /** program 挂载的前置节点 */
+  // anchor: any;
+  program(root, before) {
+    const componentNode = {
+      __logicType: LogicType.Component,
+      realParent: root,
+      store: new Store()
+    };
     this.tokenizer.consume();
+    let prevSibling = null;
     let current;
-    let prevSibling;
-    const rootList = [];
+    const stack = [{ node: root, prev: prevSibling }];
     while (1) {
       if (this.tokenizer.isEof()) {
-        rootList.push(current);
+        this.handleInsert(root, current, prevSibling, componentNode);
         break;
       }
       const token = this.tokenizer.token;
       if (token.type & TokenType.Indent) {
         this.tokenizer.consume();
-        this.stack.push({
-          prevSibling,
-          node: current
+        stack.push({
+          node: current,
+          prev: prevSibling
         });
+        current = this.declaration({ stack, prevSibling });
         prevSibling = null;
-        current = this.declaration();
         continue;
       }
       if (current) {
-        if (this.stack.length) {
-          const parent = this.stack[this.stack.length - 1].node;
-          this.insert(parent, current, prevSibling);
+        if (stack.length > 1) {
+          const { node: parent } = stack[stack.length - 1];
+          this.handleInsert(parent, current, prevSibling);
         } else {
-          rootList.push(current);
+          if (!prevSibling) {
+            prevSibling = before;
+          }
+          this.handleInsert(root, current, prevSibling, componentNode);
         }
       }
       if (this.tokenizer.token.type & TokenType.Dedent) {
         this.tokenizer.consume();
-        const { node: parent, prevSibling: prevParent } = this.stack.pop();
-        prevSibling = prevParent;
+        const { node: parent, prev } = stack.pop();
+        prevSibling = prev;
         current = parent;
       } else {
         prevSibling = current;
-        current = this.declaration();
+        current = this.declaration({ stack, prevSibling });
       }
     }
-    return rootList;
+    componentNode.lastInserted = this.lastInserted;
+    this.lastInserted = null;
+    return componentNode;
   }
-  /**
-   * @deprecated
-   * 节点列表：
-   * 可以是一个节点，也可以跟随更多节点
-   * <nodeList> ::= <node> <nodeList> <EOF|Dedent>
-   *               |
+  /** 处理
+   *                    是逻辑                               是普通
+   * 父节点       将子节点加入 directList         调用 insert 方法挨个插入子节点
+   * 子节点           仅插入到父逻辑节点              将本节点插入父节点
+   * 理论上父节点不能是一个 逻辑节点，遇到if 时 Terp 会重新执行 program 这种情况下，会指定 root 为真实 dom
    */
-  nodeList(parent) {
-    let _node;
-    let prevSibling;
-    let prevItem;
-    while (1) {
-      if (this.tokenizer.isEof()) {
-        return;
-      }
-      if (this.tokenizer.token.type & TokenType.Dedent) {
-        this.tokenizer.consume();
-        return;
-      }
-      _node = this.node();
-      const insert = parent.__logicType ? this.defaultInsert : this.insert.bind(this);
-      parent.__logicType ? this.defaultRemove : this.remove.bind(this);
-      if (!_node.__logicType) {
-        const realPrev = this.getPrevRealSibling(prevSibling);
-        const currItem = insert(parent, _node, realPrev, prevItem);
-        prevItem = currItem;
-        prevSibling = _node;
-        continue;
+  handleInsert(parent, child, prev, parentComponent) {
+    if (!child.__logicType) {
+      if (!prev || !prev.__logicType) {
+        this.insertAfter(parent, child, prev);
+      } else {
+        const before = prev.lastInserted;
+        this.insertAfter(parent, child, before);
+        prev.realAfter = child;
       }
-      if (prevSibling) {
-        _node.anchor = prevSibling;
-      } else if (parent.__logicType) {
-        _node.anchor = parent;
-      } else ;
-      if (_node.child && _node.condition()) {
-        let item = _node.child;
-        while (item != null) {
-          const { value: child } = item;
-          const realPrev = this.getPrevRealSibling(prevSibling);
-          const currItem = insert(parent, child, realPrev, prevItem);
-          item = item.next;
-          prevItem = currItem;
-          prevSibling = child;
-        }
+    } else {
+      const childCmp = child;
+      childCmp.realParent = parent;
+      if (!prev) {
+        const anchor = this.createAnchor();
+        this.insertAfter(parent, anchor, prev);
+        this.insertAfter(parent, child, anchor);
+        childCmp.realBefore = anchor;
+      } else if (prev.__logicType) {
+        const before = prev.lastInserted;
+        const anchor = this.createAnchor();
+        this.insertAfter(parent, anchor, before);
+        this.insertAfter(parent, child, anchor);
+        childCmp.realBefore = anchor;
+        prev.realAfter = anchor;
+      } else {
+        childCmp.realBefore = prev;
       }
     }
   }
@@ -161,54 +180,111 @@ class Interpreter {
       point = point.anchor;
     }
   }
-  /**
-   * 单个节点：
-   * 由声明部分和（可选的）子节点块组成
-   * <node> ::= <declaration> <childrenBlockOpt>
-   *  */
-  node() {
-    const _declaration = this.declaration();
-    if (_declaration.__logicType & LogicType.If && !_declaration.condition()) {
-      return _declaration;
-    }
-    this.childrenBlockOpt(_declaration);
-    return _declaration;
-  }
   /**
    * 声明部分：
    * 包含首行定义和（可选的）多行属性扩展
    * <declaration> ::= <tagName=token> <headerLine> <extensionLines>
    *  */
-  declaration() {
-    const [isHook, value] = this._hook({});
+  declaration(ctx) {
+    const [hookType, value] = this._hook({});
     let _node;
-    if (isHook) {
-      const { tree, data } = value();
-      _node = tree;
-    } else if (value === "if") {
+    if (value === "if") {
       return this.ifDeclaration();
+    } else if (hookType) {
+      if (hookType === "static") {
+        if (typeof value === "function" && value.prototype instanceof Store) {
+          _node = this.componentDeclaration(value, ctx);
+        } else if (typeof value === "function") {
+          _node = this.fragmentDeclaration(value);
+        } else {
+          throw new SyntaxError(`declaration \u4E0D\u652F\u6301 ${value} \u7C7B\u578B\u7684\u9759\u6001\u63D2\u503C`);
+        }
+      } else {
+        Boolean(this.data[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.headerLine(_node);
     this.extensionLines(_node);
+    if (_node.__logicType === LogicType.Component) {
+      tap.once(TerpEvt.HandledComponentNode, (node) => _node = node);
+      tap.emit(TerpEvt.AllAttrGot);
+    }
     return _node;
   }
+  // TODO: 指定挂载位置
+  fragmentDeclaration(renderFragment) {
+    const fragmentNode = {
+      __logicType: LogicType.Fragment,
+      realParent: null
+    };
+    renderFragment.call(this.data, this.opt, { data: this.data, root: "", anchor: "" });
+    return fragmentNode;
+  }
+  /**
+   * key 元素，组件的 key
+   * value
+   * 1. 静态类型值
+   * 2. 插值计算 函数，可以考虑 使用 effect 或 computed 做处理
+   *
+   * mapKey 映射, 对应子组件的属性
+   *  */
+  onePropParsed(node, key, value, valueIsMapKey, hookI) {
+    if (typeof value === "function") {
+      effect(() => {
+        const res = value();
+        this.setProp(node, key, res, hookI);
+      });
+    } else if (valueIsMapKey) {
+      effect(() => {
+        const res = this.data[value];
+        this.setProp(node, key, res, hookI);
+      });
+    } else {
+      this.setProp(node, key, value, hookI);
+    }
+  }
+  componentDeclaration(Component, ctx) {
+    const child = Component.new();
+    const prevOnePropParsed = this.onePropParsed;
+    this.onePropParsed = (node, key, value, valueIsMapKey, hookI) => {
+      if (valueIsMapKey) {
+        shareSignal(this.data, value, child, key);
+      } else if (typeof value === "function") {
+        const meta = child[Keys.Meta];
+        const cells = meta.cells;
+        const computed = $(value);
+        cells.set(key, computed);
+      } else {
+        child[Keys.Raw][key] = value;
+      }
+    };
+    tap.once(TerpEvt.AllAttrGot, () => {
+      const parent = ctx.stack[ctx.stack.length - 1].node;
+      const prev = ctx.prevSibling;
+      this.onePropParsed = prevOnePropParsed;
+      const componentNode = child["ui"](this.opt, { data: child }, parent, prev);
+      tap.emit(TerpEvt.HandledComponentNode, componentNode);
+    });
+    return { __logicType: LogicType.Component };
+  }
   ifDeclaration() {
     this.tokenizer.consume();
     const [isHook, value] = this._hook({});
     const ifNode = {
       __logicType: LogicType.If,
       condition: value,
-      directList: [],
-      realList: [],
+      realParent: null,
       snapshot: this.tokenizer.snapshot(),
       isFirstRender: true,
       watcher: null,
       anchor: null
     };
-    ifNode.watcher = this.effect(
+    ifNode.watcher = effect(
       ({ val }) => {
         if (val) {
           this.tokenizer.consume();
@@ -253,130 +329,84 @@ class Interpreter {
    * <attributeList> ::= <attribute> <attributeList>
    *                    | ε
    *
-   * <attribute> ::= <key> <=> <value or dataKey> <=> <value>
-   *
+   * <attribute> ::= <key> = <value>
+   * 1. 普通节点 执行 setProps 🪝
+   * 2. 组件节点 收集映射关系，或通过 effect 直接设值
    */
   attributeList(_node) {
-    let values = [];
-    let prevToken = void 0;
-    while (1) {
-      if ((prevToken == null ? void 0 : prevToken.type) === TokenType.Identifier && this.tokenizer.token.type !== TokenType.Assign) {
-        const [v1, v2, v3] = values;
-        const key = v1;
-        let dataKey, defaultVal;
-        if (v3 !== void 0) {
-          defaultVal = v3;
-          dataKey = v2;
-        } else if (v2 !== void 0) {
-          if (typeof v2 === "string" && v2[0] === "$" && v2[1] !== "{") {
-            dataKey = v2.slice(1);
-          } else {
-            defaultVal = v2;
-          }
+    let key, eq;
+    while (!(this.tokenizer.token.type & TokenType.NewLine)) {
+      if (key == null) {
+        key = this.tokenizer.token.value;
+      } else if (eq == null) {
+        eq = "=";
+      } else {
+        const [hookType, value] = this._hook({});
+        if (hookType === "dynamic") {
+          const valueIsMapKey = Reflect.has(this.data[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);
+        } else if (hookType === "static") {
+          this.onePropParsed(_node, key, value, false, this.hookI);
         } else {
-          dataKey = key;
+          this.onePropParsed(_node, key, value, false, this.hookI);
         }
-        let val = defaultVal;
-        if (dataKey) {
-          val = this.setDataProp(this.data, dataKey, defaultVal);
-        }
-        this.setProp(_node, key, val, this.hookI - 1);
-        const [isHook, value] = this._hook({});
-        values = [value];
-      } else if (this.tokenizer.token.type !== TokenType.Assign) {
-        const [isHook, value] = this._hook({});
-        values.push(value);
-      }
-      if (!(this.tokenizer.token.type & (TokenType.Identifier | TokenType.Assign))) {
-        break;
+        key = null;
+        eq = null;
       }
-      prevToken = this.tokenizer.consume();
-    }
-  }
-  /** 子节点块：
-   * 必须被缩进包裹
-   * <childrenBlockOpt> ::= INDENT <nodeList>
-   *                        | ε  /* 空（表示叶子节点，没有孩子）
-   *  */
-  childrenBlockOpt(parent) {
-    if (!(this.tokenizer.token.type & TokenType.Indent)) {
-      return [];
+      this.tokenizer.consume();
     }
-    this.tokenizer.consume();
-    const list = this.nodeList(parent);
-    return list;
   }
   config(opt) {
     Object.assign(this, opt);
-  }
-  createData(data) {
-    return data;
-  }
-  setDataProp(data, key, value) {
-    return data[key] = value;
-  }
-  setChildren(node, children) {
-    node.children = children;
+    this.opt = opt;
   }
   createNode(name) {
     return {
       name,
-      props: {}
+      props: {},
+      nextSibling: null
     };
   }
-  createRoot() {
-    return this.createNode("root");
+  nextSib(node) {
+    return node.nextSibling;
   }
-  insert(parent, node, prevSibling, prevItem) {
-    return this.defaultInsert(parent, node, prevSibling, prevItem);
-  }
-  defaultInsert(parent, node, prevSibling, prevItem) {
-    if (!parent.child) {
-      return parent.child = parent.lastChild = {
-        value: node,
-        next: null
-      };
-    }
-    const nextItem = prevItem.next;
-    const item = {
-      value: node,
-      next: nextItem
+  createAnchor() {
+    return {
+      name: "anchor",
+      nextSibling: null
     };
-    prevItem.next = item;
-    if (!nextItem) {
-      parent.lastChild = item;
+  }
+  insertAfter(parent, node, prev) {
+    this.lastInserted = node;
+    return this.defaultInsert(parent, node, prev);
+  }
+  defaultInsert(parent, node, prev) {
+    if (prev) {
+      const next = prev.nextSibling;
+      prev.nextSibling = node;
+      node.nextSibling = next;
+    } else {
+      parent.firstChild = node;
     }
-    return item;
   }
-  remove(parent, node, prevSibling, prevItem) {
-    return this.defaultRemove(parent, node, prevSibling, prevItem);
+  remove(parent, node, prevSibling) {
+    return this.defaultRemove(parent, node, prevSibling);
   }
   // TODO: 默认改成 prevItem
-  defaultRemove(parent, node, prevSibling, prevItem) {
-    const currItem = prevItem.next;
-    const nextItem = currItem.next;
-    if (prevItem) {
-      if (nextItem) {
-        prevItem.next = nextItem;
-      } else {
-        prevItem.next = null;
-        parent.lastChild = prevItem;
-      }
-    } else {
-      if (nextItem) {
-        parent.child = nextItem;
-      } else {
-        parent.child = null;
-        parent.lastChild = null;
-      }
+  defaultRemove(parent, node, prevSibling) {
+    const next = node.nextSibling;
+    if (prevSibling) {
+      prevSibling.nextSibling = next;
+    }
+    if (parent.firstChild === node) {
+      parent.firstChild = next;
     }
-    currItem.next = null;
   }
   setProp(node, key, value, hookI) {
     node.props[key] = value;
   }
   init(fragments) {
-    this.data = this.createData(this.data);
     if (typeof fragments === "string") {
       this.tokenizer.setCode(fragments);
     } else {
@@ -390,5 +420,469 @@ class Interpreter {
   }
 }
 
-export { Interpreter };
+const _Tokenizer = class _Tokenizer {
+  constructor() {
+    /** 缩进大小 默认 2 */
+    this.TabSize = 2;
+    /** 缩进字符 */
+    this.Tab = Array.from({ length: this.TabSize }, () => " ").join("");
+    /** 匹配标识符 */
+    this.IdExp = /[\d\w\/]/;
+    /** 回车后需要判断缩进 */
+    this.needIndent = false;
+    /** 用于跳过第一个节点前的空白字符串，以及生成基础缩进 */
+    this.isFirstToken = true;
+    /** 记录历史缩进的长度，相对于行首 */
+    this.dentStack = [0];
+    /** 当前字符 index */
+    this.i = 0;
+    this.handledTokens = [];
+    /**
+     * 有些标识符能产生多个 token
+     * 例如 dedent
+     * parent1
+     *   child
+     *     subChild
+     * parent2 <- 产生两个 dedent
+     */
+    this.waitingTokens = new Queue();
+  }
+  consume() {
+    const token = this.token;
+    this.nextToken();
+    return token;
+  }
+  // /** 恢复至某一个现场，进行 token 重算 */
+  resume(_snapshot) {
+    this.token = void 0;
+    this.needIndent = false;
+    this.isFirstToken = true;
+    this.dentStack = [0];
+    Object.assign(this, _snapshot);
+  }
+  snapshot() {
+    return {
+      i: this.i,
+      waitingTokens: this.waitingTokens.clone()
+    };
+  }
+  skip() {
+    const dentLen = this.dentStack[this.dentStack.length - 1];
+    let needIndent = false;
+    let skipFragment = ``;
+    this.token = void 0;
+    while (1) {
+      const char = this.char;
+      if (char === "\n") {
+        needIndent = true;
+        skipFragment += char;
+        this.next();
+        continue;
+      }
+      if (!needIndent) {
+        skipFragment += char;
+        this.next();
+        continue;
+      }
+      needIndent = false;
+      const { value, isEmptyLine } = this.getDentValue();
+      const currLen = value.length;
+      if (isEmptyLine) continue;
+      if (value.length > dentLen) {
+        skipFragment += value;
+      } else {
+        for (let i = this.dentStack.length - 1; i >= 0; i--) {
+          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`);
+          }
+          this.dentStack.pop();
+          if (!this.token) {
+            this.setToken(TokenType.Dedent, String(expLen));
+          } else {
+            this.waitingTokens.push({
+              type: TokenType.Dedent,
+              typeName: TokenType[TokenType.Dedent],
+              value: String(expLen)
+            });
+          }
+        }
+        break;
+      }
+    }
+    if (!this.token) {
+      this.nextToken();
+    }
+    return skipFragment;
+  }
+  setCode(code) {
+    this.code = "\n" + code.trimEnd() + `
+${_Tokenizer.EofId}`;
+  }
+  tokenize() {
+    var _a, _b;
+    do {
+      this.nextToken();
+      console.log("token:", TokenType[(_a = this.token) == null ? void 0 : _a.type], JSON.stringify(((_b = this.token) == null ? void 0 : _b.value) || ""));
+    } while (!this.isEof());
+  }
+  isEof() {
+    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,
+      typeName: TokenType[type],
+      value
+    };
+    this.isFirstToken = false;
+  }
+  testId(value) {
+    if (typeof value !== "string") return false;
+    return this.IdExp.test(value);
+  }
+  nextToken() {
+    try {
+      if (this.isEof()) {
+        return this.token;
+      }
+      this.token = void 0;
+      if (this.waitingTokens.len) {
+        const item = this.waitingTokens.shift();
+        this.setToken(item.type, item.value);
+        return this.token;
+      }
+      outer: while (1) {
+        if (this.needIndent) {
+          this.dent();
+        } else {
+          let { char } = this;
+          switch (char) {
+            case "	":
+            case " ":
+              break;
+            // 找后续所有 newLine
+            case "\n":
+              this.newLine();
+              this.needIndent = true;
+              break;
+            case "=":
+              this.assignment();
+              break;
+            case "|":
+              this.pipe();
+              break;
+            case "'":
+            case '"':
+              this.str(char);
+              break;
+            case "{":
+              this.brace();
+              break;
+            case "$":
+              const handled = this.dynamic(char);
+              if (handled) break;
+            default:
+              if (isNum(char)) {
+                this.number(char);
+                break;
+              }
+              if (this.testId(char)) {
+                this.identifier(char);
+              }
+              break;
+          }
+          this.next();
+        }
+        if (this.token) {
+          break;
+        }
+      }
+      return this.token;
+    } catch (error) {
+      console.error(error);
+    } finally {
+      this.handledTokens.push(this.token);
+    }
+  }
+  assignment() {
+    this.setToken(TokenType.Assign, "=");
+  }
+  pipe() {
+    this.setToken(TokenType.Pipe, "|");
+  }
+  dynamic(char) {
+    let nextC = this.after;
+    if (nextC !== "{") {
+      return false;
+    }
+    this.next();
+    let value = "${";
+    let innerBrace = 0;
+    while (1) {
+      nextC = this.after;
+      value += nextC;
+      this.next();
+      if (nextC === "{") {
+        innerBrace++;
+      }
+      if (nextC === "}") {
+        if (!innerBrace) {
+          break;
+        }
+        innerBrace--;
+      }
+    }
+    this.setToken(TokenType.Identifier, value);
+    return true;
+  }
+  brace() {
+    let inComment, inString, count = 0, value = "", backslashCount = 0;
+    while (1) {
+      const char = this.char;
+      const nextChar = this.after;
+      if (inComment === "single" && char === "\n") {
+        inComment = null;
+      } else if (inComment === "multi" && char === "*" && nextChar === "/") {
+        inComment = null;
+        value += this.next()[0];
+      } else if (inString) {
+        if (char === inString && backslashCount % 2 === 0) {
+          inString = null;
+        }
+        backslashCount = char === "\\" ? backslashCount + 1 : 0;
+      } else {
+        if (char === "/" && nextChar === "/") {
+          inComment = "single";
+          value += this.next()[0];
+        } else if (char === "/" && nextChar === "*") {
+          inComment = "multi";
+          value += this.next()[0];
+        } else if (char === "'" || char === '"' || char === "`") {
+          inString = char;
+        } else if (char === "{") {
+          count++;
+        } else if (char === "}") {
+          count--;
+        }
+      }
+      if (count === 0 && inString == null && inComment == null) {
+        this.setToken(TokenType.InsertionExp, value.slice(1));
+        return;
+      }
+      value += this.next()[0];
+    }
+  }
+  newLine() {
+    let value = "\n";
+    let nextC;
+    while (1) {
+      nextC = this.after;
+      if (nextC !== "\n") {
+        break;
+      }
+      value += nextC;
+      this.next();
+    }
+    if (this.isFirstToken) {
+      return;
+    }
+    this.setToken(TokenType.NewLine, value);
+  }
+  getDentValue() {
+    let value = "";
+    let nextC;
+    let isEmptyLine = false;
+    while (1) {
+      const nextChar = this.char;
+      switch (nextChar) {
+        case "	":
+          nextC = this.Tab;
+          break;
+        case " ":
+          nextC = " ";
+          break;
+        case "\n":
+          nextC = "\n";
+          break;
+        default:
+          nextC = "";
+          break;
+      }
+      if (nextC === "\n") {
+        isEmptyLine = true;
+        break;
+      }
+      if (!nextC) {
+        break;
+      }
+      value += nextC;
+      this.next();
+    }
+    return {
+      value,
+      isEmptyLine
+    };
+  }
+  dent() {
+    const { value, isEmptyLine } = this.getDentValue();
+    if (isEmptyLine) {
+      this.needIndent = true;
+      return;
+    }
+    this.needIndent = false;
+    if (this.isFirstToken) {
+      this.dentStack[0] = value.length;
+      return;
+    }
+    let currLen = value.length;
+    const indentHasLen = currLen > 0;
+    const prevLen = this.dentStack[this.dentStack.length - 1];
+    if (currLen > prevLen) {
+      this.dentStack.push(currLen);
+      this.setToken(TokenType.Indent, String(currLen));
+      return indentHasLen;
+    }
+    if (currLen < prevLen) {
+      for (let i = this.dentStack.length - 2; i >= 0; i--) {
+        const expLen = this.dentStack[i];
+        const prevExpLen = this.dentStack[i + 1];
+        if (currLen > expLen && currLen < prevExpLen) {
+          throw SyntaxError("\u7F29\u8FDB\u5927\u5C0F\u4E0D\u7EDF\u4E00");
+        }
+        this.dentStack.pop();
+        if (!this.token) {
+          this.setToken(TokenType.Dedent, String(expLen));
+        } else {
+          this.waitingTokens.push({
+            type: TokenType.Dedent,
+            typeName: TokenType[TokenType.Dedent],
+            value: String(expLen)
+          });
+        }
+        if (currLen === expLen) {
+          break;
+        }
+      }
+      return indentHasLen;
+    }
+    return indentHasLen;
+  }
+  identifier(char) {
+    let value = char;
+    let nextC;
+    while (1) {
+      nextC = this.after;
+      if (!this.testId(nextC)) {
+        break;
+      }
+      value += nextC;
+      this.next();
+    }
+    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 nextC;
+    let continuousBackslashCount = 0;
+    while (1) {
+      nextC = this.after;
+      value += nextC;
+      const memoCount = continuousBackslashCount;
+      if (nextC === "\\") {
+        continuousBackslashCount++;
+      } else {
+        continuousBackslashCount = 0;
+      }
+      this.next();
+      if (nextC === char && memoCount % 2 === 0) {
+        break;
+      }
+    }
+    this.setToken(TokenType.Identifier, JSON.parse(value.slice(0, -1) + '"'));
+  }
+  number(char) {
+    let value = char;
+    let nextC;
+    while (1) {
+      nextC = this.after;
+      if (!isNum(nextC)) {
+        break;
+      }
+      value += nextC;
+      this.next();
+    }
+    this.setToken(TokenType.Identifier, Number(value));
+  }
+  eof() {
+    this.setToken(TokenType.Eof, "End Of File");
+  }
+};
+/** Eof 标识符的值 */
+_Tokenizer.EofId = `__EOF__${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);
+  };
+  return ui;
+}
+function customRender(option) {
+  return function render(Ctor, root) {
+    const store = Ctor.new();
+    return [store["ui"](option, { data: store }, root), store];
+  };
+}
+
+export { bobe, customRender };
 //# sourceMappingURL=bobe.esm.js.map