Hot reload

.gitignore

@@ -19,3 +19,4 @@ simple*
 
 *.csv
 .idea/
+.vscode

CHANGELOG.md

@@ -2,14 +2,18 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.15.0] - 2018-11-14
+### Added
+- Hot reload [#73](https://github.com/plotly/dash-renderer/pull/73)
+
 ## [0.14.3] - 2018-10-11
 ### Fixed
 - Included missing polyfills to restore Internet Explorer support [#87](https://github.com/plotly/dash-renderer/issues/87)
 
 ## [0.14.2] - 2018-10-11
 ### Fixed
 - Upgraded dependencies to remove warnings
-- Restored whatgw-fetch [#87](https://github.com/plotly/dash-renderer/issues/87)
+- Restored whatwg-fetch [#87](https://github.com/plotly/dash-renderer/issues/87)
 ### Added
 - Prettier support
 - Better ESLint configs

dash_renderer/version.py

@@ -1 +1 @@
-__version__ = '0.14.3'
+__version__ = '0.15.0'

dev-requirements.txt

@@ -1,6 +1,6 @@
 dash_core_components==0.33.0
 dash_html_components==0.11.0rc5
-dash==0.28.0
+dash==0.29.0
 percy
 selenium
 mock

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-renderer",
-  "version": "0.14.3",
+  "version": "0.15.0",
   "description": "render dash components in react",
   "main": "src/index.js",
   "scripts": {

src/AppContainer.react.js

@@ -5,6 +5,7 @@ import APIController from './APIController.react';
 import DocumentTitle from './components/core/DocumentTitle.react';
 import Loading from './components/core/Loading.react';
 import Toolbar from './components/core/Toolbar.react';
+import Reloader from './components/core/Reloader.react';
 
 function UnconnectedAppContainer() {
     return (
@@ -14,6 +15,7 @@ function UnconnectedAppContainer() {
                 <APIController />
                 <DocumentTitle />
                 <Loading />
+                <Reloader />
             </div>
         </Authentication>
     );

src/actions/api.js

@@ -96,3 +96,7 @@ export function login(oauth_token) {
         Authorization: `Bearer ${oauth_token}`,
     });
 }
+
+export function getReloadHash() {
+    return apiThunk('_reload-hash', 'GET', 'reloadRequest');
+}

src/components/core/DocumentTitle.react.js

@@ -1,15 +1,15 @@
 /* global document:true */
 
-import {connect} from 'react-redux'
-import {any} from 'ramda'
-import {Component} from 'react'
+import {connect} from 'react-redux';
+import {any} from 'ramda';
+import {Component} from 'react';
 import PropTypes from 'prop-types';
 
 class DocumentTitle extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            initialTitle: document.title
+            initialTitle: document.title,
         };
     }
 
@@ -31,11 +31,9 @@ class DocumentTitle extends Component {
 }
 
 DocumentTitle.propTypes = {
-    requestQueue: PropTypes.array.isRequired
+    requestQueue: PropTypes.array.isRequired,
 };
 
-export default connect(
-    state => ({
-        requestQueue: state.requestQueue
-    })
-)(DocumentTitle);
+export default connect(state => ({
+    requestQueue: state.requestQueue,
+}))(DocumentTitle);

src/components/core/Loading.react.js

@@ -1,24 +1,19 @@
-import {connect} from 'react-redux'
-import {any} from 'ramda'
-import React from 'react'
+import {connect} from 'react-redux';
+import {any} from 'ramda';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 function Loading(props) {
     if (any(r => r.status === 'loading', props.requestQueue)) {
-        return (
-            <div className="_dash-loading-callback"/>
-        );
-    } 
-        return null;
-
+        return <div className="_dash-loading-callback" />;
+    }
+    return null;
 }
 
 Loading.propTypes = {
-    requestQueue: PropTypes.array.isRequired
+    requestQueue: PropTypes.array.isRequired,
 };
 
-export default connect(
-    state => ({
-        requestQueue: state.requestQueue
-    })
-)(Loading);
+export default connect(state => ({
+    requestQueue: state.requestQueue,
+}))(Loading);

src/components/core/NotifyObservers.react.js

@@ -9,14 +9,14 @@ import PropTypes from 'prop-types';
  * its child as a prop
  */
 
-function mapStateToProps (state) {
+function mapStateToProps(state) {
     return {
         dependencies: state.dependenciesRequest.content,
-        paths: state.paths
+        paths: state.paths,
     };
 }
 
-function mapDispatchToProps (dispatch) {
+function mapDispatchToProps(dispatch) {
     return {dispatch};
 }
 
@@ -37,40 +37,40 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
             const payload = {
                 props: newProps,
                 id: ownProps.id,
-                itempath: stateProps.paths[ownProps.id]
+                itempath: stateProps.paths[ownProps.id],
             };
 
             // Update this component's props
             dispatch(updateProps(payload));
 
             // Update output components that depend on this input
             dispatch(notifyObservers({id: ownProps.id, props: newProps}));
-        }
-    }
-
+        },
+    };
 }
 
-function NotifyObserversComponent ({
+function NotifyObserversComponent({
     children,
     id,
     paths,
 
     dependencies,
 
     fireEvent,
-    setProps
+    setProps,
 }) {
-    const thisComponentTriggersEvents = (
-        dependencies && dependencies.find(dependency => (
+    const thisComponentTriggersEvents =
+        dependencies &&
+        dependencies.find(dependency =>
             dependency.events.find(event => event.id === id)
-        ))
-    );
-    const thisComponentSharesState = (
-        dependencies && dependencies.find(dependency => (
-            dependency.inputs.find(input => input.id === id) ||
-            dependency.state.find(state => state.id === id)
-        ))
-    );
+        );
+    const thisComponentSharesState =
+        dependencies &&
+        dependencies.find(
+            dependency =>
+                dependency.inputs.find(input => input.id === id) ||
+                dependency.state.find(state => state.id === id)
+        );
     /*
      * Only pass in `setProps` and `fireEvent` if they are actually
      * necessary.
@@ -87,8 +87,8 @@ function NotifyObserversComponent ({
      * or `subscribed_properties` instead of `fireEvent` and `setProps`.
      */
     const extraProps = {};
-    if (thisComponentSharesState &&
-
+    if (
+        thisComponentSharesState &&
         // there is a bug with graphs right now where
         // the restyle listener gets assigned with a
         // setProps function that was created before
@@ -104,15 +104,14 @@ function NotifyObserversComponent ({
 
     if (!isEmpty(extraProps)) {
         return React.cloneElement(children, extraProps);
-    } 
-        return children;
-
+    }
+    return children;
 }
 
 NotifyObserversComponent.propTypes = {
     id: PropTypes.string.isRequired,
     children: PropTypes.node.isRequired,
-    path: PropTypes.array.isRequired
+    path: PropTypes.array.isRequired,
 };
 
 export default connect(