kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-05-16 16:31:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add 'platform' benchmark

Browse Source 
The "platform" benchmark relies on no intermediate layer. All the static
CSS it requires is inlined in the HTML page.
This commit is contained in:
Nicolas Gallagher
2017-03-25 09:11:23 -07:00
parent d33aa3eee2
commit e81394c26e
6 changed files with 68 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
performance/implementations/css-modules/View/styles.css
View File

@@ -18,4 +18,4 @@
list-style: none;
min-height: 0;
min-width: 0;
};
}

17
performance/implementations/platform/Box/index.js Normal file
View File

@@ -0,0 +1,17 @@
/* eslint-disable react/prop-types */
import classnames from 'classnames';
import React from 'react';
import View from '../View';
const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
<View
{...other}
className={classnames(`color${color}`, {
fixed: fixed,
outer: outer,
row: layout === 'row'
})}
/>
);
module.exports = Box;

7
performance/implementations/platform/View/index.js Normal file
View File

@@ -0,0 +1,7 @@
/* eslint-disable react/prop-types */
import classnames from 'classnames';
import React from 'react';
const View = props => <div {...props} className={classnames('view', props.className)} />;
module.exports = View;

7
performance/implementations/platform/index.js Normal file
View File

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

33
performance/index.html
View File

@@ -3,6 +3,39 @@
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- "platform" implementation -->
<style>
.view {
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;
background-color: transparent;
color: inherit;
font: inherit;
text-align: inherit;
text-decoration: none;
list-style: none;
min-height: 0;
min-width: 0;
}
.outer { padding: 4px; }
.row { flex-direction: row; }
.color0 { background-color: #222; }
.color1 { background-color: #666; }
.color2 { background-color: #999; }
.color3 { background-color: blue; }
.color4 { background-color: orange; }
.color5 { background-color: red; }
.fixed { width: 20px; height: 20px; }
</style>
</head>
<body>
<div class="root"></div>

3
performance/index.js
View File

@@ -1,5 +1,6 @@
import cssModules from './implementations/css-modules';
import glamor from './implementations/glamor';
import platform from './implementations/platform';
import reactNative from './implementations/react-native-web';
import styledComponents from './implementations/styled-components';
@@ -8,11 +9,13 @@ import renderWideTree from './tests/renderWideTree';
const tests = [
// deep tree
() => renderDeepTree('platform', platform),
() => renderDeepTree('css-modules', cssModules),
() => renderDeepTree('react-native-web', reactNative),
() => renderDeepTree('styled-components', styledComponents),
() => renderDeepTree('glamor', glamor),
// wide tree
() => renderWideTree('platform', platform),
() => renderWideTree('css-modules', cssModules),
() => renderWideTree('react-native-web', reactNative),
() => renderWideTree('styled-components', styledComponents),