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

package/src/ListDataSource.ts

@@ -0,0 +1,232 @@
+import { NitroModules } from 'react-native-nitro-modules'
+import type { AnyMap } from 'react-native-nitro-modules'
+import type { NativeListDataSource } from './specs/NativeListDataSource.nitro'
+import { useEffect, useRef } from 'react'
+import { scheduleOnUI } from 'react-native-worklets'
+
+export type ListKey = string
+
+export type ListItemSize = {
+  width?: number
+  height?: number
+}
+
+export type ListItem<
+  Type = string,
+  TData extends AnyMap = AnyMap,
+> = ListItemSize & {
+  key: ListKey
+  type: Type
+  data: TData
+}
+
+export type ListItemType<TItem extends ListItem> = TItem['type']
+
+export type ListItemForType<
+  TItem extends ListItem,
+  TType extends ListItemType<TItem>,
+> =
+  Extract<TItem, { type: TType }> extends never
+    ? TItem
+    : Extract<TItem, { type: TType }>
+
+export type ListContentEqualByType<TItem extends ListItem> = {
+  [TType in ListItemType<TItem>]: (
+    oldItem: ListItemForType<TItem, TType>,
+    newItem: ListItemForType<TItem, TType>
+  ) => boolean
+}
+
+export type ListDataSourceConfig<TItem extends ListItem> = {
+  isContentEqualByType?: ListContentEqualByType<TItem>
+}
+
+export type ListDataSource<TItem extends ListItem> = {
+  release(): void
+  replaceData(data: readonly TItem[], animated?: boolean): void
+  insertItem(index: number, item: TItem): void
+  updateItem(index: number, item: TItem): void
+  removeItem(index: number): void
+  moveItem(fromIndex: number, toIndex: number): void
+}
+
+export type ListDataSourceMutation =
+  | {
+      type: 'replaceData'
+    }
+  | {
+      type: 'removeItem'
+      itemKey: string
+    }
+  | {
+      type: 'updateItem'
+      previousItemKey: string
+    }
+
+type ListDataSourceMutationListener = (mutation: ListDataSourceMutation) => void
+
+type NativeListDataSourceBacked<TItem extends ListItem> =
+  ListDataSource<TItem> & {
+    __nativeDataSource: NativeListDataSource
+    __setConfig(config: unknown): void
+    __addMutationListener(listener: ListDataSourceMutationListener): () => void
+  }
+
+function setContentEqualCallback<TItem extends ListItem>(
+  nativeDataSource: NativeListDataSource,
+  config: ListDataSourceConfig<TItem>
+) {
+  nativeDataSource.setContentEqualCallback((oldItem, newItem) => {
+    if (oldItem.type !== newItem.type) {
+      return false
+    }
+    if (oldItem.width !== newItem.width) {
+      return false
+    }
+    if (oldItem.height !== newItem.height) {
+      return false
+    }
+
+    const type = newItem.type as TItem['type']
+    const isContentEqual = config.isContentEqualByType?.[type]
+    if (isContentEqual == null) {
+      return false
+    }
+
+    return isContentEqual(
+      oldItem as unknown as ListItemForType<TItem, typeof type>,
+      newItem as unknown as ListItemForType<TItem, typeof type>
+    )
+  })
+}
+
+export function createListDataSource<TItem extends ListItem>(
+  config: ListDataSourceConfig<TItem> = {}
+): ListDataSource<TItem> {
+  const nativeDataSource =
+    NitroModules.createHybridObject<NativeListDataSource>(
+      'NativeListDataSource'
+    )
+  let currentConfig = config
+  let currentItems: TItem[] = []
+  const mutationListeners = new Set<ListDataSourceMutationListener>()
+
+  setContentEqualCallback(nativeDataSource, currentConfig)
+
+  function notifyMutationListeners(mutation: ListDataSourceMutation) {
+    mutationListeners.forEach((listener) => {
+      scheduleOnUI(listener, mutation)
+    })
+  }
+
+  const dataSource: NativeListDataSourceBacked<TItem> = {
+    __nativeDataSource: nativeDataSource,
+    __setConfig(nextConfig: unknown) {
+      currentConfig = nextConfig as unknown as ListDataSourceConfig<TItem>
+      setContentEqualCallback(nativeDataSource, currentConfig)
+    },
+    __addMutationListener(listener: ListDataSourceMutationListener) {
+      mutationListeners.add(listener)
+      return () => {
+        mutationListeners.delete(listener)
+      }
+    },
+    release() {
+      currentConfig = {}
+      currentItems = []
+      mutationListeners.clear()
+      nativeDataSource.dispose()
+    },
+    replaceData(data: readonly TItem[], animated: boolean = false) {
+      const nextItems = [...data]
+      currentItems = nextItems
+      notifyMutationListeners({
+        type: 'replaceData',
+      })
+      nativeDataSource.replaceData(nextItems, animated)
+    },
+    insertItem(index: number, item: TItem) {
+      currentItems.splice(index, 0, item)
+      nativeDataSource.insertItem(index, item)
+    },
+    updateItem(index: number, item: TItem) {
+      const previousItem = currentItems[index]
+      if (previousItem != null && previousItem.key !== item.key) {
+        currentItems[index] = item
+        notifyMutationListeners({
+          type: 'updateItem',
+          previousItemKey: previousItem.key,
+        })
+        nativeDataSource.updateItem(index, item)
+        return
+      }
+
+      currentItems[index] = item
+      nativeDataSource.updateItem(index, item)
+    },
+    removeItem(index: number) {
+      const removedItems = currentItems.slice(index, index + 1)
+      const removedItem = removedItems[0]
+      currentItems.splice(index, 1)
+      if (removedItem != null) {
+        notifyMutationListeners({
+          type: 'removeItem',
+          itemKey: removedItem.key,
+        })
+      }
+      nativeDataSource.removeItem(index)
+    },
+    moveItem(fromIndex: number, toIndex: number) {
+      const removedItems = currentItems.slice(fromIndex, fromIndex + 1)
+      const movedItem = removedItems[0]
+      if (movedItem != null) {
+        currentItems.splice(fromIndex, 1)
+        currentItems.splice(toIndex, 0, movedItem)
+      }
+      nativeDataSource.moveItem(fromIndex, toIndex)
+    },
+  }
+  return dataSource
+}
+
+export function getNativeListDataSource<TItem extends ListItem>(
+  dataSource: ListDataSource<TItem>
+): NativeListDataSource {
+  const nativeBackedDataSource = dataSource as NativeListDataSourceBacked<TItem>
+  return nativeBackedDataSource.__nativeDataSource
+}
+
+export function addListDataSourceMutationListener<TItem extends ListItem>(
+  dataSource: ListDataSource<TItem>,
+  listener: ListDataSourceMutationListener
+) {
+  const nativeBackedDataSource = dataSource as NativeListDataSourceBacked<TItem>
+  return nativeBackedDataSource.__addMutationListener(listener)
+}
+
+export function useListDataSource<TItem extends ListItem>(
+  config: ListDataSourceConfig<TItem> & {
+    data: readonly TItem[]
+  }
+): ListDataSource<TItem> {
+  const dataSourceRef = useRef<ListDataSource<TItem> | null>(null)
+  if (dataSourceRef.current == null) {
+    dataSourceRef.current = createListDataSource(config)
+  }
+
+  const dataSource = dataSourceRef.current
+  const nativeBackedDataSource = dataSource as NativeListDataSourceBacked<TItem>
+
+  useEffect(() => {
+    nativeBackedDataSource.__setConfig(config)
+    dataSource.replaceData(config.data, true)
+  }, [config, dataSource, nativeBackedDataSource])
+
+  useEffect(() => {
+    return () => {
+      dataSource.release()
+    }
+  }, [dataSource])
+
+  return dataSource
+}

