Custom hooks - March 1

.circleci/config.yml

@@ -45,8 +45,8 @@ jobs:
               - "node_modules"
 
       - run:
-          name: Npm lint
-          command:  npm run lint
+          name: Prettier
+          command:  npm run format:test
 
       - run:
           name: Run tests
@@ -76,4 +76,4 @@ workflows:
     jobs:
       - "python-2.7"
       - "python-3.6"
-      - "python-3.7"
+      - "python-3.7"

dash_renderer/dash_renderer.dev.js

@@ -33281,7 +33281,7 @@ var _Reloader = __webpack_require__(/*! ./components/core/Reloader.react */ "./s
 
 var _Reloader2 = _interopRequireDefault(_Reloader);
 
-var _actions = __webpack_require__(/*! ./actions */ "./src/actions/index.js");
+var _index = __webpack_require__(/*! ./actions/index */ "./src/actions/index.js");
 
 var _ramda = __webpack_require__(/*! ramda */ "./node_modules/ramda/index.js");
 
@@ -33296,18 +33296,23 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 var UnconnectedAppContainer = function (_React$Component) {
     _inherits(UnconnectedAppContainer, _React$Component);
 
-    function UnconnectedAppContainer() {
+    function UnconnectedAppContainer(props) {
         _classCallCheck(this, UnconnectedAppContainer);
 
-        return _possibleConstructorReturn(this, (UnconnectedAppContainer.__proto__ || Object.getPrototypeOf(UnconnectedAppContainer)).apply(this, arguments));
+        var _this = _possibleConstructorReturn(this, (UnconnectedAppContainer.__proto__ || Object.getPrototypeOf(UnconnectedAppContainer)).call(this, props));
+
+        if (props.hooks.request_pre !== null || props.hooks.request_post !== null) {
+            props.dispatch((0, _index.setHooks)(props.hooks));
+        }
+        return _this;
     }
 
     _createClass(UnconnectedAppContainer, [{
         key: 'componentWillMount',
         value: function componentWillMount() {
             var dispatch = this.props.dispatch;
 
-            dispatch((0, _actions.readConfig)());
+            dispatch((0, _index.readConfig)());
         }
     }, {
         key: 'render',
@@ -33337,6 +33342,7 @@ var UnconnectedAppContainer = function (_React$Component) {
 }(_react2.default.Component);
 
 UnconnectedAppContainer.propTypes = {
+    hooks: _propTypes2.default.object,
     dispatch: _propTypes2.default.func,
     config: _propTypes2.default.object
 };
@@ -33382,22 +33388,78 @@ var _AppContainer = __webpack_require__(/*! ./AppContainer.react */ "./src/AppCo
 
 var _AppContainer2 = _interopRequireDefault(_AppContainer);
 
+var _propTypes = __webpack_require__(/*! prop-types */ "./node_modules/prop-types/index.js");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var store = (0, _store2.default)();
 
-var AppProvider = function AppProvider() {
+var AppProvider = function AppProvider(_ref) {
+    var hooks = _ref.hooks;
+
     return _react2.default.createElement(
         _reactRedux.Provider,
         { store: store },
-        _react2.default.createElement(_AppContainer2.default, null)
+        _react2.default.createElement(_AppContainer2.default, { hooks: hooks })
     );
 };
 
+AppProvider.propTypes = {
+    hooks: _propTypes2.default.object
+};
+
 exports.default = AppProvider;
 
 /***/ }),
 
+/***/ "./src/DashRenderer.js":
+/*!*****************************!*\
+  !*** ./src/DashRenderer.js ***!
+  \*****************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/* eslint-env browser */
+
+
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.DashRenderer = undefined;
+
+var _react = __webpack_require__(/*! react */ "react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = __webpack_require__(/*! react-dom */ "react-dom");
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _AppProvider = __webpack_require__(/*! ./AppProvider.react */ "./src/AppProvider.react.js");
+
+var _AppProvider2 = _interopRequireDefault(_AppProvider);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var DashRenderer = function DashRenderer() {
+    var hooks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { request_pre: null, request_post: null };
+
+    _classCallCheck(this, DashRenderer);
+
+    // render Dash Renderer upon initialising!
+    _reactDom2.default.render(_react2.default.createElement(_AppProvider2.default, { hooks: hooks }), document.getElementById('react-entry-point'));
+};
+
+exports.DashRenderer = DashRenderer;
+
+/***/ }),
+
 /***/ "./src/TreeContainer.js":
 /*!******************************!*\
   !*** ./src/TreeContainer.js ***!
@@ -33666,7 +33728,8 @@ var getAction = exports.getAction = function getAction(action) {
         COMPUTE_PATHS: 'COMPUTE_PATHS',
         SET_LAYOUT: 'SET_LAYOUT',
         SET_APP_LIFECYCLE: 'SET_APP_LIFECYCLE',
-        READ_CONFIG: 'READ_CONFIG'
+        READ_CONFIG: 'READ_CONFIG',
+        SET_HOOKS: 'SET_HOOKS'
     };
     if (actionList[action]) {
         return actionList[action];
@@ -33689,7 +33752,7 @@ var getAction = exports.getAction = function getAction(action) {
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.readConfig = exports.setAppLifecycle = exports.setLayout = exports.computePaths = exports.computeGraphs = exports.setRequestQueue = exports.updateProps = undefined;
+exports.setHooks = exports.readConfig = exports.setAppLifecycle = exports.setLayout = exports.computePaths = exports.computeGraphs = exports.setRequestQueue = exports.updateProps = undefined;
 
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); /* global fetch:true, Promise:true, document:true */
 
@@ -33729,6 +33792,7 @@ var computePaths = exports.computePaths = (0, _reduxActions.createAction)((0, _c
 var setLayout = exports.setLayout = (0, _reduxActions.createAction)((0, _constants2.getAction)('SET_LAYOUT'));
 var setAppLifecycle = exports.setAppLifecycle = (0, _reduxActions.createAction)((0, _constants2.getAction)('SET_APP_LIFECYCLE'));
 var readConfig = exports.readConfig = (0, _reduxActions.createAction)((0, _constants2.getAction)('READ_CONFIG'));
+var setHooks = exports.setHooks = (0, _reduxActions.createAction)((0, _constants2.getAction)('SET_HOOKS'));
 
 function hydrateInitialOutputs() {
     return function (dispatch, getState) {
@@ -34027,7 +34091,8 @@ function updateOutput(outputComponentId, outputProp, getState, requestUid, dispa
         layout = _getState3.layout,
         graphs = _getState3.graphs,
         paths = _getState3.paths,
-        dependenciesRequest = _getState3.dependenciesRequest;
+        dependenciesRequest = _getState3.dependenciesRequest,
+        hooks = _getState3.hooks;
 
     var InputGraph = graphs.InputGraph;
 
@@ -34080,6 +34145,16 @@ function updateOutput(outputComponentId, outputProp, getState, requestUid, dispa
         });
     }
 
+    if (hooks.request_pre !== null) {
+        if ((0, _ramda.type)(hooks.request_pre) === 'Function') {
+            hooks.request_pre(payload);
+        } else {
+            /* eslint-disable no-console */
+            // Throwing an Error or TypeError etc here will cause an infinite loop for some reason
+            console.error('The request_pre hook provided was not of type function, preventing Dash from firing it. Please make sure the request_pre hook is a function');
+            /* eslint-enable no-console */
+        }
+    }
     return fetch((0, _utils2.urlBase)(config) + '_dash-update-component', {
         method: 'POST',
         headers: {
@@ -34186,6 +34261,18 @@ function updateOutput(outputComponentId, outputProp, getState, requestUid, dispa
                 props: data.response.props
             }));
 
+            // Fire custom request_post hook if any
+            if (hooks.request_post !== null) {
+                if ((0, _ramda.type)(hooks.request_post) === 'Function') {
+                    hooks.request_post(payload, data.response);
+                } else {
+                    /* eslint-disable no-console */
+                    // Throwing an Error or TypeError etc here will cause an infinite loop for some reason
+                    console.error('The request_post hook provided was not of type function, preventing Dash from firing it. Please make sure the request_post hook is a function');
+                    /* eslint-enable no-console */
+                }
+            }
+
             /*
              * If the response includes children, then we need to update our
              * paths store.
@@ -34999,21 +35086,10 @@ var STATUS = exports.STATUS = {
 
 
 
-var _react = __webpack_require__(/*! react */ "react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = __webpack_require__(/*! react-dom */ "react-dom");
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _AppProvider = __webpack_require__(/*! ./AppProvider.react */ "./src/AppProvider.react.js");
-
-var _AppProvider2 = _interopRequireDefault(_AppProvider);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _DashRenderer = __webpack_require__(/*! ./DashRenderer */ "./src/DashRenderer.js");
 
-_reactDom2.default.render(_react2.default.createElement(_AppProvider2.default, null), document.getElementById('react-entry-point'));
+// make DashRenderer globally available
+window.DashRenderer = _DashRenderer.DashRenderer;
 
 /***/ }),
 
@@ -35281,6 +35357,35 @@ exports.default = history;
 
 /***/ }),
 
+/***/ "./src/reducers/hooks.js":
+/*!*******************************!*\
+  !*** ./src/reducers/hooks.js ***!
+  \*******************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+var customHooks = function customHooks() {
+    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { request_pre: null, request_post: null, bear: false };
+    var action = arguments[1];
+
+    switch (action.type) {
+        case 'SET_HOOKS':
+            return action.payload;
+        default:
+            return state;
+    }
+};
+
+exports.default = customHooks;
+
+/***/ }),
+
 /***/ "./src/reducers/layout.js":
 /*!********************************!*\
   !*** ./src/reducers/layout.js ***!
@@ -35436,6 +35541,10 @@ var _history2 = __webpack_require__(/*! ./history */ "./src/reducers/history.js"
 
 var _history3 = _interopRequireDefault(_history2);
 
+var _hooks = __webpack_require__(/*! ./hooks */ "./src/reducers/hooks.js");
+
+var _hooks2 = _interopRequireDefault(_hooks);
+
 var _api = __webpack_require__(/*! ./api */ "./src/reducers/api.js");
 
 var API = _interopRequireWildcard(_api);
@@ -35459,8 +35568,10 @@ var reducer = (0, _redux.combineReducers)({
     config: _config3.default,
     dependenciesRequest: API.dependenciesRequest,
     layoutRequest: API.layoutRequest,
-    reloadRequest: API.reloadRequest,
-    history: _history3.default
+    loginRequest: API.loginRequest,
+    history: _history3.default,
+    hooks: _hooks2.default,
+    reloadRequest: API.reloadRequest
 });
 
 function getInputHistoryState(itempath, props, state) {

dev-requirements.txt

@@ -1,4 +1,4 @@
-git+git://github.com/plotly/dash@master#egg=dash
+git+git://github.com/plotly/dash@standalone_dash-renderer#egg=dash
 percy
 selenium
 mock

package.json

@@ -11,8 +11,8 @@
     "build:dev": "webpack --mode development",
     "build:prod": "webpack --mode production",
     "start": "webpack-serve ./webpack.serve.config.js",
-    "format": "prettier --config .prettierrc --write src/**/*.js",
-    "format:test": "prettier --config .prettierrc src/**/*.js --list-different",
+    "format": "prettier --config .prettierrc --write src/**/*.js src/**/*.react.js",
+    "format:test": "prettier --config .prettierrc src/**/*.js src/**/*.react.js --list-different",
     "test": "npm run lint",
     "test:py": "python -m unittest tests.test_render tests.test_race_conditions"
   },

src/AppContainer.react.js

@@ -6,15 +6,23 @@ 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';
-import {readConfig} from './actions';
+import {setHooks, readConfig} from './actions/index';
 import {type} from 'ramda';
 
-
 class UnconnectedAppContainer extends React.Component {
+    constructor(props) {
+        super(props);
+        if (
+            props.hooks.request_pre !== null ||
+            props.hooks.request_post !== null
+        ) {
+            props.dispatch(setHooks(props.hooks));
+        }
+    }
 
     componentWillMount() {
         const {dispatch} = this.props;
-        dispatch(readConfig())
+        dispatch(readConfig());
     }
 
     render() {
@@ -35,6 +43,7 @@ class UnconnectedAppContainer extends React.Component {
 }
 
 UnconnectedAppContainer.propTypes = {
+    hooks: PropTypes.object,
     dispatch: PropTypes.func,
     config: PropTypes.object,
 };

src/AppProvider.react.js

@@ -4,12 +4,20 @@ import {Provider} from 'react-redux';
 import initializeStore from './store';
 import AppContainer from './AppContainer.react';
 
+import PropTypes from 'prop-types';
+
 const store = initializeStore();
 
-const AppProvider = () => (
-    <Provider store={store}>
-        <AppContainer />
-    </Provider>
-);
+const AppProvider = ({hooks}) => {
+    return (
+        <Provider store={store}>
+            <AppContainer hooks={hooks} />
+        </Provider>
+    );
+};
+
+AppProvider.propTypes = {
+    hooks: PropTypes.object,
+};
 
 export default AppProvider;

src/DashRenderer.js

@@ -0,0 +1,19 @@
+/* eslint-env browser */
+
+'use strict';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import AppProvider from './AppProvider.react';
+
+class DashRenderer {
+    constructor(hooks = { request_pre: null, request_post: null}) {
+        // render Dash Renderer upon initialising!
+        ReactDOM.render(
+            <AppProvider hooks={hooks} />,
+            document.getElementById('react-entry-point')
+        );
+    }
+}
+
+export { DashRenderer };