Remove React.PropTypes references in favor of prop-types

facebook · Apr 11, 2017 · 5006ec8 · 5006ec8
1 parent 957fbc9
commit 5006ec8
Show file tree

Hide file tree

Showing 34 changed files with 253 additions and 175 deletions.
diff --git a/fixtures/dom/package.json b/fixtures/dom/package.json
@@ -8,6 +8,7 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "query-string": "^4.2.3",
+    "prop-types": "^15.5.6",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
     "semver": "^5.3.0"

diff --git a/fixtures/dom/public/index.html b/fixtures/dom/public/index.html
@@ -14,6 +14,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <script src="https://unpkg.com/prop-types@15.5.6/prop-types.js"></script>
     <script src="react-loader.js"></script>
   </head>
   <body>

diff --git a/fixtures/dom/src/components/Fixture.js b/fixtures/dom/src/components/Fixture.js
@@ -1,7 +1,8 @@
+const PropTypes = window.PropTypes;
 const React = window.React;
 
 const propTypes = {
-  children: React.PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
 };
 
 class Fixture extends React.Component {

diff --git a/fixtures/dom/src/components/FixtureSet.js b/fixtures/dom/src/components/FixtureSet.js
@@ -1,8 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const propTypes = {
-  title: React.PropTypes.node.isRequired,
-  description: React.PropTypes.node.isRequired,
+  title: PropTypes.node.isRequired,
+  description: PropTypes.node.isRequired,
 };
 
 class FixtureSet extends React.Component {

diff --git a/fixtures/dom/src/components/TestCase.js b/fixtures/dom/src/components/TestCase.js
@@ -1,14 +1,15 @@
 import cn from 'classnames';
 import semver from 'semver';
 import React from 'react';
+import PropTypes from 'prop-types';
 import { parse } from 'query-string';
-import { semverString } from './propTypes'
+import { semverString } from './propTypes';
 
 const propTypes = {
-  children: React.PropTypes.node.isRequired,
-  title: React.PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+  title: PropTypes.node.isRequired,
   resolvedIn: semverString,
-  resolvedBy: React.PropTypes.string
+  resolvedBy: PropTypes.string
 };
 
 class TestCase extends React.Component {

diff --git a/fixtures/dom/yarn.lock b/fixtures/dom/yarn.lock
@@ -4239,6 +4239,12 @@ promise@7.1.1, promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
+prop-types@^15.5.6:
+  version "15.5.6"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.6.tgz#797a915b1714b645ebb7c5d6cc690346205bd2aa"
+  dependencies:
+    fbjs "^0.8.9"
+
 proxy-addr@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.2.tgz#b4cc5f22610d9535824c123aef9d3cf73c40ba37"

diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "object-assign": "^4.1.1",
     "platform": "^1.1.0",
     "prettier": "^0.22.0",
+    "prop-types": "^15.5.6",
     "rimraf": "^2.6.1",
     "rollup": "^0.41.6",
     "rollup-plugin-alias": "^1.2.1",

diff --git a/scripts/jest/ts-preprocessor.js b/scripts/jest/ts-preprocessor.js
@@ -23,7 +23,7 @@ function compile(content, contentFilename) {
     getSourceFile(filename, languageVersion) {
       var source;
       var jestRegex = /jest\.d\.ts/;
-      var reactRegex = /(?:React|ReactDOM)(?:\.d)?\.ts$/;
+      var reactRegex = /(?:React|ReactDOM|PropTypes)(?:\.d)?\.ts$/;
 
       // `path.normalize` is used to turn forward slashes in
       // the file path into backslashes on Windows.

diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
@@ -68,13 +68,14 @@ const bundles = [
     config: {
       destDir: 'build/',
       globals: {
+        'prop-types': 'PropTypes',
         react: 'React',
       },
       moduleName: 'ReactDOM',
       sourceMap: false,
     },
     entry: 'src/renderers/dom/ReactDOM.js',
-    externals: [],
+    externals: ['prop-types'],
     fbEntry: 'src/fb/ReactDOMFBEntry.js',
     hasteName: 'ReactDOMStack',
     isRenderer: true,
@@ -96,13 +97,14 @@ const bundles = [
     config: {
       destDir: 'build/',
       globals: {
+        'prop-types': 'PropTypes',
         react: 'React',
       },
       moduleName: 'ReactDOM',
       sourceMap: false,
     },
     entry: 'src/renderers/dom/fiber/ReactDOMFiber.js',
-    externals: [],
+    externals: ['prop-types'],
     fbEntry: 'src/fb/ReactDOMFiberFBEntry.js',
     hasteName: 'ReactDOMFiber',
     isRenderer: true,
@@ -127,13 +129,14 @@ const bundles = [
     config: {
       destDir: 'build/',
       globals: {
+        'prop-types': 'PropTypes',
         react: 'React',
       },
       moduleName: 'ReactDOMServer',
       sourceMap: false,
     },
     entry: 'src/renderers/dom/ReactDOMServer.js',
-    externals: [],
+    externals: ['prop-types'],
     fbEntry: 'src/renderers/dom/ReactDOMServer.js',
     hasteName: 'ReactDOMServerStack',
     isRenderer: true,

diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json
@@ -1,29 +1,29 @@
 {
-  "branch": "bundle-fixes",
+  "branch": null,
   "bundleSizes": {
     "react.development.js (UMD_DEV)": {
-      "size": 116098,
-      "gzip": 29520
+      "size": 92740,
+      "gzip": 23440
     },
     "react.production.min.js (UMD_PROD)": {
-      "size": 13707,
-      "gzip": 5073
+      "size": 10409,
+      "gzip": 4091
     },
     "react-dom.development.js (UMD_DEV)": {
-      "size": 563844,
-      "gzip": 130190
+      "size": 563910,
+      "gzip": 130211
     },
     "react-dom.production.min.js (UMD_PROD)": {
-      "size": 120191,
-      "gzip": 37860
+      "size": 120247,
+      "gzip": 37891
     },
     "react-dom-server.development.js (UMD_DEV)": {
-      "size": 476049,
-      "gzip": 115267
+      "size": 476115,
+      "gzip": 115286
     },
     "react-dom-server.production.min.js (UMD_PROD)": {
-      "size": 106489,
-      "gzip": 33035
+      "size": 106540,
+      "gzip": 33071
     },
     "react-art.development.js (UMD_DEV)": {
       "size": 339929,
@@ -34,68 +34,68 @@
       "gzip": 28991
     },
     "react.development.js (NODE_DEV)": {
-      "size": 109110,
-      "gzip": 27479
+      "size": 85810,
+      "gzip": 21432
     },
     "react.production.min.js (NODE_PROD)": {
-      "size": 12598,
-      "gzip": 4649
+      "size": 9288,
+      "gzip": 3659
     },
     "React-dev.js (FB_DEV)": {
-      "size": 110875,
-      "gzip": 28140
+      "size": 87652,
+      "gzip": 22071
     },
     "React-prod.js (FB_PROD)": {
-      "size": 56406,
-      "gzip": 14416
+      "size": 37663,
+      "gzip": 9519
     },
     "ReactDOMStack-dev.js (FB_DEV)": {
-      "size": 522626,
-      "gzip": 124708
+      "size": 522667,
+      "gzip": 124718
     },
     "ReactDOMStack-prod.js (FB_PROD)": {
-      "size": 352708,
-      "gzip": 84660
+      "size": 352737,
+      "gzip": 84668
     },
     "react-dom.development.js (NODE_DEV)": {
-      "size": 542218,
-      "gzip": 125162
+      "size": 542259,
+      "gzip": 125174
     },
     "react-dom.production.min.js (NODE_PROD)": {
-      "size": 116858,
-      "gzip": 36717
+      "size": 116884,
+      "gzip": 36722
     },
     "ReactDOMFiber-dev.js (FB_DEV)": {
-      "size": 797268,
-      "gzip": 184134
+      "size": 797309,
+      "gzip": 184144
     },
     "ReactDOMFiber-prod.js (FB_PROD)": {
-      "size": 407540,
-      "gzip": 93567
+      "size": 407569,
+      "gzip": 93574
     },
     "react-dom-server.development.js (NODE_DEV)": {
-      "size": 445452,
-      "gzip": 107574
+      "size": 445493,
+      "gzip": 107585
     },
     "react-dom-server.production.min.js (NODE_PROD)": {
-      "size": 101344,
-      "gzip": 31273
+      "size": 101370,
+      "gzip": 31284
     },
     "ReactDOMServerStack-dev.js (FB_DEV)": {
-      "size": 444144,
-      "gzip": 107423
+      "size": 444185,
+      "gzip": 107436
     },
     "ReactDOMServerStack-prod.js (FB_PROD)": {
-      "size": 333744,
-      "gzip": 80424
+      "size": 333773,
+      "gzip": 80431
     },
     "ReactARTStack-dev.js (FB_DEV)": {
-      "size": 141589,
-      "gzip": 32280
+      "size": 142890,
+      "gzip": 32689
     },
     "ReactARTStack-prod.js (FB_PROD)": {
-      "size": 99762,
-      "gzip": 22576
+      "size": 101099,
+      "gzip": 22973
     },
     "react-art.development.js (NODE_DEV)": {
       "size": 265123,

diff --git a/src/isomorphic/classic/__tests__/ReactContextValidator-test.js b/src/isomorphic/classic/__tests__/ReactContextValidator-test.js
@@ -367,4 +367,4 @@ describe('ReactContextValidator', () => {
     expect(childContext.bar).toBeUndefined();
     expect(childContext.foo).toBe('FOO');
   });
-});
+});
diff --git a/src/isomorphic/classic/class/__tests__/create-react-class-integration-test.js b/src/isomorphic/classic/class/__tests__/create-react-class-integration-test.js
@@ -11,15 +11,17 @@
 
 'use strict';
 
+var PropTypes;
 var React;
 var ReactDOM;
 var ReactTestUtils;
 var createReactClass;
 
 describe('create-react-class-integration', () => {
   beforeEach(() => {
-    React = require('React');
-    ReactDOM = require('ReactDOM');
+    PropTypes = require('prop-types');
+    React = require('react');
+    ReactDOM = require('react-dom');
     ReactTestUtils = require('ReactTestUtils');
     var createReactClassFactory = require('create-react-class/factory');
     createReactClass = createReactClassFactory(
@@ -188,13 +190,13 @@ describe('create-react-class-integration', () => {
     createReactClass({
       mixins: [{}],
       propTypes: {
-        foo: React.PropTypes.string,
+        foo: PropTypes.string,
       },
       contextTypes: {
-        foo: React.PropTypes.string,
+        foo: PropTypes.string,
       },
       childContextTypes: {
-        foo: React.PropTypes.string,
+        foo: PropTypes.string,
       },
       render: function() {
         return <div />;
@@ -268,7 +270,7 @@ describe('create-react-class-integration', () => {
   it('renders based on context getInitialState', () => {
     var Foo = createReactClass({
       contextTypes: {
-        className: React.PropTypes.string,
+        className: PropTypes.string,
       },
       getInitialState() {
         return {className: this.context.className};
@@ -280,7 +282,7 @@ describe('create-react-class-integration', () => {
 
     var Outer = createReactClass({
       childContextTypes: {
-        className: React.PropTypes.string,
+        className: PropTypes.string,
       },
       getChildContext() {
         return {className: 'foo'};

diff --git a/src/isomorphic/classic/element/__tests__/ReactElement-test.js b/src/isomorphic/classic/element/__tests__/ReactElement-test.js
@@ -11,6 +11,7 @@
 
 'use strict';
 
+var PropTypes;
 var React;
 var ReactDOM;
 var ReactTestUtils;
@@ -28,6 +29,7 @@ describe('ReactElement', () => {
     originalSymbol = global.Symbol;
     global.Symbol = undefined;
 
+    PropTypes = require('prop-types');
     React = require('react');
     ReactDOM = require('react-dom');
     ReactTestUtils = require('ReactTestUtils');

diff --git a/src/isomorphic/classic/element/__tests__/ReactElementClone-test.js b/src/isomorphic/classic/element/__tests__/ReactElementClone-test.js
@@ -11,6 +11,7 @@
 
 'use strict';
 
+var PropTypes;
 var React;
 var ReactDOM;
 var ReactTestUtils;
@@ -19,6 +20,7 @@ describe('ReactElementClone', () => {
   var ComponentClass;
 
   beforeEach(() => {
+    PropTypes = require('prop-types');
     React = require('react');
     ReactDOM = require('react-dom');
     ReactTestUtils = require('ReactTestUtils');
@@ -288,13 +290,13 @@ describe('ReactElementClone', () => {
   it('should check declared prop types after clone', () => {
     spyOn(console, 'error');
     class Component extends React.Component {
+      static propTypes = {
+        color: React.PropTypes.string.isRequired,
+      };
       render() {
         return React.createElement('div', null, 'My color is ' + this.color);
       }
     }
-    Component.propTypes = {
-      color: React.PropTypes.string.isRequired,
-    };
     class Parent extends React.Component {
       render() {
         return React.cloneElement(this.props.child, {color: 123});
-Original file line number
+Diff line change
@@ Expand Up / @@ -367,4 +367,4 @@ describe('ReactContextValidator', () => { @@
         expect(childContext.bar).toBeUndefined();
         expect(childContext.foo).toBe('FOO');
       });
-    });
+    });