react-native-list 2.0.0-alpha.1 → 2.0.0-alpha.2

package/lib/specs/ViewHolder.nitro.d.ts

@@ -0,0 +1,6 @@
+import type { HybridView, HybridViewMethods, HybridViewProps } from 'react-native-nitro-modules';
+export interface ViewHolderProps extends HybridViewProps {
+}
+export interface ViewHolderMethods extends HybridViewMethods {
+}
+export type ViewHolder = HybridView<ViewHolderProps, ViewHolderMethods>;

package/lib/specs/ViewHolder.nitro.js

@@ -0,0 +1 @@
+export {};

package/lib/views/List.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { AnyMap } from 'react-native-nitro-modules';
+import { ViewStyle } from 'react-native';
+export type ListKey = string | number;
+export type ListItemSize = {
+    width?: number;
+    height?: number;
+};
+export type ListRenderer<T extends AnyMap, TType extends string> = {
+    renderItemWorklet: (info: {
+        item?: T;
+        index?: number;
+        key?: string;
+        type: TType;
+    }) => React.ReactElement<any>;
+    isContentEqualWorklet: (oldItem: T, newItem: T) => boolean;
+};
+export type ListProps<T extends AnyMap, TType extends string> = {
+    data: readonly T[];
+    keyExtractor: (item: T, index: number) => ListKey;
+    getItemType: (item: T, index: number) => TType;
+    getItemSize?: (item: T, index: number) => ListItemSize;
+    renderers: Record<TType, ListRenderer<T, TType>>;
+    style?: ViewStyle;
+};
+export type ListRef<T extends AnyMap> = {
+    replaceData(data: readonly T[], animated?: boolean): void;
+    insertItem(index: number, item: T): void;
+    updateItem(index: number, item: T): void;
+    removeItem(index: number): void;
+    moveItem(fromIndex: number, toIndex: number): void;
+};
+export declare const List: <T extends AnyMap, TType extends string>(props: ListProps<T, TType> & {
+    ref?: React.ForwardedRef<ListRef<T>>;
+}) => React.ReactElement | null;

package/lib/views/List.js

