@hanzogui/react-native-web-internals 2.0.0

package/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.tsx

@@ -0,0 +1,44 @@
+/**
+ * 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 propsToAccessibilityComponent from '../propsToAccessibilityComponent'
+
+describe('modules/AccessibilityUtil/propsToAccessibilityComponent', () => {
+  test('when missing accessibility props"', () => {
+    expect(propsToAccessibilityComponent({})).toBeUndefined()
+  })
+
+  test('when "accessibilityRole" is "button"', () => {
+    expect(propsToAccessibilityComponent({ accessibilityRole: 'button' })).toBeUndefined()
+  })
+
+  test('when "accessibilityRole" is "heading"', () => {
+    expect(propsToAccessibilityComponent({ accessibilityRole: 'heading' })).toEqual('h1')
+  })
+
+  test('when "accessibilityRole" is "heading" and "aria-level" is set', () => {
+    expect(
+      propsToAccessibilityComponent({
+        accessibilityRole: 'heading',
+        'aria-level': 3,
+      })
+    ).toEqual('h3')
+  })
+
+  test('when "accessibilityRole" is "heading" and "accessibilityLevel" is set', () => {
+    expect(
+      propsToAccessibilityComponent({
+        accessibilityRole: 'heading',
+        accessibilityLevel: 3,
+      })
+    ).toEqual('h3')
+  })
+
+  test('when "accessibilityRole" is "label"', () => {
+    expect(propsToAccessibilityComponent({ accessibilityRole: 'label' })).toEqual('label')
+  })
+})

package/src/modules/AccessibilityUtil/__tests__/propsToAriaRole-test.tsx

@@ -0,0 +1,25 @@
+/**
+ * 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 propsToAriaRole from '../propsToAriaRole'
+
+describe('modules/AccessibilityUtil/propsToAriaRole', () => {
+  test('when missing accessibility props', () => {
+    expect(propsToAriaRole({})).toBeUndefined()
+  })
+
+  test('when "accessibilityRole" is defined', () => {
+    expect(propsToAriaRole({ accessibilityRole: 'banner' })).toEqual('banner')
+  })
+
+  test('when "accessibilityRole" is a native-only value', () => {
+    expect(propsToAriaRole({ accessibilityRole: 'none' })).toEqual('presentation')
+    expect(propsToAriaRole({ accessibilityRole: 'imagebutton' })).toEqual(undefined)
+    // not really native-only, but used to allow Web to render <label> around TextInput
+    expect(propsToAriaRole({ accessibilityRole: 'label' })).toEqual(undefined)
+  })
+})

package/src/modules/AccessibilityUtil/index.tsx

@@ -0,0 +1,18 @@
+/**
+ * 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 { isDisabled } from './isDisabled'
+import { propsToAccessibilityComponent } from './propsToAccessibilityComponent'
+import { propsToAriaRole } from './propsToAriaRole'
+
+export const AccessibilityUtil = {
+  isDisabled,
+  propsToAccessibilityComponent,
+  propsToAriaRole,
+}

package/src/modules/AccessibilityUtil/isDisabled.tsx

@@ -0,0 +1,13 @@
+/**
+ * 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 const isDisabled = (props: Record<string, any>): boolean =>
+  props.disabled ||
+  (Array.isArray(props.accessibilityStates) &&
+    props.accessibilityStates.indexOf('disabled') > -1)

package/src/modules/AccessibilityUtil/propsToAccessibilityComponent.tsx

@@ -0,0 +1,54 @@
+// @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 { propsToAriaRole } from './propsToAriaRole'
+
+const roleComponents = {
+  article: 'article',
+  banner: 'header',
+  blockquote: 'blockquote',
+  code: 'code',
+  complementary: 'aside',
+  contentinfo: 'footer',
+  deletion: 'del',
+  emphasis: 'em',
+  figure: 'figure',
+  insertion: 'ins',
+  form: 'form',
+  list: 'ul',
+  listitem: 'li',
+  main: 'main',
+  navigation: 'nav',
+  region: 'section',
+  strong: 'strong',
+}
+
+const emptyObject = {}
+
+export const propsToAccessibilityComponent = (
+  props: object = emptyObject
+): void | string => {
+  // special-case for "label" role which doesn't map to an ARIA role
+  if (props.accessibilityRole === 'label') {
+    return 'label'
+  }
+
+  const role = propsToAriaRole(props)
+  if (role) {
+    if (role === 'heading') {
+      const level = props.accessibilityLevel || props['aria-level']
+      if (level != null) {
+        return `h${level}`
+      }
+      return 'h1'
+    }
+    return roleComponents[role]
+  }
+}

package/src/modules/AccessibilityUtil/propsToAriaRole.tsx

@@ -0,0 +1,37 @@
+/**
+ * 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 accessibilityRoleToWebRole = {
+  adjustable: 'slider',
+  button: 'button',
+  header: 'heading',
+  image: 'img',
+  imagebutton: null,
+  keyboardkey: null,
+  label: null,
+  link: 'link',
+  none: 'presentation',
+  search: 'search',
+  summary: 'region',
+  text: null,
+}
+
+export const propsToAriaRole = ({
+  accessibilityRole,
+}: {
+  accessibilityRole?: string
+}): string | void => {
+  if (accessibilityRole) {
+    const inferredRole = accessibilityRoleToWebRole[accessibilityRole]
+    if (inferredRole !== null) {
+      // ignore roles that don't map to web
+      return inferredRole || accessibilityRole
+    }
+  }
+}

package/src/modules/AssetRegistry/index.tsx

@@ -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.
+ *
+ * @flow
+ */
+
+export type PackagerAsset = {
+  __packager_asset: boolean
+  fileSystemLocation: string
+  httpServerLocation: string
+  width: number | null
+  height: number | null
+  scales: Array<number>
+  hash: string
+  name: string
+  type: string
+}
+
+const assets: Array<PackagerAsset> = []
+
+export function registerAsset(asset: PackagerAsset): number {
+  // `push` returns new array length, so the first asset will
+  // get id 1 (not 0) to make the value truthy
+  return assets.push(asset)
+}
+
+export function getAssetByID(assetId: number): PackagerAsset {
+  return assets[assetId - 1]
+}

