bobe 0.0.56 → 0.0.58

package/dist/index.d.ts

@@ -1,8 +1,17 @@
 import { Queue } from 'bobe-shared';
 import * as aoye from 'aoye';
-import { Store, Keys, Effect, effect as effect$1, Scope, Signal, Computed, SignalNode, ValueDiff, CustomEffectOpt } from 'aoye';
+import { Keys, Store, Effect, effect as effect$1, Scope, Signal, Computed, SignalNode, ValueDiff, CustomEffectOpt } from 'aoye';
 export { Store } from 'aoye';
 
+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);
+}
+
 declare class Interpreter {
     private tokenizer;
     opt: TerpConf;
@@ -27,6 +36,7 @@ declare class Interpreter {
      * <declaration> ::= <tagName=token> <headerLineAndExtensions>
      *  */
     declaration(ctx: ProgramCtx): any;
+    dynamicDeclaration(pData: any, value: string, ctx: ProgramCtx): DynamicNode;
     createContextNode(): ContextNode;
     formatForCollection(collection: any): {
         arr: any[];
@@ -52,6 +62,7 @@ declare class Interpreter {
      *  */
     onePropParsed(data: Store, node: any, key: string, value: any, valueIsMapKey: boolean, isFn: boolean, hookI?: number): void;
     oneRealPropParsed: Interpreter['onePropParsed'];
+    private createComponentData;
     componentOrFragmentDeclaration(ComponentOrRender: UI | typeof Store | InlineFragment, ctx: ProgramCtx): ComponentNode$1;
     getFn(data: any, expression: string | number): any;
     getAssignFn(data: any, expression: string | number): any;
@@ -95,14 +106,6 @@ 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;
@@ -161,7 +164,8 @@ declare enum FakeType {
     Component = 16,
     Fragment = 32,
     ForItem = 64,
-    Context = 128
+    Context = 128,
+    DynamicText = 256
 }
 type NodeSortBit = number;
 type BaseType = string | number | boolean | undefined | null;
@@ -236,6 +240,7 @@ type ProgramCtx = {
 type UI<T = any> = {
     /** 在哪个 Store 声明的 */
     boundStore: Store;
+    __BOBE_IS_UI: true;
     /** 用户声明片段内可用的 props */
     defineProps?: T;
     (isSub: boolean): Tokenizer;
@@ -284,8 +289,23 @@ type IfNode = LogicNode & {
 type ContextNode = Omit<LogicNode, 'data'> & {
     context: any;
 };
+type DynamicNode = Omit<LogicNode, 'data'> & {
+    tokenizer: Tokenizer;
+    /** 模版片段快照 */
+    fragmentSnapshot?: ReturnType<Tokenizer['snapshot']>;
+    /** 渲染模版片段前的 快照，渲染完成后用于恢复 */
+    resumeSnapshot?: ReturnType<Tokenizer['snapshot']>;
+    snapshot: ReturnType<Tokenizer['snapshot']>;
+    owner: ComponentNode$1 | FragmentNode$1;
+    data?: any;
+    parentDataProvider: any;
+    effect: Effect;
+    textNode: any;
+};
 type FragmentNode$1 = LogicNode & {
     tokenizer: Tokenizer;
+    fragmentSnapshot?: ReturnType<Tokenizer['snapshot']>;
+    resumeSnapshot?: ReturnType<Tokenizer['snapshot']>;
 };
 type ComponentNode$1 = LogicNode & {
     tokenizer: Tokenizer;

package/dist/index.umd.js

@@ -34,11 +34,12 @@
     FakeType[FakeType["Fragment"] = 32] = "Fragment";
     FakeType[FakeType["ForItem"] = 64] = "ForItem";
     FakeType[FakeType["Context"] = 128] = "Context";
+    FakeType[FakeType["DynamicText"] = 256] = "DynamicText";
     return FakeType;
   }({});
   const CondBit = FakeType.If | FakeType.Fail | FakeType.Else;
   const LogicalBit = FakeType.If | FakeType.Fail | FakeType.Else | FakeType.For | FakeType.ForItem;
-  FakeType.If | FakeType.Fail | FakeType.Else | FakeType.For | FakeType.ForItem | FakeType.Component | FakeType.Fragment;
+  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 TokenizerSwitcherBit = FakeType.Component | FakeType.Fragment;
   let NodeSort = function (NodeSort) {
@@ -1419,6 +1420,17 @@
     }
     return candyLast;
   }
+  class InlineFragment {
+    [aoye.Keys.ProxyFreeObject] = true;
+    constructor(snapshot, data, key, tokenizer) {
+      this.snapshot = snapshot;
+      this.data = data;
+      this.key = key;
+      this.tokenizer = tokenizer;
+    }
+  }
+  const isUI = fn => typeof fn === 'function' && fn.__BOBE_IS_UI;
+  const isRenderAble = val => aoye.isStore(val) || isUI(val) || val instanceof InlineFragment;
 
   const KEY_INDEX = '__BOBE_KEY_INDEX';
   let _ctxStack;
@@ -1475,7 +1487,7 @@
           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 !== FakeType.Context ? NodeSort.CtxProvider : 0));
+          }, !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));
           if (ctx.current.__logicType) {
             if (isLogicNode) {
               aoye.setPulling(ctx.current.effect);
@@ -1609,21 +1621,14 @@
       } else if (hookType) {
         const data = this.getData();
         if (hookType === 'static') {
-          if (typeof value === 'function') {
+          if (isRenderAble(value)) {
             _node = this.componentOrFragmentDeclaration(value, ctx);
           } else {
-            throw new SyntaxError(`declaration 不支持 ${value} 类型的静态插值`);
-          }
-        } else {
-          const valueIsMapKey = Reflect.has(data[aoye.Keys.Raw], value);
-          const val = data[aoye.Keys.Raw][value];
-          if (typeof val === 'function' || val instanceof InlineFragment) {
-            _node = this.componentOrFragmentDeclaration(val, ctx);
-          } else {
-            const str = valueIsMapKey ? value : this.getFn(data, value);
             _node = this.createNode('text');
-            this.onePropParsed(data, _node, 'text', str, valueIsMapKey, false);
+            _node.text = String(value);
           }
+        } else {
+          return this.dynamicDeclaration(data, value, ctx);
         }
       } else {
         _node = this.createNode(value);
@@ -1641,6 +1646,96 @@
       }
       return _node;
     }
+    dynamicDeclaration(pData, value, ctx) {
+      const valueIsMapKey = Reflect.has(pData[aoye.Keys.Raw], value);
+      let node = {
+        __logicType: null,
+        realParent: null,
+        tokenizer: null,
+        effect: null,
+        textNode: null,
+        owner: ctx.stack.peekByType(NodeSort.TokenizerSwitcher)?.node,
+        snapshot: this.tokenizer.snapshot(['dentStack']),
+        parentDataProvider: ctx.stack.peekByType(NodeSort.CtxProvider)?.node
+      };
+      let isUpdate = false;
+      node.realAfter = this.insertAfterAnchor(`dynamic-after`);
+      node.effect = this.effect(({
+        old,
+        val
+      }) => {
+        let oldLogicType = node.__logicType,
+          oldTextNode = node.textNode;
+        if (oldLogicType) {
+          this.removeLogicNode(node);
+          bobeShared.pickInPlace(node, ['realParent', 'realBefore', 'realAfter',, 'owner', 'snapshot', 'parentDataProvider']);
+        }
+        if (isRenderAble(val)) {
+          if (oldTextNode) {
+            this.remove(oldTextNode);
+          }
+          const info = this.createComponentData(val);
+          info.__logicType;
+          Object.assign(node, info);
+          this.onePropParsed = info.onePropParsed;
+          if (isUpdate) {
+            this.tokenizer = node.owner.tokenizer;
+            this.tokenizer.resume(node.snapshot);
+            this.ctx.stack.push({
+              node: node.parentDataProvider,
+              prev: null
+            }, NodeSort.CtxProvider);
+          }
+          this.tokenizer.nextToken();
+          this.headerLineAndExtensions(node);
+          if (isUpdate) {
+            this.ctx.stack.pop();
+          }
+          this.onePropParsed = this.oneRealPropParsed;
+          this.tokenizer = node.tokenizer;
+          if (node.fragmentSnapshot) {
+            this.tokenizer.resume(node.fragmentSnapshot);
+            this.tokenizer.useDedentAsEof = true;
+            this.tokenizer.initIndentWhenUseDedentAsEof();
+          }
+          if (isUpdate) {
+            this.program(node.realParent, node.owner, node.realBefore, node);
+          }
+        } else {
+          node.__logicType = FakeType.DynamicText;
+          let textNode = oldTextNode;
+          const isNewTextNode = !textNode;
+          if (isNewTextNode) {
+            textNode = node.textNode = this.createNode('text');
+          }
+          textNode.text = String(val);
+          if (isNewTextNode) {
+            if (isUpdate) {
+              this.handleInsert(node.realParent, textNode, node.realBefore);
+            } else {
+              this.tokenizer.nextToken();
+              this.headerLineAndExtensions(node);
+              const _this$ctx2 = this.ctx,
+                realParent = _this$ctx2.realParent,
+                prevSibling = _this$ctx2.prevSibling;
+              this.handleInsert(realParent, textNode, prevSibling);
+            }
+          }
+        }
+        isUpdate = true;
+        return isDestroy => {
+          if (isDestroy) {
+            this.removeLogicNode(node);
+          }
+        };
+      }, [() => {
+        const val = valueIsMapKey ? pData[value] : this.getFn(pData, value)();
+        return val;
+      }], {
+        type: 'render'
+      });
+      return node;
+    }
     createContextNode() {
       const child = aoye.deepSignal({}, aoye.getPulling());
       const parentContext = this.ctx.stack.peekByType(NodeSort.Context)?.node?.context;
@@ -2059,20 +2154,22 @@
       }
     }
     oneRealPropParsed = this.onePropParsed.bind(this);
-    componentOrFragmentDeclaration(ComponentOrRender, ctx) {
-      let Component, tokenizer, child, fragmentSnapshot, resumeSnapshot;
+    createComponentData(ComponentOrRender) {
+      let tokenizer, child, fragmentSnapshot, resumeSnapshot, __logicType;
       const isCC = ComponentOrRender.prototype instanceof aoye.Store;
       if (isCC) {
-        Component = ComponentOrRender;
+        const Component = ComponentOrRender;
         child = Component.new();
         tokenizer = child.ui(true);
+        __logicType = FakeType.Component;
       } 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']);
+        __logicType = FakeType.Fragment;
+        resumeSnapshot = tokenizer.snapshot(['dentStack', 'token', 'needIndent', 'isFirstToken', 'isFirstToken', 'useDedentAsEof']);
       } else {
         const render = ComponentOrRender;
         const boundStore = render.boundStore;
@@ -2081,18 +2178,36 @@
           Object.setPrototypeOf(child, boundStore);
         }
         tokenizer = render(true);
+        __logicType = FakeType.Fragment;
       }
+      return {
+        data: child,
+        tokenizer,
+        onePropParsed: createStoreOnePropParsed(child),
+        fragmentSnapshot,
+        resumeSnapshot,
+        __logicType
+      };
+    }
+    componentOrFragmentDeclaration(ComponentOrRender, ctx) {
+      const _this$createComponent = this.createComponentData(ComponentOrRender),
+        data = _this$createComponent.data,
+        tokenizer = _this$createComponent.tokenizer,
+        onePropParsed = _this$createComponent.onePropParsed,
+        fragmentSnapshot = _this$createComponent.fragmentSnapshot,
+        resumeSnapshot = _this$createComponent.resumeSnapshot,
+        __logicType = _this$createComponent.__logicType;
       const node = {
-        __logicType: isCC ? FakeType.Component : FakeType.Fragment,
+        __logicType,
         realParent: ctx.realParent,
         realBefore: null,
         realAfter: null,
-        data: child,
+        data,
         tokenizer,
         fragmentSnapshot,
         resumeSnapshot
       };
-      this.onePropParsed = createStoreOnePropParsed(child);
+      this.onePropParsed = onePropParsed;
       node.realAfter = this.insertAfterAnchor('component-after');
       return node;
     }
