Initial commit

.babelrc

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

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+npm-debug.log
+.DS_Store

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "benchmark-material",
+  "private": true,
+  "scripts": {
+    "start": "NODE_ENV=development webpack-dev-server --hot --inline",
+    "clean": "rm -rf dist/",
+    "build": "NODE_ENV=production webpack --optimize-minimize"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.3.6",
+    "babel-core": "^6.9.0",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-react-hmre": "^1.1.1",
+    "css-loader": "^0.23.1",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "html-webpack-plugin": "^2.17.0",
+    "html-webpack-template": "^5.0.0",
+    "material-ui": "^0.15.0",
+    "node-sass": "3.4.2",
+    "normalize.css": "^4.1.1",
+    "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",
+    "sass-loader": "^3.2.0",
+    "stats.js": "^0.16.0",
+    "style-loader": "^0.13.1",
+    "toolbox-loader": "0.0.3",
+    "webpack": "^1.13.0",
+    "webpack-dev-server": "^1.14.1",
+    "why-did-you-update": "0.0.8"
+  }
+}

src/benchmark.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import {render} from 'react-dom';
+import Stats from 'stats.js';
+// import {whyDidYouUpdate} from 'why-did-you-update';
+//
+// if (process.env.NODE_ENV !== 'production') {
+//   whyDidYouUpdate(React);
+// }
+
+const {document, addEventListener, requestAnimationFrame} = global;
+
+let badProps = false;
+
+const label = document.createElement('label');
+label.innerHTML = ' Bad props';
+label.style.cssText = 'position: fixed; top: 0; right: 90px;';
+
+const checkbox = document.createElement('input');
+checkbox.type = 'checkbox';
+checkbox.checked = badProps;
+checkbox.onclick = () => {
+  badProps = checkbox.checked;
+};
+label.insertBefore(checkbox, label.firstChild);
+
+const stats = new Stats();
+stats.dom.style.left = null;
+stats.dom.style.right = 0;
+
+const reference = {};
+export default renderer => {
+  addEventListener('load', () => {
+    const container = document.getElementById('container');
+
+    [stats.dom, label].forEach(el => document.body.appendChild(el));
+
+    const animate = () => {
+      stats.begin();
+
+      render(renderer(badProps), container);
+
+      stats.end();
+
+      requestAnimationFrame(animate);
+    };
+
+    requestAnimationFrame(animate);
+  }, false);
+};

src/config.js

@@ -0,0 +1,18 @@
+const frameworks = exports.frameworks = [
+  'default',
+  'material-ui',
+  'react-toolbox'
+];
+
+const components = exports.components = [
+  'list',
+  'list-iterate'
+];
+
+exports.tests = components.map(component => frameworks.map(framework => ({
+  framework,
+  component,
+  name: `${framework}-${component}`,
+  entry: `./src/${framework}/${component}`,
+  filename: `${framework}/${component}.html`
+}))).reduce((a, b) => a.concat(b));

src/default/list-iterate.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import benchmark from '../benchmark';
+import {list, onClick} from '../fixtures';
+
+
+benchmark(badProps => (
+  <ul>
+    {list.map((item, index) => (
+      <li key={index} onClick={badProps ? () => onClick() : onClick}>{item}</li>
+    ))}
+  </ul>
+));

src/default/list.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import benchmark from '../benchmark';
+import {list, onClick} from '../fixtures';
+
+benchmark(badProps => (
+  <ul>
+    {list.map((item, index) => (
+      <li key={index} onClick={badProps ? () => onClick() : onClick}>{item}</li>
+    ))}
+  </ul>
+));

src/fixtures.js

@@ -0,0 +1,3 @@
+exports.list = Array.apply(null, {length: 1000}).map((item, index) => index.toString(16));
+
+exports.onClick = (e, msg = 'Hello world', index = null) => alert(msg + index);

