fix(use-url-search-params): missing initial url params (#340)

* fix: initial URLSearchParams missing * chore: update docs
vueuse · Feb 22, 2021 · f8d4f1a · f8d4f1a
1 parent 4125d43
commit f8d4f1a
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 31 deletions.
diff --git a/packages/core/useUrlSearchParams/demo.vue b/packages/core/useUrlSearchParams/demo.vue
@@ -0,0 +1,18 @@
+
+<script setup lang="ts">
+import { useUrlSearchParams } from '.'
+
+const params = useUrlSearchParams('history', { window: window.parent })
+params.foo = 'bar'
+params.vueuse = 'awesome'
+</script>
+
+<template>
+  <div>
+    <ul>
+      <li v-for="key in Object.keys(params)" :key="key">
+        {{ key }}={{ params[key] }}
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/packages/core/useUrlSearchParams/index.md b/packages/core/useUrlSearchParams/index.md
@@ -11,7 +11,9 @@ Reactive [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLS
 ```html {19}
 <template>
   <ul>
-    <li v-for='key in Object.keys(params)'>{{ key }}={{ params[key] }}</li>
+    <li v-for='key in Object.keys(params)' :key="key">
+      { key }}={{ params[key] }}
+    </li>
   </ul>
 </template>
 
@@ -22,6 +24,7 @@ export default {
   setup() {
     const params = useUrlSearchParams('history')
     params.foo = 'bar'
+    params.vueuse = 'awesome'
     return { params }
   } 
 }
@@ -48,7 +51,7 @@ export declare function useUrlSearchParams<
 
 ## Source
 
-[Source](https://github.com/vueuse/vueuse/blob/main/packages/core/useUrlSearchParams/index.ts) • [Docs](https://github.com/vueuse/vueuse/blob/main/packages/core/useUrlSearchParams/index.md)
+[Source](https://github.com/vueuse/vueuse/blob/main/packages/core/useUrlSearchParams/index.ts) • [Demo](https://github.com/vueuse/vueuse/blob/main/packages/core/useUrlSearchParams/demo.vue) • [Docs](https://github.com/vueuse/vueuse/blob/main/packages/core/useUrlSearchParams/index.md)
 
 
 <!--FOOTER_ENDS-->
diff --git a/packages/core/useUrlSearchParams/index.stories.tsx b/packages/core/useUrlSearchParams/index.stories.tsx
diff --git a/packages/core/useUrlSearchParams/index.test.ts b/packages/core/useUrlSearchParams/index.test.ts
@@ -30,6 +30,18 @@ describe('useUrlSearchParams', () => {
     'history',
     'hash',
   ]).describe('each mode', (mode: 'history' | 'hash') => {
+    test('return initial params', () => {
+      useSetup(() => {
+        if (mode === 'hash')
+          mockPopstate('', '#/test/?foo=bar')
+        else
+          mockPopstate('?foo=bar', '')
+      })
+
+      const params = useUrlSearchParams(mode)
+      expect(params.foo).toBe('bar')
+    })
+
     test('update params on poststate event', () => {
       useSetup(() => {
         const params = useUrlSearchParams(mode)

diff --git a/packages/core/useUrlSearchParams/index.ts b/packages/core/useUrlSearchParams/index.ts
@@ -85,5 +85,8 @@ export function useUrlSearchParams<T extends Record<string, any> = UrlParams>(
     write(params, true)
   })
 
+  // Update the paramsMap with initial values
+  write(params, true)
+
   return paramsMap
 }