@hanzogui/react-native-web-lite 2.0.0

package/src/vendor/react-native/Animated/useAnimatedProps.js

@@ -0,0 +1,173 @@
+/**
+ * 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.
+ *
+ * @format
+ * @format
+ */
+
+'use strict'
+
+import { AnimatedProps } from './nodes/AnimatedProps'
+import { AnimatedEvent } from './AnimatedEvent'
+import { useRefEffect } from '../Utilities/useRefEffect'
+import { NativeAnimatedHelper } from './NativeAnimatedHelper'
+import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react'
+
+import { useLayoutEffect } from '@hanzogui/react-native-web-internals'
+
+// ReducedProps type removed
+
+function useAnimatedProps(props) {
+  const [, scheduleUpdate] = useReducer((count) => count + 1, 0)
+  const onUpdateRef = useRef(null)
+
+  // TODO: Only invalidate `node` if animated props or `style` change. In the
+  // previous implementation, we permitted `style` to override props with the
+  // same name property name as styles, so we can probably continue doing that.
+  // The ordering of other props *should* not matter.
+  const node = useMemo(
+    () => new AnimatedProps(props, () => onUpdateRef.current?.()),
+    [props]
+  )
+  useAnimatedPropsLifecycle(node)
+
+  // TODO: This "effect" does three things:
+  //
+  //   1) Call `setNativeView`.
+  //   2) Update `onUpdateRef`.
+  //   3) Update listeners for `AnimatedEvent` props.
+  //
+  // Ideally, each of these would be separat "effects" so that they are not
+  // unnecessarily re-run when irrelevant dependencies change. For example, we
+  // should be able to hoist all `AnimatedEvent` props and only do #3 if either
+  // the `AnimatedEvent` props change or `instance` changes.
+  //
+  // But there is no way to transparently compose three separate callback refs,
+  // so we just combine them all into one for now.
+  const refEffect = useCallback(
+    (instance) => {
+      // NOTE: This may be called more often than necessary (e.g. when `props`
+      // changes), but `setNativeView` already optimizes for that.
+      node.setNativeView(instance)
+
+      // NOTE: This callback is only used by the JavaScript animation driver.
+      onUpdateRef.current = () => {
+        // Schedule an update for this component to update `reducedProps`,
+        // but do not compute it immediately. If a parent also updated, we
+        // need to merge those new props in before updating.
+        scheduleUpdate()
+      }
+
+      const target = getEventTarget(instance)
+      const events = []
+
+      for (const propName in props) {
+        const propValue = props[propName]
+        if (propValue instanceof AnimatedEvent && propValue.__isNative) {
+          propValue.__attach(target, propName)
+          events.push([propName, propValue])
+        }
+      }
+
+      return () => {
+        onUpdateRef.current = null
+
+        for (const [propName, propValue] of events) {
+          propValue.__detach(target, propName)
+        }
+      }
+    },
+    [props, node]
+  )
+  const callbackRef = useRefEffect(refEffect)
+
+  return [reduceAnimatedProps(node), callbackRef]
+}
+
+function reduceAnimatedProps(node) {
+  // Force `collapsable` to be false so that the native view is not flattened.
+  // Flattened views cannot be accurately referenced by the native driver.
+  return {
+    ...node.__getValue(),
+    collapsable: false,
+  }
+}
+
+/**
+ * Manages the lifecycle of the supplied `AnimatedProps` by invoking `__attach`
+ * and `__detach`. However, this is more complicated because `AnimatedProps`
+ * uses reference counting to determine when to recursively detach its children
+ * nodes. So in order to optimize this, we avoid detaching until the next attach
+ * unless we are unmounting.
+ */
+function useAnimatedPropsLifecycle(node) {
+  const prevNodeRef = useRef(null)
+  const isUnmountingRef = useRef(false)
+
+  useEffect(() => {
+    // It is ok for multiple components to call `flushQueue` because it noops
+    // if the queue is empty. When multiple animated components are mounted at
+    // the same time. Only first component flushes the queue and the others will noop.
+    NativeAnimatedHelper.API.flushQueue()
+  })
+
+  useLayoutEffect(() => {
+    isUnmountingRef.current = false
+    return () => {
+      isUnmountingRef.current = true
+    }
+  }, [])
+
+  useLayoutEffect(() => {
+    node.__attach()
+    if (prevNodeRef.current != null) {
+      const prevNode = prevNodeRef.current
+      // TODO: Stop restoring default values (unless `reset` is called).
+      prevNode.__restoreDefaultValues()
+      prevNode.__detach()
+      prevNodeRef.current = null
+    }
+    return () => {
+      if (isUnmountingRef.current) {
+        // NOTE: Do not restore default values on unmount, see D18197735.
+        node.__detach()
+      } else {
+        prevNodeRef.current = node
+      }
+    }
+  }, [node])
+}
+
+function getEventTarget(instance) {
+  return typeof instance === 'object' && typeof instance?.getScrollableNode === 'function'
+    ? instance.getScrollableNode()
+    : instance
+}
+
+function isFabricInstance(instance) {
+  return (
+    hasFabricHandle(instance) ||
+    // Some components have a setNativeProps function but aren't a host component
+    // such as lists like FlatList and SectionList. These should also use
+    // forceUpdate in Fabric since setNativeProps doesn't exist on the underlying
+    // host component. This crazy hack is essentially special casing those lists and
+    // ScrollView itself to use forceUpdate in Fabric.
+    // If these components end up using forwardRef then these hacks can go away
+    // as instance would actually be the underlying host component and the above check
+    // would be sufficient.
+    hasFabricHandle(instance?.getNativeScrollRef?.()) ||
+    hasFabricHandle(instance?.getScrollResponder?.()?.getNativeScrollRef?.())
+  )
+}
+
+// Legacy instance assumptions.
+function hasFabricHandle(instance) {
+  // eslint-disable-next-line dot-notation
+  return instance?.['_internalInstanceHandle']?.stateNode?.canonical != null
+}
+
+export { useAnimatedProps }
+export default useAnimatedProps

