@tanstack/lit-store 0.0.1

package/dist/index.cjs

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_tan_stack_store_selector = require('./tan-stack-store-selector.cjs');
+const require_tan_stack_store_atom = require('./tan-stack-store-atom.cjs');
+
+exports.TanStackStoreAtom = require_tan_stack_store_atom.TanStackStoreAtom;
+exports.TanStackStoreSelector = require_tan_stack_store_selector.TanStackStoreSelector;
+var _tanstack_store = require("@tanstack/store");
+Object.keys(_tanstack_store).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return _tanstack_store[k]; }
+  });
+});

package/dist/index.d.cts

@@ -0,0 +1,4 @@
+import { TanStackStoreSelector, UseSelectorOptions } from "./tan-stack-store-selector.cjs";
+import { TanStackStoreAtom } from "./tan-stack-store-atom.cjs";
+export * from "@tanstack/store";
+export { TanStackStoreAtom, TanStackStoreSelector, UseSelectorOptions };

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { TanStackStoreSelector, UseSelectorOptions } from "./tan-stack-store-selector.js";
+import { TanStackStoreAtom } from "./tan-stack-store-atom.js";
+export * from "@tanstack/store";
+export { TanStackStoreAtom, TanStackStoreSelector, UseSelectorOptions };

package/dist/index.js

@@ -0,0 +1,6 @@
+import { TanStackStoreSelector } from "./tan-stack-store-selector.js";
+import { TanStackStoreAtom } from "./tan-stack-store-atom.js";
+
+export * from "@tanstack/store"
+
+export { TanStackStoreAtom, TanStackStoreSelector };

package/dist/tan-stack-store-atom.cjs

@@ -0,0 +1,46 @@
+const require_tan_stack_store_selector = require('./tan-stack-store-selector.cjs');
+
+//#region src/tan-stack-store-atom.ts
+/**
+* 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`
+*       <button @click=${() => this.#count.set((prev) => prev + 1)}>
+*         ${this.#count.value}
+*       </button>
+*     `
+*   }
+* }
+* ```
+*/
+var TanStackStoreAtom = class {
+	#getAtom;
+	constructor(host, getAtom, options) {
+		this.#getAtom = getAtom;
+		new require_tan_stack_store_selector.TanStackStoreSelector(host, getAtom, void 0, options);
+		this.set = this.set.bind(this);
+	}
+	get value() {
+		return this.#getAtom()?.get();
+	}
+	set(valueOrUpdater) {
+		const atom = this.#getAtom();
+		if (!atom) return;
+		atom.set(valueOrUpdater);
+	}
+};
+
+//#endregion
+exports.TanStackStoreAtom = TanStackStoreAtom;
+//# sourceMappingURL=tan-stack-store-atom.cjs.map

