@vue/runtime-dom 3.5.16 → 3.6.0-alpha.1

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

@@ -1,5 +1,5 @@
 /**
-* @vue/runtime-dom v3.5.16
+* @vue/runtime-dom v3.6.0-alpha.1
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -484,11 +484,11 @@ function patchStyle(el, prev, next) {
   }
 }
 const importantRE = /\s*!important$/;
-function setStyle(style, name, val) {
-  if (shared.isArray(val)) {
-    val.forEach((v) => setStyle(style, name, v));
+function setStyle(style, name, rawVal) {
+  if (shared.isArray(rawVal)) {
+    rawVal.forEach((v) => setStyle(style, name, v));
   } else {
-    if (val == null) val = "";
+    const val = rawVal == null ? "" : String(rawVal);
     if (name.startsWith("--")) {
       style.setProperty(name, val);
     } else {
@@ -554,8 +554,7 @@ function patchDOMProp(el, key, value, parentComponent, attrName) {
     return;
   }
   const tag = el.tagName;
-  if (key === "value" && tag !== "PROGRESS" && // custom elements may use _value internally
-  !tag.includes("-")) {
+  if (key === "value" && shared.canSetValueDirectly(tag)) {
     const oldValue = tag === "OPTION" ? el.getAttribute("value") || "" : el.value;
     const newValue = value == null ? (
       // #11647: value should be set as empty string for null and undefined,
@@ -667,8 +666,6 @@ function patchStopImmediatePropagation(e, value) {
   }
 }
 
-const isNativeOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && // lowercase letter
-key.charCodeAt(2) > 96 && key.charCodeAt(2) < 123;
 const patchProp = (el, key, prevValue, nextValue, namespace, parentComponent) => {
   const isSVG = namespace === "svg";
   if (key === "class") {
@@ -703,30 +700,15 @@ function shouldSetAsProp(el, key, value, isSVG) {
     if (key === "innerHTML" || key === "textContent") {
       return true;
     }
-    if (key in el && isNativeOn(key) && shared.isFunction(value)) {
+    if (key in el && shared.isNativeOn(key) && shared.isFunction(value)) {
       return true;
     }
     return false;
   }
-  if (key === "spellcheck" || key === "draggable" || key === "translate" || key === "autocorrect") {
+  if (shared.shouldSetAsAttr(el.tagName, key)) {
     return false;
   }
-  if (key === "form") {
-    return false;
-  }
-  if (key === "list" && el.tagName === "INPUT") {
-    return false;
-  }
-  if (key === "type" && el.tagName === "TEXTAREA") {
-    return false;
-  }
-  if (key === "width" || key === "height") {
-    const tag = el.tagName;
-    if (tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE") {
-      return false;
-    }
-  }
-  if (isNativeOn(key) && shared.isString(value)) {
+  if (shared.isNativeOn(key) && shared.isString(value)) {
     return false;
   }
   return key in el;
@@ -884,9 +866,10 @@ class VueElement extends BaseClass {
     };
     const asyncDef = this._def.__asyncLoader;
     if (asyncDef) {
-      this._pendingResolve = asyncDef().then(
-        (def) => resolve(this._def = def, true)
-      );
+      this._pendingResolve = asyncDef().then((def) => {
+        def.configureApp = this._def.configureApp;
+        resolve(this._def = def, true);
+      });
     } else {
       resolve(this._def);
     }
@@ -1266,28 +1249,12 @@ const assignKey = Symbol("_assign");
 const vModelText = {
   created(el, { modifiers: { lazy, trim, number } }, vnode) {
     el[assignKey] = getModelAssigner(vnode);
-    const castToNumber = number || vnode.props && vnode.props.type === "number";
-    addEventListener(el, lazy ? "change" : "input", (e) => {
-      if (e.target.composing) return;
-      let domValue = el.value;
-      if (trim) {
-        domValue = domValue.trim();
-      }
-      if (castToNumber) {
-        domValue = shared.looseToNumber(domValue);
-      }
-      el[assignKey](domValue);
-    });
-    if (trim) {
-      addEventListener(el, "change", () => {
-        el.value = el.value.trim();
-      });
-    }
-    if (!lazy) {
-      addEventListener(el, "compositionstart", onCompositionStart);
-      addEventListener(el, "compositionend", onCompositionEnd);
-      addEventListener(el, "change", onCompositionEnd);
-    }
+    vModelTextInit(
+      el,
+      trim,
+      number || !!(vnode.props && vnode.props.type === "number"),
+      lazy
+    );
   },
   // set value on mounted so it's after min/max for type="range"
   mounted(el, { value }) {
@@ -1295,70 +1262,111 @@ const vModelText = {
   },
   beforeUpdate(el, { value, oldValue, modifiers: { lazy, trim, number } }, vnode) {
     el[assignKey] = getModelAssigner(vnode);
-    if (el.composing) return;
-    const elValue = (number || el.type === "number") && !/^0\d/.test(el.value) ? shared.looseToNumber(el.value) : el.value;
-    const newValue = value == null ? "" : value;
-    if (elValue === newValue) {
+    vModelTextUpdate(el, oldValue, value, trim, number, lazy);
+  }
+};
+const vModelTextInit = (el, trim, number, lazy, set) => {
+  addEventListener(el, lazy ? "change" : "input", (e) => {
+    if (e.target.composing) return;
+    let domValue = el.value;
+    if (trim) {
+      domValue = domValue.trim();
+    }
+    if (number || el.type === "number") {
+      domValue = shared.looseToNumber(domValue);
+    }
+    (0, el[assignKey])(domValue);
+  });
+  if (trim) {
+    addEventListener(el, "change", () => {
+      el.value = el.value.trim();
+    });
+  }
+  if (!lazy) {
+    addEventListener(el, "compositionstart", onCompositionStart);
+    addEventListener(el, "compositionend", onCompositionEnd);
+    addEventListener(el, "change", onCompositionEnd);
+  }
+};
+const vModelTextUpdate = (el, oldValue, value, trim, number, lazy) => {
+  if (el.composing) return;
+  const elValue = (number || el.type === "number") && !/^0\d/.test(el.value) ? shared.looseToNumber(el.value) : el.value;
+  const newValue = value == null ? "" : value;
+  if (elValue === newValue) {
+    return;
+  }
+  if (document.activeElement === el && el.type !== "range") {
+    if (lazy && value === oldValue) {
       return;
     }
-    if (document.activeElement === el && el.type !== "range") {
-      if (lazy && value === oldValue) {
-        return;
-      }
-      if (trim && el.value.trim() === newValue) {
-        return;
-      }
+    if (trim && el.value.trim() === newValue) {
+      return;
     }
-    el.value = newValue;
   }
+  el.value = newValue;
 };
 const vModelCheckbox = {
   // #4096 array checkboxes need to be deep traversed
   deep: true,
   created(el, _, vnode) {
     el[assignKey] = getModelAssigner(vnode);
-    addEventListener(el, "change", () => {
-      const modelValue = el._modelValue;
-      const elementValue = getValue(el);
-      const checked = el.checked;
-      const assign = el[assignKey];
-      if (shared.isArray(modelValue)) {
-        const index = shared.looseIndexOf(modelValue, elementValue);
-        const found = index !== -1;
-        if (checked && !found) {
-          assign(modelValue.concat(elementValue));
-        } else if (!checked && found) {
-          const filtered = [...modelValue];
-          filtered.splice(index, 1);
-          assign(filtered);
-        }
-      } else if (shared.isSet(modelValue)) {
-        const cloned = new Set(modelValue);
-        if (checked) {
-          cloned.add(elementValue);
-        } else {
-          cloned.delete(elementValue);
-        }
-        assign(cloned);
-      } else {
-        assign(getCheckboxValue(el, checked));
-      }
-    });
+    vModelCheckboxInit(el);
   },
   // set initial checked on mount to wait for true-value/false-value
-  mounted: setChecked,
+  mounted(el, binding, vnode) {
+    vModelCheckboxUpdate(
+      el,
+      binding.oldValue,
+      binding.value,
+      vnode.props.value
+    );
+  },
   beforeUpdate(el, binding, vnode) {
     el[assignKey] = getModelAssigner(vnode);
-    setChecked(el, binding, vnode);
+    vModelCheckboxUpdate(
+      el,
+      binding.oldValue,
+      binding.value,
+      vnode.props.value
+    );
   }
 };
-function setChecked(el, { value, oldValue }, vnode) {
+const vModelCheckboxInit = (el, set) => {
+  addEventListener(el, "change", () => {
+    const assign = el[assignKey];
+    const modelValue = el._modelValue;
+    const elementValue = getValue(el);
+    const checked = el.checked;
+    if (shared.isArray(modelValue)) {
+      const index = shared.looseIndexOf(modelValue, elementValue);
+      const found = index !== -1;
+      if (checked && !found) {
+        assign(modelValue.concat(elementValue));
+      } else if (!checked && found) {
+        const filtered = [...modelValue];
+        filtered.splice(index, 1);
+        assign(filtered);
+      }
+    } else if (shared.isSet(modelValue)) {
+      const cloned = new Set(modelValue);
+      if (checked) {
+        cloned.add(elementValue);
+      } else {
+        cloned.delete(elementValue);
+      }
+      assign(cloned);
+    } else {
+      assign(getCheckboxValue(el, checked));
+    }
+  });
+};
+const vModelCheckboxUpdate = (el, oldValue, value, rawValue = getValue(el)) => {
   el._modelValue = value;
   let checked;
   if (shared.isArray(value)) {
-    checked = shared.looseIndexOf(value, vnode.props.value) > -1;
+    checked = shared.looseIndexOf(value, rawValue) > -1;
   } else if (shared.isSet(value)) {
-    checked = value.has(vnode.props.value);
+    checked = value.has(rawValue);
   } else {
     if (value === oldValue) return;
     checked = shared.looseEqual(value, getCheckboxValue(el, true));
@@ -1366,7 +1374,7 @@ function setChecked(el, { value, oldValue }, vnode) {
   if (el.checked !== checked) {
     el.checked = checked;
   }
-}
+};
 const vModelRadio = {
   created(el, { value }, vnode) {
     el.checked = shared.looseEqual(value, vnode.props.value);
@@ -1386,36 +1394,38 @@ const vModelSelect = {
   // <select multiple> value need to be deep traversed
   deep: true,
   created(el, { value, modifiers: { number } }, vnode) {
-    const isSetModel = shared.isSet(value);
-    addEventListener(el, "change", () => {
-      const selectedVal = Array.prototype.filter.call(el.options, (o) => o.selected).map(
-        (o) => number ? shared.looseToNumber(getValue(o)) : getValue(o)
-      );
-      el[assignKey](
-        el.multiple ? isSetModel ? new Set(selectedVal) : selectedVal : selectedVal[0]
-      );
-      el._assigning = true;
-      runtimeCore.nextTick(() => {
-        el._assigning = false;
-      });
-    });
+    vModelSelectInit(el, value, number);
     el[assignKey] = getModelAssigner(vnode);
   },
   // set value in mounted & updated because <select> relies on its children
   // <option>s.
   mounted(el, { value }) {
-    setSelected(el, value);
+    vModelSetSelected(el, value);
   },
   beforeUpdate(el, _binding, vnode) {
     el[assignKey] = getModelAssigner(vnode);
   },
   updated(el, { value }) {
-    if (!el._assigning) {
-      setSelected(el, value);
-    }
+    vModelSetSelected(el, value);
   }
 };
-function setSelected(el, value) {
+const vModelSelectInit = (el, value, number, set) => {
+  const isSetModel = shared.isSet(value);
+  addEventListener(el, "change", () => {
+    const selectedVal = Array.prototype.filter.call(el.options, (o) => o.selected).map(
+      (o) => number ? shared.looseToNumber(getValue(o)) : getValue(o)
+    );
+    (0, el[assignKey])(
+      el.multiple ? isSetModel ? new Set(selectedVal) : selectedVal : selectedVal[0]
+    );
+    el._assigning = true;
+    runtimeCore.nextTick(() => {
+      el._assigning = false;
+    });
+  });
+};
+const vModelSetSelected = (el, value) => {
+  if (el._assigning) return;
   const isMultiple = el.multiple;
   const isArrayValue = shared.isArray(value);
   if (isMultiple && !isArrayValue && !shared.isSet(value)) {
@@ -1443,13 +1453,20 @@ function setSelected(el, value) {
   if (!isMultiple && el.selectedIndex !== -1) {
     el.selectedIndex = -1;
   }
-}
+};
 function getValue(el) {
   return "_value" in el ? el._value : el.value;
 }
 function getCheckboxValue(el, checked) {
   const key = checked ? "_trueValue" : "_falseValue";
-  return key in el ? el[key] : checked;
+  if (key in el) {
+    return el[key];
+  }
+  const attr = checked ? "true-value" : "false-value";
+  if (el.hasAttribute(attr)) {
+    return el.getAttribute(attr);
+  }
+  return checked;
 }
 const vModelDynamic = {
   created(el, binding, vnode) {

package/dist/runtime-dom.d.ts

@@ -42,8 +42,8 @@ export declare const TransitionGroup: {
 declare const vShowOriginalDisplay: unique symbol;
 declare const vShowHidden: unique symbol;
 interface VShowElement extends HTMLElement {
-    [vShowOriginalDisplay]: string;
-    [vShowHidden]: boolean;
+    [vShowOriginalDisplay]?: string;
+    [vShowHidden]?: boolean;
 }
 export declare const vShow: ObjectDirective<VShowElement> & {
     name?: 'show';
@@ -181,7 +181,7 @@ export declare function useCssModule(name?: string): Record<string, string>;
  * Runtime helper for SFC's CSS variable injection feature.
  * @private
  */
-export declare function useCssVars(getter: (ctx: any) => Record<string, string>): void;
+export declare function useCssVars(getter: (ctx: any) => Record<string, unknown>): void;
 
 export interface CSSProperties extends CSS.Properties<string | number>, CSS.PropertiesHyphen<string | number> {
     /**
@@ -1385,13 +1385,13 @@ declare module '@vue/runtime-core' {
         vOn: VOnDirective;
         vBind: VModelDirective;
         vIf: Directive<any, boolean>;
-        VOnce: Directive;
-        VSlot: Directive;
+        vOnce: Directive;
+        vSlot: Directive;
     }
 }
 export declare const render: RootRenderFunction<Element | ShadowRoot>;
 export declare const hydrate: RootHydrateFunction;
-export declare const createApp: CreateAppFunction<Element>;
+export declare const createApp: CreateAppFunction<Element, Component>;
 export declare const createSSRApp: CreateAppFunction<Element>;