@vue/runtime-dom 3.5.0-beta.3 → 3.5.0

package/dist/runtime-dom.cjs.js

@@ -1,5 +1,5 @@
 /**
-* @vue/runtime-dom v3.5.0-beta.3
+* @vue/runtime-dom v3.5.0
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -551,15 +551,20 @@ function patchAttr(el, key, value, isSVG, instance, isBoolean = shared.isSpecial
 
 function patchDOMProp(el, key, value, parentComponent) {
   if (key === "innerHTML" || key === "textContent") {
-    if (value == null) return;
-    el[key] = value;
+    if (value != null) {
+      el[key] = key === "innerHTML" ? unsafeToTrustedHTML(value) : value;
+    }
     return;
   }
   const tag = el.tagName;
   if (key === "value" && tag !== "PROGRESS" && // custom elements may use _value internally
   !tag.includes("-")) {
     const oldValue = tag === "OPTION" ? el.getAttribute("value") || "" : el.value;
-    const newValue = value == null ? "" : String(value);
+    const newValue = value == null ? (
+      // #11647: value should be set as empty string for null and undefined,
+      // but <input type="checkbox"> should be set as 'on'.
+      el.type === "checkbox" ? "on" : ""
+    ) : String(value);
     if (oldValue !== newValue || !("_value" in el)) {
       el.value = newValue;
     }
@@ -979,6 +984,9 @@ class VueElement extends BaseClass {
         delete this._props[key];
       } else {
         this._props[key] = val;
+        if (key === "key" && this._app) {
+          this._app._ceVNode.key = val;
+        }
       }
       if (shouldUpdate && this._instance) {
         this._update();
@@ -1417,12 +1425,16 @@ const vModelCheckbox = {
 };
 function setChecked(el, { value, oldValue }, vnode) {
   el._modelValue = value;
+  let checked;
   if (shared.isArray(value)) {
-    el.checked = shared.looseIndexOf(value, vnode.props.value) > -1;
+    checked = shared.looseIndexOf(value, vnode.props.value) > -1;
   } else if (shared.isSet(value)) {
-    el.checked = value.has(vnode.props.value);
-  } else if (value !== oldValue) {
-    el.checked = shared.looseEqual(value, getCheckboxValue(el, true));
+    checked = value.has(vnode.props.value);
+  } else {
+    checked = shared.looseEqual(value, getCheckboxValue(el, true));
+  }
+  if (el.checked !== checked) {
+    el.checked = checked;
   }
 }
 const vModelRadio = {

package/dist/runtime-dom.cjs.prod.js

@@ -1,5 +1,5 @@
 /**
-* @vue/runtime-dom v3.5.0-beta.3
+* @vue/runtime-dom v3.5.0
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -536,15 +536,20 @@ function patchAttr(el, key, value, isSVG, instance, isBoolean = shared.isSpecial
 
 function patchDOMProp(el, key, value, parentComponent) {
   if (key === "innerHTML" || key === "textContent") {
-    if (value == null) return;
-    el[key] = value;
+    if (value != null) {
+      el[key] = key === "innerHTML" ? unsafeToTrustedHTML(value) : value;
+    }
     return;
   }
   const tag = el.tagName;
   if (key === "value" && tag !== "PROGRESS" && // custom elements may use _value internally
   !tag.includes("-")) {
     const oldValue = tag === "OPTION" ? el.getAttribute("value") || "" : el.value;
-    const newValue = value == null ? "" : String(value);
+    const newValue = value == null ? (
+      // #11647: value should be set as empty string for null and undefined,
+      // but <input type="checkbox"> should be set as 'on'.
+      el.type === "checkbox" ? "on" : ""
+    ) : String(value);
     if (oldValue !== newValue || !("_value" in el)) {
       el.value = newValue;
     }
@@ -934,6 +939,9 @@ class VueElement extends BaseClass {
         delete this._props[key];
       } else {
         this._props[key] = val;
+        if (key === "key" && this._app) {
+          this._app._ceVNode.key = val;
+        }
       }
       if (shouldUpdate && this._instance) {
         this._update();
@@ -1322,12 +1330,16 @@ const vModelCheckbox = {
 };
 function setChecked(el, { value, oldValue }, vnode) {
   el._modelValue = value;
+  let checked;
   if (shared.isArray(value)) {
-    el.checked = shared.looseIndexOf(value, vnode.props.value) > -1;
+    checked = shared.looseIndexOf(value, vnode.props.value) > -1;
   } else if (shared.isSet(value)) {
-    el.checked = value.has(vnode.props.value);
-  } else if (value !== oldValue) {
-    el.checked = shared.looseEqual(value, getCheckboxValue(el, true));
+    checked = value.has(vnode.props.value);
+  } else {
+    checked = shared.looseEqual(value, getCheckboxValue(el, true));
+  }
+  if (el.checked !== checked) {
+    el.checked = checked;
   }
 }
 const vModelRadio = {

package/dist/runtime-dom.d.ts

@@ -531,6 +531,7 @@ export interface IframeHTMLAttributes extends HTMLAttributes {
     /** @deprecated */
     frameborder?: Numberish;
     height?: Numberish;
