alternative _injectStore for angular

Author: benjavicente

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

@@ -9,16 +9,16 @@ title: _injectStore
 function _injectStore<TState, TActions, TSelected>(
    store, 
    selector, 
-   options?): [Signal<TSelected>, [TActions] extends [never] ? (updater) => void : TActions];
+options?): WritableStoreSliceSignal<TState, TSelected, TActions>;
 ```
 
-Defined in: [packages/angular-store/src/\_injectStore.ts:24](https://github.com/TanStack/store/blob/main/packages/angular-store/src/_injectStore.ts#L24)
+Defined in: [packages/angular-store/src/\_injectStore.ts:34](https://github.com/TanStack/store/blob/main/packages/angular-store/src/_injectStore.ts#L34)
 
 Experimental combined read+write injection function for stores, mirroring
 injectAtom's pattern.
 
-Returns `[signal, actions]` when the store has an actions factory, or
-`[signal, setState]` for plain stores.
+Returns a callable slice with methods when the store has an actions factory, or
+with only the setState method for plain stores.
 
 ## Type Parameters
 
@@ -38,7 +38,7 @@ Returns `[signal, actions]` when the store has an actions factory, or
 
 ### store
 
-`Store`\<`TState`, `TActions`\>
+`Store`\<`TState`, `TActions`\> | () => `Store`\<`TState`, `TActions`\>
 
 ### selector
 
@@ -50,16 +50,16 @@ Returns `[signal, actions]` when the store has an actions factory, or
 
 ## Returns
 
-\[`Signal`\<`TSelected`\>, \[`TActions`\] *extends* \[`never`\] ? (`updater`) => `void` : `TActions`\]
+`WritableStoreSliceSignal`\<`TState`, `TSelected`, `TActions`\>
 
 ## Example
 
 ```ts
 // Store with actions
-readonly result = _injectStore(petStore, (s) => s.cats)
-// result[0] is Signal<number>, result[1] is actions
+readonly dogs = _injectStore(petStore, (s) => s.dogs)
+// dogs() and dogs.addDog()
 
 // Store without actions
-readonly result = _injectStore(plainStore, (s) => s)
-// result[0] is Signal<number>, result[1] is setState
+readonly value = _injectStore(plainStore, (s) => s)
+// value() and value.setState(...)
 ```

examples/angular/store-actions/src/app/app.component.ts

@@ -46,7 +46,7 @@ const petStore = createStore(
       </div>
       <div>
         <p>Dogs: {{ dogs() }}</p>
-        <button type="button" (click)="dogActions.addDog()">
+        <button type="button" (click)="dogs.addDog()">
           Vote for dogs
         </button>
       </div>
@@ -59,10 +59,8 @@ export class AppComponent {
   cats = injectSelector(petStore, (state) => state.cats)
   addCat = petStore.actions.addCat
 
-  // _injectStore gives both the selected signal and actions in a single tuple
-  private dogResult = _injectStore(petStore, (state) => state.dogs)
-  dogs = this.dogResult[0]
-  dogActions = this.dogResult[1]
+  // _injectStore: callable slice for reads; action methods for writes
+  dogs = _injectStore(petStore, (state) => state.dogs)
 
   total = injectSelector(petStore, (state) => state.cats + state.dogs)
 

packages/angular-store/src/_injectStore.ts

@@ -1,41 +1,66 @@
+import { untracked } from '@angular/core'
 import { injectSelector } from './injectSelector'
 import type { Signal } from '@angular/core'
 import type { Store, StoreActionMap } from '@tanstack/store'
 import type { InjectSelectorOptions } from './injectSelector'
 
+type WritableStoreSliceSignal<
+  TState,
+  TSelected,
+  TActions extends StoreActionMap,
+> = Signal<TSelected> &
+  ([TActions] extends [never]
+    ? Pick<Store<TState>, 'setState'>
+    : TActions)
+
 /**
  * Experimental combined read+write injection function for stores, mirroring
  * injectAtom's pattern.
- *
- * Returns `[signal, actions]` when the store has an actions factory, or
- * `[signal, setState]` for plain stores.
+ * 
+ * Returns a callable slice with methods when the store has an actions factory, or
+ * with only the setState method for plain stores.
  *
  * @example
  * ```ts
  * // Store with actions
- * readonly result = _injectStore(petStore, (s) => s.cats)
- * // result[0] is Signal<number>, result[1] is actions
+ * readonly dogs = _injectStore(petStore, (s) => s.dogs)
+ * // dogs() and dogs.addDog()
  *
  * // Store without actions
