Material UI

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.16.0.js"

package.json

@@ -16,7 +16,6 @@
     "jest": "jest --config ./scripts/jest/config.js",
     "lint": "yarn lint:check --fix",
     "lint:check": "eslint packages scripts",
-    "precommit": "lint-staged",
     "prerelease": "yarn test && yarn compile && yarn compile:commonjs",
     "release": "node ./scripts/release/publish.js",
     "postrelease": "yarn benchmarks:release && yarn docs:release",

packages/babel-plugin-react-native-web/src/moduleMap.js

@@ -4,18 +4,20 @@ module.exports = {
   ActivityIndicator: true,
   Alert: true,
   Animated: true,
+  Appearance: true,
   AppRegistry: true,
   AppState: true,
-  Appearance: true,
   BackHandler: true,
   Button: true,
   CheckBox: true,
   Clipboard: true,
+  createElement: true,
   DeviceEventEmitter: true,
   DeviceInfo: true,
   Dimensions: true,
   DrawerLayoutAndroid: true,
   Easing: true,
+  findNodeHandle: true,
   FlatList: true,
   I18nManager: true,
   Image: true,
@@ -35,8 +37,10 @@ module.exports = {
   PixelRatio: true,
   Platform: true,
   Pressable: true,
+  processColor: true,
   ProgressBar: true,
   RefreshControl: true,
+  render: true,
   SafeAreaView: true,
   ScrollView: true,
   SectionList: true,
@@ -46,7 +50,6 @@ module.exports = {
   StyleSheet: true,
   Switch: true,
   Systrace: true,
-  TVEventHandler: true,
   Text: true,
   TextInput: true,
   ToastAndroid: true,
@@ -55,16 +58,13 @@ module.exports = {
   TouchableNativeFeedback: true,
   TouchableOpacity: true,
   TouchableWithoutFeedback: true,
+  TVEventHandler: true,
   UIManager: true,
+  unmountComponentAtNode: true,
+  useColorScheme: true,
+  useWindowDimensions: true,
   Vibration: true,
   View: true,
   VirtualizedList: true,
-  YellowBox: true,
-  createElement: true,
-  findNodeHandle: true,
-  processColor: true,
-  render: true,
-  unmountComponentAtNode: true,
-  useColorScheme: true,
-  useWindowDimensions: true
+  YellowBox: true
 };

packages/benchmarks/package.json

@@ -3,10 +3,12 @@
   "name": "benchmarks",
   "version": "0.13.4",
   "scripts": {
-    "build": "mkdir -p dist && cp -f index.html dist/index.html && ./node_modules/.bin/webpack-cli --config ./webpack.config.js",
+    "build": "mkdir dist && copy \"index.html\" \"dist/index.html\" && ./node_modules/.bin/webpack-cli --config ./webpack.config.js",
     "release": "NODE_ENV=production yarn build && git checkout gh-pages && rm -rf ../../benchmarks && mv dist ../../benchmarks && git add -A && git commit -m \"Benchmarks deploy\" && git push origin gh-pages && git checkout -"
   },
   "dependencies": {
+    "@emotion/core": "^10.0.28",
+    "@material-ui/styles": "^4.0.0-alpha.6",
     "aphrodite": "^2.4.0",
     "classnames": "^2.2.6",
     "d3-scale-chromatic": "^1.5.0",

packages/benchmarks/src/impl.js

@@ -2,7 +2,7 @@
 
 import { type Component } from 'react';
 import packageJson from '../package.json';
-
+console.log(packageJson);
 const context = require.context('./implementations/', true, /index\.js$/);
 const { dependencies } = packageJson;
 

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

@@ -1,32 +1,28 @@
 import React from 'react';
-import { css } from 'emotion';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
 
 const Dot = ({ size, x, y, children, color }) => (
   <div
-    className={css(styles.root, {
+    css={{
+      position: 'absolute',
+      cursor: 'pointer',
+      width: 0,
+      height: 0,
+      borderColor: 'transparent',
+      borderStyle: 'solid',
+      borderTopWidth: 0,
+      transform: 'translate(50%, 50%)',
       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/View.js

@@ -0,0 +1,28 @@
+import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+
+class View extends React.Component {
+  render() {
+    const { style, ...other } = this.props;
+    return <div {...other} css={{ 
+      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, 
+      ...style
+    }} />;
+  }
+}
+
+export default View;

packages/benchmarks/src/implementations/material-ui/Box.js

@@ -0,0 +1,54 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import classnames from 'classnames';
+import View from './View';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  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
+  }
+});
+
+function Box({ color, fixed = false, layout = 'column', outer = false, ...other }) {
+  const classes = useStyles();
+
+  return (
+    <View
+      {...other}
+      className={classnames(classes[`color${color}`], {
+        [classes.fixed]: fixed,
+        [classes.outer]: outer,
+        [classes.row]: layout === 'row'
+      })}
+    />
+  );
+}
+
+export default Box;

packages/benchmarks/src/implementations/material-ui/Dot.js

@@ -0,0 +1,31 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  root: {
+    position: 'absolute',
+    cursor: 'pointer',
+    width: 0,
+    height: 0,
+    borderColor: 'transparent',
+    borderStyle: 'solid',
+    borderTopWidth: 0,
+    transform: 'translate(50%, 50%)'
+  },
+  dynamic: ({ size, x, y, children, color }) => ({
+    borderBottomColor: color,
+    borderRightWidth: `${size / 2}px`,
+    borderBottomWidth: `${size / 2}px`,
+    borderLeftWidth: `${size / 2}px`,
+    marginLeft: `${x}px`,
+    marginTop: `${y}px`
+  })
+});
+
+function Dot(props) {
+  const classes = useStyles(props);
+  return <div className={`${classes.root} ${classes.dynamic}`}>{props.children}</div>;
+}
+
+export default Dot;

packages/benchmarks/src/implementations/material-ui/Provider.js

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

packages/benchmarks/src/implementations/material-ui/View.js

@@ -0,0 +1,29 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  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
+  }
+});
+
+function View(props) {
+  const classes = useStyles();
+  return <div {...props} className={`${classes.root} ${props.className}`} />;
+}
+
+export default View;

packages/benchmarks/src/implementations/material-ui/index.js

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