@@ -0,0 +1,225 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { UiListHostComponent } from './UiListHostComponent';
+import { callback } from 'react-native-nitro-modules';
+import { scheduleOnUI } from 'react-native-worklets';
+import { renderSyncWorklet, uiListModuleBoxed, } from '../renderer/fabric/RenderHelper';
+import { View } from 'react-native';
+import { getReactFabricRenderer } from '../renderer/react/ReactFabricRenderer';
+function assertValidSize(size, index) {
+    const width = size.width;
+    const height = size.height;
+    if (width != null && (!Number.isFinite(width) || width <= 0)) {
+        throw new Error(`List item at index ${index} has an invalid width.`);
+    }
+    if (height != null && (!Number.isFinite(height) || height <= 0)) {
+        throw new Error(`List item at index ${index} has an invalid height.`);
+    }
+}
+function stringifyKey(key, index) {
+    if (typeof key === 'string') {
+        return key;
+    }
+    if (typeof key === 'number') {
+        return String(key);
+    }
+    throw new Error(`List item at index ${index} returned an invalid key.`);
+}
+function createNativeItem(item, index, props) {
+    const rawKey = props.keyExtractor(item, index);
+    const key = stringifyKey(rawKey, index);
+    const type = props.getItemType(item, index);
+    const renderer = props.renderers[type];
+    if (renderer == null) {
+        throw new Error(`List item at index ${index} uses unknown type "${type}".`);
+    }
+    const size = props.getItemSize?.(item, index) ?? {};
+    assertValidSize(size, index);
+    return {
+        key: key,
+        type: type,
+        width: size.width,
+        height: size.height,
+        data: item,
+    };
+}
+function createNativeItems(data, props) {
+    const seenIdentities = new Set();
+    const items = [];
+    for (let index = 0; index < data.length; index++) {
+        const item = data[index];
+        if (item == null) {
+            throw new Error(`List item at index ${index} is undefined.`);
+        }
+        const nativeItem = createNativeItem(item, index, props);
+        const identity = nativeItem.type + ':' + nativeItem.key;
+        if (seenIdentities.has(identity)) {
+            throw new Error(`List contains duplicate item identity "${identity}".`);
+        }
+        seenIdentities.add(identity);
+        items.push(nativeItem);
+    }
+    return items;
+}
+function ListInner(props, forwardedRef) {
+    const { data, getItemSize, getItemType, keyExtractor, renderers, style } = props;
+    const isSetup = useRef(false);
+    const nativeListRef = useRef(null);
+    const [isNativeReady, setIsNativeReady] = useState(false);
+    const nativeItems = useMemo(() => {
+        const normalizationProps = {
+            data,
+            keyExtractor,
+            getItemType,
+            getItemSize,
+            renderers,
+        };
+        return createNativeItems(data, normalizationProps);
+    }, [data, getItemSize, getItemType, keyExtractor, renderers]);
+    useImperativeHandle(forwardedRef, () => {
+        return {
+            replaceData(nextData, animated = true) {
+                const ref = nativeListRef.current;
+                if (ref == null)
+                    return;
+                const nextItems = createNativeItems(nextData, props);
+                ref.setData(nextItems, animated);
+            },
+            insertItem(index, item) {
+                const ref = nativeListRef.current;
+                if (ref == null)
+                    return;
+                const nativeItem = createNativeItem(item, index, props);
+                ref.insertItem(index, nativeItem);
+            },
+            updateItem(index, item) {
+                const ref = nativeListRef.current;
+                if (ref == null)
+                    return;
+                const nativeItem = createNativeItem(item, index, props);
+                ref.updateItem(index, nativeItem);
+            },
+            removeItem(index) {
+                const ref = nativeListRef.current;
+                if (ref == null)
+                    return;
+                ref.removeItem(index);
+            },
+            moveItem(fromIndex, toIndex) {
+                const ref = nativeListRef.current;
+                if (ref == null)
+                    return;
+                ref.moveItem(fromIndex, toIndex);
+            },
+        };
+    }, [props]);
+    useEffect(() => {
+        const ref = nativeListRef.current;
+        if (ref == null || !isNativeReady)
+            return;
+        ref.setData(nativeItems, true);
+    }, [isNativeReady, nativeItems]);
+    return (React.createElement(UiListHostComponent, { style: style, hybridRef: callback((ref) => {
+            nativeListRef.current = ref;
+            if (isSetup.current)
+                return;
+            isSetup.current = true;
+            scheduleOnUI(() => {
+                'worklet';
+                const { nativeLog, reactRender } = getReactFabricRenderer();
+                const tagToArrayPosition = {};
+                const tagToItemId = {};
+                let nextItemId = 0;
+                const elementsRendered = [];
+                const uiListModuleUnboxed = uiListModuleBoxed.unbox();
+                ref.setListCallbacks(uiListModuleUnboxed, (type) => {
+                    const nativeRef = globalThis.React.createRef();
+                    const itemId = nextItemId++;
+                    const typedType = type;
+                    const renderer = renderers[typedType];
+                    if (renderer == null) {
+                        throw new Error('No renderer for list item type ' + type);
+                    }
+                    const newElement = renderer.renderItemWorklet({
+                        type: typedType,
+                    });
+                    const newProps = {
+                        key: 'itemid-' + itemId,
+                        ref: nativeRef,
+                        collapsable: false,
+                    };
+                    const newElementWithKey = globalThis.React.cloneElement(newElement, newProps);
+                    const newLength = elementsRendered.push(newElementWithKey);
+                    const currentIndex = newLength - 1;
+                    const parentContainer = React.createElement(View, null, elementsRendered);
+                    reactRender(parentContainer, () => {
+                        nativeLog('Render complete');
+                    });
+                    if (nativeRef.current == null) {
+                        throw new Error('Ref is null after render');
+                    }
+                    const tag = nativeRef.current.__nativeTag;
+                    tagToArrayPosition[tag] = currentIndex;
+                    tagToItemId[tag] = itemId;
+                    const start = globalThis.performance.now();
+                    renderSyncWorklet();
+                    const end = globalThis.performance.now();
+                    nativeLog('renderSync took ', end - start, 'ms');
+                    return tag;
+                }, (reactTag, item, index) => {
+                    const typedType = item.type;
+                    const renderer = renderers[typedType];
+                    if (renderer == null) {
+                        throw new Error('No renderer for list item type ' + item.type);
+                    }
+                    const itemId = tagToItemId[reactTag];
+                    if (itemId == null) {
+                        throw new Error('No itemId for tag ' + reactTag);
+                    }
+                    const newElement = renderer.renderItemWorklet({
+                        item: item.data,
+                        index,
+                        key: item.key,
+                        type: typedType,
+                    });
+                    const newProps = {
+                        key: 'itemid-' + itemId,
+                        collapsable: false,
+                    };
+                    const newElementWithKey = globalThis.React.cloneElement(newElement, newProps);
+                    const position = tagToArrayPosition[reactTag];
+                    if (position == null) {
+                        throw new Error('No position for tag ' + reactTag);
+                    }
+                    elementsRendered[position] = newElementWithKey;
+                    const parentContainer = React.createElement(View, null, elementsRendered);
+                    reactRender(parentContainer, () => {
+                        nativeLog('Update Render complete');
+                    });
+                    const start = globalThis.performance.now();
+                    renderSyncWorklet();
+                    const end = globalThis.performance.now();
+                    nativeLog('Update renderSync took ', end - start, 'ms');
+                    return true;
+                }, (oldItem, newItem) => {
+                    if (oldItem.type !== newItem.type) {
+                        return false;
+                    }
+                    if (oldItem.width !== newItem.width) {
+                        return false;
+                    }
+                    if (oldItem.height !== newItem.height) {
+                        return false;
+                    }
+                    const typedType = newItem.type;
+                    const renderer = renderers[typedType];
+                    if (renderer == null) {
+                        throw new Error('No renderer for list item type ' + newItem.type);
+                    }
+                    return renderer.isContentEqualWorklet(oldItem.data, newItem.data);
+                });
+                ref.setData(nativeItems, false);
+            });
+            setIsNativeReady(true);
+        }) }));
+}
+export const List = forwardRef(ListInner);

