@tamagui/react-native-web-lite 1.129.13 → 1.129.14

package/src/vendor/react-native/VirtualizeUtils/{index.tsx → index.js}

@@ -3,56 +3,38 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @format
  */
 
-interface FrameMetric {
-  length: number
-  offset: number
-}
-
-interface ScrollMetrics {
-  dt: number
-  offset: number
-  velocity: number
-  visibleLength: number
-  zoomScale?: number
-}
-
-interface Range {
-  first: number
-  last: number
-}
-
-interface FrameMetricProps {
-  data: any
-  getItemCount: (data: any) => number
-}
-
 /**
  * Used to find the indices of the frames that overlap the given offsets. Useful for finding the
  * items that bound different windows of content, such as the visible area or the buffered overscan
  * area.
  */
 export function elementsThatOverlapOffsets(
-  offsets: number[],
-  props: FrameMetricProps,
-  getFrameMetrics: (index: number, props: FrameMetricProps) => FrameMetric,
+  offsets,
+  props,
+  getFrameMetrics,
   zoomScale = 1
-): number[] {
+) {
   const itemCount = props.getItemCount(props.data)
-  const result: number[] = []
-
+  const result = []
   for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {
     const currentOffset = offsets[offsetIndex]
     let left = 0
     let right = itemCount - 1
 
     while (left <= right) {
+      // eslint-disable-next-line no-bitwise
       const mid = left + ((right - left) >>> 1)
       const frame = getFrameMetrics(mid, props)
       const scaledOffsetStart = frame.offset * zoomScale
       const scaledOffsetEnd = (frame.offset + frame.length) * zoomScale
 
+      // We want the first frame that contains the offset, with inclusive bounds. Thus, for the
+      // first frame the scaledOffsetStart is inclusive, while for other frames it is exclusive.
       if (
         (mid === 0 && currentOffset < scaledOffsetStart) ||
         (mid !== 0 && currentOffset <= scaledOffsetStart)
@@ -76,7 +58,7 @@ export function elementsThatOverlapOffsets(
  * can restrict the number of new items render at once so that content can appear on the screen
  * faster.
  */
-export function newRangeCount(prev: Range, next: Range): number {
+export function newRangeCount(prev, next) {
   return (
     next.last -
     next.first +
@@ -87,28 +69,34 @@ export function newRangeCount(prev: Range, next: Range): number {
 
 /**
  * Custom logic for determining which items should be rendered given the current frame and scroll
- * metrics, as well as the previous render state.
+ * metrics, as well as the previous render state. The algorithm may evolve over time, but generally
+ * prioritizes the visible area first, then expands that with overscan regions ahead and behind,
+ * biased in the direction of scroll.
  */
 export function computeWindowedRenderLimits(
-  props: FrameMetricProps,
-  maxToRenderPerBatch: number,
-  windowSize: number,
-  prev: Range,
-  getFrameMetricsApprox: (index: number, props: FrameMetricProps) => FrameMetric,
-  scrollMetrics: ScrollMetrics
-): Range {
+  props,
+  maxToRenderPerBatch,
+  windowSize,
+  prev,
+  getFrameMetricsApprox,
+  scrollMetrics
+) {
   const itemCount = props.getItemCount(props.data)
   if (itemCount === 0) {
     return { first: 0, last: -1 }
   }
-
   const { offset, velocity, visibleLength, zoomScale = 1 } = scrollMetrics
 
+  // Start with visible area, then compute maximum overscan region by expanding from there, biased
+  // in the direction of scroll. Total overscan area is capped, which should cap memory consumption
+  // too.
   const visibleBegin = Math.max(0, offset)
   const visibleEnd = visibleBegin + visibleLength
   const overscanLength = (windowSize - 1) * visibleLength
 
-  const leadFactor = 0.5
+  // Considering velocity seems to introduce more churn than it's worth.
+  const leadFactor = 0.5 // Math.max(0, Math.min(1, velocity / 25 + 0.5));
+
   const fillPreference = velocity > 1 ? 'after' : velocity < -1 ? 'before' : 'none'
 
   const overscanBegin = Math.max(0, visibleBegin - (1 - leadFactor) * overscanLength)
@@ -116,43 +104,50 @@ export function computeWindowedRenderLimits(
 
   const lastItemOffset = getFrameMetricsApprox(itemCount - 1, props).offset * zoomScale
   if (lastItemOffset < overscanBegin) {
+    // Entire list is before our overscan window
     return {
       first: Math.max(0, itemCount - 1 - maxToRenderPerBatch),
       last: itemCount - 1,
     }
   }
 
+  // Find the indices that correspond to the items at the render boundaries we're targeting.
   let [overscanFirst, first, last, overscanLast] = elementsThatOverlapOffsets(
     [overscanBegin, visibleBegin, visibleEnd, overscanEnd],
     props,
     getFrameMetricsApprox,
     zoomScale
   )
-
   overscanFirst = overscanFirst == null ? 0 : overscanFirst
   first = first == null ? Math.max(0, overscanFirst) : first
   overscanLast = overscanLast == null ? itemCount - 1 : overscanLast
   last = last == null ? Math.min(overscanLast, first + maxToRenderPerBatch - 1) : last
   const visible = { first, last }
 
+  // We want to limit the number of new cells we're rendering per batch so that we can fill the
+  // content on the screen quickly. If we rendered the entire overscan window at once, the user
+  // could be staring at white space for a long time waiting for a bunch of offscreen content to
+  // render.
   let newCellCount = newRangeCount(prev, visible)
 
   while (true) {
     if (first <= overscanFirst && last >= overscanLast) {
+      // If we fill the entire overscan range, we're done.
       break
     }
-
     const maxNewCells = newCellCount >= maxToRenderPerBatch
     const firstWillAddMore = first <= prev.first || first > prev.last
     const firstShouldIncrement =
       first > overscanFirst && (!maxNewCells || !firstWillAddMore)
     const lastWillAddMore = last >= prev.last || last < prev.first
     const lastShouldIncrement = last < overscanLast && (!maxNewCells || !lastWillAddMore)
-
     if (maxNewCells && !firstShouldIncrement && !lastShouldIncrement) {
+      // We only want to stop if we've hit maxNewCells AND we cannot increment first or last
+      // without rendering new items. This let's us preserve as many already rendered items as
+      // possible, reducing render churn and keeping the rendered overscan range as large as
+      // possible.
       break
     }
-
     if (
       firstShouldIncrement &&
       !(fillPreference === 'after' && lastShouldIncrement && lastWillAddMore)
@@ -162,7 +157,6 @@ export function computeWindowedRenderLimits(
       }
       first--
     }
-
     if (
       lastShouldIncrement &&
       !(fillPreference === 'before' && firstShouldIncrement && firstWillAddMore)
@@ -173,7 +167,6 @@ export function computeWindowedRenderLimits(
       last++
     }
   }
-
   if (
     !(
       last >= first &&
@@ -197,11 +190,10 @@ export function computeWindowedRenderLimits(
         })
     )
   }
-
   return { first, last }
 }
 
-export function keyExtractor(item: any, index: number): string {
+export function keyExtractor(item, index) {
   if (typeof item === 'object' && item?.key != null) {
     return item.key
   }

package/src/vendor/react-native/VirtualizedList/{CellRenderMask.ts → CellRenderMask.js}

@@ -1,26 +1,18 @@
-// @ts-nocheck
-
 /**
  * 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
  */
 
 import { invariant } from '@tamagui/react-native-web-internals'
 
-export type CellRegion = {
-  first: number
-  last: number
-  isSpacer: boolean
-}
-
 export class CellRenderMask {
-  private _numCells: number
-  private _regions: Array<CellRegion>
-
-  constructor(numCells: number) {
-    invariant(numCells >= 0, 'CellRenderMask must contain a non-negative number of cells')
+  constructor(numCells) {
+    invariant(numCells >= 0, 'CellRenderMask must contain a non-negative number os cells')
 
     this._numCells = numCells
 
@@ -37,11 +29,11 @@ export class CellRenderMask {
     }
   }
 
-  enumerateRegions(): ReadonlyArray<CellRegion> {
+  enumerateRegions() {
     return this._regions
   }
 
-  addCells(cells: { first: number; last: number }): void {
+  addCells(cells) {
     invariant(
       cells.first >= 0 &&
         cells.first < this._numCells &&
@@ -68,9 +60,9 @@ export class CellRenderMask {
 
     // We need to replace the existing covered regions with 1-3 new regions
     // depending whether we need to split spacers out of overlapping regions.
-    const newLeadRegion: Array<CellRegion> = []
-    const newTailRegion: Array<CellRegion> = []
-    const newMainRegion: CellRegion = {
+    const newLeadRegion = []
+    const newTailRegion = []
+    const newMainRegion = {
       ...cells,
       isSpacer: false,
     }
@@ -99,20 +91,16 @@ export class CellRenderMask {
       }
     }
 
-    const replacementRegions: Array<CellRegion> = [
-      ...newLeadRegion,
-      newMainRegion,
-      ...newTailRegion,
-    ]
+    const replacementRegions = [...newLeadRegion, newMainRegion, ...newTailRegion]
     const numRegionsToDelete = lastIntersectIdx - firstIntersectIdx + 1
     this._regions.splice(firstIntersectIdx, numRegionsToDelete, ...replacementRegions)
   }
 
-  numCells(): number {
+  numCells() {
     return this._numCells
   }
 
-  equals(other: CellRenderMask): boolean {
+  equals(other) {
     return (
       this._numCells === other._numCells &&
       this._regions.length === other._regions.length &&
@@ -125,7 +113,7 @@ export class CellRenderMask {
     )
   }
 
-  private _findRegion(cellIdx: number): [CellRegion, number] {
+  _findRegion(cellIdx) {
     let firstIdx = 0
     let lastIdx = this._regions.length - 1
 

package/src/vendor/react-native/VirtualizedList/{ChildListCollection.tsx → ChildListCollection.js}

@@ -1,21 +1,20 @@
-// @ts-nocheck
 /**
  * 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
+ * @format
  * @format
  */
 
 import { invariant } from '@tamagui/react-native-web-internals'
 
-export default class ChildListCollection<TList> {
-  _cellKeyToChildren: Map<string, Set<TList>> = new Map()
-  _childrenToCellKey: Map<TList, string> = new Map()
+export default class ChildListCollection {
+  _cellKeyToChildren = new Map()
+  _childrenToCellKey = new Map()
 
-  add(list: TList, cellKey: string): void {
+  add(list, cellKey) {
     invariant(
       !this._childrenToCellKey.has(list),
       'Trying to add already present child list'
@@ -28,7 +27,7 @@ export default class ChildListCollection<TList> {
     this._childrenToCellKey.set(list, cellKey)
   }
 
-  remove(list: TList): void {
+  remove(list) {
     const cellKey = this._childrenToCellKey.get(list)
     invariant(cellKey != null, 'Trying to remove non-present child list')
     this._childrenToCellKey.delete(list)
@@ -42,7 +41,7 @@ export default class ChildListCollection<TList> {
     }
   }
 
-  forEach(fn: (TList) => void): void {
+  forEach(fn) {
     for (const listSet of this._cellKeyToChildren.values()) {
       for (const list of listSet) {
         fn(list)
@@ -50,14 +49,14 @@ export default class ChildListCollection<TList> {
     }
   }
 
-  forEachInCell(cellKey: string, fn: (TList) => void): void {
+  forEachInCell(cellKey, fn) {
     const listSet = this._cellKeyToChildren.get(cellKey) ?? []
     for (const list of listSet) {
       fn(list)
     }
   }
 
-  anyInCell(cellKey: string, fn: (TList) => boolean): boolean {
+  anyInCell(cellKey, fn) {
     const listSet = this._cellKeyToChildren.get(cellKey) ?? []
     for (const list of listSet) {
       if (fn(list)) {
@@ -67,7 +66,7 @@ export default class ChildListCollection<TList> {
     return false
   }
 
-  size(): number {
+  size() {
     return this._childrenToCellKey.size
   }
 }

package/src/vendor/react-native/VirtualizedList/{StateSafePureComponent.tsx → StateSafePureComponent.js}

@@ -1,6 +1,15 @@
-// @ts-nocheck
+/**
+ * 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
+ */
+
 import { invariant } from '@tamagui/react-native-web-internals'
-import React from 'react'
+import * as React from 'react'
 
 /**
  * `setState` is called asynchronously, and should not rely on the value of
@@ -11,24 +20,15 @@ import React from 'react'
  * variables are read in a state updater function, instead of the ones passed
  * in.
  */
-export default class StateSafePureComponent<Props, State> extends React.PureComponent<
-  Props,
-  State
-> {
-  private _inAsyncStateUpdate = false
+export default class StateSafePureComponent extends React.PureComponent {
+  _inAsyncStateUpdate = false
 
-  constructor(props: Props) {
+  constructor(props) {
     super(props)
     this._installSetStateHooks()
   }
 
-  setState(
-    partialState:
-      | Partial<State>
-      | ((state: State, props: Props) => Partial<State> | null)
-      | null,
-    callback?: () => void
-  ): void {
+  setState(partialState, callback) {
     if (typeof partialState === 'function') {
       super.setState((state, props) => {
         this._inAsyncStateUpdate = true
@@ -47,7 +47,7 @@ export default class StateSafePureComponent<Props, State> extends React.PureComp
     }
   }
 
-  private _installSetStateHooks() {
+  _installSetStateHooks() {
     const that = this
     let { props, state } = this
 
@@ -59,7 +59,7 @@ export default class StateSafePureComponent<Props, State> extends React.PureComp
         )
         return props
       },
-      set(newProps: Props) {
+      set(newProps) {
         props = newProps
       },
     })
@@ -67,11 +67,11 @@ export default class StateSafePureComponent<Props, State> extends React.PureComp
       get() {
         invariant(
           !that._inAsyncStateUpdate,
-          '"this.state" should not be accessed during state updates'
+          '"this.state" should not be acceessed during state updates'
         )
         return state
       },
-      set(newState: State) {
+      set(newState) {
         state = newState
       },
     })

package/src/vendor/react-native/VirtualizedList/{VirtualizedListCellRenderer.tsx → VirtualizedListCellRenderer.jsx}

@@ -1,63 +1,28 @@
-// @ts-nocheck
-import {
-  invariant,
-  StyleSheet,
-  type LayoutEvent,
-} from '@tamagui/react-native-web-internals'
-import type { ViewProps } from '../../../View'
-import type { CellRendererProps, RenderItemType } from './VirtualizedListProps'
-import React from 'react'
-import { VirtualizedListCellContextProvider } from './VirtualizedListContext'
-import View from '../../../View'
-
-type ViewStyleProp = ViewProps['style']
-
-export type Props<ItemT> = {
-  CellRendererComponent?: React.ComponentType<CellRendererProps<ItemT>> | null
-  ItemSeparatorComponent: React.ComponentType<
-    any | { highlighted: boolean; leadingItem: ItemT | null }
-  > | null
-  ListItemComponent?: React.ComponentType<any> | React.ReactElement | null
-  cellKey: string
-  horizontal?: boolean | null
-  index: number
-  inversionStyle: ViewStyleProp
-  item: ItemT
-  onCellLayout?: (event: LayoutEvent, cellKey: string, index: number) => void
-  onCellFocusCapture?: (event: FocusEvent) => void
-  onUnmount: (cellKey: string) => void
-  onUpdateSeparators: (
-    cellKeys: Array<string | null>,
-    props: Partial<SeparatorProps<ItemT>>
-  ) => void
-  prevCellKey?: string | null
-  renderItem?: RenderItemType<ItemT> | null
-}
+/**
+ * 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
+ */
 
-type SeparatorProps<ItemT> = Readonly<{
-  highlighted: boolean
-  leadingItem: ItemT | null
-}>
 
-type State<ItemT> = {
-  separatorProps: SeparatorProps<ItemT>
-}
+import View from '../../../View'
+import { StyleSheet, invariant } from '@tamagui/react-native-web-internals'
+import { VirtualizedListCellContextProvider } from './VirtualizedListContext'
+import * as React from 'react'
 
-export default class CellRenderer<ItemT> extends React.Component<
-  Props<ItemT>,
-  State<ItemT>
-> {
-  state: State<ItemT> = {
+export default class CellRenderer extends React.Component {
+  state = {
     separatorProps: {
       highlighted: false,
       leadingItem: this.props.item,
     },
   }
 
-  static getDerivedStateFromProps(
-    props: Props<ItemT>,
-    prevState: State<ItemT>
-  ): State<ItemT> | null {
+  static getDerivedStateFromProps(props, prevState) {
     return {
       separatorProps: {
         ...prevState.separatorProps,
@@ -66,29 +31,32 @@ export default class CellRenderer<ItemT> extends React.Component<
     }
   }
 
-  private _separators = {
+  // TODO: consider factoring separator stuff out of VirtualizedList into FlatList since it's not
+  // reused by SectionList and we can keep VirtualizedList simpler.
+  // $FlowFixMe[missing-local-annot]
+  _separators = {
     highlight: () => {
       const { cellKey, prevCellKey } = this.props
-      this.props.onUpdateSeparators([cellKey, prevCellKey || null], {
+      this.props.onUpdateSeparators([cellKey, prevCellKey], {
         highlighted: true,
       })
     },
     unhighlight: () => {
       const { cellKey, prevCellKey } = this.props
-      this.props.onUpdateSeparators([cellKey, prevCellKey || null], {
+      this.props.onUpdateSeparators([cellKey, prevCellKey], {
         highlighted: false,
       })
     },
-    updateProps: (select: 'leading' | 'trailing', newProps: SeparatorProps<ItemT>) => {
+    updateProps: (select, newProps) => {
       const { cellKey, prevCellKey } = this.props
       this.props.onUpdateSeparators(
-        [select === 'leading' ? prevCellKey || null : cellKey],
+        [select === 'leading' ? prevCellKey : cellKey],
         newProps
       )
     },
   }
 
-  updateSeparatorProps(newProps: SeparatorProps<ItemT>) {
+  updateSeparatorProps(newProps) {
     this.setState((state) => ({
       separatorProps: { ...state.separatorProps, ...newProps },
     }))
@@ -98,24 +66,26 @@ export default class CellRenderer<ItemT> extends React.Component<
     this.props.onUnmount(this.props.cellKey)
   }
 
-  private _onLayout = (nativeEvent: LayoutEvent): void => {
+  _onLayout = (nativeEvent) => {
     this.props.onCellLayout &&
       this.props.onCellLayout(nativeEvent, this.props.cellKey, this.props.index)
   }
 
-  private _renderElement(
-    renderItem: RenderItemType<ItemT> | null | undefined,
-    ListItemComponent: any,
-    item: ItemT,
-    index: number
-  ): React.ReactNode {
+  _renderElement(renderItem, ListItemComponent, item, index) {
     if (renderItem && ListItemComponent) {
       console.warn(
-        'VirtualizedList: Both ListItemComponent and renderItem props are present. ListItemComponent will take precedence over renderItem.'
+        'VirtualizedList: Both ListItemComponent and renderItem props are present. ListItemComponent will take' +
+          ' precedence over renderItem.'
       )
     }
 
     if (ListItemComponent) {
+      /* $FlowFixMe[not-a-component] (>=0.108.0 site=react_native_fb) This
+       * comment suppresses an error found when Flow v0.108 was deployed. To
+       * see the error, delete this comment and run Flow. */
+      /* $FlowFixMe[incompatible-type-arg] (>=0.108.0 site=react_native_fb)
+       * This comment suppresses an error found when Flow v0.108 was deployed.
+       * To see the error, delete this comment and run Flow. */
       return React.createElement(ListItemComponent, {
         item,
         index,
@@ -137,7 +107,7 @@ export default class CellRenderer<ItemT> extends React.Component<
     )
   }
 
-  render(): React.ReactNode {
+  render() {
     const {
       CellRendererComponent,
       ItemSeparatorComponent,
@@ -153,9 +123,13 @@ export default class CellRenderer<ItemT> extends React.Component<
     } = this.props
     const element = this._renderElement(renderItem, ListItemComponent, item, index)
 
-    const itemSeparator: React.ReactNode = React.isValidElement(ItemSeparatorComponent)
-      ? ItemSeparatorComponent
-      : ItemSeparatorComponent && (
+    // NOTE: that when this is a sticky header, `onLayout` will get automatically extracted and
+    // called explicitly by `ScrollViewStickyHeader`.
+    const itemSeparator = React.isValidElement(ItemSeparatorComponent)
+      ? // $FlowFixMe[incompatible-type]
+        ItemSeparatorComponent
+      : // $FlowFixMe[incompatible-type]
+        ItemSeparatorComponent && (
           <ItemSeparatorComponent {...this.state.separatorProps} />
         )
     const cellStyle = inversionStyle
@@ -168,7 +142,6 @@ export default class CellRenderer<ItemT> extends React.Component<
     const result = !CellRendererComponent ? (
       <View
         style={cellStyle}
-        // @ts-ignore
         onFocusCapture={onCellFocusCapture}
         {...(onCellLayout && { onLayout: this._onLayout })}
       >