Merge 942328e4b5 into 5f8314cb7f

packages/runtime-core/__tests__/componentProps.spec.ts

@@ -333,6 +333,41 @@ describe('component props', () => {
     })
   })
 
+  test('extendValidator custom warn message', async () => {
+    let warnMsg = ''
+    vi.spyOn(console, 'warn').mockImplementation(msg => {
+      warnMsg = msg
+    })
+    const Comp = defineComponent({
+      props: {
+        foo: {
+          type: Number,
+          extendValidator: (name, value, props, warn) => {
+            if (typeof value !== 'number') {
+              warn(
+                'Invalid prop: custom validator check failed for prop "' +
+                  name +
+                  '".',
+              )
+            } else if (!Number.isInteger(value)) {
+              warn(`Invalid prop: ${name}. Expected an integer.`)
+            }
+          },
+        },
+        bar: {
+          type: Number,
+        },
+      },
+      template: `<div />`,
+    })
+
+    // Note this one is using the main Vue render so it can compile template
+    // on the fly
+    const root = document.createElement('div')
+    domRender(h(Comp, { foo: 1.1, bar: 2 }), root)
+    expect(warnMsg).toMatch(`Invalid prop: foo. Expected an integer.`)
+  })
+
   //#12011
   test('replace camelize with hyphenate to handle props key', () => {
     const Comp = {

packages/runtime-core/src/componentProps.ts

@@ -25,6 +25,7 @@ import {
   toRawType,
 } from '@vue/shared'
 import { warn } from './warning'
+import type { WarnFunction } from './warning'
 import {
   type ComponentInternalInstance,
   type ComponentOptions,
@@ -57,6 +58,12 @@ export interface PropOptions<T = any, D = T> {
   required?: boolean
   default?: D | DefaultFactory<D> | null | undefined | object
   validator?(value: unknown, props: Data): boolean
+  extendValidator?: (
+    name: string,
+    value: unknown,
+    props: Data,
+    warn: WarnFunction,
+  ) => unknown
   /**
    * @internal
    */
@@ -680,7 +687,7 @@ function validateProp(
   props: Data,
   isAbsent: boolean,
 ) {
-  const { type, required, validator, skipCheck } = prop
+  const { type, required, validator, skipCheck, extendValidator } = prop
   // required!
   if (required && isAbsent) {
     warn('Missing required prop: "' + name + '"')
@@ -707,6 +714,10 @@ function validateProp(
     }
   }
   // custom validator
+  if (extendValidator) {
+    extendValidator(name, value, props, warn)
+    return
+  }
   if (validator && !validator(value, props)) {
     warn('Invalid prop: custom validator check failed for prop "' + name + '".')
   }

packages/runtime-core/src/warning.ts

@@ -78,6 +78,8 @@ export function warn(msg: string, ...args: any[]): void {
   isWarning = false
 }
 
+export type WarnFunction = typeof warn
+
 export function getComponentTrace(): ComponentTraceStack {
   let currentVNode: VNode | null = stack[stack.length - 1]
   if (!currentVNode) {