feat: use URL instead of path/params [breaking change]

src/index.js

@@ -1,3 +1,3 @@
-export { params, path, setParams, setPath } from './url'
+export { url } from './url'
 export { storage, setStorage } from './storage'
 export { default as scheduler } from './scheduler'

src/url.js

@@ -1,25 +1,51 @@
 import { observable, observe } from '@nx-js/observer-util'
 import scheduler from './scheduler'
-import { toQuery, toParams, toPathArray, toPathString } from './utils'
 
-export const params = observable(toParams(location.search))
-export const path = observable(toPathArray(location.pathname))
+export const url = observable(createUrl())
 
-export function setParams (newParams) {
-  for (let key of Object.keys(params)) {
-    delete params[key]
+const unWritableKeys = ['origin', 'searchParams']
+
+observe(syncUrl, { scheduler })
+
+function createUrl (href = location.href) {
+  const url = new URL(href)
+  const ret = {}
+  for (const key in url) {
+    ret[key] = url[key]
   }
-  Object.assign(params, newParams)
+  ret.params = createParams(url.searchParams)
+  return ret
 }
 
-export function setPath (newPath) {
-  path.length = 0
-  path.push(...newPath)
+function createParams (searchParams) {
+  /* Convert URLSearchParams object into plain key-value object */
+  return Array.from(searchParams.entries()).reduce((params, [key, value]) => ({
+    ...params,
+    [key]: value
+  }), {})
 }
 
-function syncUrl () {
-  const url = toPathString(path) + toQuery(params) + location.hash
-  history.replaceState(history.state, '', url)
+function updateParams (params, searchParams) {
+  /* Update the URLSearchParams object from plain key-value object */
+  for (const key in params) {
+    searchParams.set(key, params[key])
+  }
 }
 
-observe(syncUrl, { scheduler })
+function updateUrl (oldUrl, href = oldUrl.href) {
+  const newUrl = new URL(href)
+  for (const key in newUrl) {
+    if (unWritableKeys.includes(key)) continue
+    newUrl[key] = oldUrl[key]
+    /* URL does internal adjustments, like automatically add "#" to .hash (even if the user hadn't) */
+    /* So the updated properties need to be copied back for consistency and expected behaviour */
+    oldUrl[key] = newUrl[key]
+  }
+  updateParams(oldUrl.params, newUrl.searchParams)
+  return createUrl(newUrl.href)
+}
+
+function syncUrl () {
+  const newUrl = updateUrl(url)
+  history.replaceState(history.state, '', newUrl.href)
+}

types/index.d.ts

@@ -8,10 +8,5 @@ declare module 'react-easy-params' {
   }
 
   const storage:  ObjectObject
-  const params: PrimitiveObject
-  const path: Array<primitive>
-
-  function setParams(obj: PrimitiveObject): void
-  function setStorage(obj: ObjectObject): void
-  function setPath(array: Array<primitive>): void
+  const url:  ObjectObject
 }