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
}))
};