package/src/vendor/react-native/Batchinator/index.js

@@ -0,0 +1,77 @@
+/**
+ * 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.
+ *
+ * @format
+ * @format
+ */
+
+'use strict'
+
+import { InteractionManager } from '@hanzogui/react-native-web-internals'
+
+/**
+ * A simple class for batching up invocations of a low-pri callback. A timeout is set to run the
+ * callback once after a delay, no matter how many times it's scheduled. Once the delay is reached,
+ * InteractionManager.runAfterInteractions is used to invoke the callback after any hi-pri
+ * interactions are done running.
+ *
+ * Make sure to cleanup with dispose().  Example:
+ *
+ *   class Widget extends React.Component {
+ *     _batchedSave: new Batchinator(() => this._saveState, 1000);
+ *     _saveSate() {
+ *       // save this.state to disk
+ *     }
+ *     componentDidUpdate() {
+ *       this._batchedSave.schedule();
+ *     }
+ *     componentWillUnmount() {
+ *       this._batchedSave.dispose();
+ *     }
+ *     ...
+ *   }
+ */
+class Batchinator {
+  _callback
+  _delay
+  _taskHandle
+  constructor(callback, delayMS) {
+    this._delay = delayMS
+    this._callback = callback
+  }
+  /*
+   * Cleanup any pending tasks.
+   *
+   * By default, if there is a pending task the callback is run immediately. Set the option abort to
+   * true to not call the callback if it was pending.
+   */
+  dispose(options = { abort: false }) {
+    if (this._taskHandle) {
+      this._taskHandle.cancel()
+      if (!options.abort) {
+        this._callback()
+      }
+      this._taskHandle = null
+    }
+  }
+  schedule() {
+    if (this._taskHandle) {
+      return
+    }
+    const timeoutHandle = setTimeout(() => {
+      this._taskHandle = InteractionManager.runAfterInteractions(() => {
+        // Note that we clear the handle before invoking the callback so that if the callback calls
+        // schedule again, it will actually schedule another task.
+        this._taskHandle = null
+        this._callback()
+      })
+    }, this._delay)
+    this._taskHandle = { cancel: () => clearTimeout(timeoutHandle) }
+  }
+}
+
+export { Batchinator }
+export default Batchinator

