diff --git a/packages/lit-table/package.json b/packages/lit-table/package.json index 19939c3e0c..65b2c39afd 100644 --- a/packages/lit-table/package.json +++ b/packages/lit-table/package.json @@ -55,7 +55,7 @@ "build": "tsdown" }, "dependencies": { - "@tanstack/store": "^0.11.0", + "@tanstack/lit-store": "^0.13.2", "@tanstack/table-core": "workspace:*" }, "devDependencies": { diff --git a/packages/lit-table/src/TableController.ts b/packages/lit-table/src/TableController.ts index 44c84e397a..ec74efff19 100644 --- a/packages/lit-table/src/TableController.ts +++ b/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, @@ -198,23 +204,28 @@ export class TableController< const tableInstance = this._table // Attach Subscribe function - const Subscribe = function Subscribe(props: { + const Subscribe = ((props: { source?: SubscribeSource selector?: (state: unknown) => unknown children: | ((state: Readonly) => 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 = + 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) } + return props.children - } as LitTable['Subscribe'] + }) as LitTable['Subscribe'] return { ...this._table, @@ -251,4 +262,20 @@ export class TableController< this._optionsSubscription?.unsubscribe() this._optionsSubscription = undefined } + + /** + * Get or create a TanStackStoreSelector for the given source and selector. + * + * TODO: check if caching of controllers can improve performance and reduce memory usage. + * + * @param source The atom or store to subscribe to + * @param selector Optional selector function to select a slice of the source state + * @returns A TanStackStoreSelector instance that subscribes to the source and applies the selector + */ + private _getOrCreateSelector = ( + source?: SubscribeSource, + selector?: (state: unknown) => unknown, + ): TanStackStoreSelector => { + return new TanStackStoreSelector(this.host, () => source, selector) + } } diff --git a/packages/lit-table/src/reactivity.ts b/packages/lit-table/src/reactivity.ts index fb7d6c5d4f..3f32ff4df4 100644 --- a/packages/lit-table/src/reactivity.ts +++ b/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, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 787cd89e4a..61869b0455 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7535,9 +7535,9 @@ importers: packages/lit-table: dependencies: - '@tanstack/store': - specifier: ^0.11.0 - version: 0.11.0 + '@tanstack/lit-store': + specifier: ^0.13.2 + version: 0.13.2(lit@3.3.2) '@tanstack/table-core': specifier: workspace:* version: link:../table-core @@ -12445,6 +12445,11 @@ packages: resolution: {integrity: sha512-NaOGLRrddszbQj9upGat6HG/4TKvXLvu+osAIgfxPYA+eIvYKv8GKDJOrY2D3/U9MRnKfMWD7bU4jeD4xmqyIg==} engines: {node: '>=20.19'} + '@tanstack/lit-store@0.13.2': + resolution: {integrity: sha512-uAa5gQbmPOESokHM5t+AhQ3Ye8S2/bN+PB6CHKjHXixNN6aMDSQEtHoguPoMb3a3q/NeJ2NdiseyoUg4vsh/ng==} + peerDependencies: + lit: ^3.0.0 + '@tanstack/lit-virtual@3.13.25': resolution: {integrity: sha512-/WSo8RzWSMxhncpcfo8CCClZxpdHubk3Lh3JfTAwhrCOgH9LEOOEW+B/YNHgTSN3Mhkvke7UEZXFO5Vr6ySzUg==} peerDependencies: @@ -22365,6 +22370,11 @@ snapshots: '@tanstack/history@1.161.6': {} + '@tanstack/lit-store@0.13.2(lit@3.3.2)': + dependencies: + '@tanstack/store': 0.11.0 + lit: 3.3.2 + '@tanstack/lit-virtual@3.13.25(lit@3.3.2)': dependencies: '@tanstack/virtual-core': 3.14.0