React 16.13

dash-renderer/.eslintrc.json

@@ -102,6 +102,7 @@
       "no-new-wrappers": ["error"],
       "no-param-reassign": ["error"],
       "no-process-env": ["warn"],
+      "no-prototype-builtins": ["off"],
       "no-proto": ["error"],
       "no-redeclare": ["error"],
       "no-return-assign": ["error"],
@@ -141,7 +142,7 @@
       }],
       "no-magic-numbers": ["error", {
         "ignoreArrayIndexes": true,
-        "ignore": [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 100, 10, 16, 0.5, 25]
+        "ignore": [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 100, 10, 16, 0.5, 25, 200, 500]
       }],
       "no-underscore-dangle": ["off"],
       "no-useless-escape": ["off"]

dash-renderer/package.json

@@ -20,48 +20,48 @@
   "author": "chriddyp",
   "license": "MIT",
   "dependencies": {
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
+    "@babel/polyfill": "7.8.7",
+    "cookie": "^0.4.0",
+    "dependency-graph": "^0.9.0",
     "prop-types": "15.7.2",
-    "cookie": "^0.3.1",
-    "dependency-graph": "^0.5.0",
-    "radium": "^0.22.1",
-    "ramda": "^0.26.1",
-    "react-redux": "^4.4.5",
-    "redux": "^3.4.0",
-    "redux-actions": "^0.9.1",
-    "redux-thunk": "^2.0.1",
-    "viz.js": "1.8.0"
+    "radium": "^0.26.0",
+    "ramda": "^0.27.0",
+    "react": "16.13.0",
+    "react-dom": "16.13.0",
+    "react-redux": "^7.2.0",
+    "redux": "^4.0.5",
+    "redux-actions": "^2.6.5",
+    "redux-thunk": "^2.3.0",
+    "viz.js": "2.1.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.0",
-    "@babel/plugin-transform-modules-commonjs": "^7.6.0",
-    "@babel/polyfill": "7.7.0",
-    "@babel/preset-env": "^7.6.0",
-    "@babel/preset-react": "^7.0.0",
-    "@plotly/dash-component-plugins": "^1.0.2",
-    "@svgr/webpack": "^4.1.0",
-    "babel-eslint": "^10.0.3",
+    "@babel/core": "^7.8.7",
+    "@babel/plugin-transform-modules-commonjs": "^7.8.3",
+    "@babel/preset-env": "^7.8.7",
+    "@babel/preset-react": "^7.8.3",
+    "@plotly/dash-component-plugins": "^1.2.0",
+    "@svgr/webpack": "^5.2.0",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.6",
-    "css-loader": "^3.2.0",
-    "es-check": "^5.0.0",
-    "eslint": "^5.15.3",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^3.6.0",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-prettier": "^3.0.1",
-    "eslint-plugin-react": "^7.12.4",
-    "jest": "^24.9.0",
-    "prettier": "^1.16.4",
-    "prettier-eslint": "^8.8.2",
-    "prettier-eslint-cli": "^4.7.1",
+    "css-loader": "^3.4.2",
+    "es-check": "^5.1.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.18.3",
+    "jest": "^25.1.0",
+    "prettier": "^1.19.1",
+    "prettier-eslint": "^9.0.1",
+    "prettier-eslint-cli": "^5.0.0",
     "prettier-stylelint": "^0.4.2",
-    "style-loader": "^1.0.0",
-    "webpack": "^4.39.3",
-    "webpack-cli": "^3.3.8",
-    "webpack-dev-server": "^3.1.11",
-    "webpack-serve": "^3.1.1",
-    "whatwg-fetch": "^2.0.2"
+    "style-loader": "^1.1.3",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3",
+    "webpack-serve": "^3.2.0",
+    "whatwg-fetch": "^3.0.0"
   }
 }

dash-renderer/src/APIController.react.js

@@ -1,6 +1,6 @@
 import {connect} from 'react-redux';
 import {includes, isEmpty, isNil} from 'ramda';
