Add react-fela to benchmarks

Close #779

packages/benchmarks/README.md

@@ -53,6 +53,7 @@ Other libraries
 | `glamor@2.20.40`                      |  `21.59` `±05.38` |  `27.93` `±07.56` | ‡ |
 | `emotion@8.0.12`                      |  `21.07` `±04.16` |  `31.40` `±09.40` | ‡ `19.80` `±13.56` |
 | `styletron-react@3.0.3`               |  `23.55` `±05.14` |  `34.26` `±07.58` |   `10.39` `±02.94` |
+| `react-fela@5.0.0`                    |  `27.58` `±04.26` |  `39.54` `±05.46` |   `10.93` `±01.69` |
 | `react-jss@8.2.1`                     |  `27.31` `±07.87` |  `40.74` `±10.67` | - |
 | `styled-components@2.4.0`             |  `43.89` `±06.99` |  `63.26` `±09.02` |   `16.17` `±03.71` |
 | `reactxp@0.51.0-alpha.9`              |  `51.86` `±07.21` |  `78.80` `±11.85` |   `15.04` `±03.92` |

packages/benchmarks/package.json

@@ -11,11 +11,13 @@
     "classnames": "^2.2.5",
     "d3-scale-chromatic": "^1.1.1",
     "emotion": "8.0.12",
+    "fela": "5.0.0",
     "glamor": "2.20.40",
     "radium": "0.21.0",
     "react": "^16.2.0",
     "react-component-benchmark": "^0.0.4",
     "react-dom": "^16.2.0",
+    "react-fela": "5.0.0",
     "react-jss": "8.2.1",
     "react-native-web": "^0.3.2",
     "reactxp": "0.51.0-alpha.9",

packages/benchmarks/src/implementations/react-fela/Box.js

@@ -0,0 +1,46 @@
+import { createComponent } from 'react-fela';
+import View from './View';
+
+const Box = createComponent(
+  ({ color, fixed = false, layout = 'column', outer = false }) => ({
+    ...styles[`color${color}`],
+    ...(fixed && styles.fixed),
+    ...(layout === 'row' && styles.row),
+    ...(outer && styles.outer)
+  }),
+  View
+);
+
+const styles = {
+  outer: {
+    alignSelf: 'flex-start',
+    padding: '4px'
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  color0: {
+    backgroundColor: '#14171A'
+  },
+  color1: {
+    backgroundColor: '#AAB8C2'
+  },
+  color2: {
+    backgroundColor: '#E6ECF0'
+  },
+  color3: {
+    backgroundColor: '#FFAD1F'
+  },
+  color4: {
+    backgroundColor: '#F45D22'
+  },
+  color5: {
+    backgroundColor: '#E0245E'
+  },
+  fixed: {
+    width: '6px',
+    height: '6px'
+  }
+};
+
+export default Box;

packages/benchmarks/src/implementations/react-fela/Dot.js

@@ -0,0 +1,28 @@
+/* eslint-disable react/prop-types */
+import { createComponent } from 'react-fela';
+
+const Dot = createComponent(
+  ({ size, x, y, children, color }) => ({
+    ...staticStyle,
+    borderBottomColor: color,
+    borderRightWidth: `${size / 2}px`,
+    borderBottomWidth: `${size / 2}px`,
+    borderLeftWidth: `${size / 2}px`,
+    marginLeft: `${x}px`,
+    marginTop: `${y}px`
+  }),
+  'div'
+);
+
+const staticStyle = {
+  position: 'absolute',
+  cursor: 'pointer',
+  width: 0,
+  height: 0,
+  borderColor: 'transparent',
+  borderStyle: 'solid',
+  borderTopWidth: 0,
+  transform: 'translate(50%, 50%)'
+};
+
+export default Dot;

packages/benchmarks/src/implementations/react-fela/Provider.js

@@ -0,0 +1,19 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { createRenderer } from 'fela';
+import { Provider as FelaProvider } from 'react-fela';
+import View from './View';
+
+const renderer = createRenderer();
+
+class Provider extends React.Component {
+  render() {
+    return (
+      <FelaProvider renderer={renderer}>
+        <View>{this.props.children}</View>
+      </FelaProvider>
+    );
+  }
+}
+
+export default Provider;

packages/benchmarks/src/implementations/react-fela/View.js

@@ -0,0 +1,24 @@
+/* eslint-disable react/prop-types */
+import { createComponent } from 'react-fela';
+
+const View = createComponent(
+  () => ({
+    alignItems: 'stretch',
+    borderWidth: '0px',
+    borderStyle: 'solid',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    flexShrink: '0',
+    margin: '0px',
+    padding: '0px',
+    position: 'relative',
+    // fix flexbox bugs
+    minHeight: '0px',
+    minWidth: '0px'
+  }),
+  'div'
+);
+
+export default View;

packages/benchmarks/src/implementations/react-fela/index.js

@@ -0,0 +1,11 @@
+import Box from './Box';
+import Dot from './Dot';
+import Provider from './Provider';
+import View from './View';
+
+export default {
+  Box,
+  Dot,
+  Provider,
+  View
+};