react-hook-tanstack-table 0.0.1

package/src/hooks/useTable.ts

@@ -0,0 +1,113 @@
+import { useCallback } from "react"
+
+import type {
+  RequiredKeys,
+  RowData,
+  Table,
+  TableOptionsResolved,
+} from "@tanstack/table-core"
+
+import { identity } from "../lib/identity"
+import { runGetters } from "../lib/runGetters"
+import { isShallowEqual } from "../lib/isShallowEqual"
+
+import type { IsEqual, RunGetters } from "../types"
+
+import { useTableWithSelector } from "./useTableWithSelector"
+
+export interface TableValues<TData extends RowData> extends RunGetters<
+  Table<TData>
+> {}
+
+const tableValuesCache = new WeakMap<
+  RequiredKeys<TableOptionsResolved<any>, "state">,
+  TableValues<any>
+>()
+
+const tableHandlersCache = new WeakMap<
+  Table<any>,
+  {
+    toggleAllColumnsVisibilityHandler: ReturnType<
+      Table<any>["getToggleAllColumnsVisibilityHandler"]
+    >
+    toggleAllPageRowsSelectedHandler: ReturnType<
+      Table<any>["getToggleAllPageRowsSelectedHandler"]
+    >
+    toggleAllRowsExpandedHandler: ReturnType<
+      Table<any>["getToggleAllRowsExpandedHandler"]
+    >
+    toggleAllRowsSelectedHandler: ReturnType<
+      Table<any>["getToggleAllRowsSelectedHandler"]
+    >
+  }
+>()
+
+const getTableValues = <TData extends RowData>(
+  table: Table<TData>,
+): TableValues<TData> => {
+  let cached = tableValuesCache.get(table.options)
+  if (!cached) {
+    let cachedHandlers = tableHandlersCache.get(table)
+    if (!cachedHandlers) {
+      cachedHandlers = {
+        toggleAllColumnsVisibilityHandler:
+          table.getToggleAllColumnsVisibilityHandler(),
+        toggleAllPageRowsSelectedHandler:
+          table.getToggleAllPageRowsSelectedHandler(),
+        toggleAllRowsExpandedHandler: table.getToggleAllRowsExpandedHandler(),
+        toggleAllRowsSelectedHandler: table.getToggleAllRowsSelectedHandler(),
+      }
+      tableHandlersCache.set(table, cachedHandlers)
+    }
+
+    const {
+      toggleAllColumnsVisibilityHandler,
+      toggleAllPageRowsSelectedHandler,
+      toggleAllRowsExpandedHandler,
+      toggleAllRowsSelectedHandler,
+    } = cachedHandlers
+
+    const { getColumn, getRow, ...rest } = table
+
+    cached = {
+      ...runGetters(rest),
+      getColumn,
+      getRow,
+      toggleAllColumnsVisibilityHandler,
+      toggleAllPageRowsSelectedHandler,
+      toggleAllRowsExpandedHandler,
+      toggleAllRowsSelectedHandler,
+    }
+    tableValuesCache.set(table.options, cached)
+  }
+  return cached
+}
+
+type Selector<TData extends RowData, Selection> = (
+  tableValues: TableValues<TData>,
+) => Selection
+
+export const useTable = <TData extends RowData, Selection = TableValues<TData>>(
+  table?: Table<TData> | undefined,
+  selector: Selector<TData, Selection> = identity as never,
+  isEqual: IsEqual<NoInfer<Selection>> = isShallowEqual,
+): Selection => {
+  const getSelection = useCallback(
+    (table: Table<TData>) => selector(getTableValues(table)),
+    [selector],
+  )
+
+  return useTableWithSelector(table, getSelection, isEqual)
+}
+
+const tableHook = useTable
+
+const tableHookʹ =
+  <TData extends RowData>(table?: Table<TData> | undefined) =>
+  <Selection = TableValues<TData>>(
+    selector: Selector<TData, Selection> = identity as never,
+    isEqual: IsEqual<NoInfer<Selection>> = isShallowEqual,
+  ): Selection =>
+    tableHook(table, selector, isEqual)
+
+export { tableHookʹ as useTableʹ }

package/src/hooks/useTableWithSelector.ts

