[change] createElement -> unstable_createElement

Rename the 'createElement' export to reflect its unstable status.

Fix #1385

Author: necolas

docs/guides/advanced.md

@@ -2,7 +2,7 @@
 
 ## Use with existing React DOM components
 
-React Native for Web exports a web-specific module called `createElement`,
+React Native for Web exports a web-specific module called `unstable_createElement`,
 which can be used to wrap React DOM components. This allows you to use React
 Native's accessibility and style optimizations.
 
@@ -11,19 +11,19 @@ In the example below, `Video` will now accept common React Native props such as
 props.
 
 ```js
-import { createElement } from 'react-native-web';
-const Video = (props) => createElement('video', props);
+import { unstable_createElement } from 'react-native-web';
+const Video = (props) => unstable_createElement('video', props);
 ```
 
 This also works with composite components defined in your existing component
 gallery or dependencies ([live example](https://www.webpackbin.com/bins/-KiTSGFw3fB9Szg7quLI)).
 
 ```js
 import RaisedButton from 'material-ui/RaisedButton';
-import { createElement } from 'react-native-web';
+import { unstable_createElement } from 'react-native-web';
 import { StyleSheet } from 'react-native';
 
-const CustomButton = (props) => createElement(RaisedButton, {
+const CustomButton = (props) => unstable_createElement(RaisedButton, {
   ...props,
   style: [ styles.button, props.style ]
 });
@@ -35,11 +35,11 @@ const styles = StyleSheet.create({
 });
 ```
 
-And `createElement` can be used as drop-in replacement for `React.createElement`:
+And `unstable_createElement` can be used as drop-in replacement for `React.createElement`:
 
 ```js
-/* @jsx createElement */
-import { createElement } from 'react-native-web';
+/* @jsx unstable_createElement */
+import { unstable_createElement } from 'react-native-web';
 const Video = (props) => <video {...props} style={[ { marginVertical: 10 }, props.style ]} />
 ```
 
@@ -55,7 +55,7 @@ an API inspired by styled-components ([live
 example](https://www.webpackbin.com/bins/-KjT9ziwv4O7FDZdvsnX)).
 
 ```js
-import { createElement } from 'react-native-web';
+import { unstable_createElement } from 'react-native-web';
 import { StyleSheet } from 'react-native';
 
 /**
@@ -78,7 +78,7 @@ const styled = (Component, styler) => {
 
       return (
         isDOMComponent
-          ? createElement(Component, nextProps)
+          ? unstable_createElement(Component, nextProps)
           : <Component {...nextProps} />
       );
     }

packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap

@@ -3,30 +3,30 @@
 exports[`Rewrite react-native to react-native-web export from "react-native": export from "react-native" 1`] = `
 "
 export { View } from 'react-native';
-export { ColorPropType, StyleSheet, Text, createElement } from 'react-native';
+export { ColorPropType, StyleSheet, Text, unstable_createElement } from 'react-native';
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
 export { default as View } from 'react-native-web/dist/exports/View';
 export { default as ColorPropType } from 'react-native-web/dist/exports/ColorPropType';
 export { default as StyleSheet } from 'react-native-web/dist/exports/StyleSheet';
 export { default as Text } from 'react-native-web/dist/exports/Text';
-export { default as createElement } from 'react-native-web/dist/exports/createElement';
+export { default as unstable_createElement } from 'react-native-web/dist/exports/createElement';
 "
 `;
 
 exports[`Rewrite react-native to react-native-web export from "react-native-web": export from "react-native-web" 1`] = `
 "
 export { View } from 'react-native-web';
-export { ColorPropType, StyleSheet, Text, createElement } from 'react-native-web';
+export { ColorPropType, StyleSheet, Text, unstable_createElement } from 'react-native-web';
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
 export { default as View } from 'react-native-web/dist/exports/View';
 export { default as ColorPropType } from 'react-native-web/dist/exports/ColorPropType';
 export { default as StyleSheet } from 'react-native-web/dist/exports/StyleSheet';
 export { default as Text } from 'react-native-web/dist/exports/Text';
-export { default as createElement } from 'react-native-web/dist/exports/createElement';
+export { default as unstable_createElement } from 'react-native-web/dist/exports/createElement';
 "
 `;
 
@@ -68,13 +68,13 @@ import * as ReactNativeModules from 'react-native-web/dist/cjs/index';
 
 exports[`Rewrite react-native to react-native-web import from "react-native-web": import from "react-native-web" 1`] = `
 "
-import { createElement } from 'react-native-web';
+import { unstable_createElement } from 'react-native-web';
 import { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web';
 import * as ReactNativeModules from 'react-native-web';
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import createElement from 'react-native-web/dist/exports/createElement';
+import unstable_createElement from 'react-native-web/dist/exports/createElement';
 import ColorPropType from 'react-native-web/dist/exports/ColorPropType';
 import StyleSheet from 'react-native-web/dist/exports/StyleSheet';
 import View from 'react-native-web/dist/exports/View';
@@ -123,14 +123,14 @@ const TouchableOpacity = require('react-native-web/dist/cjs/exports/TouchableOpa
 exports[`Rewrite react-native to react-native-web require "react-native-web": require "react-native-web" 1`] = `
 "
 const ReactNative = require('react-native-web');
-const { createElement } = require('react-native-web');
+const { unstable_createElement } = require('react-native-web');
 const { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web');
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
 const ReactNative = require('react-native-web/dist/index');
 
-const createElement = require('react-native-web/dist/exports/createElement').default;
+const unstable_createElement = require('react-native-web/dist/exports/createElement').default;
 
 const ColorPropType = require('react-native-web/dist/exports/ColorPropType').default;
 

packages/babel-plugin-react-native-web/src/__tests__/index-test.js

@@ -22,21 +22,21 @@ import * as ReactNativeModules from 'react-native';`,
   },
   {
     title: 'import from "react-native-web"',
-    code: `import { createElement } from 'react-native-web';
+    code: `import { unstable_createElement } from 'react-native-web';
 import { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web';
 import * as ReactNativeModules from 'react-native-web';`,
     snapshot: true
   },
   {
     title: 'export from "react-native"',
     code: `export { View } from 'react-native';
-export { ColorPropType, StyleSheet, Text, createElement } from 'react-native';`,
+export { ColorPropType, StyleSheet, Text, unstable_createElement } from 'react-native';`,
     snapshot: true
   },
   {
     title: 'export from "react-native-web"',
     code: `export { View } from 'react-native-web';
-export { ColorPropType, StyleSheet, Text, createElement } from 'react-native-web';`,
+export { ColorPropType, StyleSheet, Text, unstable_createElement } from 'react-native-web';`,
     snapshot: true
   },
   {
@@ -57,7 +57,7 @@ const { StyleSheet, TouchableOpacity } = require('react-native');`,
   {
     title: 'require "react-native-web"',
     code: `const ReactNative = require('react-native-web');
-const { createElement } = require('react-native-web');
+const { unstable_createElement } = require('react-native-web');
 const { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web');`,
     snapshot: true
   }

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

@@ -4,10 +4,11 @@ const isCommonJS = opts => opts.commonjs === true;
 
 const getDistLocation = (importName, opts) => {
   const format = isCommonJS(opts) ? 'cjs/' : '';
-  if (importName === 'index') {
+  const internalName = importName === 'unstable_createElement' ? 'createElement' : importName;
+  if (internalName === 'index') {
     return `react-native-web/dist/${format}index`;
-  } else if (importName && moduleMap[importName]) {
-    return `react-native-web/dist/${format}exports/${importName}`;
+  } else if (internalName && moduleMap[internalName]) {
+    return `react-native-web/dist/${format}exports/${internalName}`;
   }
 };
 

packages/benchmarks/src/app/Icons.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { createElement, StyleSheet, Text } from 'react-native';
+import { unstable_createElement as createElement, StyleSheet, Text } from 'react-native';
 
 const styles = StyleSheet.create({
   root: {
@@ -18,7 +18,10 @@ const createIcon = children => {
     createElement(
       'svg',
       {
-        style: StyleSheet.compose(styles.root, props.style),
+        style: StyleSheet.compose(
+          styles.root,
+          props.style
+        ),
         width: 24,
         height: 24,
         viewBox: '0 0 24 24'

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

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import { createElement, StyleSheet } from 'react-native';
+import { unstable_createElement as createElement, StyleSheet } from 'react-native';
 
 const Dot = ({ size, x, y, children, color }) =>
   createElement('div', {

packages/benchmarks/src/implementations/react-native-web/Tweet/IconDirectMessage.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import { createElement } from 'react-native';
+import { unstable_createElement as createElement } from 'react-native';
 import React from 'react';
 import styles from './styles';
 

packages/benchmarks/src/implementations/react-native-web/Tweet/IconHeart.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import { createElement } from 'react-native';
+import { unstable_createElement as createElement } from 'react-native';
 import React from 'react';
 import styles from './styles';
 

packages/benchmarks/src/implementations/react-native-web/Tweet/IconReply.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import { createElement } from 'react-native';
+import { unstable_createElement as createElement } from 'react-native';
 import React from 'react';
 import styles from './styles';
 

packages/benchmarks/src/implementations/react-native-web/Tweet/IconRetweet.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import { createElement } from 'react-native';
+import { unstable_createElement as createElement } from 'react-native';
 import React from 'react';
 import styles from './styles';
 

packages/react-native-web/src/index.js

@@ -82,7 +82,7 @@ import DeviceEventEmitter from './exports/DeviceEventEmitter';
 
 export {
   // top-level API
-  createElement,
+  createElement as unstable_createElement,
   findNodeHandle,
   render,
   unmountComponentAtNode,

packages/website/storybook/ui-explorer/Code.js

@@ -2,7 +2,7 @@
  * @flow
  */
 
-import { createElement, StyleSheet } from 'react-native';
+import { unstable_createElement as createElement, StyleSheet } from 'react-native';
 
 const Code = props => createElement('code', { ...props, style: [styles.code, props.style] });