Skip to content

Add Lit Store Adapter#320

Merged
crutchcorn merged 16 commits intomainfrom
lit-store
May 9, 2026
Merged

Add Lit Store Adapter#320
crutchcorn merged 16 commits intomainfrom
lit-store

Conversation

@crutchcorn
Copy link
Copy Markdown
Member

@crutchcorn crutchcorn commented May 9, 2026

This PR adds Lit to the supported frameworks

Summary by CodeRabbit

  • New Features

    • New @tanstack/lit-store package (v0.13.1) providing Lit reactive controllers and an atom wrapper for integrating TanStack stores.
  • Documentation

    • Quick Start and API reference entries for Lit added.
  • Examples

    • Simple Lit example demonstrating store-driven components.
  • Tests

    • Unit tests covering selector and atom behaviors in Lit components.
  • Chores

    • Project configs updated to build, test, and publish the new package.

Review Change Stack

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 9, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d1907de4-eba9-473c-a05a-44b0299b268a

📥 Commits

Reviewing files that changed from the base of the PR and between af10169 and e15953f.

📒 Files selected for processing (2)
  • packages/lit-store/src/tan-stack-store-atom.ts
  • packages/lit-store/tests/selector.test.ts
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/lit-store/src/tan-stack-store-atom.ts
  • packages/lit-store/tests/selector.test.ts

📝 Walkthrough

Walkthrough

This PR introduces @tanstack/lit-store, adding Lit ReactiveControllers (selector + atom), package manifest and build/test configs, TypeScript and docs config, example Lit app, test utilities, and unit tests validating selector and atom behavior.

Changes

Lit Store Package Implementation