-import React, {Component} from 'react';
+import React, {useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
 import TreeContainer from './TreeContainer';
 import GlobalErrorContainer from './components/error/GlobalErrorContainer.react';
@@ -18,23 +18,10 @@ import {STATUS} from './constants/constants';
 /**
  * Fire off API calls for initialization
  */
-class UnconnectedContainer extends Component {
-    constructor(props) {
-        super(props);
-        this.initialization = this.initialization.bind(this);
-        this.state = {
-            errorLoading: false,
-        };
-    }
-    componentDidMount() {
-        this.initialization(this.props);
-    }
-
-    componentWillReceiveProps(props) {
-        this.initialization(props);
-    }
+const UnconnectedContainer = props => {
+    const [errorLoading, setErrorLoading] = useState(false);
 
-    initialization(props) {
+    useEffect(() => {
         const {
             appLifecycle,
             dependenciesRequest,
@@ -60,8 +47,16 @@ class UnconnectedContainer extends Component {
         }
 
         if (isEmpty(dependenciesRequest)) {
-            dispatch(
-                apiThunk('_dash-dependencies', 'GET', 'dependenciesRequest')
+            setTimeout(
+                () =>
+                    dispatch(
+                        apiThunk(
+                            '_dash-dependencies',
+                            'GET',
+                            'dependenciesRequest'
+                        )
+                    ),
+                0
             );
         } else if (
             dependenciesRequest.status === STATUS.OK &&
@@ -81,67 +76,57 @@ class UnconnectedContainer extends Component {
             // Hasn't already hydrated
             appLifecycle === getAppState('STARTED')
         ) {
-            let errorLoading = false;
+            let error = false;
             try {
                 dispatch(hydrateInitialOutputs());
             } catch (err) {
-                errorLoading = true;
+                error = true;
             } finally {
-                this.setState(state =>
-                    state.errorLoading !== errorLoading ? {errorLoading} : null
-                );
+                setErrorLoading(error);
             }
         }
-    }
+    });
 
-    render() {
-        const {
-            appLifecycle,
-            dependenciesRequest,
-            layoutRequest,
-            layout,
-            config,
-        } = this.props;
-
-        const {errorLoading} = this.state;
+    const {
+        appLifecycle,
+        dependenciesRequest,
+        layoutRequest,
+        layout,
+        config,
+    } = props;
 
-        if (
-            layoutRequest.status &&
-            !includes(layoutRequest.status, [STATUS.OK, 'loading'])
-        ) {
-            return <div className="_dash-error">Error loading layout</div>;
-        } else if (
-            errorLoading ||
-            (dependenciesRequest.status &&
-                !includes(dependenciesRequest.status, [STATUS.OK, 'loading']))
-        ) {
-            return (
-                <div className="_dash-error">Error loading dependencies</div>
-            );
-        } else if (
-            appLifecycle === getAppState('HYDRATED') &&
-            config.ui === true
-        ) {
-            return (
-                <GlobalErrorContainer>
-                    <TreeContainer
-                        _dashprivate_layout={layout}
-                        _dashprivate_path={[]}
-                    />
-                </GlobalErrorContainer>
-            );
-        } else if (appLifecycle === getAppState('HYDRATED')) {
-            return (
+    if (
+        layoutRequest.status &&
+        !includes(layoutRequest.status, [STATUS.OK, 'loading'])
+    ) {
+        return <div className="_dash-error">Error loading layout</div>;
+    } else if (
+        errorLoading ||
+        (dependenciesRequest.status &&
+            !includes(dependenciesRequest.status, [STATUS.OK, 'loading']))
+    ) {
+        return <div className="_dash-error">Error loading dependencies</div>;
+    } else if (appLifecycle === getAppState('HYDRATED') && config.ui === true) {
+        return (
+            <GlobalErrorContainer>
                 <TreeContainer
                     _dashprivate_layout={layout}
                     _dashprivate_path={[]}
                 />
-            );
-        }
-
-        return <div className="_dash-loading">Loading...</div>;
+            </GlobalErrorContainer>
+        );
+    } else if (appLifecycle === getAppState('HYDRATED')) {
+        return (
+            <TreeContainer
+                _dashprivate_layout={layout}
+                _dashprivate_path={[]}
+            />
+        );
     }
-}
+
+    return <div className="_dash-loading">Loading...</div>;
+};
+
 UnconnectedContainer.propTypes = {
     appLifecycle: PropTypes.oneOf([
         getAppState('STARTED'),

dash-renderer/src/AccessDenied.react.js

@@ -1,4 +1,3 @@
-/* global window:true, document:true */
 import React from 'react';
 import {mergeRight, once} from 'ramda';
 import PropTypes from 'prop-types';
@@ -31,7 +30,6 @@ function AccessDenied(props) {
             <a
                 style={styles.base.a}
                 onClick={() => {
-                    /* eslint no-empty: ["error", { "allowEmptyCatch": true }] */
                     try {
                         document.cookie =
                             `${constants.OAUTH_COOKIE_NAME}=; ` +

dash-renderer/src/AppContainer.react.js

@@ -1,4 +1,3 @@
-/* global document:true */
 import {connect} from 'react-redux';
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -21,7 +20,7 @@ class UnconnectedAppContainer extends React.Component {
         }
     }
 
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
         const {dispatch} = this.props;
         const config = JSON.parse(
             document.getElementById('_dash-config').textContent

dash-renderer/src/DashRenderer.js

@@ -1,7 +1,3 @@
-/* eslint-env browser */
-
-'use strict';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import AppProvider from './AppProvider.react';

dash-renderer/src/actions/api.js

@@ -1,4 +1,3 @@
-/* global fetch: true */
 import {mergeDeepRight} from 'ramda';
 import {handleAsyncError, getCSRFHeader} from '../actions';
 import {urlBase} from '../utils';

dash-renderer/src/actions/index.js

@@ -1,4 +1,3 @@
-/* global fetch:true, Promise:true, document:true */
 import {
     adjust,
     any,
@@ -429,9 +428,8 @@ export function notifyObservers(payload) {
             );
         }
 
-        /* eslint-disable consistent-return */
+        /* eslint-disable-next-line consistent-return */
         return Promise.all(promises);
-        /* eslint-enable consistent-return */
     };
 }
 
@@ -645,13 +643,13 @@ function updateOutput(
                 return;
             }
 
-            /* eslint-disable no-console */
+            /* eslint-disable-next-line no-console */
             console.error(
                 `The following error occurred while executing ${clientside_function.namespace}.${clientside_function.function_name} ` +
                     `in order to update component "${payload.output}" ⋁⋁⋁`
             );
+            /* eslint-disable-next-line no-console */
             console.error(e);
-            /* eslint-enable no-console */
 
             /*
              * Update the request queue by treating an unsuccessful clientside
@@ -665,15 +663,14 @@ function updateOutput(
 
         // Returning promises isn't support atm
         if (type(returnValue) === 'Promise') {
-            /* eslint-disable no-console */
+            /* eslint-disable-next-line no-console */
             console.error(
                 'The clientside function ' +
                     `${clientside_function.namespace}.${clientside_function.function_name} ` +
                     'returned a Promise instead of a value. Promises are not ' +
                     'supported in Dash clientside right now, but may be in the ' +
                     'future.'
             );
-            /* eslint-enable no-console */
             updateRequestQueue(true, STATUS.CLIENTSIDE_ERROR);
             return;
         }
@@ -736,12 +733,10 @@ function updateOutput(
         hooks.request_pre(payload);
     }
 
-    /* eslint-disable consistent-return */
+    /* eslint-disable-next-line consistent-return */
     return fetch(
         `${urlBase(config)}_dash-update-component`,
         mergeDeepRight(config.fetch, {
-            /* eslint-enable consistent-return */
-
             method: 'POST',
             headers: getCSRFHeader(),
             body: JSON.stringify(payload),

dash-renderer/src/components/core/DocumentTitle.react.js

@@ -1,5 +1,3 @@
-/* global document:true */
-
 import {connect} from 'react-redux';
 import {any} from 'ramda';
 import {Component} from 'react';
@@ -13,7 +11,7 @@ class DocumentTitle extends Component {
         };
     }
 
-    componentWillReceiveProps(props) {
+    UNSAFE_componentWillReceiveProps(props) {
         if (any(r => r.status === 'loading', props.requestQueue)) {
             document.title = 'Updating...';
         } else {

dash-renderer/src/components/core/Reloader.react.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef,react/no-did-update-set-state,no-magic-numbers */
 import {
     comparator,
     equals,