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

package/dist/vue.cjs.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
 **/
@@ -88,6 +88,9 @@ const toHandlerKey = cacheStringFunction(
     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++) {
@@ -2964,7 +2967,12 @@ function reload(id, newComp) {
   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);
     }
@@ -7688,7 +7696,7 @@ function createCompatVue$1(createApp, createSingletonApp) {
       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)) {
@@ -10893,7 +10901,7 @@ function useModel(props, name, options = EMPTY_OBJ) {
   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) {
@@ -12447,6 +12455,25 @@ const setCurrentInstance = (instance, scope = instance !== null ? instance.scope
     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;
@@ -13093,7 +13120,7 @@ function isMemoSame(cached, memo) {
   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 ;
@@ -13956,12 +13983,9 @@ const defineSSRCustomElement = (/* @__NO_SIDE_EFFECTS__ */ (options, extraOption
 });
 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
@@ -13971,28 +13995,23 @@ class VueElement extends BaseClass {
      * @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"
           })
         );
@@ -14010,14 +14029,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(() => {
@@ -14030,20 +14049,6 @@ class VueElement extends BaseClass {
       }
     }
   }
-  _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(() => {
@@ -14052,9 +14057,7 @@ class VueElement extends BaseClass {
           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;
@@ -14062,6 +14065,20 @@ class VueElement extends BaseClass {
       }
     });
   }
+  _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);
@@ -14079,7 +14096,7 @@ class VueElement extends BaseClass {
     }
     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;
@@ -14104,29 +14121,25 @@ class VueElement extends BaseClass {
           "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) {
@@ -14140,6 +14153,38 @@ class VueElement extends BaseClass {
       }
     }
   }
+  _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 || {});
@@ -14185,7 +14230,7 @@ class VueElement extends BaseClass {
         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;
         }
       }
@@ -14209,52 +14254,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 = 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) {
@@ -14303,11 +14302,13 @@ class VueElement extends BaseClass {
   _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) {
@@ -14320,12 +14321,19 @@ 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
@@ -14382,13 +14390,76 @@ class VueElement extends BaseClass {
     }
   }
 }
+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.`
       );
@@ -14407,12 +14478,12 @@ function useShadowRoot() {
 
 function useCssModule(name = "$style") {
   {
-    const instance = getCurrentInstance();
-    if (!instance) {
+    const { hasInstance, value: type } = useInstanceOption("type", true);
+    if (!hasInstance) {
       warn(`useCssModule must be called inside setup()`);
       return EMPTY_OBJ;
     }
-    const modules = instance.type.__cssModules;
+    const modules = type.__cssModules;
     if (!modules) {
       warn(`Current instance does not have CSS modules injected.`);
       return EMPTY_OBJ;
@@ -15147,6 +15218,7 @@ var runtimeDom = /*#__PURE__*/Object.freeze({
   TransitionGroup: TransitionGroup,
   TriggerOpTypes: TriggerOpTypes,
   VueElement: VueElement,
+  VueElementBase: VueElementBase,
   assertNumber: assertNumber,
   callWithAsyncErrorHandling: callWithAsyncErrorHandling,
   callWithErrorHandling: callWithErrorHandling,
@@ -15211,6 +15283,7 @@ var runtimeDom = /*#__PURE__*/Object.freeze({
   mergeModels: mergeModels,
   mergeProps: mergeProps,
   nextTick: nextTick,
+  nodeOps: nodeOps,
   normalizeClass: normalizeClass,
   normalizeProps: normalizeProps,
   normalizeStyle: normalizeStyle,
@@ -15229,6 +15302,7 @@ var runtimeDom = /*#__PURE__*/Object.freeze({
   onUpdated: onUpdated,
   onWatcherCleanup: onWatcherCleanup,
   openBlock: openBlock,
+  patchProp: patchProp,
   popScopeId: popScopeId,
   provide: provide,
   proxyRefs: proxyRefs,
@@ -15270,6 +15344,7 @@ var runtimeDom = /*#__PURE__*/Object.freeze({
   useCssVars: useCssVars,
   useHost: useHost,
   useId: useId,
+  useInstanceOption: useInstanceOption,
   useModel: useModel,
   useSSRContext: useSSRContext,
   useShadowRoot: useShadowRoot,
@@ -19586,17 +19661,14 @@ function processExpression(node, context, asParams = false, asRawStatements = fa
     knownIds
   );
   const children = [];
-  const isTSNode = TS_NODE_TYPES.includes(ast.type);
   ids.sort((a, b) => a.start - b.start);
   ids.forEach((id, i) => {
     const start = id.start - 1;
     const end = id.end - 1;
     const last = ids[i - 1];
-    if (!(isTSNode && i === 0)) {
-      const leadingText = rawExp.slice(last ? last.end - 1 : 0, start);
-      if (leadingText.length || id.prefix) {
-        children.push(leadingText + (id.prefix || ``));
-      }
+    const leadingText = rawExp.slice(last ? last.end - 1 : 0, start);
+    if (leadingText.length || id.prefix) {
+      children.push(leadingText + (id.prefix || ``));
     }
     const source = rawExp.slice(start, end);
     children.push(
@@ -19611,7 +19683,7 @@ function processExpression(node, context, asParams = false, asRawStatements = fa
         id.isConstant ? 3 : 0
       )
     );
-    if (i === ids.length - 1 && end < rawExp.length && !isTSNode) {
+    if (i === ids.length - 1 && end < rawExp.length) {
       children.push(rawExp.slice(end));
     }
   });
@@ -21414,7 +21486,7 @@ const transformModel$1 = (dir, node, context) => {
   }
   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,
@@ -21756,7 +21828,7 @@ const parserOptions = {
     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(
@@ -21773,10 +21845,10 @@ const parserOptions = {
       }
     }
     if (ns === 0) {
-      if (tag === "svg") {
+      if (isSVGTag(tag)) {
         return 1;
       }
-      if (tag === "math") {
+      if (isMathMLTag(tag)) {
         return 2;
       }
     }