Add optional React 16 support

.eslintignore

@@ -14,5 +14,5 @@ dist
 npm-debug*
 dash_renderer/bundle.js
 dash_renderer/bundle.js.map
-dash_renderer/react[email protected].min.js
-dash_renderer/react@15.4.2.min.js
+dash_renderer/react@*.min.js
+dash_renderer/react-dom@*.min.js

CHANGELOG.md

@@ -2,6 +2,18 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.12.0] - 2018-02-11
+### Added
+- Allows user to now choose between '15.4.2' and '16.2.0' for React versions
+```python
+import dash_renderer
+
+# Set the react version before setting up the Dash application
+dash_renderer._set_react_version('16.2.0')
+
+app = dash.Dash(...)
+```
+
 ## [0.11.3] - 2018-02-01
 ### Fixed
 - Fixed #41 in #42. In some cases, during initialization, callbacks may fired multiple times instead of just once. This only happens in certain scenarios where outputs have overlapping inputs and those inputs are leaves (they don't have any inputs of their own). See #41 for a simple example and #42 for some more extensive test cases.

dash_renderer/__init__.py

@@ -1,3 +1,5 @@
+import sys
+
 # For reasons that I don't fully understand,
 # unless I include __file__ in here, the packaged version
 # of this module will just be a .egg file, not a .egg folder.
@@ -10,10 +12,10 @@
 from .version import __version__
 __file__
 
