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

package/dist/runtime-dom.esm-browser.js

@@ -1,5 +1,5 @@
 /**
-* @vue/runtime-dom v3.6.0-alpha.3
+* @vue/runtime-dom v3.6.0-alpha.4
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -81,6 +81,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++) {
@@ -2838,7 +2841,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);
     }
@@ -9103,7 +9111,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) {
@@ -10557,6 +10565,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;
@@ -11191,7 +11218,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 ;
@@ -12034,12 +12061,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
@@ -12049,28 +12073,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"
           })
         );
@@ -12088,14 +12107,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(() => {
@@ -12108,20 +12127,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(() => {
@@ -12130,9 +12135,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;
@@ -12140,6 +12143,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);
@@ -12157,7 +12174,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;
@@ -12182,29 +12199,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) {
@@ -12218,6 +12231,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 || {});
@@ -12263,7 +12308,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;
         }
       }
@@ -12287,52 +12332,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) {
@@ -12381,11 +12380,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) {
@@ -12398,12 +12399,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
@@ -12460,13 +12468,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.`
       );
@@ -12485,12 +12556,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;
@@ -13147,4 +13218,4 @@ const initDirectivesForSSR = () => {
   }
 } ;
 
-export { BaseTransition, BaseTransitionPropsValidators, Comment, DeprecationTypes, EffectScope, ErrorCodes, ErrorTypeStrings, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, TrackOpTypes, Transition, TransitionGroup, TriggerOpTypes, VueElement, assertNumber, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, computed, createApp, createBlock, createCommentVNode, createElementBlock, createBaseVNode as createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineModel, defineOptions, defineProps, defineSSRCustomElement, defineSlots, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getCurrentWatcher, getTransitionRawChildren, guardReactiveProps, h, handleError, hasInjectionContext, hydrate, hydrateOnIdle, hydrateOnInteraction, hydrateOnMediaQuery, hydrateOnVisible, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, onWatcherCleanup, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, toValue, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useHost, useId, useModel, useSSRContext, useShadowRoot, useSlots, useTemplateRef, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId };
+export { BaseTransition, BaseTransitionPropsValidators, Comment, DeprecationTypes, EffectScope, ErrorCodes, ErrorTypeStrings, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, TrackOpTypes, Transition, TransitionGroup, TriggerOpTypes, VueElement, VueElementBase, assertNumber, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, computed, createApp, createBlock, createCommentVNode, createElementBlock, createBaseVNode as createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineModel, defineOptions, defineProps, defineSSRCustomElement, defineSlots, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getCurrentWatcher, getTransitionRawChildren, guardReactiveProps, h, handleError, hasInjectionContext, hydrate, hydrateOnIdle, hydrateOnInteraction, hydrateOnMediaQuery, hydrateOnVisible, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeModels, mergeProps, nextTick, nodeOps, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, onWatcherCleanup, openBlock, patchProp, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, toValue, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useHost, useId, useInstanceOption, useModel, useSSRContext, useShadowRoot, useSlots, useTemplateRef, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId };