@vue/runtime-dom - npm Package Compare versions

Comparing version 3.3.11 to 3.3.12

dist/runtime-dom.cjs.js

@@ -405,2 +405,7 @@ 'use strict';
 
+const CSS_VAR_TEXT = Symbol("CSS_VAR_TEXT" );
+function useCssVars(getter) {
+  return;
+}
+
 function patchStyle(el, prev, next) {
@@ -424,2 +429,6 @@ const style = el.style;
       if (prev !== next) {
+        const cssVarText = style[CSS_VAR_TEXT];
+        if (cssVarText) {
+          next += ";" + cssVarText;
+        }
         style.cssText = next;
@@ -931,6 +940,2 @@ }
 
-function useCssVars(getter) {
-  return;
-}
-
 const positionMap = /* @__PURE__ */ new WeakMap();
@@ -937,0 +942,0 @@ const newPositionMap = /* @__PURE__ */ new WeakMap();

dist/runtime-dom.cjs.prod.js

@@ -402,2 +402,7 @@ 'use strict';
 
+const CSS_VAR_TEXT = Symbol("");
+function useCssVars(getter) {
+  return;
+}
+
 function patchStyle(el, prev, next) {
@@ -421,2 +426,6 @@ const style = el.style;
       if (prev !== next) {
+        const cssVarText = style[CSS_VAR_TEXT];
+        if (cssVarText) {
+          next += ";" + cssVarText;
+        }
         style.cssText = next;
@@ -892,6 +901,2 @@ }
 
-function useCssVars(getter) {
-  return;
-}
-
 const positionMap = /* @__PURE__ */ new WeakMap();
@@ -898,0 +903,0 @@ const newPositionMap = /* @__PURE__ */ new WeakMap();

dist/runtime-dom.d.ts

@@ -1015,2 +1015,3 @@ import { SetupContext, RenderFunction, ComputedOptions, MethodOptions, ComponentOptionsMixin, EmitsOptions, ComponentInjectOptions, SlotsType, ComponentOptionsWithoutProps, ComponentOptionsWithArrayProps, ComponentPropsOptions, ComponentOptionsWithObjectProps, ExtractPropTypes, DefineComponent, RootHydrateFunction, ConcreteComponent, BaseTransitionProps, FunctionalComponent, ObjectDirective, VNodeRef, RootRenderFunction, CreateAppFunction } from '@vue/runtime-core';
     xmlns?: string;
+    xmlnsXlink?: string;
     y1?: Numberish;
@@ -1017,0 +1018,0 @@ y2?: Numberish;

dist/runtime-dom.esm-bundler.js

@@ -1,2 +0,2 @@
-import { h, BaseTransition, BaseTransitionPropsValidators, assertNumber, warn, camelize, callWithAsyncErrorHandling, defineComponent, nextTick, createVNode, getCurrentInstance, watchPostEffect, onMounted, onUnmounted, Fragment, Static, useTransitionState, onUpdated, toRaw, getTransitionRawChildren, setTransitionHooks, resolveTransitionHooks, isRuntimeOnly, createRenderer, createHydrationRenderer } from '@vue/runtime-core';
+import { h, BaseTransition, BaseTransitionPropsValidators, assertNumber, getCurrentInstance, warn, watchPostEffect, onMounted, onUnmounted, Fragment, Static, camelize, callWithAsyncErrorHandling, defineComponent, nextTick, createVNode, useTransitionState, onUpdated, toRaw, getTransitionRawChildren, setTransitionHooks, resolveTransitionHooks, isRuntimeOnly, createRenderer, createHydrationRenderer } from '@vue/runtime-core';
 export * from '@vue/runtime-core';
@@ -402,2 +402,65 @@ import { extend, isObject, toNumber, isArray, isString, hyphenate, capitalize, isSpecialBooleanAttr, includeBooleanAttr, isOn, isModelListener, isFunction, camelize as camelize$1, EMPTY_OBJ, looseToNumber, looseIndexOf, isSet, looseEqual, invokeArrayFns, isHTMLTag, isSVGTag } from '@vue/shared';
 
+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));
+  };
+  const setVars = () => {
+    const vars = getter(instance.proxy);
+    setVarsOnVNode(instance.subTree, vars);
+    updateTeleports(vars);
+  };
+  watchPostEffect(setVars);
+  onMounted(() => {
+    const ob = new MutationObserver(setVars);
+    ob.observe(instance.subTree.el.parentNode, { childList: true });
+    onUnmounted(() => ob.disconnect());
+  });
+}
+function setVarsOnVNode(vnode, vars) {
+  if (vnode.shapeFlag & 128) {
+    const suspense = vnode.suspense;
+    vnode = suspense.activeBranch;
+    if (suspense.pendingBranch && !suspense.isHydrating) {
+      suspense.effects.push(() => {
+        setVarsOnVNode(suspense.activeBranch, vars);
+      });
+    }
+  }
+  while (vnode.component) {
+    vnode = vnode.component.subTree;
+  }
+  if (vnode.shapeFlag & 1 && vnode.el) {
+    setVarsOnNode(vnode.el, vars);
+  } else if (vnode.type === Fragment) {
+    vnode.children.forEach((c) => setVarsOnVNode(c, vars));
+  } else if (vnode.type === Static) {
+    let { el, anchor } = vnode;
+    while (el) {
+      setVarsOnNode(el, vars);
+      if (el === anchor)
+        break;
+      el = el.nextSibling;
+    }
+  }
+}
+function setVarsOnNode(el, vars) {
+  if (el.nodeType === 1) {
+    const style = el.style;
+    let cssText = "";
+    for (const key in vars) {
+      style.setProperty(`--${key}`, vars[key]);
+      cssText += `--${key}: ${vars[key]};`;
+    }
+    style[CSS_VAR_TEXT] = cssText;
+  }
+}
+
 function patchStyle(el, prev, next) {
@@ -421,2 +484,6 @@ const style = el.style;
       if (prev !== next) {
+        const cssVarText = style[CSS_VAR_TEXT];
+        if (cssVarText) {
+          next += ";" + cssVarText;
+        }
         style.cssText = next;
@@ -928,61 +995,2 @@ }
 
-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));
-  };
-  const setVars = () => {
-    const vars = getter(instance.proxy);
-    setVarsOnVNode(instance.subTree, vars);
-    updateTeleports(vars);
-  };
-  watchPostEffect(setVars);
-  onMounted(() => {
-    const ob = new MutationObserver(setVars);
-    ob.observe(instance.subTree.el.parentNode, { childList: true });
-    onUnmounted(() => ob.disconnect());
-  });
-}
-function setVarsOnVNode(vnode, vars) {
-  if (vnode.shapeFlag & 128) {
-    const suspense = vnode.suspense;
-    vnode = suspense.activeBranch;
-    if (suspense.pendingBranch && !suspense.isHydrating) {
-      suspense.effects.push(() => {
-        setVarsOnVNode(suspense.activeBranch, vars);
-      });
-    }
-  }
-  while (vnode.component) {
-    vnode = vnode.component.subTree;
-  }
-  if (vnode.shapeFlag & 1 && vnode.el) {
-    setVarsOnNode(vnode.el, vars);
-  } else if (vnode.type === Fragment) {
-    vnode.children.forEach((c) => setVarsOnVNode(c, vars));
-  } else if (vnode.type === Static) {
-    let { el, anchor } = vnode;
-    while (el) {
-      setVarsOnNode(el, vars);
-      if (el === anchor)
-        break;
-      el = el.nextSibling;
-    }
-  }
-}
-function setVarsOnNode(el, vars) {
-  if (el.nodeType === 1) {
-    const style = el.style;
-    for (const key in vars) {
-      style.setProperty(`--${key}`, vars[key]);
-    }
-  }
-}
-
 const positionMap = /* @__PURE__ */ new WeakMap();