package/dist/tan-stack-store-atom.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tan-stack-store-atom.cjs","names":["#getAtom","TanStackStoreSelector"],"sources":["../src/tan-stack-store-atom.ts"],"sourcesContent":["import { TanStackStoreSelector } from './tan-stack-store-selector.js'\nimport type { Atom } from '@tanstack/store'\nimport type { ReactiveControllerHost } from 'lit'\nimport type { UseSelectorOptions } from './tan-stack-store-selector.js'\n\n/**\n * Subscribes a Lit host to a writable atom and exposes its current value\n * along with a stable setter.\n *\n * Use this when an element needs to both read and update the same writable\n * atom. The host will only re-render when the atom's value actually changes\n * (according to the configured `compare` function).\n *\n * @example\n * ```ts\n * class CounterEl extends LitElement {\n *   `#count` = new TanStackStoreAtom(this, () => countAtom)\n *\n *   render() {\n *     return html`\n *       <button @click=${() => this.#count.set((prev) => prev + 1)}>\n *         ${this.#count.value}\n *       </button>\n *     `\n *   }\n * }\n * ```\n */\nexport class TanStackStoreAtom<TValue> {\n  #getAtom: () => Atom<TValue> | undefined\n\n  constructor(\n    host: ReactiveControllerHost,\n    getAtom: () => Atom<TValue> | undefined,\n    options?: UseSelectorOptions<TValue>,\n  ) {\n    this.#getAtom = getAtom\n    new TanStackStoreSelector(host, getAtom, undefined, options)\n\n    this.set = this.set.bind(this)\n  }\n\n  get value(): TValue | undefined {\n    return this.#getAtom()?.get()\n  }\n\n  set(value: TValue): void\n  set(updater: (prev: TValue) => TValue): void\n  set(valueOrUpdater: TValue | ((prev: TValue) => TValue)): void {\n    const atom = this.#getAtom()\n    if (!atom) return\n    ;(atom.set as (v: TValue | ((prev: TValue) => TValue)) => void)(\n      valueOrUpdater,\n    )\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAa,oBAAb,MAAuC;CACrC;CAEA,YACE,MACA,SACA,SACA;AACA,QAAKA,UAAW;AAChB,MAAIC,uDAAsB,MAAM,SAAS,QAAW,QAAQ;AAE5D,OAAK,MAAM,KAAK,IAAI,KAAK,KAAK;;CAGhC,IAAI,QAA4B;AAC9B,SAAO,MAAKD,SAAU,EAAE,KAAK;;CAK/B,IAAI,gBAA2D;EAC7D,MAAM,OAAO,MAAKA,SAAU;AAC5B,MAAI,CAAC,KAAM;AACV,EAAC,KAAK,IACL,eACD"}

package/dist/tan-stack-store-atom.d.cts

@@ -0,0 +1,38 @@
+import { UseSelectorOptions } from "./tan-stack-store-selector.cjs";
+import { Atom } from "@tanstack/store";
+import { ReactiveControllerHost } from "lit";
+
+//#region src/tan-stack-store-atom.d.ts
+/**
+ * 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`
+ *       <button @click=${() => this.#count.set((prev) => prev + 1)}>
+ *         ${this.#count.value}
+ *       </button>
+ *     `
+ *   }
+ * }
+ * ```
+ */
+declare class TanStackStoreAtom<TValue> {
+  #private;
+  constructor(host: ReactiveControllerHost, getAtom: () => Atom<TValue> | undefined, options?: UseSelectorOptions<TValue>);
+  get value(): TValue | undefined;
+  set(value: TValue): void;
+  set(updater: (prev: TValue) => TValue): void;
+}
+//#endregion
+export { TanStackStoreAtom };
+//# sourceMappingURL=tan-stack-store-atom.d.cts.map

package/dist/tan-stack-store-atom.d.ts

@@ -0,0 +1,38 @@
+import { UseSelectorOptions } from "./tan-stack-store-selector.js";
+import { Atom } from "@tanstack/store";
+import { ReactiveControllerHost } from "lit";
+
+//#region src/tan-stack-store-atom.d.ts
+/**
+ * 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`
+ *       <button @click=${() => this.#count.set((prev) => prev + 1)}>
+ *         ${this.#count.value}
+ *       </button>
+ *     `
+ *   }
+ * }
+ * ```
+ */
+declare class TanStackStoreAtom<TValue> {
+  #private;
+  constructor(host: ReactiveControllerHost, getAtom: () => Atom<TValue> | undefined, options?: UseSelectorOptions<TValue>);
+  get value(): TValue | undefined;
+  set(value: TValue): void;
+  set(updater: (prev: TValue) => TValue): void;
+}
+//#endregion
+export { TanStackStoreAtom };
+//# sourceMappingURL=tan-stack-store-atom.d.ts.map

package/dist/tan-stack-store-atom.js

