vue 3.2.43 → 3.2.45

package/dist/vue.global.js

@@ -2101,12 +2101,6 @@ var Vue = (function (exports) {
               // components to be unmounted and re-mounted. Queue the update so that we
               // don't end up forcing the same parent to re-render multiple times.
               queueJob(instance.parent.update);
-              // instance is the inner component of an async custom element
-              // invoke to reset styles
-              if (instance.parent.type.__asyncLoader &&
-                  instance.parent.ceReload) {
-                  instance.parent.ceReload(newComp.styles);
-              }
           }
           else if (instance.appContext.reload) {
               // root instance mounted via createApp() has a reload method
@@ -3353,10 +3347,11 @@ var Vue = (function (exports) {
                   callWithAsyncErrorHandling(cb, instance, 3 /* ErrorCodes.WATCH_CALLBACK */, [
                       newValue,
                       // pass undefined as the old value when it's changed for the first time
-                      oldValue === INITIAL_WATCHER_VALUE ||
-                          (isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE)
-                          ? []
-                          : oldValue,
+                      oldValue === INITIAL_WATCHER_VALUE
+                          ? undefined
+                          : (isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE)
+                              ? []
+                              : oldValue,
                       onCleanup
                   ]);
                   oldValue = newValue;
@@ -3953,10 +3948,15 @@ var Vue = (function (exports) {
           }
       });
   }
-  function createInnerComp(comp, { vnode: { ref, props, children, shapeFlag }, parent }) {
+  function createInnerComp(comp, parent) {
+      const { ref, props, children, ce } = parent.vnode;
       const vnode = createVNode(comp, props, children);
       // ensure inner component inherits the async wrapper's ref owner
       vnode.ref = ref;
+      // pass the custom element callback on to the inner comp
+      // and remove it from the async wrapper
+      vnode.ce = ce;
+      delete parent.vnode.ce;
       return vnode;
   }
 
@@ -4114,8 +4114,7 @@ var Vue = (function (exports) {
                   : comp);
               const { include, exclude, max } = props;
               if ((include && (!name || !matches(include, name))) ||
-                  (exclude && name && matches(exclude, name)) ||
-                  (hmrDirtyComponents.has(comp))) {
+                  (exclude && name && matches(exclude, name))) {
                   current = vnode;
                   return rawVNode;
               }
@@ -4225,14 +4224,9 @@ var Vue = (function (exports) {
       }, target);
   }
   function resetShapeFlag(vnode) {
-      let shapeFlag = vnode.shapeFlag;
-      if (shapeFlag & 256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */) {
-          shapeFlag -= 256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */;
-      }
-      if (shapeFlag & 512 /* ShapeFlags.COMPONENT_KEPT_ALIVE */) {
-          shapeFlag -= 512 /* ShapeFlags.COMPONENT_KEPT_ALIVE */;
-      }
-      vnode.shapeFlag = shapeFlag;
+      // bitwise operations to remove keep alive flags
+      vnode.shapeFlag &= ~256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */;
+      vnode.shapeFlag &= ~512 /* ShapeFlags.COMPONENT_KEPT_ALIVE */;
   }
   function getInnerChild(vnode) {
       return vnode.shapeFlag & 128 /* ShapeFlags.SUSPENSE */ ? vnode.ssContent : vnode;
@@ -4531,7 +4525,9 @@ var Vue = (function (exports) {
           (currentRenderingInstance.parent &&
               isAsyncWrapper(currentRenderingInstance.parent) &&
               currentRenderingInstance.parent.isCE)) {
-          return createVNode('slot', name === 'default' ? null : { name }, fallback && fallback());
+          if (name !== 'default')
+              props.name = name;
+          return createVNode('slot', props, fallback && fallback());
       }
       let slot = slots[name];
       if (slot && slot.length > 1) {
@@ -4631,6 +4627,7 @@ var Vue = (function (exports) {
       $watch: i => (instanceWatch.bind(i) )
   });
   const isReservedPrefix = (key) => key === '_' || key === '$';
+  const hasSetupBinding = (state, key) => state !== EMPTY_OBJ && !state.__isScriptSetup && hasOwn(state, key);
   const PublicInstanceProxyHandlers = {
       get({ _: instance }, key) {
           const { ctx, setupState, data, props, accessCache, type, appContext } = instance;
@@ -4638,15 +4635,6 @@ var Vue = (function (exports) {
           if (key === '__isVue') {
               return true;
           }
-          // prioritize <script setup> bindings during dev.
-          // this allows even properties that start with _ or $ to be used - so that
-          // it aligns with the production behavior where the render fn is inlined and
-          // indeed has access to all declared variables.
-          if (setupState !== EMPTY_OBJ &&
-              setupState.__isScriptSetup &&
-              hasOwn(setupState, key)) {
-              return setupState[key];
-          }
           // data / props / ctx
           // This getter gets called for every property access on the render context
           // during render and is a major hotspot. The most expensive part of this
@@ -4669,7 +4657,7 @@ var Vue = (function (exports) {
                       // default: just fallthrough
                   }
               }
-              else if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {
+              else if (hasSetupBinding(setupState, key)) {
                   accessCache[key] = 1 /* AccessTypes.SETUP */;
                   return setupState[key];
               }
@@ -4739,21 +4727,26 @@ var Vue = (function (exports) {
       },
       set({ _: instance }, key, value) {
           const { data, setupState, ctx } = instance;
-          if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {
+          if (hasSetupBinding(setupState, key)) {
               setupState[key] = value;
               return true;
           }
+          else if (setupState.__isScriptSetup &&
+              hasOwn(setupState, key)) {
+              warn$1(`Cannot mutate <script setup> binding "${key}" from Options API.`);
+              return false;
+          }
           else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
               data[key] = value;
               return true;
           }
           else if (hasOwn(instance.props, key)) {
-              warn$1(`Attempting to mutate prop "${key}". Props are readonly.`, instance);
+              warn$1(`Attempting to mutate prop "${key}". Props are readonly.`);
               return false;
           }
           if (key[0] === '$' && key.slice(1) in instance) {
               warn$1(`Attempting to mutate public property "${key}". ` +
-                      `Properties starting with $ are reserved and readonly.`, instance);
+                      `Properties starting with $ are reserved and readonly.`);
               return false;
           }
           else {
@@ -4774,7 +4767,7 @@ var Vue = (function (exports) {
           let normalizedProps;
           return (!!accessCache[key] ||
               (data !== EMPTY_OBJ && hasOwn(data, key)) ||
-              (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) ||
+              hasSetupBinding(setupState, key) ||
               ((normalizedProps = propsOptions[0]) && hasOwn(normalizedProps, key)) ||
               hasOwn(ctx, key) ||
               hasOwn(publicPropertiesMap, key) ||
@@ -7813,6 +7806,10 @@ var Vue = (function (exports) {
                   if (!shallow)
                       traverseStaticChildren(c1, c2);
               }
+              // #6852 also inherit for text nodes
+              if (c2.type === Text) {
+                  c2.el = c1.el;
+              }
               // also inherit for comment nodes, but not placeholders (e.g. v-if which
               // would have received .el during block patch)
               if (c2.type === Comment && !c2.el) {
@@ -7983,6 +7980,7 @@ var Vue = (function (exports) {
                   }
               }
           }
+          updateCssVars(n2);
       },
       remove(vnode, parentComponent, parentSuspense, optimized, { um: unmount, o: { remove: hostRemove } }, doRemove) {
           const { shapeFlag, children, anchor, targetAnchor, target, props } = vnode;
@@ -8061,11 +8059,26 @@ var Vue = (function (exports) {
                   hydrateChildren(targetNode, vnode, target, parentComponent, parentSuspense, slotScopeIds, optimized);
               }
           }
+          updateCssVars(vnode);
       }
       return vnode.anchor && nextSibling(vnode.anchor);
   }
   // Force-casted public typing for h and TSX props inference
   const Teleport = TeleportImpl;
+  function updateCssVars(vnode) {
+      // presence of .ut method indicates owner component uses css vars.
+      // code path here can assume browser environment.
+      const ctx = vnode.ctx;
+      if (ctx && ctx.ut) {
+          let node = vnode.children[0].el;
+          while (node !== vnode.targetAnchor) {
+              if (node.nodeType === 1)
+                  node.setAttribute('data-v-owner', ctx.uid);
+              node = node.nextSibling;
+          }
+          ctx.ut();
+      }
+  }
 
   const Fragment = Symbol('Fragment' );
   const Text = Symbol('Text' );
@@ -8160,6 +8173,10 @@ var Vue = (function (exports) {
   function isSameVNodeType(n1, n2) {
       if (n2.shapeFlag & 6 /* ShapeFlags.COMPONENT */ &&
           hmrDirtyComponents.has(n2.type)) {
+          // #7042, ensure the vnode being unmounted during HMR
+          // bitwise operations to remove keep alive flags
+          n1.shapeFlag &= ~256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */;
+          n2.shapeFlag &= ~512 /* ShapeFlags.COMPONENT_KEPT_ALIVE */;
           // HMR only: if the component has been hot-updated, force a reload.
           return false;
       }
@@ -8215,7 +8232,8 @@ var Vue = (function (exports) {
           patchFlag,
           dynamicProps,
           dynamicChildren: null,
-          appContext: null
+          appContext: null,
+          ctx: currentRenderingInstance
       };
       if (needFullChildrenNormalization) {
           normalizeChildren(vnode, children);
@@ -8382,7 +8400,8 @@ var Vue = (function (exports) {
           ssContent: vnode.ssContent && cloneVNode(vnode.ssContent),
           ssFallback: vnode.ssFallback && cloneVNode(vnode.ssFallback),
           el: vnode.el,
-          anchor: vnode.anchor
+          anchor: vnode.anchor,
+          ctx: vnode.ctx
       };
       return cloned;
   }
@@ -9346,7 +9365,7 @@ var Vue = (function (exports) {
   }
 
   // Core API ------------------------------------------------------------------
-  const version = "3.2.43";
+  const version = "3.2.45";
   /**
    * SSR utils for \@vue/server-renderer. Only exposed in ssr-possible builds.
    * @internal
@@ -9492,6 +9511,7 @@ var Vue = (function (exports) {
           }
       }
   }
+  const semicolonRE = /[^\\];\s*$/;
   const importantRE = /\s*!important$/;
   function setStyle(style, name, val) {
       if (isArray(val)) {
@@ -9500,6 +9520,11 @@ var Vue = (function (exports) {
       else {
           if (val == null)
               val = '';
+          {
+              if (semicolonRE.test(val)) {
+                  warn$1(`Unexpected semicolon at the end of '${name}' style value: '${val}'`);
+              }
+          }
           if (name.startsWith('--')) {
               // custom property definition
               style.setProperty(name, val);
@@ -9829,12 +9854,21 @@ var Vue = (function (exports) {
                       `defined as hydratable. Use \`defineSSRCustomElement\`.`);
               }
               this.attachShadow({ mode: 'open' });
+              if (!this._def.__asyncLoader) {
+                  // for sync component defs we can immediately resolve props
+                  this._resolveProps(this._def);
+              }
           }
       }
       connectedCallback() {
           this._connected = true;
           if (!this._instance) {
-              this._resolveDef();
+              if (this._resolved) {
+                  this._update();
+              }
+              else {
+                  this._resolveDef();
+              }
           }
       }
       disconnectedCallback() {
@@ -9850,9 +9884,6 @@ var Vue = (function (exports) {
        * resolve inner component definition (handle possible async component)
        */
       _resolveDef() {
-          if (this._resolved) {
-              return;
-          }
           this._resolved = true;
           // set initial attrs
           for (let i = 0; i < this.attributes.length; i++) {
@@ -9864,38 +9895,26 @@ var Vue = (function (exports) {
                   this._setAttr(m.attributeName);
               }
           }).observe(this, { attributes: true });
-          const resolve = (def) => {
-              const { props = {}, styles } = def;
-              const hasOptions = !isArray(props);
-              const rawKeys = props ? (hasOptions ? Object.keys(props) : props) : [];
+          const resolve = (def, isAsync = false) => {
+              const { props, styles } = def;
               // cast Number-type props set before resolve
               let numberProps;
-              if (hasOptions) {
-                  for (const key in this._props) {
+              if (props && !isArray(props)) {
+                  for (const key in props) {
                       const opt = props[key];
                       if (opt === Number || (opt && opt.type === Number)) {
-                          this._props[key] = toNumber(this._props[key]);
-                          (numberProps || (numberProps = Object.create(null)))[key] = true;
+                          if (key in this._props) {
+                              this._props[key] = toNumber(this._props[key]);
+                          }
+                          (numberProps || (numberProps = Object.create(null)))[camelize(key)] = true;
                       }
                   }
               }
               this._numberProps = numberProps;
-              // check if there are props set pre-upgrade or connect
-              for (const key of Object.keys(this)) {
-                  if (key[0] !== '_') {
-                      this._setProp(key, this[key], true, false);
-                  }
-              }
-              // defining getter/setters on prototype
-              for (const key of rawKeys.map(camelize)) {
-                  Object.defineProperty(this, key, {
-                      get() {
-                          return this._getProp(key);
-                      },
-                      set(val) {
-                          this._setProp(key, val);
-                      }
-                  });
+              if (isAsync) {
+                  // defining getter/setters on prototype
+                  // for sync defs, this already happened in the constructor
+                  this._resolveProps(def);
               }
               // apply CSS
               this._applyStyles(styles);
@@ -9904,12 +9923,33 @@ var Vue = (function (exports) {
           };
           const asyncDef = this._def.__asyncLoader;
           if (asyncDef) {
-              asyncDef().then(resolve);
+              asyncDef().then(def => resolve(def, true));
           }
           else {
               resolve(this._def);
           }
       }
+      _resolveProps(def) {
+          const { props } = def;
+          const declaredPropKeys = isArray(props) ? props : Object.keys(props || {});
+          // check if there are props set pre-upgrade or connect
+          for (const key of Object.keys(this)) {
+              if (key[0] !== '_' && declaredPropKeys.includes(key)) {
+                  this._setProp(key, this[key], true, false);
+              }
+          }
+          // defining getter/setters on prototype
+          for (const key of declaredPropKeys.map(camelize)) {
+              Object.defineProperty(this, key, {
+                  get() {
+                      return this._getProp(key);
+                  },
+                  set(val) {
+                      this._setProp(key, val);
+                  }
+              });
+          }
+      }
       _setAttr(key) {
           let value = this.getAttribute(key);
           const camelKey = camelize(key);
@@ -9965,27 +10005,31 @@ var Vue = (function (exports) {
                               this._styles.length = 0;
                           }
                           this._applyStyles(newStyles);
-                          // if this is an async component, ceReload is called from the inner
-                          // component so no need to reload the async wrapper
-                          if (!this._def.__asyncLoader) {
-                              // reload
-                              this._instance = null;
-                              this._update();
-                          }
+                          this._instance = null;
+                          this._update();
                       };
                   }
-                  // intercept emit
-                  instance.emit = (event, ...args) => {
+                  const dispatch = (event, args) => {
                       this.dispatchEvent(new CustomEvent(event, {
                           detail: args
                       }));
                   };
+                  // intercept emit
+                  instance.emit = (event, ...args) => {
+                      // dispatch both the raw and hyphenated versions of an event
+                      // to match Vue behavior
+                      dispatch(event, args);
+                      if (hyphenate(event) !== event) {
+                          dispatch(hyphenate(event), args);
+                      }
+                  };
                   // locate nearest Vue custom element parent for provide/inject
                   let parent = this;
                   while ((parent =
                       parent && (parent.parentNode || parent.host))) {
                       if (parent instanceof VueElement) {
                           instance.parent = parent._instance;
+                          instance.provides = parent._instance.provides;
                           break;
                       }
                   }
@@ -10029,7 +10073,14 @@ var Vue = (function (exports) {
           warn$1(`useCssVars is called without current active component instance.`);
           return;
       }
-      const setVars = () => setVarsOnVNode(instance.subTree, getter(instance.proxy));
+      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);
@@ -11030,15 +11081,16 @@ var Vue = (function (exports) {
       [41 /* ErrorCodes.X_V_MODEL_NO_EXPRESSION */]: `v-model is missing expression.`,
       [42 /* ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION */]: `v-model value must be a valid JavaScript member expression.`,
       [43 /* ErrorCodes.X_V_MODEL_ON_SCOPE_VARIABLE */]: `v-model cannot be used on v-for or v-slot scope variables because they are not writable.`,
-      [44 /* ErrorCodes.X_INVALID_EXPRESSION */]: `Error parsing JavaScript expression: `,
-      [45 /* ErrorCodes.X_KEEP_ALIVE_INVALID_CHILDREN */]: `<KeepAlive> expects exactly one child component.`,
+      [44 /* ErrorCodes.X_V_MODEL_ON_PROPS */]: `v-model cannot be used on a prop, because local prop bindings are not writable.\nUse a v-bind binding combined with a v-on listener that emits update:x event instead.`,
+      [45 /* ErrorCodes.X_INVALID_EXPRESSION */]: `Error parsing JavaScript expression: `,
+      [46 /* ErrorCodes.X_KEEP_ALIVE_INVALID_CHILDREN */]: `<KeepAlive> expects exactly one child component.`,
       // generic errors
-      [46 /* ErrorCodes.X_PREFIX_ID_NOT_SUPPORTED */]: `"prefixIdentifiers" option is not supported in this build of compiler.`,
-      [47 /* ErrorCodes.X_MODULE_MODE_NOT_SUPPORTED */]: `ES module mode is not supported in this build of compiler.`,
-      [48 /* ErrorCodes.X_CACHE_HANDLER_NOT_SUPPORTED */]: `"cacheHandlers" option is only supported when the "prefixIdentifiers" option is enabled.`,
-      [49 /* ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED */]: `"scopeId" option is only supported in module mode.`,
+      [47 /* ErrorCodes.X_PREFIX_ID_NOT_SUPPORTED */]: `"prefixIdentifiers" option is not supported in this build of compiler.`,
+      [48 /* ErrorCodes.X_MODULE_MODE_NOT_SUPPORTED */]: `ES module mode is not supported in this build of compiler.`,
+      [49 /* ErrorCodes.X_CACHE_HANDLER_NOT_SUPPORTED */]: `"cacheHandlers" option is only supported when the "prefixIdentifiers" option is enabled.`,
+      [50 /* ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED */]: `"scopeId" option is only supported in module mode.`,
       // just to fulfill types
-      [50 /* ErrorCodes.__EXTEND_POINT__ */]: ``
+      [51 /* ErrorCodes.__EXTEND_POINT__ */]: ``
   };
 
   const FRAGMENT = Symbol(`Fragment` );
@@ -13591,7 +13643,7 @@ var Vue = (function (exports) {
           if (keywordMatch) {
               message = `avoid using JavaScript keyword as property name: "${keywordMatch[0]}"`;
           }
-          context.onError(createCompilerError(44 /* ErrorCodes.X_INVALID_EXPRESSION */, node.loc, undefined, message));
+          context.onError(createCompilerError(45 /* ErrorCodes.X_INVALID_EXPRESSION */, node.loc, undefined, message));
       }
   }
 
@@ -14382,7 +14434,7 @@ var Vue = (function (exports) {
                   // 2. Force keep-alive to always be updated, since it uses raw children.
                   patchFlag |= 1024 /* PatchFlags.DYNAMIC_SLOTS */;
                   if (node.children.length > 1) {
-                      context.onError(createCompilerError(45 /* ErrorCodes.X_KEEP_ALIVE_INVALID_CHILDREN */, {
+                      context.onError(createCompilerError(46 /* ErrorCodes.X_KEEP_ALIVE_INVALID_CHILDREN */, {
                           start: node.children[0].loc.start,
                           end: node.children[node.children.length - 1].loc.end,
                           source: ''
@@ -15208,8 +15260,14 @@ var Vue = (function (exports) {
       const expString = exp.type === 4 /* NodeTypes.SIMPLE_EXPRESSION */ ? exp.content : rawExp;
       // im SFC <script setup> inline mode, the exp may have been transformed into
       // _unref(exp)
-      context.bindingMetadata[rawExp];
-      const maybeRef = !true    /* BindingTypes.SETUP_CONST */;
+      const bindingType = context.bindingMetadata[rawExp];
+      // check props
+      if (bindingType === "props" /* BindingTypes.PROPS */ ||
+          bindingType === "props-aliased" /* BindingTypes.PROPS_ALIASED */) {
+          context.onError(createCompilerError(44 /* ErrorCodes.X_V_MODEL_ON_PROPS */, exp.loc));
+          return createTransformProps();
+      }
+      const maybeRef = !true  ;
       if (!expString.trim() ||
           (!isMemberExpression(expString) && !maybeRef)) {
           context.onError(createCompilerError(42 /* ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION */, exp.loc));
@@ -15311,18 +15369,18 @@ var Vue = (function (exports) {
       /* istanbul ignore if */
       {
           if (options.prefixIdentifiers === true) {
-              onError(createCompilerError(46 /* ErrorCodes.X_PREFIX_ID_NOT_SUPPORTED */));
+              onError(createCompilerError(47 /* ErrorCodes.X_PREFIX_ID_NOT_SUPPORTED */));
           }
           else if (isModuleMode) {
-              onError(createCompilerError(47 /* ErrorCodes.X_MODULE_MODE_NOT_SUPPORTED */));
+              onError(createCompilerError(48 /* ErrorCodes.X_MODULE_MODE_NOT_SUPPORTED */));
           }
       }
       const prefixIdentifiers = !true ;
       if (options.cacheHandlers) {
-          onError(createCompilerError(48 /* ErrorCodes.X_CACHE_HANDLER_NOT_SUPPORTED */));
+          onError(createCompilerError(49 /* ErrorCodes.X_CACHE_HANDLER_NOT_SUPPORTED */));
       }
       if (options.scopeId && !isModuleMode) {
-          onError(createCompilerError(49 /* ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED */));
+          onError(createCompilerError(50 /* ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED */));
       }
       const ast = isString(template) ? baseParse(template, options) : template;
       const [nodeTransforms, directiveTransforms] = getBaseTransformPreset();
@@ -15480,26 +15538,26 @@ var Vue = (function (exports) {
       return createCompilerError(code, loc, DOMErrorMessages );
   }
   const DOMErrorMessages = {
-      [50 /* DOMErrorCodes.X_V_HTML_NO_EXPRESSION */]: `v-html is missing expression.`,
-      [51 /* DOMErrorCodes.X_V_HTML_WITH_CHILDREN */]: `v-html will override element children.`,
-      [52 /* DOMErrorCodes.X_V_TEXT_NO_EXPRESSION */]: `v-text is missing expression.`,
-      [53 /* DOMErrorCodes.X_V_TEXT_WITH_CHILDREN */]: `v-text will override element children.`,
-      [54 /* DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT */]: `v-model can only be used on <input>, <textarea> and <select> elements.`,
-      [55 /* DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT */]: `v-model argument is not supported on plain elements.`,
-      [56 /* DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT */]: `v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.`,
-      [57 /* DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE */]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,
-      [58 /* DOMErrorCodes.X_V_SHOW_NO_EXPRESSION */]: `v-show is missing expression.`,
-      [59 /* DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN */]: `<Transition> expects exactly one child element or component.`,
-      [60 /* DOMErrorCodes.X_IGNORED_SIDE_EFFECT_TAG */]: `Tags with side effect (<script> and <style>) are ignored in client component templates.`
+      [51 /* DOMErrorCodes.X_V_HTML_NO_EXPRESSION */]: `v-html is missing expression.`,
+      [52 /* DOMErrorCodes.X_V_HTML_WITH_CHILDREN */]: `v-html will override element children.`,
+      [53 /* DOMErrorCodes.X_V_TEXT_NO_EXPRESSION */]: `v-text is missing expression.`,
+      [54 /* DOMErrorCodes.X_V_TEXT_WITH_CHILDREN */]: `v-text will override element children.`,
+      [55 /* DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT */]: `v-model can only be used on <input>, <textarea> and <select> elements.`,
+      [56 /* DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT */]: `v-model argument is not supported on plain elements.`,
+      [57 /* DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT */]: `v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.`,
+      [58 /* DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE */]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,
+      [59 /* DOMErrorCodes.X_V_SHOW_NO_EXPRESSION */]: `v-show is missing expression.`,
+      [60 /* DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN */]: `<Transition> expects exactly one child element or component.`,
+      [61 /* DOMErrorCodes.X_IGNORED_SIDE_EFFECT_TAG */]: `Tags with side effect (<script> and <style>) are ignored in client component templates.`
   };
 
   const transformVHtml = (dir, node, context) => {
       const { exp, loc } = dir;
       if (!exp) {
-          context.onError(createDOMCompilerError(50 /* DOMErrorCodes.X_V_HTML_NO_EXPRESSION */, loc));
+          context.onError(createDOMCompilerError(51 /* DOMErrorCodes.X_V_HTML_NO_EXPRESSION */, loc));
       }
       if (node.children.length) {
-          context.onError(createDOMCompilerError(51 /* DOMErrorCodes.X_V_HTML_WITH_CHILDREN */, loc));
+          context.onError(createDOMCompilerError(52 /* DOMErrorCodes.X_V_HTML_WITH_CHILDREN */, loc));
           node.children.length = 0;
       }
       return {
@@ -15512,10 +15570,10 @@ var Vue = (function (exports) {
   const transformVText = (dir, node, context) => {
       const { exp, loc } = dir;
       if (!exp) {
-          context.onError(createDOMCompilerError(52 /* DOMErrorCodes.X_V_TEXT_NO_EXPRESSION */, loc));
+          context.onError(createDOMCompilerError(53 /* DOMErrorCodes.X_V_TEXT_NO_EXPRESSION */, loc));
       }
       if (node.children.length) {
-          context.onError(createDOMCompilerError(53 /* DOMErrorCodes.X_V_TEXT_WITH_CHILDREN */, loc));
+          context.onError(createDOMCompilerError(54 /* DOMErrorCodes.X_V_TEXT_WITH_CHILDREN */, loc));
           node.children.length = 0;
       }
       return {
@@ -15536,12 +15594,12 @@ var Vue = (function (exports) {
           return baseResult;
       }
       if (dir.arg) {
-          context.onError(createDOMCompilerError(55 /* DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT */, dir.arg.loc));
+          context.onError(createDOMCompilerError(56 /* DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT */, dir.arg.loc));
       }
       function checkDuplicatedValue() {
           const value = findProp(node, 'value');
           if (value) {
-              context.onError(createDOMCompilerError(57 /* DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE */, value.loc));
+              context.onError(createDOMCompilerError(58 /* DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE */, value.loc));
           }
       }
       const { tag } = node;
@@ -15569,7 +15627,7 @@ var Vue = (function (exports) {
                               break;
                           case 'file':
                               isInvalidType = true;
-                              context.onError(createDOMCompilerError(56 /* DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT */, dir.loc));
+                              context.onError(createDOMCompilerError(57 /* DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT */, dir.loc));
                               break;
                           default:
                               // text type
@@ -15603,7 +15661,7 @@ var Vue = (function (exports) {
           }
       }
       else {
-          context.onError(createDOMCompilerError(54 /* DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT */, dir.loc));
+          context.onError(createDOMCompilerError(55 /* DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT */, dir.loc));
       }
       // native vmodel doesn't need the `modelValue` props since they are also
       // passed to the runtime as `binding.value`. removing it reduces code size.
@@ -15723,7 +15781,7 @@ var Vue = (function (exports) {
   const transformShow = (dir, node, context) => {
       const { exp, loc } = dir;
       if (!exp) {
-          context.onError(createDOMCompilerError(58 /* DOMErrorCodes.X_V_SHOW_NO_EXPRESSION */, loc));
+          context.onError(createDOMCompilerError(59 /* DOMErrorCodes.X_V_SHOW_NO_EXPRESSION */, loc));
       }
       return {
           props: [],
@@ -15742,7 +15800,7 @@ var Vue = (function (exports) {
                   }
                   // warn multiple transition children
                   if (hasMultipleChildren(node)) {
-                      context.onError(createDOMCompilerError(59 /* DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN */, {
+                      context.onError(createDOMCompilerError(60 /* DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN */, {
                           start: node.children[0].loc.start,
                           end: node.children[node.children.length - 1].loc.end,
                           source: ''
@@ -15781,7 +15839,7 @@ var Vue = (function (exports) {
       if (node.type === 1 /* NodeTypes.ELEMENT */ &&
           node.tagType === 0 /* ElementTypes.ELEMENT */ &&
           (node.tag === 'script' || node.tag === 'style')) {
-          context.onError(createDOMCompilerError(60 /* DOMErrorCodes.X_IGNORED_SIDE_EFFECT_TAG */, node.loc));
+          context.onError(createDOMCompilerError(61 /* DOMErrorCodes.X_IGNORED_SIDE_EFFECT_TAG */, node.loc));
           context.removeNode();
       }
   };