@hanzogui/react-native-web-lite 2.0.0

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()
+    })
+  })
+})

package/src/AppState/index.tsx

@@ -0,0 +1,92 @@
+/**
+ * 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.
+ *
+ * @noflow
+ */
+
+import { canUseDOM, invariant } from '@hanzogui/react-native-web-internals'
+
+// Android 4.4 browser
+const isPrefixed =
+  // eslint-disable-next-line no-prototype-builtins
+  canUseDOM &&
+  !document.hasOwnProperty('hidden') &&
+  document.hasOwnProperty('webkitHidden')
+
+const EVENT_TYPES = ['change', 'memoryWarning']
+const VISIBILITY_CHANGE_EVENT = isPrefixed ? 'webkitvisibilitychange' : 'visibilitychange'
+const VISIBILITY_STATE_PROPERTY = isPrefixed ? 'webkitVisibilityState' : 'visibilityState'
+
+const AppStates = {
+  BACKGROUND: 'background',
+  ACTIVE: 'active',
+}
+
+class EventEmitter {
+  listeners = {}
+
+  addListener(type: string, handler: Function) {
+    this.listeners[type] ??= new Set()
+    this.listeners[type].add(handler)
+  }
+
+  emit(type: string, state: any) {
+    this.listeners[type]?.forEach((cb) => cb(state))
+  }
+
+  removeListener(type: string, handler: Function) {
+    this.listeners[type]?.delete(handler)
+  }
+}
+
+let hasBoundVisibilityChangeEvent = false
+
+const changeEmitter = new EventEmitter()
+
+export class AppState {
+  static isAvailable = canUseDOM && document[VISIBILITY_STATE_PROPERTY]
+
+  static get currentState() {
+    if (!AppState.isAvailable) {
+      return AppStates.ACTIVE
+    }
+
+    switch (document[VISIBILITY_STATE_PROPERTY]) {
+      case 'hidden':
+      case 'prerender':
+      case 'unloaded':
+        return AppStates.BACKGROUND
+      default:
+        return AppStates.ACTIVE
+    }
+  }
+
+  static addEventListener(type: string, handler: Function) {
+    if (AppState.isAvailable) {
+      invariant(
+        EVENT_TYPES.indexOf(type) !== -1,
+        'Trying to subscribe to unknown event: "%s"',
+        type
+      )
+      if (type === 'change') {
+        if (!hasBoundVisibilityChangeEvent) {
+          hasBoundVisibilityChangeEvent = true
+          document.addEventListener(
+            VISIBILITY_CHANGE_EVENT,
+            () => {
+              if (changeEmitter) {
+                changeEmitter.emit('change', AppState.currentState)
+              }
+            },
+            false
+          )
+        }
+        return changeEmitter.addListener(type, handler)
+      }
+    }
+  }
+}

package/src/Appearance/index.tsx

@@ -0,0 +1,59 @@
+/**
+ * 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 { canUseDOM } from '@hanzogui/react-native-web-internals'
+
+export type ColorSchemeName = 'light' | 'dark'
+
+export type AppearancePreferences = {
+  colorScheme: ColorSchemeName
+}
+
+type AppearanceListener = (preferences: AppearancePreferences) => void
+type DOMAppearanceListener = (ev: MediaQueryListEvent) => any
+
+function getQuery(): MediaQueryList | null {
+  return canUseDOM && window.matchMedia != null
+    ? window.matchMedia('(prefers-color-scheme: dark)')
+    : null
+}
+
+const query = getQuery()
+const listenerMapping = new WeakMap<AppearanceListener, DOMAppearanceListener>()
+
+export const Appearance = {
+  getColorScheme(): ColorSchemeName {
+    return query && query.matches ? 'dark' : 'light'
+  },
+
+  addChangeListener(listener: AppearanceListener): {
+    remove: () => void
+  } {
+    let mappedListener = listenerMapping.get(listener)
+    if (!mappedListener) {
+      mappedListener = ({ matches }: MediaQueryListEvent) => {
+        listener({ colorScheme: matches ? 'dark' : 'light' })
+      }
+      listenerMapping.set(listener, mappedListener)
+    }
+    if (query) {
+      query.addListener(mappedListener)
+    }
+
+    function remove(): void {
+      const mappedListener = listenerMapping.get(listener)
+      if (query && mappedListener) {
+        query.removeListener(mappedListener)
+      }
+      listenerMapping.delete(listener)
+    }
+
+    return { remove }
+  },
+}

package/src/BackHandler/index.tsx

@@ -0,0 +1,23 @@
+/**
+ * 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
+ */
+
+function emptyFunction() {}
+
+export const BackHandler = {
+  exitApp: emptyFunction,
+  addEventListener(): {
+    remove: () => void
+  } {
+    return {
+      remove: emptyFunction,
+    }
+  },
+  removeEventListener: emptyFunction,
+}

