pome-ui 2.0.0-preview33 → 2.0.0-preview35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pome-ui",
-  "version": "2.0.0-preview33",
+  "version": "2.0.0-preview35",
   "description": "Front-end MVC library",
   "main": "pome-ui.js",
   "bin": {

package/pome-ui.dev.js

@@ -1,6 +1,6 @@
 // Vue
 /**
-* vue v3.5.12
+* vue v3.5.13
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -216,10 +216,9 @@ var Vue = (function (exports) {
     return ret;
   }
   function stringifyStyle(styles) {
+    if (!styles) return "";
+    if (isString(styles)) return styles;
     let ret = "";
-    if (!styles || isString(styles)) {
-      return ret;
-    }
     for (const key in styles) {
       const value = styles[key];
       if (isString(value) || typeof value === "number") {
@@ -482,17 +481,21 @@ var Vue = (function (exports) {
     }
     stop(fromParent) {
       if (this._active) {
+        this._active = false;
         let i, l;
         for (i = 0, l = this.effects.length; i < l; i++) {
           this.effects[i].stop();
         }
+        this.effects.length = 0;
         for (i = 0, l = this.cleanups.length; i < l; i++) {
           this.cleanups[i]();
         }
+        this.cleanups.length = 0;
         if (this.scopes) {
           for (i = 0, l = this.scopes.length; i < l; i++) {
             this.scopes[i].stop(true);
           }
+          this.scopes.length = 0;
         }
         if (!this.detached && this.parent && !fromParent) {
           const last = this.parent.scopes.pop();
@@ -502,7 +505,6 @@ var Vue = (function (exports) {
           }
         }
         this.parent = void 0;
-        this._active = false;
       }
     }
   }
@@ -1268,6 +1270,7 @@ var Vue = (function (exports) {
       this._isShallow = _isShallow;
     }
     get(target, key, receiver) {
+      if (key === "__v_skip") return target["__v_skip"];
       const isReadonly2 = this._isReadonly, isShallow2 = this._isShallow;
       if (key === "__v_isReactive") {
         return !isReadonly2;
@@ -2104,7 +2107,7 @@ var Vue = (function (exports) {
     const scope = getCurrentScope();
     const watchHandle = () => {
       effect.stop();
-      if (scope) {
+      if (scope && scope.active) {
         remove(scope.effects, effect);
       }
     };
@@ -3064,11 +3067,32 @@ var Vue = (function (exports) {
           updateCssVars(n2, true);
         }
         if (isTeleportDeferred(n2.props)) {
-          queuePostRenderEffect(mountToTarget, parentSuspense);
+          queuePostRenderEffect(() => {
+            mountToTarget();
+            n2.el.__isMounted = true;
+          }, parentSuspense);
         } else {
           mountToTarget();
         }
       } else {
+        if (isTeleportDeferred(n2.props) && !n1.el.__isMounted) {
+          queuePostRenderEffect(() => {
+            TeleportImpl.process(
+              n1,
+              n2,
+              container,
+              anchor,
+              parentComponent,
+              parentSuspense,
+              namespace,
+              slotScopeIds,
+              optimized,
+              internals
+            );
+            delete n1.el.__isMounted;
+          }, parentSuspense);
+          return;
+        }
         n2.el = n1.el;
         n2.targetStart = n1.targetStart;
         const mainAnchor = n2.anchor = n1.anchor;
@@ -3374,10 +3398,9 @@ var Vue = (function (exports) {
         if (innerChild.type !== Comment) {
           setTransitionHooks(innerChild, enterHooks);
         }
-        const oldChild = instance.subTree;
-        const oldInnerChild = oldChild && getInnerChild$1(oldChild);
+        let oldInnerChild = instance.subTree && getInnerChild$1(instance.subTree);
         if (oldInnerChild && oldInnerChild.type !== Comment && !isSameVNodeType(innerChild, oldInnerChild) && recursiveGetSubtree(instance).type !== Comment) {
-          const leavingHooks = resolveTransitionHooks(
+          let leavingHooks = resolveTransitionHooks(
             oldInnerChild,
             rawProps,
             state,
@@ -3392,6 +3415,7 @@ var Vue = (function (exports) {
                 instance.update();
               }
               delete leavingHooks.afterLeave;
+              oldInnerChild = void 0;
             };
             return emptyPlaceholder(child);
           } else if (mode === "in-out" && innerChild.type !== Comment) {
@@ -3405,10 +3429,19 @@ var Vue = (function (exports) {
                 earlyRemove();
                 el[leaveCbKey] = void 0;
                 delete enterHooks.delayedLeave;
+                oldInnerChild = void 0;
+              };
+              enterHooks.delayedLeave = () => {
+                delayedLeave();
+                delete enterHooks.delayedLeave;
+                oldInnerChild = void 0;
               };
-              enterHooks.delayedLeave = delayedLeave;
             };
+          } else {
+            oldInnerChild = void 0;
           }
+        } else if (oldInnerChild) {
+          oldInnerChild = void 0;
         }
         return child;
       };
@@ -3713,6 +3746,9 @@ var Vue = (function (exports) {
       return;
     }
     if (isAsyncWrapper(vnode) && !isUnmount) {
+      if (vnode.shapeFlag & 512 && vnode.type.__asyncResolved && vnode.component.subTree.component) {
+        setRef(rawRef, oldRawRef, parentSuspense, vnode.component.subTree);
+      }
       return;
     }
     const refValue = vnode.shapeFlag & 4 ? getComponentPublicInstance(vnode.component) : vnode.el;
@@ -3977,7 +4013,7 @@ var Vue = (function (exports) {
               getContainerType(container),
               optimized
             );
-            if (isAsyncWrapper(vnode)) {
+            if (isAsyncWrapper(vnode) && !vnode.type.__asyncResolved) {
               let subTree;
               if (isFragmentStart) {
                 subTree = createVNode(Fragment);
@@ -4246,6 +4282,10 @@ Server rendered element contains fewer child nodes than client vdom.`
         getContainerType(container),
         slotScopeIds
       );
+      if (parentComponent) {
+        parentComponent.vnode.el = vnode.el;
+        updateHOCHostEl(parentComponent, vnode.el);
+      }
       return next;
     };
     const locateClosingAnchor = (node, open = "[", close = "]") => {
@@ -5199,6 +5239,7 @@ If this is a native custom element, make sure to exclude it from component resol
       $watch: (i) => instanceWatch.bind(i),
       $containers: i => i.$containers,
       $container: i => i.$container,
+      $delayClose: i => i.$delayClose,
       $data: i => i.$data,
       $created: i => i.$created,
       $unmounted: i => i.$unmounted,
@@ -8659,7 +8700,7 @@ If you want to remount the same app, move your app creation logic into a factory
           }
           if (extraAttrs.length) {
             warn$1(
-              `Extraneous non-props attributes (${extraAttrs.join(", ")}) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.`
+              `Extraneous non-props attributes (${extraAttrs.join(", ")}) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes.`
             );
           }
           if (eventAttrs.length) {
@@ -9442,9 +9483,9 @@ If you want to remount the same app, move your app creation logic into a factory
     currentBlock = blockStack[blockStack.length - 1] || null;
   }
   let isBlockTreeEnabled = 1;
-  function setBlockTracking(value) {
+  function setBlockTracking(value, inVOnce = false) {
     isBlockTreeEnabled += value;
-    if (value < 0 && currentBlock) {
+    if (value < 0 && currentBlock && inVOnce) {
       currentBlock.hasOnce = true;
     }
   }
@@ -10454,7 +10495,7 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.5.12";
+  const version = "3.5.13";
   const warn = warn$1 ;
   const ErrorTypeStrings = ErrorTypeStrings$1 ;
   const devtools = devtools$1 ;
@@ -10626,7 +10667,8 @@ Component that was made reactive: `,
       onAppear = onEnter,
       onAppearCancelled = onEnterCancelled
     } = baseProps;
-    const finishEnter = (el, isAppear, done) => {
+    const finishEnter = (el, isAppear, done, isCancelled) => {
+      el._enterCancelled = isCancelled;
       removeTransitionClass(el, isAppear ? appearToClass : enterToClass);
       removeTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass);
       done && done();
@@ -10669,8 +10711,13 @@ Component that was made reactive: `,
         el._isLeaving = true;
         const resolve = () => finishLeave(el, done);
         addTransitionClass(el, leaveFromClass);
-        addTransitionClass(el, leaveActiveClass);
-        forceReflow();
+        if (!el._enterCancelled) {
+          forceReflow();
+          addTransitionClass(el, leaveActiveClass);
+        } else {
+          addTransitionClass(el, leaveActiveClass);
+          forceReflow();
+        }
         nextFrame(() => {
           if (!el._isLeaving) {
             return;
@@ -10684,11 +10731,11 @@ Component that was made reactive: `,
         callHook(onLeave, [el, resolve]);
       },
       onEnterCancelled(el) {
-        finishEnter(el, false);
+        finishEnter(el, false, void 0, true);
         callHook(onEnterCancelled, [el]);
       },
       onAppearCancelled(el) {
-        finishEnter(el, true);
+        finishEnter(el, true, void 0, true);
         callHook(onAppearCancelled, [el]);
       },
       onLeaveCancelled(el) {
@@ -10901,10 +10948,11 @@ Component that was made reactive: `,
       }
       updateTeleports(vars);
     };
-    onBeforeMount(() => {
-      watchPostEffect(setVars);
+    onBeforeUpdate(() => {
+      queuePostFlushCb(setVars);
     });
     onMounted(() => {
+      watch(setVars, NOOP, { flush: "post" });
       const ob = new MutationObserver(setVars);
       ob.observe(instance.subTree.el.parentNode, { childList: true });
       onUnmounted(() => ob.disconnect());
@@ -11511,6 +11559,8 @@ Expected function or array of functions, received type ${typeof value}.`
           this._update();
         }
         if (shouldReflect) {
+          const ob = this._ob;
+          ob && ob.disconnect();
           if (val === true) {
             this.setAttribute(hyphenate(key), "");
           } else if (typeof val === "string" || typeof val === "number") {
@@ -11518,6 +11568,7 @@ Expected function or array of functions, received type ${typeof value}.`
           } else if (!val) {
             this.removeAttribute(hyphenate(key));
           }
+          ob && ob.observe(this, { attributes: true });
         }
       }
     }
@@ -12491,12 +12542,13 @@ Make sure to use the production build (*.prod.js) when deploying for production.
       loc: locStub
     };
   }
-  function createCacheExpression(index, value, needPauseTracking = false) {
+  function createCacheExpression(index, value, needPauseTracking = false, inVOnce = false) {
     return {
       type: 20,
       index,
       value,
       needPauseTracking,
+      inVOnce,
       needArraySpread: false,
       loc: locStub
     };
@@ -14730,11 +14782,12 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         identifier.hoisted = exp;
         return identifier;
       },
-      cache(exp, isVNode = false) {
+      cache(exp, isVNode = false, inVOnce = false) {
         const cacheExp = createCacheExpression(
           context.cached.length,
           exp,
-          isVNode
+          isVNode,
+          inVOnce
         );
         context.cached.push(cacheExp);
         return cacheExp;
@@ -15433,7 +15486,9 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     push(`_cache[${node.index}] || (`);
     if (needPauseTracking) {
       indent();
-      push(`${helper(SET_BLOCK_TRACKING)}(-1),`);
+      push(`${helper(SET_BLOCK_TRACKING)}(-1`);
+      if (node.inVOnce) push(`, true`);
+      push(`),`);
       newline();
       push(`(`);
     }
@@ -15490,12 +15545,14 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         context
       );
     } else if (node.type === 1) {
+      const memo = findDir(node, "memo");
       for (let i = 0; i < node.props.length; i++) {
         const dir = node.props[i];
         if (dir.type === 7 && dir.name !== "for") {
           const exp = dir.exp;
           const arg = dir.arg;
-          if (exp && exp.type === 4 && !(dir.name === "on" && arg)) {
+          if (exp && exp.type === 4 && !(dir.name === "on" && arg) && // key has been processed in transformFor(vMemo + vFor)
+          !(memo && arg && arg.type === 4 && arg.content === "key")) {
             dir.exp = processExpression(
               exp,
               context,
@@ -15823,10 +15880,11 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         const isTemplate = isTemplateNode(node);
         const memo = findDir(node, "memo");
         const keyProp = findProp(node, `key`, false, true);
-        if (keyProp && keyProp.type === 7 && !keyProp.exp) {
+        const isDirKey = keyProp && keyProp.type === 7;
+        if (isDirKey && !keyProp.exp) {
           transformBindShorthand(keyProp);
         }
-        const keyExp = keyProp && (keyProp.type === 6 ? keyProp.value ? createSimpleExpression(keyProp.value.content, true) : void 0 : keyProp.exp);
+        let keyExp = keyProp && (keyProp.type === 6 ? keyProp.value ? createSimpleExpression(keyProp.value.content, true) : void 0 : keyProp.exp);
         const keyProperty = keyProp && keyExp ? createObjectProperty(`key`, keyExp) : null;
         const isStableFragment = forNode.source.type === 4 && forNode.source.constType > 0;
         const fragmentFlag = isStableFragment ? 64 : keyProp ? 128 : 256;
@@ -17023,8 +17081,8 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         if (cur.codegenNode) {
           cur.codegenNode = context.cache(
             cur.codegenNode,
+            true,
             true
-            /* isVNode */
           );
         }
       };
