From: Evan You <yyx990803@gmail.com>
Date: Mon, 19 Jul 2021 15:20:28 +0000 (-0400)
Subject: fix(runtime-core): fix null type in required + multi-type prop declarations
X-Git-Tag: v3.2.0-beta.2~19
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=bbf6ca9bca942df639ff0357d713413c9a1c4c05;p=thirdparty%2Fvuejs%2Fcore.git

fix(runtime-core): fix null type in required + multi-type prop declarations

fix #4146 (in combination with #4147)
---

diff --git a/packages/runtime-core/__tests__/componentProps.spec.ts b/packages/runtime-core/__tests__/componentProps.spec.ts
index ac1dc13dfc..863b12d069 100644
--- a/packages/runtime-core/__tests__/componentProps.spec.ts
+++ b/packages/runtime-core/__tests__/componentProps.spec.ts
@@ -556,4 +556,21 @@ describe('component props', () => {
     await nextTick()
     expect(serializeInner(root)).toBe(`foo`)
   })
+
+  test('support null in required + multiple-type declarations', () => {
+    const Comp = {
+      props: {
+        foo: { type: [Function, null], required: true }
+      },
+      render() {}
+    }
+    const root = nodeOps.createElement('div')
+    expect(() => {
+      render(h(Comp, { foo: () => {} }), root)
+    }).not.toThrow()
+
+    expect(() => {
+      render(h(Comp, { foo: null }), root)
+    }).not.toThrow()
+  })
 })
diff --git a/packages/runtime-core/src/componentProps.ts b/packages/runtime-core/src/componentProps.ts
index c4ab05dd02..6cc6746a57 100644
--- a/packages/runtime-core/src/componentProps.ts
+++ b/packages/runtime-core/src/componentProps.ts
@@ -529,7 +529,7 @@ function validatePropName(key: string) {
 // 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] : ''
+  return match ? match[1] : ctor === null ? 'null' : ''
 }
 
 function isSameType(a: Prop<any>, b: Prop<any>): boolean {
@@ -637,6 +637,8 @@ function assertType(value: unknown, type: PropConstructor): AssertionResult {
     valid = isObject(value)
   } else if (expectedType === 'Array') {
     valid = isArray(value)
+  } else if (expectedType === 'null') {
+    valid = value === null
   } else {
     valid = value instanceof type
   }
@@ -656,7 +658,7 @@ function getInvalidTypeMessage(
 ): string {
   let message =
     `Invalid prop: type check failed for prop "${name}".` +
-    ` Expected ${expectedTypes.map(capitalize).join(', ')}`
+    ` Expected ${expectedTypes.map(capitalize).join(' | ')}`
   const expectedType = expectedTypes[0]
   const receivedType = toRawType(value)
   const expectedValue = styleValue(value, expectedType)