From bae4dd806aeb41459ab1ed70c0ab5e106c7f3187 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Sun, 10 Sep 2017 10:20:29 -0700
Subject: [PATCH] [change] rename createDOMElement to createElement

Allow 'createElement' to be used as a drop-in replacement for
'ReactDOM.createElement'.
---
 .../src/components/Icons/DirectMessage.js     |  5 ++--
 benchmarks/src/components/Icons/Heart.js      |  5 ++--
 benchmarks/src/components/Icons/Reply.js      |  5 ++--
 benchmarks/src/components/Icons/Retweet.js    |  5 ++--
 docs/guides/advanced.md                       | 25 +++++++++++++------
 docs/storybook/ui-explorer/Code.js            |  4 +--
 src/components/Image/index.js                 |  7 +++---
 src/components/Switch/index.js                |  4 +--
 src/components/Text/index.js                  |  4 +--
 src/components/TextInput/index.js             |  4 +--
 src/components/View/index.js                  |  9 +++----
 src/index.js                                  |  4 +--
 src/module.js                                 |  2 +-
 .../__snapshots__/index-test.js.snap          |  6 ++---
 .../__tests__/index-test.js                   | 12 ++++-----
 .../index.js                                  |  8 +++---
 16 files changed, 59 insertions(+), 50 deletions(-)
 rename src/modules/{createDOMElement => createElement}/__tests__/__snapshots__/index-test.js.snap (58%)
 rename src/modules/{createDOMElement => createElement}/__tests__/index-test.js (81%)
 rename src/modules/{createDOMElement => createElement}/index.js (94%)

diff --git a/benchmarks/src/components/Icons/DirectMessage.js b/benchmarks/src/components/Icons/DirectMessage.js
index 579f54e1..483be408 100644
--- a/benchmarks/src/components/Icons/DirectMessage.js
+++ b/benchmarks/src/components/Icons/DirectMessage.js
@@ -1,9 +1,10 @@
-import { createDOMElement } from 'react-native';
+/* eslint-disable react/prop-types */
+import { createElement } from 'react-native';
 import React from 'react';
 import styles from './styles';
 
 const IconDirectMessage = props =>
