@vue/compat 3.6.0-alpha.3 → 3.6.0-alpha.4

package/dist/vue.runtime.global.js

@@ -1,5 +1,5 @@
 /**
-* @vue/compat v3.6.0-alpha.3
+* @vue/compat v3.6.0-alpha.4
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -84,6 +84,9 @@ var Vue = (function () {
       return s;
     }
   );
+  const getModifierPropName = (name) => {
+    return `${name === "modelValue" || name === "model-value" ? "model" : name}Modifiers${name === "model" ? "$" : ""}`;
+  };
   const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
   const invokeArrayFns = (fns, ...arg) => {
     for (let i = 0; i < fns.length; i++) {
@@ -2914,7 +2917,12 @@ var Vue = (function () {
     newComp = normalizeClassComponent(newComp);
     updateComponentDef(record.initialDef, newComp);
     const instances = [...record.instances];
-    if (newComp.__vapor) {
+    if (newComp.__vapor && !instances.some((i) => i.ceReload)) {
+      for (const instance of instances) {
+        if (instance.root && instance.root.ce && instance !== instance.root) {
+          instance.root.ce._removeChildStyle(instance.type);
+        }
+      }
       for (const instance of instances) {
         instance.hmrReload(newComp);
       }
@@ -7632,7 +7640,7 @@ If this is a native custom element, make sure to exclude it from component resol
         return vm;
       }
     }
-    Vue.version = `2.6.14-compat:${"3.6.0-alpha.3"}`;
+    Vue.version = `2.6.14-compat:${"3.6.0-alpha.4"}`;
     Vue.config = singletonApp.config;
     Vue.use = (plugin, ...options) => {
       if (plugin && isFunction(plugin.install)) {
@@ -10809,7 +10817,7 @@ app.use(vaporInteropPlugin)
     return res;
   }
   const getModelModifiers = (props, modelName, getter) => {
-    return modelName === "modelValue" || modelName === "model-value" ? getter(props, "modelModifiers") : getter(props, `${modelName}Modifiers`) || getter(props, `${camelize(modelName)}Modifiers`) || getter(props, `${hyphenate(modelName)}Modifiers`);
+    return getter(props, getModifierPropName(modelName)) || getter(props, `${camelize(modelName)}Modifiers`) || getter(props, `${hyphenate(modelName)}Modifiers`);
   };
 
   function emit(instance, event, ...rawArgs) {
@@ -12351,6 +12359,25 @@ Component that was made reactive: `,
       simpleSetCurrentInstance(instance);
     }
   };
+  const internalOptions = ["ce", "type"];
+  const useInstanceOption = (key, silent = false) => {
+    const instance = getCurrentGenericInstance();
+    if (!instance) {
+      if (!silent) {
+        warn$1(`useInstanceOption called without an active component instance.`);
+      }
+      return { hasInstance: false, value: void 0 };
+    }
+    if (!internalOptions.includes(key)) {
+      {
+        warn$1(
+          `useInstanceOption only accepts  ${internalOptions.map((k) => `'${k}'`).join(", ")} as key, got '${key}'.`
+        );
+      }
+      return { hasInstance: true, value: void 0 };
+    }
+    return { hasInstance: true, value: instance[key] };
+  };
 
   const emptyAppContext = createAppContext();
   let uid = 0;
@@ -12995,7 +13022,7 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.6.0-alpha.3";
+  const version = "3.6.0-alpha.4";
   const warn = warn$1 ;
   const ErrorTypeStrings = ErrorTypeStrings$1 ;
   const devtools = devtools$1 ;
@@ -13907,12 +13934,9 @@ Expected function or array of functions, received type ${typeof value}.`
   });
   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
@@ -13922,28 +13946,23 @@ Expected function or array of functions, received type ${typeof value}.`
        * @internal
        */
       this._app = null;
-      /**
-       * @internal
-       */
-      this._nonce = this._def.nonce;
       this._connected = false;
       this._resolved = false;
