Improved iterator component

.babelrc

@@ -1,8 +1,8 @@
 {
-  "presets": ["react", "es2015"],
+  "presets": ["react", "es2015", "stage-0"],
   "env": {
     "development": {
       "presets": ["react-hmre"]
     }
   }
-}
+}

README.md

@@ -0,0 +1,17 @@
+Benchmark React Material design frameworks
+===
+
+- `material-ui`
+- `react-toolbox`
+
+Installation and how to run
+---
+```bash
+npm install
+npm start
+
+# or build and then serve the dist/ folder
+
+npm run build
+npm run serve
+```

package.json

@@ -3,8 +3,9 @@
   "private": true,
   "scripts": {
     "start": "NODE_ENV=development webpack-dev-server --hot --inline",
-    "clean": "rm -rf dist/",
-    "build": "NODE_ENV=production webpack --optimize-minimize"
+    "clean": "rimraf dist/",
+    "build": "NODE_ENV=production webpack --optimize-minimize",
+    "serve": "serve dist/"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.6",
@@ -13,6 +14,7 @@
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-react-hmre": "^1.1.1",
+    "babel-preset-stage-0": "^6.5.0",
     "css-loader": "^0.23.1",
     "extract-text-webpack-plugin": "^1.0.1",
     "html-webpack-plugin": "^2.17.0",
@@ -23,11 +25,12 @@
     "postcss-loader": "^0.9.1",
     "react": "^15.0.2",
     "react-addons-css-transition-group": "^15.0.2",
-    "react-addons-pure-render-mixin": "^15.0.2",
     "react-dom": "^15.0.2",
     "react-tap-event-plugin": "^1.0.0",
     "react-toolbox": "^0.16.2",
+    "rimraf": "^2.5.2",
     "sass-loader": "^3.2.0",
+    "shallowequal": "^0.2.2",
     "stats.js": "^0.16.0",
     "style-loader": "^0.13.1",
     "toolbox-loader": "0.0.3",

src/default/list-iterate.js

@@ -2,11 +2,18 @@ import React from 'react';
 import benchmark from '../benchmark';
 import {list, onClick} from '../fixtures';
 
+import Iterate from '../iterate';
+
+const renderItem = (item, props, index) => (
+  <li key={index} onClick={props.badProps ? () => onClick('Bad', index) : onClick}>{item}</li>
+);
 
 benchmark(badProps => (
-  <ul>
-    {list.map((item, index) => (
-      <li key={index} onClick={badProps ? () => onClick() : onClick}>{item}</li>
-    ))}
-  </ul>
-));
+  <Iterate
+    root="ul"
+    rootProps={{ className: 'hello-world' }}
+    items={list}
+    children={renderItem}
+    badProps={badProps}
+  />
+));

src/default/list.js

@@ -5,7 +5,7 @@ import {list, onClick} from '../fixtures';
 benchmark(badProps => (
   <ul>
     {list.map((item, index) => (
-      <li key={index} onClick={badProps ? () => onClick() : onClick}>{item}</li>
+      <li key={index} onClick={badProps ? () => onClick('Bad', index) : onClick}>{item}</li>
     ))}
   </ul>
-));
+));

src/fixtures.js

@@ -1,3 +1,8 @@
-exports.list = Array.apply(null, {length: 1000}).map((item, index) => index.toString(16));
+export const list = Array.apply(null, {length: 1000}).map((item, index) => index.toString(16));
 
-exports.onClick = (e, msg = 'Hello world', index = null) => alert(msg + index);
+export const onClick = (message, index) => {
+  if (message === 'Bad') {
+    return console.log(`Bad ${index}`);
+  }
+  console.log('Good');
+};

src/iterate.js

