refactor!: UrlSearchParams based Hash

src/ui/hash.test.ts

@@ -273,7 +273,7 @@ describe('hash', () => {
 
         map.setCenter([2.0, 1.0]);
 
-        expect(window.location.hash).toBe('#baz&map=7/1/2/135/60&foo=bar');
+        expect(window.location.hash).toBe('#baz=&map=7/1/2/135/60&foo=bar');
     });
 
     describe('_removeHash without a name', () => {
@@ -335,7 +335,7 @@ describe('hash', () => {
 
             hash._removeHash();
 
-            expect(window.location.hash).toBe('#baz&foo=bar');
+            expect(window.location.hash).toBe('#baz=&foo=bar');
         });
     });
 
@@ -383,10 +383,10 @@ describe('hash', () => {
             expect(hash._isValidHash(hash._getCurrentHash())).toBeTruthy();
         });
 
-        test('invalidate hash with slashes encoded as %2F', () => {
+        test('validate hash with slashes encoded as %2F', () => {
             window.location.hash = '#10%2F3.00%2F-1.00';
 
-            expect(hash._isValidHash(hash._getCurrentHash())).toBeFalsy();
+            expect(hash._isValidHash(hash._getCurrentHash())).toBeTruthy();
         });
 
         test('invalidate hash with string values', () => {

src/ui/hash.ts

@@ -65,40 +65,26 @@
         if (pitch) hash += (`/${Math.round(pitch)}`);
 
         if (this._hashName) {
-            const hashName = this._hashName;
-            let found = false;
-            const parts = window.location.hash.slice(1).split('&').map(part => {
-                const key = part.split('=')[0];
-                if (key === hashName) {
-                    found = true;
-                    return `${key}=${hash}`;
-                }
-                return part;
-            }).filter(a => a);
-            if (!found) {
-                parts.push(`${hashName}=${hash}`);
-            }
-            return `#${parts.join('&')}`;
+            const params = this._getHashParams();
+            params.set(this._hashName, hash);
+            return `#${decodeURIComponent(params.toString())}`;
         }
 
         return `#${hash}`;
     }
 
+    _getHashParams = () => {
+        return new URLSearchParams(window.location.hash.replace('#', ''));
+    };
+
     _getCurrentHash = () => {
-        // Get the current hash from location, stripped from its number sign
-        const hash = window.location.hash.replace('#', '');
+        const params = this._getHashParams();
         if (this._hashName) {
-            // Split the parameter-styled hash into parts and find the value we need
-            let keyval;
-            hash.split('&').map(
-                part => part.split('=')
-            ).forEach(part => {
-                if (part[0] === this._hashName) {
-                    keyval = part;
-                }
-            });
-            return (keyval ? keyval[1] || '' : '').split('/');
+            return (params.get(this._hashName) || '').split('/');
         }
+        // For unnamed hashes, get the first key
+        const keys = Array.from(params.keys());
+        const hash = keys.length > 0 ? keys[0] : '';
         return hash.split('/');
     };
 
@@ -121,30 +107,25 @@
     };
 
     _updateHashUnthrottled = () => {
-        // Replace if already present, else append the updated hash string
         const location = window.location.href.replace(/(#.*)?$/, this.getHashString());
         window.history.replaceState(window.history.state, null, location);
     };
 
     _removeHash = () => {
-        const currentHash = this._getCurrentHash();
-        if (currentHash.length === 0) {
-            return;
-        }
-        const baseHash = currentHash.join('/');
-        let targetHash = baseHash;
-        if (targetHash.split('&').length > 0) {
-            targetHash = targetHash.split('&')[0]; // #3/1/2&foo=bar -> #3/1/2
-        }
+        const params = this._getHashParams();
+
         if (this._hashName) {
-            targetHash = `${this._hashName}=${baseHash}`;
-        }
-        let replaceString = window.location.hash.replace(targetHash, '');
-        if (replaceString.startsWith('#&')) {
-            replaceString = replaceString.slice(0, 1) + replaceString.slice(2);
-        } else if (replaceString === '#') {
-            replaceString = '';
+            params.delete(this._hashName);
+        } else {
+            // For unnamed hash (#zoom/lat/lng&other=params), remove first entry
+            const keys = Array.from(params.keys());
+            if (keys.length > 0) {
+                params.delete(keys[0]);
+            }
         }
+
+        const newHash = decodeURIComponent(params.toString());
+        const replaceString = newHash ? `#${newHash}` : ''
         let location = window.location.href.replace(/(#.+)?$/, replaceString);
         location = location.replace('&&', '&');
         window.history.replaceState(window.history.state, null, location);
@@ -155,8 +136,8 @@
      */
     _updateHash: () => ReturnType<typeof setTimeout> = throttle(this._updateHashUnthrottled, 30 * 1000 / 100);
 
-    _isValidHash(hash: number[]) {
-        if (hash.length < 3 || hash.some(isNaN)) {
+    _isValidHash(hash: string[]) {
+        if (hash.length < 3 || hash.some(h => isNaN(+h))) {
             return false;
         }