@vue/runtime-dom 3.3.8 → 3.3.10

package/dist/runtime-dom.cjs.js

@@ -619,7 +619,8 @@ function patchStopImmediatePropagation(e, value) {
   }
 }
 
-const nativeOnRE = /^on[a-z]/;
+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, isSVG = false, prevChildren, parentComponent, parentSuspense, unmountChildren) => {
   if (key === "class") {
     patchClass(el, nextValue, isSVG);
@@ -653,7 +654,7 @@ function shouldSetAsProp(el, key, value, isSVG) {
     if (key === "innerHTML" || key === "textContent") {
       return true;
     }
-    if (key in el && nativeOnRE.test(key) && shared.isFunction(value)) {
+    if (key in el && isNativeOn(key) && shared.isFunction(value)) {
       return true;
     }
     return false;
@@ -670,7 +671,11 @@ function shouldSetAsProp(el, key, value, isSVG) {
   if (key === "type" && el.tagName === "TEXTAREA") {
     return false;
   }
-  if (nativeOnRE.test(key) && shared.isString(value)) {
+  if (key === "width" || key === "height") {
+    const tag = el.tagName;
+    return !(tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE");
+  }
+  if (isNativeOn(key) && shared.isString(value)) {
     return false;
   }
   return key in el;
@@ -1097,21 +1102,20 @@ const vModelText = {
     el[assignKey] = getModelAssigner(vnode);
     if (el.composing)
       return;
+    const elValue = number || el.type === "number" ? shared.looseToNumber(el.value) : el.value;
+    const newValue = value == null ? "" : value;
+    if (elValue === newValue) {
+      return;
+    }
     if (document.activeElement === el && el.type !== "range") {
       if (lazy) {
         return;
       }
-      if (trim && el.value.trim() === value) {
-        return;
-      }
-      if ((number || el.type === "number") && shared.looseToNumber(el.value) === value) {
+      if (trim && el.value.trim() === newValue) {
         return;
       }
     }
-    const newValue = value == null ? "" : value;
-    if (el.value !== newValue) {
-      el.value = newValue;
-    }
+    el.value = newValue;
   }
 };
 const vModelCheckbox = {
@@ -1331,14 +1335,14 @@ const modifierGuards = {
   exact: (e, modifiers) => systemModifiers.some((m) => e[`${m}Key`] && !modifiers.includes(m))
 };
 const withModifiers = (fn, modifiers) => {
-  return (event, ...args) => {
+  return fn._withMods || (fn._withMods = (event, ...args) => {
     for (let i = 0; i < modifiers.length; i++) {
       const guard = modifierGuards[modifiers[i]];
       if (guard && guard(event, modifiers))
         return;
     }
     return fn(event, ...args);
-  };
+  });
 };
 const keyNames = {
   esc: "escape",
@@ -1350,7 +1354,7 @@ const keyNames = {
   delete: "backspace"
 };
 const withKeys = (fn, modifiers) => {
-  return (event) => {
+  return fn._withKeys || (fn._withKeys = (event) => {
     if (!("key" in event)) {
       return;
     }
@@ -1358,7 +1362,7 @@ const withKeys = (fn, modifiers) => {
     if (modifiers.some((k) => k === eventKey || keyNames[k] === eventKey)) {
       return fn(event);
     }
-  };
+  });
 };
 
 const rendererOptions = /* @__PURE__ */ shared.extend({ patchProp }, nodeOps);

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

@@ -602,7 +602,8 @@ function patchStopImmediatePropagation(e, value) {
   }
 }
 
-const nativeOnRE = /^on[a-z]/;
+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, isSVG = false, prevChildren, parentComponent, parentSuspense, unmountChildren) => {
   if (key === "class") {
     patchClass(el, nextValue, isSVG);
@@ -636,7 +637,7 @@ function shouldSetAsProp(el, key, value, isSVG) {
     if (key === "innerHTML" || key === "textContent") {
       return true;
     }
-    if (key in el && nativeOnRE.test(key) && shared.isFunction(value)) {
+    if (key in el && isNativeOn(key) && shared.isFunction(value)) {
       return true;
     }
     return false;
@@ -653,7 +654,11 @@ function shouldSetAsProp(el, key, value, isSVG) {
   if (key === "type" && el.tagName === "TEXTAREA") {
     return false;
   }
-  if (nativeOnRE.test(key) && shared.isString(value)) {
+  if (key === "width" || key === "height") {
+    const tag = el.tagName;
+    return !(tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE");
+  }
+  if (isNativeOn(key) && shared.isString(value)) {
     return false;
   }
   return key in el;
@@ -1056,21 +1061,20 @@ const vModelText = {
     el[assignKey] = getModelAssigner(vnode);
     if (el.composing)
       return;
+    const elValue = number || el.type === "number" ? shared.looseToNumber(el.value) : el.value;
+    const newValue = value == null ? "" : value;
+    if (elValue === newValue) {
+      return;
+    }
     if (document.activeElement === el && el.type !== "range") {
       if (lazy) {
         return;
       }
-      if (trim && el.value.trim() === value) {
-        return;
-      }
-      if ((number || el.type === "number") && shared.looseToNumber(el.value) === value) {
+      if (trim && el.value.trim() === newValue) {
         return;
       }
     }
-    const newValue = value == null ? "" : value;
-    if (el.value !== newValue) {
-      el.value = newValue;
-    }
+    el.value = newValue;
   }
 };
 const vModelCheckbox = {
@@ -1287,14 +1291,14 @@ const modifierGuards = {
   exact: (e, modifiers) => systemModifiers.some((m) => e[`${m}Key`] && !modifiers.includes(m))
 };
 const withModifiers = (fn, modifiers) => {
-  return (event, ...args) => {
+  return fn._withMods || (fn._withMods = (event, ...args) => {
     for (let i = 0; i < modifiers.length; i++) {
       const guard = modifierGuards[modifiers[i]];
       if (guard && guard(event, modifiers))
         return;
     }
     return fn(event, ...args);
-  };
+  });
 };
 const keyNames = {
   esc: "escape",
@@ -1306,7 +1310,7 @@ const keyNames = {
   delete: "backspace"
 };
 const withKeys = (fn, modifiers) => {
-  return (event) => {
+  return fn._withKeys || (fn._withKeys = (event) => {
     if (!("key" in event)) {
       return;
     }
@@ -1314,7 +1318,7 @@ const withKeys = (fn, modifiers) => {
     if (modifiers.some((k) => k === eventKey || keyNames[k] === eventKey)) {
       return fn(event);
     }
-  };
+  });
 };
 
 const rendererOptions = /* @__PURE__ */ shared.extend({ patchProp }, nodeOps);

package/dist/runtime-dom.d.ts

@@ -1,4 +1,4 @@
-import { SetupContext, RenderFunction, ComputedOptions, MethodOptions, ComponentOptionsMixin, EmitsOptions, ComponentInjectOptions, SlotsType, ComponentOptionsWithoutProps, ComponentOptionsWithArrayProps, ComponentPropsOptions, ComponentOptionsWithObjectProps, ExtractPropTypes, ComponentPublicInstance, RootHydrateFunction, ConcreteComponent, BaseTransitionProps, FunctionalComponent, ObjectDirective, VNodeRef, RootRenderFunction, CreateAppFunction } from '@vue/runtime-core';
+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';
 export * from '@vue/runtime-core';
 import * as CSS from 'csstype';
 
@@ -17,9 +17,7 @@ export declare function defineCustomElement<PropNames extends string, RawBinding
 export declare function defineCustomElement<PropsOptions extends Readonly<ComponentPropsOptions>, RawBindings, D, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, E extends EmitsOptions = Record<string, any>, EE extends string = string, I extends ComponentInjectOptions = {}, II extends string = string, S extends SlotsType = {}>(options: ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE, I, II, S> & {
     styles?: string[];
 }): VueElementConstructor<ExtractPropTypes<PropsOptions>>;
-export declare function defineCustomElement(options: {
-    new (...args: any[]): ComponentPublicInstance;
-}): VueElementConstructor;
+export declare function defineCustomElement<P>(options: DefineComponent<P, any, any, any>): VueElementConstructor<ExtractPropTypes<P>>;
 /*! #__NO_SIDE_EFFECTS__ */
 export declare const defineSSRCustomElement: typeof defineCustomElement;
 declare const BaseClass: {
@@ -104,11 +102,15 @@ export declare const vModelDynamic: ObjectDirective<HTMLInputElement | HTMLSelec
 /**
  * @private
  */
-export declare const withModifiers: (fn: Function, modifiers: string[]) => (event: Event, ...args: unknown[]) => any;
+export declare const withModifiers: <T extends (event: Event, ...args: unknown[]) => any>(fn: T & {
+    _withMods?: T | undefined;
+}, modifiers: string[]) => T;
 /**
  * @private
  */
-export declare const withKeys: (fn: Function, modifiers: string[]) => (event: KeyboardEvent) => any;
+export declare const withKeys: <T extends (event: KeyboardEvent) => any>(fn: T & {
+    _withKeys?: T | undefined;
+}, modifiers: string[]) => T;
 
 declare const vShowOldKey: unique symbol;
 interface VShowElement extends HTMLElement {
@@ -315,7 +317,7 @@ interface AriaAttributes {
     /** Defines the human readable text alternative of aria-valuenow for a range widget. */
     'aria-valuetext'?: string;
 }
-export type StyleValue = string | CSSProperties | Array<StyleValue>;
+export type StyleValue = false | null | undefined | string | CSSProperties | Array<StyleValue>;
 export interface HTMLAttributes extends AriaAttributes, EventHandlers<Events> {
     innerHTML?: string;
     class?: any;
@@ -411,7 +413,7 @@ export interface ButtonHTMLAttributes extends HTMLAttributes {
     formtarget?: string;
     name?: string;
     type?: 'submit' | 'reset' | 'button';
-    value?: string | string[] | number;
+    value?: string | ReadonlyArray<string> | number;
 }
 export interface CanvasHTMLAttributes extends HTMLAttributes {
     height?: Numberish;
@@ -425,10 +427,11 @@ export interface ColgroupHTMLAttributes extends HTMLAttributes {
     span?: Numberish;
 }
 export interface DataHTMLAttributes extends HTMLAttributes {
-    value?: string | string[] | number;
+    value?: string | ReadonlyArray<string> | number;
 }
 export interface DetailsHTMLAttributes extends HTMLAttributes {
     open?: Booleanish;
+    onToggle?: Event;
 }
 export interface DelHTMLAttributes extends HTMLAttributes {
     cite?: string;
@@ -465,13 +468,17 @@ export interface IframeHTMLAttributes extends HTMLAttributes {
     allow?: string;
     allowfullscreen?: Booleanish;
     allowtransparency?: Booleanish;
+    /** @deprecated */
     frameborder?: Numberish;
     height?: Numberish;
+    /** @deprecated */
     marginheight?: Numberish;
+    /** @deprecated */
     marginwidth?: Numberish;
     name?: string;
     referrerpolicy?: HTMLAttributeReferrerPolicy;
     sandbox?: string;
+    /** @deprecated */
     scrolling?: string;
     seamless?: Booleanish;
     src?: string;
@@ -483,13 +490,13 @@ export interface ImgHTMLAttributes extends HTMLAttributes {
     crossorigin?: 'anonymous' | 'use-credentials' | '';
     decoding?: 'async' | 'auto' | 'sync';
     height?: Numberish;
+    loading?: 'eager' | 'lazy';
     referrerpolicy?: HTMLAttributeReferrerPolicy;
     sizes?: string;
     src?: string;
     srcset?: string;
     usemap?: string;
     width?: Numberish;
-    loading?: 'lazy' | 'eager';
 }
 export interface InsHTMLAttributes extends HTMLAttributes {
     cite?: string;
@@ -505,6 +512,7 @@ export interface InputHTMLAttributes extends HTMLAttributes {
     checked?: Booleanish | any[] | Set<any>;
     crossorigin?: string;
     disabled?: Booleanish;
+    enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
     form?: string;
     formaction?: string;
     formenctype?: string;
@@ -545,7 +553,7 @@ export interface LabelHTMLAttributes extends HTMLAttributes {
     form?: string;
 }
 export interface LiHTMLAttributes extends HTMLAttributes {
-    value?: string | string[] | number;
+    value?: string | ReadonlyArray<string> | number;
 }
 export interface LinkHTMLAttributes extends HTMLAttributes {
     as?: string;
@@ -558,6 +566,7 @@ export interface LinkHTMLAttributes extends HTMLAttributes {
     rel?: string;
     sizes?: string;
     type?: string;
+    charset?: string;
 }
 export interface MapHTMLAttributes extends HTMLAttributes {
     name?: string;
@@ -590,7 +599,7 @@ export interface MeterHTMLAttributes extends HTMLAttributes {
     max?: Numberish;
     min?: Numberish;
     optimum?: Numberish;
-    value?: string | string[] | number;
+    value?: string | ReadonlyArray<string> | number;
 }
 export interface QuoteHTMLAttributes extends HTMLAttributes {
     cite?: string;
@@ -628,14 +637,15 @@ export interface OutputHTMLAttributes extends HTMLAttributes {
 }
 export interface ParamHTMLAttributes extends HTMLAttributes {
     name?: string;
-    value?: string | string[] | number;
+    value?: string | ReadonlyArray<string> | number;
 }
 export interface ProgressHTMLAttributes extends HTMLAttributes {
     max?: Numberish;
-    value?: string | string[] | number;
+    value?: string | ReadonlyArray<string> | number;
 }
 export interface ScriptHTMLAttributes extends HTMLAttributes {
     async?: Booleanish;
+    /** @deprecated */
     charset?: string;
     crossorigin?: string;
     defer?: Booleanish;
@@ -674,6 +684,7 @@ export interface TableHTMLAttributes extends HTMLAttributes {
     cellpadding?: Numberish;
     cellspacing?: Numberish;
     summary?: string;
+    width?: Numberish;
 }
 export interface TextareaHTMLAttributes extends HTMLAttributes {
     autocomplete?: string;
@@ -689,7 +700,7 @@ export interface TextareaHTMLAttributes extends HTMLAttributes {
     readonly?: Booleanish;
     required?: Booleanish;
     rows?: Numberish;
-    value?: string | string[] | number;
+    value?: string | ReadonlyArray<string> | number;
     wrap?: string;
 }
 export interface TdHTMLAttributes extends HTMLAttributes {
@@ -698,6 +709,9 @@ export interface TdHTMLAttributes extends HTMLAttributes {
     headers?: string;
     rowspan?: Numberish;
     scope?: string;
+    abbr?: string;
+    height?: Numberish;
+    width?: Numberish;
     valign?: 'top' | 'middle' | 'bottom' | 'baseline';
 }
 export interface ThHTMLAttributes extends HTMLAttributes {
@@ -706,6 +720,7 @@ export interface ThHTMLAttributes extends HTMLAttributes {
     headers?: string;
     rowspan?: Numberish;
     scope?: string;
+    abbr?: string;
 }
 export interface TimeHTMLAttributes extends HTMLAttributes {
     datetime?: string;
@@ -723,6 +738,7 @@ export interface VideoHTMLAttributes extends MediaHTMLAttributes {
     poster?: string;
     width?: Numberish;
     disablePictureInPicture?: Booleanish;
+    disableRemotePlayback?: Booleanish;
 }
 export interface WebViewHTMLAttributes extends HTMLAttributes {
     allowfullscreen?: Booleanish;
@@ -765,6 +781,7 @@ export interface SVGAttributes extends AriaAttributes, EventHandlers<Events> {
     width?: Numberish;
     role?: string;
     tabindex?: Numberish;
+    crossOrigin?: 'anonymous' | 'use-credentials' | '';
     'accent-height'?: Numberish;
     accumulate?: 'none' | 'sum';
     additive?: 'replace' | 'sum';

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

@@ -12,8 +12,8 @@ const EMPTY_ARR = Object.freeze([]) ;
 const NOOP = () => {
 };
 const NO = () => false;
-const onRE = /^on[^a-z]/;
-const isOn = (key) => onRE.test(key);
+const isOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && // uppercase letter
+(key.charCodeAt(2) > 122 || key.charCodeAt(2) < 97);
 const isModelListener = (key) => key.startsWith("onUpdate:");
 const extend = Object.assign;
 const remove = (arr, el) => {
@@ -936,7 +936,7 @@ function createReadonlyMethod(type) {
         toRaw(this)
       );
     }
-    return type === "delete" ? false : this;
+    return type === "delete" ? false : type === "clear" ? void 0 : this;
   };
 }
 function createInstrumentations() {
@@ -2207,9 +2207,19 @@ function renderComponentRoot(instance) {
   try {
     if (vnode.shapeFlag & 4) {
       const proxyToUse = withProxy || proxy;
+      const thisProxy = setupState.__isScriptSetup ? new Proxy(proxyToUse, {
+        get(target, key, receiver) {
+          warn(
+            `Property '${String(
+              key
+            )}' was accessed via 'this'. Avoid using 'this' in templates.`
+          );
+          return Reflect.get(target, key, receiver);
+        }
+      }) : proxyToUse;
       result = normalizeVNode(
         render.call(
-          proxyToUse,
+          thisProxy,
           proxyToUse,
           renderCache,
           props,
@@ -2820,7 +2830,12 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
         if (delayEnter) {
           activeBranch.transition.afterLeave = () => {
             if (pendingId === suspense.pendingId) {
-              move(pendingBranch, container2, anchor2, 0);
+              move(
+                pendingBranch,
+                container2,
+                next(activeBranch),
+                0
+              );
               queuePostFlushCb(effects);
             }
           };
@@ -2867,7 +2882,6 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
       }
       const { vnode: vnode2, activeBranch, parentComponent: parentComponent2, container: container2, isSVG: isSVG2 } = suspense;
       triggerEvent(vnode2, "onFallback");
-      const anchor2 = next(activeBranch);
       const mountFallback = () => {
         if (!suspense.isInFallback) {
           return;
@@ -2876,7 +2890,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
           null,
           fallbackVNode,
           container2,
-          anchor2,
+          next(activeBranch),
           parentComponent2,
           null,
           // fallback tree will not have suspense context
@@ -3171,6 +3185,7 @@ function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EM
   let onCleanup = (fn) => {
     cleanup = effect.onStop = () => {
       callWithErrorHandling(fn, instance, 4);
+      cleanup = effect.onStop = void 0;
     };
   };
   let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
@@ -3641,7 +3656,11 @@ function emptyPlaceholder(vnode) {
   }
 }
 function getKeepAliveChild(vnode) {
-  return isKeepAlive(vnode) ? vnode.children ? vnode.children[0] : void 0 : vnode;
+  return isKeepAlive(vnode) ? (
+    // #7121 ensure get the child component subtree in case
+    // it's been replaced during HMR
+    vnode.component ? vnode.component.subTree : vnode.children ? vnode.children[0] : void 0
+  ) : vnode;
 }
 function setTransitionHooks(vnode, hooks) {
   if (vnode.shapeFlag & 6 && vnode.component) {
@@ -5634,6 +5653,9 @@ function assertType(value, type) {
   };
 }
 function getInvalidTypeMessage(name, value, expectedTypes) {
+  if (expectedTypes.length === 0) {
+    return `Prop type [] for prop "${name}" won't match anything. Did you mean to use type Array instead?`;
+  }
   let message = `Invalid prop: type check failed for prop "${name}". Expected ${expectedTypes.map(capitalize).join(" | ")}`;
   const expectedType = expectedTypes[0];
   const receivedType = toRawType(value);
@@ -5903,6 +5925,20 @@ function createHydrationFunctions(rendererInternals) {
     const { type, ref, shapeFlag, patchFlag } = vnode;
     let domType = node.nodeType;
     vnode.el = node;
+    {
+      if (!("__vnode" in node)) {
+        Object.defineProperty(node, "__vnode", {
+          value: vnode,
+          enumerable: false
+        });
+      }
+      if (!("__vueParentComponent" in node)) {
+        Object.defineProperty(node, "__vueParentComponent", {
+          value: parentComponent,
+          enumerable: false
+        });
+      }
+    }
     if (patchFlag === -2) {
       optimized = false;
       vnode.dynamicChildren = null;
@@ -6064,15 +6100,16 @@ function createHydrationFunctions(rendererInternals) {
   const hydrateElement = (el, vnode, parentComponent, parentSuspense, slotScopeIds, optimized) => {
     optimized = optimized || !!vnode.dynamicChildren;
     const { type, props, patchFlag, shapeFlag, dirs, transition } = vnode;
-    const forcePatchValue = type === "input" && dirs || type === "option";
+    const forcePatch = type === "input" || type === "option";
     {
       if (dirs) {
         invokeDirectiveHook(vnode, null, parentComponent, "created");
       }
       if (props) {
-        if (forcePatchValue || !optimized || patchFlag & (16 | 32)) {
+        if (forcePatch || !optimized || patchFlag & (16 | 32)) {
           for (const key in props) {
-            if (forcePatchValue && key.endsWith("value") || isOn(key) && !isReservedProp(key)) {
+            if (forcePatch && (key.endsWith("value") || key === "indeterminate") || isOn(key) && !isReservedProp(key) || // force hydrate v-bind with .prop modifiers
+            key[0] === ".") {
               patchProp(
                 el,
                 key,
@@ -7829,6 +7866,7 @@ const resolveTarget = (props, select) => {
   }
 };
 const TeleportImpl = {
+  name: "Teleport",
   __isTeleport: true,
   process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, internals) {
     const {
@@ -8250,7 +8288,7 @@ function _createVNode(type, props = null, children = null, patchFlag = 0, dynami
   if (shapeFlag & 4 && isProxy(type)) {
     type = toRaw(type);
     warn(
-      `Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with \`markRaw\` or using \`shallowRef\` instead of \`ref\`.`,
+      `Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with \`markRaw\` or using \`shallowRef\` instead of \`ref\`.`,
       `
 Component that was made reactive: `,
       type
@@ -8875,9 +8913,9 @@ function initCustomFormatter() {
     return;
   }
   const vueStyle = { style: "color:#3ba776" };
-  const numberStyle = { style: "color:#0b1bc9" };
-  const stringStyle = { style: "color:#b62e24" };
-  const keywordStyle = { style: "color:#9d288c" };
+  const numberStyle = { style: "color:#1677ff" };
+  const stringStyle = { style: "color:#f5222d" };
+  const keywordStyle = { style: "color:#eb2f96" };
   const formatter = {
     header(obj) {
       if (!isObject(obj)) {
@@ -9071,7 +9109,7 @@ function isMemoSame(cached, memo) {
   return true;
 }
 
-const version = "3.3.8";
+const version = "3.3.10";
 const ssrUtils = null;
 const resolveFilter = null;
 const compatUtils = null;
@@ -9683,7 +9721,8 @@ function patchStopImmediatePropagation(e, value) {
   }
 }
 
-const nativeOnRE = /^on[a-z]/;
+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, isSVG = false, prevChildren, parentComponent, parentSuspense, unmountChildren) => {
   if (key === "class") {
     patchClass(el, nextValue, isSVG);
@@ -9717,7 +9756,7 @@ function shouldSetAsProp(el, key, value, isSVG) {
     if (key === "innerHTML" || key === "textContent") {
       return true;
     }
-    if (key in el && nativeOnRE.test(key) && isFunction(value)) {
+    if (key in el && isNativeOn(key) && isFunction(value)) {
       return true;
     }
     return false;
@@ -9734,7 +9773,11 @@ function shouldSetAsProp(el, key, value, isSVG) {
   if (key === "type" && el.tagName === "TEXTAREA") {
     return false;
   }
-  if (nativeOnRE.test(key) && isString(value)) {
+  if (key === "width" || key === "height") {
+    const tag = el.tagName;
+    return !(tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE");
+  }
+  if (isNativeOn(key) && isString(value)) {
     return false;
   }
   return key in el;
@@ -10216,21 +10259,20 @@ const vModelText = {
     el[assignKey] = getModelAssigner(vnode);
     if (el.composing)
       return;
+    const elValue = number || el.type === "number" ? looseToNumber(el.value) : el.value;
+    const newValue = value == null ? "" : value;
+    if (elValue === newValue) {
+      return;
+    }
     if (document.activeElement === el && el.type !== "range") {
       if (lazy) {
         return;
       }
-      if (trim && el.value.trim() === value) {
+      if (trim && el.value.trim() === newValue) {
         return;
       }
-      if ((number || el.type === "number") && looseToNumber(el.value) === value) {
-        return;
-      }
-    }
-    const newValue = value == null ? "" : value;
-    if (el.value !== newValue) {
-      el.value = newValue;
     }
+    el.value = newValue;
   }
 };
 const vModelCheckbox = {
@@ -10416,14 +10458,14 @@ const modifierGuards = {
   exact: (e, modifiers) => systemModifiers.some((m) => e[`${m}Key`] && !modifiers.includes(m))
 };
 const withModifiers = (fn, modifiers) => {
-  return (event, ...args) => {
+  return fn._withMods || (fn._withMods = (event, ...args) => {
     for (let i = 0; i < modifiers.length; i++) {
       const guard = modifierGuards[modifiers[i]];
       if (guard && guard(event, modifiers))
         return;
     }
     return fn(event, ...args);
-  };
+  });
 };
 const keyNames = {
   esc: "escape",
@@ -10435,7 +10477,7 @@ const keyNames = {
   delete: "backspace"
 };
 const withKeys = (fn, modifiers) => {
-  return (event) => {
+  return fn._withKeys || (fn._withKeys = (event) => {
     if (!("key" in event)) {
       return;
     }
@@ -10443,7 +10485,7 @@ const withKeys = (fn, modifiers) => {
     if (modifiers.some((k) => k === eventKey || keyNames[k] === eventKey)) {
       return fn(event);
     }
-  };
+  });
 };
 
 const rendererOptions = /* @__PURE__ */ extend({ patchProp }, nodeOps);