@@ -2272,10 +2387,54 @@
             hookI = _this$tokenizer$_hook4[2];
           const rawVal = data[aoye.Keys.Raw][value];
           const isFn = typeof rawVal === 'function';
-          if (key === 'ref') {
+          if (key === 'props') {
+            let prevKeys = new Set();
+            const savedDefaults = new Map();
+            new this.Effect(() => {
+              const props = isFn ? rawVal : Reflect.has(data[aoye.Keys.Raw], value) ? data[value] : this.getFn(data, value)();
+              const isComponent = _node.__logicType & TokenizerSwitcherBit;
+              const rawTarget = isComponent ? _node.data[aoye.Keys.Raw] : null;
+              const cleanupKeys = keysToClean => {
+                for (const k of keysToClean) {
+                  if (k.startsWith('on')) continue;
+                  if (isComponent) {
+                    _node.data[k] = savedDefaults.has(k) ? savedDefaults.get(k) : undefined;
+                  } else {
+                    this.setProp(_node, k, undefined, hookI);
+                  }
+                }
+              };
+              if (!props || typeof props !== 'object') {
+                cleanupKeys(prevKeys);
+                prevKeys.clear();
+                return;
+              }
+              props[aoye.Keys.Iterator];
+              const raw = props[aoye.Keys.Raw] || props;
+              const keys = Object.keys(raw);
+              const newKeys = new Set();
+              for (let i = 0; i < keys.length; i++) {
+                const k = keys[i];
+                newKeys.add(k);
+                prevKeys.delete(k);
+                if (isComponent) {
+                  const savedK = savedDefaults.has(k);
+                  if (!savedK && Object.prototype.hasOwnProperty.call(rawTarget, k)) {
+                    savedDefaults.set(k, rawTarget[k]);
+                  }
+                  const val = props[k];
+                  _node.data[k] = val === undefined && savedK ? savedDefaults.get(k) : val;
+                } else {
+                  this.onePropParsed(props, _node, k, k, true, false, hookI);
+                }
+              }
+              cleanupKeys(prevKeys);
+              prevKeys = newKeys;
+            }, aoye.ScheduleType.Render);
+          } else if (key === 'ref') {
             const valueIsMapKey = Reflect.has(data[aoye.Keys.Raw], value);
             let refValue = _node;
-            if (_node.__logicType === FakeType.Component) {
+            if (_node.__logicType & TokenizerSwitcherBit) {
               refValue = _node.data;
             } else {
               refValue[aoye.Keys.ProxyFreeObject] = true;
@@ -2301,8 +2460,8 @@
           } else {
             this.onePropParsed(data, _node, key, value, false, isFn, hookI);
           }
-          key = null;
-          eq = null;
+          key = undefined;
+          eq = undefined;
         }
         this.tokenizer.nextToken();
       }
@@ -2390,15 +2549,6 @@
     };
     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) {
@@ -2411,6 +2561,7 @@
       return tokenizer;
     };
     ui.boundStore = aoye.Store.Current;
+    ui.__BOBE_IS_UI = true;
     return ui;
   }
   function customRender(option) {