Remove runtime dependency on prop-types (#18127)

gaearon · web-flow · commit d72700ff5a21 · 2020-02-28T01:21:54.000Z
* Remove runtime dep on prop-types

* Fix test
diff --git a/packages/react-art/package.json b/packages/react-art/package.json
@@ -26,7 +26,6 @@
     "create-react-class": "^15.6.2",
     "loose-envify": "^1.1.0",
     "object-assign": "^4.1.1",
-    "prop-types": "^15.6.2",
     "scheduler": "^0.19.0"
   },
   "peerDependencies": {
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
@@ -19,7 +19,6 @@
   "dependencies": {
     "loose-envify": "^1.1.0",
     "object-assign": "^4.1.1",
-    "prop-types": "^15.6.2",
     "scheduler": "^0.19.0"
   },
   "peerDependencies": {
diff --git a/packages/react-dom/src/server/ReactPartialRendererContext.js b/packages/react-dom/src/server/ReactPartialRendererContext.js
@@ -12,14 +12,11 @@ import type {ReactContext} from 'shared/ReactTypes';
 
 import {disableLegacyContext} from 'shared/ReactFeatureFlags';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
-import ReactSharedInternals from 'shared/ReactSharedInternals';
 import getComponentName from 'shared/getComponentName';
-import checkPropTypes from 'prop-types/checkPropTypes';
+import checkPropTypes from 'shared/checkPropTypes';
 
-let ReactDebugCurrentFrame;
 let didWarnAboutInvalidateContextType;
 if (__DEV__) {
-  ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
   didWarnAboutInvalidateContextType = new Set();
 }
 
@@ -42,13 +39,7 @@ function maskContext(type, context) {
 
 function checkContextTypes(typeSpecs, values, location: string) {
   if (__DEV__) {
-    checkPropTypes(
-      typeSpecs,
-      values,
-      location,
-      'Component',
-      ReactDebugCurrentFrame.getCurrentStack,
-    );
+    checkPropTypes(typeSpecs, values, location, 'Component');
   }
 }
 
diff --git a/packages/react-dom/src/shared/ReactControlledValuePropTypes.js b/packages/react-dom/src/shared/ReactControlledValuePropTypes.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import checkPropTypes from 'prop-types/checkPropTypes';
+import checkPropTypes from 'shared/checkPropTypes';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {enableDeprecatedFlareAPI} from 'shared/ReactFeatureFlags';
 
diff --git a/packages/react-flight/package.json b/packages/react-flight/package.json
@@ -29,8 +29,7 @@
   },
   "dependencies": {
     "loose-envify": "^1.1.0",
-    "object-assign": "^4.1.1",
-    "prop-types": "^15.6.2"
+    "object-assign": "^4.1.1"
   },
   "browserify": {
     "transform": [
diff --git a/packages/react-native-renderer/package.json b/packages/react-native-renderer/package.json
@@ -9,7 +9,6 @@
   },
   "dependencies": {
     "object-assign": "^4.1.1",
-    "prop-types": "^15.6.2",
     "scheduler": "^0.11.0"
   },
   "peerDependencies": {
diff --git a/packages/react-noop-renderer/package.json b/packages/react-noop-renderer/package.json
@@ -12,7 +12,6 @@
   "license": "MIT",
   "dependencies": {
     "object-assign": "^4.1.1",
-    "prop-types": "^15.6.2",
     "regenerator-runtime": "^0.11.0",
     "react-reconciler": "*",
     "react-flight": "*",
diff --git a/packages/react-reconciler/package.json b/packages/react-reconciler/package.json
@@ -32,7 +32,6 @@
   "dependencies": {
     "loose-envify": "^1.1.0",
     "object-assign": "^4.1.1",
-    "prop-types": "^15.6.2",
     "scheduler": "^0.19.0"
   },
   "browserify": {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -18,7 +18,7 @@ import type {
 } from './ReactFiberSuspenseComponent';
 import type {SuspenseContext} from './ReactFiberSuspenseContext';
 
-import checkPropTypes from 'prop-types/checkPropTypes';
+import checkPropTypes from 'shared/checkPropTypes';
 
 import {
   IndeterminateComponent,
@@ -75,7 +75,6 @@ import {refineResolvedLazyComponent} from 'shared/ReactLazyComponent';
 import {REACT_LAZY_TYPE, getIteratorFn} from 'shared/ReactSymbols';
 import {
   getCurrentFiberOwnerNameInDevOrNull,
-  getCurrentFiberStackInDev,
   setIsRendering,
 } from './ReactCurrentFiber';
 import {startWorkTimer, cancelWorkTimer} from './ReactDebugFiberPerf';
@@ -296,7 +295,6 @@ function updateForwardRef(
           nextProps, // Resolved props
           'prop',
           getComponentName(Component),
-          getCurrentFiberStackInDev,
         );
       }
     }
@@ -414,7 +412,6 @@ function updateMemoComponent(
           nextProps, // Resolved props
           'prop',
           getComponentName(type),
-          getCurrentFiberStackInDev,
         );
       }
     }
@@ -442,7 +439,6 @@ function updateMemoComponent(
         nextProps, // Resolved props
         'prop',
         getComponentName(type),
-        getCurrentFiberStackInDev,
       );
     }
   }
@@ -501,7 +497,6 @@ function updateSimpleMemoComponent(
           nextProps, // Resolved (SimpleMemoComponent has no defaultProps)
           'prop',
           getComponentName(outerMemoType),
-          getCurrentFiberStackInDev,
         );
       }
       // Inner propTypes will be validated in the function component path.
