[change] move bridge code into createDOMElement

Moves event normalization and the ResponderEventPlugin injection from
'View' to 'createDOMElement'.

The 'react-native-web/lite' variant is removed from the performance
directory as the implementation is not substantially different.
Micro-optimizations to marginally narrow the performance gap to
css-modules.

performance/README.md

@@ -10,25 +10,18 @@ open ./performance/index.html
 ## Notes
 
 The components used in the render benchmarks are simple enough to be
-implemented by multiple styling libraries. The implementations are not
-equivalent but are useful for framing the relative performance of
-`react-native-web` against these tests.
-
-The implementations are not equivalent. For example, the `react-native-web`
-implementation of `View` does more than just styling. The
-`react-native-web/lite` variant implements a minimal `View` that allows for a
-more direct comparison with the `css-modules` baseline.
+implemented by multiple UI or style libraries. The implementations are not
+equivalent in functionality.
 
 ## Benchmark results
 
-Typical render timings*: mean / two standard deviations
+Typical render timings*: mean ± two standard deviations
 
 | Implementation               | Deep tree (ms)    | Wide tree (ms)    |
 | :--- | ---: | ---: |
-| css-modules                  |  `75.40` `±15.93` | `162.15` `±22.20` |
-| react-native-web/lite@0.0.77 |  `83.93` `±13.80` | `177.57` `±20.045` |
-| react-native-web@0.0.77      | `106.72` `±15.48` | `217.63` `±25.70` |
-| styled-components@2.0.0-7    | `255.19` `±35.09` | `569.74` `±59.94` |
-| glamor@3.0.0-1               | `268.94` `±38.96` | `458.69` `±32.30` |
+| `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` |
 
 *MacBook Pro (13-inch, Early 2011); 2.7 GHz Intel Core i7; 16 GB 1600 MHz DDR3. Google Chrome 56.

performance/implementations/react-native-web/Box/lite.js

@@ -1,49 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import StyleSheet from 'react-native/apis/StyleSheet';
-import View from '../View/lite';
-
-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: {
-    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;

performance/implementations/react-native-web/View/lite.js

@@ -1,32 +0,0 @@
-import createDOMElement from 'react-native/modules/createDOMElement';
-import StyleSheet from 'react-native/apis/StyleSheet';
-
-const View = props => createDOMElement('div', { ...props, style: [styles.initial, props.style] });
-
-const styles = StyleSheet.create({
-  initial: {
-    alignItems: 'stretch',
-    borderWidth: 0,
-    borderStyle: 'solid',
-    boxSizing: 'border-box',
-    display: 'flex',
-    flexBasis: 'auto',
-    flexDirection: 'column',
-    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 = View;

performance/implementations/react-native-web/lite.js

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

performance/index.js

@@ -1,7 +1,6 @@
 import cssModules from './implementations/css-modules';
 import glamor from './implementations/glamor';
 import reactNative from './implementations/react-native-web';
-import reactNativeLite from './implementations/react-native-web/lite';
 import styledComponents from './implementations/styled-components';
 
 import renderDeepTree from './tests/renderDeepTree';
@@ -10,13 +9,11 @@ import renderWideTree from './tests/renderWideTree';
 const tests = [
   // deep tree
   () => renderDeepTree('css-modules', cssModules),
-  () => renderDeepTree('react-native-web/lite', reactNativeLite),
   () => renderDeepTree('react-native-web', reactNative),
   () => renderDeepTree('styled-components', styledComponents),
   () => renderDeepTree('glamor', glamor),
   // wide tree
   () => renderWideTree('css-modules', cssModules),
-  () => renderWideTree('react-native-web/lite', reactNativeLite),
   () => renderWideTree('react-native-web', reactNative),
   () => renderWideTree('styled-components', styledComponents),
   () => renderWideTree('glamor', glamor)