@tanstack/ember-table 9.0.0-beta.0

package/src/flex-render-helpers.ts

@@ -0,0 +1,103 @@
+import type { ComponentLike } from '@glint/template'
+import type {
+  CellContext,
+  CellData,
+  HeaderContext,
+  RowData,
+  TableFeatures,
+} from '@tanstack/table-core'
+export { flexRender } from '@tanstack/table-core/flex-render'
+
+export type FlexRenderContext<
+  TFeatures extends TableFeatures = TableFeatures,
+  TData extends RowData = RowData,
+  TValue extends CellData = CellData,
+> =
+  | CellContext<TFeatures, TData, TValue>
+  | HeaderContext<TFeatures, TData, TValue>
+
+export interface FlexRenderableSignature<
+  TFeatures extends TableFeatures = TableFeatures,
+  TData extends RowData = RowData,
+  TValue extends CellData = CellData,
+  TOptions = undefined,
+> {
+  Args: {
+    ctx: FlexRenderContext<TFeatures, TData, TValue>
+    options?: TOptions
+  }
+}
+
+export interface CellRenderableSignature<
+  TFeatures extends TableFeatures = TableFeatures,
+  TData extends RowData = RowData,
+  TValue extends CellData = CellData,
+  TOptions = undefined,
+> {
+  Args: {
+    ctx: CellContext<TFeatures, TData, TValue>
+    options?: TOptions
+  }
+}
+
+type FlexRenderableComponent<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData,
+  TOptions,
+> =
+  | ComponentLike<FlexRenderableSignature<TFeatures, TData, TValue, TOptions>>
+  | ComponentLike<CellRenderableSignature<TFeatures, TData, TValue, TOptions>>
+
+export class FlexRenderComponentConfig<
+  TFeatures extends TableFeatures = TableFeatures,
+  TData extends RowData = RowData,
+  TValue extends CellData = CellData,
+  TOptions = undefined,
+> {
+  readonly component: FlexRenderableComponent<
+    TFeatures,
+    TData,
+    TValue,
+    TOptions
+  >
+  readonly options?: TOptions
+
+  constructor(
+    component: FlexRenderableComponent<TFeatures, TData, TValue, TOptions>,
+    options?: TOptions,
+  ) {
+    this.component = component
+    this.options = options
+  }
+}
+
+export function flexRenderComponent<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData,
+>(
+  component: FlexRenderableComponent<TFeatures, TData, TValue, undefined>,
+): FlexRenderComponentConfig<TFeatures, TData, TValue, undefined>
+
+export function flexRenderComponent<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData,
+  TOptions,
+>(
+  component: FlexRenderableComponent<TFeatures, TData, TValue, TOptions>,
+  options: TOptions,
+): FlexRenderComponentConfig<TFeatures, TData, TValue, TOptions>
+
+export function flexRenderComponent<
+  TFeatures extends TableFeatures = TableFeatures,
+  TData extends RowData = RowData,
+  TValue extends CellData = CellData,
+  TOptions = undefined,
+>(
+  component: FlexRenderableComponent<TFeatures, TData, TValue, TOptions>,
+  options?: TOptions,
+): FlexRenderComponentConfig<TFeatures, TData, TValue, TOptions> {
+  return new FlexRenderComponentConfig(component, options)
+}

package/src/flex-render.ts

@@ -0,0 +1,6 @@
+export * from './flex-render-helpers.ts'
+export {
+  FlexRenderCell,
+  FlexRenderHeader,
+  FlexRenderFooter,
+} from './FlexRender.gts'

package/src/index.ts

@@ -0,0 +1,31 @@
+export * from '@tanstack/table-core'
+export { useTable } from './use-table.ts'
+export { createTableHook } from './create-table-hook.ts'
+export type {
+  CreateTableHookOptions,
+  AppEmberTable,
+  AppColumnHelper,
+} from './create-table-hook.ts'
+export {
+  flexRender,
+  flexRenderComponent,
+  FlexRenderComponentConfig,
+} from './flex-render.ts'
+export type {
+  FlexRenderableSignature,
+  CellRenderableSignature,
+  FlexRenderContext,
+} from './flex-render.ts'
+export {
+  FlexRenderCell,
+  FlexRenderHeader,
+  FlexRenderFooter,
+} from './FlexRender.gts'
+export { emberReactivity } from './reactivity.ts'
+export {
+  computed,
+  signal,
+  createAtom,
+  Signal,
+  ComputedSignal,
+} from './signal.ts'

package/src/reactivity.ts