package/src/Clipboard/index.tsx

@@ -0,0 +1,61 @@
+/**
+ * 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
+ */
+
+let clipboardAvailable
+
+export class Clipboard {
+  static isAvailable(): boolean {
+    if (clipboardAvailable === undefined) {
+      clipboardAvailable =
+        typeof document.queryCommandSupported === 'function' &&
+        document.queryCommandSupported('copy')
+    }
+    return clipboardAvailable
+  }
+
+  static getString(): Promise<string> {
+    return Promise.resolve('')
+  }
+
+  static setString(text: string): boolean {
+    let success = false
+    const body = document.body
+
+    if (body) {
+      // add the text to a hidden node
+      const node = document.createElement('span')
+      node.textContent = text
+      node.style.opacity = '0'
+      node.style.position = 'absolute'
+      node.style.whiteSpace = 'pre-wrap'
+      node.style.userSelect = 'auto'
+      body.appendChild(node)
+
+      // select the text
+      const selection = window.getSelection() as any
+      selection.removeAllRanges()
+      const range = document.createRange()
+      range.selectNodeContents(node)
+      selection.addRange(range)
+
+      // attempt to copy
+      try {
+        document.execCommand('copy')
+        success = true
+      } catch (e) {}
+
+      // remove selection and node
+      selection.removeAllRanges()
+      body.removeChild(node)
+    }
+
+    return success
+  }
+}

package/src/DeviceEmitter.ts

@@ -0,0 +1,3 @@
+import { EventEmitter } from './vendor/react-native/emitter/_EventEmitter'
+
+export const DeviceEmitter = new EventEmitter()

package/src/DeviceInfo/index.tsx

@@ -0,0 +1,55 @@
+/**
+ * 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
+ */
+
+import { canUseDOM } from '@hanzogui/react-native-web-internals'
+
+import type { DisplayMetrics } from '../Dimensions/index'
+import { Dimensions } from '../Dimensions/index'
+
+export const DeviceInfo = {
+  Dimensions: {
+    get windowPhysicalPixels(): DisplayMetrics {
+      const { width, height, fontScale, scale } = Dimensions.get('window')
+      return {
+        width: width * scale,
+        height: height * scale,
+        scale,
+        fontScale,
+      }
+    },
+    get screenPhysicalPixels(): DisplayMetrics {
+      const { width, height, fontScale, scale } = Dimensions.get('screen')
+      return {
+        width: width * scale,
+        height: height * scale,
+        scale,
+        fontScale,
+      }
+    },
+  },
+
+  get locale(): string | void {
+    if (canUseDOM) {
+      if (navigator.languages) {
+        return navigator.languages[0]
+      } else {
+        return navigator.language
+      }
+    }
+  },
+
+  get totalMemory(): number | void {
+    // @ts-ignore
+    return canUseDOM ? navigator.deviceMemory : undefined
+  },
+
+  get userAgent(): string {
+    return canUseDOM ? navigator.userAgent : ''
+  },
+}

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

@@ -0,0 +1,54 @@
+/**
+ * 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 Dimensions from '..'
+
+describe('apis/Dimensions/index.js', () => {
+  test('get', () => {
+    expect(Dimensions.get('screen')).toMatchInlineSnapshot(`
+      {
+        "fontScale": 1,
+        "height": 0,
+        "scale": 1,
+        "width": 0,
+      }
+    `)
+    expect(Dimensions.get('window')).toMatchInlineSnapshot(`
+      {
+        "fontScale": 1,
+        "height": 768,
+        "scale": 1,
+        "width": 1024,
+      }
+    `)
+  })
+
+  test('set', () => {
+    expect(() => Dimensions.set({})).toThrow()
+  })
+
+  test('addEventListener', () => {
+    const handler = jest.fn()
+    const subscription = Dimensions.addEventListener('change', handler)
+    Dimensions._update()
+    expect(handler).toHaveBeenCalledTimes(1)
+    expect(handler).toHaveBeenLastCalledWith({
+      window: Dimensions.get('window'),
+      screen: Dimensions.get('screen'),
+    })
+    subscription.remove()
+    Dimensions._update()
+    expect(handler).toHaveBeenCalledTimes(1)
+  })
+
+  test('removeEventListener', () => {
+    const handler = jest.fn()
+    Dimensions.removeEventListener('change', handler)
+    Dimensions._update()
+    expect(handler).toHaveBeenCalledTimes(0)
+  })
+})