@amazon-devices/shopify__react-native-performance-lists-profiler 1.1.1758683737

package/src/FlatListPerformanceView.tsx

@@ -0,0 +1,61 @@
+import React, {useRef, useContext, useCallback} from 'react';
+
+import {ListsProfilerContext} from './ListsProfilerContext';
+import {FlatListPerformanceViewNativeComponent} from './FlatListPerformanceViewNativeComponent';
+import {OnBlankAreaEvent, OnInteractiveEvent} from './FlatListPerformanceView.types';
+import ListsProfilerProps from './ListsProfilerProps';
+// @amznmod_react - Add import for the turbomodule
+import ListsProfilerModule from './ListsProfilerModule';
+
+interface FlatListPerformanceViewProps {
+  /**
+   * Name of the list. Used for distinguishing between lists in the `ListsProfiler`.
+   */
+  listName: string;
+  children: JSX.Element;
+}
+
+/**
+ * Wrap your `FlatList` with this component.
+ */
+const FlatListPerformanceView = ({
+  children,
+  listName,
+  onInteractive = () => {},
+  onBlankArea = () => {},
+}: FlatListPerformanceViewProps & ListsProfilerProps) => {
+  const time = useRef(Date.now()).current;
+  const listsProfilerController = useContext(ListsProfilerContext);
+  const onInteractiveCallback = useCallback(
+    ({nativeEvent}: OnInteractiveEvent) => {
+      const tti = nativeEvent.timestamp - time;
+      onInteractive(tti, listName);
+      listsProfilerController.onInteractive(tti, listName);
+    },
+    [listsProfilerController, onInteractive, listName, time],
+  );
+  const onBlankAreaCallback = useCallback(
+    ({nativeEvent}: OnBlankAreaEvent) => {
+      onBlankArea(nativeEvent.offsetStart, nativeEvent.offsetEnd, listName);
+      listsProfilerController.onBlankArea(nativeEvent.offsetStart, nativeEvent.offsetEnd, listName);
+    },
+    [onBlankArea, listsProfilerController, listName],
+  );
+  return (
+    <FlatListPerformanceViewNativeComponent
+      onInteractive={onInteractiveCallback}
+      onBlankAreaEvent={onBlankAreaCallback}
+    >
+      {/* @amznmod_react - Extend the list's onScroll with a call to the TM  */}
+      {React.cloneElement(children, {
+        onScroll: () => {
+          if (children?.props?.onScroll) {
+            children.props.onScroll();
+          }
+          ListsProfilerModule?.invokeCallback();
+        },
+      })}
+    </FlatListPerformanceViewNativeComponent>
+  );
+};
+export default FlatListPerformanceView;

package/src/FlatListPerformanceView.types.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2024 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * PROPRIETARY/CONFIDENTIAL
+ *
+ * Use is subject to license terms.
+ */
+
+export interface OnInteractiveEvent {
+  nativeEvent: {
+    timestamp: number;
+  };
+}
+
+export interface OnBlankAreaEvent {
+  nativeEvent: {
+    offsetStart: number;
+    offsetEnd: number;
+  };
+}
+
+type OnInteractiveHandler = (event: OnInteractiveEvent) => void;
+type OnBlankAreaEventHandler = (event: OnBlankAreaEvent) => void;
+
+export interface FlatListPerformanceViewNativeComponentProps {
+  onInteractive: OnInteractiveHandler;
+  onBlankAreaEvent: OnBlankAreaEventHandler;
+}

package/src/FlatListPerformanceViewNativeComponent.kepler.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2024 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * PROPRIETARY/CONFIDENTIAL
+ *
+ * Use is subject to license terms.
+ */
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore For some reason this is unknown
+import register from 'react-native/Libraries/Utilities/registerGeneratedViewConfig';
+import { HostComponent } from 'react-native';
+
+import { FlatListPerformanceViewNativeComponentProps } from './FlatListPerformanceView.types';
+
+const FlatListPerformanceView = 'AmazonFlatListPerformanceView';
+
+register(FlatListPerformanceView, {
+    uiViewClassName: FlatListPerformanceView,
+    bubblingEventTypes: {
+        topOnInteractive: {
+            phasedRegistrationNames: {
+                bubbled: 'onInteractive',
+                captured: 'onInteractiveCapture',
+            },
+        },
+        topOnBlankAreaEvent: {
+            phasedRegistrationNames: {
+                bubbled: 'onBlankAreaEvent',
+                captured: 'onBlankAreaEventCapture',
+            },
+        },
+    },
+});
+
+const FlatListPerformanceViewNativeComponent =
+ (FlatListPerformanceView as unknown) as HostComponent<FlatListPerformanceViewNativeComponentProps>;
+export { FlatListPerformanceViewNativeComponent };

