@hanzogui/react-native-web-lite 2.0.0-rc.41-hanzoai.5

package/src/ActivityIndicator/index.tsx

@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react'
+import { StyleSheet } from '@hanzogui/react-native-web-internals'
+
+import type { ViewProps } from '../View/index'
+import { View } from '../View/index'
+
+const createSvgCircle = (style) => (
+  <circle cx="16" cy="16" fill="none" r="14" strokeWidth="4" style={style} />
+)
+
+type ActivityIndicatorProps = ViewProps & {
+  animating?: boolean
+  color?: string | null
+  hidesWhenStopped?: boolean
+  size?: 'small' | 'large' | number
+}
+
+const ActivityIndicator = React.forwardRef<any, ActivityIndicatorProps>(
+  (props, forwardedRef) => {
+    const {
+      animating = true,
+      color = '#1976D2',
+      hidesWhenStopped = true,
+      size = 'small',
+      style,
+      ...other
+    } = props
+
+    const svg = (
+      <svg height="100%" viewBox="0 0 32 32" width="100%">
+        {createSvgCircle({
+          stroke: color,
+          opacity: 0.2,
+        })}
+        {createSvgCircle({
+          stroke: color,
+          strokeDasharray: 80,
+          strokeDashoffset: 60,
+        })}
+      </svg>
+    )
+
+    return (
+      <View
+        {...other}
+        accessibilityRole="progressbar"
+        accessibilityValueMax={1}
+        accessibilityValueMin={0}
+        ref={forwardedRef}
+        style={[styles.container, style]}
+      >
+        <View
+          children={svg}
+          style={[
+            typeof size === 'number'
+              ? { height: size, width: size }
+              : indicatorSizes[size],
+            styles.animation,
+            !animating && styles.animationPause,
+            !animating && hidesWhenStopped && styles.hidesWhenStopped,
+          ]}
+        />
+      </View>
+    )
+  }
+)
+
+ActivityIndicator.displayName = 'ActivityIndicator'
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  hidesWhenStopped: {
+    visibility: 'hidden',
+  },
+  animation: {
+    animationDuration: '0.75s',
+    animationKeyframes: [
+      {
+        '0%': { transform: [{ rotate: '0deg' }] },
+        '100%': { transform: [{ rotate: '360deg' }] },
+      },
+    ],
+    animationTimingFunction: 'linear',
+    animationIterationCount: 'infinite',
+  },
+  animationPause: {
+    animationPlayState: 'paused',
+  },
+})
+
+const indicatorSizes = StyleSheet.create({
+  small: {
+    width: 20,
+    height: 20,
+  },
+  large: {
+    width: 36,
+    height: 36,
+  },
+})
+
+export { ActivityIndicator }
+export default ActivityIndicator

package/src/Alert/index.tsx

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export class Alert {
+  static alert() {}
+}

package/src/AppRegistry/AppContainer.tsx

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react'
+import { StyleSheet } from '@hanzogui/react-native-web-internals'
+
+import { View } from '../View/index'
+
+type Props = {
+  WrapperComponent?: React.FunctionComponent<any> | null
+  children?: React.ReactNode
+  rootTag: any
+}
+
+export const RootTagContext: React.Context<any> = React.createContext(null)
+
+const AppContainer = React.forwardRef((props: Props, forwardedRef?: React.Ref<any>) => {
+  const { children, WrapperComponent } = props
+
+  let innerView = (
+    <View key={1} pointerEvents="box-none" style={styles.appContainer}>
+      {children}
+    </View>
+  )
+
+  if (WrapperComponent) {
+    innerView = <WrapperComponent>{innerView}</WrapperComponent>
+  }
+
+  return (
+    <RootTagContext.Provider value={props.rootTag}>
+      <View pointerEvents="box-none" ref={forwardedRef} style={styles.appContainer}>
+        {innerView}
+      </View>
+    </RootTagContext.Provider>
+  )
+})
+
+AppContainer.displayName = 'AppContainer'
+
+const styles = StyleSheet.create({
+  appContainer: {
+    flex: 1,
+  },
+})
+
+export { AppContainer }

package/src/AppRegistry/__tests__/index-test.node.tsx

