@vue/runtime-dom 3.6.0-alpha.2 → 3.6.0-alpha.4

package/dist/runtime-dom.cjs.prod.js

@@ -1,5 +1,5 @@
 /**
-* @vue/runtime-dom v3.6.0-alpha.2
+* @vue/runtime-dom v3.6.0-alpha.4
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -216,11 +216,11 @@ function resolveTransitionProps(rawProps) {
       const resolve = () => finishLeave(el, done);
       addTransitionClass(el, leaveFromClass);
       if (!el._enterCancelled) {
-        forceReflow();
+        forceReflow(el);
         addTransitionClass(el, leaveActiveClass);
       } else {
         addTransitionClass(el, leaveActiveClass);
-        forceReflow();
+        forceReflow(el);
       }
       nextFrame(() => {
         if (!el._isLeaving) {
@@ -343,7 +343,7 @@ function getTransitionInfo(el, expectedType) {
     type = timeout > 0 ? transitionTimeout > animationTimeout ? TRANSITION : ANIMATION : null;
     propCount = type ? type === TRANSITION ? transitionDurations.length : animationDurations.length : 0;
   }
-  const hasTransform = type === TRANSITION && /\b(transform|all)(,|$)/.test(
+  const hasTransform = type === TRANSITION && /\b(?:transform|all)(?:,|$)/.test(
     getStyleProperties(`${TRANSITION}Property`).toString()
   );
   return {
@@ -363,8 +363,9 @@ function toMs(s) {
   if (s === "auto") return 0;
   return Number(s.slice(0, -1).replace(",", ".")) * 1e3;
 }
-function forceReflow() {
-  return document.body.offsetHeight;
+function forceReflow(el) {
+  const targetDocument = el ? el.ownerDocument : document;
+  return targetDocument.body.offsetHeight;
 }
 
 function patchClass(el, value, isSVG) {
@@ -384,6 +385,8 @@ function patchClass(el, value, isSVG) {
 const vShowOriginalDisplay = Symbol("_vod");
 const vShowHidden = Symbol("_vsh");
 const vShow = {
+  // used for prop mismatch check during hydration
+  name: "show",
   beforeMount(el, { value }, { transition }) {
     el[vShowOriginalDisplay] = el.style.display === "none" ? "" : el.style.display;
     if (transition && value) {
@@ -434,7 +437,7 @@ function useCssVars(getter) {
   return;
 }
 
-const displayRE = /(^|;)\s*display\s*:/;
+const displayRE = /(?:^|;)\s*display\s*:/;
 function patchStyle(el, prev, next) {
   const style = el.style;
   const isCssString = shared.isString(next);
@@ -715,11 +718,10 @@ function shouldSetAsProp(el, key, value, isSVG) {
 }
 
 const REMOVAL = {};
-/*! #__NO_SIDE_EFFECTS__ */
 // @__NO_SIDE_EFFECTS__
 function defineCustomElement(options, extraOptions, _createApp) {
-  const Comp = runtimeCore.defineComponent(options, extraOptions);
-  if (shared.isPlainObject(Comp)) shared.extend(Comp, extraOptions);
+  let Comp = runtimeCore.defineComponent(options, extraOptions);
+  if (shared.isPlainObject(Comp)) Comp = shared.extend({}, Comp, extraOptions);
   class VueCustomElement extends VueElement {
     constructor(initialProps) {
       super(Comp, initialProps, _createApp);
@@ -728,18 +730,14 @@ function defineCustomElement(options, extraOptions, _createApp) {
   VueCustomElement.def = Comp;
   return VueCustomElement;
 }
-/*! #__NO_SIDE_EFFECTS__ */
-const defineSSRCustomElement = /* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
+const defineSSRCustomElement = (/* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
   return /* @__PURE__ */ defineCustomElement(options, extraOptions, createSSRApp);
-};
+});
 const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
 };