@@ -989,0 +997,0 @@ const newPositionMap = /* @__PURE__ */ new WeakMap();

package.json

 {
   "name": "@vue/runtime-dom",
-  "version": "3.3.11",
+  "version": "3.3.12",
   "description": "@vue/runtime-dom",
@@ -38,6 +38,6 @@ "main": "index.js",
   "dependencies": {
-    "csstype": "^3.1.2",
-    "@vue/shared": "3.3.11",
-    "@vue/runtime-core": "3.3.11"
+    "csstype": "^3.1.3",
+    "@vue/shared": "3.3.12",
+    "@vue/runtime-core": "3.3.12"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

998735

0.15%

Lines of code

27677

0.14%

Worsened metrics

Number of low supply chain risk alerts

19

5.56%

Dependency changes

• + Added

  @vue/reactivity@3.3.12
  (transitive)

• + Added

  @vue/runtime-core@3.3.12
  (transitive)

• + Added

  @vue/shared@3.3.12
  (transitive)

• - Removed

  @vue/reactivity@3.3.11
  (transitive)

• - Removed

  @vue/runtime-core@3.3.11
  (transitive)

• - Removed

  @vue/shared@3.3.11
  (transitive)

• Updated

  @vue/runtime-core@3.3.12

• Updated

  @vue/shared@3.3.12

• Updated

  csstype@^3.1.3