@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react'
+import ReactDOMServer from 'react-dom/server'
+
+import StyleSheet from '../../StyleSheet/index'
+import View from '../../View'
+import AppRegistry from '..'
+
+const NoopComponent = () => React.createElement('div')
+
+describe('AppRegistry', () => {
+  describe('getApplication', () => {
+    test('does not throw when missing appParameters', () => {
+      AppRegistry.registerComponent('App', () => NoopComponent)
+      expect(() => AppRegistry.getApplication('App')).not.toThrow()
+    })
+
+    test('returns "element" and "getStyleElement"', () => {
+      AppRegistry.registerComponent('App', () => NoopComponent)
+      const { element, getStyleElement } = AppRegistry.getApplication('App', {})
+      const styleElement = ReactDOMServer.renderToStaticMarkup(getStyleElement())
+
+      expect(element).toMatchInlineSnapshot(`
+        <AppContainer
+          rootTag={{}}
+        >
+          <NoopComponent />
+        </AppContainer>
+      `)
+      expect(styleElement).toMatchInlineSnapshot(`
+        "<style id=\\"react-native-stylesheet\\">[stylesheet-group=\\"0\\"]{}
+        body{margin:0;}
+        button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+        html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+        input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+        [stylesheet-group=\\"1\\"]{}
+        .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
+        [stylesheet-group=\\"2\\"]{}
+        .r-display-xoduu5{display:inline-flex;}
+        .r-flex-13awgt0{flex:1;}
+        [stylesheet-group=\\"2.2\\"]{}
+        .r-bottom-1p0dtai{bottom:0px;}
+        .r-left-1d2f490{left:0px;}
+        .r-pointerEvents-105ug2t{pointer-events:auto!important;}
+        .r-pointerEvents-12vffkv>*{pointer-events:auto;}
+        .r-pointerEvents-12vffkv{pointer-events:none!important;}
+        .r-pointerEvents-633pao{pointer-events:none!important;}
+        .r-pointerEvents-ah5dr5>*{pointer-events:none;}
+        .r-pointerEvents-ah5dr5{pointer-events:auto!important;}
+        .r-position-u8s1d{position:absolute;}
+        .r-right-zchlnj{right:0px;}
+        .r-top-ipm5af{top:0px;}</style>"
+      `)
+    })
+
+    test('"getStyleElement" adds props to <style>', () => {
+      const nonce = '2Bz9RM/UHvBbmo3jK/PbYZ=='
+      AppRegistry.registerComponent('App', () => NoopComponent)
+      const { getStyleElement } = AppRegistry.getApplication('App', {})
+      const styleElement = getStyleElement({ nonce })
+      expect(styleElement.props.nonce).toBe(nonce)
+    })
+
+    test('"getStyleElement" contains style updates', () => {
+      const getApplicationStyles = (appName) => {
+        const { getStyleElement } = AppRegistry.getApplication(appName, {})
+        return getStyleElement().props.dangerouslySetInnerHTML.__html
+      }
+
+      // First render "RootComponent"
+      const RootComponent = () => React.createElement(View)
+      AppRegistry.registerComponent('App', () => RootComponent)
+      const first = getApplicationStyles('App')
+      expect(first).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        body{margin:0;}
+        button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+        html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+        input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+        [stylesheet-group=\\"1\\"]{}
+        .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
+        [stylesheet-group=\\"2\\"]{}
+        .r-display-xoduu5{display:inline-flex;}
+        .r-flex-13awgt0{flex:1;}
+        [stylesheet-group=\\"2.2\\"]{}
+        .r-bottom-1p0dtai{bottom:0px;}
+        .r-left-1d2f490{left:0px;}
+        .r-pointerEvents-105ug2t{pointer-events:auto!important;}
+        .r-pointerEvents-12vffkv>*{pointer-events:auto;}
+        .r-pointerEvents-12vffkv{pointer-events:none!important;}
+        .r-pointerEvents-633pao{pointer-events:none!important;}
+        .r-pointerEvents-ah5dr5>*{pointer-events:none;}
+        .r-pointerEvents-ah5dr5{pointer-events:auto!important;}
+        .r-position-u8s1d{position:absolute;}
+        .r-right-zchlnj{right:0px;}
+        .r-top-ipm5af{top:0px;}"
+      `)
+
+      // Second render "AlternativeComponent"
+      const styles = StyleSheet.create({
+        root: { borderWidth: 1234, backgroundColor: 'purple' },
+      })
+      const AlternativeComponent = () => React.createElement(View, { style: styles.root })
+      AppRegistry.registerComponent('AlternativeApp', () => AlternativeComponent)
+      const second = getApplicationStyles('AlternativeApp')
+      expect(second).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        body{margin:0;}
+        button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+        html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+        input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+        [stylesheet-group=\\"1\\"]{}
+        .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
+        [stylesheet-group=\\"2\\"]{}
+        .r-borderWidth-1bee2fs{border-bottom-width:1234px;border-left-width:1234px;border-right-width:1234px;border-top-width:1234px;}
+        .r-display-xoduu5{display:inline-flex;}
+        .r-flex-13awgt0{flex:1;}
+        [stylesheet-group=\\"2.2\\"]{}
+        .r-backgroundColor-aot4c7{background-color:rgba(128,0,128,1.00);}
+        .r-bottom-1p0dtai{bottom:0px;}
+        .r-left-1d2f490{left:0px;}
+        .r-pointerEvents-105ug2t{pointer-events:auto!important;}
+        .r-pointerEvents-12vffkv>*{pointer-events:auto;}
+        .r-pointerEvents-12vffkv{pointer-events:none!important;}
+        .r-pointerEvents-633pao{pointer-events:none!important;}
+        .r-pointerEvents-ah5dr5>*{pointer-events:none;}
+        .r-pointerEvents-ah5dr5{pointer-events:auto!important;}
+        .r-position-u8s1d{position:absolute;}
+        .r-right-zchlnj{right:0px;}
+        .r-top-ipm5af{top:0px;}"
+      `)
+
+      // Third render "RootComponent" again
+      const third = getApplicationStyles('App')
+      expect(third).toEqual(second)
+    })
+  })
+})