package/src/ListLayout.ts

@@ -0,0 +1,95 @@
+import { NitroModules } from 'react-native-nitro-modules'
+import { useEffect, useMemo } from 'react'
+import type { NativeListLayout } from './specs/NativeListLayout.nitro'
+import type {
+  NativeLinearListLayout,
+  NativeLinearListLayoutConfig,
+} from './specs/NativeLinearListLayout.nitro'
+
+type LinearListLayoutBaseConfig = Omit<
+  Partial<NativeLinearListLayoutConfig>,
+  'iosConfig'
+>
+
+export type ItemSizeEstimate =
+  | {
+      width: number
+      height?: number
+    }
+  | {
+      width?: number
+      height: number
+    }
+
+export type LinearListLayoutIOSConfig = {
+  estimatedItemSize?: ItemSizeEstimate
+}
+
+export type LinearListLayoutConfig = LinearListLayoutBaseConfig & {
+  iosConfig?: LinearListLayoutIOSConfig
+}
+
+export type ListLayout = {
+  __nativeLayout: NativeListLayout
+  release(): void
+}
+
+const defaultLinearListLayoutConfig: NativeLinearListLayoutConfig = {
+  topInset: 16,
+  bottomInset: 16,
+  itemSpacing: 12,
+  itemHorizontalInset: 0,
+  itemVerticalInset: 0,
+}
+
+function normalizeLinearConfig(
+  config: LinearListLayoutConfig = {}
+): NativeLinearListLayoutConfig {
+  return {
+    topInset: config.topInset ?? defaultLinearListLayoutConfig.topInset,
+    bottomInset:
+      config.bottomInset ?? defaultLinearListLayoutConfig.bottomInset,
+    itemSpacing:
+      config.itemSpacing ?? defaultLinearListLayoutConfig.itemSpacing,
+    itemHorizontalInset:
+      config.itemHorizontalInset ??
+      defaultLinearListLayoutConfig.itemHorizontalInset,
+    itemVerticalInset:
+      config.itemVerticalInset ??
+      defaultLinearListLayoutConfig.itemVerticalInset,
+    iosConfig: config.iosConfig,
+  }
+}
+
+export function createLinearListLayout(
+  config?: LinearListLayoutConfig
+): ListLayout {
+  const nativeLayout = NitroModules.createHybridObject<NativeLinearListLayout>(
+    'NativeLinearListLayout'
+  )
+  const normalizedConfig = normalizeLinearConfig(config)
+  nativeLayout.setConfig(normalizedConfig)
+
+  return {
+    __nativeLayout: nativeLayout,
+    release() {
+      nativeLayout.dispose()
+    },
+  }
+}
+
+export function useLinearListLayout(
+  config?: LinearListLayoutConfig
+): ListLayout {
+  const layout = useMemo(() => {
+    return createLinearListLayout(config)
+  }, [config])
+
+  useEffect(() => {
+    return () => {
+      layout.release()
+    }
+  }, [layout])
+
+  return layout
+}

