bobe 0.0.56 → 0.0.58

package/dist/bobe.cjs.js

@@ -33,11 +33,12 @@ let FakeType = function (FakeType) {
   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) {
@@ -1418,6 +1419,17 @@ function macInc(arr) {
   }
   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;
@@ -1474,7 +1486,7 @@ class Interpreter {
         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);
@@ -1608,21 +1620,14 @@ class Interpreter {
     } 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);
@@ -1640,6 +1645,96 @@ class Interpreter {
     }
     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;
@@ -2058,20 +2153,22 @@ class Interpreter {
     }
   }
   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;
@@ -2080,18 +2177,36 @@ class Interpreter {
         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;
   }
@@ -2271,10 +2386,54 @@ class Interpreter {
           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;
@@ -2300,8 +2459,8 @@ class Interpreter {
         } else {
           this.onePropParsed(data, _node, key, value, false, isFn, hookI);
         }
-        key = null;
-        eq = null;
+        key = undefined;
+        eq = undefined;
       }
       this.tokenizer.nextToken();
     }
@@ -2389,15 +2548,6 @@ function createStoreOnePropParsed(child) {
   };
   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) {
@@ -2410,6 +2560,7 @@ function bobe(fragments, ...values) {
     return tokenizer;
   };
   ui.boundStore = aoye.Store.Current;
+  ui.__BOBE_IS_UI = true;
   return ui;
 }
 function customRender(option) {