feat: use lit-store internally instead of reyling on vanilla store dependency

Author: fredericbahr

packages/lit-table/package.json

@@ -57,7 +57,7 @@
     "build": "tsdown"
   },
   "dependencies": {
-    "@tanstack/store": "^0.11.0",
+    "@tanstack/lit-store": "^0.13.2",
     "@tanstack/table-core": "workspace:*"
   },
   "devDependencies": {

packages/lit-table/src/TableController.ts

@@ -1,7 +1,13 @@
 import { constructTable } from '@tanstack/table-core'
+import { TanStackStoreSelector } from '@tanstack/lit-store'
 import { litReactivity } from './reactivity'
 import { FlexRender } from './flexRender'
-import type { Atom, ReadonlyAtom, ReadonlyStore, Store } from '@tanstack/store'
+import type {
+  Atom,
+  ReadonlyAtom,
+  ReadonlyStore,
+  Store,
+} from '@tanstack/lit-store'
 import type {
   NoInfer,
   RowData,
@@ -146,6 +152,13 @@ export class TableController<
   private _storeSubscription?: { unsubscribe: () => void }
   private _optionsSubscription?: { unsubscribe: () => void }
   private _notifier = 0
+  private _selectorCache = new WeakMap<
+    SubscribeSource<unknown>,
+    Map<
+      ((state: unknown) => unknown) | undefined,
+      TanStackStoreSelector<unknown>
+    >
+  >()
 
   constructor(host: ReactiveControllerHost) {
     ;(this.host = host).addController(this)
@@ -205,23 +218,28 @@ export class TableController<
     const tableInstance = this._table
 
     // Attach Subscribe function
-    const Subscribe = function Subscribe(props: {
+    const Subscribe = ((props: {
       source?: SubscribeSource<unknown>
       selector?: (state: unknown) => unknown
       children:
         | ((state: Readonly<unknown>) => TemplateResult | string)
         | TemplateResult
         | string
-    }): TemplateResult | string {
+    }): TemplateResult | string => {
       const source = props.source ?? tableInstance.store
-      const value = source.get()
-      const selectedState =
-        props.selector !== undefined ? props.selector(value) : value
+
+      const storeSelector: TanStackStoreSelector<unknown> =
+        this._getOrCreateSelector(source, props.selector)
+
+      // TODO: update to newest version of Tanstack Store: https://github.com/TanStack/store/pull/329
+      const selectedState = storeSelector.value
+
       if (typeof props.children === 'function') {
         return props.children(selectedState as Readonly<unknown>)
       }
+
       return props.children
-    } as LitTable<TFeatures, TData, TSelected>['Subscribe']
+    }) as LitTable<TFeatures, TData, TSelected>['Subscribe']
 
     return {
       ...this._table,
@@ -257,5 +275,56 @@ export class TableController<
     this._storeSubscription = undefined
     this._optionsSubscription?.unsubscribe()
     this._optionsSubscription = undefined
+    this._selectorCache = new WeakMap()
+  }
+
+  /**
+   * Get or create a TanStackStoreSelector for the given source and selector.
+   *
+   * Caches selectors by source (WeakMap) and selector function to avoid
+   * creating new controllers on every render cycle.
+   *
+   * @param source The atom or store to subscribe to
+   * @param selector Optional selector function to select a slice of the source state
+   * @returns A cached TanStackStoreSelector instance that subscribes to the source and applies the selector
+   */
+  private _getOrCreateSelector = (
+    source?: SubscribeSource<unknown>,
+    selector?: (state: unknown) => unknown,
+  ): TanStackStoreSelector<unknown> => {
+    if (!source) {
+      return new TanStackStoreSelector(this.host, () => source, selector)
+    }
+
+    if (!this._selectorCache.has(source)) {
+      this._selectorCache.set(source, new Map())
+    }
+    const selectorMap = this._selectorCache.get(source)
+
+    // Get or create the selector for this source + selector combination
+    if (selectorMap?.has(selector)) {
+      return (
+        selectorMap.get(selector) ??
+        this.createSelectorForSource(source, selector)
+      )
+    }
+
+    const storeSelector = this.createSelectorForSource(source, selector)
+    selectorMap?.set(selector, storeSelector)
+
+    return storeSelector
+  }
+
+  /**
+   * Create a new TanStackStoreSelector for the given source and selector without caching.
+   * @param source The atom or store to subscribe to
+   * @param selector Optional selector function to select a slice of the source state
+   * @returns A new TanStackStoreSelector instance that subscribes to the source and applies the selector
+   */
+  private createSelectorForSource = (
+    source: SubscribeSource<unknown>,
+    selector?: (state: unknown) => unknown,
+  ): TanStackStoreSelector<unknown> => {
+    return new TanStackStoreSelector(this.host, () => source, selector)
   }
 }

packages/lit-table/src/reactivity.ts

@@ -1,4 +1,4 @@
-import { batch, createAtom } from '@tanstack/store'
+import { batch, createAtom } from '@tanstack/lit-store'
 import type {
   TableAtomOptions,
   TableReactivityBindings,