package/src/vendor/react-native/EventEmitter/NativeEventEmitter.js

@@ -0,0 +1,85 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+'use strict'
+
+import { Platform, invariant } from '@hanzogui/react-native-web-internals'
+import { RCTDeviceEventEmitter } from './RCTDeviceEventEmitter'
+
+/**
+ * `NativeEventEmitter` is intended for use by Native Modules to emit events to
+ * JavaScript listeners. If a `NativeModule` is supplied to the constructor, it
+ * will be notified (via `addListener` and `removeListeners`) when the listener
+ * count changes to manage "native memory".
+ *
+ * Currently, all native events are fired via a global `RCTDeviceEventEmitter`.
+ * This means event names must be globally unique, and it means that call sites
+ * can theoretically listen to `RCTDeviceEventEmitter` (although discouraged).
+ */
+class NativeEventEmitter {
+  _nativeModule
+
+  constructor(nativeModule) {
+    if (Platform.OS === 'ios') {
+      invariant(
+        nativeModule != null,
+        '`new NativeEventEmitter()` requires a non-null argument.'
+      )
+      this._nativeModule = nativeModule
+    }
+  }
+
+  addListener(eventType, listener, context) {
+    this._nativeModule?.addListener(eventType)
+    let subscription = RCTDeviceEventEmitter.addListener(eventType, listener, context)
+
+    return {
+      remove: () => {
+        if (subscription != null) {
+          this._nativeModule?.removeListeners(1)
+          // $FlowFixMe[incompatible-use]
+          subscription.remove()
+          subscription = null
+        }
+      },
+    }
+  }
+
+  /**
+   * @deprecated Use `remove` on the EventSubscription from `addListener`.
+   */
+  removeListener(eventType, listener) {
+    this._nativeModule?.removeListeners(1)
+    // NOTE: This will report a deprecation notice via `console.error`.
+    // $FlowFixMe[prop-missing] - `removeListener` exists but is deprecated.
+    RCTDeviceEventEmitter.removeListener(eventType, listener)
+  }
+
+  emit(eventType, ...args) {
+    // Generally, `RCTDeviceEventEmitter` is directly invoked. But this is
+    // included for completeness.
+    RCTDeviceEventEmitter.emit(eventType, ...args)
+  }
+
+  removeAllListeners(eventType) {
+    invariant(
+      eventType != null,
+      '`NativeEventEmitter.removeAllListener()` requires a non-null argument.'
+    )
+    this._nativeModule?.removeListeners(this.listenerCount(eventType))
+    RCTDeviceEventEmitter.removeAllListeners(eventType)
+  }
+
+  listenerCount(eventType) {
+    return RCTDeviceEventEmitter.listenerCount(eventType)
+  }
+}
+
+export { NativeEventEmitter }
+export default NativeEventEmitter

package/src/vendor/react-native/EventEmitter/RCTDeviceEventEmitter.js

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import { EventEmitter } from '../emitter/EventEmitter'
+
+// FIXME: use typed events
+
+/**
+ * Global EventEmitter used by the native platform to emit events to JavaScript.
+ * Events are identified by globally unique event names.
+ *
+ * NativeModules that emit events should instead subclass `NativeEventEmitter`.
+ */
+const RCTDeviceEventEmitter = new EventEmitter()
+export { RCTDeviceEventEmitter }
+export default RCTDeviceEventEmitter

package/src/vendor/react-native/FeatureFlags.js