@@ -18319,6 +18377,7 @@ function build(options, exports) {
                     instance.$created = component.created || function () { };
                     instance.$mounted = component.mounted || function () { };
                     instance.$unmounted = component.unmounted || function () { };
+                    instance.$delayClose = component.delayClose || 0;
                     _attachContainer(instance);
                 }
 
@@ -18415,111 +18474,133 @@ function build(options, exports) {
                             currentProxy = instance.$.proxy;
                         }
 
+                        var p = Promise.resolve();
                         if (!this.active || this.active.$view != url || !_options.reuseContainerActiveView()) {
-                            this.close();
+                            p = this.close();
                         }
 
                         var self = this;
 
-                        params = generateParametersFromRoute(params);
-                        _parseQueryString(params);
-                        if (_options.reuseContainerActiveView() && this.active?.$view == url) {
-                            var reuseComponentFunc = function (container) {
-                                var p = Promise.resolve();
-                                if (!container || !container.active) {
-                                    return p;
-                                }
+                        return p.then(function () {
+                            var p = Promise.resolve();
+                            params = generateParametersFromRoute(params);
+                            _parseQueryString(params);
+                            if (_options.reuseContainerActiveView() && self.active?.$view == url) {
+                                var reuseComponentFunc = function (container) {
+                                    if (!container || !container.active) {
+                                        return p;
+                                    }
 
-                                if (_options.callUnmountedWhenReuseContainerActiveView(container.active.$view)) {
-                                    p = p.then(function () {
-                                        var val = container.active.$unmounted();
-                                        if (val instanceof Promise) {
-                                            return val;
-                                        } else {
-                                            return Promise.resolve();
-                                        }
-                                    });
-                                }
-                                p = p.then(function () {
-                                    var initData = container.active.$data();
-                                    if (_options.resetDataWhenReuseContainerActiveView()) {
-                                        _combineObject(initData, container.active);
+                                    if (_options.callUnmountedWhenReuseContainerActiveView(container.active.$view)) {
+                                        p = p.then(function () {
+                                            var val = container.active.$unmounted();
+                                            if (val instanceof Promise) {
+                                                return val;
+                                            } else {
+                                                return Promise.resolve();
+                                            }
+                                        });
                                     }
-                                    _combineObject(params, container.active);
-                                    return Promise.resolve();
-                                });
-                                if (_options.callCreatedWhenReuseContainerActiveView(container.active.$view)) {
-                                    p = p.then(function () {
-                                        var val = container.active.$created();
-                                        if (val instanceof Promise) {
-                                            return val;
-                                        } else {
-                                            return Promise.resolve();
-                                        }
-                                    });
-                                }
-                                if (_options.callMountedWhenReuseContainerActiveView(container.active.$view)) {
                                     p = p.then(function () {
-                                        var val = container.active.$mounted();
-                                        if (val instanceof Promise) {
-                                            return val;
-                                        } else {
-                                            return Promise.resolve();
+                                        var initData = container.active.$data();
+                                        if (_options.resetDataWhenReuseContainerActiveView()) {
+                                            _combineObject(initData, container.active);
                                         }
+                                        _combineObject(params, container.active);
+                                        return Promise.resolve();
                                     });
-                                }
+                                    if (_options.callCreatedWhenReuseContainerActiveView(container.active.$view)) {
+                                        p = p.then(function () {
+                                            var val = container.active.$created();
+                                            if (val instanceof Promise) {
+                                                return val;
+                                            } else {
+                                                return Promise.resolve();
+                                            }
+                                        });
+                                    }
+                                    if (_options.callMountedWhenReuseContainerActiveView(container.active.$view)) {
+                                        p = p.then(function () {
+                                            var val = container.active.$mounted();
+                                            if (val instanceof Promise) {
+                                                return val;
+                                            } else {
+                                                return Promise.resolve();
+                                            }
+                                        });
+                                    }
 
-                                if (container.active.$containers && container.active.$containers.length) {
-                                    for (var i = 0; i < container.active.$containers.length; ++i) {
-                                        reuseComponentFunc(container.active.$containers[i]);
+                                    if (container.active.$containers && container.active.$containers.length) {
+                                        for (var i = 0; i < container.active.$containers.length; ++i) {
+                                            reuseComponentFunc(container.active.$containers[i]);
+                                        }
                                     }
-                                }
 
-                                return p.then(function () { container.active.$forceUpdate(); return Promise.resolve(container.active) });
+                                    return p.then(function () { container.active.$forceUpdate(); return Promise.resolve(container.active) });
 
+                                }
+                                return Promise.resolve(reuseComponentFunc(self));
                             }
-                            return Promise.resolve(reuseComponentFunc(this));
-                        }
 
-                        var _result;
-                        var retryLeft = 20;
-                        var buildRetryPromise = function () {
-                            return new Promise(function (res, rej) {
-                                var active = _result.mount(self.selector);
-                                if (active) {
-                                    self.active = active;
-                                    return Promise.resolve(active);
-                                }
+                            var _result;
+                            var retryLeft = 20;
+                            var buildRetryPromise = function () {
+                                var final = new Promise(function (res, rej) {
+                                    var active = _result.mount(self.selector);
+                                    if (active) {
+                                        self.active = active;
+                                        return Promise.resolve(active);
+                                    }
 
-                                if (--retryLeft > 0) {
-                                    return sleep(50).then(function () {
-                                        return buildRetryPromise();
-                                    });
-                                } else {
-                                    return Promise.reject('Mount component to ' + self.selector + ' failed');
-                                }
-                            });
-                        };
+                                    if (--retryLeft > 0) {
+                                        return sleep(50).then(function () {
+                                            return buildRetryPromise();
+                                        });
+                                    } else {
+                                        return Promise.reject('Mount component to ' + self.selector + ' failed');
+                                    }
+                                });
+                                return final;
+                            };
 
-                        return _buildApp(url, params, mobile, currentProxy).then(function (result) {
-                            _result = result;
-                            return buildRetryPromise();
+                            return _buildApp(url, params, mobile, currentProxy).then(function (result) {
+                                _result = result;
+                                return buildRetryPromise();
+                            });
                         });
                     },
-                    close: function (recurse = true) {
-                        function liftClose(container) {
+                    close: async function (recurse = true) {
+                        async function liftClose(container) {
                             if (container.active && container.active.$) {
                                 if (recurse) {
                                     for (var i = 0; i < container.active.$containers.length; ++i) {
                                         liftClose(container.active.$containers[i]);
                                     }
                                 }
-                                container.active.$.appContext.app.unmount();
+
+                                if (container.active.$delayClose) {
+                                    console.log(container.active.$el);
+                                    try {
+                                        if (container.active.$el && container.active.$el.nextElementSibling) {
+                                            container.active.$el.nextElementSibling?.classList?.add('_pome-ui-closing');
+                                        }
+                                    } catch (ex) {
+                                        console.warn(ex);
+                                    }
+                                    console.log(`sleeping ${container.active.$delayClose}ms...`);
+                                    await sleep(container.active.$delayClose);
+                                }
+
+                                try {
+                                    container.active.$.appContext.app.unmount();
+                                } catch (ex) {
+                                    console.warn(ex);
+                                }
                                 container.active = null;
                             }
                         }
-
-                        liftClose(this);
+                        
+                        await liftClose(this);
                     },
                     active: null
                 };
@@ -19055,16 +19136,17 @@ function build(options, exports) {
                         var val = params[fields[i]];
                         exports.root()[fields[i]] = val;
                     }
-
-                    exports.root().$containers[0].open(route.view, params);
-                    var promise = Promise.resolve();
-                    if (typeof exports.root().$.$onUpdating == 'function') {
-                        var result = exports.root().$.$onUpdating.call(exports.root());
-                        if (result instanceof Promise) {
-                            promise = result;
+                    
+                    return exports.root().$containers[0].open(route.view, params).then(function () {
+                        var promise = Promise.resolve();
+                        if (typeof exports.root().$.$onUpdating == 'function') {
+                            var result = exports.root().$.$onUpdating.call(exports.root());
+                            if (result instanceof Promise) {
+                                promise = promise.then(() => result);
+                            }
                         }
-                    }
-                    return promise;
+                        return promise;
+                    });
                 }
 
                 exports.root().$.appContext.app.unmount();