feat(routing): new router option to prevent write on dispose

src/lib/__tests__/routing-test.ts

@@ -0,0 +1,152 @@
+import { createSearchClient } from '../../../test/mock/createSearchClient';
+import { wait } from '../../../test/utils/wait';
+import historyRouter from '../routers/history';
+import instantsearch from '../..';
+import { connectSearchBox } from '../../connectors';
+
+describe('routing', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('writeOnDispose=true', () => {
+    test('cleans URL on dispose', async () => {
+      const pushState = jest.spyOn(window.history, 'pushState');
+      const writeDelay = 400;
+
+      const search = instantsearch({
+        indexName: 'indexName',
+        searchClient: createSearchClient(),
+        routing: {
+          router: historyRouter({
+            writeDelay,
+          }),
+        },
+      });
+
+      search.addWidgets([connectSearchBox(() => {})({})]);
+
+      search.start();
+
+      // Wait for ${writeDelay} to pass then check URL has been initialized
+      await wait(1.5 * writeDelay);
+      expect(window.location.search).toEqual('');
+      expect(pushState).toHaveBeenCalledTimes(0);
+
+      // Trigger an update - push a change
+      search.renderState.indexName!.searchBox!.refine('Apple');
+
+      // Wait for ${writeDelay} to pass then check URL has been updated
+      await wait(1.5 * writeDelay);
+      expect(window.location.search).toEqual(
+        `?${encodeURI('indexName[query]=Apple')}`
+      );
+      expect(pushState).toHaveBeenCalledTimes(1);
+
+      // Trigger a dispose
+      search.dispose();
+
+      // Wait for ${writeDelay} to pass then check URL has been cleaned
+      await wait(1.5 * writeDelay);
+      expect(window.location.search).toEqual('');
+      expect(pushState).toHaveBeenCalledTimes(2);
+    });
+
+    test('refine after dispose', async () => {
+      const pushState = jest.spyOn(window.history, 'pushState');
+      const writeDelay = 400;
+
+      const search = instantsearch({
+        indexName: 'indexName',
+        searchClient: createSearchClient(),
+        routing: {
+          router: historyRouter({
+            writeDelay,
+          }),
+        },
+      });
+
+      search.addWidgets([connectSearchBox(() => {})({})]);
+
+      search.start();
+
+      // Wait for ${writeDelay} to pass then check URL has been initialized
+      await wait(1.5 * writeDelay);
+      expect(window.location.search).toEqual('');
+      expect(pushState).toHaveBeenCalledTimes(0);
+
+      // Trigger an update - push a change
+      search.renderState.indexName!.searchBox!.refine('Apple');
+
+      // Wait for ${writeDelay} to pass then check URL has been updated
+      await wait(1.5 * writeDelay);
+      expect(window.location.search).toEqual(
+        `?${encodeURI('indexName[query]=Apple')}`
+      );
+      expect(pushState).toHaveBeenCalledTimes(1);
+
+      // Trigger a dispose
+      search.dispose();
+
+      // Wait for ${writeDelay} to pass then check URL has been cleaned
+      await wait(1.5 * writeDelay);
+      expect(window.location.search).toEqual('');
+      expect(pushState).toHaveBeenCalledTimes(2);
+
+      // Trigger an update - push a change
+      search.renderState.indexName!.searchBox!.refine('Apple');
+
+      // Wait for ${writeDelay} to pass then check URL has not been updated
+      await wait(1.5 * writeDelay);
+      expect(window.location.search).toEqual('');
+      expect(pushState).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('writeOnDispose=false', () => {
+    test('does not clean URL on dispose', async () => {
+      const pushState = jest.spyOn(window.history, 'pushState');
+      const writeDelay = 400;
+
+      const search = instantsearch({
+        indexName: 'indexName',
+        searchClient: createSearchClient(),
+        routing: {
+          router: historyRouter({
+            writeDelay,
+            writeOnDispose: false,
+          }),
+        },
+      });
+
+      search.addWidgets([connectSearchBox(() => {})({})]);
+
+      search.start();
+
+      // Wait for ${writeDelay} to pass then check URL has been initialized
+      await wait(1.5 * writeDelay);
+      expect(window.location.search).toEqual('');
+      expect(pushState).toHaveBeenCalledTimes(0);
+
+      // Trigger an update - push a change
+      search.renderState.indexName!.searchBox!.refine('Apple');
+
+      // Wait for ${writeDelay} to pass then check URL has been updated
+      await wait(1.5 * writeDelay);
+      expect(window.location.search).toEqual(
+        `?${encodeURI('indexName[query]=Apple')}`
+      );
+      expect(pushState).toHaveBeenCalledTimes(1);
+
+      // Trigger a dispose
+      search.dispose();
+
+      // Wait for ${writeDelay} to pass then check URL has been cleaned
+      await wait(1.5 * writeDelay);
+      expect(window.location.search).toEqual(
+        `?${encodeURI('indexName[query]=Apple')}`
+      );
+      expect(pushState).toHaveBeenCalledTimes(1);
+    });
+  });
+});

src/lib/routers/history.ts

@@ -22,6 +22,7 @@ type BrowserHistoryArgs<TRouteState> = {
   // so we should accept a subset of it that is easier to work with in any
   // environments.
   getLocation(): Location;
+  writeOnDispose?: boolean;
 };
 
 const setWindowTitle = (title?: string): void => {
@@ -78,6 +79,13 @@ class BrowserHistory<TRouteState> implements Router<TRouteState> {
    */
   private shouldPushState: boolean = true;
 
+  /**
+   * Indicates if `write` should be called on `dispose`.
+   *
+   * @default true
+   */
+  private writeOnDispose: boolean = true;
+
   /**
    * Initializes a new storage provider that syncs the search state to the URL
    * using web APIs (`window.location.pushState` and `onpopstate` event).
@@ -88,13 +96,15 @@ class BrowserHistory<TRouteState> implements Router<TRouteState> {
     createURL,
     parseURL,
     getLocation,
+    writeOnDispose = true,
   }: BrowserHistoryArgs<TRouteState>) {
     this.windowTitle = windowTitle;
     this.writeTimer = undefined;
     this.writeDelay = writeDelay;
     this._createURL = createURL;
     this.parseURL = parseURL;
     this.getLocation = getLocation;
+    this.writeOnDispose = writeOnDispose;
 
     safelyRunOnBrowser(() => {
       const title = this.windowTitle && this.windowTitle(this.read());
@@ -190,7 +200,11 @@ class BrowserHistory<TRouteState> implements Router<TRouteState> {
       clearTimeout(this.writeTimer);
     }
 
-    this.write({} as TRouteState);
+    if (this.writeOnDispose) {
+      this.write({} as TRouteState);
+    } else {
+      this.shouldPushState = false;
+    }
   }
 }
 
@@ -231,12 +245,14 @@ export default function historyRouter<TRouteState = UiState>({
       },
     });
   },
+  writeOnDispose,
 }: Partial<BrowserHistoryArgs<TRouteState>> = {}): BrowserHistory<TRouteState> {
   return new BrowserHistory({
     createURL,
     parseURL,
     writeDelay,
     windowTitle,
     getLocation,
+    writeOnDispose,
   });
 }

src/middlewares/createRouterMiddleware.ts

@@ -62,13 +62,16 @@ export const createRouterMiddleware = <
 
     const initialUiState = instantSearchInstance._initialUiState;
 
+    let unsubscribed = false;
+
     return {
       onStateChange({ uiState }) {
         const routeState = stateMapping.stateToRoute(uiState);
 
         if (
-          lastRouteState === undefined ||
-          !isEqual(lastRouteState, routeState)
+          (lastRouteState === undefined ||
+            !isEqual(lastRouteState, routeState)) &&
+          !unsubscribed
         ) {
           router.write(routeState);
           lastRouteState = routeState;
@@ -87,6 +90,7 @@ export const createRouterMiddleware = <
       },
 
       unsubscribe() {
+        unsubscribed = true;
         router.dispose();
       },
     };