package/lib/views/UiListHostComponent.d.ts

@@ -0,0 +1,2 @@
+import { UiListViewMethods, UiListViewProps } from '../specs/UiListView.nitro';
+export declare const UiListHostComponent: import("react-native-nitro-modules").ReactNativeView<UiListViewProps, UiListViewMethods>;

package/lib/views/UiListHostComponent.js

@@ -0,0 +1,3 @@
+import { getHostComponent } from 'react-native-nitro-modules';
+import UiListViewConfig from '../../nitrogen/generated/shared/json/UiListViewConfig.json';
+export const UiListHostComponent = getHostComponent('UiListView', () => UiListViewConfig);

package/metro-config.js

@@ -11,6 +11,67 @@ function isRendererProxyImport(moduleName) {
   return /(?:^|\/)RendererProxy(?:\.js)?$/.test(moduleName)
 }
 
+//#region Turbo module handling
+// react-native-worklets installs a shim preventing the usage of TurboModules on other runtimes:
+// - https://github.com/software-mansion/react-native-reanimated/blob/9c2e3b05216b22d3c1ed4be67719876d1fa9115d/packages/react-native-worklets/bundleMode/shims/turboModuleRegistryShim.js#L36
+// As we properly handle turbo modules we want to allow for it.
+// So we basically redirect all imports of the shim back to the original TurboModuleRegistry.js file:
+const turboModuleRegistryModuleName =
+  'react-native/Libraries/TurboModule/TurboModuleRegistry'
+const turboModuleRegistryPath = require.resolve(turboModuleRegistryModuleName)
+const turboModuleRegistryFileSuffix = path.join(
+  'react-native',
+  'Libraries',
+  'TurboModule',
+  'TurboModuleRegistry.js'
+)
+const workletsTurboModuleRegistryShimSuffix = path.join(
+  'react-native-worklets',
+  'bundleMode',
+  'shims',
+  'turboModuleRegistryShim.js'
+)
+
+function isTurboModuleRegistryImport(moduleName) {
+  return moduleName === turboModuleRegistryModuleName
+}
+
+function isSourceFileResolution(result) {
+  if (result == null) {
+    return false
+  }
+
+  if (result.type !== 'sourceFile') {
+    return false
+  }
+
+  return typeof result.filePath === 'string'
+}
+
+function isTurboModuleRegistryResolution(result) {
+  if (!isSourceFileResolution(result)) {
+    return false
+  }
+
+  return result.filePath.endsWith(turboModuleRegistryFileSuffix)
+}
+
+function isWorkletsTurboModuleRegistryShimResolution(result) {
+  if (!isSourceFileResolution(result)) {
+    return false
+  }
+
+  return result.filePath.endsWith(workletsTurboModuleRegistryShimSuffix)
+}
+
+function createTurboModuleRegistryResolution() {
+  return {
+    type: 'sourceFile',
+    filePath: turboModuleRegistryPath,
+  }
+}
+//#endregion
+
 function isReactNativeDomInternalsImporter(originModulePath) {
   if (typeof originModulePath !== 'string') {
     return false
@@ -26,6 +87,10 @@ function getReactNativeListMetroConfig(config) {
   const currentResolveRequest = config.resolver.resolveRequest
 
   config.resolver.resolveRequest = (context, moduleName, platform) => {
+    if (isTurboModuleRegistryImport(moduleName)) {
+      return createTurboModuleRegistryResolution()
+    }
+
     // Redirect only React Native DOM internals to a runtime-switching proxy.
     if (
       isRendererProxyImport(moduleName) &&
@@ -37,11 +102,18 @@ function getReactNativeListMetroConfig(config) {
       }
     }
 
-    return (currentResolveRequest || context.resolveRequest)(
-      context,
-      moduleName,
-      platform
-    )
+    const resolveRequest = currentResolveRequest || context.resolveRequest
+    const resolved = resolveRequest(context, moduleName, platform)
+
+    if (isTurboModuleRegistryResolution(resolved)) {
+      return createTurboModuleRegistryResolution()
+    }
+
+    if (isWorkletsTurboModuleRegistryShimResolution(resolved)) {
+      return createTurboModuleRegistryResolution()
+    }
+
+    return resolved
   }
 
   return config

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-list",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.2",
   "description": "React Native List",
   "main": "lib/index",
   "module": "lib/index",
@@ -81,7 +81,7 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-worklets": "*",
+    "react-native-worklets": ">=0.10.0",
     "react-native-nitro-modules": "*"
   },
   "eslintConfig": {