Clean up exported PropTypes (#3349)

taion · timdorr · commit a11a10bdd17a · 2016-04-18T16:27:32.000-04:00
diff --git a/docs/API.md b/docs/API.md
@@ -680,14 +680,11 @@ One or many [`<Route>`](#route)s or [`PlainRoute`](#plainroute)s.
 
 
 ### `PropTypes`
-The following objects are exposed as properties of the exported PropTypes object:
-- `falsy`: Checks that a component does not have a prop
-- `history`
-- `location`
-- `component`
-- `components`
-- `route`
-- `routes`
+The following prop types are exported at top level and from `react-router/lib/PropTypes`:
+- `routerShape`: Shape for the `router` object on context
+- `locationShape`: Shape for the `location` object on route component props
+
+Previously, a number of prop types intended for internal use were also exported under `PropTypes`. These are deprecated and should not be used.
 
 
 ### `useRoutes(createHistory)` (deprecated)
diff --git a/docs/Troubleshooting.md b/docs/Troubleshooting.md
@@ -6,7 +6,7 @@ You need to add `router` to your component's `contextTypes` to make the router o
 
 ```js
 contextTypes: {
-  router: Router.PropTypes.router
+  router: routerShape.isRequired
 }
 ```
 
diff --git a/docs/guides/ConfirmingNavigation.md b/docs/guides/ConfirmingNavigation.md
@@ -6,7 +6,7 @@ You can prevent a transition from happening or prompt the user before leaving a
 const Home = React.createClass({
 
   contextTypes: {
-    router: Router.PropTypes.router
+    router: routerShape.isRequired
   },
 
   componentDidMount() {
diff --git a/examples/auth-flow-async-with-query-params/app.js b/examples/auth-flow-async-with-query-params/app.js
@@ -1,6 +1,8 @@
-import React, { createClass, PropTypes } from 'react'
+import React, { createClass } from 'react'
 import { render } from 'react-dom'
-import { Router, Route, IndexRoute, browserHistory, Link } from 'react-router'
+import {
+  Router, Route, IndexRoute, browserHistory, Link, routerShape
+} from 'react-router'
 
 function App(props) {
   return (
@@ -12,7 +14,7 @@ function App(props) {
 
 const Form = createClass({
   contextTypes: {
-    router: PropTypes.object.isRequired
+    router: routerShape.isRequired
   },
 
   getInitialState() {
diff --git a/examples/auth-flow/app.js b/examples/auth-flow/app.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from 'react-dom'
-import { browserHistory, Router, Route, Link } from 'react-router'
+import { browserHistory, Router, Route, Link, routerShape } from 'react-router'
 import auth from './auth'
 
 const App = React.createClass({
@@ -58,7 +58,7 @@ const Dashboard = React.createClass({
 const Login = React.createClass({
 
   contextTypes: {
-    router: React.PropTypes.object.isRequired
+    router: routerShape.isRequired
   },
 
   getInitialState() {
diff --git a/examples/confirming-navigation/app.js b/examples/confirming-navigation/app.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from 'react-dom'
-import { browserHistory, Router, Route, Link } from 'react-router'
+import { browserHistory, Router, Route, Link, routerShape } from 'react-router'
 
 const App = React.createClass({
   render() {
@@ -24,7 +24,7 @@ const Dashboard = React.createClass({
 
 const Form = React.createClass({
   contextTypes: {
-    router: React.PropTypes.object.isRequired
+    router: routerShape.isRequired
   },
 
   componentWillMount() {
diff --git a/examples/master-detail/app.js b/examples/master-detail/app.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import { render, findDOMNode } from 'react-dom'
-import { browserHistory, Router, Route, IndexRoute, Link } from 'react-router'
+import {
+  browserHistory, Router, Route, IndexRoute, Link, routerShape
+} from 'react-router'
 import ContactStore from './ContactStore'
 import './app.css'
 
@@ -63,7 +65,7 @@ const Index = React.createClass({
 
 const Contact = React.createClass({
   contextTypes: {
-    router: React.PropTypes.object.isRequired
+    router: routerShape.isRequired
   },
 
   getStateFromStore(props) {
@@ -120,7 +122,7 @@ const Contact = React.createClass({
 
 const NewContact = React.createClass({
   contextTypes: {
-    router: React.PropTypes.object.isRequired
+    router: routerShape.isRequired
   },
 
   createContact(event) {
diff --git a/examples/passing-props-to-children/app.js b/examples/passing-props-to-children/app.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { render } from 'react-dom'
-import { browserHistory, Router, Route, Link } from 'react-router'
+import { browserHistory, Router, Route, Link, routerShape } from 'react-router'
 import './app.css'
 
 const App = React.createClass({
   contextTypes: {
-    router: React.PropTypes.object.isRequired
+    router: routerShape.isRequired
   },
 
   getInitialState() {
diff --git a/modules/History.js b/modules/History.js
@@ -1,5 +1,5 @@
 import warning from './routerWarning'
-import { history } from './PropTypes'
+import { history } from './InternalPropTypes'
 
 /**
  * A mixin that adds the "history" instance variable to components.
diff --git a/modules/IndexRedirect.js b/modules/IndexRedirect.js
@@ -2,7 +2,7 @@ import React from 'react'
 import warning from './routerWarning'
 import invariant from 'invariant'
 import Redirect from './Redirect'
-import { falsy } from './PropTypes'
+import { falsy } from './InternalPropTypes'
 
 const { string, object } = React.PropTypes
 
diff --git a/modules/IndexRoute.js b/modules/IndexRoute.js
@@ -2,7 +2,7 @@ import React from 'react'
 import warning from './routerWarning'
 import invariant from 'invariant'
 import { createRouteFromReactElement } from './RouteUtils'
-import { component, components, falsy } from './PropTypes'
+import { component, components, falsy } from './InternalPropTypes'
 
 const { func } = React.PropTypes
 
diff --git a/modules/InternalPropTypes.js b/modules/InternalPropTypes.js
@@ -0,0 +1,22 @@
+import { PropTypes } from 'react'
+
+const { func, object, arrayOf, oneOfType, element, shape, string } = PropTypes
+
+export function falsy(props, propName, componentName) {
+  if (props[propName])
+    return new Error(`<${componentName}> should not have a "${propName}" prop`)
+}
+
+export const history = shape({
+  listen: func.isRequired,
+  push: func.isRequired,
+  replace: func.isRequired,
+  go: func.isRequired,
+  goBack: func.isRequired,
+  goForward: func.isRequired
+})
+
+export const component = oneOfType([ func, string ])
+export const components = oneOfType([ component, object ])
+export const route = oneOfType([ object, element ])
+export const routes = oneOfType([ route, arrayOf(route) ])
diff --git a/modules/Link.js b/modules/Link.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import warning from './routerWarning'
+import { routerShape } from './PropTypes'
 
 const { bool, object, string, func, oneOfType } = React.PropTypes
 
@@ -49,7 +50,7 @@ function createLocationDescriptor(to, { query, hash, state }) {
 const Link = React.createClass({
 
   contextTypes: {
-    router: object
+    router: routerShape
   },
 
   propTypes: {
diff --git a/modules/PropTypes.js b/modules/PropTypes.js
@@ -1,46 +1,78 @@
 import { PropTypes } from 'react'
 
-const { func, object, arrayOf, oneOfType, element, shape, string } = PropTypes
+import deprecateObjectProperties from './deprecateObjectProperties'
+import * as InternalPropTypes from './InternalPropTypes'
+import warning from './routerWarning'
 
-export function falsy(props, propName, componentName) {
-  if (props[propName])
-    return new Error(`<${componentName}> should not have a "${propName}" prop`)
-}
+const { func, object, shape, string } = PropTypes
 
-export const history = shape({
-  listen: func.isRequired,
+export const routerShape = shape({
   push: func.isRequired,
   replace: func.isRequired,
   go: func.isRequired,
   goBack: func.isRequired,
-  goForward: func.isRequired
+  goForward: func.isRequired,
+  setRouteLeaveHook: func.isRequired,
+  isActive: func.isRequired
 })
 
-export const location = shape({
+export const locationShape = shape({
   pathname: string.isRequired,
   search: string.isRequired,
   state: object,
   action: string.isRequired,
   key: string
 })
 
-export const component = oneOfType([ func, string ])
-export const components = oneOfType([ component, object ])
-export const route = oneOfType([ object, element ])
-export const routes = oneOfType([ route, arrayOf(route) ])
+// Deprecated stuff below:
 
-export const router = shape({
-  push: func.isRequired,
-  replace: func.isRequired,
-  go: func.isRequired,
-  goBack: func.isRequired,
-  goForward: func.isRequired,
-  setRouteLeaveHook: func.isRequired,
-  isActive: func.isRequired
-})
+export let falsy = InternalPropTypes.falsy
+export let history = InternalPropTypes.history
+export let location = locationShape
+export let component = InternalPropTypes.component
+export let components = InternalPropTypes.components
+export let route = InternalPropTypes.route
+export let routes = InternalPropTypes.routes
+export let router = routerShape
+
+if (__DEV__) {
+  const deprecatePropType = (propType, message) => (...args) => {
+    warning(false, message)
+    return propType(...args)
+  }
+
+  const deprecateInternalPropType = propType => (
+    deprecatePropType(propType, 'This prop type is not intended for external use, and was previously exported by mistake. These internal prop types are deprecated for external use, and will be removed in a later version.')
+  )
+
+  const deprecateRenamedPropType = (propType, name) => (
+    deprecatePropType(propType, `The \`${name}\` prop type is now exported as \`${name}Shape\` to avoid name conflicts. This export is deprecated and will be removed in a later version.`)
+  )
+
+  falsy = deprecateInternalPropType(falsy)
+  history = deprecateInternalPropType(history)
+  component = deprecateInternalPropType(component)
+  components = deprecateInternalPropType(components)
+  route = deprecateInternalPropType(route)
+  routes = deprecateInternalPropType(routes)
 
-export default {
+  location = deprecateRenamedPropType(location, 'location')
+  router = deprecateRenamedPropType(router, 'router')
+}
+
+let defaultExport = {
+  falsy,
   history,
   location,
+  component,
+  components,
+  route,
+  // For some reason, routes was never here.
   router
 }
+
+if (__DEV__) {
+  defaultExport = deprecateObjectProperties(defaultExport, 'The default export from `react-router/lib/PropTypes` is deprecated. Please use the named exports instead.')
+}
+
+export default defaultExport
diff --git a/modules/Redirect.js b/modules/Redirect.js
@@ -2,7 +2,7 @@ import React from 'react'
 import invariant from 'invariant'
 import { createRouteFromReactElement } from './RouteUtils'
 import { formatPattern } from './PatternUtils'
-import { falsy } from './PropTypes'
+import { falsy } from './InternalPropTypes'
 
 const { string, object } = React.PropTypes
 
diff --git a/modules/Route.js b/modules/Route.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import invariant from 'invariant'
 import { createRouteFromReactElement } from './RouteUtils'
-import { component, components } from './PropTypes'
+import { component, components } from './InternalPropTypes'
 
 const { string, func } = React.PropTypes
 
diff --git a/modules/Router.js b/modules/Router.js
@@ -3,7 +3,7 @@ import useQueries from 'history/lib/useQueries'
 import React from 'react'
 
 import createTransitionManager from './createTransitionManager'
-import { routes } from './PropTypes'
+import { routes } from './InternalPropTypes'
 import RouterContext from './RouterContext'
 import { createRoutes } from './RouteUtils'
 import { createRouterObject, createRoutingHistory } from './RouterUtils'
diff --git a/modules/__tests__/RouterContext-test.js b/modules/__tests__/RouterContext-test.js
@@ -3,7 +3,7 @@ import React from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'
 
 import match from '../match'
-import { router as routerPropType } from '../PropTypes'
+import { routerShape } from '../PropTypes'
 import RouterContext from '../RouterContext'
 import { createRouterObject } from '../RouterUtils'
 
@@ -42,7 +42,7 @@ describe('RouterContext', () => {
     }
 
     Component.contextTypes = {
-      router: routerPropType.isRequired
+      router: routerShape.isRequired
     }
 
     routes = { path: '/', component: Component }
diff --git a/modules/__tests__/transitionHooks-test.js b/modules/__tests__/transitionHooks-test.js
@@ -2,7 +2,7 @@ import expect, { spyOn } from 'expect'
 import React, { Component } from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'
 import createHistory from '../createMemoryHistory'
-import { router as routerPropType } from '../PropTypes'
+import { routerShape } from '../PropTypes'
 import execSteps from './execSteps'
 import Router from '../Router'
 
@@ -43,7 +43,7 @@ describe('When a router enters a branch', function () {
     }
 
     NewsFeed.contextTypes = {
-      router: routerPropType.isRequired
+      router: routerShape.isRequired
     }
 
     class Inbox extends Component {
@@ -72,7 +72,7 @@ describe('When a router enters a branch', function () {
     }
 
     User.contextTypes = {
-      router: routerPropType.isRequired
+      router: routerShape.isRequired
     }
 
     NewsFeedRoute = {
diff --git a/modules/index.js b/modules/index.js
@@ -19,7 +19,7 @@ export useRoutes from './useRoutes'
 export { createRoutes } from './RouteUtils'
 export RouterContext from './RouterContext'
 export RoutingContext from './RoutingContext'
-export PropTypes from './PropTypes'
+export PropTypes, { locationShape, routerShape } from './PropTypes'
 export match from './match'
 export useRouterHistory from './useRouterHistory'
 export { formatPattern } from './PatternUtils'
diff --git a/upgrade-guides/v2.0.0.md b/upgrade-guides/v2.0.0.md

Original file line number	Diff line number	Diff line change
@@ -6,7 +6,7 @@ You need to add `router` to your component's `contextTypes` to make the router o
`6`	`6`
`7`	`7`	```js
`8`	`8`	`contextTypes: {`
`9`		`- router: Router.PropTypes.router`
	`9`	`+ router: routerShape.isRequired`
`10`	`10`	`}`
`11`	`11`	```
`12`	`12`