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

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

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

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

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

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

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

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