@hanzogui/react-native-web-internals 2.0.0

package/src/StyleSheet/dom/createOrderedCSSStyleSheet.tsx

@@ -0,0 +1,195 @@
+// @ts-nocheck
+/**
+ * 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-local
+ */
+
+type Groups = {
+  [K in number]: {
+    start: number | null
+    rules: Array<string>
+  }
+}
+
+type Selectors = {
+  [K in string]: boolean
+}
+
+export type OrderedCSSStyleSheet = {
+  getTextContent: () => string
+  insert: (cssText: string, groupValue: number) => void
+}
+
+const slice = Array.prototype.slice
+
+/**
+ * Order-based insertion of CSS.
+ *
+ * Each rule is associated with a numerically defined group.
+ * Groups are ordered within the style sheet according to their number, with the
+ * lowest first.
+ *
+ * Groups are implemented using marker rules. The selector of the first rule of
+ * each group is used only to encode the group number for hydration. An
+ * alternative implementation could rely on CSSMediaRule, allowing groups to be
+ * treated as a sub-sheet, but the Edge implementation of CSSMediaRule is
+ * broken.
+ * https://developer.mozilla.org/en-US/docs/Web/API/CSSMediaRule
+ * https://gist.github.com/necolas/aa0c37846ad6bd3b05b727b959e82674
+ */
+export function createOrderedCSSStyleSheet(
+  sheet: CSSStyleSheet | null
+): OrderedCSSStyleSheet {
+  const groups: Groups = {}
+  const selectors: Selectors = {}
+
+  /**
+   * Hydrate approximate record from any existing rules in the sheet.
+   */
+  if (sheet != null) {
+    let group
+    slice.call(sheet.cssRules).forEach((cssRule, i) => {
+      const cssText = cssRule.cssText
+      // Create record of existing selectors and rules
+      if (cssText.indexOf('stylesheet-group') > -1) {
+        group = decodeGroupRule(cssRule)
+        groups[group] = { start: i, rules: [cssText] }
+      } else {
+        const selectorText = getSelectorText(cssText)
+        if (selectorText != null) {
+          selectors[selectorText] = true
+          groups[group].rules.push(cssText)
+        }
+      }
+    })
+  }
+
+  function sheetInsert(sheet, group, text) {
+    const orderedGroups = getOrderedGroups(groups)
+    const groupIndex = orderedGroups.indexOf(group)
+    const nextGroupIndex = groupIndex + 1
+    const nextGroup = orderedGroups[nextGroupIndex]
+    // Insert rule before the next group, or at the end of the stylesheet
+    const position =
+      nextGroup != null && groups[nextGroup].start != null
+        ? groups[nextGroup].start
+        : sheet.cssRules.length
+    const isInserted = insertRuleAt(sheet, text, position)
+
+    if (isInserted) {
+      // Set the starting index of the new group
+      if (groups[group].start == null) {
+        groups[group].start = position
+      }
+      // Increment the starting index of all subsequent groups
+      for (let i = nextGroupIndex; i < orderedGroups.length; i += 1) {
+        const groupNumber = orderedGroups[i]
+        const previousStart = groups[groupNumber].start || 0
+        groups[groupNumber].start = previousStart + 1
+      }
+    }
+
+    return isInserted
+  }
+
+  const OrderedCSSStyleSheet = {
+    /**
+     * The textContent of the style sheet.
+     */
+    getTextContent(): string {
+      return getOrderedGroups(groups)
+        .map((group) => {
+          const rules = groups[group].rules
+          // Sorting provides deterministic order of styles in group for
+          // build-time extraction of the style sheet.
+          const marker = rules.shift()
+          rules.sort()
+          rules.unshift(marker)
+          return rules.join('\n')
+        })
+        .join('\n')
+    },
+
+    /**
+     * Insert a rule into the style sheet
+     */
+    insert(cssText: string, groupValue: number) {
+      const group = Number(groupValue)
+
+      // Create a new group.
+      if (groups[group] == null) {
+        const markerRule = encodeGroupRule(group)
+        // Create the internal record.
+        groups[group] = { start: null, rules: [markerRule] }
+        // Update CSSOM.
+        if (sheet != null) {
+          sheetInsert(sheet, group, markerRule)
+        }
+      }
+
+      // selectorText is more reliable than cssText for insertion checks. The
+      // browser excludes vendor-prefixed properties and rewrites certain values
+      // making cssText more likely to be different from what was inserted.
+      const selectorText = getSelectorText(cssText)
+      if (selectorText != null && selectors[selectorText] == null) {
+        // Update the internal records.
+        selectors[selectorText] = true
+        groups[group].rules.push(cssText)
+        // Update CSSOM.
+        if (sheet != null) {
+          const isInserted = sheetInsert(sheet, group, cssText)
+          if (!isInserted) {
+            // Revert internal record change if a rule was rejected (e.g.,
+            // unrecognized pseudo-selector)
+            groups[group].rules.pop()
+          }
+        }
+      }
+    },
+  }
+
+  return OrderedCSSStyleSheet
+}
+
+/**
+ * Helper functions
+ */
+
+function encodeGroupRule(group) {
+  return `[stylesheet-group="${group}"]{}`
+}
+
+const groupPattern = /["']/g
+function decodeGroupRule(cssRule) {
+  return Number(cssRule.selectorText.split(groupPattern)[1])
+}
+
+function getOrderedGroups(obj: {
+  [K in number]: any
+}) {
+  return Object.keys(obj)
+    .map(Number)
+    .sort((a, b) => (a > b ? 1 : -1))
+}
+
+const selectorPattern = /\s*([,])\s*/g
+function getSelectorText(cssText) {
+  const selector = cssText.split('{')[0].trim()
+  return selector !== '' ? selector.replace(selectorPattern, '$1') : null
+}
+
+function insertRuleAt(root, cssText: string, position: number): boolean {
+  try {
+    // @ts-ignore : Flow is missing CSSOM types needed to type 'root'.
+    root.insertRule(cssText, position)
+    return true
+  } catch (e) {
+    // JSDOM doesn't support `CSSSMediaRule#insertRule`.
+    // Also ignore errors that occur from attempting to insert vendor-prefixed selectors.
+    return false
+  }
+}

package/src/StyleSheet/dom/index.tsx

@@ -0,0 +1,92 @@
+// @ts-nocheck
+/**
+ * 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-local
+ */
+
+import { canUseDOM } from '../../modules/canUseDOM'
+import { createCSSStyleSheet } from './createCSSStyleSheet'
+import type { OrderedCSSStyleSheet } from './createOrderedCSSStyleSheet'
+import { createOrderedCSSStyleSheet } from './createOrderedCSSStyleSheet'
+
+type Sheet = {
+  id: string
+} & OrderedCSSStyleSheet
+
+const defaultId = 'react-native-stylesheet'
+const roots = new WeakMap<Node, number>()
+const sheets = []
+
+const initialRules = [
+  // minimal top-level reset
+  'html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}',
+  'body{margin:0;}',
+  // minimal form pseudo-element reset
+  'button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}',
+  'input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}',
+]
+
+export function createSheet(root?: HTMLElement, id = defaultId): Sheet {
+  let sheet
+
+  function createSheet() {
+    if (sheet) return
+
+    if (canUseDOM) {
+      const rootNode: Node = root != null ? root.getRootNode() : document
+      // Create the initial style sheet
+      if (sheets.length === 0) {
+        sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(id))
+        initialRules.forEach((rule) => {
+          sheet.insert(rule, 0)
+        })
+        roots.set(rootNode, sheets.length)
+        sheets.push(sheet)
+      } else {
+        const index = roots.get(rootNode)
+        if (index == null) {
+          const initialSheet = sheets[0]
+          // If we're creating a new sheet, populate it with existing styles
+          const textContent = initialSheet != null ? initialSheet.getTextContent() : ''
+          // Cast rootNode to 'any' because Flow types for getRootNode are wrong
+          sheet = createOrderedCSSStyleSheet(
+            createCSSStyleSheet(id, rootNode as any, textContent)
+          )
+          roots.set(rootNode, sheets.length)
+          sheets.push(sheet)
+        } else {
+          sheet = sheets[index]
+        }
+      }
+    } else {
+      // Create the initial style sheet
+      if (sheets.length === 0) {
+        sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(id))
+        initialRules.forEach((rule) => {
+          sheet.insert(rule, 0)
+        })
+        sheets.push(sheet)
+      } else {
+        sheet = sheets[0]
+      }
+    }
+  }
+
+  return {
+    getTextContent() {
+      createSheet()
+      return sheet.getTextContent()
+    },
+    id,
+    insert(cssText: string, groupValue: number) {
+      createSheet()
+      sheets.forEach((s) => {
+        s.insert(cssText, groupValue)
+      })
+    },
+  }
+}