@@ -0,0 +1,143 @@
+import {
+  use,
+  useCallback,
+  useInsertionEffect,
+  useMemo,
+  useRef,
+  useSyncExternalStore,
+} from "react"
+
+import type {
+  RequiredKeys,
+  RowData,
+  Table,
+  TableOptionsResolved,
+} from "@tanstack/table-core"
+
+import { TableContext } from "../contexts/TableContext"
+
+import { identity } from "../lib/identity"
+import { tableRegistry } from "../lib/tableRegistry"
+import { invariant } from "../lib/invariant"
+
+import type { IsEqual } from "../types"
+
+export const useTableWithSelector = <
+  TData extends RowData,
+  Selection = Table<TData>,
+>(
+  table?: Table<TData> | undefined,
+  selector: (table: Table<TData>) => Selection = identity as never,
+  isEqual?: IsEqual<NoInfer<Selection>> | undefined,
+): Selection => {
+  "use no memo"
+
+  const resolvedTable = table ?? use<Table<TData> | null>(TableContext)
+
+  invariant(
+    resolvedTable,
+    "`useTableWithSelector` must be used as a descendent of `TableContext` or provided with a `Table` as an argument!",
+  )
+
+  const listeners = useMemo(
+    () => (tableRegistry.get(resolvedTable) ?? {}).listeners,
+    [resolvedTable],
+  )
+
+  invariant(
+    listeners,
+    "The provided/found `Table` instance cannot be subscribed to. Was it created by the correct `useReactTable` hook?",
+  )
+
+  const subscribe = useCallback(
+    (onTableChange: () => void) => {
+      listeners.add(onTableChange)
+      return () => {
+        listeners.delete(onTableChange)
+      }
+    },
+    [listeners],
+  )
+
+  // Use this to track the rendered snapshot.
+  const instRef = useRef<
+    | {
+        hasValue: false
+        value: null
+      }
+    | { hasValue: true; value: Selection }
+  >({
+    hasValue: false,
+    value: null,
+  })
+
+  // eslint-disable-next-line react-hooks/immutability
+  const getSnapshot = useMemo(() => {
+    let hasMemo = false,
+      memoizedTableOptions: RequiredKeys<TableOptionsResolved<TData>, "state">,
+      memoizedSelection: Selection
+
+    return () => {
+      const nextTableOptions = resolvedTable.options
+      if (!hasMemo) {
+        // The first time the hook is called, there is no memoized result.
+        // eslint-disable-next-line react-hooks/immutability -- should be fine 😅 this is how it is in the upstream, too
+        hasMemo = true
+        memoizedTableOptions = nextTableOptions
+        const nextSelection = selector(resolvedTable)
+
+        if (isEqual !== undefined) {
+          // Even if the selector has changed, the currently rendered selection
+          // may be equal to the new selection. We should attempt to reuse the
+          // current value if possible, to preserve downstream memoizations.
+          if (instRef.current.hasValue) {
+            const currentSelection = instRef.current.value
+            if (isEqual(currentSelection, nextSelection)) {
+              memoizedSelection = currentSelection
+              return currentSelection
+            }
+          }
+        }
+
+        memoizedSelection = nextSelection
+        return nextSelection
+      }
+
+      const prevTableOptions = memoizedTableOptions
+      // eslint-disable-next-line react-hooks/memo-dependencies
+      const prevSelection = memoizedSelection
+
+      if (Object.is(prevTableOptions, nextTableOptions)) {
+        // The snapshot is the same as last time. Reuse the previous selection.
+        return prevSelection
+      }
+
+      // The snapshot has changed, so we need to compute a new selection.
+      const nextSelection = selector(resolvedTable)
+
+      // If a custom isEqual function is provided, use that to check if the data
+      // has changed. If it hasn't, return the previous selection. That signals
+      // to React that the selections are conceptually equal, and we can bail
+      // out of rendering.
+      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
+        // The snapshot still has changed, so make sure to update to not keep
+        // old references alive
+        memoizedTableOptions = nextTableOptions
+        return prevSelection
+      }
+
+      memoizedTableOptions = nextTableOptions
+      memoizedSelection = nextSelection
+      return nextSelection
+    }
+  }, [selector, resolvedTable, isEqual])
+
+  const value = useSyncExternalStore(subscribe, getSnapshot)
+
+  useInsertionEffect(() => {
+    instRef.current.hasValue = true
+    instRef.current.value = value
+  }, [value])
+
+  return value
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+export * from '@tanstack/table-core'
+export * from '@tanstack/react-table'
+
+export { TableContext } from "./contexts/TableContext"
+
+export { useReactTable } from "./hooks/useReactTable"
+
+export { useTableWithSelector } from './hooks/useTableWithSelector'
+export { useTable, useTableʹ } from "./hooks/useTable"
+export { useHeader, useHeaderʹ } from "./hooks/useHeader"
+export { useColumn, useColumnʹ } from "./hooks/useColumn"
+export { useRow, useRowʹ } from "./hooks/useRow"
+export { useCell, useCellʹ } from "./hooks/useCell"

package/src/lib/hasTableArg.ts

@@ -0,0 +1,19 @@
+import type {
+  RowData,
+  Table,
+} from "@tanstack/table-core"
+
+import { tableRegistry } from "./tableRegistry"
+
+const isTable = <TData extends RowData>(
+  x: unknown | Table<TData>,
+): x is Table<TData> =>
+  typeof x === "object" && x !== null && tableRegistry.has(x as Table<TData>)
+
+export const hasTableArg = <
+  TData extends RowData,
+  Rest extends [{}, ...unknown[]],
+>(
+  args: [Table<TData> | undefined, ...Rest] | Rest,
+): args is [Table<TData> | undefined, ...Rest] =>
+  isTable(args[0]) || args[0] === undefined

