allow multiple client subscriptions

src/client/client.js

@@ -303,10 +303,25 @@ class _ClientImpl {
   }
 
   subscribe(fn) {
-    const callback = () => fn(this.getState());
-    this.transport.subscribe(callback);
+    // If we already have a subscription, then create a new
+    // callback that invokes both the old and new subscriptions.
+    const prev = this.subscribeCallback;
+    const callback = () => {
+      prev();
+      fn(this.getState());
+    };
+
     this.subscribeCallback = callback;
+    this.transport.subscribe(callback);
     callback();
+
+    // Return a handle that allows the caller to unsubscribe.
+    // Warning: Will revert any callbacks that were added
+    // after this current call to subscribe(), so use it to
+    // only remove the latest subscription.
+    return () => {
+      this.subscribeCallback = prev;
+    };
   }
 
   getState() {

src/client/client.test.js

@@ -536,14 +536,11 @@ describe('log handling', () => {
 });
 
 describe('undo / redo', () => {
-  let game;
-  beforeEach(() => {
-    game = Game({
-      moves: {
-        A: (G, ctx, arg) => ({ arg }),
-      },
-    });
-  });
+  const game = {
+    moves: {
+      A: (G, ctx, arg) => ({ arg }),
+    },
+  };
 
   test('basic', () => {
     const client = Client({ game });
@@ -559,3 +556,67 @@ describe('undo / redo', () => {
     expect(client.getState().G).toEqual({ arg: 42 });
   });
 });
+
+describe('subscribe', () => {
+  let client;
+  let fn;
+  beforeAll(() => {
+    const game = {
+      moves: {
+        A: G => {
+          G.moved = true;
+        },
+      },
+    };
+    client = Client({ game });
+    fn = jest.fn();
+    client.subscribe(fn);
+  });
+
+  test('called at the beginning', () => {
+    expect(fn).toBeCalledWith(
+      expect.objectContaining({
+        G: {},
+        ctx: expect.objectContaining({ turn: 1 }),
+      })
+    );
+  });
+
+  test('called after a move', () => {
+    fn.mockClear();
+    client.moves.A();
+    expect(fn).toBeCalledWith(
+      expect.objectContaining({
+        G: { moved: true },
+      })
+    );
+  });
+
+  test('called after an event', () => {
+    fn.mockClear();
+    client.events.endTurn();
+    expect(fn).toBeCalledWith(
+      expect.objectContaining({
+        ctx: expect.objectContaining({ turn: 2 }),
+      })
+    );
+  });
+
+  test('multiple subscriptions', () => {
+    fn.mockClear();
+
+    const fn2 = jest.fn();
+    const unsubscribe = client.subscribe(fn2);
+
+    expect(fn).toBeCalled();
+    expect(fn2).toBeCalled();
+    fn.mockClear();
+    fn2.mockClear();
+
+    unsubscribe();
+
+    client.moves.A();
+    expect(fn).toBeCalled();
+    expect(fn2).not.toBeCalled();
+  });
+});