package/src/StyleSheet/index.tsx

@@ -0,0 +1,99 @@
+// @ts-nocheck
+/**
+ * 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
+ */
+
+const staticStyleMap: WeakMap<object, object> = new WeakMap()
+
+function insertRules(compiledOrderedRules) {}
+
+function compileAndInsertAtomic(style) {}
+
+function compileAndInsertReset(style, key) {}
+
+/* ----- API ----- */
+
+const absoluteFillObject = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+}
+
+const absoluteFill = absoluteFillObject as any
+
+/**
+ * create
+ */
+function create(styles) {
+  return styles
+}
+
+/**
+ * compose
+ */
+function compose(style1: any, style2: any): any {
+  return flatten(style1, style2)
+}
+
+/**
+ * flatten
+ */
+export function flatten(...styles: any): { [key: string]: any } {
+  return styles
+    .flat()
+    .flat()
+    .flat()
+    .flat()
+    .reduce((acc, cur) => {
+      if (cur) {
+        Object.assign(acc, cur)
+      }
+      return acc
+    }, {})
+}
+
+/**
+ * getSheet
+ */
+function getSheet(): { id: string; textContent: string } {
+  return {
+    id: '',
+    textContent: sheet.getTextContent(),
+  }
+}
+
+/**
+ * resolve
+ */
+type StyleProps = [string, { [key: string]: any } | null]
+type Options = { writingDirection: 'ltr' | 'rtl' }
+
+export function StyleSheet(styles: any, options?: Options): StyleProps {}
+
+StyleSheet.absoluteFill = absoluteFill
+StyleSheet.absoluteFillObject = absoluteFillObject
+StyleSheet.create = create
+StyleSheet.compose = compose
+StyleSheet.flatten = flatten
+StyleSheet.getSheet = getSheet
+// `hairlineWidth` is not implemented using screen density as browsers may
+// round sub-pixel values down to `0`, causing the line not to be rendered.
+StyleSheet.hairlineWidth = 1
+
+export type IStyleSheet = {
+  (styles: any, options?: Options): StyleProps
+  absoluteFill: object
+  absoluteFillObject: object
+  create: typeof create
+  compose: typeof compose
+  flatten: typeof flatten
+  getSheet: typeof getSheet
+  hairlineWidth: number
+}

