@hanzogui/react-native-web-lite 2.0.0

package/src/createElement/index.tsx

@@ -0,0 +1,92 @@
+/**
+ * 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.
+ *
+ * @noflow
+ */
+
+import {
+  AccessibilityUtil,
+  LocaleProvider,
+  createDOMProps,
+  stylesFromProps,
+} from '@hanzogui/react-native-web-internals'
+import {
+  type StyleObject,
+  getStyleTags,
+  insertStyleRules,
+  useDidFinishSSR,
+} from '@hanzogui/web'
+import React, { useInsertionEffect, useMemo } from 'react'
+
+// SSR safe create element
+export const useCreateElement = (component, props, options?) => {
+  const { element, styles } = createElementAndStyles(component, props, options)
+
+  const isHydrated = useDidFinishSSR()
+
+  // only for ssr
+  const styleTags = useMemo(() => {
+    return isHydrated || !styles ? null : getStyleTags(styles)
+  }, [
+    // never changes
+  ])
+
+  // after that we insert
+  useInsertionEffect(() => {
+    if (!styles) return
+    const styleObj: Record<string, StyleObject> = {}
+    for (const style of styles) {
+      styleObj[style[0]] = style
+    }
+    insertStyleRules(styleObj)
+  }, [styles])
+
+  return (
+    <>
+      {element}
+      {styleTags}
+    </>
+  )
+}
+
+export const createElement = (component, props, options?) => {
+  const { element, styles } = createElementAndStyles(component, props, options)
+
+  return (
+    <>
+      {element}
+      {styles ? getStyleTags(styles) : null}
+    </>
+  )
+}
+
+const createElementAndStyles = (component, props, options?) => {
+  // Use equivalent platform elements where possible.
+  let accessibilityComponent
+  if (component && component.constructor === String) {
+    accessibilityComponent = AccessibilityUtil.propsToAccessibilityComponent(props)
+  }
+  const Component = accessibilityComponent || component
+  const domProps = createDOMProps(Component, props, options)
+
+  const styles = stylesFromProps.get(domProps)
+
+  let element = React.createElement(Component, domProps)
+
+  // Update locale context if element's writing direction prop changes
+  const elementWithLocaleProvider = domProps.dir ? (
+    <LocaleProvider direction={domProps.dir} locale={domProps.lang}>
+      {element}
+    </LocaleProvider>
+  ) : (
+    element
+  )
+
+  return {
+    element: elementWithLocaleProvider,
+    styles,
+  }
+}

package/src/createReactDOMStyle.ts

@@ -0,0 +1,4 @@
+import { createReactDOMStyle } from '@hanzogui/react-native-web-internals'
+
+export { createReactDOMStyle }
+export default createReactDOMStyle

package/src/index.tsx