package/src/AppRegistry/__tests__/index-test.tsx

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react'
+
+import AppRegistry from '..'
+
+const NoopComponent = () => React.createElement('div')
+
+describe('AppRegistry', () => {
+  describe('runApplication', () => {
+    let rootTag
+
+    beforeEach(() => {
+      rootTag = document.createElement('div')
+      rootTag.id = 'react-root'
+      document.body.appendChild(rootTag)
+    })
+
+    afterEach(() => {
+      document.body.removeChild(rootTag)
+    })
+
+    test('callback after render', () => {
+      const callback = jest.fn()
+      AppRegistry.registerComponent('App', () => NoopComponent)
+      AppRegistry.runApplication('App', {
+        initialProps: {},
+        rootTag,
+        callback,
+      })
+      expect(callback).toHaveBeenCalledTimes(1)
+    })
+
+    test('styles roots in different documents', () => {
+      AppRegistry.registerComponent('App', () => NoopComponent)
+      AppRegistry.runApplication('App', { initialProps: {}, rootTag })
+
+      // Create iframe context
+      const iframe = document.createElement('iframe')
+      document.body.appendChild(iframe)
+
+      const iframeRootTag = document.createElement('div')
+      iframeRootTag.id = 'react-iframe-root'
+      iframe.contentWindow.document.body.appendChild(iframeRootTag)
+
+      // Run in iframe
+      AppRegistry.registerComponent('App', () => NoopComponent)
+      AppRegistry.runApplication('App', {
+        initialProps: {},
+        rootTag: iframeRootTag,
+      })
+
+      const iframedoc = iframeRootTag.ownerDocument
+      expect(iframedoc).toBe(iframe.contentWindow.document)
+      expect(iframedoc).not.toBe(document)
+
+      const cssText = Array.prototype.slice
+        .call(iframedoc.getElementById('react-native-stylesheet').sheet.cssRules)
+        .map((cssRule) => cssRule.cssText)
+
+      expect(cssText).toMatchInlineSnapshot(`
+        [
+          "[stylesheet-group=\\"0\\"] {}",
+          "body {margin: 0;}",
+          "button::-moz-focus-inner,input::-moz-focus-inner {border: 0; padding: 0;}",
+          "html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0);}",
+          "input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration {display: none;}",
+          "[stylesheet-group=\\"1\\"] {}",
+          ".css-view-175oi2r {align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0;}",
+          "[stylesheet-group=\\"2\\"] {}",
+          ".r-display-xoduu5 {display: inline-flex;}",
+          ".r-flex-13awgt0 {flex: 1;}",
+          "[stylesheet-group=\\"2.2\\"] {}",
+          ".r-bottom-1p0dtai {bottom: 0px;}",
+          ".r-left-1d2f490 {left: 0px;}",
+          ".r-pointerEvents-105ug2t {pointer-events: auto !important;}",
+          ".r-pointerEvents-12vffkv>* {pointer-events: auto;}",
+          ".r-pointerEvents-12vffkv {pointer-events: none !important;}",
+          ".r-pointerEvents-633pao {pointer-events: none !important;}",
+          ".r-pointerEvents-ah5dr5>* {pointer-events: none;}",
+          ".r-pointerEvents-ah5dr5 {pointer-events: auto !important;}",
+          ".r-position-u8s1d {position: absolute;}",
+          ".r-right-zchlnj {right: 0px;}",
+          ".r-top-ipm5af {top: 0px;}",
+        ]
+      `)
+    })
+  })
+})

