From 547c375bd6fa251500d4426daf4869fa7fcdfe7d Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 8 Apr 2017 18:42:57 -0700 Subject: [PATCH] Add more comparative benchmarks Add "aphrodite", "react-jss", and "reactxp" renderers. "react-addons-perf" is required due to: https://github.com/Microsoft/reactxp/issues/11 --- performance/README.md | 23 ++- performance/components/Box/index.platform.js | 17 -- performance/components/View/index.platform.js | 7 - performance/components/css-modules.js | 7 - performance/components/glamor.js | 7 - performance/components/platform.js | 7 - performance/components/react-native-web.js | 9 - performance/components/styled-components.js | 7 - performance/index.html | 35 +--- performance/index.js | 51 +++-- performance/package.json | 4 + performance/src/aphrodite.js | 7 + .../{ => src}/components/AppText/index.js | 0 .../{ => src}/components/AspectRatio/index.js | 0 performance/src/components/Box/aphrodite.js | 49 +++++ .../components/Box/css-modules.js} | 2 +- .../components/Box/glamor.js} | 2 +- performance/src/components/Box/jss.js | 50 +++++ .../components/Box/react-native-stylesheet.js | 49 +++++ .../components/Box/react-native.js} | 0 performance/src/components/Box/reactxp.js | 48 +++++ .../components/Box/styled-components.js} | 2 +- .../{ => src}/components/Box/styles.css | 0 .../{ => src}/components/GridView/index.js | 0 .../components/Icons/DirectMessage.js | 0 .../{ => src}/components/Icons/Heart.js | 0 .../{ => src}/components/Icons/Reply.js | 0 .../{ => src}/components/Icons/Retweet.js | 0 .../{ => src}/components/Icons/styles.js | 0 .../{ => src}/components/NestedTree/index.js | 0 .../{ => src}/components/Tweet/index.js | 0 .../{ => src}/components/TweetAction/index.js | 0 .../components/TweetActionsBar/index.js | 0 .../{ => src}/components/TweetText/index.js | 0 .../components/TweetTextPart/index.js | 0 .../{ => src}/components/UserAvatar/index.js | 0 .../{ => src}/components/UserNames/index.js | 0 performance/src/components/View/aphrodite.js | 34 ++++ .../components/View/css-modules.js} | 0 .../components/View/glamor.js} | 2 +- performance/src/components/View/jss.js | 37 ++++ .../View/react-native-stylesheet.js | 38 ++++ .../components/View/styled-components.js} | 0 .../{ => src}/components/View/styles.css | 0 performance/{ => src}/components/theme.js | 0 performance/src/css-modules.js | 7 + performance/src/glamor.js | 7 + performance/src/jss.js | 7 + performance/src/react-native-stylesheet.js | 7 + performance/src/react-native.js | 9 + performance/src/reactxp.js | 7 + performance/src/styled-components.js | 7 + performance/tests/renderDeepTree.js | 2 +- performance/tests/renderTweet.js | 2 +- performance/tests/renderWideTree.js | 2 +- performance/yarn.lock | 179 +++++++++++++++++- 56 files changed, 599 insertions(+), 131 deletions(-) delete mode 100644 performance/components/Box/index.platform.js delete mode 100644 performance/components/View/index.platform.js delete mode 100644 performance/components/css-modules.js delete mode 100644 performance/components/glamor.js delete mode 100644 performance/components/platform.js delete mode 100644 performance/components/react-native-web.js delete mode 100644 performance/components/styled-components.js create mode 100644 performance/src/aphrodite.js rename performance/{ => src}/components/AppText/index.js (100%) rename performance/{ => src}/components/AspectRatio/index.js (100%) create mode 100644 performance/src/components/Box/aphrodite.js rename performance/{components/Box/index.css-modules.js => src/components/Box/css-modules.js} (90%) rename performance/{components/Box/index.glamor.js => src/components/Box/glamor.js} (94%) create mode 100644 performance/src/components/Box/jss.js create mode 100644 performance/src/components/Box/react-native-stylesheet.js rename performance/{components/Box/index.js => src/components/Box/react-native.js} (100%) create mode 100644 performance/src/components/Box/reactxp.js rename performance/{components/Box/index.styled.js => src/components/Box/styled-components.js} (93%) rename performance/{ => src}/components/Box/styles.css (100%) rename performance/{ => src}/components/GridView/index.js (100%) rename performance/{ => src}/components/Icons/DirectMessage.js (100%) rename performance/{ => src}/components/Icons/Heart.js (100%) rename performance/{ => src}/components/Icons/Reply.js (100%) rename performance/{ => src}/components/Icons/Retweet.js (100%) rename performance/{ => src}/components/Icons/styles.js (100%) rename performance/{ => src}/components/NestedTree/index.js (100%) rename performance/{ => src}/components/Tweet/index.js (100%) rename performance/{ => src}/components/TweetAction/index.js (100%) rename performance/{ => src}/components/TweetActionsBar/index.js (100%) rename performance/{ => src}/components/TweetText/index.js (100%) rename performance/{ => src}/components/TweetTextPart/index.js (100%) rename performance/{ => src}/components/UserAvatar/index.js (100%) rename performance/{ => src}/components/UserNames/index.js (100%) create mode 100644 performance/src/components/View/aphrodite.js rename performance/{components/View/index.css-modules.js => src/components/View/css-modules.js} (100%) rename performance/{components/View/index.glamor.js => src/components/View/glamor.js} (86%) create mode 100644 performance/src/components/View/jss.js create mode 100644 performance/src/components/View/react-native-stylesheet.js rename performance/{components/View/index.styled.js => src/components/View/styled-components.js} (100%) rename performance/{ => src}/components/View/styles.css (100%) rename performance/{ => src}/components/theme.js (100%) create mode 100644 performance/src/css-modules.js create mode 100644 performance/src/glamor.js create mode 100644 performance/src/jss.js create mode 100644 performance/src/react-native-stylesheet.js create mode 100644 performance/src/react-native.js create mode 100644 performance/src/reactxp.js create mode 100644 performance/src/styled-components.js diff --git a/performance/README.md b/performance/README.md index 74b78aaa..d5700d9d 100644 --- a/performance/README.md +++ b/performance/README.md @@ -13,15 +13,26 @@ The components used in the render benchmarks are simple enough to be implemented by multiple UI or style libraries. The implementations are not equivalent in functionality. +`react-native-web/stylesheet` is a comparative baseline that implements a +simple `View` without much of React Native's functionality. + ## Benchmark results Typical render timings*: mean ± two standard deviations -| Implementation | Deep tree (ms) | Wide tree (ms) | -| :--- | ---: | ---: | -| `css-modules` | `76.66` `±18.46` | `157.03` `±19.79` | -| `react-native-web@0.0.78` | `90.13` `±20.91` | `198.72` `±24.44` | -| `styled-components@2.0.0-7` | `263.06` `±31.87` | `564.53` `±27.62` | -| `glamor@3.0.0-1` | `267.49` `±35.12` | `451.99` `±37.32` | +| Implementation | Deep tree (ms) | Wide tree (ms) | Tweet (ms) | +| :--- | ---: | ---: | ---: | +| `css-modules` | `87.68` `±13.29` | `171.96` `±14.91` | | +| `react-native-web/stylesheet@0.0.81` | `90.59` `±12.03` | `190.37` `±19.65` | | +| `react-native-web@0.0.81` | `105.20` `±17.86` | `226.54` `±29.50` | `12.12` `±6.94ms` | + +Other libraries + +| Implementation | Deep tree (ms) | Wide tree (ms) | +| `aphrodite@1.2.0` | `101.25` `±18.78` | `224.59` `±22.28` | +| `glamor@3.0.0-1` | `143.39` `±23.05` | `275.21` `±21.10` | +| `react-jss@5.4.1 | `142.27` `±16.62` | `318.62` `±26.19` | +| `reactxp@0.34.3` | `221.36` `±23.35` | `472.61` `±40.86` | +| `styled-components@2.0.0-7` | `301.92` `±39.43` | `647.80` `±102.1` | *MacBook Pro (13-inch, Early 2011); 2.7 GHz Intel Core i7; 16 GB 1600 MHz DDR3. Google Chrome 56. diff --git a/performance/components/Box/index.platform.js b/performance/components/Box/index.platform.js deleted file mode 100644 index ba7e5067..00000000 --- a/performance/components/Box/index.platform.js +++ /dev/null @@ -1,17 +0,0 @@ -/* eslint-disable react/prop-types */ -import classnames from 'classnames'; -import React from 'react'; -import View from '../View/index.platform'; - -const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => ( - -); - -module.exports = Box; diff --git a/performance/components/View/index.platform.js b/performance/components/View/index.platform.js deleted file mode 100644 index cb70dbe0..00000000 --- a/performance/components/View/index.platform.js +++ /dev/null @@ -1,7 +0,0 @@ -/* eslint-disable react/prop-types */ -import classnames from 'classnames'; -import React from 'react'; - -const View = props =>
; - -module.exports = View; diff --git a/performance/components/css-modules.js b/performance/components/css-modules.js deleted file mode 100644 index d2b2bcad..00000000 --- a/performance/components/css-modules.js +++ /dev/null @@ -1,7 +0,0 @@ -import Box from './Box/index.css-modules'; -import View from './View/index.css-modules'; - -export default { - Box, - View -}; diff --git a/performance/components/glamor.js b/performance/components/glamor.js deleted file mode 100644 index 5bcb010b..00000000 --- a/performance/components/glamor.js +++ /dev/null @@ -1,7 +0,0 @@ -import Box from './Box/index.glamor'; -import View from './View/index.glamor'; - -export default { - Box, - View -}; diff --git a/performance/components/platform.js b/performance/components/platform.js deleted file mode 100644 index 57cc08e0..00000000 --- a/performance/components/platform.js +++ /dev/null @@ -1,7 +0,0 @@ -import Box from './Box/index.platform'; -import View from './View/index.platform'; - -export default { - Box, - View -}; diff --git a/performance/components/react-native-web.js b/performance/components/react-native-web.js deleted file mode 100644 index fdafe21a..00000000 --- a/performance/components/react-native-web.js +++ /dev/null @@ -1,9 +0,0 @@ -import Box from './Box'; -import Tweet from './Tweet'; -import { View } from 'react-native'; - -export default { - Box, - Tweet, - View -}; diff --git a/performance/components/styled-components.js b/performance/components/styled-components.js deleted file mode 100644 index 87dbebec..00000000 --- a/performance/components/styled-components.js +++ /dev/null @@ -1,7 +0,0 @@ -import Box from './Box/index.styled'; -import View from './View/index.styled'; - -export default { - Box, - View -}; diff --git a/performance/index.html b/performance/index.html index 4c4fe660..74abe613 100644 --- a/performance/index.html +++ b/performance/index.html @@ -2,40 +2,7 @@ - Title - - + Performance tests
diff --git a/performance/index.js b/performance/index.js index 9a55d141..cfd8467a 100644 --- a/performance/index.js +++ b/performance/index.js @@ -1,29 +1,46 @@ -import cssModules from './components/css-modules'; -import glamor from './components/glamor'; -import platform from './components/platform'; -import reactNative from './components/react-native-web'; -import styledComponents from './components/styled-components'; +import aphrodite from './src/aphrodite'; +import cssModules from './src/css-modules'; +import glamor from './src/glamor'; +import jss from './src/jss'; +import reactNative from './src/react-native'; +import reactNativeStyleSheet from './src/react-native-stylesheet'; +import styledComponents from './src/styled-components'; +import xp from './src/reactxp'; import renderDeepTree from './tests/renderDeepTree'; import renderTweet from './tests/renderTweet'; import renderWideTree from './tests/renderWideTree'; -const tests = [ - // tweet +const testAll = window.location.search === '?all'; + +const coreTests = [ () => renderTweet('react-native-web', reactNative), - // 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), - () => renderWideTree('glamor', glamor) + () => renderDeepTree('react-native-web/stylesheet', reactNativeStyleSheet), + () => renderWideTree('react-native-web/stylesheet', reactNativeStyleSheet), + () => renderDeepTree('react-native-web', reactNative), + () => renderWideTree('react-native-web', reactNative) ]; +/** + * Optionally run tests using other libraries + */ +const extraTests = [ + () => renderDeepTree('aphrodite', aphrodite), + () => renderWideTree('aphrodite', aphrodite), + () => renderDeepTree('glamor', glamor), + () => renderWideTree('glamor', glamor), + () => renderDeepTree('jss', jss), + () => renderWideTree('jss', jss), + () => renderDeepTree('reactxp', xp), + () => renderWideTree('reactxp', xp), + () => renderDeepTree('styled-components', styledComponents), + () => renderWideTree('styled-components', styledComponents) +]; + +const tests = testAll ? coreTests.concat(extraTests) : coreTests; + // run benchmarks tests.reduce((promise, test) => promise.then(test()), Promise.resolve()); diff --git a/performance/package.json b/performance/package.json index fa7a49fa..8e236ad9 100644 --- a/performance/package.json +++ b/performance/package.json @@ -2,13 +2,17 @@ "name": "performance", "private": true, "dependencies": { + "aphrodite": "^1.2.0", "classnames": "^2.2.5", "glamor": "3.0.0-1", "marky": "^1.1.3", + "react-jss": "^5.4.1", + "reactxp": "^0.34.3", "styled-components": "2.0.0-7" }, "devDependencies": { "css-loader": "^0.26.2", + "react-addons-perf": "^15.4.2", "style-loader": "^0.13.2" } } diff --git a/performance/src/aphrodite.js b/performance/src/aphrodite.js new file mode 100644 index 00000000..e09522ee --- /dev/null +++ b/performance/src/aphrodite.js @@ -0,0 +1,7 @@ +import Box from './components/Box/aphrodite'; +import View from './components/View/aphrodite'; + +export default { + Box, + View +}; diff --git a/performance/components/AppText/index.js b/performance/src/components/AppText/index.js similarity index 100% rename from performance/components/AppText/index.js rename to performance/src/components/AppText/index.js diff --git a/performance/components/AspectRatio/index.js b/performance/src/components/AspectRatio/index.js similarity index 100% rename from performance/components/AspectRatio/index.js rename to performance/src/components/AspectRatio/index.js diff --git a/performance/src/components/Box/aphrodite.js b/performance/src/components/Box/aphrodite.js new file mode 100644 index 00000000..cbdab3d5 --- /dev/null +++ b/performance/src/components/Box/aphrodite.js @@ -0,0 +1,49 @@ +/* eslint-disable react/prop-types */ +import React from 'react'; +import View from '../View/aphrodite'; +import { StyleSheet } from 'aphrodite'; + +const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => ( + +); + +const styles = StyleSheet.create({ + outer: { + padding: 4 + }, + row: { + flexDirection: 'row' + }, + color0: { + backgroundColor: '#222' + }, + color1: { + backgroundColor: '#666' + }, + color2: { + backgroundColor: '#999' + }, + color3: { + backgroundColor: 'blue' + }, + color4: { + backgroundColor: 'orange' + }, + color5: { + backgroundColor: 'red' + }, + fixed: { + width: 20, + height: 20 + } +}); + +module.exports = Box; diff --git a/performance/components/Box/index.css-modules.js b/performance/src/components/Box/css-modules.js similarity index 90% rename from performance/components/Box/index.css-modules.js rename to performance/src/components/Box/css-modules.js index 7123f1ee..0b0ec179 100644 --- a/performance/components/Box/index.css-modules.js +++ b/performance/src/components/Box/css-modules.js @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ import classnames from 'classnames'; import React from 'react'; -import View from '../View/index.css-modules'; +import View from '../View/css-modules'; import styles from './styles.css'; const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => ( diff --git a/performance/components/Box/index.glamor.js b/performance/src/components/Box/glamor.js similarity index 94% rename from performance/components/Box/index.glamor.js rename to performance/src/components/Box/glamor.js index 66e1f15f..e293cc6e 100644 --- a/performance/components/Box/index.glamor.js +++ b/performance/src/components/Box/glamor.js @@ -1,6 +1,6 @@ /* eslint-disable react/prop-types */ import React from 'react'; -import View from '../View/index.glamor'; +import View from '../View/glamor'; const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => ( ( + +); + +const styles = { + outer: { + padding: 4 + }, + row: { + flexDirection: 'row' + }, + color0: { + backgroundColor: '#222' + }, + color1: { + backgroundColor: '#666' + }, + color2: { + backgroundColor: '#999' + }, + color3: { + backgroundColor: 'blue' + }, + color4: { + backgroundColor: 'orange' + }, + color5: { + backgroundColor: 'red' + }, + fixed: { + width: 20, + height: 20 + } +}; + +module.exports = injectSheet(styles)(Box); diff --git a/performance/src/components/Box/react-native-stylesheet.js b/performance/src/components/Box/react-native-stylesheet.js new file mode 100644 index 00000000..fafcf9a0 --- /dev/null +++ b/performance/src/components/Box/react-native-stylesheet.js @@ -0,0 +1,49 @@ +/* eslint-disable react/prop-types */ +import React from 'react'; +import StyleSheet from 'react-native/apis/StyleSheet'; +import View from '../View/react-native-stylesheet'; + +const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => ( + +); + +const styles = StyleSheet.create({ + outer: { + padding: 4 + }, + row: { + flexDirection: 'row' + }, + color0: { + backgroundColor: '#222' + }, + color1: { + backgroundColor: '#666' + }, + color2: { + backgroundColor: '#999' + }, + color3: { + backgroundColor: 'blue' + }, + color4: { + backgroundColor: 'orange' + }, + color5: { + backgroundColor: 'red' + }, + fixed: { + width: 20, + height: 20 + } +}); + +module.exports = Box; diff --git a/performance/components/Box/index.js b/performance/src/components/Box/react-native.js similarity index 100% rename from performance/components/Box/index.js rename to performance/src/components/Box/react-native.js diff --git a/performance/src/components/Box/reactxp.js b/performance/src/components/Box/reactxp.js new file mode 100644 index 00000000..76a358e6 --- /dev/null +++ b/performance/src/components/Box/reactxp.js @@ -0,0 +1,48 @@ +/* eslint-disable react/prop-types */ +import React from 'react'; +import { Styles, View } from 'reactxp'; + +const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => ( + +); + +const styles = { + outer: Styles.createViewStyle({ + padding: 4 + }), + row: Styles.createViewStyle({ + flexDirection: 'row' + }), + color0: Styles.createViewStyle({ + backgroundColor: '#222' + }), + color1: Styles.createViewStyle({ + backgroundColor: '#666' + }), + color2: Styles.createViewStyle({ + backgroundColor: '#999' + }), + color3: Styles.createViewStyle({ + backgroundColor: 'blue' + }), + color4: Styles.createViewStyle({ + backgroundColor: 'orange' + }), + color5: Styles.createViewStyle({ + backgroundColor: 'red' + }), + fixed: Styles.createViewStyle({ + width: 20, + height: 20 + }) +}; + +module.exports = Box; diff --git a/performance/components/Box/index.styled.js b/performance/src/components/Box/styled-components.js similarity index 93% rename from performance/components/Box/index.styled.js rename to performance/src/components/Box/styled-components.js index 97b9f292..7a02c2fa 100644 --- a/performance/components/Box/index.styled.js +++ b/performance/src/components/Box/styled-components.js @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import View from '../View/index.styled'; +import View from '../View/styled-components'; const getColor = color => { switch (color) { diff --git a/performance/components/Box/styles.css b/performance/src/components/Box/styles.css similarity index 100% rename from performance/components/Box/styles.css rename to performance/src/components/Box/styles.css diff --git a/performance/components/GridView/index.js b/performance/src/components/GridView/index.js similarity index 100% rename from performance/components/GridView/index.js rename to performance/src/components/GridView/index.js diff --git a/performance/components/Icons/DirectMessage.js b/performance/src/components/Icons/DirectMessage.js similarity index 100% rename from performance/components/Icons/DirectMessage.js rename to performance/src/components/Icons/DirectMessage.js diff --git a/performance/components/Icons/Heart.js b/performance/src/components/Icons/Heart.js similarity index 100% rename from performance/components/Icons/Heart.js rename to performance/src/components/Icons/Heart.js diff --git a/performance/components/Icons/Reply.js b/performance/src/components/Icons/Reply.js similarity index 100% rename from performance/components/Icons/Reply.js rename to performance/src/components/Icons/Reply.js diff --git a/performance/components/Icons/Retweet.js b/performance/src/components/Icons/Retweet.js similarity index 100% rename from performance/components/Icons/Retweet.js rename to performance/src/components/Icons/Retweet.js diff --git a/performance/components/Icons/styles.js b/performance/src/components/Icons/styles.js similarity index 100% rename from performance/components/Icons/styles.js rename to performance/src/components/Icons/styles.js diff --git a/performance/components/NestedTree/index.js b/performance/src/components/NestedTree/index.js similarity index 100% rename from performance/components/NestedTree/index.js rename to performance/src/components/NestedTree/index.js diff --git a/performance/components/Tweet/index.js b/performance/src/components/Tweet/index.js similarity index 100% rename from performance/components/Tweet/index.js rename to performance/src/components/Tweet/index.js diff --git a/performance/components/TweetAction/index.js b/performance/src/components/TweetAction/index.js similarity index 100% rename from performance/components/TweetAction/index.js rename to performance/src/components/TweetAction/index.js diff --git a/performance/components/TweetActionsBar/index.js b/performance/src/components/TweetActionsBar/index.js similarity index 100% rename from performance/components/TweetActionsBar/index.js rename to performance/src/components/TweetActionsBar/index.js diff --git a/performance/components/TweetText/index.js b/performance/src/components/TweetText/index.js similarity index 100% rename from performance/components/TweetText/index.js rename to performance/src/components/TweetText/index.js diff --git a/performance/components/TweetTextPart/index.js b/performance/src/components/TweetTextPart/index.js similarity index 100% rename from performance/components/TweetTextPart/index.js rename to performance/src/components/TweetTextPart/index.js diff --git a/performance/components/UserAvatar/index.js b/performance/src/components/UserAvatar/index.js similarity index 100% rename from performance/components/UserAvatar/index.js rename to performance/src/components/UserAvatar/index.js diff --git a/performance/components/UserNames/index.js b/performance/src/components/UserNames/index.js similarity index 100% rename from performance/components/UserNames/index.js rename to performance/src/components/UserNames/index.js diff --git a/performance/src/components/View/aphrodite.js b/performance/src/components/View/aphrodite.js new file mode 100644 index 00000000..6a8d772d --- /dev/null +++ b/performance/src/components/View/aphrodite.js @@ -0,0 +1,34 @@ +/* eslint-disable react/prop-types */ +import React from 'react'; +import { css, StyleSheet } from 'aphrodite'; + +const View = ({ style, ...other }) =>
; + +const styles = StyleSheet.create({ + root: { + alignItems: 'stretch', + borderWidth: 0, + borderStyle: 'solid', + boxSizing: 'border-box', + display: 'flex', + flexBasis: 'auto', + flexDirection: 'column', + flexShrink: 0, + margin: 0, + padding: 0, + position: 'relative', + // button and anchor reset + backgroundColor: 'transparent', + color: 'inherit', + font: 'inherit', + textAlign: 'inherit', + textDecoration: 'none', + // list reset + listStyle: 'none', + // fix flexbox bugs + minHeight: 0, + minWidth: 0 + } +}); + +module.exports = View; diff --git a/performance/components/View/index.css-modules.js b/performance/src/components/View/css-modules.js similarity index 100% rename from performance/components/View/index.css-modules.js rename to performance/src/components/View/css-modules.js diff --git a/performance/components/View/index.glamor.js b/performance/src/components/View/glamor.js similarity index 86% rename from performance/components/View/index.glamor.js rename to performance/src/components/View/glamor.js index 069502df..997ae37a 100644 --- a/performance/components/View/index.glamor.js +++ b/performance/src/components/View/glamor.js @@ -2,7 +2,7 @@ import { css } from 'glamor'; import React from 'react'; -const View = ({ style, ...props}) =>
; +const View = ({ style, ...other }) =>
; const viewStyle = { alignItems: 'stretch', diff --git a/performance/src/components/View/jss.js b/performance/src/components/View/jss.js new file mode 100644 index 00000000..95a1048f --- /dev/null +++ b/performance/src/components/View/jss.js @@ -0,0 +1,37 @@ +/* eslint-disable react/prop-types */ +import classnames from 'classnames'; +import injectSheet from 'react-jss'; +import React from 'react'; + +const View = ({ classes, className, ...other }) => ( +
+); + +const styles = { + root: { + alignItems: 'stretch', + borderWidth: 0, + borderStyle: 'solid', + boxSizing: 'border-box', + display: 'flex', + flexBasis: 'auto', + flexDirection: 'column', + flexShrink: 0, + margin: 0, + padding: 0, + position: 'relative', + // button and anchor reset + backgroundColor: 'transparent', + color: 'inherit', + font: 'inherit', + textAlign: 'inherit', + textDecorationLine: 'none', + // list reset + listStyle: 'none', + // fix flexbox bugs + minHeight: 0, + minWidth: 0 + } +}; + +module.exports = injectSheet(styles)(View); diff --git a/performance/src/components/View/react-native-stylesheet.js b/performance/src/components/View/react-native-stylesheet.js new file mode 100644 index 00000000..1e3821f2 --- /dev/null +++ b/performance/src/components/View/react-native-stylesheet.js @@ -0,0 +1,38 @@ +/* eslint-disable react/prop-types */ +import React from 'react'; +import StyleSheet from 'react-native/apis/StyleSheet'; +import registry from 'react-native/apis/StyleSheet/registry'; +import createDOMProps from 'react-native/modules/createDOMProps'; + +const View = props => ( +
registry.resolve([styles.root, style]))} /> +); + +const styles = StyleSheet.create({ + root: { + alignItems: 'stretch', + borderWidth: 0, + borderStyle: 'solid', + boxSizing: 'border-box', + display: 'flex', + flexBasis: 'auto', + flexDirection: 'column', + flexShrink: 0, + margin: 0, + padding: 0, + position: 'relative', + // button and anchor reset + backgroundColor: 'transparent', + color: 'inherit', + font: 'inherit', + textAlign: 'inherit', + textDecoration: 'none', + // list reset + listStyle: 'none', + // fix flexbox bugs + minHeight: 0, + minWidth: 0 + } +}); + +module.exports = View; diff --git a/performance/components/View/index.styled.js b/performance/src/components/View/styled-components.js similarity index 100% rename from performance/components/View/index.styled.js rename to performance/src/components/View/styled-components.js diff --git a/performance/components/View/styles.css b/performance/src/components/View/styles.css similarity index 100% rename from performance/components/View/styles.css rename to performance/src/components/View/styles.css diff --git a/performance/components/theme.js b/performance/src/components/theme.js similarity index 100% rename from performance/components/theme.js rename to performance/src/components/theme.js diff --git a/performance/src/css-modules.js b/performance/src/css-modules.js new file mode 100644 index 00000000..8985ccf6 --- /dev/null +++ b/performance/src/css-modules.js @@ -0,0 +1,7 @@ +import Box from './components/Box/css-modules'; +import View from './components/View/css-modules'; + +export default { + Box, + View +}; diff --git a/performance/src/glamor.js b/performance/src/glamor.js new file mode 100644 index 00000000..bef27a11 --- /dev/null +++ b/performance/src/glamor.js @@ -0,0 +1,7 @@ +import Box from './components/Box/glamor'; +import View from './components/View/glamor'; + +export default { + Box, + View +}; diff --git a/performance/src/jss.js b/performance/src/jss.js new file mode 100644 index 00000000..8fc4206c --- /dev/null +++ b/performance/src/jss.js @@ -0,0 +1,7 @@ +import Box from './components/Box/jss'; +import View from './components/View/jss'; + +export default { + Box, + View +}; diff --git a/performance/src/react-native-stylesheet.js b/performance/src/react-native-stylesheet.js new file mode 100644 index 00000000..5ce22637 --- /dev/null +++ b/performance/src/react-native-stylesheet.js @@ -0,0 +1,7 @@ +import Box from './components/Box/react-native-stylesheet'; +import View from './components/View/react-native-stylesheet'; + +export default { + Box, + View +}; diff --git a/performance/src/react-native.js b/performance/src/react-native.js new file mode 100644 index 00000000..94d87aff --- /dev/null +++ b/performance/src/react-native.js @@ -0,0 +1,9 @@ +import Box from './components/Box/react-native'; +import Tweet from './components/Tweet'; +import { View } from 'react-native'; + +export default { + Box, + Tweet, + View +}; diff --git a/performance/src/reactxp.js b/performance/src/reactxp.js new file mode 100644 index 00000000..8e61561e --- /dev/null +++ b/performance/src/reactxp.js @@ -0,0 +1,7 @@ +import Box from './components/Box/reactxp'; +import { View } from 'reactxp'; + +export default { + Box, + View +}; diff --git a/performance/src/styled-components.js b/performance/src/styled-components.js new file mode 100644 index 00000000..54272a8a --- /dev/null +++ b/performance/src/styled-components.js @@ -0,0 +1,7 @@ +import Box from './components/Box/styled-components'; +import View from './components/View/styled-components'; + +export default { + Box, + View +}; diff --git a/performance/tests/renderDeepTree.js b/performance/tests/renderDeepTree.js index dfd51031..630d97a8 100644 --- a/performance/tests/renderDeepTree.js +++ b/performance/tests/renderDeepTree.js @@ -1,5 +1,5 @@ import createRenderBenchmark from '../createRenderBenchmark'; -import NestedTree from '../components/NestedTree'; +import NestedTree from '../src/components/NestedTree'; import React from 'react'; const renderDeepTree = (label, components) => createRenderBenchmark({ diff --git a/performance/tests/renderTweet.js b/performance/tests/renderTweet.js index 2e0086f9..e1caafce 100644 --- a/performance/tests/renderTweet.js +++ b/performance/tests/renderTweet.js @@ -1,5 +1,5 @@ import createRenderBenchmark from '../createRenderBenchmark'; -import Tweet from '../components/Tweet'; +import Tweet from '../src/components/Tweet'; import React from 'react'; const tweet1 = { diff --git a/performance/tests/renderWideTree.js b/performance/tests/renderWideTree.js index 3c6dcf84..2c404766 100644 --- a/performance/tests/renderWideTree.js +++ b/performance/tests/renderWideTree.js @@ -1,5 +1,5 @@ import createRenderBenchmark from '../createRenderBenchmark'; -import NestedTree from '../components/NestedTree'; +import NestedTree from '../src/components/NestedTree'; import React from 'react'; const renderWideTree = (label, components) => createRenderBenchmark({ diff --git a/performance/yarn.lock b/performance/yarn.lock index 21f9cc6f..cc50ed91 100644 --- a/performance/yarn.lock +++ b/performance/yarn.lock @@ -14,16 +14,30 @@ ansi-styles@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe" +aphrodite@^1.2.0: + version "1.2.0" + resolved "https://artifactory.twitter.biz:443/api/npm/js-virtual/aphrodite/-/aphrodite-1.2.0.tgz#c2f30bd1cdf6a550f4a29a0f1cf22ed10e825764" + dependencies: + asap "^2.0.3" + inline-style-prefixer "^3.0.1" + string-hash "^1.1.3" + argparse@^1.0.7: version "1.0.9" resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86" dependencies: sprintf-js "~1.0.2" -asap@~2.0.3: +asap@^2.0.3, asap@~2.0.3: version "2.0.5" resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f" +assert@^1.3.0: + version "1.4.1" + resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91" + dependencies: + util "0.10.3" + autoprefixer@^6.3.1: version "6.7.5" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.5.tgz#50848f39dc08730091d9495023487e7cc21f518d" @@ -62,7 +76,7 @@ big.js@^3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978" -bowser@^1.0.0: +bowser@^1.0.0, bowser@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.6.0.tgz#37fc387b616cb6aef370dab4d6bd402b74c5c54d" @@ -175,6 +189,12 @@ 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@^1.0.3: + version "1.0.3" + resolved "https://artifactory.twitter.biz:443/api/npm/js-virtual/css-in-js-utils/-/css-in-js-utils-1.0.3.tgz#9ac7e02f763cf85d94017666565ed68a5b5f3215" + dependencies: + hyphenate-style-name "^1.0.2" + css-loader@^0.26.2: version "0.26.2" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.26.2.tgz#a9cd4c2b1a559b45d8efc04fc311ab5d2aaccb9d" @@ -216,6 +236,12 @@ css-to-react-native@2.0.1: fbjs "^0.8.5" postcss-value-parser "^3.3.0" +css-vendor@^0.3.8: + version "0.3.8" + resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-0.3.8.tgz#6421cfd3034ce664fe7673972fd0119fc28941fa" + dependencies: + is-in-browser "^1.0.2" + cssesc@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4" @@ -302,7 +328,7 @@ fastparse@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8" -fbjs@^0.8.5, fbjs@^0.8.8, fbjs@^0.8.9: +fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.8, fbjs@^0.8.9: version "0.8.9" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.9.tgz#180247fbd347dcc9004517b904f865400a0c8f14" dependencies: @@ -354,11 +380,15 @@ has@^1.0.1: dependencies: function-bind "^1.0.2" +hoist-non-react-statics@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb" + html-comment-regex@^1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e" -hyphenate-style-name@^1.0.1: +hyphenate-style-name@^1.0.1, hyphenate-style-name@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b" @@ -374,10 +404,18 @@ ieee754@^1.1.4: version "1.1.8" resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4" +ifvisible.js@^1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/ifvisible.js/-/ifvisible.js-1.0.6.tgz#52eb151ce89c56f15316226462e892d1f8451261" + indexes-of@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607" +inherits@2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1" + inline-style-prefixer@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz#c153c7e88fd84fef5c602e95a8168b2770671fe7" @@ -385,6 +423,13 @@ inline-style-prefixer@^2.0.5: bowser "^1.0.0" hyphenate-style-name "^1.0.1" +inline-style-prefixer@^3.0.1: + version "3.0.2" + resolved "https://artifactory.twitter.biz:443/api/npm/js-virtual/inline-style-prefixer/-/inline-style-prefixer-3.0.2.tgz#989865e0c5de7a946acbea71e16e02741efe0dd7" + dependencies: + bowser "^1.6.0" + css-in-js-utils "^1.0.3" + is-absolute-url@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6" @@ -393,6 +438,10 @@ is-function@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5" +is-in-browser@1.0.2, is-in-browser@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.0.2.tgz#f688bea8f1e5aadc3244ebc870d188cfb9b613cf" + is-plain-obj@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e" @@ -447,6 +496,71 @@ json5@^0.5.0: version "0.5.1" resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821" +jss-camel-case@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-3.0.0.tgz#46aa18eb149e95afce074532ad47df1c2a7d45cb" + +jss-compose@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/jss-compose/-/jss-compose-2.1.0.tgz#3751d613fb61c715e3d91140dea5f1794968847d" + dependencies: + warning "^3.0.0" + +jss-default-unit@^5.0.2: + version "5.0.3" + resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-5.0.3.tgz#b9450f31c37feaed3151554b2938363974780af1" + +jss-expand@^2.0.3: + version "2.1.0" + resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-2.1.0.tgz#dc0f458304a9f597b524dd4ae773ea29adcb3d27" + +jss-extend@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-3.0.1.tgz#aeb5846f1650d7590c686b5c1932b44a3721742d" + dependencies: + warning "^3.0.0" + +jss-global@^0.4.1: + version "0.4.1" + resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-0.4.1.tgz#41862c78528de4d333853004eb71adecde1a5fda" + +jss-nested@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/jss-nested/-/jss-nested-3.0.1.tgz#14c10265c8fc5bd61b450b48f1e9fb36d90ae569" + dependencies: + warning "^3.0.0" + +jss-preset-default@^1.0.0: + version "1.3.1" + resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-1.3.1.tgz#8a4b7f9a41ec412d19fb1d23e6dc80ebef040d5a" + dependencies: + jss-camel-case "^3.0.0" + jss-compose "^2.0.0" + jss-default-unit "^5.0.2" + jss-expand "^2.0.3" + jss-extend "^3.0.0" + jss-global "^0.4.1" + jss-nested "^3.0.1" + jss-props-sort "^3.0.0" + jss-vendor-prefixer "^4.0.0" + +jss-props-sort@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-3.0.0.tgz#19544610109b1fa953f22799eecb080240d8dc00" + +jss-vendor-prefixer@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-4.0.0.tgz#df16a8fcc6ecb4567394174e6ab90145cf8b34a3" + dependencies: + css-vendor "^0.3.8" + +jss@^6.5.0: + version "6.5.0" + resolved "https://registry.yarnpkg.com/jss/-/jss-6.5.0.tgz#9294a367b658daa2036c36f563ff6bfb0c7b12a1" + dependencies: + is-in-browser "1.0.2" + warning "3.0.0" + loader-utils@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.0.2.tgz#a9f923c865a974623391a8602d031137fad74830" @@ -467,6 +581,10 @@ lodash.uniq@^4.3.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" +lodash@^4.17.1: + version "4.17.4" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" + loose-envify@^1.0.0: version "1.3.1" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" @@ -782,6 +900,35 @@ query-string@^4.1.0: object-assign "^4.1.0" strict-uri-encode "^1.0.0" +react-addons-perf@^15.4.2: + version "15.4.2" + resolved "https://registry.yarnpkg.com/react-addons-perf/-/react-addons-perf-15.4.2.tgz#110bdcf5c459c4f77cb85ed634bcd3397536383b" + dependencies: + fbjs "^0.8.4" + object-assign "^4.1.0" + +react-jss@^5.4.1: + version "5.4.1" + resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-5.4.1.tgz#96670fdab022c1e79928e530a482f67b0d82fc5b" + dependencies: + hoist-non-react-statics "^1.2.0" + jss "^6.5.0" + jss-preset-default "^1.0.0" + +reactxp@^0.34.3: + version "0.34.3" + resolved "https://registry.yarnpkg.com/reactxp/-/reactxp-0.34.3.tgz#6481992e57758ae6ffffbfde3d497527bb495032" + dependencies: + assert "^1.3.0" + ifvisible.js "^1.0.6" + lodash "^4.17.1" + rebound "^0.0.13" + synctasks "^0.2.9" + +rebound@^0.0.13: + version "0.0.13" + resolved "https://registry.yarnpkg.com/rebound/-/rebound-0.0.13.tgz#4a225254caf7da756797b19c5817bf7a7941fac1" + reduce-css-calc@^1.2.6: version "1.3.0" resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716" @@ -852,6 +999,10 @@ 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: + version "1.1.3" + resolved "https://artifactory.twitter.biz:443/api/npm/js-virtual/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b" + strip-ansi@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf" @@ -879,8 +1030,8 @@ styled-components@2.0.0-7: supports-color "^3.2.3" stylis@^1.2.0: - version "1.2.6" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-1.2.6.tgz#d7e72d3c8de52684a4f6cc82b3086e3634dc3c13" + version "1.2.8" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-1.2.8.tgz#feba55055a8a1bf8a76a659084a91d729920fa92" supports-color@^2.0.0: version "2.0.0" @@ -904,6 +1055,10 @@ svgo@^0.7.0: sax "~1.2.1" whet.extend "~0.9.9" +synctasks@^0.2.9: + version "0.2.17" + resolved "https://registry.yarnpkg.com/synctasks/-/synctasks-0.2.17.tgz#38852f008878de2e941b6e458ddf552245268da1" + ua-parser-js@^0.7.9: version "0.7.12" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb" @@ -922,10 +1077,22 @@ uniqs@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02" +util@0.10.3: + version "0.10.3" + resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9" + dependencies: + inherits "2.0.1" + vendors@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22" +warning@3.0.0, warning@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" + dependencies: + loose-envify "^1.0.0" + whatwg-fetch@>=0.10.0: version "2.0.2" resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.2.tgz#fe294d1d89e36c5be8b3195057f2e4bc74fc980e"