@@ -0,0 +1,111 @@
+import { createContext } from 'react'
+
+export {
+  AccessibilityUtil,
+  canUseDOM,
+  clickProps,
+  createDOMProps,
+  dismissKeyboard,
+  flattenStyle,
+  ImageLoader,
+  InteractionManager,
+  isWebColor,
+  LocaleProvider,
+  mergeRefs,
+  normalizeColor,
+  Platform,
+  processColor,
+  processStyle,
+  StyleSheet,
+  TextAncestorContext,
+  UIManager,
+  useEvent,
+  useHover,
+  useLayoutEffect,
+  useMergeRefs,
+  usePlatformMethods,
+} from '@hanzogui/react-native-web-internals'
+export { createElement as unstable_createElement } from './createElement/index'
+export { NativeModules } from './NativeModules/index'
+export { render } from './render/index'
+
+// animated - keep default as these are vendor files
+export { default as Animated } from './vendor/react-native/Animated/Animated'
+export { default as Easing } from './vendor/react-native/Animated/Easing'
+
+// react-native - keep default as these are vendor files
+export { default as NativeEventEmitter } from './vendor/react-native/EventEmitter/NativeEventEmitter'
+
+// APIs
+export { AccessibilityInfo } from './AccessibilityInfo/index'
+export { Alert } from './Alert/index'
+export { Appearance } from './Appearance/index'
+export { AppRegistry } from './AppRegistry/index'
+export { AppState } from './AppState/index'
+export { BackHandler } from './BackHandler/index'
+export { Clipboard } from './Clipboard/index'
+export { DeviceEmitter, DeviceEmitter as DeviceEventEmitter } from './DeviceEmitter'
+export { DeviceInfo } from './DeviceInfo/index'
+export { Dimensions } from './Dimensions/index'
+export { I18nManager } from './I18nManager/index'
+export { Keyboard } from './Keyboard/index'
+
+export { Linking } from './Linking/index'
+export { PanResponder } from './PanResponder/index'
+export { PixelRatio } from './PixelRatio/index'
+export { Share } from './Share/index'
+export { Vibration } from './Vibration/index'
+
+// implemented components
+export { FlatList } from './FlatList'
+export { SectionList } from './SectionList'
+export { VirtualizedList } from './VirtualizedList'
+export { TouchableNativeFeedback } from './TouchableNativeFeedback'
+
+// unimplemented
+export {
+  UnimplementedView as DrawerLayoutAndroid,
+  UnimplementedView as Switch,
+  UnimplementedView as TouchableHighlight,
+} from './UnimplementedView'
+
+export { TouchableOpacity as Touchable, TouchableOpacity } from './TouchableOpacity'
+export { TouchableWithoutFeedback } from './TouchableWithoutFeedback'
+
+// components
+export { ActivityIndicator } from './ActivityIndicator/index'
+export { Image } from './Image/index'
+export { ImageBackground } from './ImageBackground/index'
+export { KeyboardAvoidingView } from './KeyboardAvoidingView/index'
+export { LogBox } from './LogBox/index'
+export { Modal } from './Modal/index'
+export { Pressable } from './Pressable/index'
+export { RefreshControl } from './RefreshControl/index'
+export { SafeAreaView } from './SafeAreaView/index'
+export { ScrollView } from './ScrollView/index'
+export type { ScrollViewRef, ScrollViewMethods } from './ScrollView/index'
+export { StatusBar } from './StatusBar/index'
+export { Text } from './Text/index'
+export { TextInput } from './TextInput/index'
+export { View } from './View/index'
+
+// hooks
+export { useColorScheme } from './useColorScheme/index'
+export { useLocaleContext } from './useLocaleContext/index'
+export { useWindowDimensions } from './useWindowDimensions/index'
+
+export function requireNativeComponent(name: string) {
+  return function FakeComponent() {
+    return null
+  }
+}
+
+export const findNodeHandle = (component: any) => {
+  throw new Error('not supported - use ref instead')
+}
+
+// compat with rn:
+
+export { unstable_batchedUpdates } from 'react-dom'
+
+export const RootTagContext = createContext(null)

package/src/modules/requestIdleCallback.ts

@@ -0,0 +1,32 @@
+/**
+ * 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.
+ */
+
+const _requestIdleCallback = function (cb: Function, options?: any) {
+  return setTimeout(() => {
+    const start = Date.now()
+    cb({
+      didTimeout: false,
+      timeRemaining() {
+        return Math.max(0, 50 - (Date.now() - start))
+      },
+    })
+  }, 1)
+}
+
+const _cancelIdleCallback = function (id: any) {
+  clearTimeout(id)
+}
+
+const isSupported =
+  typeof window !== 'undefined' && typeof window.requestIdleCallback !== 'undefined'
+
+export const requestIdleCallback: (cb: any, options?: any) => any = isSupported
+  ? window.requestIdleCallback
+  : _requestIdleCallback
+export const cancelIdleCallback: (id: any) => void = isSupported
+  ? window.cancelIdleCallback
+  : _cancelIdleCallback

package/src/preprocess.ts

@@ -0,0 +1,7 @@
+export {
+  preprocess,
+  processStyle,
+  createBoxShadowValue,
+  createTextShadowValue,
+  createTransformValue,
+} from '@hanzogui/react-native-web-internals'