package/src/AppRegistry/index.tsx

@@ -0,0 +1,156 @@
+// @ts-nocheck
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type { ComponentType, ReactNode } from 'react'
+import { unmountComponentAtNode } from 'react-dom'
+import { invariant } from '@hanzogui/react-native-web-internals'
+
+import { renderApplication, getApplication } from './renderApplication'
+
+type AppParams = object
+
+type Runnable = {
+  getApplication?: (appParams: AppParams) => {
+    element: ReactNode
+    getStyleElement: (arg0: any) => ReactNode
+  }
+  run: (appParams: AppParams) => any
+}
+
+export type ComponentProvider = () => ComponentType<any>
+export type ComponentProviderInstrumentationHook = (
+  component: ComponentProvider
+) => ComponentType<any>
+export type WrapperComponentProvider = (arg0: any) => ComponentType<unknown>
+
+export type AppConfig = {
+  appKey: string
+  component?: ComponentProvider
+  run?: Function
+  section?: boolean
+}
+
+const emptyObject = {}
+const runnables: {
+  [K in string]: Runnable
+} = {}
+
+let componentProviderInstrumentationHook: ComponentProviderInstrumentationHook = (
+  component: ComponentProvider
+) => component()
+let wrapperComponentProvider: WrapperComponentProvider | null
+
+/**
+ * `AppRegistry` is the JS entry point to running all React Native apps.
+ */
+export class AppRegistry {
+  static getAppKeys(): Array<string> {
+    return Object.keys(runnables)
+  }
+
+  static getApplication(
+    appKey: string,
+    appParameters?: AppParams
+  ): {
+    element: ReactNode
+    getStyleElement: (arg0: any) => ReactNode
+  } {
+    invariant(
+      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.'
+    )
+
+    // @ts-ignore
+    return runnables[appKey]?.getApplication?.(appParameters)
+  }
+
+  static registerComponent(appKey: string, componentProvider: ComponentProvider): string {
+    runnables[appKey] = {
+      getApplication: (appParameters: any) =>
+        getApplication(
+          componentProviderInstrumentationHook(componentProvider),
+          appParameters ? appParameters.initialProps : emptyObject,
+          wrapperComponentProvider && wrapperComponentProvider(appParameters)
+        ),
+      run: (appParameters: any) =>
+        renderApplication(
+          componentProviderInstrumentationHook(componentProvider),
+          wrapperComponentProvider && wrapperComponentProvider(appParameters),
+          appParameters.callback,
+          {
+            hydrate: appParameters.hydrate || false,
+            initialProps: appParameters.initialProps || emptyObject,
+            mode: appParameters.mode || 'legacy',
+            rootTag: appParameters.rootTag,
+          }
+        ),
+    }
+    return appKey
+  }
+
+  static registerConfig(config: Array<AppConfig>) {
+    config.forEach(({ appKey, component, run }) => {
+      if (run) {
+        AppRegistry.registerRunnable(appKey, run)
+      } else {
+        invariant(component, 'No component provider passed in')
+        // @ts-ignore
+        AppRegistry.registerComponent(appKey, component)
+      }
+    })
+  }
+
+  // TODO: fix style sheet creation when using this method
+  static registerRunnable(appKey: string, run: Function): string {
+    // @ts-ignore
+    runnables[appKey] = { run }
+    return appKey
+  }
+
+  static runApplication(appKey: string, appParameters: Record<string, any>): void {
+    const isDevelopment =
+      process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test'
+    if (isDevelopment) {
+      const params = { ...appParameters }
+      params.rootTag = `#${params.rootTag.id}`
+
+      console.log(
+        `Running application "${appKey}" with appParams:\n`,
+        params,
+        `\nDevelopment-level warnings: ${isDevelopment ? 'ON' : 'OFF'}.` +
+          `\nPerformance optimizations: ${isDevelopment ? 'OFF' : 'ON'}.`
+      )
+    }
+
+    invariant(
+      runnables[appKey] && runnables[appKey].run,
+      `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].run(appParameters)
+  }
+
+  static setComponentProviderInstrumentationHook(
+    hook: ComponentProviderInstrumentationHook
+  ) {
+    componentProviderInstrumentationHook = hook
+  }
+
+  static setWrapperComponentProvider(provider: WrapperComponentProvider) {
+    wrapperComponentProvider = provider
+  }
+
+  static unmountApplicationComponentAtRootTag(rootTag: any) {
+    unmountComponentAtNode(rootTag)
+  }
+}

package/src/AppRegistry/renderApplication.tsx

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type { ComponentType, FunctionComponent, ReactNode } from 'react'
+import React from 'react'
+import { StyleSheet } from '@hanzogui/react-native-web-internals'
+import { invariant } from '@hanzogui/react-native-web-internals'
+
+import { renderLegacy, hydrate, hydrateLegacy, render } from '../render/index'
+import { AppContainer } from './AppContainer'
+
+export function renderApplication<Props extends object>(
+  RootComponent: ComponentType<Props>,
+  WrapperComponent: FunctionComponent<any> | null = null,
+  callback: () => void = () => {},
+  options: {
+    hydrate: boolean
+    initialProps: Props
+    mode: 'concurrent' | 'legacy'
+    rootTag: any
+  }
+) {
+  const { hydrate: shouldHydrate, initialProps, mode, rootTag } = options
+  const renderFn = shouldHydrate
+    ? mode === 'concurrent'
+      ? hydrate
+      : hydrateLegacy
+    : mode === 'concurrent'
+      ? render
+      : renderLegacy
+
+  invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag)
+
+  // @ts-ignore
+  return renderFn(
+    <AppContainer WrapperComponent={WrapperComponent} ref={callback} rootTag={rootTag}>
+      <RootComponent {...initialProps} />
+    </AppContainer>,
+    rootTag
+  )
+}
+
+export function getApplication(
+  RootComponent: ComponentType<object>,
+  initialProps: object,
+  WrapperComponent?: FunctionComponent<any> | null
+): {
+  element: ReactNode
+  getStyleElement: (object: object) => ReactNode
+} {
+  const element = (
+    <AppContainer WrapperComponent={WrapperComponent} rootTag={{}}>
+      <RootComponent {...initialProps} />
+    </AppContainer>
+  )
+  // Don't escape CSS text
+  const getStyleElement = (props) => {
+    const sheet = StyleSheet.getSheet()
+    return (
+      <style
+        {...props}
+        dangerouslySetInnerHTML={{ __html: sheet.textContent }}
+        id={sheet.id}
+      />
+    )
+  }
+  return { element, getStyleElement }
+}

package/src/AppState/__tests__/index-test.tsx

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import AppState from '..'
+
+describe('apis/AppState', () => {
+  const handler = () => {}
+
+  describe('addEventListener', () => {
+    test('throws if the provided "eventType" is not supported', () => {
+      expect(() => AppState.addEventListener('foo', handler)).toThrow()
+      expect(() => AppState.addEventListener('change', handler).remove()).not.toThrow()
+    })
+
+    test('returns remove subscription', () => {
+      const subscription = AppState.addEventListener('change', handler)
+      expect(() => subscription.remove()).not.toThrow()
+    })
+  })
+})