@@ -0,0 +1,46 @@
+import { TanStackStoreSelector } from "./tan-stack-store-selector.js";
+
+//#region src/tan-stack-store-atom.ts
+/**
+* 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`
+*       <button @click=${() => this.#count.set((prev) => prev + 1)}>
+*         ${this.#count.value}
+*       </button>
+*     `
+*   }
+* }
+* ```
+*/
+var TanStackStoreAtom = class {
+	#getAtom;
+	constructor(host, getAtom, options) {
+		this.#getAtom = getAtom;
+		new TanStackStoreSelector(host, getAtom, void 0, options);
+		this.set = this.set.bind(this);
+	}
+	get value() {
+		return this.#getAtom()?.get();
+	}
+	set(valueOrUpdater) {
+		const atom = this.#getAtom();
+		if (!atom) return;
+		atom.set(valueOrUpdater);
+	}
+};
+
+//#endregion
+export { TanStackStoreAtom };
+//# sourceMappingURL=tan-stack-store-atom.js.map

package/dist/tan-stack-store-atom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tan-stack-store-atom.js","names":["#getAtom"],"sources":["../src/tan-stack-store-atom.ts"],"sourcesContent":["import { TanStackStoreSelector } from './tan-stack-store-selector.js'\nimport type { Atom } from '@tanstack/store'\nimport type { ReactiveControllerHost } from 'lit'\nimport type { UseSelectorOptions } from './tan-stack-store-selector.js'\n\n/**\n * Subscribes a Lit host to a writable atom and exposes its current value\n * along with a stable setter.\n *\n * Use this when an element needs to both read and update the same writable\n * atom. The host will only re-render when the atom's value actually changes\n * (according to the configured `compare` function).\n *\n * @example\n * ```ts\n * class CounterEl extends LitElement {\n *   `#count` = new TanStackStoreAtom(this, () => countAtom)\n *\n *   render() {\n *     return html`\n *       <button @click=${() => this.#count.set((prev) => prev + 1)}>\n *         ${this.#count.value}\n *       </button>\n *     `\n *   }\n * }\n * ```\n */\nexport class TanStackStoreAtom<TValue> {\n  #getAtom: () => Atom<TValue> | undefined\n\n  constructor(\n    host: ReactiveControllerHost,\n    getAtom: () => Atom<TValue> | undefined,\n    options?: UseSelectorOptions<TValue>,\n  ) {\n    this.#getAtom = getAtom\n    new TanStackStoreSelector(host, getAtom, undefined, options)\n\n    this.set = this.set.bind(this)\n  }\n\n  get value(): TValue | undefined {\n    return this.#getAtom()?.get()\n  }\n\n  set(value: TValue): void\n  set(updater: (prev: TValue) => TValue): void\n  set(valueOrUpdater: TValue | ((prev: TValue) => TValue)): void {\n    const atom = this.#getAtom()\n    if (!atom) return\n    ;(atom.set as (v: TValue | ((prev: TValue) => TValue)) => void)(\n      valueOrUpdater,\n    )\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAa,oBAAb,MAAuC;CACrC;CAEA,YACE,MACA,SACA,SACA;AACA,QAAKA,UAAW;AAChB,MAAI,sBAAsB,MAAM,SAAS,QAAW,QAAQ;AAE5D,OAAK,MAAM,KAAK,IAAI,KAAK,KAAK;;CAGhC,IAAI,QAA4B;AAC9B,SAAO,MAAKA,SAAU,EAAE,KAAK;;CAK/B,IAAI,gBAA2D;EAC7D,MAAM,OAAO,MAAKA,SAAU;AAC5B,MAAI,CAAC,KAAM;AACV,EAAC,KAAK,IACL,eACD"}

package/dist/tan-stack-store-selector.cjs