package/src/render/index.tsx

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ *
+ * @noflow
+ */
+
+export function hydrate(element, root) {}
+
+export function render(element, root) {}
+
+export function hydrateLegacy(element, root, callback) {}
+
+export function renderLegacy(element, root, callback) {}

package/src/styleTypes.ts

@@ -0,0 +1,321 @@
+/**
+ * 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 type { ColorValue, DimensionValue } from './types'
+
+type NumberOrString = number | string
+
+/**
+ * Animations and transitions
+ */
+
+type AnimationDirection = 'alternate' | 'alternate-reverse' | 'normal' | 'reverse'
+
+type AnimationFillMode = 'none' | 'forwards' | 'backwards' | 'both'
+type AnimationIterationCount = number | 'infinite'
+type AnimationKeyframes = string | object
+type AnimationPlayState = 'paused' | 'running'
+
+export type AnimationStyles = {
+  animationDelay?: string | Array<string> | null
+  animationDirection?: AnimationDirection | Array<AnimationDirection> | null
+  animationDuration?: string | Array<string> | null
+  animationFillMode?: AnimationFillMode | Array<AnimationFillMode> | null
+  animationIterationCount?:
+    | AnimationIterationCount
+    | Array<AnimationIterationCount>
+    | null
+  animationKeyframes?: AnimationKeyframes | Array<AnimationKeyframes> | null
+  animationPlayState?: AnimationPlayState | Array<AnimationPlayState> | null
+  animationTimingFunction?: string | Array<string> | null
+  transitionDelay?: string | Array<string> | null
+  transitionDuration?: string | Array<string> | null
+  transitionProperty?: string | Array<string> | null
+  transitionTimingFunction?: string | Array<string> | null
+}
+
+/**
+ * Border
+ */
+
+type BorderRadiusValue = number | string
+
+type BorderStyleValue = 'solid' | 'dotted' | 'dashed'
+
+export type BorderStyles = {
+  borderColor?: ColorValue | null
+  borderBottomColor?: ColorValue | null
+  borderEndColor?: ColorValue | null
+  borderLeftColor?: ColorValue | null
+  borderRightColor?: ColorValue | null
+  borderStartColor?: ColorValue | null
+  borderTopColor?: ColorValue | null
+  borderRadius?: BorderRadiusValue | null
+  borderBottomEndRadius?: BorderRadiusValue | null
+  borderBottomLeftRadius?: BorderRadiusValue | null
+  borderBottomRightRadius?: BorderRadiusValue | null
+  borderBottomStartRadius?: BorderRadiusValue | null
+  borderTopEndRadius?: BorderRadiusValue | null
+  borderTopLeftRadius?: BorderRadiusValue | null
+  borderTopRightRadius?: BorderRadiusValue | null
+  borderTopStartRadius?: BorderRadiusValue | null
+  borderStyle?: BorderStyleValue | null
+  borderBottomStyle?: BorderStyleValue | null
+  borderEndStyle?: BorderStyleValue | null
+  borderLeftStyle?: BorderStyleValue | null
+  borderRightStyle?: BorderStyleValue | null
+  borderStartStyle?: BorderStyleValue | null
+  borderTopStyle?: BorderStyleValue | null
+}
+
+/**
+ * Interactions
+ */
+
+type CursorValue =
+  | 'alias'
+  | 'all-scroll'
+  | 'auto'
+  | 'cell'
+  | 'context-menu'
+  | 'copy'
+  | 'crosshair'
+  | 'default'
+  | 'grab'
+  | 'grabbing'
+  | 'help'
+  | 'pointer'
+  | 'progress'
+  | 'wait'
+  | 'text'
+  | 'vertical-text'
+  | 'move'
+  | 'none'
+  | 'no-drop'
+  | 'not-allowed'
+  | 'zoom-in' // resize
+  | 'zoom-out'
+  | 'col-resize'
+  | 'e-resize'
+  | 'ew-resize'
+  | 'n-resize'
+  | 'ne-resize'
+  | 'ns-resize'
+  | 'nw-resize'
+  | 'row-resize'
+  | 's-resize'
+  | 'se-resize'
+  | 'sw-resize'
+  | 'w-resize'
+  | 'nesw-resize'
+  | 'nwse-resize'
+
+type TouchActionValue =
+  | 'auto'
+  | 'inherit'
+  | 'manipulation'
+  | 'none'
+  | 'pan-down'
+  | 'pan-left'
+  | 'pan-right'
+  | 'pan-up'
+  | 'pan-x'
+  | 'pan-y'
+  | 'pinch-zoom'
+type UserSelect = 'all' | 'auto' | 'contain' | 'none' | 'text'
+
+export type InteractionStyles = {
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#Formal_syntax
+  cursor?: CursorValue | null
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Formal_syntax
+  touchAction?: TouchActionValue | null
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#Formal_syntax_2
+  userSelect?: UserSelect | null
+  willChange?: string | null
+}
+
+/**
+ * Layout
+ */
+
+type OverflowValue = 'auto' | 'hidden' | 'scroll' | 'visible'
+
+type VisiblilityValue = 'hidden' | 'visible'
+
+export type LayoutStyles = {
+  alignContent?:
+    | 'center'
+    | 'flex-end'
+    | 'flex-start'
+    | 'space-around'
+    | 'space-between'
+    | 'stretch'
+  alignItems?: 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch' | null
+  alignSelf?:
+    | 'auto'
+    | 'baseline'
+    | 'center'
+    | 'flex-end'
+    | 'flex-start'
+    | 'stretch'
+    | null
+  aspectRatio?: number | null
+  backfaceVisibility?: VisiblilityValue | null
+  borderWidth?: DimensionValue | null
+  borderBottomWidth?: DimensionValue | null
+  borderEndWidth?: DimensionValue | null
+  borderLeftWidth?: DimensionValue | null
+  borderRightWidth?: DimensionValue | null
+  borderStartWidth?: DimensionValue | null
+  borderTopWidth?: DimensionValue | null
+  bottom?: DimensionValue | null
+  boxSizing?: 'border-box' | 'content-box' | 'padding-box' | null
+  direction?: 'inherit' | 'ltr' | 'rtl' | null
+  display?: string | null
+  end?: DimensionValue | null
+  flex?: number | null
+  flexBasis?: DimensionValue | null
+  flexDirection?: 'column' | 'column-reverse' | 'row' | 'row-reverse' | null
+  flexGrow?: number | null
+  flexShrink?: number | null
+  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse' | null
+  height?: DimensionValue | null
+  justifyContent?:
+    | 'center'
+    | 'flex-end'
+    | 'flex-start'
+    | 'space-around'
+    | 'space-between'
+    | 'space-evenly'
+    | null
+  left?: DimensionValue | null
+  margin?: DimensionValue | null
+  marginBottom?: DimensionValue | null
+  marginHorizontal?: DimensionValue | null
+  marginEnd?: DimensionValue | null
+  marginLeft?: DimensionValue | null
+  marginRight?: DimensionValue | null
+  marginStart?: DimensionValue | null
+  marginTop?: DimensionValue | null
+  marginVertical?: DimensionValue | null
+  maxHeight?: DimensionValue | null
+  maxWidth?: DimensionValue | null
+  minHeight?: DimensionValue | null
+  minWidth?: DimensionValue | null
+  order?: number | null
+  overflow?: OverflowValue | null
+  overflowX?: OverflowValue | null
+  overflowY?: OverflowValue | null
+  padding?: DimensionValue | null
+  paddingBottom?: DimensionValue | null
+  paddingHorizontal?: DimensionValue | null
+  paddingEnd?: DimensionValue | null
+  paddingLeft?: DimensionValue | null
+  paddingRight?: DimensionValue | null
+  paddingStart?: DimensionValue | null
+  paddingTop?: DimensionValue | null
+  paddingVertical?: DimensionValue | null
+  position?: 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky' | null
+  right?: DimensionValue | null
+  start?: DimensionValue | null
+  top?: DimensionValue | null
+  visibility?: VisiblilityValue | null
+  width?: DimensionValue | null
+  zIndex?: number | null
+  /**
+   * @platform web
+   */
+  gridAutoColumns?: string | null
+  gridAutoFlow?: string | null
+  gridAutoRows?: string | null
+  gridColumnEnd?: string | null
+  gridColumnGap?: string | null
+  gridColumnStart?: string | null
+  gridRowEnd?: string | null
+  gridRowGap?: string | null
+  gridRowStart?: string | null
+  gridTemplateColumns?: string | null
+  gridTemplateRows?: string | null
+  gridTemplateAreas?: string | null
+}
+
+/**
+ * Shadows
+ */
+
+export type ShadowStyles = {
+  shadowColor?: ColorValue | null
+  shadowOffset?: {
+    width?: DimensionValue
+    height?: DimensionValue
+  }
+  shadowOpacity?: number | null
+  shadowRadius?: DimensionValue | null
+}
+
+/**
+ * Transforms
+ */
+
+export type TransformStyles = {
+  perspective?: NumberOrString | null
+  perspectiveOrigin?: string | null
+  transform?: Array<
+    | {
+        readonly perspective: NumberOrString
+      }
+    | {
+        readonly rotate: string
+      }
+    | {
+        readonly rotateX: string
+      }
+    | {
+        readonly rotateY: string
+      }
+    | {
+        readonly rotateZ: string
+      }
+    | {
+        readonly scale: number
+      }
+    | {
+        readonly scaleX: number
+      }
+    | {
+        readonly scaleY: number
+      }
+    | {
+        readonly scaleZ: number
+      }
+    | {
+        readonly scale3d: string
+      }
+    | {
+        readonly skewX: string
+      }
+    | {
+        readonly skewY: string
+      }
+    | {
+        readonly translateX: NumberOrString
+      }
+    | {
+        readonly translateY: NumberOrString
+      }
+    | {
+        readonly translateZ: NumberOrString
+      }
+    | {
+        readonly translate3d: string
+      }
+  >
+  transformOrigin?: string | null
+  transformStyle?: 'flat' | 'preserve-3d' | null
+}

