[change] prepare for react-dom@15.4.0

Don't depend directly on the 'react-dom' module as it will be prebuilt
in 15.4. Leave server-side rendering to 'react-dom/server'.

docs/apis/AppRegistry.md

@@ -13,14 +13,11 @@ into `runApplication`. These should always be used as a pair.
 
 ## Methods
 
-(web) static **prerenderApplication**(appKey:string, appParameters: object)
+(web) static **getApplication**(appKey:string, appParameters: object)
 
-Renders the given application to an HTML string. Use this for server-side
+Returns the given application element. Use this for server-side rendering.
-rendering. Return object is of type `{ html: string; style: string;
+Return object is of type `{ element: ReactElement; stylesheet: ReactElement }`.
-styleElement: ReactComponent }`. `html` is the prerendered HTML, `style` is the
+It's recommended that you use `sheetsheet` to render the style sheet in an app
-prerendered style sheet, and `styleElement` is a React Component. It's
-recommended that you use `styleElement` to render the style sheet in an app
-shell.
 
 static **registerConfig**(config: Array<AppConfig>)
 

docs/guides/rendering.md

@@ -43,12 +43,7 @@ import ReactNative from 'react-native'
 // component that renders the app
 const AppHeaderContainer = (props) => { /* ... */ }
 
-// DOM render
 ReactNative.render(<AppHeaderContainer />, document.getElementById('react-app-header'))
-
-// Server render
-ReactNative.renderToString(<AppHeaderContainer />)
-ReactNative.renderToStaticMarkup(<AppHeaderContainer />)
 ```
 
 Rendering using the `AppRegistry`:
@@ -63,7 +58,6 @@ const AppContainer = (props) => { /* ... */ }
 // register the app
 AppRegistry.registerComponent('App', () => AppContainer)
 
-// DOM render
 AppRegistry.runApplication('App', {
   initialProps: {},
   rootTag: document.getElementById('react-app')
@@ -72,3 +66,22 @@ AppRegistry.runApplication('App', {
 // prerender the app
 const { html, styleElement } = AppRegistry.prerenderApplication('App', { initialProps })
 ```
+
+## Server-side rendering
+
+Rendering using the `AppRegistry`:
+
+```
+import ReactDOMServer from 'react-dom/server'
+import ReactNative, { AppRegistry } from 'react-native'
+
+// component that renders the app
+const AppContainer = (props) => { /* ... */ }
+
+// register the app
+AppRegistry.registerComponent('App', () => AppContainer)
+
+// prerender the app
+const { element, stylesheet } = AppRegistry.getApplication('App', { initialProps });
+const initialHTML = ReactDOMServer.renderToString(element);
+ ```

src/apis/AppRegistry/__tests__/renderApplication-test.js

@@ -1,15 +1,15 @@
 /* eslint-env jasmine, jest */
 
-import { prerenderApplication } from '../renderApplication';
+import { getApplication } from '../renderApplication';
 import React from 'react';
 
 const component = () => <div />;
 
 describe('apis/AppRegistry/renderApplication', () => {
-  test('prerenderApplication', () => {
+  test('getApplication', () => {
-    const { html, styleElement } = prerenderApplication(component, {});
+    const { element, stylesheet } = getApplication(component, {});
 
-    expect(html.indexOf('<div ') > -1).toBeTruthy();
+    expect(element).toBeTruthy();
-    expect(styleElement.type).toEqual('style');
+    expect(stylesheet.type).toEqual('style');
   });
 });

src/apis/AppRegistry/index.js

@@ -8,7 +8,7 @@
 
 import { Component } from 'react';
 import invariant from 'fbjs/lib/invariant';
-import ReactDOM from 'react-dom';
+import { unmountComponentAtNode } from 'react/lib/ReactMount';
 import renderApplication, { prerenderApplication } from './renderApplication';
 
 const runnables = {};
@@ -29,20 +29,20 @@ class AppRegistry {
     return Object.keys(runnables);
   }
 
-  static prerenderApplication(appKey: string, appParameters?: Object): string {
+  static getApplication(appKey: string, appParameters?: Object): string {
     invariant(
-      runnables[appKey] && runnables[appKey].prerender,
+      runnables[appKey] && runnables[appKey].getApplication,
       `Application ${appKey} has not been registered. ` +
       'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
     );
 
-    return runnables[appKey].prerender(appParameters);
+    return runnables[appKey].getApplication(appParameters);
   }
 
   static registerComponent(appKey: string, getComponentFunc: ComponentProvider): string {
     runnables[appKey] = {
-      run: ({ initialProps, rootTag }) => renderApplication(getComponentFunc(), initialProps, rootTag),
+      getApplication: ({ initialProps } = {}) => getApplication(getComponentFunc(), initialProps),
-      prerender: ({ initialProps } = {}) => prerenderApplication(getComponentFunc(), initialProps)
+      run: ({ initialProps, rootTag }) => renderApplication(getComponentFunc(), initialProps, rootTag)
     };
     return appKey;
   }
@@ -85,7 +85,7 @@ class AppRegistry {
   }
 
   static unmountApplicationComponentAtRootTag(rootTag) {
-    ReactDOM.unmountComponentAtNode(rootTag);
+    unmountComponentAtNode(rootTag);
   }
 }
 

src/apis/AppRegistry/renderApplication.js

@@ -7,7 +7,7 @@
  */
 
 import invariant from 'fbjs/lib/invariant';
-import ReactDOM from 'react-dom';
+import { render } from 'react/lib/ReactMount';
 import ReactDOMServer from 'react-dom/server';
 import ReactNativeApp from './ReactNativeApp';
 import StyleSheet from '../../apis/StyleSheet';
@@ -23,17 +23,16 @@ export default function renderApplication(RootComponent: Component, initialProps
       rootTag={rootTag}
     />
   );
-  ReactDOM.render(component, rootTag);
+  render(component, rootTag);
 }
 
-export function prerenderApplication(RootComponent: Component, initialProps: Object): string {
+export function getApplication(RootComponent: Component, initialProps: Object): Object {
-  const component = (
+  const element = (
     <ReactNativeApp
       initialProps={initialProps}
       rootComponent={RootComponent}
     />
   );
-  const html = ReactDOMServer.renderToString(component);
+  const stylesheet = StyleSheet.render();
-  const styleElement = StyleSheet.render();
+  return { element, stylesheet };
-  return { html, styleElement };
 }

src/components/ScrollView/index.js

@@ -7,8 +7,8 @@
  */
 
 import dismissKeyboard from '../../modules/dismissKeyboard';
+import findNodeHandle from '../../modules/findNodeHandle';
 import invariant from 'fbjs/lib/invariant';
-import ReactDOM from 'react-dom';
 import ScrollResponder from '../../modules/ScrollResponder';
 import ScrollViewBase from './ScrollViewBase';
 import StyleSheet from '../../apis/StyleSheet';
@@ -55,11 +55,11 @@ const ScrollView = React.createClass({
   },
 
   getScrollableNode(): any {
-    return ReactDOM.findDOMNode(this._scrollViewRef);
+    return findNodeHandle(this._scrollViewRef);
   },
 
   getInnerViewNode(): any {
-    return ReactDOM.findDOMNode(this._innerViewRef);
+    return findNodeHandle(this._innerViewRef);
   },
 
   /**

src/core.js

@@ -1,6 +1,5 @@
 import findNodeHandle from './modules/findNodeHandle';
-import ReactDOM from 'react-dom';
+import { render, unmountComponentAtNode } from 'react/lib/ReactMount';
-import ReactDOMServer from 'react-dom/server';
 
 // APIs
 import I18nManager from './apis/I18nManager';
@@ -14,10 +13,8 @@ import View from './components/View';
 
 const ReactNativeCore = {
   findNodeHandle,
-  render: ReactDOM.render,
+  render,
-  renderToStaticMarkup: ReactDOMServer.renderToStaticMarkup,
+  unmountComponentAtNode,
-  renderToString: ReactDOMServer.renderToString,
-  unmountComponentAtNode: ReactDOM.unmountComponentAtNode,
   // APIs
   I18nManager,
   StyleSheet,

src/index.js

@@ -1,6 +1,5 @@
 import findNodeHandle from './modules/findNodeHandle';
-import ReactDOM from 'react-dom';
+import { render, unmountComponentAtNode } from 'react/lib/ReactMount';
-import ReactDOMServer from 'react-dom/server';
 
 // APIs
 import Animated from './apis/Animated';
@@ -47,11 +46,8 @@ import PointPropType from './propTypes/PointPropType';
 const ReactNative = {
   // top-level API
   findNodeHandle,
-  render: ReactDOM.render,
+  render,
-  unmountComponentAtNode: ReactDOM.unmountComponentAtNode,
+  unmountComponentAtNode,
-  // web-only
-  renderToStaticMarkup: ReactDOMServer.renderToStaticMarkup,
-  renderToString: ReactDOMServer.renderToString,
 
   // APIs
   Animated,

src/modules/NativeMethodsMixin/index.js

@@ -7,7 +7,7 @@
  */
 
 import { Component } from 'react';
-import ReactDOM from 'react-dom';
+import findNodeHandle from '../findNodeHandle';
 import UIManager from '../../apis/UIManager';
 
 type MeasureInWindowOnSuccessCallback = (
@@ -38,7 +38,7 @@ const NativeMethodsMixin = {
    * Removes focus from an input or view. This is the opposite of `focus()`.
    */
   blur() {
-    UIManager.blur(ReactDOM.findDOMNode(this));
+    UIManager.blur(findNodeHandle(this));
   },
 
   /**
@@ -46,7 +46,7 @@ const NativeMethodsMixin = {
    * The exact behavior triggered will depend the type of view.
    */
   focus() {
-    UIManager.focus(ReactDOM.findDOMNode(this));
+    UIManager.focus(findNodeHandle(this));
   },
 
   /**
@@ -54,7 +54,7 @@ const NativeMethodsMixin = {
    */
   measure(callback: MeasureOnSuccessCallback) {
     UIManager.measure(
-      ReactDOM.findDOMNode(this),
+      findNodeHandle(this),
       mountSafeCallback(this, callback)
     );
   },
@@ -76,7 +76,7 @@ const NativeMethodsMixin = {
    */
   measureInWindow(callback: MeasureInWindowOnSuccessCallback) {
     UIManager.measureInWindow(
-      ReactDOM.findDOMNode(this),
+      findNodeHandle(this),
       mountSafeCallback(this, callback)
     );
   },
@@ -90,7 +90,7 @@ const NativeMethodsMixin = {
     onFail: () => void /* currently unused */
   ) {
     UIManager.measureLayout(
-      ReactDOM.findDOMNode(this),
+      findNodeHandle(this),
       relativeToNativeNode,
       mountSafeCallback(this, onFail),
       mountSafeCallback(this, onSuccess)
@@ -102,7 +102,7 @@ const NativeMethodsMixin = {
    */
   setNativeProps(nativeProps: Object) {
     UIManager.updateView(
-      ReactDOM.findDOMNode(this),
+      findNodeHandle(this),
       nativeProps,
       this
     );

src/modules/ScrollResponder/index.js

@@ -13,9 +13,9 @@
 'use strict';
 
 var Dimensions = require('../../apis/Dimensions');
+var findNodeHandle = require('../findNodeHandle');
 var Platform = require('../../apis/Platform');
 var React = require('react');
-var ReactDOM = require('react-dom');
 // var Subscribable = require('../Subscribable');
 var TextInputState = require('../../components/TextInput/TextInputState');
 var UIManager = require('../../apis/UIManager');
@@ -356,7 +356,7 @@ var ScrollResponderMixin = {
   scrollResponderGetScrollableNode: function(): any {
     return this.getScrollableNode ?
       this.getScrollableNode() :
-      ReactDOM.findDOMNode(this);
+      findNodeHandle(this);
   },
 
   /**
@@ -423,7 +423,7 @@ var ScrollResponderMixin = {
     this.preventNegativeScrollOffset = !!preventNegativeScrollOffset;
     UIManager.measureLayout(
       nodeHandle,
-      ReactDOM.findDOMNode(this.getInnerViewNode()),
+      findNodeHandle(this.getInnerViewNode()),
       this.scrollResponderTextInputFocusError,
       this.scrollResponderInputMeasureAndScrollToKeyboard
     );

src/modules/findNodeHandle/index.js

@@ -1,3 +1,2 @@
-import ReactDOM from 'react-dom';
+import findNodeHandle from 'react/lib/findDOMNode';
-const findNodeHandle = ReactDOM.findDOMNode;
 export default findNodeHandle;

webpack.config.js

@@ -8,6 +8,16 @@ module.exports = {
   entry: {
     main: DIST_DIRECTORY
   },
+  externals: [
+    {
+      react: {
+        root: 'React',
+        commonjs2: 'react',
+        commonjs: 'react',
+        amd: 'react'
+      }
+    }
+  ],
   output: {
     filename: 'ReactNative.js',
     library: 'ReactNative',