bobe 0.0.8 → 0.0.10

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Queue } from 'bobe-shared';
-import { effect, $ } from 'aoye';
+import { Store } from 'aoye';
 
 declare enum TokenType {
     NewLine = 1,
@@ -8,13 +8,17 @@ declare enum TokenType {
     Identifier = 8,
     Assign = 16,
     Pipe = 32,
-    Eof = 64
+    Eof = 64,
+    InsertionExp = 128
 }
 declare enum LogicType {
     If = 1,
     ElseIf = 2,
     Else = 4,
-    For = 8
+    For = 8,
+    Component = 16,
+    Fragment = 32,
+    Root = 64
 }
 type BaseType = string | number | boolean | undefined | null;
 type Token = {
@@ -30,18 +34,20 @@ type HookProps = {
     /** 父节点 */
     parentNode?: any;
 };
+type TerpConf = Partial<Pick<Terp, 'data' | 'createNode' | 'setProp' | 'hook' | 'HookId' | 'insert'>>;
+type CustomRenderConf = Omit<TerpConf, 'data'>;
 type Hook = (props: HookProps) => any;
+type HookType = 'dynamic' | 'static';
+/** 返回值是用户自定义的节点 */
+type BobeUI = (this: Store, options: CustomRenderConf, valOpt: TerpConf) => ComponentNode;
 type StackItem = {
     /** 表示当前节点子节点已处理完毕 */
     prevSibling: any;
     /** 当前节点*/
     node: any;
 };
-type IfNode = {
-    __logicType: LogicType;
+type IfNode = LogicNode & {
     condition: () => any;
-    directList: any[];
-    realList: any[];
     anchor: any;
     isFirstRender: boolean;
     snapshot: ReturnType<Tokenizer['snapshot']>;
@@ -49,6 +55,14 @@ type IfNode = {
         stop: () => void;
     };
 };
+type LogicNode = {
+    __logicType: LogicType;
+    directList?: any[];
+    realList: any[];
+};
+type ComponentNode = LogicNode & {
+    store: Store;
+};
 
 declare class Tokenizer {
     /** 缩进大小 默认 2 */
@@ -102,6 +116,7 @@ declare class Tokenizer {
     private assignment;
     private pipe;
     private dynamic;
+    private brace;
     private newLine;
     private getDentValue;
     private dent;
@@ -111,7 +126,7 @@ declare class Tokenizer {
     private eof;
 }
 
-declare class Interpreter {
+declare class Terp {
     private tokenizer;
     /** 模板字符串动态节点的占位符 */
     HookId: string;
@@ -121,7 +136,13 @@ declare class Interpreter {
     hookI: number;
     stack: StackItem[];
     constructor(tokenizer: Tokenizer);
-    program(): any[];
+    program(): ComponentNode;
+    /** 处理
+     *                   是逻辑                         是普通
+     * 父节点  将子节点们插入到 realList          调用 insert 方法挨个插入子节点
+     * 子节点  将其下 realList 插入到父节点       将本节点插入父节点
+     */
+    handleInsert(parent: any, child: any, prevSibling: any): void;
     /**
      * @deprecated
      * 节点列表：
@@ -144,6 +165,19 @@ declare class Interpreter {
      * <declaration> ::= <tagName=token> <headerLine> <extensionLines>
      *  */
     declaration(): any;
+    fragmentDeclaration(renderFragment: BobeUI): LogicNode;
+    /**
+     * key 元素，组件的 key
+     * value
+     * 1. 静态类型值
+     * 2. 插值计算 函数，可以考虑 使用 effect 或 computed 做处理
+     *
+     * mapKey 映射, 对应子组件的属性
+     *  */
+    onePropParsed(node: any, key: string, value: any, valueIsMapKey: boolean, hookI?: number): void;
+    componentDeclaration(Component: typeof Store): {
+        __logicType: LogicType;
+    };
     ifDeclaration(): IfNode;
     /**
      * <extensionLines> ::= PIPE <attributeList> NEWLINE <extensionLines>
@@ -162,8 +196,9 @@ declare class Interpreter {
      * <attributeList> ::= <attribute> <attributeList>
      *                    | ε
      *
-     * <attribute> ::= <key> <=> <value or dataKey> <=> <value>
-     *
+     * <attribute> ::= <key> = <value>
+     * 1. 普通节点 执行 setProps 🪝
+     * 2. 组件节点 收集映射关系，或通过 effect 直接设值
      */
     attributeList(_node: any): void;
     /** 子节点块：
@@ -172,34 +207,20 @@ declare class Interpreter {
      *                        | ε  /* 空（表示叶子节点，没有孩子）
      *  */
     childrenBlockOpt(parent: any): void | any[];
-    config(opt: Partial<Pick<Interpreter, 'createRoot' | 'createNode' | 'setProp' | 'setDataProp' | 'setChildren' | 'hook' | 'HookId' | 'effect' | 'insert'>>): void;
-    createData(data: Record<any, any>): Record<any, any>;
-    setDataProp(data: Record<any, any>, key: any, value: any): any;
-    setChildren(node: any, children: any[]): void;
+    opt: TerpConf;
+    config(opt: TerpConf): void;
     createNode(name: string): {
         name: string;
         props: {};
     };
-    createRoot(): {
-        name: string;
-        props: {};
-    };
-    insert(parent: any, node: any, prevSibling: any, prevItem?: any): {
-        value: any;
-        next: any;
-    };
-    defaultInsert(parent: any, node: any, prevSibling: any, prevItem: any): {
-        value: any;
-        next: any;
-    };
+    insert(parent: any, node: any, prevSibling: any, prevItem?: any): void;
+    defaultInsert(parent: any, node: any, prevSibling: any, prevItem: any): void;
     remove(parent: any, node: any, prevSibling: any, prevItem: any): void;
     defaultRemove(parent: any, node: any, prevSibling: any, prevItem: any): void;
     setProp(node: any, key: string, value: any, hookI?: number): void;
-    effect: typeof effect;
-    signal: typeof $;
     init(fragments: string | string[]): void;
     hook: Hook;
-    _hook: (props: Partial<HookProps>) => [boolean, any];
+    _hook: (props: Partial<HookProps>) => [HookType | undefined, any];
 }
 
-export { Interpreter };
+export { Terp };

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Bobe = {}));
-})(this, (function (exports) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('aoye'), require('bobe-shared')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'aoye', 'bobe-shared'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Bobe = {}, global.Aoye, global.BobeShared));
+})(this, (function (exports, aoye, bobeShared) { 'use strict';
 
   var TokenType = /* @__PURE__ */ ((TokenType2) => {
     TokenType2[TokenType2["NewLine"] = 1] = "NewLine";
@@ -12,6 +12,7 @@
     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) => {
@@ -19,8 +20,16 @@
     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;
@@ -41,7 +50,8 @@
     return a;
   };
   var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-  class Interpreter {
+  const tap = new bobeShared.BaseEvent();
+  class Terp {
     constructor(tokenizer) {
       this.tokenizer = tokenizer;
       /** 模板字符串动态节点的占位符 */
@@ -53,27 +63,41 @@
       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), {
             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 要挂载的父节点位置 */
+    // root: any;
+    // /** program 挂载的前置节点 */
+    // anchor: any;
     program() {
+      const root = {
+        __logicType: LogicType.Component,
+        store: this.data,
+        realList: [],
+        directList: []
+      };
       this.tokenizer.consume();
       let current;
       let prevSibling;
-      const rootList = [];
+      this.stack = [{ node: root, prevSibling }];
       while (1) {
         if (this.tokenizer.isEof()) {
-          rootList.push(current);
+          this.handleInsert(root, current, root.realList[root.realList.length - 1]);
           break;
         }
         const token = this.tokenizer.token;
@@ -88,11 +112,11 @@
           continue;
         }
         if (current) {
-          if (this.stack.length) {
+          if (this.stack.length > 1) {
             const parent = this.stack[this.stack.length - 1].node;
-            this.insert(parent, current, prevSibling);
+            this.handleInsert(parent, current, prevSibling);
           } else {
-            rootList.push(current);
+            this.handleInsert(root, current, prevSibling);
           }
         }
         if (this.tokenizer.token.type & TokenType.Dedent) {
@@ -105,7 +129,29 @@
           current = this.declaration();
         }
       }
-      return rootList;
+      return root;
+    }
+    /** 处理
+     *                   是逻辑                         是普通
+     * 父节点  将子节点们插入到 realList          调用 insert 方法挨个插入子节点
+     * 子节点  将其下 realList 插入到父节点       将本节点插入父节点
+     */
+    handleInsert(parent, child, prevSibling) {
+      let insertFn = this.insert.bind(this);
+      if (parent.__logicType) {
+        insertFn = (parent2, child2, prevSibling2) => {
+          parent2.realList.splice(parent2.realList.indexOf(prevSibling2) + 1, 0, child2);
+        };
+      }
+      if (child.__logicType) {
+        const realList = child.realList;
+        for (let i = realList.length; i--; ) {
+          const item = realList[i];
+          insertFn(parent, item, prevSibling);
+        }
+      } else {
+        insertFn(parent, child, prevSibling);
+      }
     }
     /**
      * @deprecated
@@ -186,21 +232,91 @@
      * <declaration> ::= <tagName=token> <headerLine> <extensionLines>
      *  */
     declaration() {
-      const [isHook, value] = this._hook({});
+      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 aoye.Store) {
+            _node = this.componentDeclaration(value);
+          } 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[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.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,
+        directList: [],
+        realList: []
+      };
+      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") {
+        aoye.effect(() => {
+          const res = value();
+          this.setProp(node, key, res, hookI);
+        });
+      } else if (valueIsMapKey) {
+        aoye.effect(() => {
+          const res = this.data[value];
+          this.setProp(node, key, res, hookI);
+        });
+      } else {
+        this.setProp(node, key, value, hookI);
+      }
+    }
+    componentDeclaration(Component) {
+      const child = Component.new();
+      const prevOnePropParsed = this.onePropParsed;
+      this.onePropParsed = (node, key, value, valueIsMapKey, hookI) => {
+        if (valueIsMapKey) {
+          aoye.shareSignal(this.data, value, child, key);
+        } else if (typeof value === "function") {
+          const meta = child[aoye.Keys.Meta];
+          const cells = meta.cells;
+          const computed = aoye.$(value);
+          cells.set(key, computed);
+        } else {
+          child[aoye.Keys.Raw][key] = value;
+        }
+      };
+      tap.once(TerpEvt.AllAttrGot, () => {
+        this.onePropParsed = prevOnePropParsed;
+        const root = child["ui"](this.opt, { data: child });
+        tap.emit(TerpEvt.HandledComponentNode, root);
+      });
+      return { __logicType: LogicType.Component };
+    }
     ifDeclaration() {
       this.tokenizer.consume();
       const [isHook, value] = this._hook({});
@@ -214,7 +330,7 @@
         watcher: null,
         anchor: null
       };
-      ifNode.watcher = this.effect(
+      ifNode.watcher = aoye.effect(
         ({ val }) => {
           if (val) {
             this.tokenizer.consume();
@@ -259,44 +375,32 @@
      * <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[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);
+          } else if (hookType === "static") {
+            this.onePropParsed(_node, key, value, false, this.hookI);
           } else {
-            dataKey = key;
-          }
-          let val = defaultVal;
-          if (dataKey) {
-            val = this.setDataProp(this.data, dataKey, defaultVal);
+            this.onePropParsed(_node, key, value, false, this.hookI);
           }
-          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();
+        this.tokenizer.consume();
       }
     }
     /** 子节点块：
@@ -314,15 +418,7 @@
     }
     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 {
@@ -330,59 +426,31 @@
         props: {}
       };
     }
-    createRoot() {
-      return this.createNode("root");
-    }
     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
-      };
-      prevItem.next = item;
-      if (!nextItem) {
-        parent.lastChild = item;
+      if (prevSibling) {
+        const children = parent.children;
+        const insertI = children.findIndex((item) => item === prevSibling);
+        children.splice(insertI + 1, 0, node);
+      } else {
+        parent.children = [node];
       }
-      return item;
     }
     remove(parent, node, prevSibling, prevItem) {
       return this.defaultRemove(parent, node, prevSibling, prevItem);
     }
     // 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;
-        }
+      if (parent.children) {
+        parent.children.splice(parent.children.indexOf(node), 1);
       }
-      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 {
@@ -396,7 +464,7 @@
     }
   }
 
-  exports.Interpreter = Interpreter;
+  exports.Terp = Terp;
 
 }));
 //# sourceMappingURL=index.umd.js.map