Remove unused benchmarks and libraries

We only need to test against the baseline of css-modules.

Fix #2210

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

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

packages/benchmarks/src/cases/TextTree.js

@@ -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 = (
-      <TextBox children={'TextBox ${id % 3}'} color={id % 3} outer>
-        {depth === 0 && <TextBox children={'Depth 0'} color={(id % 3) + 3} />}
-        {depth !== 0 &&
-          Array.from({ length: breadth }).map((el, i) => (
-            <TextTree
-              breadth={breadth}
-              components={components}
-              depth={depth - 1}
-              id={i}
-              key={i}
-              wrap={wrap}
-            />
-          ))}
-      </TextBox>
-    );
-    for (let i = 0; i < wrap; i++) {
-      result = <TextBox>{result}</TextBox>;
-    }
-    return result;
-  }
-}
-
-export default TextTree;

packages/benchmarks/src/impl.js

@@ -10,7 +10,6 @@ type ComponentsType = {
   Box: Component,
   Dot: Component,
   Provider: Component,
-  TextBox: Component,
   View: Component
 };
 

packages/benchmarks/src/implementations/aphrodite/Box.js

@@ -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 }) => (
-  <View
-    {...other}
-    style={[
-      styles[`color${color}`],
-      fixed && styles.fixed,
-      layout === 'row' && styles.row,
-      outer && styles.outer
-    ]}
-  />
-);
-
-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;

packages/benchmarks/src/implementations/aphrodite/Provider.js

@@ -1,2 +0,0 @@
-import View from './View';
-export default View;

packages/benchmarks/src/implementations/aphrodite/View.js

@@ -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 <div {...other} className={css(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',
-    // fix flexbox bugs
-    minHeight: 0,
-    minWidth: 0
-  }
-});
-
-export default View;

packages/benchmarks/src/implementations/aphrodite/index.js

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

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 }) => (
+  <div
+    className={styles.root}
+    style={{
+      borderBottomColor: color,
+      borderRightWidth: `${size / 2}px`,
+      borderBottomWidth: `${size / 2}px`,
+      borderLeftWidth: `${size / 2}px`,
+      marginLeft: `${x}px`,
+      marginTop: `${y}px`
+    }}
+  >
+    {children}
+  </div>
+);
+
+export default Dot;

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

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

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

packages/benchmarks/src/implementations/emotion/Box.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import View from './View';
-
-const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
-  <View
-    {...other}
-    style={[
-      styles[`color${color}`],
-      fixed && styles.fixed,
-      layout === 'row' && styles.row,
-      outer && styles.outer
-    ]}
-  />
-);
-
-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;

packages/benchmarks/src/implementations/emotion/Dot.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { css } from '@emotion/css';
-
-const Dot = ({ size, x, y, children, color }) => (
-  <div
-    className={css([
-      styles.root,
-      {
-        borderBottomColor: color,
-        borderRightWidth: `${size / 2}px`,
-        borderBottomWidth: `${size / 2}px`,
-        borderLeftWidth: `${size / 2}px`,
-        marginLeft: `${x}px`,
-        marginTop: `${y}px`
-      }
-    ])}
-  >
-    {children}
-  </div>
-);
-
-const styles = {
-  root: {
-    position: 'absolute',
-    cursor: 'pointer',
-    width: 0,
-    height: 0,
-    borderColor: 'transparent',
-    borderStyle: 'solid',
-    borderTopWidth: 0,
-    transform: 'translate(50%, 50%)'
-  }
-};
-
-export default Dot;

packages/benchmarks/src/implementations/emotion/Provider.js

@@ -1,2 +0,0 @@
-import View from './View';
-export default View;

packages/benchmarks/src/implementations/emotion/View.js

@@ -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 <div {...other} className={css([viewStyle, ...style])} />;
-  }
-}
-
-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;

packages/benchmarks/src/implementations/emotion/index.js

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

packages/benchmarks/src/implementations/inline-styles/Dot.js

@@ -2,17 +2,14 @@ import React from 'react';
 
 const Dot = ({ size, x, y, children, color }) => (
   <div
-    style={{
-      ...styles.root,
-      ...{
-        borderBottomColor: color,
-        borderRightWidth: `${size / 2}px`,
-        borderBottomWidth: `${size / 2}px`,
-        borderLeftWidth: `${size / 2}px`,
-        marginLeft: `${x}px`,
-        marginTop: `${y}px`
-      }
-    }}
+    style={Object.assign({}, styles.root, {
+      borderBottomColor: color,
+      borderRightWidth: `${size / 2}px`,
+      borderBottomWidth: `${size / 2}px`,
+      borderLeftWidth: `${size / 2}px`,
+      marginLeft: `${x}px`,
+      marginTop: `${y}px`
+    })}
   >
     {children}
   </div>

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;

packages/benchmarks/src/implementations/react-jss/Box.js

@@ -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 }) => (
-  <View
-    {...other}
-    className={classnames({
-      [classes[`color${color}`]]: true,
-      [classes.fixed]: fixed,
-      [classes.row]: layout === 'row',
-      [classes.outer]: outer
-    })}
-  />
-);
-
-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);

packages/benchmarks/src/implementations/react-jss/Dot.js

@@ -1,25 +0,0 @@
-import injectSheet from 'react-jss';
-import React from 'react';
-
-const Dot = ({ classes, children }) => <div className={classes.root}>{children}</div>;
-
-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);

packages/benchmarks/src/implementations/react-jss/Provider.js

@@ -1,2 +0,0 @@
-import View from './View';
-export default View;

packages/benchmarks/src/implementations/react-jss/View.js

@@ -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 <div {...other} className={classnames(classes.root, className)} />;
-  }
-}
-
-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);

packages/benchmarks/src/implementations/react-jss/index.js

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

packages/benchmarks/src/implementations/react-native-web/TextBox.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import { StyleSheet, Text } from 'react-native';
-
-const TextBox = ({ color, outer = false, ...other }) => (
-  <Text {...other} style={[styles.root, styles[`color${color}`], outer && styles.outer]} />
-);
-
-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;

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

packages/benchmarks/src/implementations/styled-components/Box.js

@@ -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;

packages/benchmarks/src/implementations/styled-components/Dot.js

@@ -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;

packages/benchmarks/src/implementations/styled-components/Provider.js

@@ -1,2 +0,0 @@
-import View from './View';
-export default View;

packages/benchmarks/src/implementations/styled-components/View.js

@@ -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;

packages/benchmarks/src/implementations/styled-components/index.js

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

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