@@ -0,0 +1,57 @@
+
+//#region src/tan-stack-store-selector.ts
+function defaultCompare(a, b) {
+	return a === b;
+}
+function defaultSelector(snapshot) {
+	return snapshot;
+}
+var TanStackStoreSelector = class {
+	#host;
+	#getStore;
+	#selector;
+	#compare;
+	#unsubscribe;
+	#subscribedStore;
+	#hasSelected = false;
+	#lastSelected;
+	constructor(host, getStore, selector = defaultSelector, options) {
+		this.#host = host;
+		this.#getStore = getStore;
+		this.#selector = selector;
+		this.#compare = options?.compare ?? defaultCompare;
+		host.addController(this);
+	}
+	hostUpdate() {
+		const store = this.#getStore();
+		if (store === this.#subscribedStore) return;
+		this.#unsubscribe?.();
+		this.#subscribedStore = store;
+		if (!store) {
+			this.#unsubscribe = void 0;
+			this.#hasSelected = false;
+			this.#lastSelected = void 0;
+			return;
+		}
+		this.#lastSelected = this.#selector(store.get());
+		this.#hasSelected = true;
+		this.#unsubscribe = store.subscribe((value) => {
+			const next = this.#selector(value);
+			if (this.#hasSelected && this.#compare(this.#lastSelected, next)) return;
+			this.#lastSelected = next;
+			this.#hasSelected = true;
+			this.#host.requestUpdate();
+		}).unsubscribe;
+	}
+	hostDisconnected() {
+		this.#unsubscribe?.();
+		this.#unsubscribe = void 0;
+		this.#subscribedStore = void 0;
+		this.#hasSelected = false;
+		this.#lastSelected = void 0;
+	}
+};
+
+//#endregion
+exports.TanStackStoreSelector = TanStackStoreSelector;
+//# sourceMappingURL=tan-stack-store-selector.cjs.map

package/dist/tan-stack-store-selector.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tan-stack-store-selector.cjs","names":["#host","#getStore","#selector","#compare","#subscribedStore","#unsubscribe","#hasSelected","#lastSelected"],"sources":["../src/tan-stack-store-selector.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\n\nexport interface UseSelectorOptions<TSelected> {\n  compare?: (a: TSelected, b: TSelected) => boolean\n}\n\nfunction defaultCompare<T>(a: T, b: T) {\n  return a === b\n}\n\nfunction defaultSelector<TSource, TSelected>(snapshot: TSource): TSelected {\n  return snapshot as unknown as TSelected\n}\n\ntype SelectionSource<T> = {\n  get: () => T\n  subscribe: (listener: (value: T) => void) => {\n    unsubscribe: () => void\n  }\n}\n\nexport class TanStackStoreSelector<\n  TSource,\n  TSelected = NoInfer<TSource>,\n> implements ReactiveController {\n  #host: ReactiveControllerHost\n  #getStore: () => SelectionSource<TSource> | undefined\n  #selector: (snapshot: TSource) => TSelected\n  #compare: (a: TSelected, b: TSelected) => boolean\n  #unsubscribe?: () => void\n  #subscribedStore?: SelectionSource<TSource>\n  #hasSelected = false\n  #lastSelected?: TSelected\n\n  constructor(\n    host: ReactiveControllerHost,\n    getStore: () => SelectionSource<TSource> | undefined,\n    selector: (snapshot: TSource) => TSelected = defaultSelector,\n    options?: UseSelectorOptions<TSelected>,\n  ) {\n    this.#host = host\n    this.#getStore = getStore\n    this.#selector = selector\n    this.#compare = options?.compare ?? defaultCompare\n    host.addController(this)\n  }\n\n  hostUpdate() {\n    const store = this.#getStore()\n    if (store === this.#subscribedStore) return\n    this.#unsubscribe?.()\n    this.#subscribedStore = store\n    if (!store) {\n      this.#unsubscribe = undefined\n      this.#hasSelected = false\n      this.#lastSelected = undefined\n      return\n    }\n    this.#lastSelected = this.#selector(store.get())\n    this.#hasSelected = true\n    this.#unsubscribe = store.subscribe((value) => {\n      const next = this.#selector(value)\n      if (this.#hasSelected && this.#compare(this.#lastSelected!, next)) {\n        return\n      }\n      this.#lastSelected = next\n      this.#hasSelected = true\n      this.#host.requestUpdate()\n    }).unsubscribe\n  }\n\n  hostDisconnected() {\n    this.#unsubscribe?.()\n    this.#unsubscribe = undefined\n    this.#subscribedStore = undefined\n    this.#hasSelected = false\n    this.#lastSelected = undefined\n  }\n}\n"],"mappings":";;AAMA,SAAS,eAAkB,GAAM,GAAM;AACrC,QAAO,MAAM;;AAGf,SAAS,gBAAoC,UAA8B;AACzE,QAAO;;AAUT,IAAa,wBAAb,MAGgC;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA,eAAe;CACf;CAEA,YACE,MACA,UACA,WAA6C,iBAC7C,SACA;AACA,QAAKA,OAAQ;AACb,QAAKC,WAAY;AACjB,QAAKC,WAAY;AACjB,QAAKC,UAAW,SAAS,WAAW;AACpC,OAAK,cAAc,KAAK;;CAG1B,aAAa;EACX,MAAM,QAAQ,MAAKF,UAAW;AAC9B,MAAI,UAAU,MAAKG,gBAAkB;AACrC,QAAKC,eAAgB;AACrB,QAAKD,kBAAmB;AACxB,MAAI,CAAC,OAAO;AACV,SAAKC,cAAe;AACpB,SAAKC,cAAe;AACpB,SAAKC,eAAgB;AACrB;;AAEF,QAAKA,eAAgB,MAAKL,SAAU,MAAM,KAAK,CAAC;AAChD,QAAKI,cAAe;AACpB,QAAKD,cAAe,MAAM,WAAW,UAAU;GAC7C,MAAM,OAAO,MAAKH,SAAU,MAAM;AAClC,OAAI,MAAKI,eAAgB,MAAKH,QAAS,MAAKI,cAAgB,KAAK,CAC/D;AAEF,SAAKA,eAAgB;AACrB,SAAKD,cAAe;AACpB,SAAKN,KAAM,eAAe;IAC1B,CAAC;;CAGL,mBAAmB;AACjB,QAAKK,eAAgB;AACrB,QAAKA,cAAe;AACpB,QAAKD,kBAAmB;AACxB,QAAKE,cAAe;AACpB,QAAKC,eAAgB"}

