bobe 0.0.48 → 0.0.50

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Queue } from 'bobe-shared';
 import * as aoye from 'aoye';
-import { Store, Effect, effect as effect$1, Scope, Signal, Computed, SignalNode, ValueDiff, CustomEffectOpt } from 'aoye';
+import { Store, Keys, Effect, effect as effect$1, Scope, Signal, Computed, SignalNode, ValueDiff, CustomEffectOpt } from 'aoye';
 export { Store } from 'aoye';
 
 declare class Interpreter {
@@ -27,7 +27,7 @@ declare class Interpreter {
     /**
      * 声明部分：
      * 包含首行定义和（可选的）多行属性扩展
-     * <declaration> ::= <tagName=token> <headerLine> <extensionLines>
+     * <declaration> ::= <tagName=token> <headerLineAndExtensions>
      *  */
     declaration(ctx: ProgramCtx): any;
     createContextNode(): ContextNode;
@@ -49,22 +49,25 @@ declare class Interpreter {
      *  */
     onePropParsed(data: Store, node: any, key: string, value: any, valueIsMapKey: boolean, isFn: boolean, hookI?: number): void;
     oneRealPropParsed: Interpreter['onePropParsed'];
-    componentOrFragmentDeclaration(ComponentOrRender: BobeUI | typeof Store, ctx: ProgramCtx): ComponentNode$1;
+    componentOrFragmentDeclaration(ComponentOrRender: UI | typeof Store | InlineFragment, ctx: ProgramCtx): ComponentNode$1;
     getFn(data: any, expression: string | number): any;
     getAssignFn(data: any, expression: string | number): any;
     condDeclaration(ctx: ProgramCtx): IfNode;
     removeLogicNode(node: LogicNode): void;
     /**
-     * <extensionLines> ::= PIPE <attributeList> NEWLINE <extensionLines>
-     *                    | ε
+     * 首行属性 + 可选的 pipe 扩展行
+     * <headerLineAndExtensions> ::= <attributeList> NEWLINE (PIPE <attributeList> NEWLINE)*
      */
-    extensionLines(_node: any): void;
+    headerLineAndExtensions(_node: any): void;
     /**
-     * 首行：
-     * 节点名称 + 属性列表 + 换行
-     * <headerLine> ::= <attributeList> NEWLINE
+     * 1. 快照
+     * 2. 跳过 行内模板片段
+     * 3. 准备
+     *    1. tokenizer
+     *    2. 快照
+     *    3. 使用 CtxProvider 中 数据作为 data
      */
-    headerLine(_node: any): void;
+    inlineFragment(_node: any, snapshot: Partial<Tokenizer>, data: any, key?: string): void;
     /**
      * 属性列表：
      * 可以是空的，或者包含多个属性
@@ -75,7 +78,7 @@ declare class Interpreter {
      * 1. 普通节点 执行 setProps 🪝
      * 2. 组件节点 收集映射关系，或 产生 computed
      */
-    attributeList(_node: any): void;
+    attributeList(_node: any, data: any): string;
     config(opt: TerpConf): void;
     createNode(name: string): {
         name: string;
@@ -96,6 +99,14 @@ declare class Interpreter {
     Effect: typeof Effect;
     effect: typeof effect$1;
 }
+declare class InlineFragment {
+    snapshot: Partial<Tokenizer>;
+    data: any;
+    key: string;
+    tokenizer: Tokenizer;
+    [Keys.ProxyFreeObject]: boolean;
+    constructor(snapshot: Partial<Tokenizer>, data: any, key: string, tokenizer: Tokenizer);
+}
 
 interface StackNode<T> {
     value: T;
@@ -226,9 +237,11 @@ type ProgramCtx = {
     before: any;
 };
 /** 返回值是用户自定义的节点 */
-type BobeUI = {
+type UI<T = any> = {
     /** 在哪个 Store 声明的 */
     boundStore: Store;
+    /** 用户声明片段内可用的 props */
+    defineProps?: T;
     (isSub: boolean): Tokenizer;
 };
 type LogicNode = {
@@ -277,6 +290,10 @@ type FragmentNode$1 = LogicNode & {
 };
 type ComponentNode$1 = LogicNode & {
     tokenizer: Tokenizer;
+    /** 模版片段快照 */
+    fragmentSnapshot?: ReturnType<Tokenizer['snapshot']>;
+    /** 渲染模版片段前的 快照，渲染完成后用于恢复 */
+    resumeSnapshot?: ReturnType<Tokenizer['snapshot']>;
 };
 type Dep = Signal | Computed | (() => any) | string;
 
@@ -320,19 +337,22 @@ declare class Tokenizer {
     /** 当前文件路径 */
     source: string;
     constructor(hook: Hook, useDedentAsEof: boolean);
+    initIndentWhenUseDedentAsEof(): void;
     private next;
     getCurrentPos(): Position;
     /** 构造从当前扫描起始位置到模板结尾的 SourceLocation，用于未闭合错误 */
     private unclosedLoc;
     private throwUnclosed;
-    resume(_snapshot: ReturnType<Tokenizer['snapshot']>): void;
-    snapshot(keys?: (keyof Tokenizer)[]): Partial<Tokenizer>;
-    skip(): string;
+    resume({ dentStack, waitingTokens, ..._snapshot }: ReturnType<Tokenizer['snapshot']>): void;
+    snapshot(keys?: (keyof Tokenizer)[], dtI?: number): Partial<Tokenizer>;
+    skip(targetDentLen?: number): string;
     setCode(code: string): void;
     tokenize(): void;
     isEof(): boolean;
     private setToken;
     nextToken(): Token;
+    locStart(): void;
+    locEnd(): void;
     getComment(): string;
     /**
      * 处理处于行末尾的 comment 例如：
@@ -428,7 +448,7 @@ interface Property extends BaseNode {
 type PropertyValue = StaticValue | DynamicValue;
 interface StaticValue extends BaseNode {
     type: NodeType.StaticValue;
-    value: string | number | boolean;
+    value: string | number | boolean | TemplateNode[];
 }
 interface PropertyKeyNode extends BaseNode {
     type: NodeType.PropertyKey;
@@ -503,6 +523,8 @@ declare class Compiler {
      */
     private attributeList;
     parseProperty(node?: Property): Property;
+    handleOnlyKeyLoc(node: Property): void;
+    handleKeyValueLoc(node: Property): void;
     /**
      * 根据值类型创建属性 key 节点
      */
@@ -515,6 +537,7 @@ declare class Compiler {
      * 根据值类型创建属性值节点
      */
     parsePropertyValue(node?: PropertyValue): PropertyValue;
+    parsePropertyInlineFragment(node?: PropertyValue): PropertyValue;
     /**
      * 根据值类型创建名称
      */
@@ -532,7 +555,7 @@ type ParseHooks = Partial<{
     };
 }>;
 
-declare function bobe(fragments: TemplateStringsArray, ...values: any[]): BobeUI;
+declare function bobe<T extends Record<any, any> = any>(fragments: TemplateStringsArray, ...values: any[]): UI<T>;
 declare function customRender(option: CustomRenderConf): <T>(Ctor: typeof Store, root: any) => (ComponentNode$1 | Store)[];
 
 type IContext = {

package/dist/index.umd.js

@@ -107,10 +107,13 @@
       this.hook = hook;
       this.useDedentAsEof = useDedentAsEof;
       if (useDedentAsEof) {
-        this.setToken(TokenType.Indent, '');
-        this.isFirstToken = true;
+        this.initIndentWhenUseDedentAsEof();
       }
     }
+    initIndentWhenUseDedentAsEof() {
+      this.setToken(TokenType.Indent, '');
+      this.isFirstToken = true;
+    }
     next() {
       this.i++;
     }
@@ -140,16 +143,23 @@
     throwUnclosed(code, message, startOffset, startLine, startCol) {
       throw new ParseSyntaxError(code, message, this.unclosedLoc(startOffset, startLine, startCol));
     }
-    resume(_snapshot) {
+    resume({
+      dentStack,
+      waitingTokens,
+      ..._snapshot
+    }) {
       this.token = undefined;
       this.needIndent = false;
       this.isFirstToken = true;
-      this.dentStack = [0];
+      this.dentStack = dentStack ? dentStack.slice() : [0];
+      if (waitingTokens) {
+        this.waitingTokens = waitingTokens.clone();
+      }
       Object.assign(this, _snapshot);
     }
-    snapshot(keys) {
+    snapshot(keys, dtI = 0) {
       const snap = {
-        i: this.i,
+        i: this.i + dtI,
         waitingTokens: this.waitingTokens.clone()
       };
       if (keys) {
@@ -162,8 +172,10 @@
       }
       return snap;
     }
-    skip() {
-      const logicDentLen = this.dentStack[this.dentStack.length - 1];
+    skip(targetDentLen) {
+      if (targetDentLen == undefined) {
+        targetDentLen = this.dentStack[this.dentStack.length - 1];
+      }
       let needIndent = false;
       let skipFragment = ``;
       this.token = undefined;
@@ -186,7 +198,7 @@
           isEmptyLine = _this$getDentValue.isEmptyLine;
         const currLen = value.length;
         if (isEmptyLine) continue;
-        if (currLen > logicDentLen) {
+        if (currLen > targetDentLen) {
           skipFragment += value;
         } else {
           for (let i = this.dentStack.length - 1; i >= 0; i--) {
@@ -199,6 +211,9 @@
               break;
             }
             this.dentStack.pop();
+            if (expLen > targetDentLen) {
+              continue;
+            }
             if (!this.token) {
               this.setToken(TokenType.Dedent, String(expLen));
             } else {
@@ -253,29 +268,31 @@
         }
         outer: while (1) {
           if (this.needIndent) {
+            this.locStart();
             this.dent();
+            this.locEnd();
           } else {
             const char = this.code[this.i];
             switch (char) {
               case '\t':
               case ' ':
                 break;
-              case '\n':
-                this.newLine();
-                this.needIndent = true;
-                break;
-              case '=':
-                this.assignment();
-                break;
-              case '|':
-                this.pipe();
-                break;
-              case ';':
-                this.setToken(TokenType.Semicolon, ';');
-                break;
               default:
-                if (false) ;
+                this.locStart();
                 switch (char) {
+                  case '\n':
+                    this.newLine();
+                    this.needIndent = true;
+                    break;
+                  case '=':
+                    this.assignment();
+                    break;
+                  case '|':
+                    this.pipe();
+                    break;
+                  case ';':
+                    this.setToken(TokenType.Semicolon, ';');
+                    break;
                   case '/':
                     this.comment();
                     break;
@@ -300,7 +317,7 @@
                     }
                     break;
                 }
-                if (false) ;
+                this.locEnd();
                 break;
             }
             this.next();
@@ -316,6 +333,10 @@
         this.handledTokens.push(this.token);
       }
     }
+    locStart() {
+    }
+    locEnd() {
+    }
     getComment() {
       let value = '/';
       let nextC = this.code[this.i + 1];
@@ -332,6 +353,7 @@
       this.getComment();
     }
     condExp() {
+      this.locStart();
       let value = '';
       this.token = null;
       let char = this.code[this.i];
@@ -346,12 +368,14 @@
       const trimmed = value.replace(/\/\/[\s\S]+/, '').trim();
       this.setToken(TokenType.Identifier, trimmed ? trimmed : true, 0);
       this.handledTokens.push(this.token);
+      this.locEnd();
       return this.token;
     }
     isEol(i) {
       return this.code[i] === '\n' || this.code[i] === '/';
     }
     jsExp() {
+      this.locStart();
       this.token = null;
       let value = '';
       let char = this.code[this.i];
@@ -365,6 +389,7 @@
       }
       this.setToken(TokenType.Identifier, value, 0);
       this.handledTokens.push(this.token);
+      this.locEnd();
       return this.token;
     }
     peekChar() {
@@ -552,7 +577,7 @@
       const prevLen = this.dentStack[this.dentStack.length - 1];
       if (currLen > prevLen) {
         this.dentStack.push(currLen);
-        this.setToken(TokenType.Indent, currLen);
+        this.setToken(TokenType.Indent, currLen, 0);
         return indentHasLen;
       }
       if (currLen < prevLen) {
@@ -567,7 +592,7 @@
           }
           this.dentStack.pop();
           if (!this.token) {
-            this.setToken(TokenType.Dedent, String(expLen));
+            this.setToken(TokenType.Dedent, String(expLen), 0);
           } else {
             this.waitingTokens.push({
               type: TokenType.Dedent,
@@ -976,7 +1001,7 @@
   let _initProto;
   class Compiler {
     static {
-      var _applyDecs$e = _slicedToArray(_applyDecs2311(this, [], [[NodeHook, 2, "parseProgram"], [[NodeHook, NodeLoc], 2, "parseComponentNode"], [[NodeHook, NodeLoc], 2, "parseElementNode"], [[NodeHook, NodeLoc], 2, "parseConditionalNode"], [[NodeHook, NodeLoc], 2, "parseLoopNode"], [NodeHook, 2, "parseProperty"], [[NodeHook, TokenLoc], 2, "parsePropertyKey"], [[NodeHook, TokenLoc], 2, "parseJsExp"], [[NodeHook, TokenLoc], 2, "parsePropertyValue"], [[NodeHook, TokenLoc], 2, "parseName"]]).e, 1);
+      var _applyDecs$e = _slicedToArray(_applyDecs2311(this, [], [[NodeHook, 2, "parseProgram"], [[NodeHook, NodeLoc], 2, "parseComponentNode"], [[NodeHook, NodeLoc], 2, "parseElementNode"], [[NodeHook, NodeLoc], 2, "parseConditionalNode"], [[NodeHook, NodeLoc], 2, "parseLoopNode"], [NodeHook, 2, "parseProperty"], [[NodeHook, TokenLoc], 2, "parsePropertyKey"], [[NodeHook, TokenLoc], 2, "parseJsExp"], [[NodeHook, TokenLoc], 2, "parsePropertyValue"], [[NodeHook, NodeLoc], 2, "parsePropertyInlineFragment"], [[NodeHook, TokenLoc], 2, "parseName"]]).e, 1);
       _initProto = _applyDecs$e[0];
     }
     errors = (_initProto(this), []);
@@ -1078,9 +1103,9 @@
     parseComponentNode(node) {
       const name = this.parseName();
       this.tokenizer.nextToken();
-      const props = this.headerLineAndExtensions();
       node.type = NodeType.Component;
       node.componentName = name;
+      const props = this.headerLineAndExtensions();
       node.props = props;
       this.hooks.parseComponentNode?.propsAdded?.call(this, node);
       const children = this.handleChildren();
@@ -1098,9 +1123,9 @@
       }
       const tagName = tagToken.value;
       this.tokenizer.nextToken();
-      const props = this.headerLineAndExtensions();
       node.type = NodeType.Element;
       node.tagName = tagName;
+      const props = this.headerLineAndExtensions();
       node.props = props;
       this.hooks.parseElementNode?.propsAdded?.call(this, node);
       const children = this.handleChildren();
@@ -1174,17 +1199,17 @@
     }
     headerLineAndExtensions() {
       const props = [];
-      props.push(...this.attributeList());
-      if (this.tokenizer.token.type & TokenType.NewLine) {
-        this.tokenizer.nextToken();
-      }
-      while (this.tokenizer.token.type & TokenType.Pipe) {
-        this.tokenizer.nextToken();
+      do {
         props.push(...this.attributeList());
         if (this.tokenizer.token.type & TokenType.NewLine) {
           this.tokenizer.nextToken();
         }
-      }
+        if ((this.tokenizer.token.type & TokenType.Pipe) === 0) {
+          break;
+        } else {
+          this.tokenizer.nextToken();
+        }
+      } while (true);
       return props;
     }
     attributeList() {
@@ -1208,25 +1233,35 @@
       const token = this.tokenizer.nextToken();
       if (token.value !== '=') {
         this.addError(ParseErrorCode.MISSING_ASSIGN, `属性 "${node.key.key}" 缺少 "=" 赋值符号`, node.key.loc ?? this.tokenizer.emptyLoc(), node);
-        node.loc.start = node.key.loc.start;
-        node.loc.end = node.key.loc.end;
-        node.loc.source = this.tokenizer.code.slice(node.loc.start.offset, node.loc.end.offset);
+        this.handleOnlyKeyLoc(node);
         return node;
       }
       const valueToken = this.tokenizer.nextToken();
+      if (valueToken.type & TokenType.NewLine) {
+        this.tokenizer.nextToken();
+        node.value = this.parsePropertyInlineFragment();
+        this.handleKeyValueLoc(node);
+        return node;
+      }
       if ((valueToken.type & ValueTokenType) === 0) {
         this.addError(ParseErrorCode.MISSING_PROP_ASSIGNMENT, `属性值不合法, "${valueToken.value}" 不合法`, valueToken.loc ?? this.tokenizer.emptyLoc(), node);
-        node.loc.start = node.key.loc.start;
-        node.loc.end = node.key.loc.end;
-        node.loc.source = this.tokenizer.code.slice(node.loc.start.offset, node.loc.end.offset);
+        this.handleOnlyKeyLoc(node);
         return node;
       }
       node.value = this.parsePropertyValue();
       this.tokenizer.nextToken();
+      this.handleKeyValueLoc(node);
+      return node;
+    }
+    handleOnlyKeyLoc(node) {
+      node.loc.start = node.key.loc.start;
+      node.loc.end = node.key.loc.end;
+      node.loc.source = this.tokenizer.code.slice(node.loc.start.offset, node.loc.end.offset);
+    }
+    handleKeyValueLoc(node) {
       node.loc.start = node.key.loc.start;
       node.loc.end = node.value.loc.end;
       node.loc.source = this.tokenizer.code.slice(node.loc.start.offset, node.loc.end.offset);
-      return node;
     }
     parsePropertyKey(node) {
       node.type = NodeType.PropertyKey;
@@ -1251,6 +1286,12 @@
       node.value = value;
       return node;
     }
+    parsePropertyInlineFragment(node) {
+      const list = this.handleChildren();
+      node.type = NodeType.StaticValue;
+      node.value = list;
+      return node;
+    }
     parseName(node) {
       const _this$tokenizer$_hook7 = this.tokenizer._hook({}),
         _this$tokenizer$_hook8 = _slicedToArray(_this$tokenizer$_hook7, 2),
@@ -1474,6 +1515,9 @@
             }
             if (sort & NodeSort.TokenizerSwitcher) {
               const switcher = stack.peekByType(NodeSort.TokenizerSwitcher)?.node;
+              if (parent.resumeSnapshot) {
+                this.tokenizer.resume(parent.resumeSnapshot);
+              }
               this.tokenizer = switcher.tokenizer;
             }
             if (parent.__logicType === FakeType.ForItem) {
@@ -1568,7 +1612,7 @@
         } else {
           const valueIsMapKey = Reflect.has(data[aoye.Keys.Raw], value);
           const val = data[aoye.Keys.Raw][value];
-          if (typeof val === 'function') {
+          if (typeof val === 'function' || val instanceof InlineFragment) {
             _node = this.componentOrFragmentDeclaration(val, ctx);
           } else {
             const str = valueIsMapKey ? value : this.getFn(data, value);
@@ -1580,11 +1624,15 @@
         _node = this.createNode(value);
       }
       this.tokenizer.nextToken();
-      this.headerLine(_node);
-      this.extensionLines(_node);
+      this.headerLineAndExtensions(_node);
       this.onePropParsed = this.oneRealPropParsed;
       if (_node.__logicType & TokenizerSwitcherBit) {
         this.tokenizer = _node.tokenizer;
+        if (_node.fragmentSnapshot) {
+          this.tokenizer.resume(_node.fragmentSnapshot);
+          this.tokenizer.useDedentAsEof = true;
+          this.tokenizer.initIndentWhenUseDedentAsEof();
+        }
       }
       return _node;
     }
@@ -1960,16 +2008,25 @@
     }
     oneRealPropParsed = this.onePropParsed.bind(this);
     componentOrFragmentDeclaration(ComponentOrRender, ctx) {
-      let Component, render, child;
+      let Component, tokenizer, child, fragmentSnapshot, resumeSnapshot;
       const isCC = ComponentOrRender.prototype instanceof aoye.Store;
       if (isCC) {
         Component = ComponentOrRender;
         child = Component.new();
+        tokenizer = child.ui(true);
+      } else if (ComponentOrRender instanceof InlineFragment) {
+        const conf = ComponentOrRender;
+        child = aoye.deepSignal({}, aoye.getPulling(), true);
+        Object.setPrototypeOf(child, conf.data);
+        tokenizer = conf.tokenizer;
+        fragmentSnapshot = conf.snapshot;
+        resumeSnapshot = tokenizer.snapshot(['token', 'needIndent', 'isFirstToken', 'dentStack', 'isFirstToken', 'useDedentAsEof']);
       } else {
-        render = ComponentOrRender;
+        const render = ComponentOrRender;
         const boundStore = render.boundStore;
         child = aoye.deepSignal({}, aoye.getPulling(), true);
         Object.setPrototypeOf(child, boundStore);
+        tokenizer = render(true);
       }
       const node = {
         __logicType: isCC ? FakeType.Component : FakeType.Fragment,
@@ -1977,7 +2034,9 @@
         realBefore: null,
         realAfter: null,
         data: child,
-        tokenizer: render ? render(true) : child.ui(true)
+        tokenizer,
+        fragmentSnapshot,
+        resumeSnapshot
       };
       this.onePropParsed = createStoreOnePropParsed(child);
       node.realAfter = this.insertAfterAnchor('component-after');
@@ -2114,26 +2173,38 @@
         point = next;
       }
     }
-    extensionLines(_node) {
-      while (1) {
-        if ((this.tokenizer.token.type & TokenType.Pipe) === 0) {
-          return;
+    headerLineAndExtensions(_node) {
+      const tokenizer = this.tokenizer;
+      do {
+        const isComponent = _node.__logicType & TokenizerSwitcherBit;
+        let snapshot, dentLen;
+        const data = this.getData();
+        const unHandledKey = this.attributeList(_node, data);
+        if (isComponent) {
+          snapshot = tokenizer.snapshot(undefined, -1);
+          dentLen = tokenizer.dentStack[tokenizer.dentStack.length - 1];
         }
-        this.tokenizer.nextToken();
-        this.attributeList(_node);
-        if ((this.tokenizer.token.type & TokenType.NewLine) === 0) {
-          return;
+        tokenizer.nextToken();
+        if ((tokenizer.token.type & TokenType.Pipe) === 0) {
+          if (isComponent && tokenizer.token.type & TokenType.Indent) {
+            this.inlineFragment(_node, snapshot, data, unHandledKey);
+            tokenizer.skip(dentLen);
+            if ((tokenizer.token.type & TokenType.Pipe) === 0) {
+              break;
+            }
+          } else {
+            break;
+          }
         }
-        this.tokenizer.nextToken();
-      }
+        tokenizer.nextToken();
+      } while (true);
     }
-    headerLine(_node) {
-      this.attributeList(_node);
-      this.tokenizer.nextToken();
+    inlineFragment(_node, snapshot, data, key = 'children') {
+      const value = new InlineFragment(snapshot, data, key, this.tokenizer);
+      this.onePropParsed(data, _node, key, value, false, true);
     }
-    attributeList(_node) {
+    attributeList(_node, data) {
       let key, eq;
-      const data = this.getData();
       while ((this.tokenizer.token.type & TokenType.NewLine) === 0) {
         if (key == null) {
           key = this.tokenizer.token.value;
@@ -2181,6 +2252,7 @@
         }
         this.tokenizer.nextToken();
       }
+      return key;
     }
     config(opt) {
       Object.assign(this, opt);
@@ -2264,6 +2336,15 @@
     };
     return onePropParsed;
   }
+  class InlineFragment {
+    [aoye.Keys.ProxyFreeObject] = true;
+    constructor(snapshot, data, key, tokenizer) {
+      this.snapshot = snapshot;
+      this.data = data;
+      this.key = key;
+      this.tokenizer = tokenizer;
+    }
+  }
 
   function bobe(fragments, ...values) {
     const ui = function ui(isSub) {