package/src/UiListModule.ts

@@ -0,0 +1,5 @@
+import { NitroModules } from 'react-native-nitro-modules'
+import { UiListModule } from './specs/UIListModule.nitro'
+
+export const uiListModule =
+  NitroModules.createHybridObject<UiListModule>('UiListModule')

package/src/hooks/useChangeEffect.ts

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react'
+import type React from 'react'
+
+function areDependencyListsEqual(
+  currentDependencies: React.DependencyList,
+  previousDependencies: React.DependencyList
+) {
+  if (currentDependencies.length !== previousDependencies.length) {
+    return false
+  }
+
+  for (let index = 0; index < currentDependencies.length; index += 1) {
+    const currentDependency = currentDependencies[index]
+    const previousDependency = previousDependencies[index]
+    if (!Object.is(currentDependency, previousDependency)) {
+      return false
+    }
+  }
+
+  return true
+}
+
+/**
+ * Only runs if one of the dependencies has changed, but not on the initial render!
+ */
+export function useChangeEffect(
+  effect: React.EffectCallback,
+  dependencies: React.DependencyList
+) {
+  const previousDependencies = useRef<React.DependencyList | null>(null)
+
+  useEffect(() => {
+    const lastDependencies = previousDependencies.current
+    previousDependencies.current = dependencies
+    if (lastDependencies == null) {
+      return
+    }
+
+    const dependenciesAreEqual = areDependencyListsEqual(
+      dependencies,
+      lastDependencies
+    )
+    if (dependenciesAreEqual) {
+      return
+    }
+
+    return effect()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencies)
+}

package/src/index.tsx

@@ -0,0 +1,49 @@
+import { scheduleOnUI } from 'react-native-worklets'
+import { uiListModule } from './UiListModule'
+import { uiManagerHelper } from './renderer/fabric/UiManagerHelper'
+import { List } from './views/List'
+import { Platform } from 'react-native'
+import { getReactFabricRenderer } from './renderer/react/ReactFabricRenderer'
+
+export { ViewHolder } from './specs/ViewHolder.nitro'
+export { IOSWorkletsModuleProxyHolder } from './specs/IOSWorkletsModuleProxyHolder.nitro'
+export type { NativeListItem } from './specs/NativeListDataSource.nitro'
+export type { ListProps, ListRenderer, ListRenderers } from './views/List'
+export { createListDataSource, useListDataSource } from './ListDataSource'
+export type {
+  ListContentEqualByType,
+  ListDataSource,
+  ListDataSourceConfig,
+  ListItem,
+  ListItemForType,
+  ListItemSize,
+  ListItemType,
+  ListKey,
+} from './ListDataSource'
+export { createLinearListLayout, useLinearListLayout } from './ListLayout'
+export type {
+  ItemSizeEstimate,
+  LinearListLayoutConfig,
+  LinearListLayoutIOSConfig,
+  ListLayout,
+} from './ListLayout'
+
+const boxed = uiListModule
+const nativeFabricUIManager = globalThis.nativeFabricUIManager
+
+function setup() {
+  // TODO: ask SWM if they can remove their JS thread checks, then we could just access this from the UI thread.
+  const iosWorkletsModuleHolder =
+    Platform.OS === 'ios' ? uiListModule.iosGetWorkletsModule() : null
+  scheduleOnUI(() => {
+    'worklet'
+    globalThis.nativeFabricUIManager = nativeFabricUIManager
+    boxed.setupRuntime(iosWorkletsModuleHolder)
+
+    // This will setup the react instance on the UI runtime:
+    getReactFabricRenderer()
+  })
+}
+setup()
+
+export { List, uiListModule, uiManagerHelper }

package/src/privateGlobals.ts

@@ -0,0 +1,20 @@
+'use strict'
+
+import type * as ReactModule from 'react'
+import type { UiManagerBinding } from './specs/UIManagerHelper.nitro'
+
+declare global {
+  var log: (...args: unknown[]) => void
+  var nativeFabricUIManager: UiManagerBinding
+
+  interface GlobalThis {
+    React: typeof ReactModule
+  }
+
+  interface Performance {
+    now(): number
+  }
+  var performance: Performance
+}
+
+export {}

package/src/renderer/fabric/RenderHelper.ts

@@ -0,0 +1,29 @@
+import { NitroModules } from 'react-native-nitro-modules'
+import { uiListModule } from '../../UiListModule'
+import { uiManagerHelper } from './UiManagerHelper'
+import type { ShadowNodeList } from '../../specs/UIManagerHelper.nitro'
+
+export const uiListModuleBoxed = NitroModules.box(uiListModule)
+const capturedOnJS = global.nativeFabricUIManager
+const uiManagerHelperBoxed = NitroModules.box(uiManagerHelper)
+
+export function completeRootSyncWorklet(
+  surfaceId: number,
+  childSet: ShadowNodeList
+) {
+  'worklet'
+  const uiManagerHelperUnboxed = uiManagerHelperBoxed.unbox()
+  uiManagerHelperUnboxed.completeRootSync(capturedOnJS, surfaceId, childSet)
+}
+
+export function registerManagedSurfaceWorklet(surfaceId: number) {
+  'worklet'
+  const uiManagerHelperUnboxed = uiManagerHelperBoxed.unbox()
+  uiManagerHelperUnboxed.registerManagedSurface(surfaceId)
+}
+
+export function unregisterManagedSurfaceWorklet(surfaceId: number) {
+  'worklet'
+  const uiManagerHelperUnboxed = uiManagerHelperBoxed.unbox()
+  uiManagerHelperUnboxed.unregisterManagedSurface(surfaceId)
+}

package/src/renderer/fabric/UiManagerHelper.ts

@@ -0,0 +1,5 @@
+import { NitroModules } from 'react-native-nitro-modules'
+import { UiManagerHelper } from '../../specs/UIManagerHelper.nitro'
+
+export const uiManagerHelper =
+  NitroModules.createHybridObject<UiManagerHelper>('UiManagerHelper')