-      this._patching = false;
-      this._dirty = 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 (this.shadowRoot) {
-          warn(
-            `Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.`
-          );
-        }
-        if (_def.shadowRoot !== false) {
+        if (def.shadowRoot !== false) {
           this.attachShadow(
-            extend({}, _def.shadowRootOptions, {
+            extend({}, def.shadowRootOptions, {
               mode: "open"
             })
           );
@@ -13961,14 +13980,14 @@ Expected function or array of functions, received type ${typeof value}.`
       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(() => {
@@ -13981,20 +14000,6 @@ Expected function or array of functions, received type ${typeof value}.`
         }
       }
     }
-    _setParent(parent = this._parent) {
-      if (parent) {
-        this._instance.parent = parent._instance;
-        this._inheritParentContext(parent);
-      }
-    }
-    _inheritParentContext(parent = this._parent) {
-      if (parent && this._app) {
-        Object.setPrototypeOf(
-          this._app._context.provides,
-          parent._instance.provides
-        );
-      }
-    }
     disconnectedCallback() {
       this._connected = false;
       nextTick(() => {
@@ -14003,9 +14008,7 @@ Expected function or array of functions, received type ${typeof value}.`
             this._ob.disconnect();
             this._ob = null;
           }
-          this._app && this._app.unmount();
-          if (this._instance) this._instance.ce = void 0;
-          this._app = this._instance = null;
+          this._unmount();
           if (this._teleportTargets) {
             this._teleportTargets.clear();
             this._teleportTargets = void 0;
@@ -14013,6 +14016,20 @@ Expected function or array of functions, received type ${typeof value}.`
         }
       });
     }
+    _setParent(parent = this._parent) {
+      if (parent && this._instance) {
+        this._instance.parent = parent._instance;
+        this._inheritParentContext(parent);
+      }
+    }
+    _inheritParentContext(parent = this._parent) {
+      if (parent && this._app) {
+        Object.setPrototypeOf(
+          this._app._context.provides,
+          parent._instance.provides
+        );
+      }
+    }
     _processMutations(mutations) {
       for (const m of mutations) {
         this._setAttr(m.attributeName);
@@ -14030,7 +14047,7 @@ Expected function or array of functions, received type ${typeof value}.`
       }
       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;
@@ -14055,29 +14072,25 @@ Expected function or array of functions, received type ${typeof value}.`
             "Custom element style injection is not supported when using shadowRoot: false"
           );
         }
-        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) {
-      if (!def.name) {
-        def.name = "VueElement";
-      }
-      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) {
@@ -14091,6 +14104,38 @@ Expected function or array of functions, received type ${typeof value}.`
         }
       }
     }
+    _processInstance() {
+      this._instance.ce = this;
+      this._instance.isCE = true;
+      {
+        this._instance.ceReload = (newStyles) => {
+          if (this._styles) {
+            this._styles.forEach((s) => this._root.removeChild(s));
+            this._styles.length = 0;
+          }
+          this._applyStyles(newStyles);
+          if (!this._instance.vapor) {
+            this._instance = null;
+          }
+          this._update();
+        };
+      }
+      const dispatch = (event, args) => {
+        this.dispatchEvent(
+          new CustomEvent(
+            event,
+            isPlainObject(args[0]) ? extend({ detail: args }, args[0]) : { detail: args }
+          )
+        );
+      };
+      this._instance.emit = (event, ...args) => {
+        dispatch(event, args);
+        if (hyphenate(event) !== event) {
+          dispatch(hyphenate(event), args);
+        }
+      };
+      this._setParent();
+    }
     _resolveProps(def) {
       const { props } = def;
       const declaredPropKeys = isArray(props) ? props : Object.keys(props || {});
@@ -14136,7 +14181,7 @@ Expected function or array of functions, received type ${typeof value}.`
           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;
           }
         }
@@ -14160,52 +14205,6 @@ Expected function or array of functions, received type ${typeof value}.`
         }
       }
     }
-    _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 = createVNode(this._def, extend(baseProps, this._props));
-      if (!this._instance) {
-        vnode.ce = (instance) => {
-          this._instance = instance;
-          instance.ce = this;
-          instance.isCE = true;
-          {
-            instance.ceReload = (newStyles) => {
-              if (this._styles) {
-                this._styles.forEach((s) => this._root.removeChild(s));
-                this._styles.length = 0;
-              }
-              this._applyStyles(newStyles);
-              this._instance = null;
-              this._update();
-            };
-          }
-          const dispatch = (event, args) => {
-            this.dispatchEvent(
-              new CustomEvent(
-                event,
-                isPlainObject(args[0]) ? extend({ detail: args }, args[0]) : { detail: args }
-              )
-            );
-          };
-          instance.emit = (event, ...args) => {
-            dispatch(event, args);
-            if (hyphenate(event) !== event) {
-              dispatch(hyphenate(event), args);
-            }
-          };
-          this._setParent();
-        };
-      }
-      return vnode;
-    }
     _applyStyles(styles, owner) {
       if (!styles) return;
       if (owner) {
@@ -14254,11 +14253,13 @@ Expected function or array of functions, received type ${typeof value}.`
     _renderSlots() {
       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) {
@@ -14271,12 +14272,19 @@ Expected function or array of functions, received type ${typeof value}.`
               }
             }
             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
@@ -14333,13 +14341,76 @@ Expected function or array of functions, received type ${typeof value}.`
       }
     }
   }
