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

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

@@ -1,5 +1,5 @@
 /**
-* @vue/runtime-dom v3.6.0-alpha.4
+* @vue/runtime-dom v3.6.0-alpha.5
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -436,36 +436,20 @@ function initVShowForSSR() {
 const CSS_VAR_TEXT = Symbol(!!(process.env.NODE_ENV !== "production") ? "CSS_VAR_TEXT" : "");
 function useCssVars(getter) {
   const instance = getCurrentInstance();
-  if (!instance) {
-    !!(process.env.NODE_ENV !== "production") && warn(`useCssVars is called without current active component instance.`);
-    return;
-  }
-  const updateTeleports = instance.ut = (vars = getter(instance.proxy)) => {
-    Array.from(
-      document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
-    ).forEach((node) => setVarsOnNode(node, vars));
-  };
-  if (!!(process.env.NODE_ENV !== "production")) {
-    instance.getCssVars = () => getter(instance.proxy);
-  }
-  const setVars = () => {
-    const vars = getter(instance.proxy);
+  const getVars = () => getter(instance.proxy);
+  const setVars = (vars) => {
     if (instance.ce) {
       setVarsOnNode(instance.ce, vars);
     } else {
       setVarsOnVNode(instance.subTree, vars);
     }
-    updateTeleports(vars);
   };
-  onBeforeUpdate(() => {
-    queuePostFlushCb(setVars);
-  });
-  onMounted(() => {
-    watch(setVars, NOOP, { flush: "post" });
-    const ob = new MutationObserver(setVars);
-    ob.observe(instance.subTree.el.parentNode, { childList: true });
-    onUnmounted(() => ob.disconnect());
-  });
+  baseUseCssVars(
+    instance,
+    () => instance.subTree.el.parentNode,
+    getVars,
+    setVars
+  );
 }
 function setVarsOnVNode(vnode, vars) {
   if (vnode.shapeFlag & 128) {
@@ -493,6 +477,34 @@ function setVarsOnVNode(vnode, vars) {
     }
   }
 }
+function baseUseCssVars(instance, getParentNode, getVars, setVars) {
+  if (!instance) {
+    !!(process.env.NODE_ENV !== "production") && warn(`useCssVars is called without current active component instance.`);
+    return;
+  }
+  if (!!(process.env.NODE_ENV !== "production")) {
+    instance.getCssVars = getVars;
+  }
+  const updateTeleports = instance.ut = (vars = getVars()) => {
+    Array.from(
+      document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
+    ).forEach((node) => setVarsOnNode(node, vars));
+  };
+  const applyCssCars = () => {
+    const vars = getVars();
+    setVars(vars);
+    updateTeleports(vars);
+  };
+  onBeforeUpdate(() => {
+    queuePostFlushCb(applyCssCars);
+  });
+  onMounted(() => {
+    watch(applyCssCars, NOOP, { flush: "post" });
+    const ob = new MutationObserver(applyCssCars);
+    ob.observe(getParentNode(), { childList: true });
+    onUnmounted(() => ob.disconnect());
+  });
+}
 function setVarsOnNode(el, vars) {
   if (el.nodeType === 1) {
     const style = el.style;
@@ -1985,4 +1997,4 @@ const initDirectivesForSSR = () => {
   }
 } ;
 
-export { Transition, TransitionGroup, TransitionPropsValidators, VueElement, VueElementBase, baseApplyTranslation, callPendingCbs, createApp, createSSRApp, defineCustomElement, defineSSRCustomElement, ensureHydrationRenderer, ensureRenderer, forceReflow, handleMovedChildren, hasCSSTransform, hydrate, initDirectivesForSSR, nodeOps, normalizeContainer, patchProp, patchStyle, render, resolveTransitionProps, 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, 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 };