diff --git a/README.md b/README.md index c560f828..8c451bd5 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ An immutable, reactive data store with framework adapters that powers the core o - Fine‑grained updates for performant state management - Flexible primitives for building custom state logic -- Works across frameworks like React, Solid, Vue, Angular & Svelte +- Works across frameworks like React, Solid, Vue, Angular, Svelte & Lit - Lightweight and standalone — use it in any app or as a library foundation ### Read the docs → diff --git a/docs/config.json b/docs/config.json index c8dcf34e..3a34004f 100644 --- a/docs/config.json +++ b/docs/config.json @@ -27,7 +27,7 @@ "label": "react", "children": [ { - "label": "Quick Start", + "label": "Quick Start - React", "to": "framework/react/quick-start" } ] @@ -36,7 +36,7 @@ "label": "vue", "children": [ { - "label": "Quick Start", + "label": "Quick Start - Vue", "to": "framework/vue/quick-start" } ] @@ -45,7 +45,7 @@ "label": "solid", "children": [ { - "label": "Quick Start", + "label": "Quick Start - Solid", "to": "framework/solid/quick-start" } ] @@ -54,7 +54,7 @@ "label": "angular", "children": [ { - "label": "Quick Start", + "label": "Quick Start - Angular", "to": "framework/angular/quick-start" } ] @@ -63,7 +63,7 @@ "label": "svelte", "children": [ { - "label": "Quick Start", + "label": "Quick Start - Svelte", "to": "framework/svelte/quick-start" } ] @@ -72,7 +72,7 @@ "label": "preact", "children": [ { - "label": "Quick Start", + "label": "Quick Start - Preact", "to": "framework/preact/quick-start" } ] @@ -81,7 +81,7 @@ "label": "lit", "children": [ { - "label": "Quick Start", + "label": "Quick Start - Lit", "to": "framework/lit/quick-start" } ] diff --git a/docs/framework/lit/reference/classes/TanStackStoreAtom.md b/docs/framework/lit/reference/classes/TanStackStoreAtom.md new file mode 100644 index 00000000..b0f7bc26 --- /dev/null +++ b/docs/framework/lit/reference/classes/TanStackStoreAtom.md @@ -0,0 +1,124 @@ +--- +id: TanStackStoreAtom +title: TanStackStoreAtom +--- + +# Class: TanStackStoreAtom\ + +Defined in: [tan-stack-store-atom.ts:29](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-atom.ts#L29) + +Subscribes a Lit host to a writable atom and exposes its current value +along with a stable setter. + +Use this when an element needs to both read and update the same writable +atom. The host will only re-render when the atom's value actually changes +(according to the configured `compare` function). + +## Example + +```ts +class CounterEl extends LitElement { + `#count` = new TanStackStoreAtom(this, () => countAtom) + + render() { + return html` + + ` + } +} +``` + +## Type Parameters + +### TValue + +`TValue` + +## Constructors + +### Constructor + +```ts +new TanStackStoreAtom( + host, + getAtom, +options?): TanStackStoreAtom; +``` + +Defined in: [tan-stack-store-atom.ts:32](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-atom.ts#L32) + +#### Parameters + +##### host + +`ReactiveControllerHost` + +##### getAtom + +() => `Atom`\<`TValue`\> \| `undefined` + +##### options? + +[`UseSelectorOptions`](../interfaces/UseSelectorOptions.md)\<`TValue`\> + +#### Returns + +`TanStackStoreAtom`\<`TValue`\> + +## Accessors + +### value + +#### Get Signature + +```ts +get value(): TValue | undefined; +``` + +Defined in: [tan-stack-store-atom.ts:43](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-atom.ts#L43) + +##### Returns + +`TValue` \| `undefined` + +## Methods + +### set() + +#### Call Signature + +```ts +set(value): void; +``` + +Defined in: [tan-stack-store-atom.ts:47](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-atom.ts#L47) + +##### Parameters + +###### value + +`TValue` + +##### Returns + +`void` + +#### Call Signature + +```ts +set(updater): void; +``` + +Defined in: [tan-stack-store-atom.ts:48](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-atom.ts#L48) + +##### Parameters + +###### updater + +(`prev`) => `TValue` + +##### Returns + +`void` diff --git a/docs/framework/lit/reference/classes/TanStackStoreSelector.md b/docs/framework/lit/reference/classes/TanStackStoreSelector.md new file mode 100644 index 00000000..b11bbc57 --- /dev/null +++ b/docs/framework/lit/reference/classes/TanStackStoreSelector.md @@ -0,0 +1,109 @@ +--- +id: TanStackStoreSelector +title: TanStackStoreSelector +--- + +# Class: TanStackStoreSelector\ + +Defined in: [tan-stack-store-selector.ts:22](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-selector.ts#L22) + +## Type Parameters + +### TSource + +`TSource` + +### TSelected + +`TSelected` = `NoInfer`\<`TSource`\> + +## Implements + +- `ReactiveController` + +## Constructors + +### Constructor + +```ts +new TanStackStoreSelector( + host, + getStore, + selector, +options?): TanStackStoreSelector; +``` + +Defined in: [tan-stack-store-selector.ts:35](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-selector.ts#L35) + +#### Parameters + +##### host + +`ReactiveControllerHost` + +##### getStore + +() => `SelectionSource`\<`TSource`\> \| `undefined` + +##### selector + +(`snapshot`) => `TSelected` + +##### options? + +[`UseSelectorOptions`](../interfaces/UseSelectorOptions.md)\<`TSelected`\> + +#### Returns + +`TanStackStoreSelector`\<`TSource`, `TSelected`\> + +## Methods + +### hostDisconnected() + +```ts +hostDisconnected(): void; +``` + +Defined in: [tan-stack-store-selector.ts:72](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-selector.ts#L72) + +Called when the host is disconnected from the component tree. For custom +element hosts, this corresponds to the `disconnectedCallback()` lifecycle, +which is called the host or an ancestor component is disconnected from the +document. + +#### Returns + +`void` + +#### Implementation of + +```ts +ReactiveController.hostDisconnected +``` + +*** + +### hostUpdate() + +```ts +hostUpdate(): void; +``` + +Defined in: [tan-stack-store-selector.ts:48](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-selector.ts#L48) + +Called during the client-side host update, just before the host calls +its own update. + +Code in `update()` can depend on the DOM as it is not called in +server-side rendering. + +#### Returns + +`void` + +#### Implementation of + +```ts +ReactiveController.hostUpdate +``` diff --git a/docs/framework/lit/reference/index.md b/docs/framework/lit/reference/index.md new file mode 100644 index 00000000..6d2759b7 --- /dev/null +++ b/docs/framework/lit/reference/index.md @@ -0,0 +1,15 @@ +--- +id: "@tanstack/lit-store" +title: "@tanstack/lit-store" +--- + +# @tanstack/lit-store + +## Classes + +- [TanStackStoreAtom](classes/TanStackStoreAtom.md) +- [TanStackStoreSelector](classes/TanStackStoreSelector.md) + +## Interfaces + +- [UseSelectorOptions](interfaces/UseSelectorOptions.md) diff --git a/docs/framework/lit/reference/interfaces/UseSelectorOptions.md b/docs/framework/lit/reference/interfaces/UseSelectorOptions.md new file mode 100644 index 00000000..67ec1ab7 --- /dev/null +++ b/docs/framework/lit/reference/interfaces/UseSelectorOptions.md @@ -0,0 +1,38 @@ +--- +id: UseSelectorOptions +title: UseSelectorOptions +--- + +# Interface: UseSelectorOptions\ + +Defined in: [tan-stack-store-selector.ts:3](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-selector.ts#L3) + +## Type Parameters + +### TSelected + +`TSelected` + +## Properties + +### compare()? + +```ts +optional compare: (a, b) => boolean; +``` + +Defined in: [tan-stack-store-selector.ts:4](https://github.com/TanStack/store/blob/main/packages/lit-store/src/tan-stack-store-selector.ts#L4) + +#### Parameters + +##### a + +`TSelected` + +##### b + +`TSelected` + +#### Returns + +`boolean` diff --git a/docs/installation.md b/docs/installation.md index a363edb9..b6fb6a30 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -52,3 +52,11 @@ npm install @tanstack/svelte-store ``` TanStack Store is compatible with Svelte 5. + +## Lit + +```sh +npm install @tanstack/lit-store +``` + +TanStack Store is compatible with Lit 3. diff --git a/docs/overview.md b/docs/overview.md index 9158ee97..c9e4a291 100644 --- a/docs/overview.md +++ b/docs/overview.md @@ -3,6 +3,6 @@ title: Overview id: overview --- -TanStack Store is a framework agnostic data store that ships with framework specific adapters for major frameworks like React, Solid, Vue, Angular, and Svelte. +TanStack Store is a framework agnostic data store that ships with framework specific adapters for major frameworks like React, Solid, Vue, Angular, Svelte and Lit. -TanStack Store is primarily used for state management internally for most framework agnostic TanStack libraries. It can also be used as a standalone library for any framework or application. \ No newline at end of file +TanStack Store is primarily used for state management internally for most framework agnostic TanStack libraries. It can also be used as a standalone library for any framework or application. diff --git a/package.json b/package.json index 950291ce..55a3bc7b 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,8 @@ "@tanstack/solid-store": "workspace:*", "@tanstack/store": "workspace:*", "@tanstack/svelte-store": "workspace:*", - "@tanstack/vue-store": "workspace:*" + "@tanstack/vue-store": "workspace:*", + "@tanstack/lit-store": "workspace:*" }, "pnpm": { "packageExtensions": {