package/src/types.ts

@@ -0,0 +1,77 @@
+/**
+ * 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 type ColorValue = null | string
+
+export type DimensionValue = null | number | string
+
+export type EdgeInsetsValue = {
+  top: number
+  left: number
+  right: number
+  bottom: number
+}
+
+export type GenericStyleProp<T> =
+  | null
+  | void
+  | T
+  | false
+  | ''
+  | ReadonlyArray<GenericStyleProp<T>>
+
+export type LayoutValue = {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export type LayoutEvent = {
+  nativeEvent: {
+    layout: LayoutValue
+    target: any
+  }
+  timeStamp: number
+}
+
+export type PointValue = {
+  x: number
+  y: number
+}
+
+type LayoutCallback = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  left: number,
+  top: number
+) => void
+
+type MeasureInWindowCallback = (
+  left: number,
+  top: number,
+  width: number,
+  height: number
+) => void
+
+// Mixin to HTMLElement that represents additions from the `usePlatformMethods` hook
+export interface PlatformMethods {
+  blur: () => void
+  focus: () => void
+  measure: (callback: LayoutCallback) => void
+  measureInWindow: (callback: MeasureInWindowCallback) => void
+  measureLayout: (
+    relativeToNativeNode: {},
+    onSuccess: LayoutCallback,
+    onFail: () => void
+  ) => void
+  setNativeProps: (nativeProps: {}) => void
+}

package/src/useColorScheme/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * 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 type { ColorSchemeName } from '../Appearance/index'
+import { Appearance } from '../Appearance/index'
+
+export function useColorScheme(): ColorSchemeName {
+  const [colorScheme, setColorScheme] = React.useState(Appearance.getColorScheme())
+
+  React.useEffect(() => {
+    function listener(appearance) {
+      setColorScheme(appearance.colorScheme)
+    }
+    const { remove } = Appearance.addChangeListener(listener)
+    return remove
+  })
+
+  return colorScheme
+}

package/src/useLocaleContext/index.tsx

@@ -0,0 +1,10 @@
+/**
+ * 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 strict
+ */
+
+export { useLocaleContext } from '@hanzogui/react-native-web-internals'