kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-01-12 22:51:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add react-fela to benchmarks

Browse Source 
Close #779
This commit is contained in:
Javi Velasco
2018-01-18 17:49:47 +01:00
committed by Nicolas Gallagher
parent f163e4f16f
commit bbf7674b43
8 changed files with 209 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/benchmarks/README.md
View File

@@ -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` |

2
packages/benchmarks/package.json
View File

@@ -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",

46
packages/benchmarks/src/implementations/react-fela/Box.js vendored Normal file
View File

@@ -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;

28
packages/benchmarks/src/implementations/react-fela/Dot.js vendored Normal file
View File

@@ -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;

19
packages/benchmarks/src/implementations/react-fela/Provider.js vendored Normal file
View File

@@ -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;

24
packages/benchmarks/src/implementations/react-fela/View.js vendored Normal file
View File

@@ -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;

11
packages/benchmarks/src/implementations/react-fela/index.js vendored Normal file
View File

@@ -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
};

79
yarn.lock
View File

@@ -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"