Dash Renderer 2.0 - **Breaking Changes**

dash_renderer/__init__.py

@@ -8,8 +8,9 @@
 # `dash_html_components.__init__: module references __file__`
 # TODO - Understand this better
 # from .version import __version__
-__version__ = '0.11.1'
 __file__
+from .version import __version__
+NPM_VERSION = '0.13.0-rc2'
 
 # Dash renderer's dependencies get loaded in a special order by the server:
 # React bundles first, the renderer bundle at the very end.
@@ -33,7 +34,7 @@
         "external_url": (
             'https://unpkg.com/dash-renderer@{}'
             '/dash_renderer/bundle.js'
-        ).format(__version__),
+        ).format(NPM_VERSION),
         'namespace': 'dash_renderer'
     }
 ]

dash_renderer/version.py

@@ -1 +1 @@
-__version__ = '0.11.1'
+__version__ = '0.13.0rc2'

dev-requirements.txt

@@ -1,6 +1,5 @@
-dash_core_components==0.12.0
-dash_html_components==0.7.0
-dash==0.18.3
+dash-core-components==0.16.0rc1
+dash-html-components==0.9.0rc1
 percy
 selenium
 mock

package.json

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

src/APIController.react.js

@@ -1,7 +1,7 @@
 import {connect} from 'react-redux'
 import {contains, isEmpty, isNil} from 'ramda'
 import React, {Component, PropTypes} from 'react';
