added: generic typing for ref

Author: holux-design

playground/app.vue

@@ -9,9 +9,9 @@
 </template>
 
 <script setup lang="ts">
-const name = useQueryRef('name', { first: 'Lukas', last: 'Smith' }, 'Object')
+const name = useQueryRef('name', 123)
 
 const changeName = () => {
-  name.value.last = 'Hawk'
+  name.value++
 }
 </script>

src/runtime/composables/useQueryRef.ts

@@ -2,9 +2,11 @@ import { useRoute } from 'nuxt/app'
 
 declare const ref, watch
 
-type QueryParamType = 'string' | 'string[]' | 'number' | 'number[]' | 'Object'
+type QueryParamType = 'string' | 'string[]' | 'number' | 'number[]' | 'boolean' | 'boolean[]' | 'object' | 'object[]'
+
+export const useQueryRef = <T>(key: string, defaultValue: T = null) => {
+  const type = getType(defaultValue)
 
-export const useQueryRef = (key: string, defaultValue: any = null, type: QueryParamType = 'string') => {
   const loadedValue = loadQueryParamFromURL(key, type)
 
   const queryRef = ref(loadedValue || defaultValue)
@@ -17,28 +19,37 @@ export const useQueryRef = (key: string, defaultValue: any = null, type: QueryPa
     { deep: true },
   )
 
-  return queryRef
+  return queryRef as { value: T }
 }
 
 function updateQueryParamInURL(key, value, type: QueryParamType) {
   if (typeof window == 'undefined') return
 
-  if (['number[]', 'string[]'].includes(type)) value = value.join(',')
-  if (type == 'Object') value = JSON.stringify(value)
+  if (['string[]', 'number[]', 'boolean[]'].includes(type)) value = value.join(',')
+  if (['object', 'object[]'].includes(type)) value = JSON.stringify(value)
 
   const url = new URL(window.location.href)
-  url.searchParams.set(key, value)
+  url.searchParams.set(key, value.toString())
   url.search = decodeURIComponent(url.search)
   window.history.pushState(null, '', url.toString())
 }
 
 function loadQueryParamFromURL(key: string, type: QueryParamType) {
-  const loadedString = useRoute()?.query?.[key]?.toString() || ''
+  const loadedString = useRoute()?.query?.[key]?.toString()
   if (!loadedString) return
 
   if (type == 'number') return +loadedString
   if (type == 'number[]') return loadedString.split(',').map((n) => +n)
   if (type == 'string[]') return loadedString.split(',')
-  if (type == 'Object') return JSON.parse(loadedString)
+  if (type == 'boolean') return loadedString == 'true'
+  if (type == 'boolean[]') return loadedString.split(',').map((n) => n == 'true')
+  if (['object', 'object[]'].includes(type)) return JSON.parse(loadedString)
   return loadedString
 }
+
+function getType(defaultValue: any): QueryParamType {
+  let _type: any = typeof defaultValue
+  if (_type == 'object' && defaultValue?.length) _type = `${typeof defaultValue[0]}[]`
+
+  return _type
+}