fix(history-service): do not ignore consumer history changes on root …

…location push (#720)
feature-hub · Sep 27, 2022 · e14568c · e14568c
1 parent 0f16746
commit e14568c
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 6 deletions.
diff --git a/packages/history-service/package.json b/packages/history-service/package.json
@@ -24,6 +24,7 @@
     "@feature-hub/core": "^3.0.0",
     "@feature-hub/logger": "^3.0.0",
     "@feature-hub/server-request": "^3.0.0",
+    "fast-deep-equal": "^3.1.3",
     "resolve-pathname": "^3.0.0"
   },
   "devDependencies": {

diff --git a/packages/history-service/src/__tests__/index.test.ts b/packages/history-service/src/__tests__/index.test.ts
@@ -1359,7 +1359,7 @@ describe('defineHistoryService', () => {
                 search: '',
                 hash: '',
                 state: undefined,
-                key: 'default',
+                key: expect.any(String),
               },
               'PUSH',
             ],
@@ -2337,7 +2337,7 @@ describe('defineHistoryService', () => {
                   search: '',
                   hash: '',
                   state: undefined,
-                  key: 'default',
+                  key: expect.any(String),
                 },
                 action: 'PUSH',
               },

diff --git a/packages/history-service/src/internal/browser-consumer-history.ts b/packages/history-service/src/internal/browser-consumer-history.ts
@@ -1,3 +1,4 @@
+import equal from 'fast-deep-equal';
 import * as history from 'history';
 import {ConsumerHistory} from './consumer-history';
 import {HistoryMultiplexer} from './history-multiplexer';
@@ -64,7 +65,7 @@ export class BrowserConsumerHistory extends ConsumerHistory {
       this.historyKey
     );
 
-    if (this.location.key === location.key) {
+    if (this.matches(location)) {
       return;
     }
 
@@ -73,4 +74,12 @@ export class BrowserConsumerHistory extends ConsumerHistory {
 
     this.notifyListeners();
   }
+
+  private matches(location: history.Location): boolean {
+    if (history.createPath(location) !== history.createPath(this.location)) {
+      return false;
+    }
+
+    return equal(location.state, this.location.state);
+  }
 }
diff --git a/packages/history-service/src/internal/consumer-history.ts b/packages/history-service/src/internal/consumer-history.ts
@@ -18,14 +18,15 @@ export abstract class ConsumerHistory implements history.History {
       search,
       hash,
       state,
+      key,
     } = historyMultiplexer.getConsumerLocation(historyKey);
 
     this.location = {
       pathname: pathname.startsWith('/') ? pathname : `/${pathname}`,
       search,
       hash,
       state,
-      key: 'default',
+      key,
     };
 
     /**

diff --git a/packages/history-service/src/internal/create-key.ts b/packages/history-service/src/internal/create-key.ts
@@ -1,4 +1,4 @@
 // source: https://github.com/remix-run/history/blob/485ebc1/packages/history/index.ts#L1043
 export function createKey(): string {
-  return Math.random().toString(36).substr(2, 8);
+  return Math.random().toString(36).slice(2, 8);
 }
diff --git a/packages/history-service/src/internal/history-multiplexer.ts b/packages/history-service/src/internal/history-multiplexer.ts
@@ -108,7 +108,7 @@ export class HistoryMultiplexer {
 
     const {state, key} = this.rootLocation.state?.[historyKey] || {
       state: undefined,
-      key: 'default',
+      key: createKey(),
     };
 
     return {