fix: change subscribeWithSelector API declaration

src/store.ts

@@ -9,6 +9,8 @@ function isPatch<T>(value: T | Patch<T>): value is Patch<T> {
 export class StateStore<T extends Record<string, unknown>> {
   private handlerSet = new Set<Handler<T>>();
 
+  private static logCount = 5;
+
   constructor(private value: T) {}
 
   public next = (newValueOrPatch: T | Patch<T>): void => {
@@ -36,13 +38,31 @@ export class StateStore<T extends Record<string, unknown>> {
     };
   };
 
-  public subscribeWithSelector = <O extends readonly unknown[]>(selector: (nextValue: T) => O, handler: Handler<O>) => {
+  public subscribeWithSelector = <O extends Readonly<Record<string, unknown>> | Readonly<unknown[]>>(
+    selector: (nextValue: T) => O,
+    handler: Handler<O>,
+  ) => {
     // begin with undefined to reduce amount of selector calls
     let selectedValues: O | undefined;
 
     const wrappedHandler: Handler<T> = (nextValue) => {
       const newlySelectedValues = selector(nextValue);
-      const hasUpdatedValues = selectedValues?.some((value, index) => value !== newlySelectedValues[index]) ?? true;
+
+      let hasUpdatedValues = !selectedValues;
+
+      if (Array.isArray(newlySelectedValues) && StateStore.logCount > 0) {
+        console.warn(
+          '[StreamChat]: The API of our StateStore has changed. Instead of returning an array in the selector, please return a named object of properties.',
+        );
+        StateStore.logCount--;
+      }
+
+      for (const key in selectedValues) {
+        // @ts-ignore TODO: remove array support (Readonly<unknown[]>)
+        if (selectedValues[key] === newlySelectedValues[key]) continue;
+        hasUpdatedValues = true;
+        break;
+      }
 
       if (!hasUpdatedValues) return;
 

src/thread.ts

@@ -197,8 +197,11 @@ export class Thread<SCG extends ExtendableGenerics = DefaultGenerics> {
 
   private subscribeMarkActiveThreadRead = () => {
     return this.state.subscribeWithSelector(
-      (nextValue) => [nextValue.active, ownUnreadCountSelector(this.client.userID)(nextValue)],
-      ([active, unreadMessageCount]) => {
+      (nextValue) => ({
+        active: nextValue.active,
+        unreadMessageCount: ownUnreadCountSelector(this.client.userID)(nextValue),
+      }),
+      ({ active, unreadMessageCount }) => {
         if (!active || !unreadMessageCount) return;
         this.throttledMarkAsRead();
       },
@@ -207,8 +210,8 @@ export class Thread<SCG extends ExtendableGenerics = DefaultGenerics> {
 
   private subscribeReloadActiveStaleThread = () =>
     this.state.subscribeWithSelector(
-      (nextValue) => [nextValue.active, nextValue.isStateStale],
-      ([active, isStateStale]) => {
+      (nextValue) => ({ active: nextValue.active, isStateStale: nextValue.isStateStale }),
+      ({ active, isStateStale }) => {
         if (active && isStateStale) {
           this.reload();
         }

src/thread_manager.ts

@@ -119,9 +119,9 @@ export class ThreadManager<SCG extends ExtendableGenerics = DefaultGenerics> {
 
   private subscribeManageThreadSubscriptions = () =>
     this.state.subscribeWithSelector(
-      (nextValue) => [nextValue.threads] as const,
-      ([nextThreads], prev) => {
-        const [prevThreads = []] = prev ?? [];
+      (nextValue) => ({ threads: nextValue.threads }),
+      ({ threads: nextThreads }, prev) => {
+        const { threads: prevThreads = [] } = prev ?? {};
         // Thread instance was removed if there's no thread with the given id at all,
         // or it was replaced with a new instance
         const removedThreads = prevThreads.filter((thread) => thread !== this.threadsById[thread.id]);
@@ -133,8 +133,8 @@ export class ThreadManager<SCG extends ExtendableGenerics = DefaultGenerics> {
 
   private subscribeReloadOnActivation = () =>
     this.state.subscribeWithSelector(
-      (nextValue) => [nextValue.active],
-      ([active]) => {
+      (nextValue) => ({ active: nextValue.active }),
+      ({ active }) => {
         if (active) this.reload();
       },
     );

src/types.ts

@@ -963,10 +963,10 @@ export type CreateChannelOptions<StreamChatGenerics extends ExtendableGenerics =
   reminders?: boolean;
   replies?: boolean;
   search?: boolean;
+  skip_last_msg_update_for_system_msgs?: boolean;
   typing_events?: boolean;
   uploads?: boolean;
   url_enrichment?: boolean;
-  skip_last_msg_update_for_system_msgs?: boolean;
 };
 
 export type CreateCommandOptions<StreamChatGenerics extends ExtendableGenerics = DefaultGenerics> = {

test/unit/threads.test.ts

@@ -1322,14 +1322,17 @@ describe('Threads 2.0', () => {
             },
           }));
           const spy = sinon.spy();
-          threadManager.state.subscribeWithSelector((nextValue) => [nextValue.pagination.isLoadingNext], spy);
+          threadManager.state.subscribeWithSelector(
+            (nextValue) => ({ isLoadingNext: nextValue.pagination.isLoadingNext }),
+            spy,
+          );
           spy.resetHistory();
 
           await threadManager.loadNextPage();
 
           expect(spy.callCount).to.equal(2);
-          expect(spy.firstCall.calledWith([true])).to.be.true;
-          expect(spy.lastCall.calledWith([false])).to.be.true;
+          expect(spy.firstCall.calledWith({ isLoadingNext: true })).to.be.true;
+          expect(spy.lastCall.calledWith({ isLoadingNext: false })).to.be.true;
         });
 
         it('updates thread list and pagination', async () => {