@@ -626,7 +621,6 @@ function updateFunctionComponent(
           nextProps, // Resolved props
           'prop',
           getComponentName(Component),
-          getCurrentFiberStackInDev,
         );
       }
     }
@@ -793,7 +787,6 @@ function updateClassComponent(
           nextProps, // Resolved props
           'prop',
           getComponentName(Component),
-          getCurrentFiberStackInDev,
         );
       }
     }
@@ -1198,7 +1191,6 @@ function mountLazyComponent(
               resolvedProps, // Resolved for outer only
               'prop',
               getComponentName(Component),
-              getCurrentFiberStackInDev,
             );
           }
         }
@@ -2622,13 +2614,7 @@ function updateContextProvider(
     const providerPropTypes = workInProgress.type.propTypes;
 
     if (providerPropTypes) {
-      checkPropTypes(
-        providerPropTypes,
-        newProps,
-        'prop',
-        'Context.Provider',
-        getCurrentFiberStackInDev,
-      );
+      checkPropTypes(providerPropTypes, newProps, 'prop', 'Context.Provider');
     }
   }
 
@@ -3208,7 +3194,6 @@ function beginWork(
               resolvedProps, // Resolved for outer only
               'prop',
               getComponentName(type),
-              getCurrentFiberStackInDev,
             );
           }
         }
diff --git a/packages/react-reconciler/src/ReactFiberContext.js b/packages/react-reconciler/src/ReactFiberContext.js
@@ -15,9 +15,8 @@ import {disableLegacyContext} from 'shared/ReactFeatureFlags';
 import {ClassComponent, HostRoot} from 'shared/ReactWorkTags';
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
-import checkPropTypes from 'prop-types/checkPropTypes';
+import checkPropTypes from 'shared/checkPropTypes';
 
-import {getCurrentFiberStackInDev} from './ReactCurrentFiber';
 import {startPhaseTimer, stopPhaseTimer} from './ReactDebugFiberPerf';
 import {createCursor, push, pop} from './ReactFiberStack';
 