package/src/FlatListPerformanceViewNativeComponent.tsx

@@ -0,0 +1,7 @@
+import {requireNativeComponent} from 'react-native';
+
+import {FlatListPerformanceViewNativeComponentProps} from './FlatListPerformanceView.types';
+
+const FlatListPerformanceViewNativeComponent =
+  requireNativeComponent<FlatListPerformanceViewNativeComponentProps>('FlatListPerformanceView');
+export {FlatListPerformanceViewNativeComponent};

package/src/ListsProfiler.tsx

@@ -0,0 +1,67 @@
+import React, {useCallback} from 'react';
+import {Flipper, addPlugin} from 'react-native-flipper';
+
+import {ListsProfilerContextProvider} from './ListsProfilerContext';
+import ListsProfilerProps from './ListsProfilerProps';
+
+const bootstrapPlugin = (): Promise<Flipper.FlipperConnection> => {
+  return new Promise(resolve => {
+    addPlugin({
+      getId: () => '@shopify/react-native-performance',
+      onConnect: connection => {
+        return resolve(connection);
+      },
+      onDisconnect: () => {},
+      runInBackground: () => true,
+    });
+  });
+};
+
+/**
+ * Wrap your app with this component to get events from all the lists wrapped with their performance view.
+ * For example, `FlatList` must be wrapped in the `FlatListPerformanceView`.
+ */
+const ListsProfiler = ({onInteractive = () => {}, onBlankArea = () => {}, children}: ListsProfilerProps) => {
+  let connection: Flipper.FlipperConnection | undefined;
+  bootstrapPlugin()
+    .then(conn => {
+      connection = conn;
+    })
+    .catch(error => {
+      throw error;
+    });
+
+  const onInteractiveCallback = useCallback(
+    (TTI: number, listName: string) => {
+      onInteractive(TTI, listName);
+      connection?.send('newListTTIData', {
+        TTI,
+        listName,
+      });
+    },
+    [connection, onInteractive],
+  );
+  const onBlankAreaCallback = useCallback(
+    (offsetStart: number, offsetEnd: number, listName: string) => {
+      onBlankArea(offsetStart, offsetEnd, listName);
+      const blankArea = Math.max(Math.max(offsetStart, offsetEnd), 0);
+      connection?.send('newBlankData', {
+        offset: blankArea,
+        listName,
+      });
+    },
+    [connection, onBlankArea],
+  );
+  return (
+    <ListsProfilerContextProvider
+      value={{
+        onInteractive: onInteractiveCallback,
+        onBlankArea: onBlankAreaCallback,
+      }}
+    >
+      {children}
+    </ListsProfilerContextProvider>
+  );
+};
+
+export default ListsProfiler;

package/src/ListsProfilerContext.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+interface ListsProfilerController {
+  onInteractive: (TTI: number, listName: string) => void;
+  onBlankArea: (offsetStart: number, offsetEnd: number, listName: string) => void;
+}
+
+export const ListsProfilerContext = React.createContext<ListsProfilerController>({
+  onInteractive: () => {},
+  onBlankArea: () => {},
+});
+
+export const ListsProfilerContextProvider = ListsProfilerContext.Provider;

package/src/ListsProfilerModule.ts

@@ -0,0 +1,25 @@
+import type {KeplerTurboModule} from '@amazon-devices/keplerscript-turbomodule-api';
+import {TurboModuleRegistry} from '@amazon-devices/keplerscript-turbomodule-api';
+
+interface Spec extends KeplerTurboModule {
+    invokeCallback: () => void;
+}
+
+const nativeModule = TurboModuleRegistry.get<Spec>('AmazonReactNativePerformanceListsProfilerModule') as Spec;
+
+interface ListsProfilerModule {
+    invokeCallback: () => void;
+}
+
+const module: ListsProfilerModule = {
+    invokeCallback() {
+        if (!nativeModule) {
+            throw new Error(
+                    'Lists profiler module not found in NativeModules. Chances are you\'re in a test environment, but the mocks have not been setup correctly');
+        }
+
+        nativeModule.invokeCallback();
+    },
+};
+
+export default module;

package/src/ListsProfilerProps.ts

