more interesting example

.babelrc

@@ -2,7 +2,7 @@
   "optional": [
     "es7.decorators",
     "es7.classProperties",
-    "optimisation.react.constantElements",
+    "es7.objectRestSpread",
     "runtime"
   ]
 }

src/flex.jsx

@@ -62,8 +62,7 @@ export class FlexContext extends Component {
 
   startNewStyleTree () {
     this.stylesRoot = { children: [] };
-    const { setStyle: layoutFunc } = setStyle(undefined, this.stylesRoot);
-    this.styleTools.setStyle = layoutFunc;
+    ({ setStyle: this.styleTools.setStyle } = setStyle(undefined, this.stylesRoot));
   }
 
   computeLayoutAndBroadcastResults () {
@@ -129,27 +128,19 @@ export const FlexBox = (Composed, componentStyles = {}) => class extends Compone
   }
 
   componentWillMount () {
-    const { setStyle: setStyleFunc, path} = this.context.styleTools.setStyle(this.flexStyles);
-
-    this.styleTools.setStyle = setStyleFunc;
-    this.pathToNode = path;
+    ({ setStyle: this.styleTools.setStyle,
+      path: this.pathToNode } = this.context.styleTools.setStyle(this.flexStyles));
 
     this.context.waitForLayoutCalculation(this.handleLayoutCalculation);
   }
 
-  componentWillReceiveProps () {
-    console.log('FlexItem receiving props');
-  }
-
   componentWillReceiveProps (nextProps) {
-    const { svgStyles, flexStyles } = partitionStyles(nextProps.style)
-    const { setStyle: setStyleFunc, path} = this.context.styleTools.setStyle(flexStyles);
+    const { flexStyles } = partitionStyles(nextProps.style);
 
-    this.styleTools.setStyle = setStyleFunc;
-    this.pathToNode = path;
+    ({ setStyle: this.styleTools.setStyle,
+      path: this.pathToNode } = this.context.styleTools.setStyle(flexStyles));
 
     this.context.waitForLayoutCalculation(this.handleLayoutCalculation);
-
   }
 
   getChildContext () {

test/main.js

@@ -1,3 +1,5 @@
+'use strict';
+
 import { default as React, Component } from 'react';
 // import Chessboard from './chessboard.jsx';
 import Thing from './test.js';

test/test.js

@@ -1,3 +1,5 @@
+'use strict';
+
 import { default as React, Component } from 'react';
 import { FlexContext, FlexBox } from 'flex';
 import { EventEmitter } from 'wolfy87-eventemitter';
@@ -10,21 +12,45 @@ class Container extends Component {
 }
 
 const circleStyle = {
-  height: 150,
-  width: 150,
-  fill: 'tomato'
+  margin: 10,
+  height: 100,
+  width: 100
 };
 
 @composeWith(FlexBox)
 class Circle extends Component {
   render () {
-    return <circle style={this.props.style} cx="50" cy="50" r="50" />;
+    return <circle style={this.props.style} cx="40" cy="40" r="40" />;
   }
 }
 
 export default class Thing extends Component {
+  static colors = (function (n) {
+    const totalColors = 256**3;
+    const stepSize = Math.floor(totalColors / n);
+    const colorValues = []
+
+    for (let i = 0; i < n; i++) {
+      colorValues.push(i * stepSize);
+    }
+
+    return colorValues.map(value => rgb(value));
+
+    function rgb (value) {
+      const digits = [];
+
+      for (let i = 0; i < 3; i++) {
+        digits[i] = Math.floor(value / 256 ** (2 - i));
+        value %= 256 ** (2 - i);
+      }
+
+      return `rgb(${digits[0]},${digits[1]}, ${digits[2]})`;
+    }
+
+  })(18);
+
   state = {
-    height: 900,
+    height: 700,
     width: 700
   };
 
@@ -38,22 +64,22 @@ export default class Thing extends Component {
   }
 
   render () {
-    console.log('Calling render');
+    const { height, width } = this.state;
 
     const containerStyle = {
+      height, 
+      width,
       flexDirection: 'row',
-      flexWrap: 'wrap',
-      height: this.state.height,
-      width: this.state.width
+      flexWrap: 'wrap'
     };
 
     return (
-      <svg height={this.state.height} width={this.state.width}>
+      <svg height={height} width={width}>
         <FlexContext>
-          <rect height={this.state.height - 1} width={this.state.width - 1} style={{fill: 'none', stroke: 'black'}} />
+          <rect height={height - 1} width={width - 1} style={{fill: 'lightgrey', stroke: 'black'}} />
           <Container style={containerStyle} >
-            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(idx =>
-              <Circle style={circleStyle} key={idx} />)}
+            {Thing.colors.map((color, idx) => 
+              <Circle style={{fill: color, ...circleStyle}} key={idx} />)}
           </Container>
         </FlexContext>
       </svg>

webpack.config.js

@@ -1,3 +1,5 @@
+'use strict';
+
 const path = require('path');
 
 module.exports = {