@@ -105,13 +104,7 @@ function getMaskedContext(
 
     if (__DEV__) {
       const name = getComponentName(type) || 'Unknown';
-      checkPropTypes(
-        contextTypes,
-        context,
-        'context',
-        name,
-        getCurrentFiberStackInDev,
-      );
+      checkPropTypes(contextTypes, context, 'context', name);
     }
 
     // Cache unmasked context so we can avoid recreating masked context unless necessary.
@@ -223,18 +216,7 @@ function processChildContext(
     }
     if (__DEV__) {
       const name = getComponentName(type) || 'Unknown';
-      checkPropTypes(
-        childContextTypes,
-        childContext,
-        'child context',
-        name,
-        // In practice, there is one case in which we won't get a stack. It's when
-        // somebody calls unstable_renderSubtreeIntoContainer() and we process
-        // context from the parent component instance. The stack will be missing
-        // because it's outside of the reconciliation, and so the pointer has not
-        // been set. This is rare and doesn't matter. We'll also remove that API.
-        getCurrentFiberStackInDev,
-      );
+      checkPropTypes(childContextTypes, childContext, 'child context', name);
     }
 
     return {...parentContext, ...childContext};
diff --git a/packages/react-server/package.json b/packages/react-server/package.json
@@ -30,8 +30,7 @@
   },
   "dependencies": {
     "loose-envify": "^1.1.0",
-    "object-assign": "^4.1.1",
-    "prop-types": "^15.6.2"
+    "object-assign": "^4.1.1"
   },
   "browserify": {
     "transform": [
diff --git a/packages/react-test-renderer/package.json b/packages/react-test-renderer/package.json
@@ -20,7 +20,6 @@
   "homepage": "https://reactjs.org/",
   "dependencies": {
     "object-assign": "^4.1.1",
-    "prop-types": "^15.6.2",
     "react-is": "^16.8.6",
     "react-shallow-renderer": "^16.12.0",
     "scheduler": "^0.19.0"
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -27,8 +27,7 @@
   },
   "dependencies": {
     "loose-envify": "^1.1.0",
-    "object-assign": "^4.1.1",
-    "prop-types": "^15.6.2"
+    "object-assign": "^4.1.1"
   },
   "browserify": {
     "transform": [
diff --git a/packages/react/src/ReactElementValidator.js b/packages/react/src/ReactElementValidator.js
@@ -22,7 +22,7 @@ import {
   REACT_ELEMENT_TYPE,
 } from 'shared/ReactSymbols';
 import {warnAboutSpreadingKeyToJSX} from 'shared/ReactFeatureFlags';
-import checkPropTypes from 'prop-types/checkPropTypes';
+import checkPropTypes from 'shared/checkPropTypes';
 
 import ReactCurrentOwner from './ReactCurrentOwner';
 import {
@@ -31,9 +31,7 @@ import {
   cloneElement,
   jsxDEV,
 } from './ReactElement';
-import ReactDebugCurrentFrame, {
-  setCurrentlyValidatingElement,
-} from './ReactDebugCurrentFrame';
+import {setCurrentlyValidatingElement} from './ReactDebugCurrentFrame';
 
 let propTypesMisspellWarningShown;
 
@@ -213,13 +211,7 @@ function validatePropTypes(element) {
     }
     if (propTypes) {
       setCurrentlyValidatingElement(element);
-      checkPropTypes(
-        propTypes,
-        element.props,
-        'prop',
-        name,
-        ReactDebugCurrentFrame.getStackAddendum,
-      );
+      checkPropTypes(propTypes, element.props, 'prop', name);
       setCurrentlyValidatingElement(null);
     } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
       propTypesMisspellWarningShown = true;
diff --git a/packages/react/src/__tests__/ReactElementValidator-test.internal.js b/packages/react/src/__tests__/ReactElementValidator-test.internal.js
@@ -399,7 +399,6 @@ describe('ReactElementValidator', () => {
         'returned a function. You may have forgotten to pass an argument to ' +
         'the type checker creator (arrayOf, instanceOf, objectOf, oneOf, ' +
         'oneOfType, and shape all require an argument).',
-      {withoutStack: true},
     );
   });
 
diff --git a/packages/shared/checkPropTypes.js b/packages/shared/checkPropTypes.js
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+let loggedTypeFailures = {};
+
+export default function checkPropTypes(
+  typeSpecs: Object,
+  values: Object,
+  location: string,
+  componentName: ?string,
+): void {
+  if (__DEV__) {
+    // $FlowFixMe This is okay but Flow doesn't know it.
+    let has = Function.call.bind(Object.prototype.hasOwnProperty);
+    for (let typeSpecName in typeSpecs) {
+      if (has(typeSpecs, typeSpecName)) {
+        let error;
+        // Prop type validation may throw. In case they do, we don't want to
+        // fail the render phase where it didn't fail before. So we log it.
+        // After these have been cleaned up, we'll let them throw.
+        try {
+          // This is intentionally an invariant that gets caught. It's the same
+          // behavior as without this statement except with a better message.
+          if (typeof typeSpecs[typeSpecName] !== 'function') {
+            let err = Error(
+              (componentName || 'React class') +
+                ': ' +
+                location +
+                ' type `' +
+                typeSpecName +
+                '` is invalid; ' +
+                'it must be a function, usually from the `prop-types` package, but received `' +
+                typeof typeSpecs[typeSpecName] +
+                '`.' +
+                'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.',
+            );
+            err.name = 'Invariant Violation';
+            throw err;
+          }
+          error = typeSpecs[typeSpecName](
+            values,
+            typeSpecName,
+            componentName,
+            location,
+            null,
+            'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED',
+          );
+        } catch (ex) {
+          error = ex;
+        }
+        if (error && !(error instanceof Error)) {
+          console.error(
+            '%s: type specification of %s' +
+              ' `%s` is invalid; the type checker ' +
+              'function must return `null` or an `Error` but returned a %s. ' +
+              'You may have forgotten to pass an argument to the type checker ' +
+              'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +
+              'shape all require an argument).',
+            componentName || 'React class',
+            location,
+            typeSpecName,
+            typeof error,
+          );
+        }
+        if (error instanceof Error && !(error.message in loggedTypeFailures)) {
+          // Only monitor this failure once because there tends to be a lot of the
+          // same error.
+          loggedTypeFailures[error.message] = true;
+          console.error('Failed %s type: %s', location, error.message);
+        }
+      }
+    }
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ import type {`
`18`	`18`	`} from './ReactFiberSuspenseComponent';`
`19`	`19`	`import type {SuspenseContext} from './ReactFiberSuspenseContext';`
`20`	`20`
`21`		`-import checkPropTypes from 'prop-types/checkPropTypes';`
	`21`	`+import checkPropTypes from 'shared/checkPropTypes';`
`22`	`22`
`23`	`23`	`import {`
`24`	`24`	`IndeterminateComponent,`
`@@ -75,7 +75,6 @@ import {refineResolvedLazyComponent} from 'shared/ReactLazyComponent';`
`75`	`75`	`import {REACT_LAZY_TYPE, getIteratorFn} from 'shared/ReactSymbols';`
`76`	`76`	`import {`
`77`	`77`	`getCurrentFiberOwnerNameInDevOrNull,`
`78`		`- getCurrentFiberStackInDev,`
`79`	`78`	`setIsRendering,`
`80`	`79`	`} from './ReactCurrentFiber';`
`81`	`80`	`import {startWorkTimer, cancelWorkTimer} from './ReactDebugFiberPerf';`
`@@ -296,7 +295,6 @@ function updateForwardRef(`
`296`	`295`	`nextProps, // Resolved props`
`297`	`296`	`'prop',`
`298`	`297`	`getComponentName(Component),`
`299`		`- getCurrentFiberStackInDev,`
`300`	`298`	`);`
`301`	`299`	`}`
`302`	`300`	`}`
`@@ -414,7 +412,6 @@ function updateMemoComponent(`
`414`	`412`	`nextProps, // Resolved props`
`415`	`413`	`'prop',`
`416`	`414`	`getComponentName(type),`
`417`		`- getCurrentFiberStackInDev,`
`418`	`415`	`);`
`419`	`416`	`}`
`420`	`417`	`}`
`@@ -442,7 +439,6 @@ function updateMemoComponent(`
`442`	`439`	`nextProps, // Resolved props`
`443`	`440`	`'prop',`
`444`	`441`	`getComponentName(type),`
`445`		`- getCurrentFiberStackInDev,`
`446`	`442`	`);`
`447`	`443`	`}`
`448`	`444`	`}`
`@@ -501,7 +497,6 @@ function updateSimpleMemoComponent(`
`501`	`497`	`nextProps, // Resolved (SimpleMemoComponent has no defaultProps)`
`502`	`498`	`'prop',`
`503`	`499`	`getComponentName(outerMemoType),`
`504`		`- getCurrentFiberStackInDev,`
`505`	`500`	`);`
`506`	`501`	`}`
`507`	`502`	`// Inner propTypes will be validated in the function component path.`
`@@ -626,7 +621,6 @@ function updateFunctionComponent(`
`626`	`621`	`nextProps, // Resolved props`
`627`	`622`	`'prop',`
`628`	`623`	`getComponentName(Component),`
`629`		`- getCurrentFiberStackInDev,`
`630`	`624`	`);`
`631`	`625`	`}`
`632`	`626`	`}`
`@@ -793,7 +787,6 @@ function updateClassComponent(`
`793`	`787`	`nextProps, // Resolved props`
`794`	`788`	`'prop',`
`795`	`789`	`getComponentName(Component),`
`796`		`- getCurrentFiberStackInDev,`
`797`	`790`	`);`
`798`	`791`	`}`
`799`	`792`	`}`
`@@ -1198,7 +1191,6 @@ function mountLazyComponent(`
`1198`	`1191`	`resolvedProps, // Resolved for outer only`
`1199`	`1192`	`'prop',`
`1200`	`1193`	`getComponentName(Component),`
`1201`		`- getCurrentFiberStackInDev,`
`1202`	`1194`	`);`
`1203`	`1195`	`}`
`1204`	`1196`	`}`
`@@ -2622,13 +2614,7 @@ function updateContextProvider(`
`2622`	`2614`	`const providerPropTypes = workInProgress.type.propTypes;`
`2623`	`2615`
`2624`	`2616`	`if (providerPropTypes) {`
`2625`		`- checkPropTypes(`
`2626`		`- providerPropTypes,`
`2627`		`- newProps,`
`2628`		`- 'prop',`
`2629`		`- 'Context.Provider',`
`2630`		`- getCurrentFiberStackInDev,`
`2631`		`- );`
	`2617`	`+ checkPropTypes(providerPropTypes, newProps, 'prop', 'Context.Provider');`
`2632`	`2618`	`}`
`2633`	`2619`	`}`
`2634`	`2620`
`@@ -3208,7 +3194,6 @@ function beginWork(`
`3208`	`3194`	`resolvedProps, // Resolved for outer only`
`3209`	`3195`	`'prop',`
`3210`	`3196`	`getComponentName(type),`
`3211`		`- getCurrentFiberStackInDev,`
`3212`	`3197`	`);`
`3213`	`3198`	`}`
`3214`	`3199`	`}`