+    loading?: 'eager' | 'lazy';
     /** @deprecated */
     marginheight?: Numberish;
     /** @deprecated */

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

@@ -1,5 +1,5 @@
 /**
-* @vue/runtime-dom v3.5.0-beta.3
+* @vue/runtime-dom v3.5.0
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -214,6 +214,14 @@ function isRenderableAttrValue(value) {
   return type === "string" || type === "number" || type === "boolean";
 }
 
+const cssVarNameEscapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g;
+function getEscapedCssVarName(key, doubleEscape) {
+  return key.replace(
+    cssVarNameEscapeSymbolsRE,
+    (s) => `\\${s}`
+  );
+}
+
 function looseCompareArrays(a, b) {
   if (a.length !== b.length) return false;
   let equal = true;
@@ -337,12 +345,13 @@ class EffectScope {
   pause() {
     if (this._active) {
       this._isPaused = true;
+      let i, l;
       if (this.scopes) {
-        for (let i = 0, l = this.scopes.length; i < l; i++) {
+        for (i = 0, l = this.scopes.length; i < l; i++) {
           this.scopes[i].pause();
         }
       }
-      for (let i = 0, l = this.effects.length; i < l; i++) {
+      for (i = 0, l = this.effects.length; i < l; i++) {
         this.effects[i].pause();
       }
     }
@@ -354,12 +363,13 @@ class EffectScope {
     if (this._active) {
       if (this._isPaused) {
         this._isPaused = false;
+        let i, l;
         if (this.scopes) {
-          for (let i = 0, l = this.scopes.length; i < l; i++) {
+          for (i = 0, l = this.scopes.length; i < l; i++) {
             this.scopes[i].resume();
           }
         }
-        for (let i = 0, l = this.effects.length; i < l; i++) {
+        for (i = 0, l = this.effects.length; i < l; i++) {
           this.effects[i].resume();
         }
       }
@@ -552,11 +562,9 @@ function startBatch() {
   batchDepth++;
 }
 function endBatch() {
-  if (batchDepth > 1) {
-    batchDepth--;
+  if (--batchDepth > 0) {
     return;
   }
-  batchDepth--;
   let error;
   while (batchedEffect) {
     let e = batchedEffect;
@@ -1073,7 +1081,7 @@ function apply(self, method, fn, thisArg, wrappedRetFn, args) {
   const needsWrap = arr !== self && !isShallow(self);
   const methodFn = arr[method];
   if (methodFn !== arrayProto[method]) {
-    const result2 = methodFn.apply(arr, args);
+    const result2 = methodFn.apply(self, args);
     return needsWrap ? toReactive(result2) : result2;
   }
   let wrappedFn = fn;
@@ -1215,7 +1223,12 @@ class MutableReactiveHandler extends BaseReactiveHandler {
       }
     }
     const hadKey = isArray(target) && isIntegerKey(key) ? Number(key) < target.length : hasOwn(target, key);
-    const result = Reflect.set(target, key, value, receiver);
+    const result = Reflect.set(
+      target,
+      key,
+      value,
+      isRef(target) ? target : receiver
+    );
     if (target === toRaw(receiver)) {
       if (!hadKey) {
         trigger(target, "add", key, value);
@@ -2028,18 +2041,25 @@ function watch$1(source, cb, options = EMPTY_OBJ) {
     const depth = deep === true ? Infinity : deep;
     getter = () => traverse(baseGetter(), depth);
   }
+  const scope = getCurrentScope();
+  const watchHandle = () => {
+    effect.stop();
+    if (scope) {
+      remove(scope.effects, effect);
+    }
+  };
   if (once) {
     if (cb) {
       const _cb = cb;
       cb = (...args) => {
         _cb(...args);
-        effect.stop();
+        watchHandle();
       };
     } else {
       const _getter = getter;
       getter = () => {
         _getter();
-        effect.stop();
+        watchHandle();
       };
     }
   }
@@ -2108,13 +2128,6 @@ function watch$1(source, cb, options = EMPTY_OBJ) {
   } else {
     effect.run();
   }
-  const scope = getCurrentScope();
-  const watchHandle = () => {
-    effect.stop();
-    if (scope) {
-      remove(scope.effects, effect);
-    }
-  };
   watchHandle.pause = effect.pause.bind(effect);
   watchHandle.resume = effect.resume.bind(effect);
   watchHandle.stop = watchHandle;
@@ -3563,7 +3576,7 @@ function getTransitionRawChildren(children, keepComment = false, parentKey) {
 // @__NO_SIDE_EFFECTS__
 function defineComponent(options, extraOptions) {
   return isFunction(options) ? (
-    // #8326: extend call and options.name access are considered side-effects
+    // #8236: extend call and options.name access are considered side-effects
     // by Rollup, so we have to wrap it in a pure-annotated IIFE.
     /* @__PURE__ */ (() => extend({ name: options.name }, extraOptions, { setup: options }))()
   ) : options;
