From bbf7674b4364649c528c723830a2465597af5915 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Thu, 18 Jan 2018 17:49:47 +0100 Subject: [PATCH] Add react-fela to benchmarks Close #779 --- packages/benchmarks/README.md | 1 + packages/benchmarks/package.json | 2 + .../src/implementations/react-fela/Box.js | 46 +++++++++++ .../src/implementations/react-fela/Dot.js | 28 +++++++ .../implementations/react-fela/Provider.js | 19 +++++ .../src/implementations/react-fela/View.js | 24 ++++++ .../src/implementations/react-fela/index.js | 11 +++ yarn.lock | 79 ++++++++++++++++++- 8 files changed, 209 insertions(+), 1 deletion(-) create mode 100644 packages/benchmarks/src/implementations/react-fela/Box.js create mode 100644 packages/benchmarks/src/implementations/react-fela/Dot.js create mode 100644 packages/benchmarks/src/implementations/react-fela/Provider.js create mode 100644 packages/benchmarks/src/implementations/react-fela/View.js create mode 100644 packages/benchmarks/src/implementations/react-fela/index.js diff --git a/packages/benchmarks/README.md b/packages/benchmarks/README.md index 60f54251..d596bf62 100644 --- a/packages/benchmarks/README.md +++ b/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` | diff --git a/packages/benchmarks/package.json b/packages/benchmarks/package.json index 22e970c4..8fbd1aaf 100644 --- a/packages/benchmarks/package.json +++ b/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", diff --git a/packages/benchmarks/src/implementations/react-fela/Box.js b/packages/benchmarks/src/implementations/react-fela/Box.js new file mode 100644 index 00000000..bf66761d --- /dev/null +++ b/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; diff --git a/packages/benchmarks/src/implementations/react-fela/Dot.js b/packages/benchmarks/src/implementations/react-fela/Dot.js new file mode 100644 index 00000000..c46cdbfc --- /dev/null +++ b/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; diff --git a/packages/benchmarks/src/implementations/react-fela/Provider.js b/packages/benchmarks/src/implementations/react-fela/Provider.js new file mode 100644 index 00000000..e563bd6b --- /dev/null +++ b/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 ( + + {this.props.children} + + ); + } +} + +export default Provider; diff --git a/packages/benchmarks/src/implementations/react-fela/View.js b/packages/benchmarks/src/implementations/react-fela/View.js new file mode 100644 index 00000000..c98e0de6 --- /dev/null +++ b/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; diff --git a/packages/benchmarks/src/implementations/react-fela/index.js b/packages/benchmarks/src/implementations/react-fela/index.js new file mode 100644 index 00000000..f32ff155 --- /dev/null +++ b/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 +}; diff --git a/yarn.lock b/yarn.lock index fe9afad5..0ee0639f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2604,12 +2604,18 @@ css-color-names@0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" -css-in-js-utils@^2.0.0: +css-in-js-utils@2.0.0, css-in-js-utils@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.0.tgz#5af1dd70f4b06b331f48d22a3d86e0786c0b9435" dependencies: hyphenate-style-name "^1.0.2" +css-in-js-utils@^1.0.3: + version "1.0.3" + resolved "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-1.0.3.tgz#9ac7e02f763cf85d94017666565ed68a5b5f3215" + dependencies: + hyphenate-style-name "^1.0.2" + css-loader@^0.28.8: version "0.28.8" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.8.tgz#ff36381464dea18fe60f2601a060ba6445886bd5" @@ -3587,6 +3593,10 @@ fast-levenshtein@~2.0.4: version "2.0.6" resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" +fast-loops@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/fast-loops/-/fast-loops-1.0.0.tgz#2cdd7e0ff67343b2b5f5e627d855a50b4bed559a" + fast-memoize@^2.2.7: version "2.2.8" resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.2.8.tgz#d7f899f31d037b12d9db4281912f9018575720b1" @@ -3613,6 +3623,65 @@ fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9: setimmediate "^1.0.5" ua-parser-js "^0.7.9" +fela-dom@^5.0.0: + version "5.0.8" + resolved "https://registry.npmjs.org/fela-dom/-/fela-dom-5.0.8.tgz#e793596b01075aec0b89b67935db70a2d6dc0da8" + dependencies: + fela-tools "^5.0.7" + fela-utils "^6.0.1" + +fela-tools@^5.0.0, fela-tools@^5.0.7: + version "5.1.2" + resolved "https://registry.npmjs.org/fela-tools/-/fela-tools-5.1.2.tgz#c6760b42d72116911c2c0341b6d880cfc11c76a8" + dependencies: + css-in-js-utils "2.0.0" + fast-loops "^1.0.0" + fela "^6.1.3" + fela-utils "^8.0.3" + +fela-utils@^5.0.0: + version "5.0.5" + resolved "https://registry.npmjs.org/fela-utils/-/fela-utils-5.0.5.tgz#6a89290c8aa6866d9a0b98f41408485edc454ada" + dependencies: + css-in-js-utils "^1.0.3" + +fela-utils@^6.0.1: + version "6.0.1" + resolved "https://registry.npmjs.org/fela-utils/-/fela-utils-6.0.1.tgz#eb9c50a0fd984a194e2b984d176237ee349dcb7e" + dependencies: + css-in-js-utils "^2.0.0" + +fela-utils@^8.0.3: + version "8.0.3" + resolved "https://registry.npmjs.org/fela-utils/-/fela-utils-8.0.3.tgz#4a1728e7f5711e26f6f37da9c85a6b270c84c466" + dependencies: + css-in-js-utils "^2.0.0" + fast-loops "^1.0.0" + +fela@5.0.0: + version "5.0.0" + resolved "https://registry.npmjs.org/fela/-/fela-5.0.0.tgz#e3b4c58637ed8666263de36fcbad4030f90a989b" + dependencies: + css-in-js-utils "^1.0.3" + fela-tools "^5.0.0" + fela-utils "^5.0.0" + +fela@^5.0.0: + version "5.2.0" + resolved "https://registry.npmjs.org/fela/-/fela-5.2.0.tgz#62a88de0962f0374429f3aed284025cf032b6e36" + dependencies: + css-in-js-utils "^2.0.0" + fela-tools "^5.0.7" + fela-utils "^6.0.1" + +fela@^6.1.3: + version "6.1.3" + resolved "https://registry.npmjs.org/fela/-/fela-6.1.3.tgz#c3bc8726dada63c23914bed9ca79d902e61e9a74" + dependencies: + css-in-js-utils "2.0.0" + fast-loops "^1.0.0" + fela-utils "^8.0.3" + figures@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e" @@ -6901,6 +6970,14 @@ react-dom@^16.2.0: object-assign "^4.1.1" prop-types "^15.6.0" +react-fela@5.0.0: + version "5.0.0" + resolved "https://registry.npmjs.org/react-fela/-/react-fela-5.0.0.tgz#5412eb3a109f7bb95ff01aa375cbbbd6a3676762" + dependencies: + fela "^5.0.0" + fela-dom "^5.0.0" + prop-types "^15.5.8" + react-fuzzy@^0.5.1: version "0.5.1" resolved "https://registry.yarnpkg.com/react-fuzzy/-/react-fuzzy-0.5.1.tgz#295c2a4079ad39402e05605d9d7accd2db8527b6"