support inputs on angular adapter

Author: benjavicente

.changeset/eight-ways-dig.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/angular-store': patch
+---
+
+support input signals in angular store

docs/framework/angular/reference/functions/injectAtom.md

@@ -9,7 +9,7 @@ title: injectAtom
 function injectAtom<TValue>(atom, options?): WritableAtomSignal<TValue>;
 ```
 
-Defined in: [packages/angular-store/src/injectAtom.ts:44](https://github.com/TanStack/store/blob/main/packages/angular-store/src/injectAtom.ts#L44)
+Defined in: [packages/angular-store/src/injectAtom.ts:59](https://github.com/TanStack/store/blob/main/packages/angular-store/src/injectAtom.ts#L59)
 
 Returns a [WritableAtomSignal](../interfaces/WritableAtomSignal.md) that reads the current atom value when
 called and exposes a `.set` method for updates.
@@ -27,7 +27,7 @@ atom.
 
 ### atom
 
-`Atom`\<`TValue`\>
+`Atom`\<`TValue`\> | () => `Atom`\<`TValue`\>
 
 ### options?
 

docs/framework/angular/reference/functions/injectSelector.md

@@ -12,7 +12,7 @@ function injectSelector<TState, TSelected>(
 options?): Signal<TSelected>;
 ```
 
