kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-03-27 01:34:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add styled-jsx to benchmarks

Browse Source 
Close #782
This commit is contained in:
Giuseppe Gurgone
2018-01-19 14:14:37 +01:00
committed by Nicolas Gallagher
parent 6ecdc1a517
commit 1b493c9914
9 changed files with 155 additions and 10 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
| `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-jsx@2.2.1` | `27.46` `±07.85` | `41.47` `±11.53` | `29.16` `±09.98` |
| `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` |
| `radium@0.21.0` | `101.06` `±13.00` | `144.46` `±16.94` | `17.44` `±03.59` |

1
packages/benchmarks/package.json
View File

@@ -22,6 +22,7 @@
"react-native-web": "^0.3.2",
"reactxp": "0.51.0-alpha.9",
"styled-components": "2.4.0",
"styled-jsx": "2.2.1",
"styletron-client": "3.0.2",
"styletron-react": "3.0.3"
},

46
packages/benchmarks/src/implementations/styled-jsx/Box.js Normal file
View File

@@ -0,0 +1,46 @@
/* eslint-disable react/prop-types */
import classnames from 'classnames';
import React from 'react';
import View from './View';
const getColor = color => {
switch (color) {
case 0:
return '#14171A';
case 1:
return '#AAB8C2';
case 2:
return '#E6ECF0';
case 3:
return '#FFAD1F';
case 4:
return '#F45D22';
case 5:
return '#E0245E';
default:
return 'transparent';
}
};
const Box = props => {
const { className, children: styles } = (
<scope className={classnames('Box', props.fixed && 'fixed')}>
<style jsx>{`
.Box {
align-self: flex-start;
flex-direction: ${props.layout === 'column' ? 'column' : 'row'};
padding: ${props.outer ? '4px' : '0'};
background-color: ${getColor(props.color)};
}
.fixed {
height: 6px;
width: 6px;
}
`}</style>
</scope>
).props;
return <View className={className}>{[props.children, styles]}</View>;
};
export default Box;

36
packages/benchmarks/src/implementations/styled-jsx/Dot.js Normal file
View File

@@ -0,0 +1,36 @@
/* eslint-disable react/prop-types */
import React from 'react';
import View from './View';
const Dot = props => {
const { className, children: styles } = (
<scope className="Dot">
<style jsx>{`
.Dot {
position: absolute;
cursor: pointer;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-top-width: 0;
transform: translate(50%, 50%);
}
`}</style>
<style jsx>{`
.Dot {
margin-left: ${props.x}px;
margin-top: ${props.y}px;
border-right-width: ${props.size / 2}px;
border-bottom-width: ${props.size / 2}px;
border-left-width: ${props.size / 2}px;
border-bottom-color: ${props.color};
}
`}</style>
</scope>
).props;
return <View className={className}>{[props.children, styles]}</View>;
};
export default Dot;

2
packages/benchmarks/src/implementations/styled-jsx/Provider.js Normal file
View File

@@ -0,0 +1,2 @@
import View from './View';
export default View;

32
packages/benchmarks/src/implementations/styled-jsx/View.js Normal file
View File

@@ -0,0 +1,32 @@
/* eslint-disable react/prop-types */
import React from 'react';
class View extends React.Component {
render() {
const { children, className, ...props } = this.props;
return (
<div {...props} className={`initial ${className}`}>
{children}
<style jsx>{`
.initial {
align-items: stretch;
border-width: 0;
border-style: solid;
box-sizing: border-box;
display: flex;
flex-basis: auto;
flex-direction: column;
flex-shrink: 0;
margin: 0;
padding: 0;
position: relative;
min-height: 0;
min-width: 0;
}
`}</style>
</div>
);
}
}
export default View;

11
packages/benchmarks/src/implementations/styled-jsx/index.js 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
};

2
packages/benchmarks/webpack.config.js
View File

@@ -32,7 +32,7 @@ module.exports = {
options: {
cacheDirectory: false,
presets: babelPreset,
plugins: ['react-native-web']
plugins: ['react-native-web', 'styled-jsx/babel']
}
}
}

34
yarn.lock
View File

@@ -1056,7 +1056,7 @@ babel-plugin-syntax-function-bind@^6.8.0:
version "6.13.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-function-bind/-/babel-plugin-syntax-function-bind-6.13.0.tgz#48c495f177bdf31a981e732f55adc0bdd2601f46"
babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.5.0, babel-plugin-syntax-jsx@^6.8.0:
babel-plugin-syntax-jsx@6.18.0, babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.5.0, babel-plugin-syntax-jsx@^6.8.0:
version "6.18.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -1669,7 +1669,7 @@ babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
invariant "^2.2.2"
lodash "^4.17.4"
babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
babel-types@6.26.0, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
dependencies:
@@ -2459,7 +2459,7 @@ conventional-recommended-bump@^1.0.1:
meow "^3.3.0"
object-assign "^4.0.1"
convert-source-map@^1.4.0, convert-source-map@^1.5.0:
convert-source-map@1.5.1, convert-source-map@^1.4.0, convert-source-map@^1.5.0:
version "1.5.1"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
@@ -7706,16 +7706,16 @@ source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, sourc
version "0.5.7"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
source-map@0.6.1, source-map@^0.6.1, source-map@~0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
source-map@^0.4.4:
version "0.4.4"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
dependencies:
amdefine ">=0.0.4"
source-map@^0.6.1, source-map@~0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
spdx-correct@~1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
@@ -7816,7 +7816,7 @@ strict-uri-encode@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
string-hash@^1.1.3:
string-hash@1.1.3, string-hash@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
@@ -7950,6 +7950,18 @@ styled-components@2.4.0:
stylis "^3.4.0"
supports-color "^3.2.3"
styled-jsx@2.2.1, styled-jsx@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.2.1.tgz#8b38b9e53e5d9767e392595ab1afdc8426b3ba5d"
dependencies:
babel-plugin-syntax-jsx "6.18.0"
babel-types "6.26.0"
convert-source-map "1.5.1"
source-map "0.6.1"
string-hash "1.1.3"
stylis "3.4.5"
stylis-rule-sheet "0.0.7"
styletron-client@3.0.2, styletron-client@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/styletron-client/-/styletron-client-3.0.2.tgz#9b2853e8b94e6e94d70166b8403f27ab2d10c514"
@@ -7983,11 +7995,15 @@ styletron-utils@^3.0.2:
dependencies:
inline-style-prefixer "^4.0.0"
stylis-rule-sheet@0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.7.tgz#5c51dc879141a61821c2094ba91d2cbcf2469c6c"
stylis-rule-sheet@^0.0.5:
version "0.0.5"
resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.5.tgz#ebae935cc1f6fb31b9b62dba47f2ea8b833dad9f"
stylis@^3.3.2, stylis@^3.4.0:
stylis@3.4.5, stylis@^3.3.2, stylis@^3.4.0:
version "3.4.5"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.5.tgz#d7b9595fc18e7b9c8775eca8270a9a1d3e59806e"