-  createDOMElement('svg', {
+  createElement('svg', {
     children: (
       <g>
         <path d="M43.34 14H12.66L28 27.946z" />
diff --git a/benchmarks/src/components/Icons/Heart.js b/benchmarks/src/components/Icons/Heart.js
index 4194e53b..0c18131b 100644
--- a/benchmarks/src/components/Icons/Heart.js
+++ b/benchmarks/src/components/Icons/Heart.js
@@ -1,9 +1,10 @@
-import { createDOMElement } from 'react-native';
+/* eslint-disable react/prop-types */
+import { createElement } from 'react-native';
 import React from 'react';
 import styles from './styles';
 
 const IconHeart = props =>
-  createDOMElement('svg', {
+  createElement('svg', {
     children: (
       <g>
         <path d="M38.723 12c-7.187 0-11.16 7.306-11.723 8.131C26.437 19.306 22.504 12 15.277 12 8.791 12 3.533 18.163 3.533 24.647 3.533 39.964 21.891 55.907 27 56c5.109-.093 23.467-16.036 23.467-31.353C50.467 18.163 45.209 12 38.723 12z" />
diff --git a/benchmarks/src/components/Icons/Reply.js b/benchmarks/src/components/Icons/Reply.js
index eef6ab0a..8b40ae4d 100644
--- a/benchmarks/src/components/Icons/Reply.js
+++ b/benchmarks/src/components/Icons/Reply.js
@@ -1,9 +1,10 @@
-import { createDOMElement } from 'react-native';
+/* eslint-disable react/prop-types */
+import { createElement } from 'react-native';
 import React from 'react';
 import styles from './styles';
 
 const IconReply = props =>
-  createDOMElement('svg', {
+  createElement('svg', {
     children: (
       <g>
         <path d="M41 31h-9V19a2.999 2.999 0 0 0-4.817-2.386l-21 16a3 3 0 0 0-.001 4.773l21 16a3.006 3.006 0 0 0 3.15.301A2.997 2.997 0 0 0 32 51V39h9c5.514 0 10 4.486 10 10a4 4 0 0 0 8 0c0-9.925-8.075-18-18-18z" />
diff --git a/benchmarks/src/components/Icons/Retweet.js b/benchmarks/src/components/Icons/Retweet.js
index b06e8468..1db41c25 100644
--- a/benchmarks/src/components/Icons/Retweet.js
+++ b/benchmarks/src/components/Icons/Retweet.js
@@ -1,9 +1,10 @@
-import { createDOMElement } from 'react-native';
+/* eslint-disable react/prop-types */
+import { createElement } from 'react-native';
 import React from 'react';
 import styles from './styles';
 
 const IconRetweet = props =>
-  createDOMElement('svg', {
+  createElement('svg', {
     children: (
       <g>
         <path d="M70.676 36.644A3 3 0 0 0 68 35h-7V19a4 4 0 0 0-4-4H34a4 4 0 0 0 0 8h18a1 1 0 0 1 1 .998V35h-7a3.001 3.001 0 0 0-2.419 4.775l11 15a3.003 3.003 0 0 0 4.839-.001l11-15a3.001 3.001 0 0 0 .256-3.13zM40.001 48H22a.995.995 0 0 1-.992-.96L21.001 36h7a3.001 3.001 0 0 0 2.419-4.775l-11-15a3.003 3.003 0 0 0-4.839.001l-11 15A3 3 0 0 0 6.001 36h7l.011 16.003a4 4 0 0 0 4 3.997h22.989a4 4 0 0 0 0-8z" />
diff --git a/docs/guides/advanced.md b/docs/guides/advanced.md
index f3f235de..840af709 100644
--- a/docs/guides/advanced.md
+++ b/docs/guides/advanced.md
@@ -2,7 +2,7 @@
 
 ## Use with existing React DOM components
 
-React Native for Web exports a web-specific module called `createDOMElement`,
+React Native for Web exports a web-specific module called `createElement`,
 which can be used to wrap React DOM components. This allows you to use React
 Native's accessibility and style optimizations.
 
@@ -11,9 +11,8 @@ In the example below, `Video` will now accept common React Native props such as
 props.
 
 ```js
-import { createDOMElement } from 'react-native';
-
-const Video = (props) => createDOMElement('video', props);
+import { createElement } from 'react-native-web';
+const Video = (props) => createElement('video', props);
 ```
 
 This also works with composite components defined in your existing component
@@ -21,9 +20,10 @@ gallery or dependencies ([live example](https://www.webpackbin.com/bins/-KiTSGFw
 
 ```js
 import RaisedButton from 'material-ui/RaisedButton';
-import { createDOMElement, StyleSheet } from 'react-native';
+import { createElement } from 'react-native-web';
+import { StyleSheet } from 'react-native';
 
-const CustomButton = (props) => createDOMElement(RaisedButton, {
+const CustomButton = (props) => createElement(RaisedButton, {
   ...props,
   style: [ styles.button, props.style ]
 });
@@ -35,6 +35,14 @@ const styles = StyleSheet.create({
 });
 ```
 
+And `createElement` can be used as drop-in replacement for `React.createElement`:
+
+```js
+/* @jsx createElement */
+import { createElement } from 'react-native-web';
+const Video = (props) => <video {...props} style={[ { marginVertical: 10 }, props.style ]} />
+```
+
 Remember that React Native styles are not the same as React DOM styles, and
 care needs to be taken not to pass React DOM styles into your React Native
 wrapped components.
@@ -47,7 +55,8 @@ an API inspired by styled-components ([live
 example](https://www.webpackbin.com/bins/-KjT9ziwv4O7FDZdvsnX)).
 
 ```js
-const { createDOMElement, StyleSheet } = ReactNative;
+import { createElement } from 'react-native-web';
+import { StyleSheet } from 'react-native';
 
 /**
  * styled API
@@ -69,7 +78,7 @@ const styled = (Component, styler) => {
 
       return (
         isDOMComponent
-          ? createDOMElement(Component, nextProps)
+          ? createElement(Component, nextProps)
           : <Component {...nextProps} />
       );
     }
diff --git a/docs/storybook/ui-explorer/Code.js b/docs/storybook/ui-explorer/Code.js
index 7f849219..d861a455 100644
--- a/docs/storybook/ui-explorer/Code.js
+++ b/docs/storybook/ui-explorer/Code.js
@@ -2,9 +2,9 @@
  * @flow
  */
 
-import { createDOMElement, StyleSheet } from 'react-native';
+import { createElement, StyleSheet } from 'react-native';
 
-const Code = props => createDOMElement('code', { ...props, style: [styles.code, props.style] });
+const Code = props => createElement('code', { ...props, style: [styles.code, props.style] });
 
 export default Code;
 
diff --git a/src/components/Image/index.js b/src/components/Image/index.js
index 02f39e30..6a0f966a 100644
--- a/src/components/Image/index.js
+++ b/src/components/Image/index.js
@@ -12,7 +12,7 @@
 
 import applyNativeMethods from '../../modules/applyNativeMethods';
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
-import createDOMElement from '../../modules/createDOMElement';
+import createElement from '../../modules/createElement';
 import { getAssetByID } from '../../modules/AssetRegistry';
 import ImageLoader from '../../modules/ImageLoader';
 import ImageResizeMode from './ImageResizeMode';
@@ -209,11 +209,11 @@ class Image extends Component {
 
     // Allows users to trigger the browser's image context menu
     const hiddenImage = displayImage
-      ? createDOMElement('img', {
+      ? createElement('img', {
           alt: accessibilityLabel || '',
           draggable,
           src: displayImage,
-          style: [StyleSheet.absoluteFill, styles.img]
+          style: styles.img
         })
       : null;
 
@@ -317,6 +317,7 @@ const styles = StyleSheet.create({
     display: 'inline-flex'
   },
   img: {
+    ...StyleSheet.absoluteFillObject,
     height: '100%',
     opacity: 0,
     width: '100%',
diff --git a/src/components/Switch/index.js b/src/components/Switch/index.js
index aa9fc3b2..3f174429 100644
--- a/src/components/Switch/index.js
+++ b/src/components/Switch/index.js
@@ -5,7 +5,7 @@
 
 import applyNativeMethods from '../../modules/applyNativeMethods';
 import ColorPropType from '../../propTypes/ColorPropType';
-import createDOMElement from '../../modules/createDOMElement';
+import createElement from '../../modules/createElement';
 import multiplyStyleLengthValue from '../../modules/multiplyStyleLengthValue';
 import StyleSheet from '../../apis/StyleSheet';
 import UIManager from '../../apis/UIManager';
@@ -110,7 +110,7 @@ class Switch extends PureComponent {
       disabled && styles.disabledThumb
     ];
 
-    const nativeControl = createDOMElement('input', {
+    const nativeControl = createElement('input', {
       checked: value,
       disabled: disabled,
       onBlur: this._handleFocusState,
diff --git a/src/components/Text/index.js b/src/components/Text/index.js
index 825966ec..be5be73d 100644
--- a/src/components/Text/index.js
+++ b/src/components/Text/index.js
@@ -14,7 +14,7 @@ import applyLayout from '../../modules/applyLayout';
 import applyNativeMethods from '../../modules/applyNativeMethods';
 import { bool } from 'prop-types';
 import { Component } from 'react';
-import createDOMElement from '../../modules/createDOMElement';
+import createElement from '../../modules/createElement';
 import StyleSheet from '../../apis/StyleSheet';
 import TextPropTypes from './TextPropTypes';
 
@@ -75,7 +75,7 @@ class Text extends Component {
 
     const component = isInAParentText ? 'span' : 'div';
 
-    return createDOMElement(component, otherProps);
+    return createElement(component, otherProps);
   }
 
   _createEnterHandler(fn) {
diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index 90e48835..a442ea7b 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -15,7 +15,7 @@ import applyNativeMethods from '../../modules/applyNativeMethods';
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import { Component } from 'react';
 import ColorPropType from '../../propTypes/ColorPropType';
-import createDOMElement from '../../modules/createDOMElement';
+import createElement from '../../modules/createElement';
 import findNodeHandle from '../../modules/findNodeHandle';
 import StyleSheet from '../../apis/StyleSheet';
 import StyleSheetPropType from '../../propTypes/StyleSheetPropType';
@@ -265,7 +265,7 @@ class TextInput extends Component {
       otherProps.type = type;
     }
 
-    return createDOMElement(component, otherProps);
+    return createElement(component, otherProps);
   }
 
   _handleBlur = e => {
diff --git a/src/components/View/index.js b/src/components/View/index.js
index 2b0eb4d9..eab4a333 100644
--- a/src/components/View/index.js
+++ b/src/components/View/index.js
@@ -10,7 +10,7 @@
 import applyLayout from '../../modules/applyLayout';
 import applyNativeMethods from '../../modules/applyNativeMethods';
 import { bool } from 'prop-types';
-import createDOMElement from '../../modules/createDOMElement';
+import createElement from '../../modules/createElement';
 import StyleSheet from '../../apis/StyleSheet';
 import ViewPropTypes from './ViewPropTypes';
 import React, { Component } from 'react';
@@ -55,16 +55,13 @@ class View extends Component {
 
     if (hitSlop) {
       const hitSlopStyle = calculateHitSlopStyle(hitSlop);
-      const hitSlopChild = createDOMElement('span', { style: [styles.hitSlop, hitSlopStyle] });
+      const hitSlopChild = createElement('span', { style: [styles.hitSlop, hitSlopStyle] });
       otherProps.children = React.Children.toArray(otherProps.children);
       otherProps.children.unshift(hitSlopChild);
       otherProps.style.unshift(styles.hasHitSlop);
     }
 
-    // avoid HTML validation errors
-    const component = 'div';
-
-    return createDOMElement(component, otherProps);
+    return createElement('div', otherProps);
   }
 }
 
diff --git a/src/index.js b/src/index.js
index 7a5bbf0c..851340f6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,7 +5,7 @@ import {
   unmountComponentAtNode,
 
   // modules
-  createDOMElement,
+  createElement,
   NativeModules,
   processColor,
 
@@ -71,7 +71,7 @@ const ReactNative = {
   unmountComponentAtNode,
 
   // modules
-  createDOMElement,
+  createElement,
   NativeModules,
   processColor,
 
diff --git a/src/module.js b/src/module.js
index 9f211707..2587399b 100644
--- a/src/module.js
+++ b/src/module.js
@@ -1,4 +1,4 @@
-export { default as createDOMElement } from './modules/createDOMElement';
+export { default as createElement } from './modules/createElement';
 export { default as findNodeHandle } from './modules/findNodeHandle';
 export { default as NativeModules } from './modules/NativeModules';
 export { default as processColor } from './modules/processColor';
diff --git a/src/modules/createDOMElement/__tests__/__snapshots__/index-test.js.snap b/src/modules/createElement/__tests__/__snapshots__/index-test.js.snap
similarity index 58%
rename from src/modules/createDOMElement/__tests__/__snapshots__/index-test.js.snap
rename to src/modules/createElement/__tests__/__snapshots__/index-test.js.snap
index 2959a1e2..5f7a4df7 100644
--- a/src/modules/createDOMElement/__tests__/__snapshots__/index-test.js.snap
+++ b/src/modules/createElement/__tests__/__snapshots__/index-test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`modules/createDOMElement it normalizes event.nativeEvent 1`] = `
+exports[`modules/createElement it normalizes event.nativeEvent 1`] = `
 Object {
   "_normalized": true,
   "changedTouches": Array [],
@@ -15,6 +15,6 @@ Object {
 }
 `;
 
-exports[`modules/createDOMElement it renders different DOM elements 1`] = `<span />`;
+exports[`modules/createElement it renders different DOM elements 1`] = `<span />`;
 
-exports[`modules/createDOMElement it renders different DOM elements 2`] = `<main />`;
+exports[`modules/createElement it renders different DOM elements 2`] = `<main />`;
diff --git a/src/modules/createDOMElement/__tests__/index-test.js b/src/modules/createElement/__tests__/index-test.js
similarity index 81%
rename from src/modules/createDOMElement/__tests__/index-test.js
rename to src/modules/createElement/__tests__/index-test.js
index 2f7c1d77..671dcb12 100644
--- a/src/modules/createDOMElement/__tests__/index-test.js
+++ b/src/modules/createElement/__tests__/index-test.js
@@ -1,13 +1,13 @@
 /* eslint-env jasmine, jest */
 
-import createDOMElement from '..';
+import createElement from '..';
 import { shallow, render } from 'enzyme';
 
-describe('modules/createDOMElement', () => {
+describe('modules/createElement', () => {
   test('it renders different DOM elements', () => {
-    let component = render(createDOMElement('span'));
+    let component = render(createElement('span'));
     expect(component).toMatchSnapshot();
-    component = render(createDOMElement('main'));
+    component = render(createElement('main'));
     expect(component).toMatchSnapshot();
   });
 
@@ -17,7 +17,7 @@ describe('modules/createDOMElement', () => {
       expect(e.nativeEvent).toMatchSnapshot();
       done();
     };
-    const component = shallow(createDOMElement('span', { onClick }));
+    const component = shallow(createElement('span', { onClick }));
     component.find('span').simulate('click', {
       nativeEvent: {
         preventDefault() {},
@@ -34,7 +34,7 @@ describe('modules/createDOMElement', () => {
           test(`"onClick" is ${disabled ? 'not ' : ''}called when "${name}" is pressed`, () => {
             const onClick = jest.fn();
             const component = shallow(
-              createDOMElement('span', { accessibilityRole: 'button', disabled, onClick })
+              createElement('span', { accessibilityRole: 'button', disabled, onClick })
             );
             component.find('span').simulate('keyPress', {
               isDefaultPrevented() {},
diff --git a/src/modules/createDOMElement/index.js b/src/modules/createElement/index.js
similarity index 94%
rename from src/modules/createDOMElement/index.js
rename to src/modules/createElement/index.js
index 8a3a518b..087d43aa 100644
--- a/src/modules/createDOMElement/index.js
+++ b/src/modules/createElement/index.js
@@ -80,15 +80,13 @@ const adjustProps = domProps => {
   }
 };
 
-const createDOMElement = (component, props) => {
+const createElement = (component, props, ...children) => {
   // use equivalent platform elements where possible
   const accessibilityComponent = AccessibilityUtil.propsToAccessibilityComponent(props);
   const Component = accessibilityComponent || component;
   const domProps = createDOMProps(Component, props);
-
   adjustProps(domProps);
-
-  return <Component {...domProps} />;
+  return React.createElement(Component, domProps, ...children);
 };
 
-export default createDOMElement;
+export default createElement;