Update devtool support

Author: PKief

.vscode/settings.json

@@ -1,8 +1,8 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.organizeImports": true
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "explicit"
   },
   "eslint.validate": ["typescript"],
   "editor.formatOnSave": true

lib/src/dev-tools/state-dev-tools.ts

@@ -86,15 +86,15 @@ export class StateDevTools {
       map(state => JSON.parse(state)),
       mergeMap(state => from(Object.entries(state))),
       map(([storeName, state]) => ({
-        storeName,
+        storeName: storeName.match(/^\[(.*)\]/)?.[1] ?? storeName,
         state,
       })),
       withLatestFrom(this.storeRegistry.stores$),
       tap(([{ state, storeName }, store]) => {
         if (state) {
           // Temporarily save reference in history
           this.stateHistory.push(state);
-          store[storeName]?.update(() => state);
+          store[storeName]?.update(() => state, storeName);
         }
       })
     );
@@ -111,8 +111,9 @@ export class StateDevTools {
             mergeMap(key =>
               stores[key].state$.pipe(
                 filter(this.isStateUnprocessed.bind(this)),
-                map(state => {
-                  return { name: key, state: state };
+                withLatestFrom(stores[key].actions$),
+                map(([state, action]) => {
+                  return { name: `[${key}] ${action.title}`, state: state };
                 })
               )
             )

lib/src/store/store.ts

@@ -11,27 +11,30 @@ import {
 import { distinctUntilObjectChanged } from '../utils/distinctUntilObjectChanged';
 import { StoreRegistry } from './store-registry';
 
-type Action<State extends object> = (state: State) => State;
+type Action<State extends object> = {
+  reducer: (state: State) => State;
+  title: string;
+};
 
 export abstract class Store<State extends object> {
-  private readonly actionSource: Subject<Action<State>>;
   private readonly stateSource: BehaviorSubject<State>;
   private readonly registryService = inject(StoreRegistry);
 
   readonly state$: Observable<State>;
+  readonly actions$: Subject<Action<State>>;
 
   constructor(
     private name: string,
     initialState: State
   ) {
     this.stateSource = new BehaviorSubject<State>(initialState);
     this.state$ = this.stateSource.asObservable();
-    this.actionSource = new Subject<Action<State>>();
+    this.actions$ = new Subject<Action<State>>();
     this.registryService.addStore(name, this as unknown as Store<object>);
 
-    this.actionSource.pipe(observeOn(queueScheduler)).subscribe(action => {
+    this.actions$.pipe(observeOn(queueScheduler)).subscribe(action => {
       const currentState = this.stateSource.getValue();
-      const nextState = action(currentState);
+      const nextState = action.reducer(currentState);
       this.stateSource.next(nextState);
     });
   }
@@ -58,19 +61,22 @@ export abstract class Store<State extends object> {
     return this.stateSource.getValue();
   }
 
-  updateProperty(prop: keyof State, value: State[typeof prop]) {
-    this.update(state => ({
-      ...state,
-      [prop]: value,
-    }));
+  updateProperty(prop: keyof State, value: State[typeof prop], title: string) {
+    this.update(
+      state => ({
+        ...state,
+        [prop]: value,
+      }),
+      title
+    );
   }
 
-  update(stateChanger: (state: State) => State) {
-    this.actionSource.next(stateChanger);
+  update(stateChanger: (state: State) => State, title: string) {
+    this.actions$.next({ reducer: stateChanger, title });
   }
 
   destroy() {
-    this.actionSource.complete();
+    this.actions$.complete();
     this.stateSource.complete();
     this.registryService.deleteStore(this.name);
   }

playground/app/todo-store.service.ts

@@ -15,43 +15,55 @@ export class TodoStoreService extends Store<TodoStoreState> {
   }
 
   addTodo(description: string) {
-    this.update(state => ({
-      ...state,
-      todos: [
-        ...state.todos,
-        { description, completed: false, id: String(state.todos.length) },
-      ],
-    }));
+    this.update(
+      state => ({
+        ...state,
+        todos: [
+          ...state.todos,
+          { description, completed: false, id: String(state.todos.length) },
+        ],
+      }),
+      'add todo'
+    );
   }
 
   removeTodo(todo: Todo) {
-    this.update(state => ({
-      ...state,
-      todos: state.todos.filter(t => t.id !== todo.id),
-    }));
+    this.update(
+      state => ({
+        ...state,
+        todos: state.todos.filter(t => t.id !== todo.id),
+      }),
+      'remove todo'
+    );
   }
 
   completeTodo(todo: Todo) {
-    this.update(state => ({
-      ...state,
-      todos: state.todos.map(t => {
-        if (t.id === todo.id) {
-          t.completed = true;
-        }
-        return t;
+    this.update(
+      state => ({
+        ...state,
+        todos: state.todos.map(t => {
+          if (t.id === todo.id) {
+            t.completed = true;
+          }
+          return t;
+        }),
       }),
-    }));
+      'complete todo'
+    );
   }
 
   uncompleteTodo(todo: Todo) {
-    this.update(state => ({
-      ...state,
-      todos: state.todos.map(t => {
-        if (t.id === todo.id) {
-          t.completed = false;
-        }
-        return t;
+    this.update(
+      state => ({
+        ...state,
+        todos: state.todos.map(t => {
+          if (t.id === todo.id) {
+            t.completed = false;
+          }
+          return t;
+        }),
       }),
-    }));
+      'uncomplete todo'
+    );
   }
 }