feat: use lit-store internally instead of reyling on vanilla store dependency#6267
Open
fredericbahr wants to merge 1 commit into
Open
feat: use lit-store internally instead of reyling on vanilla store dependency#6267fredericbahr wants to merge 1 commit into
fredericbahr wants to merge 1 commit into
Conversation
Contributor
📝 WalkthroughWalkthroughSwitch lit-table to use ChangesStore package migration and selector refactoring
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
fredericbahr
changed the title
fredericbahr
changed the title
4 tasks
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/lit-table/src/TableController.ts`:
- Around line 217-218: Cache and reuse selector instances per source/selector
pair to avoid creating a new TanStackStoreSelector on every Subscribe call: add
a private two-level cache field (e.g., _selectorCache: WeakMap<any, Map<any,
TanStackStoreSelector<unknown>>> ) on TableController, update
_getOrCreateSelector(source, selector) to look up and return an existing
instance from _selectorCache[source].get(selector) or create, store, and return
a new one; ensure keys use the raw selector object/function (handle undefined
selectors consistently). Also update hostDisconnected (or appropriate teardown)
to remove the source entry from _selectorCache so entries can be
garbage-collected when a source is gone.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: a4fff87a-9368-42bf-8177-7772f2a4b78d
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
packages/lit-table/package.jsonpackages/lit-table/src/TableController.tspackages/lit-table/src/reactivity.ts
Member
|
@fredericbahr how essential is this PR for this table one? TanStack/store#329 |
Author
|
@KevinVandy for an alignment with other implementation and readability i believe it is essential. |
fredericbahr
force-pushed
the
feat-lit-store-integration
branch
from
275b166 to
7afe941
Compare
fredericbahr
force-pushed
the
feat-lit-store-integration
branch
2 times, most recently
from
3fdd8c3 to
3e5b3ee
Compare
Author
|
@KevinVandy looking more closely into the Subscribe pattern in other adapters I believe that an async directive is the right pattern to be used in lit to enable fine-grained reactivity outside lits update lifecylce, so the template only updates when the atom/store is updated. In order to push this change forward, i actually need TanStack/store#329. Maybe we can discuss the main reason this is not wanted within Tanstack/store so i can have a clear picture to work around it or come up with a different solution. Tomorrow i try to add an example for the subscribe directive so the solution can be evaluated and tested within a running example. |
fredericbahr
force-pushed
the
feat-lit-store-integration
branch
from
3e5b3ee to
9105b12
Compare
fredericbahr
force-pushed
the
feat-lit-store-integration
branch
from
9105b12 to
ff325a0
Compare
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/framework/lit/lit-table.md`:
- Line 54: The call to this.table.setOption is using the wrong method name;
change it to this.table.setOptions to match the API (update the call site where
setOption is used and ensure any similar occurrences use setOptions); verify the
callback signature (prev => ({ ... })) still matches the setOptions method on
the table instance (e.g., Table.setOptions) and run tests to ensure no other
references to setOption remain.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 6cf06d52-f892-4a49-b2e5-b8cee56b08da
📒 Files selected for processing (2)
docs/framework/lit/guide/table-state.mddocs/framework/lit/lit-table.md
Contributor
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (1)
examples/lit/basic-subscribe/src/main.ts (1)
328-334: ⚡ Quick winGate full-state JSON rendering behind a debug flag.
Serializing full state on every update is expensive in this demo, especially with the 200k-row stress path.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@examples/lit/basic-subscribe/src/main.ts` around lines 328 - 334, The demo currently serializes the entire table state on every update via this.table.subscribe(this.table.store, (state) => state, (state) => html` <pre>${JSON.stringify(state, null, 2)}</pre> `), which is expensive; gate that full-state subscription and JSON.stringify behind a debug flag (e.g., this.showFullTableState or enableDebugFullState) so the subscribe block only runs when the flag is true, default the flag to false, and update the template to render either the full preformatted JSON when the flag is enabled or a lightweight placeholder/empty node when disabled.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@examples/lit/basic-subscribe/README.md`:
- Around line 3-10: The README is outdated: it mentions SubscribeController and
createAtom from `@tanstack/store` but the example actually uses
table.subscribe(...) and imports createAtom from `@tanstack/lit-store`; update the
README to remove/replace references to SubscribeController, change the
createAtom source to `@tanstack/lit-store`, and note that the example demonstrates
using table.subscribe(...) for fine-grained subscriptions (reference symbols:
SubscribeController, createAtom, table.subscribe, `@tanstack/lit-store`,
`@tanstack/store`).
In `@examples/lit/basic-subscribe/src/main.ts`:
- Around line 129-132: The example's updated lifecycle currently replaces
this.table.setOptions with a non-existing this.table.setData; revert to updating
the table via this.table.setOptions inside the updated(changedProperties) method
(check for changedProperties.has('_data') and call this.table.setOptions(prev =>
({ ...prev, data: this._data }))) rather than introducing or calling
table.setData, since setData is only a type field and has no runtime
implementation in the adapter/core.
In `@examples/lit/basic-subscribe/vite.config.js`:
- Around line 8-11: The vite config hardcodes __DEV__ = true and
'process.env.NODE_ENV' = 'development', causing production builds to include dev
constants; update the exported config to be mode-aware (use the defineConfig
callback or read the mode argument) and set __DEV__ and 'process.env.NODE_ENV'
based on the mode (e.g., __DEV__ true only for development, and
process.env.NODE_ENV set to the actual mode string) so values change for
production builds; adjust the values object where __DEV__ and
'process.env.NODE_ENV' are defined in vite.config.js accordingly.
In `@packages/lit-table/skills/lit/compose-with-tanstack-virtual/SKILL.md`:
- Around line 212-213: The doc incorrectly cites TableController as the source
of the AsyncDirective behavior for subscribe; update the attribution in SKILL.md
to point to the actual implementation in
packages/lit-table/src/subscribe-directive.ts (referencing SubscribeDirective
and the exported const subscribe) and note that TableController only
imports/forwards the directive rather than implementing it.
In `@packages/lit-table/src/subscribe-directive.ts`:
- Around line 103-138: The update logic ignores changes to the template
callback—when the template function changes but source and selector are
referentially equal the directive returns noChange; fix this by tracking the
current template (e.g. add this.latestTemplate or reuse this.resolvedTemplate)
and include a templateChanged check in the shouldReinitialize condition inside
update(), update this.resolvedTemplate when it changes, and ensure you call
this.controller.hostUpdate() and return the new template result
(this.resolvedTemplate?.(this.controller.value)) when the template function is
different so the directive re-renders with the new closure/outer values.
In `@packages/lit-table/src/TableController.ts`:
- Around line 76-79: The declared setData signature on LitTable is
incorrect/missing at runtime: update or remove it so the public API matches
actual behavior; either remove setData from the LitTable interface in
TableController or implement setData to update the underlying TableOptions data
by replacing the readonly data array (type it as setData: (data:
ReadonlyArray<TData>) => void) and ensure TableController.table() exposes that
method (or forwards to a helper that calls this._table.setOptions({ data })) so
callers can safely call table.setData(...).
---
Nitpick comments:
In `@examples/lit/basic-subscribe/src/main.ts`:
- Around line 328-334: The demo currently serializes the entire table state on
every update via this.table.subscribe(this.table.store, (state) => state,
(state) => html` <pre>${JSON.stringify(state, null, 2)}</pre> `), which is
expensive; gate that full-state subscription and JSON.stringify behind a debug
flag (e.g., this.showFullTableState or enableDebugFullState) so the subscribe
block only runs when the flag is true, default the flag to false, and update the
template to render either the full preformatted JSON when the flag is enabled or
a lightweight placeholder/empty node when disabled.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: e7936c5c-b8bf-4a1b-9b49-b4d0ac2c05b1
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (15)
docs/framework/lit/guide/table-state.mddocs/framework/lit/lit-table.mdexamples/lit/basic-subscribe/README.mdexamples/lit/basic-subscribe/index.htmlexamples/lit/basic-subscribe/package.jsonexamples/lit/basic-subscribe/src/main.tsexamples/lit/basic-subscribe/src/makeData.tsexamples/lit/basic-subscribe/tsconfig.jsonexamples/lit/basic-subscribe/vite.config.jspackages/lit-table/package.jsonpackages/lit-table/skills/lit/compose-with-tanstack-virtual/SKILL.mdpackages/lit-table/src/TableController.tspackages/lit-table/src/index.tspackages/lit-table/src/reactivity.tspackages/lit-table/src/subscribe-directive.ts
✅ Files skipped from review due to trivial changes (3)
- examples/lit/basic-subscribe/index.html
- examples/lit/basic-subscribe/package.json
- docs/framework/lit/guide/table-state.md
🚧 Files skipped from review as they are similar to previous changes (3)
- packages/lit-table/package.json
- packages/lit-table/src/reactivity.ts
- docs/framework/lit/lit-table.md
…rective An async Lit directe `subscribe` is implemented to allow for fine-grained reactivity and rerendering of templates. To support this, `@tanstack/lit-store` is integrated.
fredericbahr
force-pushed
the
feat-lit-store-integration
branch
from
ff325a0 to
9df39f0
Compare
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/lit-table/src/TableController.ts (1)
16-19:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUpdate stale API name in the LitTable type docs.
Line 17 still documents
Subscribe, but the public API is nowsubscribe. This makes the type-level docs inconsistent with the actual contract.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/lit-table/src/TableController.ts` around lines 16 - 19, Docs for the LitTable type are out of date: replace the capitalized `Subscribe` in the JSDoc with the actual public method name `subscribe` (preserve mention of the `state` property), so the comment on the LitTable type correctly reflects the runtime API (case-sensitive) and reads something like "Includes a `subscribe` method for fine-grained state subscriptions and a `state` property with the selected state."; update the comment block that documents LitTable accordingly.packages/lit-table/skills/lit/compose-with-tanstack-virtual/SKILL.md (1)
15-27:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winAlign skill metadata/version note with the new
subscribeguidance.This section now teaches the new
subscribedirective pattern, but the file still states the patterns match9.0.0-alpha.48. Please update the frontmatter/version note so docs don’t advertise beta behavior as alpha-era guidance.Also applies to: 210-213
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/lit-table/skills/lit/compose-with-tanstack-virtual/SKILL.md` around lines 15 - 27, Update the frontmatter and maintainer note to reflect beta-era guidance: change the library_version value (currently '9.0.0-alpha.48') to a beta-appropriate version (e.g., '9.0.0-beta' or the specific beta tag your docs use) and update the "Maintainer note" text to state the adapter/patterns are aligned with the v9 beta (not alpha) and may change; also apply the same edit to the duplicate maintainer/version mention around the other occurrence referenced (lines ~210-213) so the file consistently advertises beta guidance for the new subscribe directive pattern.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@packages/lit-table/skills/lit/compose-with-tanstack-virtual/SKILL.md`:
- Around line 15-27: Update the frontmatter and maintainer note to reflect
beta-era guidance: change the library_version value (currently '9.0.0-alpha.48')
to a beta-appropriate version (e.g., '9.0.0-beta' or the specific beta tag your
docs use) and update the "Maintainer note" text to state the adapter/patterns
are aligned with the v9 beta (not alpha) and may change; also apply the same
edit to the duplicate maintainer/version mention around the other occurrence
referenced (lines ~210-213) so the file consistently advertises beta guidance
for the new subscribe directive pattern.
In `@packages/lit-table/src/TableController.ts`:
- Around line 16-19: Docs for the LitTable type are out of date: replace the
capitalized `Subscribe` in the JSDoc with the actual public method name
`subscribe` (preserve mention of the `state` property), so the comment on the
LitTable type correctly reflects the runtime API (case-sensitive) and reads
something like "Includes a `subscribe` method for fine-grained state
subscriptions and a `state` property with the selected state."; update the
comment block that documents LitTable accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 281fa0da-d783-4d9e-aef3-9ffafbeaeae7
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (15)
docs/framework/lit/guide/table-state.mddocs/framework/lit/lit-table.mdexamples/lit/basic-subscribe/README.mdexamples/lit/basic-subscribe/index.htmlexamples/lit/basic-subscribe/package.jsonexamples/lit/basic-subscribe/src/main.tsexamples/lit/basic-subscribe/src/makeData.tsexamples/lit/basic-subscribe/tsconfig.jsonexamples/lit/basic-subscribe/vite.config.jspackages/lit-table/package.jsonpackages/lit-table/skills/lit/compose-with-tanstack-virtual/SKILL.mdpackages/lit-table/src/TableController.tspackages/lit-table/src/index.tspackages/lit-table/src/reactivity.tspackages/lit-table/src/subscribe-directive.ts
✅ Files skipped from review due to trivial changes (5)
- examples/lit/basic-subscribe/README.md
- packages/lit-table/src/index.ts
- examples/lit/basic-subscribe/index.html
- docs/framework/lit/guide/table-state.md
- packages/lit-table/src/reactivity.ts
🚧 Files skipped from review as they are similar to previous changes (8)
- examples/lit/basic-subscribe/package.json
- docs/framework/lit/lit-table.md
- examples/lit/basic-subscribe/src/makeData.ts
- examples/lit/basic-subscribe/tsconfig.json
- packages/lit-table/package.json
- packages/lit-table/src/subscribe-directive.ts
- examples/lit/basic-subscribe/vite.config.js
- examples/lit/basic-subscribe/src/main.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
Chores
@tanstack/lit-storedependency to v0.13.2.New Features
Documentation
Behavior