-Defined in: [packages/angular-store/src/injectSelector.ts:93](https://github.com/TanStack/store/blob/main/packages/angular-store/src/injectSelector.ts#L93)
+Defined in: [packages/angular-store/src/injectSelector.ts:55](https://github.com/TanStack/store/blob/main/packages/angular-store/src/injectSelector.ts#L55)
 
 Selects a slice of state from an atom or store and returns it as an Angular
 signal.
@@ -33,7 +33,7 @@ This is the primary Angular read hook for TanStack Store.
 
 ### source
 
-[`SelectionSource`](../type-aliases/SelectionSource.md)\<`TState`\>
+[`SelectionSource`](../type-aliases/SelectionSource.md)\<`TState`\> | () => [`SelectionSource`](../type-aliases/SelectionSource.md)\<`TState`\>
 
 ### selector
 

packages/angular-store/package.json

@@ -50,11 +50,13 @@
   },
   "devDependencies": {
     "@analogjs/vite-plugin-angular": "^2.4.5",
+    "@analogjs/vitest-angular": "^2.3.1",
     "@angular/common": "^21.2.8",
     "@angular/compiler": "^21.2.8",
     "@angular/core": "^21.2.8",
     "@angular/platform-browser": "^21.2.8",
-    "@angular/platform-browser-dynamic": "^21.2.8",
+    "@testing-library/angular": "^19.1.1",
+    "@testing-library/jest-dom": "^6.9.1",
     "zone.js": "^0.16.1"
   },
   "peerDependencies": {

packages/angular-store/src/injectAtom.ts

@@ -25,6 +25,21 @@ export interface WritableAtomSignal<T> {
   set: Atom<T>['set']
 }
 
+
+function createSetter<TValue>(
+  atom: Atom<TValue> | (() => Atom<TValue>),
+): Atom<TValue>['set'] {
+  function set(value: TValue): void
+  function set(fn: (prevVal: TValue) => TValue): void
+  function set(
+    updaterOrValue: TValue | ((prevVal: TValue) => TValue),
+  ): void {
+    const _atom = typeof atom === "function" ? atom() : atom
+    _atom.set(updaterOrValue as never)
+  }
+  return set as Atom<TValue>['set']
+}
+
 /**
  * Returns a {@link WritableAtomSignal} that reads the current atom value when
  * called and exposes a `.set` method for updates.
@@ -42,11 +57,11 @@ export interface WritableAtomSignal<T> {
  * ```
  */
 export function injectAtom<TValue>(
-  atom: Atom<TValue>,
+  atom: Atom<TValue> | (() => Atom<TValue>),
   options?: InjectSelectorOptions<TValue>,
 ): WritableAtomSignal<TValue> {
   const value = injectSelector(atom, undefined, options)
   const atomSignal = (() => value()) as WritableAtomSignal<TValue>
-  atomSignal.set = atom.set
+  atomSignal.set = createSetter(atom)
   return atomSignal
 }

packages/angular-store/src/injectSelector.ts

@@ -1,7 +1,7 @@
 import {
-  DestroyRef,
   Injector,
   assertInInjectionContext,
+  effect,
   inject,
   linkedSignal,
   runInInjectionContext,
@@ -23,10 +23,6 @@ export type SelectionSource<T> = {
   }
 }
 
-function defaultCompare<T>(a: T, b: T) {
-  return a === b
-}
-
 function resolveInjector(
   fn: (...args: Array<never>) => unknown,
   injector?: Injector,
@@ -39,40 +35,6 @@ function resolveInjector(
   return injector
 }
 
-function createReadonlySelectionSignal<TSource, TSelected>(
-  source: SelectionSource<TSource>,
-  selector: (state: NoInfer<TSource>) => TSelected,
-  options?: InjectSelectorOptions<TSelected>,
-): Signal<TSelected> {
-  const injector = resolveInjector(
-    createReadonlySelectionSignal,
-    options?.injector,
-  )
-
-  return runInInjectionContext(injector, () => {
-    const destroyRef = inject(DestroyRef)
-    const compare = options?.compare ?? defaultCompare
-    const {
-      injector: _injector,
-      compare: _compare,
-      ...signalOptions
-    } = options ?? {}
-    const slice = linkedSignal(() => selector(source.get()), {
-      ...signalOptions,
-      equal: compare,
-    })
-
-    const { unsubscribe } = source.subscribe((state) => {
-      slice.set(selector(state))
-    })
-
-    destroyRef.onDestroy(() => {
-      unsubscribe()
-    })
-
-    return slice.asReadonly()
-  })
-}
 
 /**
  * Selects a slice of state from an atom or store and returns it as an Angular
@@ -91,10 +53,30 @@ function createReadonlySelectionSignal<TSource, TSelected>(
  * ```
  */
 export function injectSelector<TState, TSelected = NoInfer<TState>>(
-  source: SelectionSource<TState>,
+  source: SelectionSource<TState> | (() => SelectionSource<TState>),
   selector: (state: NoInfer<TState>) => TSelected = (d) =>
     d as unknown as TSelected,
   options?: InjectSelectorOptions<TSelected>,
 ): Signal<TSelected> {
-  return createReadonlySelectionSignal(source, selector, options)
+  const injector = resolveInjector(
+    injectSelector,
+    options?.injector,
+  )
+
+  return runInInjectionContext(injector, () => {
+    const _source = typeof source === "function" ? source : (() => source)
+
+    const slice = linkedSignal(() => selector(_source().get()), {
+      equal: options?.compare,
+    })
+
+    effect(() => {
+      const { unsubscribe } = _source().subscribe((state) => {
+        slice.set(selector(state))
+      })
+      return unsubscribe
+    })
+
+    return slice.asReadonly()
+  })
 }

packages/angular-store/tests/index.test.ts

@@ -1,7 +1,16 @@
 import { describe, expect, test } from 'vitest'
-import { Component, effect } from '@angular/core'
+import {
+  Component,
+  computed,
+  effect,
+  input,
+  inputBinding,
+  signal,
+  untracked,
+} from '@angular/core'
 import { TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
+import { render } from '@testing-library/angular'
 import { Store, createAtom, createStore } from '@tanstack/store'
 import {
   _injectStore,
@@ -12,6 +21,10 @@ import {
 } from '../src/index'
 import type { Atom } from '@tanstack/store'
 
+function createStableSignal<T>(fn: () => T): () => T {
+  return computed(() => untracked(fn))
+}
+
 describe('atom hooks', () => {
   test('injectSelector reads mutable atom state and rerenders when updated', () => {
     const atom = createAtom(0)
@@ -115,6 +128,34 @@ describe('atom hooks', () => {
 
     expect(fixture.nativeElement.textContent).toContain('Value: 0')
   })
+
+  test('injectAtom supports atoms created from input signals', async () => {
+    @Component({
+      template: `<p>{{ doubled() }}</p>`,
+      standalone: true,
+    })
+    class AtomFromInputChildCmp {
+      value = input.required<number>()
+      atom = createStableSignal(() => createAtom(this.value() * 2))
+      doubled = injectAtom(this.atom)
+
+      constructor() {
+        effect(() => {
+          this.doubled.set(this.value() * 2)
+        })
+      }
+    }
+
+    const value = signal(3)
+    const { getByText, findByText } = await render(AtomFromInputChildCmp, {
+      bindings: [inputBinding('value', value)],
+    })
+
+    expect(getByText('6')).toBeInTheDocument()
+
+    value.set(4)
+    expect(await findByText('8')).toBeInTheDocument()
+  })
 })
 
 describe('selector hooks', () => {
@@ -364,6 +405,32 @@ describe('selector hooks', () => {
       fixture.debugElement.query(By.css('p#derived')).nativeElement.textContent,
     ).toContain('2')
   })
+
+  test('injectSelector supports selectors that read input signals', async () => {
+    const selectorReadsInputStore = createStore({ cats: 2, dogs: 4 })
+
+    @Component({
+      template: `<p>{{ count() }}</p>`,
+      standalone: true,
+    })
+    class SelectorReadsInputChildCmp {
+      animal = input.required<'cats' | 'dogs'>()
+      count = injectSelector(
+        selectorReadsInputStore,
+        (state) => state[this.animal()],
+      )
+    }
+
+    const animal = signal<'cats' | 'dogs'>('cats')
+    const { getByText, findByText } = await render(SelectorReadsInputChildCmp, {
+      bindings: [inputBinding('animal', animal)],
+    })
+
+    expect(getByText('2')).toBeInTheDocument()
+
+    animal.set('dogs')
+    expect(await findByText('4')).toBeInTheDocument()
+  })
 })
 
 describe('injectStore', () => {

packages/angular-store/tests/test-setup.ts

@@ -1,12 +1,5 @@
-import '@analogjs/vite-plugin-angular/setup-vitest'
+import '@testing-library/jest-dom/vitest'
+import '@angular/compiler'
+import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed'
 
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing'
-import { getTestBed } from '@angular/core/testing'
-
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-)
+setupTestBed()

packages/angular-store/tsconfig.spec.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "types": ["vitest/globals", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["tests/**/*.ts"]
+}

packages/angular-store/vitest.config.ts

@@ -1,7 +1,9 @@
 import { defineConfig } from 'vitest/config'
+import angular from '@analogjs/vite-plugin-angular'
 import packageJson from './package.json'
 
 export default defineConfig({
+  plugins: [angular({ tsconfig: './tsconfig.spec.json' })],
   test: {
     name: packageJson.name,
     dir: './tests',