@@ -0,0 +1,39 @@
+import type { Subscription } from '@tanstack/store'
+import type {
+  TableAtomOptions,
+  TableReactivityBindings,
+} from '@tanstack/table-core/reactivity'
+
+import { untrack } from '@glimmer/validator'
+import { computed, signal } from './signal.ts'
+
+export function emberReactivity(): TableReactivityBindings {
+  const subscriptions = new Set<Subscription>()
+
+  return {
+    createOptionsStore: true,
+    wrapExternalAtoms: true,
+
+    // timing is not important, but the main thing is that the work does *not*
+    // happen during the render phase.
+    schedule: (fn) => queueMicrotask(() => fn()),
+    batch: (fn) => fn(),
+    untrack,
+    // @cached
+    createReadonlyAtom: <T>(fn: () => T) => {
+      return computed(fn)
+    },
+    // @tracked
+    createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {
+      return signal(value, options)
+    },
+    // Not for the ember integration, but for the tanstack inspector
+    addSubscription: (subscription) => {
+      subscriptions.add(subscription)
+    },
+    unmount: () => {
+      subscriptions.forEach((s) => s.unsubscribe())
+      subscriptions.clear()
+    },
+  }
+}

package/src/signal.ts

@@ -0,0 +1,126 @@
+import type { Atom, AtomOptions, Observer, Subscription } from '@tanstack/store'
+
+import { tracked, cached } from '@glimmer/tracking'
+import { untrack } from '@glimmer/validator'
+
+export function subscribeNoEffect(): Subscription {
+  return null as unknown as Subscription
+}
+
+/**
+ * Ember-native signal implementation.
+ * In future ember >7.3 `tracked` will be available by itself
+ * so the class wrapper will not be needed for those versions
+ */
+export class Signal<T> {
+  @tracked _value
+
+  #options: AtomOptions<T> | undefined
+
+  // Ember reads are tag-tracked; this observer list exists for the plain-JS
+  // subscribers core wires up (external-atom sync in constructTable, the
+  // inspector), which have no access to framework tracking.
+  #listeners = new Set<(value: T) => void>()
+
+  constructor(value: T, options: AtomOptions<T> | undefined) {
+    this._value = value
+    this.#options = options
+  }
+
+  subscribe(
+    listenerOrObserver: Observer<T> | ((value: T) => void),
+  ): Subscription {
+    const listener =
+      typeof listenerOrObserver === 'function'
+        ? listenerOrObserver
+        : listenerOrObserver.next
+
+    if (!listener) {
+      return { unsubscribe: () => {} }
+    }
+
+    this.#listeners.add(listener)
+    return { unsubscribe: () => this.#listeners.delete(listener) }
+  }
+
+  get() {
+    return this.value
+  }
+  set(value: T | ((prev: T) => T)) {
+    if (typeof value === 'function') {
+      return this.update(value as unknown as (prev: T) => T)
+    }
+
+    this.value = value
+  }
+
+  get value() {
+    return this._value
+  }
+
+  set value(next: T) {
+    const prev = untrack(() => this._value)
+
+    const isEqual = this.#options?.compare
+      ? this.#options.compare(prev, next)
+      : prev === next
+    if (isEqual) {
+      return
+    }
+
+    this._value = next
+
+    for (const listener of this.#listeners) {
+      listener(next)
+    }
+  }
+
+  update(fn: (value: T) => T) {
+    const original = untrack(() => this._value)
+
+    this.value = fn(original)
+  }
+}
+
+export class ComputedSignal<T> {
+  #compute
+
+  constructor(compute: () => T) {
+    this.#compute = compute
+  }
+
+  get() {
+    return this.value
+  }
+
+  subscribe = subscribeNoEffect
+
+  @cached
+  get value() {
+    return this.#compute()
+  }
+}
+
+export function signal<T>(value: T, options: AtomOptions<T> | undefined) {
+  return new Signal(value, options)
+}
+
+/**
+ * Creates an Ember-native writable atom, satisfying the `@tanstack/store`
+ * `Atom` contract so it can be passed to `options.atoms`. Because it is backed
+ * by a `@tracked` Signal, reading `atom.get()` directly in a template or
+ * getter is reactive — unlike a foreign `@tanstack/store` atom, whose reads
+ * create no Glimmer tag dependency.
+ *
+ * Takes a plain initial value only; there is no derived/function overload.
+ */
+export function createAtom<T>(
+  initialValue: T,
+  options?: AtomOptions<T>,
+): Atom<T> {
+  return signal(initialValue, options)
+}
+
+export function computed<T>(fn: () => T) {
+  return new ComputedSignal(fn)
+}

package/src/static-functions.ts

@@ -0,0 +1 @@
+export * from '@tanstack/table-core/static-functions'

package/src/use-table.ts

@@ -0,0 +1,154 @@
+import { constructTable } from '@tanstack/table-core'
+import { untrack } from '@glimmer/validator'
+import { emberReactivity } from './reactivity.ts'
+import { computed, subscribeNoEffect } from './signal.ts'
+import type {
+  RowData,
+  Table,
+  TableFeatures,
+  TableOptions,
+  TableState,
+} from '@tanstack/table-core'
+import type { Atom, ReadonlyAtom, ReadonlyStore } from '@tanstack/store'
+
+// Internal table slots used by the pull-based options/state wiring below.
+// `Table_Internal` is not exported from the table-core build, so the shape is
+// declared structurally here.
+interface TableInternals<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  optionsStore?: {
+    get(): TableOptions<TFeatures, TData>
+    set(value: () => TableOptions<TFeatures, TData>): void
+  }
+  baseAtoms: Record<string, { get(): unknown }>
+  atoms: Record<string, unknown>
+}
+
+export function useTable<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(getOptions: () => TableOptions<TFeatures, TData>): Table<TFeatures, TData> {
+  const reactivity = emberReactivity()
+
+  // Creates reactive read only signal for options
+  const userOptions = computed(getOptions)
+
+  // Untracked to prevent possible "set on same computation as read" errors in Ember.
+  const initialOptions = untrack(() => userOptions.get())
+
+  const table = constructTable<TFeatures, TData>({
+    ...initialOptions,
+    features: {
+      coreReactivityFeature: reactivity,
+      ...initialOptions.features,
+    },
+    mergeOptions: (
+      defaultOptions: TableOptions<TFeatures, TData>,
+      newOptions: Partial<TableOptions<TFeatures, TData>>,
+    ) => ({
+      ...defaultOptions,
+      ...newOptions,
+    }),
+  }) as Table<TFeatures, TData> & TableInternals<TFeatures, TData>
+
+  const optionsStore = table.optionsStore!
+
+  const liveOptions = computed(() => {
+    const stored = optionsStore.get()
+    return {
+      ...stored,
+      ...userOptions.get(),
+      // stored options carry construct-time normalization (the reactivity
+      // feature, wrapped external atoms) that must win over the raw user
+      // options.
+      features: stored.features,
+      atoms: stored.atoms,
+    }
+  })
+
+  /**
+   * This is to get around core table not using lazy access so we need to re-wrap
+   *
+   * Similar to other reactive signal frameworks (solid, angular, svelte)
+   */
+  Object.defineProperty(table, 'options', {
+    configurable: true,
+    enumerable: true,
+    get: () => liveOptions.get(),
+    set: (value: TableOptions<TFeatures, TData>) => {
+      optionsStore.set(() => value)
+    },
+  })
+
+  const atoms: Record<string, ReadonlyAtom<unknown>> = table.atoms
+  const stateKeys = Object.keys(table.baseAtoms)
+
+  for (const key of stateKeys) {
+    const baseAtom = (table.baseAtoms as Record<string, ReadonlyAtom<unknown>>)[
+      key
+    ]!
+
+    /**
+     * Original atoms could cause effects for top level properties
+     *
+     * Core table should migrate to pure derived data which would boost render
+     * performance for both signal and non-signal frameworks.
+     */
+    atoms[key] = reactivity.createReadonlyAtom(
+      () => {
+        const externalAtom = (
+          table.options.atoms as Record<string, Atom<unknown>> | undefined
+        )?.[key]
+        if (externalAtom) {
+          return externalAtom.get()
+        }
+        const stateSlice = (
+          table.options.state as Record<string, unknown> | undefined
+        )?.[key]
+        if (stateSlice !== undefined) {
+          return stateSlice
+        }
+        return baseAtom.get()
+      },
+      { debugName: `table/atoms/${key}` },
+    )
+  }
+
+  const stateProxy: TableState<TFeatures> = new Proxy(
+    {},
+    {
+      get: (_target, key) =>
+        typeof key === 'string' ? atoms[key]?.get() : undefined,
+      has: (_target, key) => typeof key === 'string' && stateKeys.includes(key),
+      ownKeys: () => stateKeys,
+      getOwnPropertyDescriptor: (_target, key) =>
+        typeof key === 'string' && stateKeys.includes(key)
+          ? {
+              enumerable: true,
+              configurable: true,
+              value: atoms[key]!.get(),
+            }
+          : undefined,
+    },
+  ) as TableState<TFeatures>
+
+  /**
+   * Store is reasigned to point to proxy object to allow individual state slices to be independently reactive.
+   *
+   * Type cast is needed because we are setting during construction
+   * Table store is readonly after first initialization.
+   */
+  ;(
+    table as { store: Omit<ReadonlyStore<TableState<TFeatures>>, 'atom'> }
+  ).store = {
+    get: () => stateProxy,
+    get state() {
+      return stateProxy
+    },
+    subscribe: subscribeNoEffect,
+  }
+
+  return table
+}