@@ -0,0 +1,8 @@
+export const ReactNativeFeatureFlags = {
+  isLayoutAnimationEnabled: () => true,
+  shouldEmitW3CPointerEvents: () => false,
+  shouldPressibilityUseW3CPointerEventsForHover: () => false,
+  animatedShouldDebounceQueueFlush: () => false,
+  animatedShouldUseSingleOp: () => false,
+  enableCppComponents: () => false,
+}

package/src/vendor/react-native/FillRateHelper/index.js

@@ -0,0 +1,213 @@
+/**
+ * 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.
+ *
+ * @format
+ * @format
+ */
+
+class Info {
+  any_blank_count = 0
+  any_blank_ms = 0
+  any_blank_speed_sum = 0
+  mostly_blank_count = 0
+  mostly_blank_ms = 0
+  pixels_blank = 0
+  pixels_sampled = 0
+  pixels_scrolled = 0
+  total_time_spent = 0
+  sample_count = 0
+}
+
+const defaultFrame = {
+  inLayout: false,
+  length: 0,
+  offset: 0,
+}
+
+const DEBUG = false
+
+let _listeners = []
+let _minSampleCount = 10
+let _sampleRate = DEBUG ? 1 : null
+
+/**
+ * A helper class for detecting when the maximem fill rate of `VirtualizedList` is exceeded.
+ * By default the sampling rate is set to zero and this will do nothing. If you want to collect
+ * samples (e.g. to log them), make sure to call `FillRateHelper.setSampleRate(0.0-1.0)`.
+ *
+ * Listeners and sample rate are global for all `VirtualizedList`s - typical usage will combine with
+ * `SceneTracker.getActiveScene` to determine the context of the events.
+ */
+class FillRateHelper {
+  _anyBlankStartTime = null
+  _enabled = false
+  _getFrameMetrics
+  _info = new Info()
+  _mostlyBlankStartTime = null
+  _samplesStartTime = null
+
+  static addListener(callback) {
+    if (_sampleRate === null) {
+      console.warn('Call `FillRateHelper.setSampleRate` before `addListener`.')
+    }
+    _listeners.push(callback)
+    return {
+      remove: () => {
+        _listeners = _listeners.filter((listener) => callback !== listener)
+      },
+    }
+  }
+
+  static setSampleRate(sampleRate) {
+    _sampleRate = sampleRate
+  }
+
+  static setMinSampleCount(minSampleCount) {
+    _minSampleCount = minSampleCount
+  }
+
+  constructor(getFrameMetrics) {
+    this._getFrameMetrics = getFrameMetrics
+    this._enabled = (_sampleRate || 0) > Math.random()
+    this._resetData()
+  }
+
+  activate() {
+    if (this._enabled && this._samplesStartTime == null) {
+      DEBUG && console.debug('FillRateHelper: activate')
+      this._samplesStartTime = global.performance.now()
+    }
+  }
+
+  deactivateAndFlush() {
+    if (!this._enabled) {
+      return
+    }
+    const start = this._samplesStartTime // const for flow
+    if (start == null) {
+      DEBUG && console.debug('FillRateHelper: bail on deactivate with no start time')
+      return
+    }
+    if (this._info.sample_count < _minSampleCount) {
+      // Don't bother with under-sampled events.
+      this._resetData()
+      return
+    }
+    const total_time_spent = global.performance.now() - start
+    const info = {
+      ...this._info,
+      total_time_spent,
+    }
+    if (DEBUG) {
+      const derived = {
+        avg_blankness: this._info.pixels_blank / this._info.pixels_sampled,
+        avg_speed: this._info.pixels_scrolled / (total_time_spent / 1000),
+        avg_speed_when_any_blank:
+          this._info.any_blank_speed_sum / this._info.any_blank_count,
+        any_blank_per_min: this._info.any_blank_count / (total_time_spent / 1000 / 60),
+        any_blank_time_frac: this._info.any_blank_ms / total_time_spent,
+        mostly_blank_per_min:
+          this._info.mostly_blank_count / (total_time_spent / 1000 / 60),
+        mostly_blank_time_frac: this._info.mostly_blank_ms / total_time_spent,
+      }
+      for (const key in derived) {
+        // $FlowFixMe[prop-missing]
+        derived[key] = Math.round(1000 * derived[key]) / 1000
+      }
+      console.debug('FillRateHelper deactivateAndFlush: ', { derived, info })
+    }
+    _listeners.forEach((listener) => listener(info))
+    this._resetData()
+  }
+
+  computeBlankness(props, cellsAroundViewport, scrollMetrics) {
+    if (
+      !this._enabled ||
+      props.getItemCount(props.data) === 0 ||
+      cellsAroundViewport.last < cellsAroundViewport.first ||
+      this._samplesStartTime == null
+    ) {
+      return 0
+    }
+    const { dOffset, offset, velocity, visibleLength } = scrollMetrics
+
+    // Denominator metrics that we track for all events - most of the time there is no blankness and
+    // we want to capture that.
+    this._info.sample_count++
+    this._info.pixels_sampled += Math.round(visibleLength)
+    this._info.pixels_scrolled += Math.round(Math.abs(dOffset))
+    const scrollSpeed = Math.round(Math.abs(velocity) * 1000) // px / sec
+
+    // Whether blank now or not, record the elapsed time blank if we were blank last time.
+    const now = global.performance.now()
+    if (this._anyBlankStartTime != null) {
+      this._info.any_blank_ms += now - this._anyBlankStartTime
+    }
+    this._anyBlankStartTime = null
+    if (this._mostlyBlankStartTime != null) {
+      this._info.mostly_blank_ms += now - this._mostlyBlankStartTime
+    }
+    this._mostlyBlankStartTime = null
+
+    let blankTop = 0
+    let first = cellsAroundViewport.first
+    let firstFrame = this._getFrameMetrics(first, props)
+    while (first <= cellsAroundViewport.last && (!firstFrame || !firstFrame.inLayout)) {
+      firstFrame = this._getFrameMetrics(first, props)
+      first++
+    }
+    // Only count blankTop if we aren't rendering the first item, otherwise we will count the header
+    // as blank.
+    if (firstFrame && first > 0) {
+      blankTop = Math.min(visibleLength, Math.max(0, firstFrame.offset - offset))
+    }
+    let blankBottom = 0
+    let last = cellsAroundViewport.last
+    let lastFrame = this._getFrameMetrics(last, props)
+    while (last >= cellsAroundViewport.first && (!lastFrame || !lastFrame.inLayout)) {
+      lastFrame = this._getFrameMetrics(last, props)
+      last--
+    }
+    // Only count blankBottom if we aren't rendering the last item, otherwise we will count the
+    // footer as blank.
+    if (lastFrame && last < props.getItemCount(props.data) - 1) {
+      const bottomEdge = lastFrame.offset + lastFrame.length
+      blankBottom = Math.min(
+        visibleLength,
+        Math.max(0, offset + visibleLength - bottomEdge)
+      )
+    }
+    const pixels_blank = Math.round(blankTop + blankBottom)
+    const blankness = pixels_blank / visibleLength
+    if (blankness > 0) {
+      this._anyBlankStartTime = now
+      this._info.any_blank_speed_sum += scrollSpeed
+      this._info.any_blank_count++
+      this._info.pixels_blank += pixels_blank
+      if (blankness > 0.5) {
+        this._mostlyBlankStartTime = now
+        this._info.mostly_blank_count++
+      }
+    } else if (scrollSpeed < 0.01 || Math.abs(dOffset) < 1) {
+      this.deactivateAndFlush()
+    }
+    return blankness
+  }
+
+  enabled() {
+    return this._enabled
+  }
+
+  _resetData() {
+    this._anyBlankStartTime = null
+    this._info = new Info()
+    this._mostlyBlankStartTime = null
+    this._samplesStartTime = null
+  }
+}
+
+export { FillRateHelper }
+export default FillRateHelper