@@ -3999,8 +4012,7 @@ Server rendered element contains more child nodes than client vdom.`
       const isText = vnode.type === Text;
       if (node) {
         if (isText && !optimized) {
-          let next = children[i + 1];
-          if (next && (next = normalizeVNode(next)).type === Text) {
+          if (i + 1 < l && normalizeVNode(children[i + 1]).type === Text) {
             insert(
               createText(
                 node.data.slice(vnode.children.length)
@@ -4256,7 +4268,10 @@ function resolveCssVars(instance, vnode, expectedMap) {
   if (instance.getCssVars && (vnode === root || root && root.type === Fragment && root.children.includes(vnode))) {
     const cssVars = instance.getCssVars();
     for (const key in cssVars) {
-      expectedMap.set(`--${key}`, String(cssVars[key]));
+      expectedMap.set(
+        `--${getEscapedCssVarName(key)}`,
+        String(cssVars[key])
+      );
     }
   }
   if (vnode === root && instance.parent) {
@@ -4690,6 +4705,7 @@ const KeepAliveImpl = {
       );
       const { include, exclude, max } = props;
       if (include && (!name || !matches(include, name)) || exclude && name && matches(exclude, name)) {
+        vnode.shapeFlag &= ~256;
         current = vnode;
         return rawVNode;
       }
@@ -10344,7 +10360,7 @@ function isMemoSame(cached, memo) {
   return true;
 }
 
-const version = "3.5.0-beta.3";
+const version = "3.5.0";
 const warn = warn$1 ;
 const ErrorTypeStrings = ErrorTypeStrings$1 ;
 const devtools = devtools$1 ;
@@ -10971,15 +10987,20 @@ function patchAttr(el, key, value, isSVG, instance, isBoolean = isSpecialBoolean
 
 function patchDOMProp(el, key, value, parentComponent) {
   if (key === "innerHTML" || key === "textContent") {
-    if (value == null) return;
-    el[key] = value;
+    if (value != null) {
+      el[key] = key === "innerHTML" ? unsafeToTrustedHTML(value) : value;
+    }
     return;
   }
   const tag = el.tagName;
   if (key === "value" && tag !== "PROGRESS" && // custom elements may use _value internally
   !tag.includes("-")) {
     const oldValue = tag === "OPTION" ? el.getAttribute("value") || "" : el.value;
-    const newValue = value == null ? "" : String(value);
+    const newValue = value == null ? (
+      // #11647: value should be set as empty string for null and undefined,
+      // but <input type="checkbox"> should be set as 'on'.
+      el.type === "checkbox" ? "on" : ""
+    ) : String(value);
     if (oldValue !== newValue || !("_value" in el)) {
       el.value = newValue;
     }
@@ -11399,6 +11420,9 @@ class VueElement extends BaseClass {
         delete this._props[key];
       } else {
         this._props[key] = val;
+        if (key === "key" && this._app) {
+          this._app._ceVNode.key = val;
+        }
       }
       if (shouldUpdate && this._instance) {
         this._update();
@@ -11837,12 +11861,16 @@ const vModelCheckbox = {
 };
 function setChecked(el, { value, oldValue }, vnode) {
   el._modelValue = value;
+  let checked;
   if (isArray(value)) {
-    el.checked = looseIndexOf(value, vnode.props.value) > -1;
+    checked = looseIndexOf(value, vnode.props.value) > -1;
   } else if (isSet(value)) {
-    el.checked = value.has(vnode.props.value);
-  } else if (value !== oldValue) {
-    el.checked = looseEqual(value, getCheckboxValue(el, true));
+    checked = value.has(vnode.props.value);
+  } else {
+    checked = looseEqual(value, getCheckboxValue(el, true));
+  }
+  if (el.checked !== checked) {
+    el.checked = checked;
   }
 }
 const vModelRadio = {