package/src/StyleSheet/preprocess.tsx

@@ -0,0 +1,119 @@
+// @ts-nocheck
+/**
+ * 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 { normalizeColor } from './compiler/normalizeColor'
+import { normalizeValueWithProperty } from './compiler/normalizeValueWithProperty'
+
+const emptyObject = {}
+
+/**
+ * Shadows
+ */
+
+const defaultOffset = { height: 0, width: 0 }
+
+export const createBoxShadowValue = (style: object): void | string => {
+  const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style
+  const { height, width } = shadowOffset || defaultOffset
+  const offsetX = normalizeValueWithProperty(width)
+  const offsetY = normalizeValueWithProperty(height)
+  const blurRadius = normalizeValueWithProperty(shadowRadius || 0)
+  const color = normalizeColor(shadowColor || 'black', shadowOpacity)
+  if (color != null && offsetX != null && offsetY != null && blurRadius != null) {
+    return `${offsetX} ${offsetY} ${blurRadius} ${color}`
+  }
+}
+
+export const createTextShadowValue = (style: object): void | string => {
+  const { textShadowColor, textShadowOffset, textShadowRadius } = style
+  const { height, width } = textShadowOffset || defaultOffset
+  const radius = textShadowRadius || 0
+  const offsetX = normalizeValueWithProperty(width)
+  const offsetY = normalizeValueWithProperty(height)
+  const blurRadius = normalizeValueWithProperty(radius)
+  const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')
+
+  if (
+    color &&
+    (height !== 0 || width !== 0 || radius !== 0) &&
+    offsetX != null &&
+    offsetY != null &&
+    blurRadius != null
+  ) {
+    return `${offsetX} ${offsetY} ${blurRadius} ${color}`
+  }
+}
+
+/**
+ * Preprocess styles
+ */
+export const preprocess = <
+  T extends {
+    [K in string]: any
+  },
+>(
+  originalStyle: T
+): T => {
+  const style = originalStyle || emptyObject
+  const nextStyle = {}
+
+  for (const originalProp in style) {
+    const originalValue = style[originalProp]
+    let prop = originalProp
+    let value = originalValue
+
+    if (
+      !Object.prototype.hasOwnProperty.call(style, originalProp) ||
+      originalValue == null
+    ) {
+      continue
+    }
+
+    // Convert shadow styles
+    if (
+      prop === 'shadowColor' ||
+      prop === 'shadowOffset' ||
+      prop === 'shadowOpacity' ||
+      prop === 'shadowRadius'
+    ) {
+      const boxShadowValue = createBoxShadowValue(style)
+      if (boxShadowValue != null && nextStyle.boxShadow == null) {
+        const { boxShadow } = style
+        prop = 'boxShadow'
+        value = boxShadow ? `${boxShadow}, ${boxShadowValue}` : boxShadowValue
+      } else {
+        continue
+      }
+    }
+
+    // Convert text shadow styles
+    if (
+      prop === 'textShadowColor' ||
+      prop === 'textShadowOffset' ||
+      prop === 'textShadowRadius'
+    ) {
+      const textShadowValue = createTextShadowValue(style)
+      if (textShadowValue != null && nextStyle.textShadow == null) {
+        const { textShadow } = style
+        prop = 'textShadow'
+        value = textShadow ? `${textShadow}, ${textShadowValue}` : textShadowValue
+      } else {
+        continue
+      }
+    }
+
+    nextStyle[prop] = value
+  }
+
+  // $FlowIgnore
+  return nextStyle
+}
+
+export const processStyle = preprocess

