@vue/runtime-dom 3.6.0-beta.7 → 3.6.0-beta.8

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

@@ -1,13 +1,11 @@
 /**
-  * @vue/runtime-dom v3.6.0-beta.7
+  * @vue/runtime-dom v3.6.0-beta.8
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/
 import { BaseTransition, BaseTransitionPropsValidators, Fragment, Static, Text, assertNumber, callWithAsyncErrorHandling, camelize, createHydrationRenderer, createRenderer, createVNode, defineComponent, getCurrentInstance, getTransitionRawChildren, h, isRuntimeOnly, nextTick, onBeforeUpdate, onMounted, onUnmounted, onUpdated, queuePostFlushCb, resolveTransitionHooks, setIsHydratingEnabled, setTransitionHooks, toRaw, unref, useInstanceOption, useTransitionState, warn, watch } from "@vue/runtime-core";
 import { EMPTY_OBJ, NOOP, camelize as camelize$1, canSetValueDirectly, capitalize, extend, hasOwn, hyphenate, includeBooleanAttr, invokeArrayFns, isArray, isFunction, isHTMLTag, isMathMLTag, isModelListener, isNativeOn, isObject, isOn, isPlainObject, isSVGTag, isSet, isSpecialBooleanAttr, isString, isSymbol, looseEqual, looseIndexOf, looseToNumber, normalizeCssVarValue, shouldSetAsAttr, toNumber } from "@vue/shared";
-
-export * from "@vue/runtime-core"
-
+export * from "@vue/runtime-core";
 //#region packages/runtime-dom/src/nodeOps.ts
 let policy = void 0;
 const tt = typeof window !== "undefined" && window.trustedTypes;
@@ -67,7 +65,6 @@ const nodeOps = {
 		return [before ? before.nextSibling : parent.firstChild, anchor ? anchor.previousSibling : parent.lastChild];
 	}
 };
-
 //#endregion
 //#region packages/runtime-dom/src/components/Transition.ts
 const TRANSITION = "transition";
@@ -306,7 +303,6 @@ function toMs(s) {
 function forceReflow(el) {
 	return (el ? el.ownerDocument : document).body.offsetHeight;
 }
-
 //#endregion
 //#region packages/runtime-dom/src/modules/class.ts
 function patchClass(el, value, isSVG) {
@@ -316,7 +312,6 @@ function patchClass(el, value, isSVG) {
 	else if (isSVG) el.setAttribute("class", value);
 	else el.className = value;
 }
-
 //#endregion
 //#region packages/runtime-dom/src/directives/vShow.ts
 const vShowOriginalDisplay = Symbol("_vod");
@@ -355,7 +350,6 @@ function initVShowForSSR() {
 		if (!value) return { style: { display: "none" } };
 	};
 }
-
 //#endregion
 //#region packages/runtime-dom/src/helpers/useCssVars.ts
 const CSS_VAR_TEXT = Symbol(!!(process.env.NODE_ENV !== "production") ? "CSS_VAR_TEXT" : "");
@@ -441,7 +435,6 @@ function setVarsOnNode(el, vars) {
 		style[CSS_VAR_TEXT] = cssText;
 	}
 }
-
 //#endregion
 //#region packages/runtime-dom/src/modules/style.ts
 const displayRE = /(?:^|;)\s*display\s*:/;
@@ -508,7 +501,6 @@ function autoPrefix(style, rawName) {
 	}
 	return rawName;
 }
-
 //#endregion
 //#region packages/runtime-dom/src/modules/attrs.ts
 const xlinkNS = "http://www.w3.org/1999/xlink";
@@ -518,7 +510,6 @@ function patchAttr(el, key, value, isSVG, instance, isBoolean = isSpecialBoolean
 	else if (value == null || isBoolean && !includeBooleanAttr(value)) el.removeAttribute(key);
 	else el.setAttribute(key, isBoolean ? "" : isSymbol(value) ? String(value) : value);
 }
-
 //#endregion
 //#region packages/runtime-dom/src/modules/props.ts
 function patchDOMProp(el, key, value, parentComponent, attrName) {
@@ -554,7 +545,6 @@ function patchDOMProp(el, key, value, parentComponent, attrName) {
 	}
 	needRemove && el.removeAttribute(attrName || key);
 }
-
 //#endregion
 //#region packages/runtime-dom/src/modules/events.ts
 function addEventListener(el, event, handler, options) {
@@ -618,7 +608,6 @@ function patchStopImmediatePropagation(e, value) {
 		return value.map((fn) => (e) => !e._stopped && fn && fn(e));
 	} else return value;
 }
-
 //#endregion
 //#region packages/runtime-dom/src/patchProp.ts
 const patchProp = (el, key, prevValue, nextValue, namespace, parentComponent) => {
@@ -630,7 +619,7 @@ const patchProp = (el, key, prevValue, nextValue, namespace, parentComponent) =>
 	} else if (key[0] === "." ? (key = key.slice(1), true) : key[0] === "^" ? (key = key.slice(1), false) : shouldSetAsProp(el, key, nextValue, isSVG)) {
 		patchDOMProp(el, key, nextValue, parentComponent);
 		if (!el.tagName.includes("-") && (key === "value" || key === "checked" || key === "selected")) patchAttr(el, key, nextValue, isSVG, parentComponent, key !== "value");
-	} else if (el._isVueCE && (/[A-Z]/.test(key) || !isString(nextValue))) patchDOMProp(el, camelize$1(key), nextValue, parentComponent, key);
+	} else if (el._isVueCE && (shouldSetAsPropForVueCE(el, key) || el._def.__asyncLoader && (/[A-Z]/.test(key) || !isString(nextValue)))) patchDOMProp(el, camelize$1(key), nextValue, parentComponent, key);
 	else {
 		if (key === "true-value") el._trueValue = nextValue;
 		else if (key === "false-value") el._falseValue = nextValue;
@@ -647,7 +636,12 @@ function shouldSetAsProp(el, key, value, isSVG) {
 	if (isNativeOn(key) && isString(value)) return false;
 	return key in el;
 }
-
+function shouldSetAsPropForVueCE(el, key) {
+	const props = el._def.props;
+	if (!props) return false;
+	const camelKey = camelize$1(key);
+	return Array.isArray(props) ? props.some((prop) => camelize$1(prop) === camelKey) : Object.keys(props).some((prop) => camelize$1(prop) === camelKey);
+}
 //#endregion
 //#region packages/runtime-dom/src/apiCustomElement.ts
 const REMOVAL = {};
@@ -677,6 +671,7 @@ var VueElementBase = class VueElementBase extends BaseClass {
 		this._resolved = false;
 		this._numberProps = null;
 		this._styleChildren = /* @__PURE__ */ new WeakSet();