package/dist/tan-stack-store-selector.d.cts

@@ -0,0 +1,21 @@
+import { ReactiveController, ReactiveControllerHost } from "lit";
+
+//#region src/tan-stack-store-selector.d.ts
+interface UseSelectorOptions<TSelected> {
+  compare?: (a: TSelected, b: TSelected) => boolean;
+}
+type SelectionSource<T> = {
+  get: () => T;
+  subscribe: (listener: (value: T) => void) => {
+    unsubscribe: () => void;
+  };
+};
+declare class TanStackStoreSelector<TSource, TSelected = NoInfer<TSource>> implements ReactiveController {
+  #private;
+  constructor(host: ReactiveControllerHost, getStore: () => SelectionSource<TSource> | undefined, selector?: (snapshot: TSource) => TSelected, options?: UseSelectorOptions<TSelected>);
+  hostUpdate(): void;
+  hostDisconnected(): void;
+}
+//#endregion
+export { TanStackStoreSelector, UseSelectorOptions };
+//# sourceMappingURL=tan-stack-store-selector.d.cts.map

package/dist/tan-stack-store-selector.d.ts

@@ -0,0 +1,21 @@
+import { ReactiveController, ReactiveControllerHost } from "lit";
+
+//#region src/tan-stack-store-selector.d.ts
+interface UseSelectorOptions<TSelected> {
+  compare?: (a: TSelected, b: TSelected) => boolean;
+}
+type SelectionSource<T> = {
+  get: () => T;
+  subscribe: (listener: (value: T) => void) => {
+    unsubscribe: () => void;
+  };
+};
+declare class TanStackStoreSelector<TSource, TSelected = NoInfer<TSource>> implements ReactiveController {
+  #private;
+  constructor(host: ReactiveControllerHost, getStore: () => SelectionSource<TSource> | undefined, selector?: (snapshot: TSource) => TSelected, options?: UseSelectorOptions<TSelected>);
+  hostUpdate(): void;
+  hostDisconnected(): void;
+}
+//#endregion
+export { TanStackStoreSelector, UseSelectorOptions };
+//# sourceMappingURL=tan-stack-store-selector.d.ts.map