@@ -1,33 +1,37 @@
-import React, {Component, PropTypes, Children, cloneElement} from 'react';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
+import React, {Component, PropTypes, Children, createElement} from 'react';
+import shallowEqual from 'shallowequal';
 
 class Iterate extends Component {
-  constructor(props) {
-    super(props);
-    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
-    this.previousItems = [];
-    this.previousRendered = null;
+  constructor(...args) {
+    super(...args);
+
+    this.previousProps = null;
   }
-  renderItems(items) {
-    if (this.previousItems === items) {
-      return this.previousRendered;
-    }
-    this.previousItems = items;
-    this.previousRendered = Children.toArray(items).map(this.props.children);
-    return this.previousRendered;
+  shouldComponentUpdate(nextProps) {
+    const {root, rootProps, items, children, ...props} = nextProps;
+    return children !== this.props.children ||
+      items !== this.props.items ||
+      root !== this.props.root ||
+      !shallowEqual(rootProps, this.props.rootProps) ||
+      !shallowEqual(props, this.previousProps);
   }
   render() {
-    const {root, items} = this.props;
-
-    return cloneElement(root, {
-      children: this.renderItems(items)
+    const {root, rootProps, items, children, ...props} = this.props;
+    this.previousProps = props;
+    return createElement(root, {
+      ...rootProps,
+      children: Children.toArray(items).map((item, index) => children(item, props, index))
     });
   }
 }
 Iterate.propTypes = {
-  children: PropTypes.func,
+  children: PropTypes.func.isRequired,
   items: PropTypes.array,
-  root: PropTypes.element
+  root: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  rootProps: PropTypes.object
+};
+Iterate.defaultProps = {
+  root: 'div'
 };
 
-export default Iterate;
+export default Iterate;

src/material-ui/list-iterate.js

@@ -6,15 +6,17 @@ import MuiBoilerplate from './boilerplate';
 import {List, ListItem} from 'material-ui';
 import Iterate from '../iterate';
 
+const renderItem = (item, props, index) => (
+  <ListItem key={index} onTouchTap={props.badProps ? () => onClick('Bad', index) : onClick} primaryText={item} />
+);
+
 benchmark(badProps => (
   <MuiBoilerplate>
     <Iterate
-      badProps={badProps}
-      root={<List />}
+      root={List}
       items={list}
-      children={(item, index) => (
-        <ListItem key={index} onTouchTap={badProps ? () => {console.log('Bad', index); onClick('hello')} : onClick} primaryText={item} />
-      )}
+      children={renderItem}
+      badProps={badProps}
     />
   </MuiBoilerplate>
-));
+));

src/material-ui/list.js

@@ -9,8 +9,8 @@ benchmark(badProps => (
   <MuiBoilerplate>
     <List>
       {list.map((item, index) => (
-        <ListItem key={index} onTouchTap={badProps ? () => onClick(null, 'Test', index) : onClick} primaryText={item} />
+        <ListItem key={index} onTouchTap={badProps ? () => onClick('Bad', index) : onClick} primaryText={item} />
       ))}
     </List>
   </MuiBoilerplate>
-));
+));

src/react-toolbox/boilerplate.js

@@ -0,0 +1 @@
+import 'react-toolbox/lib/commons';

src/react-toolbox/config.scss

@@ -1,2 +0,0 @@
-$color-primary: $palette-blue-500 !default;
-$color-primary-dark: $palette-blue-700 !default;

src/react-toolbox/list-iterate.js

@@ -1,13 +1,21 @@
 import React from 'react';
 import benchmark from '../benchmark';
 import {list, onClick} from '../fixtures';
+import './boilerplate';
 
 import { List, ListItem } from 'react-toolbox';
+import Iterate from '../iterate';
+
+const renderItem = (item, props, index) => (
+  <ListItem key={index} onClick={props.badProps ? () => onClick('Bad', index) : onClick} caption={item} />
+);
 
 benchmark(badProps => (
-  <List>
-    {list.map((item, index) => (
-      <ListItem key={index} onClick={badProps ? () => onClick() : onClick} caption={item} legend={item} />
-    ))}
-  </List>
-));
+  <Iterate
+    root={List}
+    rootProps={{selectable: true, ripple: true}}
+    items={list}
+    children={renderItem}
+    badProps={badProps}
+  />
+));

src/react-toolbox/list.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import benchmark from '../benchmark';
 import {list, onClick} from '../fixtures';
+import './boilerplate';
 
 import { List, ListItem } from 'react-toolbox';
 
 benchmark(badProps => (
-  <List>
+  <List selectable ripple>
     {list.map((item, index) => (
-      <ListItem key={index} onClick={badProps ? () => onClick() : onClick} caption={item} legend={item} />
+      <ListItem key={index} onClick={badProps ? () => onClick('Bad', index) : onClick} caption={item} />
     ))}
   </List>
-));
+));

webpack.config.js

@@ -6,8 +6,8 @@ var tests = require('./src/config').tests;
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
-  context: __dirname,
-  devtool: 'source-map',
+  // context: __dirname,
+  // devtool: 'source-map',
   entry: tests.reduce((obj, test) => {
     obj[test.name] = test.entry;
     return obj;