package/src/StyleSheet/validate.tsx

@@ -0,0 +1,90 @@
+/**
+ * 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
+ */
+
+const invalidShortforms = {
+  background: true,
+  borderBottom: true,
+  borderLeft: true,
+  borderRight: true,
+  borderTop: true,
+  font: true,
+  grid: true,
+  outline: true,
+  textDecoration: true,
+}
+
+const invalidMultiValueShortforms = {
+  flex: true,
+  margin: true,
+  padding: true,
+  borderColor: true,
+  borderRadius: true,
+  borderStyle: true,
+  borderWidth: true,
+  marginHorizontal: true,
+  marginVertical: true,
+  paddingHorizontal: true,
+  paddingVertical: true,
+  overflow: true,
+  overscrollBehavior: true,
+  backgroundPosition: true,
+}
+
+function error(message) {
+  console.error(message)
+}
+
+export function validate(obj: object) {
+  for (const k in obj) {
+    const prop = k.trim()
+    const value = obj[prop]
+    let isInvalid = false
+
+    if (value === null) {
+      continue
+    }
+
+    if (typeof value === 'string' && value.indexOf('!important') > -1) {
+      error(
+        `Invalid style declaration "${prop}:${value}". Values cannot include "!important"`
+      )
+      isInvalid = true
+    } else {
+      let suggestion = ''
+      if (prop === 'animation' || prop === 'animationName') {
+        suggestion = 'Did you mean "animationKeyframes"?'
+        // } else if (prop === 'boxShadow') {
+        //  suggestion = 'Did you mean "shadow{Color,Offset,Opacity,Radius}"?';
+        isInvalid = true
+      } else if (prop === 'direction') {
+        suggestion = 'Did you mean "writingDirection"?'
+        isInvalid = true
+      } else if (prop === 'verticalAlign') {
+        suggestion = 'Did you mean "textAlignVertical"?'
+        isInvalid = true
+      } else if (invalidShortforms[prop]) {
+        suggestion = 'Please use long-form properties.'
+        isInvalid = true
+      } else if (invalidMultiValueShortforms[prop]) {
+        // TODO
+        // if (typeof value === 'string' && valueParser(value).nodes.length > 1) {
+        //   suggestion = `Value is "${value}" but only single values are supported.`
+        //   isInvalid = true
+        // }
+      }
+      if (suggestion !== '') {
+        error(`Invalid style property of "${prop}". ${suggestion}`)
+      }
+    }
+
+    if (isInvalid) {
+      delete obj[k]
+    }
+  }
+}

