refactor(arvr/xplat): update imports to resolve packaged virtualized list from react-native

BUCK

@@ -724,6 +724,8 @@ rn_library(
             "Libraries/**/*.js",
             "Libraries/NewAppScreen/**/*.png",
             "Libraries/LogBox/**/*.png",
+            "packages/virtualized-lists/**/*.js",
+            "packages/virtualized-lists/**/*.json",
         ],
         exclude = [
             "**/__*__/**",

Libraries/Inspector/NetworkOverlay.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {RenderItemProps} from '../Lists/VirtualizedList';
+import type {RenderItemProps} from '@react-native/virtualized-lists';
 
 const ScrollView = require('../Components/ScrollView/ScrollView');
 const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');

Libraries/Lists/FillRateHelper.js

@@ -10,244 +10,10 @@
 
 'use strict';
 
-import type {FrameMetricProps} from './VirtualizedListProps';
+import {typeof FillRateHelper as FillRateHelperType} from '@react-native/virtualized-lists';
 
-export type FillRateInfo = Info;
-
-class Info {
-  any_blank_count: number = 0;
-  any_blank_ms: number = 0;
-  any_blank_speed_sum: number = 0;
-  mostly_blank_count: number = 0;
-  mostly_blank_ms: number = 0;
-  pixels_blank: number = 0;
-  pixels_sampled: number = 0;
-  pixels_scrolled: number = 0;
-  total_time_spent: number = 0;
-  sample_count: number = 0;
-}
-
-type FrameMetrics = {
-  inLayout?: boolean,
-  length: number,
-  offset: number,
-  ...
-};
-
-const DEBUG = false;
-
-let _listeners: Array<(Info) => void> = [];
-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: ?number = null;
-  _enabled = false;
-  _getFrameMetrics: (index: number, props: FrameMetricProps) => ?FrameMetrics;
-  _info: Info = new Info();
-  _mostlyBlankStartTime: ?number = null;
-  _samplesStartTime: ?number = null;
-
-  static addListener(callback: FillRateInfo => void): {
-    remove: () => void,
-    ...
-  } {
-    if (_sampleRate === null) {
-      console.warn('Call `FillRateHelper.setSampleRate` before `addListener`.');
-    }
-    _listeners.push(callback);
-    return {
-      remove: () => {
-        _listeners = _listeners.filter(listener => callback !== listener);
-      },
-    };
-  }
-
-  static setSampleRate(sampleRate: number) {
-    _sampleRate = sampleRate;
-  }
-
-  static setMinSampleCount(minSampleCount: number) {
-    _minSampleCount = minSampleCount;
-  }
-
-  constructor(
-    getFrameMetrics: (index: number, props: FrameMetricProps) => ?FrameMetrics,
-  ) {
-    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: any = {
-      ...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: {
-      ...FrameMetricProps,
-      initialNumToRender?: ?number,
-      ...
-    },
-    cellsAroundViewport: {
-      first: number,
-      last: number,
-      ...
-    },
-    scrollMetrics: {
-      dOffset: number,
-      offset: number,
-      velocity: number,
-      visibleLength: number,
-      ...
-    },
-  ): number {
-    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(): boolean {
-    return this._enabled;
-  }
-
-  _resetData() {
-    this._anyBlankStartTime = null;
-    this._info = new Info();
-    this._mostlyBlankStartTime = null;
-    this._samplesStartTime = null;
-  }
-}
+const FillRateHelper: FillRateHelperType =
+  require('@react-native/virtualized-lists').FillRateHelper;
 
+export type {FillRateInfo} from '@react-native/virtualized-lists';
 module.exports = FillRateHelper;

Libraries/Lists/FlatList.d.ts

@@ -12,7 +12,7 @@ import type {
   ListRenderItem,
   ViewToken,
   VirtualizedListProps,
-} from './VirtualizedList';
+} from '@react-native/virtualized-lists';
 import type {ScrollViewComponent} from '../Components/ScrollView/ScrollView';
 import {StyleProp} from '../StyleSheet/StyleSheet';
 import {ViewStyle} from '../StyleSheet/StyleSheetTypes';

Libraries/Lists/FlatList.js

@@ -11,14 +11,17 @@
 import typeof ScrollViewNativeComponent from '../Components/ScrollView/ScrollViewNativeComponent';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {
+  RenderItemProps,
+  RenderItemType,
   ViewabilityConfigCallbackPair,
   ViewToken,
-} from './ViewabilityHelper';
-import type {RenderItemProps, RenderItemType} from './VirtualizedList';
+} from '@react-native/virtualized-lists';
 
 import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
-import VirtualizedList from './VirtualizedList';
-import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
+import {
+  VirtualizedList,
+  keyExtractor as defaultKeyExtractor,
+} from '@react-native/virtualized-lists';
 import memoizeOne from 'memoize-one';
 
 const View = require('../Components/View/View');

Libraries/Lists/FlatList.js.flow

@@ -14,8 +14,13 @@ const View = require('../Components/View/View');
 import typeof ScrollViewNativeComponent from '../Components/ScrollView/ScrollViewNativeComponent';
 import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
-import type {RenderItemType} from './VirtualizedList';
-import typeof VirtualizedList from './VirtualizedList';
+import type {
+  RenderItemType,
+  RenderItemProps,
+  ViewToken,
+  ViewabilityConfigCallbackPair,
+} from '@react-native/virtualized-lists';
+import {typeof VirtualizedList} from '@react-native/virtualized-lists';
 
 type RequiredProps<ItemT> = {|
   /**

Libraries/Lists/SectionList.d.ts

@@ -11,7 +11,7 @@ import type * as React from 'react';
 import type {
   ListRenderItemInfo,
   VirtualizedListWithoutRenderItemProps,
-} from './VirtualizedList';
+} from '@react-native/virtualized-lists';
 import type {
   ScrollView,
   ScrollViewProps,

Libraries/Lists/SectionList.js

@@ -12,13 +12,13 @@
 
 import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
 import type {
-  Props as VirtualizedSectionListProps,
   ScrollToLocationParamsType,
   SectionBase as _SectionBase,
-} from './VirtualizedSectionList';
+  VirtualizedSectionListProps,
+} from '@react-native/virtualized-lists';
 
 import Platform from '../Utilities/Platform';
-import VirtualizedSectionList from './VirtualizedSectionList';
+import {VirtualizedSectionList} from '@react-native/virtualized-lists';
 import * as React from 'react';
 
 type Item = any;

Libraries/Lists/SectionListModern.js

@@ -12,14 +12,14 @@
 
 import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
 import type {
-  Props as VirtualizedSectionListProps,
   ScrollToLocationParamsType,
   SectionBase as _SectionBase,
-} from './VirtualizedSectionList';
+  VirtualizedSectionListProps,
+} from '@react-native/virtualized-lists';
 import type {AbstractComponent, Element, ElementRef} from 'react';
 
 import Platform from '../Utilities/Platform';
-import VirtualizedSectionList from './VirtualizedSectionList';
+import {VirtualizedSectionList} from '@react-native/virtualized-lists';
 import React, {forwardRef, useImperativeHandle, useRef} from 'react';
 
 type Item = any;