@@ -0,0 +1,18 @@
+interface ListsProfilerProps {
+  /**
+   * Triggered when a list wrapped in a list performance view becomes interactive.
+   * @param TTI: Reported time-to-interactive
+   * @param listName - Name of the list that triggered the event defined in the list performance view
+   */
+  onInteractive?: (TTI: number, listName: string) => void;
+  /**
+   * Triggered when a list wrapped in a list performance view is scrolled and reports a blank area.
+   * @param offsetStart - Offset at the beginning of the list (top when the list is vertical)
+   * @param offsetEnd - Offset at the end of the list (bottom when the list is vertical)
+   * @param listName - Name of the list that triggered the event defined in the list performance view
+   */
+  onBlankArea?: (offsetStart: number, offsetEnd: number, listName: string) => void;
+  children: JSX.Element;
+}
+
+export default ListsProfilerProps;

package/src/__tests__/FlashListPerformanceView.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import FlashListPerformanceView from '../FlashListPerformanceView';
+import { ListsProfilerContextProvider } from '../ListsProfilerContext';
+import 'jest-extended';
+
+jest.mock('../FlashListPerformanceViewNativeComponent', () => {
+  const RN = require('react-native');
+
+  return {
+    FlashListPerformanceViewNativeComponent: ({ onInteractive, onBlankAreaEvent, children }: any) => (
+      <RN.View>
+        <RN.TouchableOpacity testID="interactive" onPress={onInteractive}>
+          <RN.Text>Interactive Event</RN.Text>
+        </RN.TouchableOpacity>
+        <RN.TouchableOpacity testID="blankArea" onPress={onBlankAreaEvent}>
+          <RN.Text>Blank Area Event</RN.Text>
+        </RN.TouchableOpacity>
+        {children}
+      </RN.View>
+    ),
+  };
+});
+
+describe('FlashListPerformanceView', () => {
+  let mockListsProfilerController: any;
+
+  beforeEach(() => {
+    mockListsProfilerController = {
+      onInteractive: jest.fn(),
+      onBlankArea: jest.fn(),
+    };
+  });
+
+  const wrapper = ({ children }: { children: React.ReactElement }) => (
+    <ListsProfilerContextProvider value={mockListsProfilerController}>
+      {children}
+    </ListsProfilerContextProvider>
+  );
+
+  it('calls listsProfilerController.onInteractive on interactive event', () => {
+    const { getByTestId } = render(
+      <FlashListPerformanceView listName="TestList">
+        <Text>Child</Text>
+      </FlashListPerformanceView>,
+      { wrapper }
+    );
+
+    fireEvent.press(getByTestId('interactive'), {
+      nativeEvent: { timestamp: Date.now() },
+    });
+
+    expect(mockListsProfilerController.onInteractive).toHaveBeenCalledWith(expect.any(Number), 'TestList');
+  });
+
+  it('calls listsProfilerController.onBlankArea on blank area event', () => {
+    const { getByTestId } = render(
+      <FlashListPerformanceView listName="TestList">
+        <Text>Child</Text>
+      </FlashListPerformanceView>,
+      { wrapper }
+    );
+
+    fireEvent.press(getByTestId('blankArea'), {
+      nativeEvent: { offsetStart: 100, offsetEnd: 200 },
+    });
+
+    expect(mockListsProfilerController.onBlankArea).toHaveBeenCalledWith(100, 200, 'TestList');
+  });
+});