package/src/TextAncestorContext.tsx

@@ -0,0 +1,13 @@
+/**
+ * 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 strict
+ */
+
+import type { Context } from 'react'
+import { createContext } from 'react'
+
+export const TextAncestorContext = createContext(false) as Context<boolean>

package/src/colorProps.tsx

@@ -0,0 +1,12 @@
+export const colorProps = {
+  backgroundColor: true,
+  borderColor: true,
+  borderTopColor: true,
+  borderRightColor: true,
+  borderBottomColor: true,
+  borderLeftColor: true,
+  color: true,
+  shadowColor: true,
+  textDecorationColor: true,
+  textShadowColor: true,
+}

package/src/index.tsx

@@ -0,0 +1,58 @@
+export type {
+  ColorValue,
+  DimensionValue,
+  EdgeInsetsValue,
+  GenericStyleProp,
+  LayoutEvent,
+  LayoutValue,
+  PlatformMethods,
+  PointValue,
+} from './types'
+export * from './modules/AssetRegistry/index'
+export * from './modules/forwardedProps/index'
+export * from './modules/mergeRefs/index'
+export * from './modules/modality/index'
+export * from './modules/useLocale/index'
+export { usePlatformMethods } from './modules/usePlatformMethods/index'
+export { TextAncestorContext } from './TextAncestorContext'
+
+export * from '@hanzogui/react-native-use-pressable'
+export * from '@hanzogui/react-native-use-responder-events'
+
+export { colorProps } from './colorProps'
+export { AccessibilityUtil } from './modules/AccessibilityUtil/index'
+export { canUseDOM } from './modules/canUseDOM'
+export { createDOMProps } from './modules/createDOMProps/index'
+export { stylesFromProps } from './modules/createDOMProps/index'
+export {
+  createReactDOMStyle,
+  createTransformValue,
+} from './StyleSheet/compiler/createReactDOMStyle'
+export { createEventHandle } from './modules/createEventHandle/index'
+export { dismissKeyboard } from './modules/dismissKeyboard/index'
+export { getBoundingClientRect } from './modules/getBoundingClientRect/index'
+export { ImageLoader } from './modules/ImageLoader/index'
+export { isSelectionValid } from './modules/isSelectionValid/index'
+export { isWebColor } from './modules/isWebColor/index'
+export { multiplyStyleLengthValue } from './modules/multiplyStyleLengthValue/index'
+export { normalizeColor } from './modules/normalizeColor/index'
+export { pick } from './modules/pick/index'
+export { Platform } from './modules/Platform/index'
+export * from './StyleSheet/preprocess'
+export { flatten as flattenStyle } from './StyleSheet/index'
+export { createSheet } from './StyleSheet/dom/index'
+export { requestIdleCallback } from './modules/requestIdleCallback/index'
+export { setValueForStyles } from './modules/setValueForStyles/index'
+export { TextInputState } from './modules/TextInputState/index'
+export { UIManager } from './modules/UIManager/index'
+export { unitlessNumbers } from './modules/unitlessNumbers/index'
+export { useElementLayout } from './modules/useElementLayout/index'
+export { useEvent } from './modules/useEvent/index'
+export { useHover } from './modules/useHover/index'
+export { useLayoutEffectImpl as useLayoutEffect } from './modules/useLayoutEffect/index'
+export { useStable } from './modules/useStable/index'
+export { InteractionManager } from './modules/InteractionManager'
+export * from './modules/invariant'
+export { processColor } from './modules/processColor/index'
+export { StyleSheet } from './StyleSheet/index'
+export { useMergeRefs } from './modules/useMergeRefs/index'