package/dist/tan-stack-store-selector.js

@@ -0,0 +1,56 @@
+//#region src/tan-stack-store-selector.ts
+function defaultCompare(a, b) {
+	return a === b;
+}
+function defaultSelector(snapshot) {
+	return snapshot;
+}
+var TanStackStoreSelector = class {
+	#host;
+	#getStore;
+	#selector;
+	#compare;
+	#unsubscribe;
+	#subscribedStore;
+	#hasSelected = false;
+	#lastSelected;
+	constructor(host, getStore, selector = defaultSelector, options) {
+		this.#host = host;
+		this.#getStore = getStore;
+		this.#selector = selector;
+		this.#compare = options?.compare ?? defaultCompare;
+		host.addController(this);
+	}
+	hostUpdate() {
+		const store = this.#getStore();
+		if (store === this.#subscribedStore) return;
+		this.#unsubscribe?.();
+		this.#subscribedStore = store;
+		if (!store) {
+			this.#unsubscribe = void 0;
+			this.#hasSelected = false;
+			this.#lastSelected = void 0;
+			return;
+		}
+		this.#lastSelected = this.#selector(store.get());
+		this.#hasSelected = true;
+		this.#unsubscribe = store.subscribe((value) => {
+			const next = this.#selector(value);
+			if (this.#hasSelected && this.#compare(this.#lastSelected, next)) return;
+			this.#lastSelected = next;
+			this.#hasSelected = true;
+			this.#host.requestUpdate();
+		}).unsubscribe;
+	}
+	hostDisconnected() {
+		this.#unsubscribe?.();
+		this.#unsubscribe = void 0;
+		this.#subscribedStore = void 0;
+		this.#hasSelected = false;
+		this.#lastSelected = void 0;
+	}
+};
+
+//#endregion
+export { TanStackStoreSelector };
+//# sourceMappingURL=tan-stack-store-selector.js.map

