Add start and stop methods to history interfaces

.changeset/smooth-garlics-walk.md

@@ -0,0 +1,5 @@
+---
+"@chialab/synapse": minor
+---
+
+Add `start` and `stop` methods to history interfaces.

src/Router/BrowserHistory.ts

@@ -2,9 +2,9 @@ import { History, isHistoryState, type HistoryState } from './History';
 import type { State } from './State';
 
 /**
- * Flag listening state for global `popstate` event.
+ * The active browser history instance.
  */
-let listening = false;
+let listening: BrowserHistory | false = false;
 
 /**
  * Ensure that the history state con be used as history state.
@@ -25,28 +25,51 @@ export class BrowserHistory extends History {
     constructor(adapter = window.history) {
         super();
         this.#adapter = adapter;
-        this.listen();
     }
 
     /**
-     * Add global `popstate` listener.
+     * @inheritdoc
      */
-    listen() {
-        if (listening) {
+    start() {
+        if (listening && listening !== this) {
             throw new Error('You cannot initialize more than one "BrowserHistory".');
         }
-        listening = true;
+        if (this.active) {
+            return;
+        }
+        super.start();
+        listening = this;
         window.addEventListener('popstate', this.onPopState);
     }
 
     /**
-     * Remove global `popstate` listener.
+     * @inheritdoc
      */
-    unlisten() {
+    stop() {
+        if (!this.active) {
+            return;
+        }
+        super.stop();
         listening = false;
         window.removeEventListener('popstate', this.onPopState);
     }
 
+    /**
+     * Add global `popstate` listener.
+     * @deprecated Use `start` instead.
+     */
+    listen() {
+        return this.start();
+    }
+
+    /**
+     * Remove global `popstate` listener.
+     * @deprecated Use `stop` instead.
+     */
+    unlisten() {
+        return this.stop();
+    }
+
     /**
      * @inheritdoc
      */

src/Router/History.ts

@@ -64,12 +64,20 @@ export class History extends Emitter<{
     protected _map: Map<HistoryState, State> = new Map();
     protected _index = -1;
     protected _id: string;
+    protected _active = false;
 
     constructor() {
         super();
         this._id = `${Date.now()}-${instances++}`;
     }
 
+    /**
+     * Get history active status.
+     */
+    get active() {
+        return this._active;
+    }
+
     /**
      * Get history states.
      */
@@ -98,6 +106,24 @@ export class History extends Emitter<{
         return this._entries.length;
     }
 
+    /**
+     * Start listening history changes.
+     */
+    start() {
+        if (this.active) {
+            return;
+        }
+        this._active = true;
+        this.reset();
+    }
+
+    /**
+     * Stop listening history changes.
+     */
+    stop() {
+        this._active = false;
+    }
+
     /**
      * Start listening history changes.
      */

src/Router/Router.ts

@@ -528,7 +528,7 @@ export class Router extends Emitter<{
      */
     async start(pathname?: string): Promise<Response> {
         this.#running = true;
-        this.history.reset();
+        this.history.start();
         this.history.on('popstate', this.onPopState);
 
         if (this.history instanceof BrowserHistory) {
@@ -545,6 +545,7 @@ export class Router extends Emitter<{
         this.#running = false;
         if (this.history) {
             this.history.off('popstate', this.onPopState);
+            this.history.stop();
         }
     }
 

test/App.spec.js

@@ -15,7 +15,7 @@ describe('App', () => {
     });
 
     afterEach(() => {
-        history.unlisten?.();
+        history.stop();
         wrapper?.remove();
     });
 

test/Helpers.spec.js

@@ -16,7 +16,7 @@ describe('Helpers', () => {
         });
 
         afterEach(() => {
-            history.unlisten?.();
+            history.stop();
             wrapper?.remove();
         });
 

test/History.spec.js

@@ -11,10 +11,11 @@ describe('History', () => {
 
             beforeEach(() => {
                 history = new History();
+                history.start();
             });
 
             afterEach(() => {
-                history.unlisten?.();
+                history.stop();
             });
 
             test('constructor', () => {