package/src/__tests__/FlatListPerformanceView.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import FlatListPerformanceView from '../FlatListPerformanceView';
+import { ListsProfilerContextProvider } from '../ListsProfilerContext';
+import 'jest-extended';
+
+jest.mock('../FlatListPerformanceViewNativeComponent', () => {
+  const RN = require('react-native');
+  
+  return {
+    FlatListPerformanceViewNativeComponent: ({ onInteractive, onBlankAreaEvent, children }: any) => (
+      <RN.View>
+        <RN.TouchableOpacity testID="interactive" onPress={onInteractive}>
+          <RN.Text>Interactive Event</RN.Text>
+        </RN.TouchableOpacity>
+        <RN.TouchableOpacity testID="blankArea" onPress={onBlankAreaEvent}>
+          <RN.Text>Blank Area Event</RN.Text>
+        </RN.TouchableOpacity>
+        {children}
+      </RN.View>
+    ),
+  };
+});
+
+describe('FlatListPerformanceView', () => {
+  let mockOnInteractive: jest.Mock;
+  let mockOnBlankArea: jest.Mock;
+  let mockListsProfilerController: any;
+
+  beforeEach(() => {
+    mockOnInteractive = jest.fn();
+    mockOnBlankArea = jest.fn();
+    mockListsProfilerController = {
+      onInteractive: jest.fn(),
+      onBlankArea: jest.fn(),
+    };
+  });
+
+  const wrapper = ({ children }: { children: React.ReactElement }) => (
+    <ListsProfilerContextProvider value={mockListsProfilerController}>
+      {children}
+    </ListsProfilerContextProvider>
+  );
+
+  it('calls onInteractive and listsProfilerController.onInteractive on interactive event', () => {
+    const { getByTestId } = render(
+      <FlatListPerformanceView listName="TestList" onInteractive={mockOnInteractive}>
+        <Text>Child</Text>
+      </FlatListPerformanceView>,
+      { wrapper }
+    );
+
+    fireEvent.press(getByTestId('interactive'), {
+      nativeEvent: { timestamp: Date.now() },
+    });
+
+    expect(mockOnInteractive).toHaveBeenCalledWith(expect.any(Number), 'TestList');
+    expect(mockListsProfilerController.onInteractive).toHaveBeenCalledWith(expect.any(Number), 'TestList');
+  });
+
+  it('calls onBlankArea and listsProfilerController.onBlankArea on blank area event', () => {
+    const { getByTestId } = render(
+      <FlatListPerformanceView listName="TestList" onBlankArea={mockOnBlankArea}>
+        <Text>Child</Text>
+      </FlatListPerformanceView>,
+      { wrapper }
+    );
+
+    fireEvent.press(getByTestId('blankArea'), {
+      nativeEvent: { offsetStart: 100, offsetEnd: 200 },
+    });
+
+    expect(mockOnBlankArea).toHaveBeenCalledWith(100, 200, 'TestList');
+    expect(mockListsProfilerController.onBlankArea).toHaveBeenCalledWith(100, 200, 'TestList');
+  });
+});

package/src/__tests__/ListProfiler.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import ListsProfiler from '../ListsProfiler';
+import { ListsProfilerContext } from '../ListsProfilerContext';
+
+jest.mock('react-native-flipper', () => ({
+  addPlugin: jest.fn(),
+}));
+
+describe('ListsProfiler', () => {
+  let mockOnInteractive: jest.Mock;
+  let mockOnBlankArea: jest.Mock;
+  let mockConnection: { send: jest.Mock };
+
+  beforeEach(() => {
+    mockOnInteractive = jest.fn();
+    mockOnBlankArea = jest.fn();
+    mockConnection = {
+      send: jest.fn(),
+    };
+
+    (require('react-native-flipper').addPlugin as jest.Mock).mockImplementation(({ onConnect }: { onConnect: (connection: any) => void }) => {
+      onConnect(mockConnection);
+    });
+  });
+
+  it('calls Flipper addPlugin on mount', () => {
+    const wrapper = ({children}: {children: React.ReactElement}) => (
+      <ListsProfiler onInteractive={mockOnInteractive} onBlankArea={mockOnBlankArea}>{children}</ListsProfiler>
+    );
+
+    renderHook(() => React.useContext(ListsProfilerContext), { wrapper });
+
+    expect(require('react-native-flipper').addPlugin).toHaveBeenCalledTimes(1);
+  });
+
+  it('invokes onInteractive callback', () => {
+    const wrapper = ({children}: {children: React.ReactElement}) => (
+      <ListsProfiler onInteractive={mockOnInteractive} onBlankArea={mockOnBlankArea}>{children}</ListsProfiler>
+    );
+    const { result } = renderHook(() => React.useContext(ListsProfilerContext), { wrapper });
+  
+    result.current.onInteractive(2000, 'TestList');
+
+    expect(mockOnInteractive).toHaveBeenCalledWith(2000, 'TestList');
+  });
+
+  it('invokes onBlankArea callback', () => {
+    const wrapper = ({children}: {children: React.ReactElement}) => (
+      <ListsProfiler onInteractive={mockOnInteractive} onBlankArea={mockOnBlankArea}>{children}</ListsProfiler>
+    );
+
+    const { result } = renderHook(() => React.useContext(ListsProfilerContext), { wrapper });
+
+    result.current.onBlankArea(100, 200, 'TestList');
+
+    expect(mockOnBlankArea).toHaveBeenCalledWith(100, 200, 'TestList');
+  });
+});
+

package/src/__tests__/setupJest.js

@@ -0,0 +1,5 @@
+jest.mock('@amazon-devices/keplerscript-turbomodule-api', () => ({
+    TurboModuleRegistry: {
+      get: jest.fn(),
+    },
+  }));

package/src/index.ts

@@ -0,0 +1,3 @@
+export {default as FlatListPerformanceView} from './FlatListPerformanceView';
+export {default as FlashListPerformanceView} from './FlashListPerformanceView';
+export {default as ListsProfiler} from './ListsProfiler';