-import TreeContainer from './TreeContainer';
+import Render from './Render';
 import {
     computeGraphs,
     computePaths,
@@ -97,7 +97,7 @@ class UnconnectedContainer extends Component {
         else if (appLifecycle === APP_STATES('HYDRATED')) {
             return (
                 <div id="_dash-app-content">
-                    <TreeContainer layout={layout}/>
+                    <Render {...layout}/>
                 </div>
             );
         }

src/components/core/NotifyObservers.react.js → src/Render.js

@@ -1,7 +1,27 @@
-import {connect} from 'react-redux';
-import {isEmpty} from 'ramda';
-import {notifyObservers, updateProps} from '../../actions';
+import * as R from 'ramda';
 import React, {PropTypes} from 'react';
+import {connect} from 'react-redux';
+import {notifyObservers, updateProps} from './actions';
+import Registry from './registry';
+
+function render(componentJson) {
+    if (R.type(componentJson) === 'Object' &&
+        R.has('type', componentJson) &&
+        R.has('namespace', componentJson) &&
+        R.has('props', componentJson)
+    ) {
+        return <NotifyObservers {...componentJson}/>;
+    } else if (R.type(componentJson) === 'Array') {
+        return componentJson.map(render);
+    } else {
+        // number, boolean, string, null, array, undefined,
+        // or an Object that doesn't have the component keys
+        // (assumed to be a react object)
+        return componentJson;
+    }
+}
+
+
 
 /*
  * NotifyObservers passes a connected `setProps` handler down to
@@ -21,43 +41,47 @@ function mapDispatchToProps (dispatch) {
 
 function mergeProps(stateProps, dispatchProps, ownProps) {
     const {dispatch} = dispatchProps;
+    const id = R.view(R.lensPath(['props', 'id']), ownProps);
     return {
-        id: ownProps.id,
-        children: ownProps.children,
+        id: id,
         dependencies: stateProps.dependencies,
         paths: stateProps.paths,
 
         fireEvent: function fireEvent({event}) {
             // Update this component's observers with the updated props
-            dispatch(notifyObservers({event, id: ownProps.id}));
+            dispatch(notifyObservers({event, id: id}));
         },
 
         setProps: function setProps(newProps) {
             const payload = {
                 props: newProps,
-                id: ownProps.id,
-                itempath: stateProps.paths[ownProps.id]
+                id: id,
+                itempath: stateProps.paths[id]
             };
 
             // Update this component's props
             dispatch(updateProps(payload));
 
             // Update output components that depend on this input
-            dispatch(notifyObservers({id: ownProps.id, props: newProps}));
-        }
+            dispatch(notifyObservers({id: id, props: newProps}));
+        },
+
+        componentJson: ownProps
     }
 
 }
 
-function NotifyObserversComponent ({
-    children,
+
+function NotifyObserversComponent({
     id,
-    paths,
 
+    paths,
     dependencies,
 
     fireEvent,
-    setProps
+    setProps,
+
+    componentJson
 }) {
     const thisComponentTriggersEvents = (
         dependencies && dependencies.find(dependency => (
@@ -85,7 +109,7 @@ function NotifyObserversComponent ({
      * component author can check for something like `subscribed_events`
      * or `subscribed_properties` instead of `fireEvent` and `setProps`.
      */
-    const extraProps = {};
+    const extraProps = {render};
     if (thisComponentSharesState &&
 
         // there is a bug with graphs right now where
@@ -100,22 +124,37 @@ function NotifyObserversComponent ({
     if (thisComponentTriggersEvents && paths[id]) {
         extraProps.fireEvent = fireEvent;
     }
+    extraProps.render = render;
 
-    if (!isEmpty(extraProps)) {
-        return React.cloneElement(children, extraProps);
-    } else {
-        return children;
-    }
+    const allProps = R.merge(componentJson.props, extraProps);
+
+    const element = Registry.resolve(
+        componentJson.type, componentJson.namespace);
+
+    return React.createElement(
+        element,
+        allProps
+    );
 }
 
+
 NotifyObserversComponent.propTypes = {
-    id: PropTypes.string.isRequired,
-    children: PropTypes.node.isRequired,
-    path: PropTypes.array.isRequired
-};
+    id: PropTypes.string,
 
-export default connect(
+    paths: PropTypes.object,
+    dependencies: PropTypes.object,
+
+    fireEvent: PropTypes.func,
+    setProps: PropTypes.func,
+
+    componentJson: PropTypes.object // oneOf?
+}
+
+
+const NotifyObservers = connect(
     mapStateToProps,
     mapDispatchToProps,
     mergeProps
 )(NotifyObserversComponent);
+
+export default NotifyObservers;

src/reducers/utils.js

@@ -10,25 +10,16 @@ export const crawlLayout = (object, func, path=[]) => {
      * object may be a string, a number, or null
      * R.has will return false for both of those types
      */
-    if (R.type(object) === 'Object' &&
-        R.has('props', object) &&
-        R.has('children', object.props)
-    ) {
-        const newPath = extend(path, ['props', 'children']);
-        if (Array.isArray(object.props.children)) {
-            object.props.children.forEach((child, i) => {
-                crawlLayout(
-                    child,
-                    func,
-                    R.append(i, newPath));
-            });
-        } else {
+    if (R.type(object) === 'Object') {
+        R.keys(object).forEach(key => {
+            const newPath = extend(path, [key]);
+
             crawlLayout(
-                object.props.children,
+                object[key],
                 func,
-                newPath
-            );
-        }
+                newPath);
+
+        });
     }  else if (R.type(object) === 'Array') {
 
         /*
@@ -49,10 +40,10 @@ export const crawlLayout = (object, func, path=[]) => {
     }
 }
 
-export function hasId(child) {
+export function hasId(element) {
     return (
-        R.type(child) === 'Object' &&
-        R.has('props', child) &&
-        R.has('id', child.props)
+        R.type(element) === 'Object' &&
+        R.has('props', element) &&
+        R.has('id', element.props)
     );
 }

tests/test_render.py

@@ -517,15 +517,21 @@ def update_input(value):
         wait_for(
             lambda: (
                 self.driver.find_element_by_id('output')
-                .get_attribute('innerHTML') == '''
-                <div>
-                    <input id="sub-input-1" value="sub input initial value">
+                .get_attribute('innerHTML') in [
+                '''<div>
+                    <input {}>
                     <div id="sub-output-1">
                         sub input initial value
                     </div>
-                </div>'''.replace('\n', '').replace('  ', '')
+                </div>'''.replace('\n', '').replace('  ', '').format(attr)
+                for attr in [
+                    # can't guarentee the order of these attributes
+                    'id="sub-input-1" value="sub input initial value"',
+                    'value="sub input initial value" id="sub-input-1"'
+                ]]
             )
         )
+
         self.percy_snapshot(name='callback-generating-function-1')
 
         # the paths should include these new output IDs