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

package/dist/runtime-dom.cjs.prod.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
 **/
@@ -735,12 +735,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
@@ -750,23 +747,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 (_def.shadowRoot !== false) {
+      if (def.shadowRoot !== false) {
         this.attachShadow(
-          shared.extend({}, _def.shadowRootOptions, {
+          shared.extend({}, def.shadowRootOptions, {
             mode: "open"
           })
         );
@@ -784,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(() => {
@@ -804,20 +801,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;
     runtimeCore.nextTick(() => {
@@ -826,9 +809,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;
@@ -836,6 +817,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);
@@ -853,7 +848,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;
@@ -874,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) {
@@ -905,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 || {});
@@ -950,7 +963,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;
         }
       }
@@ -974,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) {
@@ -1043,11 +1021,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) {
@@ -1060,12 +1040,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
@@ -1112,9 +1099,63 @@ class VueElement extends BaseClass {
   _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;
   }
@@ -1127,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;
     }
@@ -1731,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;

package/dist/runtime-dom.d.ts

@@ -1,7 +1,12 @@
-import { BaseTransitionProps, FunctionalComponent, ObjectDirective, Directive, SetupContext, RenderFunction, ComponentOptions, App, ComponentCustomElementInterface, ConcreteComponent, CreateAppFunction, ComponentObjectPropsOptions, EmitsOptions, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentInjectOptions, SlotsType, Component, ComponentProvideOptions, ExtractPropTypes, EmitsToProps, ComponentOptionsBase, CreateComponentPublicInstanceWithMixins, ComponentPublicInstance, DefineComponent, VNodeRef, RootRenderFunction, RootHydrateFunction } from '@vue/runtime-core';
+import { RendererOptions, BaseTransitionProps, FunctionalComponent, ObjectDirective, Directive, SetupContext, RenderFunction, ComponentOptions, App, Component, ConcreteComponent, ComponentCustomElementInterface, CreateAppFunction, ComponentObjectPropsOptions, EmitsOptions, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentInjectOptions, SlotsType, ComponentProvideOptions, ExtractPropTypes, EmitsToProps, ComponentOptionsBase, CreateComponentPublicInstanceWithMixins, ComponentPublicInstance, DefineComponent, VNodeRef, RootRenderFunction, RootHydrateFunction } from '@vue/runtime-core';
 export * from '@vue/runtime-core';
 import * as CSS from 'csstype';
 
+export declare const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'>;
+
+type DOMRendererOptions = RendererOptions<Node, Element>;
+export declare const patchProp: DOMRendererOptions['patchProp'];
+
 declare const TRANSITION = "transition";
 declare const ANIMATION = "animation";
 type AnimationTypes = typeof TRANSITION | typeof ANIMATION;
@@ -114,54 +119,62 @@ export declare function defineCustomElement<T extends {
 export declare const defineSSRCustomElement: typeof defineCustomElement;
 declare const BaseClass: typeof HTMLElement;
 type InnerComponentDef = ConcreteComponent & CustomElementOptions;
-export declare class VueElement extends BaseClass implements ComponentCustomElementInterface {
-    /**
-     * Component def - note this may be an AsyncWrapper, and this._def will
-     * be overwritten by the inner component when resolved.
-     */
-    private _def;
-    private _props;
-    private _createApp;
+export declare abstract class VueElementBase<E = Element, C = Component, Def extends CustomElementOptions & {
+    props?: any;
+} = InnerComponentDef> extends BaseClass implements ComponentCustomElementInterface {
     _isVueCE: boolean;
-    private _connected;
-    private _resolved;
-    private _patching;
-    private _dirty;
-    private _numberProps;
-    private _styleChildren;
-    private _pendingResolve;
-    private _parent;
+    protected _connected: boolean;
+    protected _resolved: boolean;
+    protected _numberProps: Record<string, true> | null;
+    protected _styleChildren: WeakSet<object>;
+    protected _pendingResolve: Promise<void> | undefined;
+    protected _parent: VueElementBase | undefined;
+    protected _patching: boolean;
+    protected _dirty: boolean;
+    protected _def: Def;
+    protected _props: Record<string, any>;
+    protected _createApp: CreateAppFunction<E, C>;
     /**
      * dev only
      */
-    private _styles?;
+    protected _styles?: HTMLStyleElement[];
     /**
      * dev only
      */
-    private _childStyles?;
-    private _ob?;
-    private _slots?;
+    protected _childStyles?: Map<string, HTMLStyleElement[]>;
+    protected _ob?: MutationObserver | null;
+    protected _slots?: Record<string, Node[]>;
+    /**
+     * Check if this custom element needs hydration.
+     * Returns true if it has a pre-rendered declarative shadow root that
+     * needs to be hydrated.
+     */
+    protected abstract _needsHydration(): boolean;
+    protected abstract _mount(def: Def): void;
+    protected abstract _update(): void;
+    protected abstract _unmount(): void;
+    protected abstract _updateSlotNodes(slot: Map<Node, Node[]>): void;
     constructor(
     /**
      * Component def - note this may be an AsyncWrapper, and this._def will
      * be overwritten by the inner component when resolved.
      */
-    _def: InnerComponentDef, _props?: Record<string, any>, _createApp?: CreateAppFunction<Element>);
+    def: Def, props: Record<string, any> | undefined, createAppFn: CreateAppFunction<E, C>);
     connectedCallback(): void;
-    private _setParent;
-    private _inheritParentContext;
     disconnectedCallback(): void;
+    protected _setParent(parent?: VueElementBase | undefined): void;
+    protected _inheritParentContext(parent?: VueElementBase | undefined): void;
     private _processMutations;
     /**
      * resolve inner component definition (handle possible async component)
      */
     private _resolveDef;
-    private _mount;
+    private _mountComponent;
+    protected _processExposed(): void;
+    protected _processInstance(): void;
     private _resolveProps;
-    protected _setAttr(key: string): void;
-    private _update;
-    private _createVNode;
-    private _applyStyles;
+    private _setAttr;
+    protected _applyStyles(styles: string[] | undefined, owner?: ConcreteComponent): void;
     /**
      * Only called when shadowRoot is false
      */
@@ -169,9 +182,21 @@ export declare class VueElement extends BaseClass implements ComponentCustomElem
     /**
      * Only called when shadowRoot is false
      */
-    private _renderSlots;
+    protected _renderSlots(): void;
+}
+export declare class VueElement extends VueElementBase<Element, Component, InnerComponentDef> {
+    constructor(def: InnerComponentDef, props?: Record<string, any> | undefined, createAppFn?: CreateAppFunction<Element, Component>);
+    protected _needsHydration(): boolean;
+    protected _mount(def: InnerComponentDef): void;
+    protected _update(): void;
+    protected _unmount(): void;
+    /**
+     * Only called when shadowRoot is false
+     */
+    protected _updateSlotNodes(replacements: Map<Node, Node[]>): void;
+    private _createVNode;
 }
-export declare function useHost(caller?: string): VueElement | null;
+export declare function useHost(caller?: string): VueElementBase | null;
 /**
  * Retrieve the shadowRoot of the current custom element. Only usable in setup()
  * of a `defineCustomElement` component.