bobe 0.0.59 → 0.0.61

package/dist/index.d.ts

@@ -16,11 +16,10 @@ declare class Interpreter {
     private tokenizer;
     opt: TerpConf;
     constructor(tokenizer: Tokenizer);
-    isLogicNode(node: any): number;
     ctx: ProgramCtx;
     rootComponent: ComponentNode$1 | null;
     program(root: any, componentNode?: ComponentNode$1, before?: any, ctxProvider?: any): ComponentNode$1;
-    insertAnchor(name?: string, isBefore?: boolean): any;
+    insertAnchor(node: any, name?: string, isBefore?: boolean): any;
     /** 处理
      *                    是逻辑                               是普通
      * 父节点       将子节点加入 directList         调用 insert 方法挨个插入子节点
@@ -37,12 +36,17 @@ declare class Interpreter {
      *  */
     declaration(ctx: ProgramCtx): any;
     dynamicDeclaration(pData: any, value: string, ctx: ProgramCtx): DynamicNode;
+    createTpNode(): TpNode;
     createContextNode(): ContextNode;
     formatForCollection(collection: any): {
         arr: any[];
         keys: string[] | null;
     };
     forDeclaration(): ForNode | ForItemNode;
+    /** after 锚点，对 fake 节点反引用
+     * 用于 tp 节点 移动时，可以通过 after 锚点找到 fake 节点并做 realParent 的修正
+     */
+    anchorRefBack(anchor: any, node: LogicNode): void;
     insertForItem(forNode: ForNode, i: number, parentData: any, newChildren: ForItemNode[], before: any, snapshotForUpdate: any): void;
     removeForItem(children: ForItemNode[], i: number): void;
     reuseForItem(child: ForItemNode, data: any, itemExp: string | ((value: any) => any), i: number, indexName?: string, 
@@ -169,7 +173,8 @@ declare enum FakeType {
     Fragment = 32,
     ForItem = 64,
     Context = 128,
-    DynamicText = 256
+    DynamicText = 256,
+    Tp = 512
 }
 type NodeSortBit = number;
 type BaseType = string | number | boolean | undefined | null;
@@ -296,6 +301,14 @@ type IfNode = LogicNode & {
 type ContextNode = Omit<LogicNode, 'data'> & {
     context: any;
 };
+type TpNode = LogicNode & {
+    tpData: any;
+    effect: Effect;
+    contentBefore: any;
+    contentAfter: any;
+    owner: ComponentNode$1 | FragmentNode$1;
+    snapshot: ReturnType<Tokenizer['snapshot']>;
+};
 type DynamicNode = Omit<LogicNode, 'data'> & {
     tokenizer: Tokenizer;
     /** 模版片段快照 */
@@ -584,7 +597,7 @@ type ParseHooks = Partial<{
 }>;
 
 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)[];
+declare function customRender(option: CustomRenderConf): <T extends typeof Store>(Ctor: T, root: any) => readonly [ComponentNode$1, InstanceType<T>];
 
 type IContext = {
     <T = any>(name: string): T;
@@ -595,4 +608,4 @@ declare const context: IContext;
 declare const effect: (callback: (...args: ValueDiff[]) => void, depOrOpt?: Dep[] | Dep | CustomEffectOpt, opt?: CustomEffectOpt) => aoye.Effect;
 
 export { Compiler, FakeType, NodeType, ParseErrorCode, ParseSyntaxError, Tokenizer, bobe, context, customRender, effect };
-export type { ASTNodeType, BaseNode, CommentNode, ComponentNode, ConditionalNode, DynamicValue, ElementNode, FragmentNode, IContext, InterpolationNode, LogicNode, LoopNode, ParseError, Program, Property, PropertyKeyNode, PropertyValue, SourceLocation, StaticValue, TemplateNode, TextNode };
+export type { ASTNodeType, BaseNode, CommentNode, ComponentNode, ConditionalNode, DynamicValue, ElementNode, FragmentNode, IContext, InterpolationNode, LogicNode, LoopNode, ParseError, Program, Property, PropertyKeyNode, PropertyValue, SourceLocation, StaticValue, TemplateNode, TextNode, UI };

package/dist/index.umd.js

@@ -35,15 +35,15 @@
     FakeType[FakeType["ForItem"] = 64] = "ForItem";
     FakeType[FakeType["Context"] = 128] = "Context";
     FakeType[FakeType["DynamicText"] = 256] = "DynamicText";
+    FakeType[FakeType["Tp"] = 512] = "Tp";
     return FakeType;
   }({});
   const CondBit = FakeType.If | FakeType.Fail | FakeType.Else;
-  const LogicalBit = FakeType.If | FakeType.Fail | FakeType.Else | FakeType.For | FakeType.ForItem;
   const CtxProviderBit = FakeType.If | FakeType.Fail | FakeType.Else | FakeType.For | FakeType.ForItem | FakeType.Component | FakeType.Fragment | FakeType.DynamicText;
-  const ContextBit = FakeType.If | FakeType.Fail | FakeType.Else | FakeType.ForItem | FakeType.Context;
+  const ContextBit = FakeType.If | FakeType.Fail | FakeType.Else | FakeType.ForItem | FakeType.Context | FakeType.Tp;
   const TokenizerSwitcherBit = FakeType.Component | FakeType.Fragment;
   let NodeSort = function (NodeSort) {
-    NodeSort[NodeSort["Logic"] = 1] = "Logic";
+    NodeSort[NodeSort["EffectNode"] = 1] = "EffectNode";
     NodeSort[NodeSort["Real"] = 2] = "Real";
     NodeSort[NodeSort["Component"] = 4] = "Component";
     NodeSort[NodeSort["CtxProvider"] = 8] = "CtxProvider";
@@ -56,6 +56,7 @@
     TerpEvt["HandledComponentNode"] = "handled-component-node";
     return TerpEvt;
   })({});
+  const FakeNode = Symbol('fake-node');
   let ParseErrorCode = function (ParseErrorCode) {
     ParseErrorCode[ParseErrorCode["UNCLOSED_BRACE"] = 9001] = "UNCLOSED_BRACE";
     ParseErrorCode[ParseErrorCode["UNCLOSED_STRING"] = 9002] = "UNCLOSED_STRING";
@@ -1431,6 +1432,14 @@
   }
   const isUI = fn => typeof fn === 'function' && fn.__BOBE_IS_UI;
   const isRenderAble = val => aoye.isStore(val) || isUI(val) || val instanceof InlineFragment;
+  const SAFE_HANDLER = {
+    has: () => true,
+    get: (t, k) => {
+      if (typeof k === 'symbol') return t[k];
+      return k in t ? t[k] : undefined;
+    }
+  };
+  const safe = data => new Proxy(data, SAFE_HANDLER);
 
   const KEY_INDEX = '__BOBE_KEY_INDEX';
   let _ctxStack;
@@ -1442,9 +1451,6 @@
     constructor(tokenizer) {
       this.tokenizer = tokenizer;
     }
-    isLogicNode(node) {
-      return node && node.__logicType & LogicalBit;
-    }
     rootComponent = null;
     program(root, componentNode, before, ctxProvider) {
       this.rootComponent = componentNode;
@@ -1463,7 +1469,7 @@
         stack.push({
           node: ctxProvider,
           prev: null
-        }, (ctxProvider.__logicType & LogicalBit ? NodeSort.Logic : 0) | NodeSort.CtxProvider);
+        }, (ctxProvider.__logicType && ctxProvider.effect ? NodeSort.EffectNode : 0) | NodeSort.CtxProvider);
       }
       const rootLen = stack.length;
       const ctx = this.ctx = {
@@ -1486,18 +1492,22 @@
         const token = this.tokenizer.token;
         if (token.type & TokenType.Indent) {
           this.tokenizer.nextToken();
-          const isLogicNode = this.isLogicNode(ctx.current);
+          const isEffectNode = ctx.current && ctx.current.__logicType && ctx.current.effect;
           stack.push({
             node: ctx.current,
             prev: ctx.prevSibling
-          }, !ctx.current.__logicType ? NodeSort.Real : (ctx.current.__logicType & LogicalBit ? NodeSort.Logic : 0) | (ctx.current.__logicType & TokenizerSwitcherBit ? NodeSort.TokenizerSwitcher : 0) | (ctx.current.__logicType & ContextBit ? NodeSort.Context : 0) | (ctx.current.__logicType === FakeType.Component ? NodeSort.Component : 0) | (ctx.current.__logicType & CtxProviderBit ? NodeSort.CtxProvider : 0));
+          }, !ctx.current.__logicType ? NodeSort.Real : (isEffectNode ? NodeSort.EffectNode : 0) | (ctx.current.__logicType & TokenizerSwitcherBit ? NodeSort.TokenizerSwitcher : 0) | (ctx.current.__logicType & ContextBit ? NodeSort.Context : 0) | (ctx.current.__logicType === FakeType.Component ? NodeSort.Component : 0) | (ctx.current.__logicType & CtxProviderBit ? NodeSort.CtxProvider : 0));
           if (ctx.current.__logicType) {
             this.beforeLogicIndent?.(ctx.current);
-            if (isLogicNode) {
+            if (isEffectNode) {
               aoye.setPulling(ctx.current.effect);
               if (ctx.current.__logicType & FakeType.ForItem) {
                 ctx.prevSibling = ctx.current.realBefore;
               }
+              if (ctx.current.__logicType & FakeType.Tp) {
+                ctx.realParent = ctx.current.tpData[aoye.Keys.Raw].node;
+                ctx.prevSibling = ctx.current.contentBefore;
+              }
             }
           } else {
             if (ctx.current) {
@@ -1533,14 +1543,17 @@
             const prevSameType = stack.peekByType(NodeSort.Real);
             ctx.realParent = prevSameType?.node || root;
           } else {
-            if (sort & NodeSort.Logic) {
-              const parentLogic = stack.peekByType(NodeSort.Logic)?.node;
+            if (sort & NodeSort.EffectNode) {
+              const parentLogic = stack.peekByType(NodeSort.EffectNode)?.node;
               if (parentLogic) {
                 aoye.setPulling(parentLogic.effect);
               } else {
                 aoye.setPulling(rootPulling);
               }
             }
+            if (parent.__logicType === FakeType.Tp) {
+              ctx.realParent = parent.realParent;
+            }
             if (sort & NodeSort.TokenizerSwitcher) {
               const switcher = stack.peekByType(NodeSort.TokenizerSwitcher)?.node;
               if (parent.resumeSnapshot) {
@@ -1577,13 +1590,17 @@
       }
       return componentNode;
     }
-    insertAnchor(name = 'anchor', isBefore = false) {
+    insertAnchor(node, name = 'anchor', isBefore = false) {
       const _this$ctx = this.ctx,
         realParent = _this$ctx.realParent,
         prevSibling = _this$ctx.prevSibling,
         stack = _this$ctx.stack,
         before = _this$ctx.before;
+        _this$ctx.current;
       const afterAnchor = this.createAnchor(name, isBefore);
+      if (!isBefore) {
+        this.anchorRefBack(afterAnchor, node);
+      }
       this.ctx.prevSibling = stack.length === 2 && !prevSibling ? before : prevSibling;
       this.handleInsert(realParent, afterAnchor, prevSibling);
       return afterAnchor;
@@ -1628,6 +1645,8 @@
         return this.condDeclaration(ctx);
       } else if (value === 'context') {
         _node = this.createContextNode();
+      } else if (value === 'tp') {
+        return this.createTpNode();
       } else if (value === 'for') {
         return this.forDeclaration();
       } else if (hookType) {
@@ -1667,11 +1686,11 @@
         effect: null,
         textNode: null,
         owner: ctx.stack.peekByType(NodeSort.TokenizerSwitcher)?.node,
-        snapshot: this.tokenizer.snapshot(['dentStack']),
+        snapshot: this.tokenizer.snapshot(['dentStack', 'isFirstToken']),
         parentDataProvider: ctx.stack.peekByType(NodeSort.CtxProvider)?.node
       };
       let isUpdate = false;
-      node.realAfter = this.insertAnchor(`dynamic-after`);
+      node.realAfter = this.insertAnchor(node, `dynamic-after`);
       node.effect = this.effect(({
         old,
         val
@@ -1680,7 +1699,7 @@
           oldTextNode = node.textNode;
         if (oldLogicType) {
           this.removeLogicNode(node);
-          bobeShared.pickInPlace(node, ['realParent', 'realBefore', 'realAfter',, 'owner', 'snapshot', 'parentDataProvider']);
+          bobeShared.pickInPlace(node, ['realParent', 'realBefore', 'realAfter', 'owner', 'snapshot', 'parentDataProvider']);
         }
         if (isRenderAble(val)) {
           if (oldTextNode) {
@@ -1710,7 +1729,7 @@
           }
           if (isUpdate) {
             this.tokenizer.useDedentAsEof = false;
-            this.program(node.realParent, node.owner, node.realBefore, node);
+            this.program(node.realParent, node, node.realBefore);
           } else {
             this.tokenizer.useDedentAsEof = true;
             this.tokenizer.initIndentWhenUseDedentAsEof();
@@ -1751,6 +1770,93 @@
       });
       return node;
     }
+    createTpNode() {
+      const child = aoye.deepSignal({}, aoye.getPulling());
+      const node = {
+        __logicType: FakeType.Tp,
+        data: this.getData(),
+        realParent: null,
+        realBefore: null,
+        realAfter: null,
+        contentBefore: null,
+        contentAfter: null,
+        effect: null,
+        snapshot: null,
+        tpData: child,
+        owner: this.ctx.stack.peekByType(NodeSort.TokenizerSwitcher)?.node
+      };
+      this.onePropParsed = createStoreOnePropParsed(child);
+      this.tokenizer.nextToken();
+      this.headerLineAndExtensions(node);
+      this.onePropParsed = this.oneRealPropParsed;
+      node.realAfter = this.insertAnchor(node, 'tp-after');
+      const before = node.contentBefore = this.createAnchor('tp-content-before', true);
+      const after = node.contentAfter = this.createAnchor('tp-content-after', true);
+      let firstRender = true;
+      node.effect = this.effect(({
+        old: oldDom,
+        val: dom
+      }) => {
+        const removeTpChild = () => {
+          if (oldDom) {
+            let point = before;
+            do {
+              const next = this.nextSib(point);
+              this.remove(point, oldDom, null);
+              if (point === after) break;
+              point = next;
+            } while (true);
+          }
+        };
+        if (firstRender) {
+          if (dom) {
+            this.handleInsert(dom, after, null);
+            this.handleInsert(dom, before, null);
+          } else {
+            if (this.tokenizer.token.type === TokenType.Indent) {
+              const dentLen = this.tokenizer.dentStack[this.tokenizer.dentStack.length - 2] ?? 0;
+              this.tokenizer.skip(dentLen);
+            }
+          }
+        } else {
+          if (dom) {
+            if (oldDom) {
+              let point = before,
+                lastInsert = null;
+              do {
+                const next = this.nextSib(point);
+                const fakeNode = point[FakeNode];
+                if (fakeNode) {
+                  fakeNode.realParent = dom;
+                }
+                this.handleInsert(dom, point, lastInsert);
+                if (point === after) break;
+                lastInsert = point;
+                point = next;
+              } while (true);
+            } else {
+              this.handleInsert(dom, after, null);
+              this.handleInsert(dom, before, null);
+              this.tokenizer = node.owner.tokenizer;
+              this.tokenizer.resume(node.snapshot);
+              this.tokenizer.useDedentAsEof = false;
+              this.program(dom, node.owner, before, node);
+            }
+          } else {
+            removeTpChild();
+          }
+        }
+        firstRender = false;
+        return isDestroy => {
+          if (isDestroy) {
+            removeTpChild();
+          }
+        };
+      }, [() => child.node], {
+        type: 'render'
+      });
+      return node;
+    }
     createContextNode() {
       const child = aoye.deepSignal({}, aoye.getPulling());
       const parentContext = this.ctx.stack.peekByType(NodeSort.Context)?.node?.context;
@@ -1765,7 +1871,7 @@
         realBefore: null,
         realAfter: null
       };
-      node.realAfter = this.insertAnchor('context-after');
+      node.realAfter = this.insertAnchor(node, 'context-after');
       return node;
     }
     formatForCollection(collection) {
@@ -1855,15 +1961,15 @@
         i: 0
       };
       if (keyExp) {
-        forNode.getKey = new Function('data', `let v;with(data){v=${keyExp}\n};return v;`);
+        const rawGetKey = new Function('data', `with(data){return (${keyExp})}`);
+        forNode.getKey = data => rawGetKey(safe(data));
       }
-      window['for1'] = forNode;
       const data = this.getData();
       const cells = data[aoye.Keys.Meta].cells;
       const hasArrExpKey = Reflect.has(data[aoye.Keys.Raw], arrExp);
       const arrSignal = hasArrExpKey ? (data[arrExp], cells.get(arrExp)) : new aoye.Computed(this.getFn(data, arrExp));
       forNode.arrSignal = arrSignal;
-      forNode.realAfter = this.insertAnchor('for-after');
+      forNode.realAfter = this.insertAnchor(forNode, 'for-after');
       const _forNode$snapshot = forNode.snapshot;
         _forNode$snapshot.dentStack;
         _forNode$snapshot.isFirstToken;
@@ -1886,8 +1992,8 @@
           const len = arr.length;
           for (let i = len; i--;) {
             const item = this.createForItem(forNode, i, data);
-            item.realAfter = this.insertAnchor('for-item-after');
-            item.realBefore = this.insertAnchor('for-item-before', true);
+            item.realAfter = this.insertAnchor(item, 'for-item-after');
+            item.realBefore = this.insertAnchor(item, 'for-item-before', true);
             item.realParent = forNode.realParent;
             children[i] = item;
           }
@@ -2049,10 +2155,14 @@
       }, aoye.ScheduleType.Render);
       return forNode.children[0] || forNode;
     }
+    anchorRefBack(anchor, node) {
+      anchor[FakeNode] = node;
+    }
     insertForItem(forNode, i, parentData, newChildren, before, snapshotForUpdate) {
       const item = this.createForItem(forNode, i, parentData);
       newChildren[i] = item;
       let realAfter = this.createAnchor('for-item-after');
+      this.anchorRefBack(realAfter, item);
       this.handleInsert(forNode.realParent, realAfter, before);
       let realBefore = this.createAnchor('for-item-before', true);
       this.handleInsert(forNode.realParent, realBefore, before);
@@ -2223,11 +2333,11 @@
         resumeSnapshot
       };
       this.onePropParsed = onePropParsed;
-      node.realAfter = this.insertAnchor('component-after');
+      node.realAfter = this.insertAnchor(node, 'component-after');
       return node;
     }
     getFn(data, expression) {
-      return new Function('data', `let v;with(data){v=${expression}};return v;`).bind(undefined, data);
+      return new Function('data', `with(data){return (${expression})}`).bind(undefined, safe(data));
     }
     getAssignFn(data, expression) {
       const valueId = `value_bobe_${bobeShared.date32()}`;
@@ -2318,7 +2428,7 @@
           break;
       }
       ifNode.condition = signal;
-      ifNode.realAfter = this.insertAnchor(`${keyWord.value}-after`);
+      ifNode.realAfter = this.insertAnchor(ifNode, `${keyWord.value}-after`);
       const ef = this.effect(({
         val
       }) => {
@@ -2361,10 +2471,11 @@
       const tokenizer = this.tokenizer;
       do {
         const isComponent = _node.__logicType & TokenizerSwitcherBit;
+        const isTp = _node.__logicType === FakeType.Tp;
         let snapshot, dentLen;
         const data = this.getData();
         const unHandledKey = this.attributeList(_node, data);
-        if (isComponent) {
+        if (isComponent || isTp) {
           snapshot = tokenizer.snapshot(undefined, -1);
           dentLen = tokenizer.dentStack[tokenizer.dentStack.length - 1];
         }
@@ -2376,6 +2487,9 @@
             if ((tokenizer.token.type & TokenType.Pipe) === 0) {
               break;
             }
+          } else if (isTp) {
+            _node.snapshot = snapshot;
+            break;
           } else {
             break;
           }
@@ -2577,6 +2691,7 @@
       return tokenizer;
     };
     ui.boundStore = aoye.Store.Current;
+    ui[aoye.Keys.ProxyFreeObject] = true;
     ui.__BOBE_IS_UI = true;
     return ui;
   }