diff --git a/packages/benchmarks/src/app/App.js b/packages/benchmarks/src/app/App.js index 4af15943..31ad1d7f 100644 --- a/packages/benchmarks/src/app/App.js +++ b/packages/benchmarks/src/app/App.js @@ -169,7 +169,7 @@ export default class App extends Component { () => ({ status: 'running' }), () => { if (this._shouldHideBenchmark && this._benchWrapperRef) { - this._benchWrapperRef.setNativeProps({ style: { opacity: 0 } }); + this._benchWrapperRef.style.opacity = 0; } this._benchmarkRef.start(); this._scrollToEnd(); @@ -181,9 +181,7 @@ export default class App extends Component { _handleVisuallyHideBenchmark = () => { this._shouldHideBenchmark = !this._shouldHideBenchmark; if (this._benchWrapperRef) { - this._benchWrapperRef.setNativeProps({ - style: { opacity: this._shouldHideBenchmark ? 0 : 1 } - }); + this._benchWrapperRef.style.opacity = this._shouldHideBenchmark ? 0 : 1; } }; diff --git a/packages/benchmarks/src/app/theme.js b/packages/benchmarks/src/app/theme.js index f1b7416a..68d7058c 100644 --- a/packages/benchmarks/src/app/theme.js +++ b/packages/benchmarks/src/app/theme.js @@ -1,8 +1,9 @@ -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; import { Dimensions, Platform } from 'react-native'; const baseFontSize = 14; const baseUnit = 1.3125; +const { canUseDOM } = ExecutionEnvironment; const createPlatformLength = (multiplier) => Platform.select({ web: `${multiplier}rem`, default: multiplier * baseFontSize }); diff --git a/packages/benchmarks/src/cases/TextTree.js b/packages/benchmarks/src/cases/TextTree.js deleted file mode 100644 index 5324a3bd..00000000 --- a/packages/benchmarks/src/cases/TextTree.js +++ /dev/null @@ -1,36 +0,0 @@ -import { BenchmarkType } from '../app/Benchmark'; -import React, { Component } from 'react'; - -class TextTree extends Component { - static displayName = 'TextTree'; - - static benchmarkType = BenchmarkType.MOUNT; - - render() { - const { breadth, components, depth, id, wrap } = this.props; - const { TextBox } = components; - - let result = ( - - {depth === 0 && } - {depth !== 0 && - Array.from({ length: breadth }).map((el, i) => ( - - ))} - - ); - for (let i = 0; i < wrap; i++) { - result = {result}; - } - return result; - } -} - -export default TextTree; diff --git a/packages/benchmarks/src/impl.js b/packages/benchmarks/src/impl.js index b926c25f..fcf6226f 100644 --- a/packages/benchmarks/src/impl.js +++ b/packages/benchmarks/src/impl.js @@ -10,7 +10,6 @@ type ComponentsType = { Box: Component, Dot: Component, Provider: Component, - TextBox: Component, View: Component }; diff --git a/packages/benchmarks/src/implementations/aphrodite/Box.js b/packages/benchmarks/src/implementations/aphrodite/Box.js deleted file mode 100644 index 994b956d..00000000 --- a/packages/benchmarks/src/implementations/aphrodite/Box.js +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import View from './View'; -import { StyleSheet } from 'aphrodite'; - -const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => ( - -); - -const styles = StyleSheet.create({ - outer: { - alignSelf: 'flex-start', - padding: 4 - }, - row: { - flexDirection: 'row' - }, - color0: { - backgroundColor: '#14171A' - }, - color1: { - backgroundColor: '#AAB8C2' - }, - color2: { - backgroundColor: '#E6ECF0' - }, - color3: { - backgroundColor: '#FFAD1F' - }, - color4: { - backgroundColor: '#F45D22' - }, - color5: { - backgroundColor: '#E0245E' - }, - fixed: { - width: 6, - height: 6 - } -}); - -export default Box; diff --git a/packages/benchmarks/src/implementations/aphrodite/Provider.js b/packages/benchmarks/src/implementations/aphrodite/Provider.js deleted file mode 100644 index 864fc43a..00000000 --- a/packages/benchmarks/src/implementations/aphrodite/Provider.js +++ /dev/null @@ -1,2 +0,0 @@ -import View from './View'; -export default View; diff --git a/packages/benchmarks/src/implementations/aphrodite/View.js b/packages/benchmarks/src/implementations/aphrodite/View.js deleted file mode 100644 index bb2791c2..00000000 --- a/packages/benchmarks/src/implementations/aphrodite/View.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { css, StyleSheet } from 'aphrodite'; - -class View extends React.Component { - render() { - const { style, ...other } = this.props; - return
; - } -} - -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', - // fix flexbox bugs - minHeight: 0, - minWidth: 0 - } -}); - -export default View; diff --git a/packages/benchmarks/src/implementations/aphrodite/index.js b/packages/benchmarks/src/implementations/aphrodite/index.js deleted file mode 100644 index 5a9541d8..00000000 --- a/packages/benchmarks/src/implementations/aphrodite/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import Box from './Box'; -import Provider from './Provider'; -import View from './View'; - -export default { - Box, - Provider, - View -}; diff --git a/packages/benchmarks/src/implementations/css-modules/Dot.js b/packages/benchmarks/src/implementations/css-modules/Dot.js new file mode 100644 index 00000000..03003372 --- /dev/null +++ b/packages/benchmarks/src/implementations/css-modules/Dot.js @@ -0,0 +1,20 @@ +import React from 'react'; +import styles from './dot-styles.css'; + +const Dot = ({ size, x, y, children, color }) => ( +
+ {children} +
+); + +export default Dot; diff --git a/packages/benchmarks/src/implementations/css-modules/dot-styles.css b/packages/benchmarks/src/implementations/css-modules/dot-styles.css new file mode 100644 index 00000000..6e392563 --- /dev/null +++ b/packages/benchmarks/src/implementations/css-modules/dot-styles.css @@ -0,0 +1,10 @@ +.root { + position: absolute; + cursor: pointer; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-top-width: 0; + transform: translate(50%, 50%); +} diff --git a/packages/benchmarks/src/implementations/css-modules/index.js b/packages/benchmarks/src/implementations/css-modules/index.js index 5a9541d8..f32ff155 100644 --- a/packages/benchmarks/src/implementations/css-modules/index.js +++ b/packages/benchmarks/src/implementations/css-modules/index.js @@ -1,9 +1,11 @@ import Box from './Box'; +import Dot from './Dot'; import Provider from './Provider'; import View from './View'; export default { Box, + Dot, Provider, View }; diff --git a/packages/benchmarks/src/implementations/css-modules/view-styles.css b/packages/benchmarks/src/implementations/css-modules/view-styles.css index 2dda1491..eab671c1 100644 --- a/packages/benchmarks/src/implementations/css-modules/view-styles.css +++ b/packages/benchmarks/src/implementations/css-modules/view-styles.css @@ -1,5 +1,6 @@ .initial { align-items: stretch; + background-color: transparent; border-width: 0; border-style: solid; box-sizing: border-box; @@ -7,9 +8,11 @@ flex-basis: auto; flex-direction: column; flex-shrink: 0; + list-style: none; margin: 0; - padding: 0; - position: relative; min-height: 0; min-width: 0; + padding: 0; + position: relative; + z-index: 0; } diff --git a/packages/benchmarks/src/implementations/emotion/Box.js b/packages/benchmarks/src/implementations/emotion/Box.js deleted file mode 100644 index f3af5dd0..00000000 --- a/packages/benchmarks/src/implementations/emotion/Box.js +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import View from './View'; - -const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => ( - -); - -const styles = { - outer: { - alignSelf: 'flex-start', - padding: 4 - }, - row: { - flexDirection: 'row' - }, - color0: { - backgroundColor: '#14171A' - }, - color1: { - backgroundColor: '#AAB8C2' - }, - color2: { - backgroundColor: '#E6ECF0' - }, - color3: { - backgroundColor: '#FFAD1F' - }, - color4: { - backgroundColor: '#F45D22' - }, - color5: { - backgroundColor: '#E0245E' - }, - fixed: { - width: 6, - height: 6 - } -}; - -export default Box; diff --git a/packages/benchmarks/src/implementations/emotion/Dot.js b/packages/benchmarks/src/implementations/emotion/Dot.js deleted file mode 100644 index 8f2fbe4a..00000000 --- a/packages/benchmarks/src/implementations/emotion/Dot.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import { css } from '@emotion/css'; - -const Dot = ({ size, x, y, children, color }) => ( -
- {children} -
-); - -const styles = { - root: { - position: 'absolute', - cursor: 'pointer', - width: 0, - height: 0, - borderColor: 'transparent', - borderStyle: 'solid', - borderTopWidth: 0, - transform: 'translate(50%, 50%)' - } -}; - -export default Dot; diff --git a/packages/benchmarks/src/implementations/emotion/Provider.js b/packages/benchmarks/src/implementations/emotion/Provider.js deleted file mode 100644 index 864fc43a..00000000 --- a/packages/benchmarks/src/implementations/emotion/Provider.js +++ /dev/null @@ -1,2 +0,0 @@ -import View from './View'; -export default View; diff --git a/packages/benchmarks/src/implementations/emotion/View.js b/packages/benchmarks/src/implementations/emotion/View.js deleted file mode 100644 index 126f5afe..00000000 --- a/packages/benchmarks/src/implementations/emotion/View.js +++ /dev/null @@ -1,28 +0,0 @@ -import { css } from '@emotion/css'; -import React from 'react'; - -class View extends React.Component { - render() { - const { style, ...other } = this.props; - return
; - } -} - -const viewStyle = { - alignItems: 'stretch', - borderWidth: 0, - borderStyle: 'solid', - boxSizing: 'border-box', - display: 'flex', - flexBasis: 'auto', - flexDirection: 'column', - flexShrink: 0, - margin: 0, - padding: 0, - position: 'relative', - // fix flexbox bugs - minHeight: 0, - minWidth: 0 -}; - -export default View; diff --git a/packages/benchmarks/src/implementations/emotion/index.js b/packages/benchmarks/src/implementations/emotion/index.js deleted file mode 100644 index f32ff155..00000000 --- a/packages/benchmarks/src/implementations/emotion/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import Box from './Box'; -import Dot from './Dot'; -import Provider from './Provider'; -import View from './View'; - -export default { - Box, - Dot, - Provider, - View -}; diff --git a/packages/benchmarks/src/implementations/inline-styles/Dot.js b/packages/benchmarks/src/implementations/inline-styles/Dot.js index 13eec8d8..4a6e4ab7 100644 --- a/packages/benchmarks/src/implementations/inline-styles/Dot.js +++ b/packages/benchmarks/src/implementations/inline-styles/Dot.js @@ -2,17 +2,14 @@ import React from 'react'; const Dot = ({ size, x, y, children, color }) => (
{children}
diff --git a/packages/benchmarks/src/implementations/inline-styles/View.js b/packages/benchmarks/src/implementations/inline-styles/View.js index 96ff0dba..2768ed39 100644 --- a/packages/benchmarks/src/implementations/inline-styles/View.js +++ b/packages/benchmarks/src/implementations/inline-styles/View.js @@ -17,19 +17,20 @@ class View extends React.Component { const viewStyle = { alignItems: 'stretch', - borderWidth: 0, - borderStyle: 'solid', + backgroundColor: 'transparent', + border: '0 solid black', boxSizing: 'border-box', display: 'flex', flexBasis: 'auto', flexDirection: 'column', flexShrink: 0, + listStyle: 'none', margin: 0, + minHeight: 0, + minWidth: 0, padding: 0, position: 'relative', - // fix flexbox bugs - minHeight: 0, - minWidth: 0 + zIndex: 0 }; export default View; diff --git a/packages/benchmarks/src/implementations/react-jss/Box.js b/packages/benchmarks/src/implementations/react-jss/Box.js deleted file mode 100644 index e48d417f..00000000 --- a/packages/benchmarks/src/implementations/react-jss/Box.js +++ /dev/null @@ -1,50 +0,0 @@ -import classnames from 'classnames'; -import injectSheet from 'react-jss'; -import React from 'react'; -import View from './View'; - -const Box = ({ classes, color, fixed = false, layout = 'column', outer = false, ...other }) => ( - -); - -const styles = { - outer: { - alignSelf: 'flex-start', - padding: 4 - }, - row: { - flexDirection: 'row' - }, - color0: { - backgroundColor: '#14171A' - }, - color1: { - backgroundColor: '#AAB8C2' - }, - color2: { - backgroundColor: '#E6ECF0' - }, - color3: { - backgroundColor: '#FFAD1F' - }, - color4: { - backgroundColor: '#F45D22' - }, - color5: { - backgroundColor: '#E0245E' - }, - fixed: { - width: 6, - height: 6 - } -}; - -export default injectSheet(styles)(Box); diff --git a/packages/benchmarks/src/implementations/react-jss/Dot.js b/packages/benchmarks/src/implementations/react-jss/Dot.js deleted file mode 100644 index 568bf60b..00000000 --- a/packages/benchmarks/src/implementations/react-jss/Dot.js +++ /dev/null @@ -1,25 +0,0 @@ -import injectSheet from 'react-jss'; -import React from 'react'; - -const Dot = ({ classes, children }) =>
{children}
; - -const styles = { - root: { - position: 'absolute', - cursor: 'pointer', - width: 0, - height: 0, - borderColor: 'transparent', - borderStyle: 'solid', - borderTopWidth: 0, - transform: 'translate(50%, 50%)', - borderBottomColor: ({ color }) => color, - borderRightWidth: ({ size }) => size / 2, - borderBottomWidth: ({ size }) => size / 2, - borderLeftWidth: ({ size }) => size / 2, - marginLeft: ({ x }) => x, - marginTop: ({ y }) => y - } -}; - -export default injectSheet(styles)(Dot); diff --git a/packages/benchmarks/src/implementations/react-jss/Provider.js b/packages/benchmarks/src/implementations/react-jss/Provider.js deleted file mode 100644 index 864fc43a..00000000 --- a/packages/benchmarks/src/implementations/react-jss/Provider.js +++ /dev/null @@ -1,2 +0,0 @@ -import View from './View'; -export default View; diff --git a/packages/benchmarks/src/implementations/react-jss/View.js b/packages/benchmarks/src/implementations/react-jss/View.js deleted file mode 100644 index 5a17abc5..00000000 --- a/packages/benchmarks/src/implementations/react-jss/View.js +++ /dev/null @@ -1,31 +0,0 @@ -import classnames from 'classnames'; -import injectSheet from 'react-jss'; -import React from 'react'; - -class View extends React.Component { - render() { - const { classes, className, ...other } = this.props; - return
; - } -} - -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', - // fix flexbox bugs - minHeight: 0, - minWidth: 0 - } -}; - -export default injectSheet(styles)(View); diff --git a/packages/benchmarks/src/implementations/react-jss/index.js b/packages/benchmarks/src/implementations/react-jss/index.js deleted file mode 100644 index f32ff155..00000000 --- a/packages/benchmarks/src/implementations/react-jss/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import Box from './Box'; -import Dot from './Dot'; -import Provider from './Provider'; -import View from './View'; - -export default { - Box, - Dot, - Provider, - View -}; diff --git a/packages/benchmarks/src/implementations/react-native-web/TextBox.js b/packages/benchmarks/src/implementations/react-native-web/TextBox.js deleted file mode 100644 index 05d8e6f7..00000000 --- a/packages/benchmarks/src/implementations/react-native-web/TextBox.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { StyleSheet, Text } from 'react-native'; - -const TextBox = ({ color, outer = false, ...other }) => ( - -); - -const styles = StyleSheet.create({ - root: { - color: 'white' - }, - outer: { - fontStyle: 'italic' - }, - row: { - flexDirection: 'row' - }, - color0: { - color: '#14171A' - }, - color1: { - color: '#AAB8C2' - }, - color2: { - color: '#E6ECF0' - }, - color3: { - color: '#FFAD1F' - }, - color4: { - color: '#F45D22' - }, - color5: { - color: '#E0245E' - } -}); - -export default TextBox; diff --git a/packages/benchmarks/src/implementations/react-native-web/index.js b/packages/benchmarks/src/implementations/react-native-web/index.js index 055113c4..0533daaa 100644 --- a/packages/benchmarks/src/implementations/react-native-web/index.js +++ b/packages/benchmarks/src/implementations/react-native-web/index.js @@ -1,13 +1,11 @@ import Box from './Box'; import Dot from './Dot'; import Provider from './Provider'; -import TextBox from './TextBox'; import { View } from 'react-native'; export default { Box, Dot, Provider, - TextBox, View }; diff --git a/packages/benchmarks/src/implementations/styled-components/Box.js b/packages/benchmarks/src/implementations/styled-components/Box.js deleted file mode 100644 index 97300fca..00000000 --- a/packages/benchmarks/src/implementations/styled-components/Box.js +++ /dev/null @@ -1,31 +0,0 @@ -import styled from 'styled-components'; -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 = styled(View)` - align-self: flex-start; - flex-direction: ${(props) => (props.layout === 'column' ? 'column' : 'row')}; - padding: ${(props) => (props.outer ? '4px' : '0')}; - ${(props) => props.fixed && 'height:6px;'} ${(props) => - props.fixed && 'width:6px;'} background-color: ${(props) => getColor(props.color)}; -`; - -export default Box; diff --git a/packages/benchmarks/src/implementations/styled-components/Dot.js b/packages/benchmarks/src/implementations/styled-components/Dot.js deleted file mode 100644 index 108a0cc1..00000000 --- a/packages/benchmarks/src/implementations/styled-components/Dot.js +++ /dev/null @@ -1,24 +0,0 @@ -import styled from 'styled-components'; -import View from './View'; - -const Dot = styled(View).attrs((props) => ({ - style: { - marginLeft: `${props.x}px`, - marginTop: `${props.y}px`, - borderRightWidth: `${props.size / 2}px`, - borderBottomWidth: `${props.size / 2}px`, - borderLeftWidth: `${props.size / 2}px`, - borderBottomColor: `${props.color}` - } -}))` - position: absolute; - cursor: pointer; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - border-top-width: 0; - transform: translate(50%, 50%); -`; - -export default Dot; diff --git a/packages/benchmarks/src/implementations/styled-components/Provider.js b/packages/benchmarks/src/implementations/styled-components/Provider.js deleted file mode 100644 index 864fc43a..00000000 --- a/packages/benchmarks/src/implementations/styled-components/Provider.js +++ /dev/null @@ -1,2 +0,0 @@ -import View from './View'; -export default View; diff --git a/packages/benchmarks/src/implementations/styled-components/View.js b/packages/benchmarks/src/implementations/styled-components/View.js deleted file mode 100644 index f0da52e9..00000000 --- a/packages/benchmarks/src/implementations/styled-components/View.js +++ /dev/null @@ -1,19 +0,0 @@ -import styled from 'styled-components'; - -const View = styled.div` - 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; -`; - -export default View; diff --git a/packages/benchmarks/src/implementations/styled-components/index.js b/packages/benchmarks/src/implementations/styled-components/index.js deleted file mode 100644 index f32ff155..00000000 --- a/packages/benchmarks/src/implementations/styled-components/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import Box from './Box'; -import Dot from './Dot'; -import Provider from './Provider'; -import View from './View'; - -export default { - Box, - Dot, - Provider, - View -}; diff --git a/packages/benchmarks/src/index.js b/packages/benchmarks/src/index.js index 279f247e..cd8d37fa 100644 --- a/packages/benchmarks/src/index.js +++ b/packages/benchmarks/src/index.js @@ -1,6 +1,5 @@ import App from './app/App'; import impl from './impl'; -import TextTree from './cases/TextTree'; import Tree from './cases/Tree'; import SierpinskiTriangle from './cases/SierpinskiTriangle'; @@ -51,13 +50,6 @@ const tests = { }, Provider: components.Provider, sampleCount: 100 - })), - 'Mount text tree': createTestBlock((components) => ({ - benchmarkType: 'mount', - Component: TextTree, - getComponentProps: () => ({ breadth: 6, components, depth: 3, id: 0, wrap: 2 }), - Provider: components.Provider, - sampleCount: 50 })) };