+  class VueElement extends VueElementBase {
+    constructor(def, props = {}, createAppFn = createApp) {
+      super(def, props, createAppFn);
+    }
+    _needsHydration() {
+      if (this.shadowRoot && this._createApp !== createApp) {
+        return true;
+      } else {
+        if (this.shadowRoot) {
+          warn(
+            `Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.`
+          );
+        }
+      }
+      return false;
+    }
+    _mount(def) {
+      if (!def.name) {
+        def.name = "VueElement";
+      }
+      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 = createVNode(this._def, extend(baseProps, this._props));
+      if (!this._instance) {
+        vnode.ce = (instance) => {
+          this._instance = instance;
+          this._processInstance();
+        };
+      }
+      return vnode;
+    }
+  }
   function useHost(caller) {
-    const instance = getCurrentInstance();
-    const el = instance && instance.ce;
+    const { hasInstance, value } = useInstanceOption("ce", true);
+    const el = value;
     if (el) {
       return el;
     } else {
-      if (!instance) {
+      if (!hasInstance) {
         warn(
           `${caller || "useHost"} called without an active component instance.`
         );
@@ -15045,6 +15116,7 @@ Expected function or array of functions, received type ${typeof value}.`
     TransitionGroup: TransitionGroup,
     TriggerOpTypes: TriggerOpTypes,
     VueElement: VueElement,
+    VueElementBase: VueElementBase,
     assertNumber: assertNumber,
     callWithAsyncErrorHandling: callWithAsyncErrorHandling,
     callWithErrorHandling: callWithErrorHandling,
@@ -15109,6 +15181,7 @@ Expected function or array of functions, received type ${typeof value}.`
     mergeModels: mergeModels,
     mergeProps: mergeProps,
     nextTick: nextTick,
+    nodeOps: nodeOps,
     normalizeClass: normalizeClass,
     normalizeProps: normalizeProps,
     normalizeStyle: normalizeStyle,
@@ -15127,6 +15200,7 @@ Expected function or array of functions, received type ${typeof value}.`
     onUpdated: onUpdated,
     onWatcherCleanup: onWatcherCleanup,
     openBlock: openBlock,
+    patchProp: patchProp,
     popScopeId: popScopeId,
     provide: provide,
     proxyRefs: proxyRefs,
@@ -15168,6 +15242,7 @@ Expected function or array of functions, received type ${typeof value}.`
     useCssVars: useCssVars,
     useHost: useHost,
     useId: useId,
+    useInstanceOption: useInstanceOption,
     useModel: useModel,
     useSSRContext: useSSRContext,
     useShadowRoot: useShadowRoot,
@@ -20242,7 +20317,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     ];
     if (dir.modifiers.length && node.tagType === 1) {
       const modifiers = dir.modifiers.map((m) => m.content).map((m) => (isSimpleIdentifier(m) ? m : JSON.stringify(m)) + `: true`).join(`, `);
-      const modifiersKey = arg ? isStaticExp(arg) ? `${arg.content}Modifiers` : createCompoundExpression([arg, ' + "Modifiers"']) : `modelModifiers`;
+      const modifiersKey = arg ? isStaticExp(arg) ? getModifierPropName(arg.content) : createCompoundExpression([arg, ' + "Modifiers"']) : `modelModifiers`;
       props.push(
         createObjectProperty(
           modifiersKey,
@@ -20595,7 +20670,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       let ns = parent ? parent.ns : rootNamespace;
       if (parent && ns === 2) {
         if (parent.tag === "annotation-xml") {
-          if (tag === "svg") {
+          if (isSVGTag(tag)) {
             return 1;
           }
           if (parent.props.some(
@@ -20612,10 +20687,10 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         }
       }
       if (ns === 0) {
-        if (tag === "svg") {
+        if (isSVGTag(tag)) {
           return 1;
         }
-        if (tag === "math") {
+        if (isMathMLTag(tag)) {
           return 2;
         }
       }