-# Dash renderer's dependencies get loaded in a special order by the server:
-# React bundles first, the renderer bundle at the very end.
-_js_dist_dependencies = [
-    {
+_DEFAULT_REACT_VERSION = '15.4.2'
+_REACT_VERSION_TYPES = {'15.4.2', '16.2.0'}
+_REACT_VERSION_TO_URLS = {
+    '15.4.2': {
         'external_url': [
             'https://unpkg.com/[email protected]/dist/react.min.js',
             'https://unpkg.com/[email protected]/dist/react-dom.min.js'
@@ -22,9 +24,52 @@
             '[email protected]',
             '[email protected]'
         ],
-        'namespace': 'dash_renderer'
+    },
+    '16.2.0': {
+        'external_url': [
+            'https://unpkg.com/[email protected]/umd/react.production.min.js',
+            'https://unpkg.com/[email protected]/umd/react-dom.production.min.js'
+        ],
+        'relative_package_path': [
+            '[email protected]',
+            '[email protected]'
+        ],
     }
-]
+}
+
+
+def _set_react_version(react_version):
+    """
+    Update the version of React in _js_dist_dependencies served by dash-renderer to the client
+
+    Example:
+    ```
+    import dash_renderer
+
+    # Set the react version before setting up the Dash application
+    dash_renderer._set_react_version('16.2.0')
+
+    app = dash.Dash(...)
+    ```
+
+    :param str react_version: Version of React
+
+    """
+    assert react_version in _REACT_VERSION_TYPES
+
+    _this_module = sys.modules[__name__]
+
+    # Dash renderer's dependencies get loaded in a special order by the server:
+    # React bundles first, the renderer bundle at the very end.
+    setattr(_this_module, '_js_dist_dependencies', [{
+        'external_url': _REACT_VERSION_TO_URLS[react_version]['external_url'],
+        'relative_package_path': _REACT_VERSION_TO_URLS[react_version]['relative_package_path'],
+        'namespace': 'dash_renderer'
+    }])
+
+
+_js_dist_dependencies = []
+_set_react_version(_DEFAULT_REACT_VERSION)
 
 _js_dist = [
     {

dash_renderer/version.py

@@ -1 +1 @@
-__version__ = '0.11.3'
+__version__ = '0.12.0'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-renderer",
-  "version": "0.11.3",
+  "version": "0.12.0",
   "description": "render dash components in react",
   "main": "src/index.js",
   "scripts": {
@@ -31,11 +31,12 @@
     "dependency-graph": "^0.5.0",
     "es6-promise": "^4.1.0",
     "json-loader": "^0.5.4",
+    "prop-types": "^15.6.0",
     "query-string": "^4.3.2",
-    "radium": "^0.18.2",
+    "radium": "^0.22.0",
     "ramda": "^0.23.0",
-    "react": "^15.4.2",
-    "react-dom": "^15.0.1",
+    "react": "^15.6.2",
+    "react-dom": "^15.6.2",
     "react-redux": "^4.4.5",
     "redux": "^3.4.0",
     "redux-actions": "^0.9.1",

src/APIController.react.js

@@ -1,6 +1,7 @@
 import {connect} from 'react-redux'
 import {contains, isEmpty, isNil} from 'ramda'
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import TreeContainer from './TreeContainer';
 import {
     computeGraphs,
@@ -112,7 +113,7 @@ UnconnectedContainer.propTypes = {
         APP_STATES('STARTED'),
         APP_STATES('HYDRATED')
     ]),
-    dispatch: PropTypes.function,
+    dispatch: PropTypes.func,
     dependenciesRequest: PropTypes.object,
     layoutRequest: PropTypes.object,
     layout: PropTypes.object,

src/AccessDenied.react.js

@@ -1,6 +1,7 @@
 /* global window:true, document:true */
-import React, {PropTypes} from 'react';
+import React from 'react';
 import {merge} from 'ramda';
+import PropTypes from 'prop-types';
 import * as styles from './styles/styles.js';
 import * as constants from './constants/constants.js';
 

src/Authentication.react.js

@@ -1,5 +1,6 @@
 /* global window:true, document:true */
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import {connect} from 'react-redux'
 import queryString from 'query-string';
 import {login} from './actions/api';

src/TreeContainer.js

@@ -1,7 +1,8 @@
 'use strict'
 
 import R from 'ramda';
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import Registry from './registry';
 import NotifyObservers from './components/core/NotifyObservers.react';
 

src/components/core/DocumentTitle.react.js

@@ -2,7 +2,8 @@
 
 import {connect} from 'react-redux'
 import {any} from 'ramda'
-import {Component, PropTypes} from 'react'
+import {Component} from 'react'
+import PropTypes from 'prop-types';
 
 class DocumentTitle extends Component {
     constructor(props) {
@@ -30,8 +31,8 @@ class DocumentTitle extends Component {
 }
 
 DocumentTitle.propTypes = {
-    requestQueue: PropTypes.array.required
-}
+    requestQueue: PropTypes.array.isRequired
+};
 
 export default connect(
     state => ({

src/components/core/Loading.react.js

@@ -1,6 +1,7 @@
 import {connect} from 'react-redux'
 import {any} from 'ramda'
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types';
 
 function Loading(props) {
     if (any(r => r.status === 'loading', props.requestQueue)) {
@@ -13,8 +14,8 @@ function Loading(props) {
 }
 
 Loading.propTypes = {
-    requestQueue: PropTypes.array.required
-}
+    requestQueue: PropTypes.array.isRequired
+};
 
 export default connect(
     state => ({

src/components/core/NotifyObservers.react.js

@@ -1,7 +1,8 @@
 import {connect} from 'react-redux';
 import {isEmpty} from 'ramda';
 import {notifyObservers, updateProps} from '../../actions';
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 /*
  * NotifyObservers passes a connected `setProps` handler down to

src/components/core/Toolbar.react.js

@@ -1,5 +1,6 @@
 import {connect} from 'react-redux';
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {merge} from 'ramda';
 import {redo, undo} from '../../actions/index.js';
 import Radium from 'radium';
@@ -91,7 +92,7 @@ function UnconnectedToolbar(props) {
 
 UnconnectedToolbar.propTypes = {
     history: PropTypes.object,
-    dispatch: PropTypes.function
+    dispatch: PropTypes.func,
 };
 
 const Toolbar = connect(