@vue/runtime-dom 3.3.10 → 3.3.12

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

@@ -1,4 +1,4 @@
-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';
 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';
 
@@ -399,6 +399,69 @@ 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));
+  };
+  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) {
   const style = el.style;
   const isCssString = isString(next);
@@ -417,6 +480,10 @@ function patchStyle(el, prev, next) {
     const currentDisplay = style.display;
     if (isCssString) {
       if (prev !== next) {
+        const cssVarText = style[CSS_VAR_TEXT];
+        if (cssVarText) {
+          next += ";" + cssVarText;
+        }
         style.cssText = next;
       }
     } else if (prev) {
@@ -670,7 +737,9 @@ function shouldSetAsProp(el, key, value, isSVG) {
   }
   if (key === "width" || key === "height") {
     const tag = el.tagName;
-    return !(tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE");
+    if (tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE") {
+      return false;
+    }
   }
   if (isNativeOn(key) && isString(value)) {
     return false;
@@ -921,65 +990,6 @@ function useCssModule(name = "$style") {
   }
 }
 
-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();
 const newPositionMap = /* @__PURE__ */ new WeakMap();
 const moveCbKey = Symbol("_moveCb");

package/dist/runtime-dom.global.js

@@ -238,20 +238,29 @@ var VueRuntimeDOM = (function (exports) {
       return replacer(_key, val.value);
     } else if (isMap(val)) {
       return {
-        [`Map(${val.size})`]: [...val.entries()].reduce((entries, [key, val2]) => {
-          entries[`${key} =>`] = val2;
-          return entries;
-        }, {})
+        [`Map(${val.size})`]: [...val.entries()].reduce(
+          (entries, [key, val2], i) => {
+            entries[stringifySymbol(key, i) + " =>"] = val2;
+            return entries;
+          },
+          {}
+        )
       };
     } else if (isSet(val)) {
       return {
-        [`Set(${val.size})`]: [...val.values()]
+        [`Set(${val.size})`]: [...val.values()].map((v) => stringifySymbol(v))
       };
+    } else if (isSymbol(val)) {
+      return stringifySymbol(val);
     } else if (isObject(val) && !isArray(val) && !isPlainObject(val)) {
       return String(val);
     }
     return val;
   };
+  const stringifySymbol = (v, i = "") => {
+    var _a;
+    return isSymbol(v) ? `Symbol(${(_a = v.description) != null ? _a : i})` : v;
+  };
 
   function warn$1(msg, ...args) {
     console.warn(`[Vue warn] ${msg}`, ...args);
@@ -675,8 +684,13 @@ var VueRuntimeDOM = (function (exports) {
         return isReadonly2;
       } else if (key === "__v_isShallow") {
         return shallow;
-      } else if (key === "__v_raw" && receiver === (isReadonly2 ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap).get(target)) {
-        return target;
+      } else if (key === "__v_raw") {
+        if (receiver === (isReadonly2 ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
+        // this means the reciever is a user proxy of the reactive proxy
+        Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
+          return target;
+        }
+        return;
       }
       const targetIsArray = isArray(target);
       if (!isReadonly2) {
@@ -712,17 +726,19 @@ var VueRuntimeDOM = (function (exports) {
     }
     set(target, key, value, receiver) {
       let oldValue = target[key];
-      if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
-        return false;
-      }
       if (!this._shallow) {
+        const isOldValueReadonly = isReadonly(oldValue);
         if (!isShallow(value) && !isReadonly(value)) {
           oldValue = toRaw(oldValue);
           value = toRaw(value);
         }
         if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
-          oldValue.value = value;
-          return true;
+          if (isOldValueReadonly) {
+            return false;
+          } else {
+            oldValue.value = value;
+            return true;
+          }
         }
       }
       const hadKey = isArray(target) && isIntegerKey(key) ? Number(key) < target.length : hasOwn(target, key);
@@ -1687,13 +1703,16 @@ var VueRuntimeDOM = (function (exports) {
     }
     queueFlush();
   }
-  function flushPreFlushCbs(seen, i = isFlushing ? flushIndex + 1 : 0) {
+  function flushPreFlushCbs(instance, seen, i = isFlushing ? flushIndex + 1 : 0) {
     {
       seen = seen || /* @__PURE__ */ new Map();
     }
     for (; i < queue.length; i++) {
       const cb = queue[i];
       if (cb && cb.pre) {
+        if (instance && cb.id !== instance.uid) {
+          continue;
+        }
         if (checkRecursiveUpdates(seen, cb)) {
           continue;
         }
@@ -2799,7 +2818,7 @@ If this is a native custom element, make sure to exclude it from component resol
       timeout: typeof timeout === "number" ? timeout : -1,
       activeBranch: null,
       pendingBranch: null,
-      isInFallback: true,
+      isInFallback: !isHydrating,
       isHydrating,
       isUnmounted: false,
       effects: [],
@@ -2885,6 +2904,7 @@ If this is a native custom element, make sure to exclude it from component resol
         }
         const { vnode: vnode2, activeBranch, parentComponent: parentComponent2, container: container2, isSVG: isSVG2 } = suspense;
         triggerEvent(vnode2, "onFallback");
+        const anchor2 = next(activeBranch);
         const mountFallback = () => {
           if (!suspense.isInFallback) {
             return;
@@ -2893,7 +2913,7 @@ If this is a native custom element, make sure to exclude it from component resol
             null,
             fallbackVNode,
             container2,
-            next(activeBranch),
+            anchor2,
             parentComponent2,
             null,
             // fallback tree will not have suspense context
@@ -6108,6 +6128,16 @@ If you want to remount the same app, move your app creation logic into a factory
         if (dirs) {
           invokeDirectiveHook(vnode, null, parentComponent, "created");
         }
+        let needCallTransitionHooks = false;
+        if (isTemplateNode(el)) {
+          needCallTransitionHooks = needTransition(parentSuspense, transition) && parentComponent && parentComponent.vnode.props && parentComponent.vnode.props.appear;
+          const content = el.content.firstChild;
+          if (needCallTransitionHooks) {
+            transition.beforeEnter(content);
+          }
+          replaceNode(content, el, parentComponent);
+          vnode.el = el = content;
+        }
         if (props) {
           if (forcePatch || !optimized || patchFlag & (16 | 32)) {
             for (const key in props) {
@@ -6140,16 +6170,6 @@ If you want to remount the same app, move your app creation logic into a factory
         if (vnodeHooks = props && props.onVnodeBeforeMount) {
           invokeVNodeHook(vnodeHooks, parentComponent, vnode);
         }
-        let needCallTransitionHooks = false;
-        if (isTemplateNode(el)) {
-          needCallTransitionHooks = needTransition(parentSuspense, transition) && parentComponent && parentComponent.vnode.props && parentComponent.vnode.props.appear;
-          const content = el.content.firstChild;
-          if (needCallTransitionHooks) {
-            transition.beforeEnter(content);
-          }
-          replaceNode(content, el, parentComponent);
-          vnode.el = el = content;
-        }
         if (dirs) {
           invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
         }
@@ -7239,7 +7259,7 @@ If you want to remount the same app, move your app creation logic into a factory
       updateProps(instance, nextVNode.props, prevProps, optimized);
       updateSlots(instance, nextVNode.children, optimized);
       pauseTracking();
-      flushPreFlushCbs();
+      flushPreFlushCbs(instance);
       resetTracking();
     };
     const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized = false) => {
@@ -9106,7 +9126,7 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.3.10";
+  const version = "3.3.12";
   const ssrUtils = null;
   const resolveFilter = null;
   const compatUtils = null;
@@ -9501,6 +9521,69 @@ Component that was made reactive: `,
     el.style.display = value ? el[vShowOldKey] : "none";
   }
 
+  const CSS_VAR_TEXT = Symbol("CSS_VAR_TEXT" );
+  function useCssVars(getter) {
+    const instance = getCurrentInstance();
+    if (!instance) {
+      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) {
     const style = el.style;
     const isCssString = isString(next);
@@ -9519,6 +9602,10 @@ Component that was made reactive: `,
       const currentDisplay = style.display;
       if (isCssString) {
         if (prev !== next) {
+          const cssVarText = style[CSS_VAR_TEXT];
+          if (cssVarText) {
+            next += ";" + cssVarText;
+          }
           style.cssText = next;
         }
       } else if (prev) {
@@ -9772,7 +9859,9 @@ Component that was made reactive: `,
     }
     if (key === "width" || key === "height") {
       const tag = el.tagName;
-      return !(tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE");
+      if (tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE") {
+        return false;
+      }
     }
     if (isNativeOn(key) && isString(value)) {
       return false;
@@ -10011,65 +10100,6 @@ Component that was made reactive: `,
     }
   }
 
-  function useCssVars(getter) {
-    const instance = getCurrentInstance();
-    if (!instance) {
-      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();
   const newPositionMap = /* @__PURE__ */ new WeakMap();
   const moveCbKey = Symbol("_moveCb");