package/src/lib/identity.ts

@@ -0,0 +1 @@
+export const identity = <T>(x: T, ..._: any[]): T => x

package/src/lib/invariant.ts

@@ -0,0 +1,12 @@
+export function invariant(
+	condition: any,
+	message?: string | (() => string) | undefined
+): asserts condition {
+  if (condition) return
+  throw new Error(
+		[
+			'Invariant failed',
+			typeof message === 'function' ? message() : message
+		].filter(Boolean).join(': ')
+	);
+}

package/src/lib/isShallowEqual.ts

@@ -0,0 +1,77 @@
+const isMapShallowEqual = (
+  a: ReadonlyMap<unknown, unknown>,
+  b: ReadonlyMap<unknown, unknown>,
+): boolean => {
+  if (a.size !== b.size) {
+    return false;
+  }
+
+  for (const [key, value] of a) {
+    const valueB = b.get(key);
+    if (value !== valueB || !Object.is(value, valueB)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+const isSetShallowEqual = (
+  a: ReadonlySet<unknown>,
+  b: ReadonlySet<unknown>,
+): boolean => {
+  if (a.size !== b.size) {
+    return false;
+  }
+
+  for (const value of a) {
+    if (!b.has(value)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export const isShallowEqual = <T> (a: T, b: T): boolean => {
+  if (a === b || Object.is(a, b)) {
+    return true;
+  }
+
+  if (
+    typeof a !== "object" ||
+    a === null ||
+    typeof b !== "object" ||
+    b === null
+  ) {
+    return false;
+  }
+
+  if (a instanceof Map && b instanceof Map) {
+    return isMapShallowEqual(a, b);
+  }
+
+  if (a instanceof Set && b instanceof Set) {
+    return isSetShallowEqual(a, b);
+  }
+
+  const keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length) {
+    return false;
+  }
+
+  for (const key of keys) {
+    if (!Object.hasOwn(b, key)) {
+      return false;
+    }
+
+    const { [key as keyof T]: valueA } = a;
+    const { [key as keyof T]: valueB } = b;
+
+    if (valueA !== valueB || !Object.is(valueA, valueB)) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/lib/runGetters.ts

@@ -0,0 +1,17 @@
+import type { RunGetters } from "../types"
+import { uncapitalize } from "./uncapitalize"
+
+export const runGetters = <T extends object>(x: T): RunGetters<T> =>
+  Object.fromEntries(
+    Object.entries(x).map(([key, value]) => {
+      if (typeof value === "function" && key.startsWith("get")) {
+        try {
+          return [uncapitalize(key.replace(/^get/, "")), value()]
+        } catch {
+          return [key, value]
+        }
+      }
+
+      return [key, value]
+    }),
+  ) as RunGetters<T>

package/src/lib/tableRegistry.ts

@@ -0,0 +1,3 @@
+import type { Table } from "@tanstack/table-core"
+
+export const tableRegistry: WeakMap<Table<any>, { listeners: Set<() => void> }> = new WeakMap()

package/src/lib/uncapitalize.ts

@@ -0,0 +1,2 @@
+export const uncapitalize = (str: string): string =>
+  str.slice(0, 1).toLowerCase() + str.slice(1)

package/src/lib/useLayoutEffect.ts

@@ -0,0 +1,3 @@
+import * as React from 'react'
+
+export const useLayoutEffect: (effect: React.EffectCallback, deps?: React.DependencyList) => void = typeof document !== 'undefined' ? React.useLayoutEffect : () => {}

package/src/lib/useShallowMemo.ts

@@ -0,0 +1,12 @@
+import { useState } from "react"
+import { isShallowEqual } from "./isShallowEqual"
+
+export const useShallowMemo = <T>(next: T): T => {
+	const [current, setCurrent] = useState(next)
+
+	if (!isShallowEqual(current, next)) {
+		setCurrent(next)
+	}
+
+	return current
+}

package/src/types.ts

@@ -0,0 +1,24 @@
+import type { Simplify } from 'type-fest'
+
+export type IsEqual<Selection> = (prev: Selection, next: Selection) => boolean
+
+type GetterKeys<T> = {
+  [k in keyof T]-?: k extends `get${string}` ?
+    T[k] extends () => unknown ?
+      k
+    : never
+  : never
+}[keyof T]
+
+type GottenKey<k extends string> =
+  k extends `get${infer K}` ? Uncapitalize<K> : never
+
+type GetterReturn<T> = T extends () => unknown ? ReturnType<T> : never
+
+export type RunGetters<T> = Simplify<
+  {
+    [k in GetterKeys<T> as GottenKey<k>]: GetterReturn<T[k]>
+  } & {
+    [k in Exclude<keyof T, GetterKeys<T>>]: T[k]
+  }
+>