Layer / File(s) Summary
Type Contracts & Interfaces
packages/lit-store/src/tan-stack-store-selector.ts
Defines UseSelectorOptions<TSelected>, SelectionSource shape, and default selector/compare functions.
ReactiveController Implementation
packages/lit-store/src/tan-stack-store-selector.ts
Implements TanStackStoreSelector with constructor wiring, hostUpdate() subscription/resubscribe logic, comparison-based update gating, and hostDisconnected() cleanup.
Atom Wrapper
packages/lit-store/src/tan-stack-store-atom.ts
Adds TanStackStoreAtom with value getter, stable set forwarding, and wiring to the selector controller.
Package Entrypoint
packages/lit-store/src/index.ts
Re-exports public symbols from @tanstack/store, tan-stack-store-selector.js, and tan-stack-store-atom.js.
Package Metadata & Linting
packages/lit-store/package.json, packages/lit-store/eslint.config.js
Adds package manifest, exports map, scripts, files, dependency and peerDependency declarations, and a package-local ESLint config that composes the repo root config.
Build & Test Tooling
packages/lit-store/tsdown.config.ts, packages/lit-store/vitest.config.ts
Adds tsdown build config for esm/cjs + dts and Vitest config (jsdom, coverage, typecheck, setup).
TypeScript Configuration
packages/lit-store/tsconfig.json, packages/lit-store/tsconfig.build.json, packages/lit-store/tsconfig.docs.json
Adds project, build, and docs tsconfigs (Bundler moduleResolution, build outDir/src mapping, docs path mappings).
Test Utilities & Tests
packages/lit-store/tests/utils.ts, packages/lit-store/tests/test-setup.ts, packages/lit-store/tests/*.test.ts
Adds defineOnce, mount, and cleanup helpers, global afterEach cleanup hook, and tests for selector and atom behaviors.
Docs & Example App
docs/framework/lit/*, docs/config.json, examples/lit/simple/*, pnpm-workspace.yaml, scripts/generate-docs.ts
Adds a Lit quick-start doc, docs navigation entries, example app source and package, includes examples in workspace, and wires docs generation for the new package.
Changeset
.changeset/polite-hats-beg.md
Adds a patch changeset noting initial release.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

  • davidkpiano

Sequence Diagram(s)

sequenceDiagram
  participant Client as Lit Host
  participant Controller as TanStackStoreSelector
  participant Store as TanStack Store
  Client->>Controller: hostUpdate()
  Controller->>Store: get() -> snapshot
  Controller->>Controller: selector(snapshot) -> selected
  Controller->>Controller: compare(lastSelected, selected)
  alt changed
    Controller->>Client: requestUpdate()
  end
  Client->>Controller: hostDisconnected()
  Controller->>Store: unsubscribe()
Loading

Poem

🐇 A tiny rabbit hops with cheer,
Bringing Lit controllers near,
Selectors twitch and atoms hum,
Tests pass quick — the demos come,
Hooray, small hops that ship good cheer!

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The description deviates significantly from the required template structure, missing the 'Changes' section and providing only a checklist without following the template format. Reorganize the description to follow the template: add a '🎯 Changes' section explaining the motivation and changes, then include the '✅ Checklist' and '🚀 Release Impact' sections as specified.
Docstring Coverage ⚠️ Warning Docstring coverage is 12.50% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely summarizes the main change: adding a Lit Store Adapter, which is the primary objective evident in all the added files.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch lit-store

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@crutchcorn crutchcorn changed the title Add Lit Store Adapter [WIP] Add Lit Store Adapter May 9, 2026
@crutchcorn crutchcorn marked this pull request as draft May 9, 2026 21:00
@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented May 9, 2026

View your CI Pipeline Execution ↗ for commit af10169

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 39s View ↗
nx run-many --target=build --exclude=examples/** ✅ Succeeded 2s View ↗

☁️ Nx Cloud last updated this comment at 2026-05-09 21:39:14 UTC

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 9, 2026

🚀 Changeset Version Preview

1 package(s) bumped directly, 0 bumped as dependents.

🟩 Patch bumps

Package Version Reason
@tanstack/lit-store 0.13.1 → 0.13.2 Changeset

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 9, 2026

@tanstack/angular-store

npm i https://pkg.pr.new/TanStack/store/@tanstack/angular-store@320

@tanstack/lit-store

npm i https://pkg.pr.new/TanStack/store/@tanstack/lit-store@320

@tanstack/preact-store

npm i https://pkg.pr.new/TanStack/store/@tanstack/preact-store@320

@tanstack/react-store

npm i https://pkg.pr.new/TanStack/store/@tanstack/react-store@320

@tanstack/solid-store

npm i https://pkg.pr.new/TanStack/store/@tanstack/solid-store@320

@tanstack/store

npm i https://pkg.pr.new/TanStack/store/@tanstack/store@320

@tanstack/svelte-store

npm i https://pkg.pr.new/TanStack/store/@tanstack/svelte-store@320

@tanstack/vue-store

npm i https://pkg.pr.new/TanStack/store/@tanstack/vue-store@320

commit: e15953f

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (4)
packages/lit-store/tests/selector.test.ts (3)

10-10: ⚡ Quick win

Avoid sharing a single userEvent instance across tests.

Creating user at module scope can introduce cross-test coupling; instantiate per test (or in beforeEach) for isolation.

Proposed change
-const user = userEvent.setup()
-
 describe('Lit Store Tests', () => {
   it('should update when a store is selected with no selector', async () => {
+    const user = userEvent.setup()
     const counter = createStore(0)
@@
   it('should ignore updates when a store is selected with a selector', async () => {
+    const user = userEvent.setup()
     const counter = createStore({ count: 0, ignore: 1 })
🤖 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-store/tests/selector.test.ts` at line 10, The test file creates
a module-scoped user via userEvent.setup() assigned to the variable user which
can cause cross-test coupling; move the userEvent.setup() call into each test or
a beforeEach so each test gets its own user instance (replace the module-level
const user with a per-test instantiation of userEvent.setup() or create it in a
beforeEach and assign to the same variable name).

28-28: ⚡ Quick win

Use unique custom-element tags per test case.

Reusing 'test-form' in both tests can make behavior order-dependent in the custom element registry; unique tags keep tests deterministic.

Proposed change
-defineOnce('test-form', TestForm)
-const element = await mount<TestForm>('test-form')
+defineOnce('test-form-basic', TestForm)
+const element = await mount<TestForm>('test-form-basic')
@@
-defineOnce('test-form', TestForm)
-const element = await mount<TestForm>('test-form')
+defineOnce('test-form-selector', TestForm)
+const element = await mount<TestForm>('test-form-selector')

Also applies to: 72-72

🤖 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-store/tests/selector.test.ts` at line 28, The test reuses the
same custom element tag ('test-form') causing registry/order-dependent failures;
update each test to register a uniquely named tag when calling defineOnce (e.g.,
'test-form-1', 'test-form-2' or otherwise unique per test) while still passing
the same TestForm class to defineOnce so the element registration is
deterministic; locate the defineOnce('test-form', TestForm) calls in the tests
and change the tag strings to unique identifiers for each separate test case.

12-12: ⚡ Quick win

Make describe callback synchronous.

Line 12 uses async on describe, which is non-idiomatic in Vitest and can make suite registration behavior harder to reason about.

Proposed change
-describe('Lit Store Tests', async () => {
+describe('Lit Store Tests', () => {
🤖 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-store/tests/selector.test.ts` at line 12, The test suite
callback passed to describe in selector.test.ts is marked async (describe('Lit
Store Tests', async () => ...)), which is non-idiomatic; remove the async
modifier from the describe callback and move any asynchronous setup/awaits into
proper hooks (e.g., beforeAll, beforeEach) or into individual it/test callbacks
so suite registration stays synchronous and tests still perform needed async
work.
packages/lit-store/package.json (1)

40-48: ⚡ Quick win

Align exports with declared dual-format build output.

The package builds CJS + ESM, but exports exposes only an import/default path. If dual-mode support is intended, add a require condition; otherwise drop CJS build to avoid dead artifacts.

🤖 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-store/package.json` around lines 40 - 48, The package.json
"exports" field currently provides only an "import" and "default" path (symbols:
"exports", "import", "default") while the build produces both ESM and CJS;
update the "exports" to add a "require" condition pointing to the CJS artifact
(e.g., add a "require": "./dist/index.cjs" alongside the existing keys) so
consumers using require() resolve correctly, or if you intend to ship only ESM,
remove the CJS build output and any CJS references from the build pipeline to
avoid dead artifacts; ensure the added "require" entry matches the actual CJS
filename emitted by the build.
🤖 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-store/tests/selector.test.ts`:
- Around line 79-80: The queried element in the getIgnore helper is incorrectly
typed as HTMLParagraphElement; update the query in selector.test.ts (the
getIgnore function that calls
element.shadowRoot!.querySelector<HTMLParagraphElement>('#ignore')) to use
HTMLButtonElement instead so TypeScript reflects that the DOM node with id
"ignore" is a <button> and provides correct DOM API typings.

In `@packages/lit-store/tsconfig.docs.json`:
- Around line 4-6: The tsconfig.docs.json contains an incorrect "paths" entry
mapping "@tanstack/form-core" (copy-paste error); fix it by either removing the
"paths" mapping entirely if not needed, or replace the incorrect key with the
correct package name "@tanstack/lit-store" and point it to the local source
directory used for lit-store (update the value accordingly) so the "paths" block
reflects the actual package being built.

---

Nitpick comments:
In `@packages/lit-store/package.json`:
- Around line 40-48: The package.json "exports" field currently provides only an
"import" and "default" path (symbols: "exports", "import", "default") while the
build produces both ESM and CJS; update the "exports" to add a "require"
condition pointing to the CJS artifact (e.g., add a "require":
"./dist/index.cjs" alongside the existing keys) so consumers using require()
resolve correctly, or if you intend to ship only ESM, remove the CJS build
output and any CJS references from the build pipeline to avoid dead artifacts;
ensure the added "require" entry matches the actual CJS filename emitted by the
build.

In `@packages/lit-store/tests/selector.test.ts`:
- Line 10: The test file creates a module-scoped user via userEvent.setup()
assigned to the variable user which can cause cross-test coupling; move the
userEvent.setup() call into each test or a beforeEach so each test gets its own
user instance (replace the module-level const user with a per-test instantiation
of userEvent.setup() or create it in a beforeEach and assign to the same
variable name).
- Line 28: The test reuses the same custom element tag ('test-form') causing
registry/order-dependent failures; update each test to register a uniquely named
tag when calling defineOnce (e.g., 'test-form-1', 'test-form-2' or otherwise
unique per test) while still passing the same TestForm class to defineOnce so
the element registration is deterministic; locate the defineOnce('test-form',
TestForm) calls in the tests and change the tag strings to unique identifiers
for each separate test case.
- Line 12: The test suite callback passed to describe in selector.test.ts is
marked async (describe('Lit Store Tests', async () => ...)), which is
non-idiomatic; remove the async modifier from the describe callback and move any
asynchronous setup/awaits into proper hooks (e.g., beforeAll, beforeEach) or
into individual it/test callbacks so suite registration stays synchronous and
tests still perform needed async work.
🪄 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: 76c6ba1f-ed31-4927-a018-afb5f451c1ce

📥 Commits

Reviewing files that changed from the base of the PR and between 58b29da and 011fa5c.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (12)
  • packages/lit-store/eslint.config.js
  • packages/lit-store/package.json
  • packages/lit-store/src/index.ts
  • packages/lit-store/src/tan-stack-store-selector.ts
  • packages/lit-store/tests/selector.test.ts
  • packages/lit-store/tests/test-setup.ts
  • packages/lit-store/tests/utils.ts
  • packages/lit-store/tsconfig.build.json
  • packages/lit-store/tsconfig.docs.json
  • packages/lit-store/tsconfig.json
  • packages/lit-store/tsdown.config.ts
  • packages/lit-store/vitest.config.ts

Comment thread packages/lit-store/tests/selector.test.ts Outdated
Comment on lines +4 to +6
"paths": {
"@tanstack/form-core": ["../form-core/src"]
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

Fix incorrect package path mapping.

This configuration maps @tanstack/form-core, but this is the @tanstack/lit-store package, not a form package. This appears to be a copy-paste error.

🔧 Proposed fix

Either remove the paths mapping entirely if not needed, or map the correct package:

  "compilerOptions": {
    "paths": {
-      "@tanstack/form-core": ["../form-core/src"]
+      "@tanstack/store-core": ["../store-core/src"]
    }
  },
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"paths": {
"@tanstack/form-core": ["../form-core/src"]
}
"paths": {
"@tanstack/store-core": ["../store-core/src"]
}
🤖 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-store/tsconfig.docs.json` around lines 4 - 6, The
tsconfig.docs.json contains an incorrect "paths" entry mapping
"@tanstack/form-core" (copy-paste error); fix it by either removing the "paths"
mapping entirely if not needed, or replace the incorrect key with the correct
package name "@tanstack/lit-store" and point it to the local source directory
used for lit-store (update the value accordingly) so the "paths" block reflects
the actual package being built.

@crutchcorn crutchcorn marked this pull request as ready for review May 9, 2026 21:30
@crutchcorn crutchcorn changed the title [WIP] Add Lit Store Adapter Add Lit Store Adapter May 9, 2026
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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-store/src/tan-stack-store-atom.ts`:
- Line 17: The JSDoc example uses the wrong class name `TanStackAtom`; update
the example to use the exported class `TanStackStoreAtom` so the copy/paste
snippet is correct (e.g., replace `TanStackAtom` with `TanStackStoreAtom` in the
JSDoc example near the `#count = new TanStackAtom(this, () => countAtom)` line).
🪄 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: 9c1fc1d8-8f3e-4749-a671-d48d9825a41b

📥 Commits

Reviewing files that changed from the base of the PR and between 011fa5c and af10169.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (18)
  • .changeset/polite-hats-beg.md
  • docs/config.json
  • docs/framework/lit/quick-start.md
  • examples/lit/simple/.eslintrc.cjs
  • examples/lit/simple/.gitignore
  • examples/lit/simple/README.md
  • examples/lit/simple/index.html
  • examples/lit/simple/package.json
  • examples/lit/simple/src/index.ts
  • examples/lit/simple/tsconfig.json
  • packages/lit-store/package.json
  • packages/lit-store/src/index.ts
  • packages/lit-store/src/tan-stack-store-atom.ts
  • packages/lit-store/tests/atom.test.ts
  • packages/lit-store/tests/selector.test.ts
  • packages/lit-store/tests/utils.ts
  • pnpm-workspace.yaml
  • scripts/generate-docs.ts
✅ Files skipped from review due to trivial changes (9)
  • .changeset/polite-hats-beg.md
  • examples/lit/simple/.gitignore
  • pnpm-workspace.yaml
  • examples/lit/simple/README.md
  • examples/lit/simple/package.json
  • examples/lit/simple/index.html
  • examples/lit/simple/.eslintrc.cjs
  • docs/framework/lit/quick-start.md
  • packages/lit-store/tests/selector.test.ts

Comment thread packages/lit-store/src/tan-stack-store-atom.ts Outdated
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@crutchcorn crutchcorn merged commit 692e672 into main May 9, 2026
7 checks passed
@crutchcorn crutchcorn deleted the lit-store branch May 9, 2026 23:47
@github-actions github-actions Bot mentioned this pull request May 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant