[change] modernize AppRegistry

Rewrite AppRegistry to use function components and hooks.
Rewrite the tests to replace enzyme with testing-library.

packages/react-native-web/src/exports/AppRegistry/AppContainer.js

@@ -8,16 +8,11 @@
  * @flow
  */
 
-import type { ComponentType } from 'react';
+import type { ComponentType, Context } from 'react';
 
 import StyleSheet from '../StyleSheet';
 import View from '../View';
-import { any } from 'prop-types';
-import React from 'react';
-
-type Context = {
-  rootTag: any
-};
+import React, { createContext } from 'react';
 
 type Props = {
   WrapperComponent?: ?ComponentType<*>,
@@ -26,44 +21,26 @@ type Props = {
   rootTag: any
 };
 
-type State = {
-  mainKey: number
-};
+const RootTagContext: Context<any> = createContext(null);
 
-export default class AppContainer extends React.Component<Props, State> {
-  state = { mainKey: 1 };
+export default function AppContainer(props: Props) {
+  const { children, WrapperComponent } = props;
 
-  static childContextTypes = {
-    rootTag: any
-  };
+  let innerView = (
+    <View children={children} key={1} pointerEvents="box-none" style={styles.appContainer} />
+  );
 
-  getChildContext(): Context {
-    return {
-      rootTag: this.props.rootTag
-    };
+  if (WrapperComponent) {
+    innerView = <WrapperComponent>{innerView}</WrapperComponent>;
   }
 
-  render() {
-    const { children, WrapperComponent } = this.props;
-    let innerView = (
-      <View
-        children={children}
-        key={this.state.mainKey}
-        pointerEvents="box-none"
-        style={styles.appContainer}
-      />
-    );
-
-    if (WrapperComponent) {
-      innerView = <WrapperComponent>{innerView}</WrapperComponent>;
-    }
-
-    return (
+  return (
+    <RootTagContext.Provider value={props.rootTag}>
       <View pointerEvents="box-none" style={styles.appContainer}>
         {innerView}
       </View>
-    );
-  }
+    </RootTagContext.Provider>
+  );
 }
 
 const styles = StyleSheet.create({

packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js

@@ -4,21 +4,16 @@ import AppRegistry from '..';
 import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import { render } from 'enzyme';
+import { render } from '@testing-library/react';
 import StyleSheet from '../../StyleSheet';
 import Text from '../../Text';
 import View from '../../View';
 
+const canUseDOM = ExecutionEnvironment.canUseDOM;
 const NoopComponent = () => <div />;
 
-const styles = StyleSheet.create({ root: { borderWidth: 1234, backgroundColor: 'purple' } });
-const RootComponent = () => <View />;
-const AlternativeComponent = () => <Text style={styles.root} />;
-
 describe('AppRegistry', () => {
   describe('getApplication', () => {
-    const canUseDOM = ExecutionEnvironment.canUseDOM;
-
     beforeEach(() => {
       ExecutionEnvironment.canUseDOM = false;
     });
@@ -56,6 +51,10 @@ describe('AppRegistry', () => {
         return getStyleElement().props.dangerouslySetInnerHTML.__html;
       };
 
+      const styles = StyleSheet.create({ root: { borderWidth: 1234, backgroundColor: 'purple' } });
+      const RootComponent = () => <View />;
+      const AlternativeComponent = () => <Text style={styles.root} />;
+
       // First render "RootComponent"
       AppRegistry.registerComponent('App', () => RootComponent);
       const first = getApplicationStyles('App');

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

@@ -8,10 +8,11 @@
  * @flow
  */
 
+import type { ComponentType } from 'react';
+
 import invariant from 'fbjs/lib/invariant';
 import unmountComponentAtNode from '../unmountComponentAtNode';
 import renderApplication, { getApplication } from './renderApplication';
-import type { ComponentType } from 'react';
 
 const emptyObject = {};
 const runnables = {};

packages/react-native-web/src/exports/AppRegistry/renderApplication.js

@@ -8,12 +8,14 @@
  * @flow
  */
 
+import type { ComponentType } from 'react';
+
 import AppContainer from './AppContainer';
 import invariant from 'fbjs/lib/invariant';
 import hydrate from '../../modules/hydrate';
 import render from '../render';
 import styleResolver from '../StyleSheet/styleResolver';
-import React, { type ComponentType } from 'react';
+import React from 'react';
 
 export default function renderApplication<Props: Object>(
   RootComponent: ComponentType<Props>,