fix(runtime-core): ensure prop type validation warning shows custom class names (#7198)

* fix(runtime-core): 

* fix(runtime-core): update

* fix(runtime-core): update reg

* test(runtime-core): add test case for warnings about prop type mismatches

Co-authored-by: Thorsten Luenborg <[email protected]>

Author: baiwusanyu-c

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

@@ -321,6 +321,42 @@ describe('component props', () => {
     expect(`Missing required prop: "num"`).toHaveBeenWarned()
   })
 
+  test('warn on type mismatch', () => {
+    class MyClass {
+
+    }
+    const Comp = {
+      props: {
+        bool: { type: Boolean },
+        str: { type: String },
+        num: { type: Number },
+        arr: { type: Array },
+        obj: { type: Object },
+        cls: { type: MyClass },
+        fn: { type: Function },
+      },
+      setup() {
+        return () => null
+      }
+    }
+    render(h(Comp, {
+        bool: 'true',
+        str: 100,
+        num: '100',
+        arr: {},
+        obj: 'false',
+        cls: {},
+        fn: true,
+    }), nodeOps.createElement('div'))
+    expect(`Invalid prop: type check failed for prop "bool". Expected Boolean, got String`).toHaveBeenWarned()
+    expect(`Invalid prop: type check failed for prop "str". Expected String with value "100", got Number with value 100.`).toHaveBeenWarned()
+    expect(`Invalid prop: type check failed for prop "num". Expected Number with value 100, got String with value "100".`).toHaveBeenWarned()
+    expect(`Invalid prop: type check failed for prop "arr". Expected Array, got Object`).toHaveBeenWarned()
+    expect(`Invalid prop: type check failed for prop "obj". Expected Object, got String with value "false"`).toHaveBeenWarned()
+    expect(`Invalid prop: type check failed for prop "fn". Expected Function, got Boolean with value true.`).toHaveBeenWarned()
+    expect(`Invalid prop: type check failed for prop "cls". Expected MyClass, got Object`).toHaveBeenWarned()
+  })
+
   // #3495
   test('should not warn required props using kebab-case', async () => {
     const Comp = {

packages/runtime-core/src/componentProps.ts

@@ -557,8 +557,8 @@ function validatePropName(key: string) {
 // use function string name to check type constructors
 // so that it works across vms / iframes.
 function getType(ctor: Prop<any>): string {
-  const match = ctor && ctor.toString().match(/^\s*function (\w+)/)
-  return match ? match[1] : ctor === null ? 'null' : ''
+  const match = ctor && ctor.toString().match(/^\s*(function|class) (\w+)/)
+  return match ? match[2] : ctor === null ? 'null' : ''
 }
 
 function isSameType(a: Prop<any>, b: Prop<any>): boolean {