- * readonly result = _injectStore(plainStore, (s) => s)
- * // result[0] is Signal<number>, result[1] is setState
+ * readonly value = _injectStore(plainStore, (s) => s)
+ * // value() and value.setState(...)
  * ```
  */
 export function _injectStore<
   TState,
   TActions extends StoreActionMap,
   TSelected = NoInfer<TState>,
 >(
-  store: Store<TState, TActions>,
+  store: Store<TState, TActions> | (() => Store<TState, TActions>),
   selector: (state: NoInfer<TState>) => TSelected,
   options?: InjectSelectorOptions<TSelected>,
-): [
-  Signal<TSelected>,
-  [TActions] extends [never] ? Store<TState>['setState'] : TActions,
-] {
+): WritableStoreSliceSignal<TState, TSelected, TActions> {
   const selected = injectSelector(store, selector, options)
-  const actionsOrSetState =
-    (store.actions as StoreActionMap | undefined) ?? store.setState
 
-  return [selected, actionsOrSetState] as any
+  return new Proxy(selected, {
+    apply: () => selected(),
+    get(_target, prop, receiver) {
+      const inst = untracked(() =>
+        typeof store === 'function' ? store() : store,
+      )
+
+      const actions = inst.actions as StoreActionMap | undefined
+
+      if (actions != null && typeof actions === 'object') {
+        const method = Reflect.get(actions, prop, actions)
+        if (Object.hasOwn(actions, prop) && typeof method === 'function') {
+          return method
+        }
+      } else if (prop === 'setState' && typeof inst.setState === 'function') {
+        return inst.setState
+      }
+
+      return Reflect.get(selected, prop, receiver)
+    },
+  }) as WritableStoreSliceSignal<TState, TSelected, TActions>
 }

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

@@ -5,6 +5,7 @@ import {
   effect,
   input,
   inputBinding,
+  isSignal,
   signal,
   untracked,
 } from '@angular/core'
@@ -496,6 +497,14 @@ describe('dataType', () => {
 })
 
 describe('_injectStore', () => {
+  test('return value passes isSignal (proxies the selector signal)', () => {
+    TestBed.runInInjectionContext(() => {
+      const store = createStore(0)
+      const slice = _injectStore(store, (s) => s)
+      expect(isSignal(slice)).toBe(true)
+    })
+  })
+
   test('returns selected state and actions for stores with actions', () => {
     const store = createStore({ count: 0 }, ({ setState }) => ({
       inc: () => setState((prev) => ({ count: prev.count + 1 })),
@@ -511,12 +520,10 @@ describe('_injectStore', () => {
       standalone: true,
     })
     class MyCmp {
-      private result = _injectStore(store, (state) => state.count)
-      count = this.result[0]
-      actions = this.result[1]
+      protected count = _injectStore(store, (state) => state.count)
 
       inc() {
-        this.actions.inc()
+        this.count.inc()
       }
     }
 
@@ -550,12 +557,10 @@ describe('_injectStore', () => {
       standalone: true,
     })
     class MyCmp {
-      private result = _injectStore(store, (state) => state)
-      value = this.result[0]
-      setState = this.result[1]
+      private value = _injectStore(store, (state) => state)
 
       inc() {
-        this.setState((prev) => prev + 1)
+        this.value.setState((prev: number) => prev + 1)
       }
     }
 

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

@@ -73,22 +73,24 @@ test('createStoreContext preserves typed context shape', () => {
   expectTypeOf(ctx.petStore).toEqualTypeOf<Store<{ cats: number }>>()
 })
 
-test('_injectStore returns actions for stores with actions', () => {
+test('_injectStore returns callable slice with actions for stores with actions', () => {
   const store = createStore({ count: 0 }, ({ setState }) => ({
     inc: () => setState((prev) => ({ count: prev.count + 1 })),
   }))
 
-  const [selected, actions] = _injectStore(store, (state) => state.count)
+  const slice = _injectStore(store, (state) => state.count)
 
-  expectTypeOf(selected).toEqualTypeOf<Signal<number>>()
-  expectTypeOf(actions.inc).toBeFunction()
+  expectTypeOf(slice).toEqualTypeOf<
+    Signal<number> & { inc: () => void }
+  >()
 })
 
-test('_injectStore returns setState for plain stores', () => {
+test('_injectStore returns callable slice with setState for plain stores', () => {
   const store = createStore(0)
 
-  const [selected, setState] = _injectStore(store, (state) => state)
+  const slice = _injectStore(store, (state) => state)
 
-  expectTypeOf(selected).toEqualTypeOf<Signal<number>>()
-  expectTypeOf(setState).toEqualTypeOf<Store<number>['setState']>()
+  expectTypeOf(slice).toEqualTypeOf<
+    Signal<number> & { setState: Store<number>['setState'] }
+  >()
 })