+		this._styleAnchors = /* @__PURE__ */ new WeakMap();
 		this._patching = false;
 		this._dirty = false;
 		this._ob = null;
@@ -695,7 +690,7 @@ var VueElementBase = class VueElementBase extends BaseClass {
 		if (!this.shadowRoot && !this._resolved) this._parseSlots();
 		this._connected = true;
 		let parent = this;
-		while (parent = parent && (parent.parentNode || parent.host)) if (parent instanceof VueElementBase) {
+		while (parent = parent && (parent.assignedSlot || parent.parentNode || parent.host)) if (parent instanceof VueElementBase) {
 			this._parent = parent;
 			break;
 		}
@@ -788,6 +783,7 @@ var VueElementBase = class VueElementBase extends BaseClass {
 				this._styles.forEach((s) => this._root.removeChild(s));
 				this._styles.length = 0;
 			}
+			this._styleAnchors.delete(this._def);
 			this._applyStyles(newStyles);
 			if (!this._instance.vapor) this._instance = null;
 			this._update();
@@ -853,18 +849,26 @@ var VueElementBase = class VueElementBase extends BaseClass {
 			}
 		}
 	}
-	_applyStyles(styles, owner) {
+	_applyStyles(styles, owner, parentComp) {
 		if (!styles) return;
 		if (owner) {
 			if (owner === this._def || this._styleChildren.has(owner)) return;
 			this._styleChildren.add(owner);
 		}
 		const nonce = this._nonce;
+		const root = this.shadowRoot;
+		const insertionAnchor = parentComp ? this._getStyleAnchor(parentComp) || this._getStyleAnchor(this._def) : this._getRootStyleInsertionAnchor(root);
+		let last = null;
 		for (let i = styles.length - 1; i >= 0; i--) {
 			const s = document.createElement("style");
 			if (nonce) s.setAttribute("nonce", nonce);
 			s.textContent = styles[i];
-			this.shadowRoot.prepend(s);
+			root.insertBefore(s, last || insertionAnchor);
+			last = s;
+			if (i === 0) {
+				if (!parentComp) this._styleAnchors.set(this._def, s);
+				if (owner) this._styleAnchors.set(owner, s);
+			}
 			if (!!(process.env.NODE_ENV !== "production")) if (owner) {
 				if (owner.__hmrId) {
 					if (!this._childStyles) this._childStyles = /* @__PURE__ */ new Map();
@@ -875,6 +879,20 @@ var VueElementBase = class VueElementBase extends BaseClass {
 			} else (this._styles || (this._styles = [])).push(s);
 		}
 	}
+	_getStyleAnchor(comp) {
+		if (!comp) return null;
+		const anchor = this._styleAnchors.get(comp);
+		if (anchor && anchor.parentNode === this.shadowRoot) return anchor;
+		if (anchor) this._styleAnchors.delete(comp);
+		return null;
+	}
+	_getRootStyleInsertionAnchor(root) {
+		for (let i = 0; i < root.childNodes.length; i++) {
+			const node = root.childNodes[i];
+			if (!(node instanceof HTMLStyleElement)) return node;
+		}
+		return null;
+	}
 	/**
 	* Only called when shadowRoot is false
 	*/
@@ -937,8 +955,8 @@ var VueElementBase = class VueElementBase extends BaseClass {
 	/**
 	* @internal
 	*/
-	_injectChildStyle(comp) {
-		this._applyStyles(comp.styles, comp);
+	_injectChildStyle(comp, parentComp) {
+		this._applyStyles(comp.styles, comp, parentComp);
 	}
 	/**
 	* @internal
@@ -966,6 +984,7 @@ var VueElementBase = class VueElementBase extends BaseClass {
 	_removeChildStyle(comp) {
 		if (!!(process.env.NODE_ENV !== "production")) {
 			this._styleChildren.delete(comp);
+			this._styleAnchors.delete(comp);
 			if (this._childStyles && comp.__hmrId) {
 				const oldStyles = this._childStyles.get(comp.__hmrId);
 				if (oldStyles) {
@@ -1035,7 +1054,6 @@ function useShadowRoot() {
 	const el = !!(process.env.NODE_ENV !== "production") ? useHost("useShadowRoot") : useHost();
 	return el && el.shadowRoot;
 }
-
 //#endregion
 //#region packages/runtime-dom/src/helpers/useCssModule.ts
 function useCssModule(name = "$style") {
@@ -1058,7 +1076,6 @@ function useCssModule(name = "$style") {
 		return mod;
 	}
 }
-
 //#endregion
 //#region packages/runtime-dom/src/components/TransitionGroup.ts
 const positionMap = /* @__PURE__ */ new WeakMap();
@@ -1073,7 +1090,7 @@ const decorate = (t) => {
 	delete t.props.mode;
 	return t;
 };
-const TransitionGroupImpl = /* @__PURE__ */ decorate({
+const TransitionGroup = /* @__PURE__ */ decorate({
 	name: "TransitionGroup",
 	props: /* @__PURE__ */ extend({}, TransitionPropsValidators, {
 		tag: String,
@@ -1124,7 +1141,6 @@ const TransitionGroupImpl = /* @__PURE__ */ decorate({
 		};
 	}
 });
-const TransitionGroup = TransitionGroupImpl;
 function callPendingCbs(el) {
 	if (el[moveCbKey]) el[moveCbKey]();
 	if (el[enterCbKey]) el[enterCbKey]();
@@ -1190,7 +1206,6 @@ const handleMovedChildren = (el, moveClass) => {
 	};
 	el.addEventListener("transitionend", cb);
 };
-
 //#endregion
 //#region packages/runtime-dom/src/directives/vModel.ts
 const getModelAssigner = (vnode) => {
@@ -1440,7 +1455,6 @@ function initVModelForSSR() {
 		if (modelToUse.getSSRProps) return modelToUse.getSSRProps(binding, vnode);
 	};
 }
-
 //#endregion
 //#region packages/runtime-dom/src/directives/vOn.ts
 const systemModifiers = [
@@ -1498,7 +1512,6 @@ const withKeys = (fn, modifiers) => {
 		if (modifiers.some((k) => k === eventKey || keyNames[k] === eventKey)) return fn(event);
 	}));
 };
-
 //#endregion
 //#region packages/runtime-dom/src/index.ts
 const rendererOptions = /* @__PURE__ */ extend({ patchProp }, nodeOps);
@@ -1611,6 +1624,5 @@ const initDirectivesForSSR = () => {
 		initVShowForSSR();
 	}
 };
-
 //#endregion
-export { Transition, TransitionGroup, TransitionPropsValidators, VueElement, VueElementBase, baseApplyTranslation, baseUseCssVars, callPendingCbs, createApp, createSSRApp, defineCustomElement, defineSSRCustomElement, ensureHydrationRenderer, ensureRenderer, forceReflow, handleMovedChildren, hasCSSTransform, hydrate, initDirectivesForSSR, nodeOps, normalizeContainer, patchProp, patchStyle, render, resolveTransitionProps, setVarsOnNode, shouldSetAsProp, svgNS, unsafeToTrustedHTML, useCssModule, useCssVars, useHost, useShadowRoot, vModelCheckbox, vModelCheckboxInit, vModelCheckboxUpdate, vModelDynamic, getValue as vModelGetValue, vModelRadio, vModelSelect, vModelSelectInit, vModelSetSelected, vModelText, vModelTextInit, vModelTextUpdate, vShow, vShowHidden, vShowOriginalDisplay, withKeys, withModifiers, xlinkNS };
+export { Transition, TransitionGroup, TransitionPropsValidators, VueElement, VueElementBase, baseApplyTranslation, baseUseCssVars, callPendingCbs, createApp, createSSRApp, defineCustomElement, defineSSRCustomElement, ensureHydrationRenderer, ensureRenderer, forceReflow, handleMovedChildren, hasCSSTransform, hydrate, initDirectivesForSSR, nodeOps, normalizeContainer, patchProp, patchStyle, render, resolveTransitionProps, setVarsOnNode, shouldSetAsProp, shouldSetAsPropForVueCE, svgNS, unsafeToTrustedHTML, useCssModule, useCssVars, useHost, useShadowRoot, vModelCheckbox, vModelCheckboxInit, vModelCheckboxUpdate, vModelDynamic, getValue as vModelGetValue, vModelRadio, vModelSelect, vModelSelectInit, vModelSetSelected, vModelText, vModelTextInit, vModelTextUpdate, vShow, vShowHidden, vShowOriginalDisplay, withKeys, withModifiers, xlinkNS };