zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-31 09:44:21 +00: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
performance/implementations/css-modules/View/styles.css
+1 -1
View File
@@ -18,4 +18,4 @@
list-style: none; list-style: none;
min-height: 0; min-height: 0;
min-width: 0; min-width: 0;
}; }
performance/implementations/platform/Box/index.js
+17
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;
performance/implementations/platform/View/index.js
+7
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;
performance/implementations/platform/index.js
+7
View File
@@ -0,0 +1,7 @@
import Box from './Box';
import View from './View';
export default {
Box,
View
};
performance/index.html
+33
View File
@@ -3,6 +3,39 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Title</title> <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> </head>
<body> <body>
<div class="root"></div> <div class="root"></div>
performance/index.js
+3
View File
@@ -1,5 +1,6 @@
import cssModules from './implementations/css-modules'; import cssModules from './implementations/css-modules';
import glamor from './implementations/glamor'; import glamor from './implementations/glamor';
import platform from './implementations/platform';
import reactNative from './implementations/react-native-web'; import reactNative from './implementations/react-native-web';
import styledComponents from './implementations/styled-components'; import styledComponents from './implementations/styled-components';
@@ -8,11 +9,13 @@ import renderWideTree from './tests/renderWideTree';
const tests = [ const tests = [
// deep tree // deep tree
() => renderDeepTree('platform', platform),
() => renderDeepTree('css-modules', cssModules), () => renderDeepTree('css-modules', cssModules),
() => renderDeepTree('react-native-web', reactNative), () => renderDeepTree('react-native-web', reactNative),
() => renderDeepTree('styled-components', styledComponents), () => renderDeepTree('styled-components', styledComponents),
() => renderDeepTree('glamor', glamor), () => renderDeepTree('glamor', glamor),
// wide tree // wide tree
() => renderWideTree('platform', platform),
() => renderWideTree('css-modules', cssModules), () => renderWideTree('css-modules', cssModules),
() => renderWideTree('react-native-web', reactNative), () => renderWideTree('react-native-web', reactNative),
() => renderWideTree('styled-components', styledComponents), () => renderWideTree('styled-components', styledComponents),