package/src/modules/ImageLoader/index.tsx

@@ -0,0 +1,165 @@
+/**
+ * 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 dataUriPattern = /^data:/
+
+export class ImageUriCache {
+  static _maximumEntries = 256
+  static _entries = {}
+
+  static has(uri: string): boolean {
+    const entries = ImageUriCache._entries
+    const isDataUri = dataUriPattern.test(uri)
+    return isDataUri || Boolean(entries[uri])
+  }
+
+  static add(uri: string) {
+    const entries = ImageUriCache._entries
+    const lastUsedTimestamp = Date.now()
+    if (entries[uri]) {
+      entries[uri].lastUsedTimestamp = lastUsedTimestamp
+      entries[uri].refCount += 1
+    } else {
+      entries[uri] = {
+        lastUsedTimestamp,
+        refCount: 1,
+      }
+    }
+  }
+
+  static remove(uri: string) {
+    const entries = ImageUriCache._entries
+    if (entries[uri]) {
+      entries[uri].refCount -= 1
+    }
+    // Free up entries when the cache is "full"
+    ImageUriCache._cleanUpIfNeeded()
+  }
+
+  static _cleanUpIfNeeded() {
+    const entries = ImageUriCache._entries
+    const imageUris = Object.keys(entries)
+
+    if (imageUris.length + 1 > ImageUriCache._maximumEntries) {
+      let leastRecentlyUsedKey
+      let leastRecentlyUsedEntry
+
+      imageUris.forEach((uri) => {
+        const entry = entries[uri]
+        if (
+          (!leastRecentlyUsedEntry ||
+            entry.lastUsedTimestamp < leastRecentlyUsedEntry.lastUsedTimestamp) &&
+          entry.refCount === 0
+        ) {
+          leastRecentlyUsedKey = uri
+          leastRecentlyUsedEntry = entry
+        }
+      })
+
+      if (leastRecentlyUsedKey) {
+        delete entries[leastRecentlyUsedKey]
+      }
+    }
+  }
+}
+
+let id = 0
+const requests = {}
+
+export const ImageLoader = {
+  abort(requestId: number) {
+    let image = requests[`${requestId}`]
+    if (image) {
+      image.onerror = null
+      image.onload = null
+      image = null
+      delete requests[`${requestId}`]
+    }
+  },
+  getSize(
+    uri: string,
+    success: (width: number, height: number) => void,
+    failure: () => void
+  ) {
+    let complete = false
+    const interval = setInterval(callback, 16)
+    const requestId = ImageLoader.load(uri, callback, errorCallback)
+
+    function callback() {
+      const image = requests[`${requestId}`]
+      if (image) {
+        const { naturalHeight, naturalWidth } = image
+        if (naturalHeight && naturalWidth) {
+          success(naturalWidth, naturalHeight)
+          complete = true
+        }
+      }
+      if (complete) {
+        ImageLoader.abort(requestId)
+        clearInterval(interval)
+      }
+    }
+
+    function errorCallback() {
+      if (typeof failure === 'function') {
+        failure()
+      }
+      ImageLoader.abort(requestId)
+      clearInterval(interval)
+    }
+  },
+  has(uri: string): boolean {
+    return ImageUriCache.has(uri)
+  },
+  load(uri: string, onLoad: Function, onError: Function): number {
+    id += 1
+    const image = new window.Image()
+    // @ts-ignore
+    image.onerror = onError
+    image.onload = (e) => {
+      // avoid blocking the main thread
+      const onDecode = () => onLoad({ nativeEvent: e })
+      if (typeof image.decode === 'function') {
+        // Safari currently throws exceptions when decoding svgs.
+        // We want to catch that error and allow the load handler
+        // to be forwarded to the onLoad handler in this case
+        image.decode().then(onDecode, onDecode)
+      } else {
+        setTimeout(onDecode, 0)
+      }
+    }
+    image.src = uri
+    requests[`${id}`] = image
+    return id
+  },
+  prefetch(uri: string): Promise<void> {
+    return new Promise((resolve, reject) => {
+      ImageLoader.load(
+        uri,
+        () => {
+          // Add the uri to the cache so it can be immediately displayed when used
+          // but also immediately remove it to correctly reflect that it has no active references
+          ImageUriCache.add(uri)
+          ImageUriCache.remove(uri)
+          resolve()
+        },
+        reject
+      )
+    })
+  },
+  queryCache(uris: Array<string>): Promise<{ [uri: string]: 'disk/memory' }> {
+    const result = {}
+    uris.forEach((u) => {
+      if (ImageUriCache.has(u)) {
+        result[u] = 'disk/memory'
+      }
+    })
+    return Promise.resolve(result)
+  },
+}

package/src/modules/InteractionManager.tsx

@@ -0,0 +1,315 @@
+/**
+ * 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.
+ */
+
+import { invariant } from './invariant'
+import { requestIdleCallback } from './requestIdleCallback/index'
+
+// Simple EventEmitter implementation for internal use
+type EventMap = {
+  [K in string]: any[]
+}
+
+type EventSubscription = {
+  remove: () => void
+}
+
+class EventEmitter<TEventMap extends EventMap = EventMap> {
+  private _registry: {
+    [K in keyof TEventMap]?: Set<{
+      context: any
+      listener: (...args: TEventMap[K]) => void
+      remove: () => void
+    }>
+  } = {}
+
+  addListener<K extends keyof TEventMap>(
+    eventType: K,
+    listener: (...args: TEventMap[K]) => void,
+    context?: any
+  ): EventSubscription {
+    const registrations = this._allocate(eventType)
+    const registration = {
+      context,
+      listener,
+      remove: () => {
+        registrations.delete(registration)
+      },
+    }
+    registrations.add(registration)
+    return registration
+  }
+
+  emit<K extends keyof TEventMap>(eventType: K, ...args: TEventMap[K]): void {
+    const registrations = this._registry[eventType]
+    if (registrations != null) {
+      for (const registration of Array.from(registrations)) {
+        registration.listener.apply(registration.context, args)
+      }
+    }
+  }
+
+  private _allocate<K extends keyof TEventMap>(
+    eventType: K
+  ): Set<{
+    context: any
+    listener: (...args: TEventMap[K]) => void
+    remove: () => void
+  }> {
+    let registrations = this._registry[eventType]
+    if (registrations == null) {
+      registrations = new Set()
+      this._registry[eventType] = registrations
+    }
+    return registrations
+  }
+}
+
+// TaskQueue implementation
+type SimpleTask = {
+  name: string
+  run: () => void
+}
+
+type PromiseTask = {
+  name: string
+  gen: () => Promise<void>
+}
+
+export type Task = SimpleTask | PromiseTask | (() => void)
+
+interface QueueItem {
+  tasks: Task[]
+  popable: boolean
+}
+
+class TaskQueue {
+  private _queueStack: QueueItem[]
+  private _onMoreTasks: () => void
+
+  constructor({ onMoreTasks }: { onMoreTasks: () => void }) {
+    this._onMoreTasks = onMoreTasks
+    this._queueStack = [{ tasks: [], popable: true }]
+  }
+
+  enqueueTasks(tasks: Task[]): void {
+    tasks.forEach((task) => this._enqueue(task))
+  }
+
+  cancelTasks(tasksToCancel: Task[]): void {
+    this._queueStack = this._queueStack
+      .map((queue) => ({
+        ...queue,
+        tasks: queue.tasks.filter((task) => !tasksToCancel.includes(task)),
+      }))
+      .filter((queue, idx) => queue.tasks.length > 0 || idx === 0)
+  }
+
+  hasTasksToProcess(): boolean {
+    return this._getCurrentQueue().length > 0
+  }
+
+  processNext(): void {
+    const queue = this._getCurrentQueue()
+    if (queue.length) {
+      const task = queue.shift()
+      try {
+        if (typeof task === 'object' && task && 'gen' in task) {
+          this._genPromise(task as PromiseTask)
+        } else if (typeof task === 'object' && task && 'run' in task) {
+          ;(task as SimpleTask).run()
+        } else {
+          invariant(
+            typeof task === 'function',
+            'Expected Function, SimpleTask, or PromiseTask, but got:\n' +
+              JSON.stringify(task, null, 2)
+          )
+          ;(task as () => void)()
+        }
+      } catch (e) {
+        if (e instanceof Error) {
+          const taskName =
+            task && typeof task === 'object' && 'name' in task ? task.name : ''
+          e.message = 'TaskQueue: Error with task ' + taskName + ': ' + e.message
+        }
+        throw e
+      }
+    }
+  }
+
+  private _enqueue(task: Task): void {
+    this._getCurrentQueue().push(task)
+  }
+
+  private _getCurrentQueue(): Task[] {
+    const stackIdx = this._queueStack.length - 1
+    const queue = this._queueStack[stackIdx]
+    if (queue.popable && queue.tasks.length === 0 && stackIdx > 0) {
+      this._queueStack.pop()
+      return this._getCurrentQueue()
+    } else {
+      return queue.tasks
+    }
+  }
+
+  private _genPromise(task: PromiseTask) {
+    const length = this._queueStack.push({ tasks: [], popable: false })
+    const stackIdx = length - 1
+    const stackItem = this._queueStack[stackIdx]
+    task
+      .gen()
+      .then(() => {
+        stackItem.popable = true
+        if (this.hasTasksToProcess()) {
+          this._onMoreTasks()
+        }
+      })
+      .catch((ex) => {
+        setTimeout(() => {
+          if (ex instanceof Error) {
+            ex.message = `TaskQueue: Error resolving Promise in task ${task.name}: ${ex.message}`
+          }
+          throw ex
+        }, 0)
+      })
+  }
+}
+
+const _emitter = new EventEmitter<{
+  interactionComplete: []
+  interactionStart: []
+}>()
+
+export const InteractionManager = {
+  Events: {
+    interactionStart: 'interactionStart' as const,
+    interactionComplete: 'interactionComplete' as const,
+  },
+
+  /**
+   * Schedule a function to run after all interactions have completed.
+   */
+  runAfterInteractions(task?: Task): {
+    then: <TResult1 = void, TResult2 = never>(
+      onfulfilled?: ((value: void) => TResult1 | PromiseLike<TResult1>) | null,
+      onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null
+    ) => Promise<TResult1 | TResult2>
+    done: <TResult1 = void, TResult2 = never>(
+      onfulfilled?: ((value: void) => TResult1 | PromiseLike<TResult1>) | null,
+      onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null
+    ) => Promise<TResult1 | TResult2>
+    cancel: () => void
+  } {
+    const tasks: Array<Task> = []
+    const promise = new Promise<void>((resolve) => {
+      _scheduleUpdate()
+      if (task) {
+        tasks.push(task)
+      }
+      tasks.push({
+        run: resolve,
+        name:
+          'resolve ' +
+          ((task && typeof task === 'object' && 'name' in task && task.name) || '?'),
+      })
+      _taskQueue.enqueueTasks(tasks)
+    })
+    return {
+      then: promise.then.bind(promise),
+      done: promise.then.bind(promise),
+      cancel: () => {
+        _taskQueue.cancelTasks(tasks)
+      },
+    }
+  },
+
+  /**
+   * Notify manager that an interaction has started.
+   */
+  createInteractionHandle(): number {
+    _scheduleUpdate()
+    const handle = ++_inc
+    _addInteractionSet.add(handle)
+    return handle
+  },
+
+  /**
+   * Notify manager that an interaction has completed.
+   */
+  clearInteractionHandle(handle: number): void {
+    invariant(!!handle, 'Must provide a handle to clear.')
+    _scheduleUpdate()
+    _addInteractionSet.delete(handle)
+    _deleteInteractionSet.add(handle)
+  },
+
+  addListener: _emitter.addListener.bind(_emitter) as (
+    eventType: 'interactionStart' | 'interactionComplete',
+    listener: () => void,
+    context?: any
+  ) => EventSubscription,
+
+  /**
+   * Set deadline for task processing
+   */
+  setDeadline(deadline: number): void {
+    _deadline = deadline
+  },
+}
+
+const _interactionSet = new Set<number>()
+const _addInteractionSet = new Set<number>()
+const _deleteInteractionSet = new Set<number>()
+const _taskQueue = new TaskQueue({ onMoreTasks: _scheduleUpdate })
+let _nextUpdateHandle: number | ReturnType<typeof setTimeout> | null = null
+let _inc = 0
+let _deadline = -1
+
+/**
+ * Schedule an asynchronous update to the interaction state.
+ */
+function _scheduleUpdate(): void {
+  if (!_nextUpdateHandle) {
+    if (_deadline > 0) {
+      _nextUpdateHandle = setTimeout(_processUpdate)
+    } else {
+      _nextUpdateHandle = requestIdleCallback(_processUpdate)
+    }
+  }
+}
+
+/**
+ * Notify listeners, process queue, etc
+ */
+function _processUpdate(): void {
+  _nextUpdateHandle = null
+  const interactionCount = _interactionSet.size
+  _addInteractionSet.forEach((handle) => _interactionSet.add(handle))
+  _deleteInteractionSet.forEach((handle) => _interactionSet.delete(handle))
+  const nextInteractionCount = _interactionSet.size
+
+  if (interactionCount !== 0 && nextInteractionCount === 0) {
+    _emitter.emit('interactionComplete')
+  } else if (interactionCount === 0 && nextInteractionCount !== 0) {
+    _emitter.emit('interactionStart')
+  }
+
+  if (nextInteractionCount === 0) {
+    // It seems that we can't know the running time of the current event loop,
+    // we can only calculate the running time of the current task queue.
+    const begin = Date.now()
+    while (_taskQueue.hasTasksToProcess()) {
+      _taskQueue.processNext()
+      if (_deadline > 0 && Date.now() - begin >= _deadline) {
+        _scheduleUpdate()
+        break
+      }
+    }
+  }
+  _addInteractionSet.clear()
+  _deleteInteractionSet.clear()
+}