package/dist/tan-stack-store-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tan-stack-store-selector.js","names":["#host","#getStore","#selector","#compare","#subscribedStore","#unsubscribe","#hasSelected","#lastSelected"],"sources":["../src/tan-stack-store-selector.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\n\nexport interface UseSelectorOptions<TSelected> {\n  compare?: (a: TSelected, b: TSelected) => boolean\n}\n\nfunction defaultCompare<T>(a: T, b: T) {\n  return a === b\n}\n\nfunction defaultSelector<TSource, TSelected>(snapshot: TSource): TSelected {\n  return snapshot as unknown as TSelected\n}\n\ntype SelectionSource<T> = {\n  get: () => T\n  subscribe: (listener: (value: T) => void) => {\n    unsubscribe: () => void\n  }\n}\n\nexport class TanStackStoreSelector<\n  TSource,\n  TSelected = NoInfer<TSource>,\n> implements ReactiveController {\n  #host: ReactiveControllerHost\n  #getStore: () => SelectionSource<TSource> | undefined\n  #selector: (snapshot: TSource) => TSelected\n  #compare: (a: TSelected, b: TSelected) => boolean\n  #unsubscribe?: () => void\n  #subscribedStore?: SelectionSource<TSource>\n  #hasSelected = false\n  #lastSelected?: TSelected\n\n  constructor(\n    host: ReactiveControllerHost,\n    getStore: () => SelectionSource<TSource> | undefined,\n    selector: (snapshot: TSource) => TSelected = defaultSelector,\n    options?: UseSelectorOptions<TSelected>,\n  ) {\n    this.#host = host\n    this.#getStore = getStore\n    this.#selector = selector\n    this.#compare = options?.compare ?? defaultCompare\n    host.addController(this)\n  }\n\n  hostUpdate() {\n    const store = this.#getStore()\n    if (store === this.#subscribedStore) return\n    this.#unsubscribe?.()\n    this.#subscribedStore = store\n    if (!store) {\n      this.#unsubscribe = undefined\n      this.#hasSelected = false\n      this.#lastSelected = undefined\n      return\n    }\n    this.#lastSelected = this.#selector(store.get())\n    this.#hasSelected = true\n    this.#unsubscribe = store.subscribe((value) => {\n      const next = this.#selector(value)\n      if (this.#hasSelected && this.#compare(this.#lastSelected!, next)) {\n        return\n      }\n      this.#lastSelected = next\n      this.#hasSelected = true\n      this.#host.requestUpdate()\n    }).unsubscribe\n  }\n\n  hostDisconnected() {\n    this.#unsubscribe?.()\n    this.#unsubscribe = undefined\n    this.#subscribedStore = undefined\n    this.#hasSelected = false\n    this.#lastSelected = undefined\n  }\n}\n"],"mappings":";AAMA,SAAS,eAAkB,GAAM,GAAM;AACrC,QAAO,MAAM;;AAGf,SAAS,gBAAoC,UAA8B;AACzE,QAAO;;AAUT,IAAa,wBAAb,MAGgC;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA,eAAe;CACf;CAEA,YACE,MACA,UACA,WAA6C,iBAC7C,SACA;AACA,QAAKA,OAAQ;AACb,QAAKC,WAAY;AACjB,QAAKC,WAAY;AACjB,QAAKC,UAAW,SAAS,WAAW;AACpC,OAAK,cAAc,KAAK;;CAG1B,aAAa;EACX,MAAM,QAAQ,MAAKF,UAAW;AAC9B,MAAI,UAAU,MAAKG,gBAAkB;AACrC,QAAKC,eAAgB;AACrB,QAAKD,kBAAmB;AACxB,MAAI,CAAC,OAAO;AACV,SAAKC,cAAe;AACpB,SAAKC,cAAe;AACpB,SAAKC,eAAgB;AACrB;;AAEF,QAAKA,eAAgB,MAAKL,SAAU,MAAM,KAAK,CAAC;AAChD,QAAKI,cAAe;AACpB,QAAKD,cAAe,MAAM,WAAW,UAAU;GAC7C,MAAM,OAAO,MAAKH,SAAU,MAAM;AAClC,OAAI,MAAKI,eAAgB,MAAKH,QAAS,MAAKI,cAAgB,KAAK,CAC/D;AAEF,SAAKA,eAAgB;AACrB,SAAKD,cAAe;AACpB,SAAKN,KAAM,eAAe;IAC1B,CAAC;;CAGL,mBAAmB;AACjB,QAAKK,eAAgB;AACrB,QAAKA,cAAe;AACpB,QAAKD,kBAAmB;AACxB,QAAKE,cAAe;AACpB,QAAKC,eAAgB"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@tanstack/lit-store",
+  "version": "0.0.1",
+  "description": "Framework agnostic type-safe store w/ reactive framework adapters",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/store.git",
+    "directory": "packages/lit-store"
+  },
+  "homepage": "https://tanstack.com/store",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "store",
+    "lit",
+    "typescript"
+  ],
+  "scripts": {
+    "clean": "premove ./build ./coverage",
+    "test:eslint": "eslint ./src ./tests",
+    "test:types": "pnpm run \"/^test:types:ts[0-9]{2}$/\"",
+    "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js",
+    "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js",
+    "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js",
+    "test:types:ts59": "tsc",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:build": "publint --strict",
+    "build": "tsdown --tsconfig tsconfig.build.json"
+  },
+  "type": "module",
+  "types": "./dist/index.d.cts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/store": "workspace:*"
+  },
+  "devDependencies": {
+    "lit": "^3.3.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from '@tanstack/store'
+
+export * from './tan-stack-store-selector.js'
+export * from './tan-stack-store-atom.js'

package/src/tan-stack-store-atom.ts

@@ -0,0 +1,56 @@
+import { TanStackStoreSelector } from './tan-stack-store-selector.js'
+import type { Atom } from '@tanstack/store'
+import type { ReactiveControllerHost } from 'lit'
+import type { UseSelectorOptions } from './tan-stack-store-selector.js'
+
+/**
+ * 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`
+ *       <button @click=${() => this.#count.set((prev) => prev + 1)}>
+ *         ${this.#count.value}
+ *       </button>
+ *     `
+ *   }
+ * }
+ * ```
+ */
+export class TanStackStoreAtom<TValue> {
+  #getAtom: () => Atom<TValue> | undefined
+
+  constructor(
+    host: ReactiveControllerHost,
+    getAtom: () => Atom<TValue> | undefined,
+    options?: UseSelectorOptions<TValue>,
+  ) {
+    this.#getAtom = getAtom
+    new TanStackStoreSelector(host, getAtom, undefined, options)
+
+    this.set = this.set.bind(this)
+  }
+
+  get value(): TValue | undefined {
+    return this.#getAtom()?.get()
+  }
+
+  set(value: TValue): void
+  set(updater: (prev: TValue) => TValue): void
+  set(valueOrUpdater: TValue | ((prev: TValue) => TValue)): void {
+    const atom = this.#getAtom()
+    if (!atom) return
+    ;(atom.set as (v: TValue | ((prev: TValue) => TValue)) => void)(
+      valueOrUpdater,
+    )
+  }
+}

package/src/tan-stack-store-selector.ts

@@ -0,0 +1,79 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit'
+
+export interface UseSelectorOptions<TSelected> {
+  compare?: (a: TSelected, b: TSelected) => boolean
+}
+
+function defaultCompare<T>(a: T, b: T) {
+  return a === b
+}
+
+function defaultSelector<TSource, TSelected>(snapshot: TSource): TSelected {
+  return snapshot as unknown as TSelected
+}
+
+type SelectionSource<T> = {
+  get: () => T
+  subscribe: (listener: (value: T) => void) => {
+    unsubscribe: () => void
+  }
+}
+
+export class TanStackStoreSelector<
+  TSource,
+  TSelected = NoInfer<TSource>,
+> implements ReactiveController {
+  #host: ReactiveControllerHost
+  #getStore: () => SelectionSource<TSource> | undefined
+  #selector: (snapshot: TSource) => TSelected
+  #compare: (a: TSelected, b: TSelected) => boolean
+  #unsubscribe?: () => void
+  #subscribedStore?: SelectionSource<TSource>
+  #hasSelected = false
+  #lastSelected?: TSelected
+
+  constructor(
+    host: ReactiveControllerHost,
+    getStore: () => SelectionSource<TSource> | undefined,
+    selector: (snapshot: TSource) => TSelected = defaultSelector,
+    options?: UseSelectorOptions<TSelected>,
+  ) {
+    this.#host = host
+    this.#getStore = getStore
+    this.#selector = selector
+    this.#compare = options?.compare ?? defaultCompare
+    host.addController(this)
+  }
+
+  hostUpdate() {
+    const store = this.#getStore()
+    if (store === this.#subscribedStore) return
+    this.#unsubscribe?.()
+    this.#subscribedStore = store
+    if (!store) {
+      this.#unsubscribe = undefined
+      this.#hasSelected = false
+      this.#lastSelected = undefined
+      return
+    }
+    this.#lastSelected = this.#selector(store.get())
+    this.#hasSelected = true
+    this.#unsubscribe = store.subscribe((value) => {
+      const next = this.#selector(value)
+      if (this.#hasSelected && this.#compare(this.#lastSelected!, next)) {
+        return
+      }
+      this.#lastSelected = next
+      this.#hasSelected = true
+      this.#host.requestUpdate()
+    }).unsubscribe
+  }
+
+  hostDisconnected() {
+    this.#unsubscribe?.()
+    this.#unsubscribe = undefined
+    this.#subscribedStore = undefined
+    this.#hasSelected = false
+    this.#lastSelected = undefined
+  }
+}