-class VueElement extends BaseClass {
-  constructor(_def, _props = {}, _createApp = createApp) {
+class VueElementBase extends BaseClass {
+  constructor(def, props = {}, createAppFn) {
     super();
-    this._def = _def;
-    this._props = _props;
-    this._createApp = _createApp;
     this._isVueCE = true;
     /**
      * @internal
@@ -749,20 +747,26 @@ class VueElement extends BaseClass {
      * @internal
      */
     this._app = null;
-    /**
-     * @internal
-     */
-    this._nonce = this._def.nonce;
     this._connected = false;
     this._resolved = false;
     this._numberProps = null;
     this._styleChildren = /* @__PURE__ */ new WeakSet();
+    this._patching = false;
+    this._dirty = false;
     this._ob = null;
-    if (this.shadowRoot && _createApp !== createApp) {
+    this._def = def;
+    this._props = props;
+    this._createApp = createAppFn;
+    this._nonce = def.nonce;
+    if (this._needsHydration()) {
       this._root = this.shadowRoot;
     } else {
-      if (_def.shadowRoot !== false) {
-        this.attachShadow({ mode: "open" });
+      if (def.shadowRoot !== false) {
+        this.attachShadow(
+          shared.extend({}, def.shadowRootOptions, {
+            mode: "open"
+          })
+        );
         this._root = this.shadowRoot;
       } else {
         this._root = this;
@@ -777,14 +781,14 @@ class VueElement extends BaseClass {
     this._connected = true;
     let parent = this;
     while (parent = parent && (parent.parentNode || parent.host)) {
-      if (parent instanceof VueElement) {
+      if (parent instanceof VueElementBase) {
         this._parent = parent;
         break;
       }
     }
     if (!this._instance) {
       if (this._resolved) {
-        this._mount(this._def);
+        this._mountComponent(this._def);
       } else {
         if (parent && parent._pendingResolve) {
           this._pendingResolve = parent._pendingResolve.then(() => {
@@ -797,8 +801,24 @@ class VueElement extends BaseClass {
       }
     }
   }
+  disconnectedCallback() {
+    this._connected = false;
+    runtimeCore.nextTick(() => {
+      if (!this._connected) {
+        if (this._ob) {
+          this._ob.disconnect();
+          this._ob = null;
+        }
+        this._unmount();
+        if (this._teleportTargets) {
+          this._teleportTargets.clear();
+          this._teleportTargets = void 0;
+        }
+      }
+    });
+  }
   _setParent(parent = this._parent) {
-    if (parent) {
+    if (parent && this._instance) {
       this._instance.parent = parent._instance;
       this._inheritParentContext(parent);
     }
@@ -811,19 +831,10 @@ class VueElement extends BaseClass {
       );
     }
   }
-  disconnectedCallback() {
-    this._connected = false;
-    runtimeCore.nextTick(() => {
-      if (!this._connected) {
-        if (this._ob) {
-          this._ob.disconnect();
-          this._ob = null;
-        }
-        this._app && this._app.unmount();
-        if (this._instance) this._instance.ce = void 0;
-        this._app = this._instance = null;
-      }
-    });
+  _processMutations(mutations) {
+    for (const m of mutations) {
+      this._setAttr(m.attributeName);
+    }
   }
   /**
    * resolve inner component definition (handle possible async component)
@@ -835,13 +846,9 @@ class VueElement extends BaseClass {
     for (let i = 0; i < this.attributes.length; i++) {
       this._setAttr(this.attributes[i].name);
     }
-    this._ob = new MutationObserver((mutations) => {
-      for (const m of mutations) {
-        this._setAttr(m.attributeName);
-      }
-    });
+    this._ob = new MutationObserver(this._processMutations.bind(this));
     this._ob.observe(this, { attributes: true });
-    const resolve = (def, isAsync = false) => {
+    const resolve = (def) => {
       this._resolved = true;
       this._pendingResolve = void 0;
       const { props, styles } = def;
@@ -862,26 +869,25 @@ class VueElement extends BaseClass {
       if (this.shadowRoot) {
         this._applyStyles(styles);
       }
-      this._mount(def);
+      this._mountComponent(def);
     };
     const asyncDef = this._def.__asyncLoader;
     if (asyncDef) {
+      const { configureApp } = this._def;
       this._pendingResolve = asyncDef().then((def) => {
-        def.configureApp = this._def.configureApp;
-        resolve(this._def = def, true);
+        def.configureApp = configureApp;
+        this._def = def;
+        resolve(def);
       });
     } else {
       resolve(this._def);
     }
   }
-  _mount(def) {
-    this._app = this._createApp(def);
-    this._inheritParentContext();
-    if (def.configureApp) {
-      def.configureApp(this._app);
-    }
-    this._app._ceVNode = this._createVNode();
-    this._app.mount(this._root);
+  _mountComponent(def) {
+    this._mount(def);
+    this._processExposed();
+  }
+  _processExposed() {
     const exposed = this._instance && this._instance.exposed;
     if (!exposed) return;
     for (const key in exposed) {
@@ -893,6 +899,25 @@ class VueElement extends BaseClass {
       }
     }
   }
+  _processInstance() {
+    this._instance.ce = this;
+    this._instance.isCE = true;
+    const dispatch = (event, args) => {
+      this.dispatchEvent(
+        new CustomEvent(
+          event,
+          shared.isPlainObject(args[0]) ? shared.extend({ detail: args }, args[0]) : { detail: args }
+        )
+      );
+    };
+    this._instance.emit = (event, ...args) => {
+      dispatch(event, args);
+      if (shared.hyphenate(event) !== event) {
+        dispatch(shared.hyphenate(event), args);
+      }
+    };
+    this._setParent();
+  }
   _resolveProps(def) {
     const { props } = def;
     const declaredPropKeys = shared.isArray(props) ? props : Object.keys(props || {});
@@ -907,7 +932,7 @@ class VueElement extends BaseClass {
           return this._getProp(key);
         },
         set(val) {
-          this._setProp(key, val, true, true);
+          this._setProp(key, val, true, !this._patching);
         }
       });
     }
@@ -933,11 +958,12 @@ class VueElement extends BaseClass {
    */
   _setProp(key, val, shouldReflect = true, shouldUpdate = false) {
     if (val !== this._props[key]) {
+      this._dirty = true;
       if (val === REMOVAL) {
         delete this._props[key];
       } else {
         this._props[key] = val;
-        if (key === "key" && this._app) {
+        if (key === "key" && this._app && this._app._ceVNode) {
           this._app._ceVNode.key = val;
         }
       }
@@ -946,7 +972,10 @@ class VueElement extends BaseClass {
       }
       if (shouldReflect) {
         const ob = this._ob;
-        ob && ob.disconnect();
+        if (ob) {
+          this._processMutations(ob.takeRecords());
+          ob.disconnect();
+        }
         if (val === true) {
           this.setAttribute(shared.hyphenate(key), "");
         } else if (typeof val === "string" || typeof val === "number") {
@@ -958,41 +987,6 @@ class VueElement extends BaseClass {
       }
     }
   }
-  _update() {
-    const vnode = this._createVNode();
-    if (this._app) vnode.appContext = this._app._context;
-    render(vnode, this._root);
-  }
-  _createVNode() {
-    const baseProps = {};
-    if (!this.shadowRoot) {
-      baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
-    }
-    const vnode = runtimeCore.createVNode(this._def, shared.extend(baseProps, this._props));
-    if (!this._instance) {
-      vnode.ce = (instance) => {
-        this._instance = instance;
-        instance.ce = this;
-        instance.isCE = true;
-        const dispatch = (event, args) => {
-          this.dispatchEvent(
-            new CustomEvent(
-              event,
-              shared.isPlainObject(args[0]) ? shared.extend({ detail: args }, args[0]) : { detail: args }
-            )
-          );
-        };
-        instance.emit = (event, ...args) => {
-          dispatch(event, args);
-          if (shared.hyphenate(event) !== event) {
-            dispatch(shared.hyphenate(event), args);
-          }
-        };
-        this._setParent();
-      };
-    }
-    return vnode;
-  }
   _applyStyles(styles, owner) {
     if (!styles) return;
     if (owner) {
@@ -1025,13 +1019,15 @@ class VueElement extends BaseClass {
    * Only called when shadowRoot is false
    */
   _renderSlots() {
-    const outlets = (this._teleportTarget || this).querySelectorAll("slot");
+    const outlets = this._getSlots();
     const scopeId = this._instance.type.__scopeId;
+    const slotReplacements = /* @__PURE__ */ new Map();
     for (let i = 0; i < outlets.length; i++) {
       const o = outlets[i];
       const slotName = o.getAttribute("name") || "default";
       const content = this._slots[slotName];
       const parent = o.parentNode;
+      const replacementNodes = [];
       if (content) {
         for (const n of content) {
           if (scopeId && n.nodeType === 1) {
@@ -1044,12 +1040,36 @@ class VueElement extends BaseClass {
             }
           }
           parent.insertBefore(n, o);
+          replacementNodes.push(n);
         }
       } else {
-        while (o.firstChild) parent.insertBefore(o.firstChild, o);
+        while (o.firstChild) {
+          const child = o.firstChild;
+          parent.insertBefore(child, o);
+          replacementNodes.push(child);
+        }
       }
       parent.removeChild(o);
+      slotReplacements.set(o, replacementNodes);
     }
+    this._updateSlotNodes(slotReplacements);
+  }
+  /**
+   * @internal
+   */
+  _getSlots() {
+    const roots = [this];
+    if (this._teleportTargets) {
+      roots.push(...this._teleportTargets);
+    }
+    const slots = /* @__PURE__ */ new Set();
+    for (const root of roots) {
+      const found = root.querySelectorAll("slot");
+      for (let i = 0; i < found.length; i++) {
+        slots.add(found[i]);
+      }
+    }
+    return Array.from(slots);
   }
   /**
    * @internal
@@ -1057,15 +1077,85 @@ class VueElement extends BaseClass {
   _injectChildStyle(comp) {
     this._applyStyles(comp.styles, comp);
   }
+  /**
+   * @internal
+   */
+  _beginPatch() {
+    this._patching = true;
+    this._dirty = false;
+  }
+  /**
+   * @internal
+   */
+  _endPatch() {
+    this._patching = false;
+    if (this._dirty && this._instance) {
+      this._update();
+    }
+  }
   /**
    * @internal
    */
   _removeChildStyle(comp) {
   }
 }
+class VueElement extends VueElementBase {
+  constructor(def, props = {}, createAppFn = createApp) {
+    super(def, props, createAppFn);
+  }
+  _needsHydration() {
+    if (this.shadowRoot && this._createApp !== createApp) {
+      return true;
+    }
+    return false;
+  }
+  _mount(def) {
+    this._app = this._createApp(def);
+    this._inheritParentContext();
+    if (def.configureApp) {
+      def.configureApp(this._app);
+    }
+    this._app._ceVNode = this._createVNode();
+    this._app.mount(this._root);
+  }
+  _update() {
+    if (!this._app) return;
+    const vnode = this._createVNode();
+    vnode.appContext = this._app._context;
+    render(vnode, this._root);
+  }
+  _unmount() {
+    if (this._app) {
+      this._app.unmount();
+    }
+    if (this._instance && this._instance.ce) {
+      this._instance.ce = void 0;
+    }
+    this._app = this._instance = null;
+  }
+  /**
+   * Only called when shadowRoot is false
+   */
+  _updateSlotNodes(replacements) {
+  }
+  _createVNode() {
+    const baseProps = {};
+    if (!this.shadowRoot) {
+      baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
+    }
+    const vnode = runtimeCore.createVNode(this._def, shared.extend(baseProps, this._props));
+    if (!this._instance) {
+      vnode.ce = (instance) => {
+        this._instance = instance;
+        this._processInstance();
+      };
+    }
+    return vnode;
+  }
+}
 function useHost(caller) {
-  const instance = runtimeCore.getCurrentInstance();
-  const el = instance && instance.ce;
+  const { hasInstance, value } = runtimeCore.useInstanceOption("ce", true);
+  const el = value;
   if (el) {
     return el;
   }
@@ -1078,11 +1168,11 @@ function useShadowRoot() {
 
 function useCssModule(name = "$style") {
   {
-    const instance = runtimeCore.getCurrentInstance();
-    if (!instance) {
+    const { hasInstance, value: type } = runtimeCore.useInstanceOption("type", true);
+    if (!hasInstance) {
       return shared.EMPTY_OBJ;
     }
-    const modules = instance.type.__cssModules;
+    const modules = type.__cssModules;
     if (!modules) {
       return shared.EMPTY_OBJ;
     }
@@ -1126,26 +1216,13 @@ const TransitionGroupImpl = /* @__PURE__ */ decorate({
         prevChildren = [];
         return;
       }
-      prevChildren.forEach(callPendingCbs);
+      prevChildren.forEach((vnode) => callPendingCbs(vnode.el));
       prevChildren.forEach(recordPosition);
       const movedChildren = prevChildren.filter(applyTranslation);
-      forceReflow();
+      forceReflow(instance.vnode.el);
       movedChildren.forEach((c) => {
         const el = c.el;
-        const style = el.style;
-        addTransitionClass(el, moveClass);
-        style.transform = style.webkitTransform = style.transitionDuration = "";
-        const cb = el[moveCbKey] = (e) => {
-          if (e && e.target !== el) {
-            return;
-          }
-          if (!e || /transform$/.test(e.propertyName)) {
-            el.removeEventListener("transitionend", cb);
-            el[moveCbKey] = null;
-            removeTransitionClass(el, moveClass);
-          }
-        };
-        el.addEventListener("transitionend", cb);
+        handleMovedChildren(el, moveClass);
       });
       prevChildren = [];
     });
@@ -1168,10 +1245,10 @@ const TransitionGroupImpl = /* @__PURE__ */ decorate({
                 instance
               )
             );
-            positionMap.set(
-              child,
-              child.el.getBoundingClientRect()
-            );
+            positionMap.set(child, {
+              left: child.el.offsetLeft,
+              top: child.el.offsetTop
+            });
           }
         }
       }
@@ -1190,8 +1267,7 @@ const TransitionGroupImpl = /* @__PURE__ */ decorate({
   }
 });
 const TransitionGroup = TransitionGroupImpl;
-function callPendingCbs(c) {
-  const el = c.el;
+function callPendingCbs(el) {
   if (el[moveCbKey]) {
     el[moveCbKey]();
   }
@@ -1200,19 +1276,30 @@ function callPendingCbs(c) {
   }
 }
 function recordPosition(c) {
-  newPositionMap.set(c, c.el.getBoundingClientRect());
+  newPositionMap.set(c, {
+    left: c.el.offsetLeft,
+    top: c.el.offsetTop
+  });
 }
 function applyTranslation(c) {
-  const oldPos = positionMap.get(c);
-  const newPos = newPositionMap.get(c);
+  if (baseApplyTranslation(
+    positionMap.get(c),
+    newPositionMap.get(c),
+    c.el
+  )) {
+    return c;
+  }
+}
+function baseApplyTranslation(oldPos, newPos, el) {
   const dx = oldPos.left - newPos.left;
   const dy = oldPos.top - newPos.top;
   if (dx || dy) {
-    const s = c.el.style;
+    const s = el.style;
     s.transform = s.webkitTransform = `translate(${dx}px,${dy}px)`;
     s.transitionDuration = "0s";
-    return c;
+    return true;
   }
+  return false;
 }
 function hasCSSTransform(el, root, moveClass) {
   const clone = el.cloneNode();
@@ -1230,6 +1317,22 @@ function hasCSSTransform(el, root, moveClass) {
   container.removeChild(clone);
   return hasTransform;
 }
+const handleMovedChildren = (el, moveClass) => {
+  const style = el.style;
+  addTransitionClass(el, moveClass);
+  style.transform = style.webkitTransform = style.transitionDuration = "";
+  const cb = el[moveCbKey] = (e) => {
+    if (e && e.target !== el) {
+      return;
+    }
+    if (!e || e.propertyName.endsWith("transform")) {
+      el.removeEventListener("transitionend", cb);
+      el[moveCbKey] = null;
+      removeTransitionClass(el, moveClass);
+    }
+  };
+  el.addEventListener("transitionend", cb);
+};
 
 const getModelAssigner = (vnode) => {
   const fn = vnode.props["onUpdate:modelValue"] || false;
@@ -1265,21 +1368,21 @@ const vModelText = {
     vModelTextUpdate(el, oldValue, value, trim, number, lazy);
   }
 };
+function castValue(value, trim, number) {
+  if (trim) value = value.trim();
+  if (number) value = shared.looseToNumber(value);
+  return value;
+}
 const vModelTextInit = (el, trim, number, lazy, set) => {
   addEventListener(el, lazy ? "change" : "input", (e) => {
     if (e.target.composing) return;
-    let domValue = el.value;
-    if (trim) {
-      domValue = domValue.trim();
-    }
-    if (number || el.type === "number") {
-      domValue = shared.looseToNumber(domValue);
-    }
-    (0, el[assignKey])(domValue);
+    (0, el[assignKey])(
+      castValue(el.value, trim, number || el.type === "number")
+    );
   });
-  if (trim) {
+  if (trim || number) {
     addEventListener(el, "change", () => {
-      el.value = el.value.trim();
+      el.value = castValue(el.value, trim, number || el.type === "number");
     });
   }
   if (!lazy) {
@@ -1559,13 +1662,13 @@ const modifierGuards = {
 const withModifiers = (fn, modifiers) => {
   const cache = fn._withMods || (fn._withMods = {});
   const cacheKey = modifiers.join(".");
-  return cache[cacheKey] || (cache[cacheKey] = (event, ...args) => {
+  return cache[cacheKey] || (cache[cacheKey] = ((event, ...args) => {
     for (let i = 0; i < modifiers.length; i++) {
       const guard = modifierGuards[modifiers[i]];
       if (guard && guard(event, modifiers)) return;
     }
     return fn(event, ...args);
-  });
+  }));
 };
 const keyNames = {
   esc: "escape",
@@ -1579,7 +1682,7 @@ const keyNames = {
 const withKeys = (fn, modifiers) => {
   const cache = fn._withKeys || (fn._withKeys = {});
   const cacheKey = modifiers.join(".");
-  return cache[cacheKey] || (cache[cacheKey] = (event) => {
+  return cache[cacheKey] || (cache[cacheKey] = ((event) => {
     if (!("key" in event)) {
       return;
     }
@@ -1589,7 +1692,7 @@ const withKeys = (fn, modifiers) => {
     )) {
       return fn(event);
     }
-  });
+  }));
 };
 
 const rendererOptions = /* @__PURE__ */ shared.extend({ patchProp }, nodeOps);
@@ -1603,13 +1706,13 @@ function ensureHydrationRenderer() {
   enabledHydration = true;
   return renderer;
 }
-const render = (...args) => {
+const render = ((...args) => {
   ensureRenderer().render(...args);
-};
-const hydrate = (...args) => {
+});
+const hydrate = ((...args) => {
   ensureHydrationRenderer().hydrate(...args);
-};
-const createApp = (...args) => {
+});
+const createApp = ((...args) => {
   const app = ensureRenderer().createApp(...args);
   const { mount } = app;
   app.mount = (containerOrSelector) => {
@@ -1630,8 +1733,8 @@ const createApp = (...args) => {
     return proxy;
   };
   return app;
-};
-const createSSRApp = (...args) => {
+});
+const createSSRApp = ((...args) => {
   const app = ensureHydrationRenderer().createApp(...args);
   const { mount } = app;
   app.mount = (containerOrSelector) => {
@@ -1641,7 +1744,7 @@ const createSSRApp = (...args) => {
     }
   };
   return app;
-};
+});
 function resolveRootNamespace(container) {
   if (container instanceof SVGElement) {
     return "svg";
@@ -1669,12 +1772,15 @@ const initDirectivesForSSR = () => {
 exports.Transition = Transition;
 exports.TransitionGroup = TransitionGroup;
 exports.VueElement = VueElement;
+exports.VueElementBase = VueElementBase;
 exports.createApp = createApp;
 exports.createSSRApp = createSSRApp;
 exports.defineCustomElement = defineCustomElement;
 exports.defineSSRCustomElement = defineSSRCustomElement;
 exports.hydrate = hydrate;
 exports.initDirectivesForSSR = initDirectivesForSSR;
+exports.nodeOps = nodeOps;
+exports.patchProp = patchProp;
 exports.render = render;
 exports.useCssModule = useCssModule;
 exports.useCssVars = useCssVars;