src/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import {render} from 'react-dom';
+import {frameworks, components} from './config';
+
+const {addEventListener} = global;
+
+addEventListener('load', () => {
+  render(
+    (
+      <div>
+        {frameworks.map(framework => (
+          <div key={framework}>
+            <h1>{framework}</h1>
+            <ul>
+              {components.map((component, index) => (
+                <li key={component}><a href={`/${framework}/${component}.html`}>{component}</a></li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    ),
+    document.getElementById('container')
+  )
+}, false);

src/iterate.js

@@ -0,0 +1,33 @@
+import React, {Component, PropTypes, Children, cloneElement} from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
+class Iterate extends Component {
+  constructor(props) {
+    super(props);
+    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+    this.previousItems = [];
+    this.previousRendered = 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;
+  }
+  render() {
+    const {root, items} = this.props;
+
+    return cloneElement(root, {
+      children: this.renderItems(items)
+    });
+  }
+}
+Iterate.propTypes = {
+  children: PropTypes.func,
+  items: PropTypes.array,
+  root: PropTypes.element
+};
+
+export default Iterate;

src/material-ui/boilerplate.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import injectTapEventPlugin from 'react-tap-event-plugin';
+injectTapEventPlugin();
+
+const muiTheme = getMuiTheme();
+
+export default ({children}) => (
+  <MuiThemeProvider muiTheme={muiTheme} children={children} />
+);

src/material-ui/list-iterate.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import benchmark from '../benchmark';
+import {list, onClick} from '../fixtures';
+import MuiBoilerplate from './boilerplate';
+
+import {List, ListItem} from 'material-ui';
+import Iterate from '../iterate';
+
+benchmark(badProps => (
+  <MuiBoilerplate>
+    <Iterate
+      badProps={badProps}
+      root={<List />}
+      items={list}
+      children={(item, index) => (
+        <ListItem key={index} onTouchTap={badProps ? () => {console.log('Bad', index); onClick('hello')} : onClick} primaryText={item} />
+      )}
+    />
+  </MuiBoilerplate>
+));

src/material-ui/list.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import benchmark from '../benchmark';
+import {list, onClick} from '../fixtures';
+import MuiBoilerplate from './boilerplate';
+
+import {List, ListItem} from 'material-ui';
+
+benchmark(badProps => (
+  <MuiBoilerplate>
+    <List>
+      {list.map((item, index) => (
+        <ListItem key={index} onTouchTap={badProps ? () => onClick(null, 'Test', index) : onClick} primaryText={item} />
+      ))}
+    </List>
+  </MuiBoilerplate>
+));

src/react-toolbox/config.scss

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

src/react-toolbox/list-iterate.js

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

src/react-toolbox/list.js

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

webpack.config.js

@@ -0,0 +1,67 @@
+var webpack = require('webpack');
+var path = require('path');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var autoprefixer = require('autoprefixer');
+var tests = require('./src/config').tests;
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports = {
+  context: __dirname,
+  devtool: 'source-map',
+  entry: tests.reduce((obj, test) => {
+    obj[test.name] = test.entry;
+    return obj;
+  }, {
+    index: './src/index'
+  }),
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js',
+    publicPath: '/'
+  },
+  module: {
+    loaders: [
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
+      {
+        test: /(\.scss|\.css)$/,
+        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox')
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['', '.jsx', '.scss', '.js', '.json'],
+    modulesDirectories: [
+      'node_modules',
+      path.resolve(__dirname, './node_modules')
+    ]
+  },
+  toolbox: {
+    theme: path.join(__dirname, 'src/react-toolbox/config.scss')
+  },
+  postcss: [autoprefixer],
+  plugins: tests.map(test => new HtmlWebpackPlugin({
+    filename: test.filename,
+    title: `${test.framework} - ${test.component}`,
+    chunks: [test.name],
+    inject: false,
+    template: require('html-webpack-template'),
+    appMountId: 'container'
+  }))
+  .concat(
+    new HtmlWebpackPlugin({
+      title: `Index`,
+      chunks: ['index'],
+      inject: false,
+      template: require('html-webpack-template'),
+      appMountId: 'container'
+    }),
+    new ExtractTextPlugin('[name].css', { allChunks: true }),
+    new webpack.DefinePlugin({
+      process: {
+        env: {
+          NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production')
+        }
+      }
+    })
+  )
+};