vue-useurl - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

package.json

 {
   "name": "vue-useurl",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Url Builder Hook for Vue.js Composition API",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -118,4 +118,55 @@ <img src="https://raw.githubusercontent.com/rainxh11/vue-useurl/master/assets/logo.svg" width="300">
 
+## How to use debouncing, throttling and other reactive backpressures with useUrl():
+
+```ts
+import { useFetch, useDebounce } from "@vueuse/core"
+import { useUrl } from 'vue-useurl'
+import { ref } from 'vue-demi'
+
+export useApi() {
+  const search = ref('query') //
+  const filters = ref([ 'filter1', 'filter2', 'filter3' ]) // declare reactive varibales 
+
+  const { url, queryParams, pathVariables, hash, path, disableCSV } = useUrl({ 
+      path: '/api/v1/users/:id/search',
+      pathVariables: {
+          id: 451
+      },
+      queryParams: {
+        search: useDebounce(search, 500), // 
+        limit: 50,
+        page: 12,
+        sort: 'CreatedOn',
+        types: useDebounce(filters, 3500) // then pass their reactive backpressure objects instead
+      },
+      hash: 'hashtag',
+      disableCSV: false
+  }, 
+  'http://api.com')
+
+  const { isFetching, error, data } = useFetch<Contact[]>(
+    url,
+    { initialData: { results: [] }, refetch: true}
+    )
+      .get()
+      .json()
+    }
+
+  return {
+    data,
+    search, //
+    filters,// changing this now will trigger the url re-build
+    queryParams,
+    pathVariables,
+    hash,
+    path, 
+    url
+  }
+}
+
+```
+
+
 ## License
 
 This is licensed under an MIT License. (LICENSE)

src/index.js

@@ -68,3 +68,4 @@ "use strict";
     const computedUrl = (0, vue_demi_1.computed)(() => {
-        let tempUrl = (builder.baseUrl + path.value).replace('//', '/');
+        let tempUrl = `${builder.baseUrl}${path.value}`;
+        tempUrl = tempUrl.replace(/([^:]\/)\/+/g, '$1');
         tempUrl = builder.buildPathVariables(tempUrl, pathVariables);
@@ -71,0 +72,0 @@ tempUrl = builder.buildQueryParams(tempUrl, queryParams, disableCSV.value);

src/index.ts

@@ -106,3 +106,4 @@ import { ref, reactive, computed } from 'vue-demi';
     const computedUrl = computed(() => {
-        let tempUrl  = (builder.baseUrl  + path.value).replace('//','/')
+        let tempUrl = `${builder.baseUrl}${path.value}`
+        tempUrl  = tempUrl.replace(/([^:]\/)\/+/g,'$1')
         tempUrl = builder.buildPathVariables(tempUrl, pathVariables)
@@ -109,0 +110,0 @@ tempUrl = builder.buildQueryParams(tempUrl, queryParams, disableCSV.value)

test/test.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@vueuse/core");
 const index_1 = require("../src/index");
-const core_1 = require("@vueuse/core");
+const vue_demi_1 = require("vue-demi");
+const search = (0, vue_demi_1.ref)('query');
+const filters = (0, vue_demi_1.ref)(['filter1', 'filter2', 'filter3']);
 const { url, queryParams, pathVariables, hash, path, disableCSV } = (0, index_1.useUrl)({
@@ -11,14 +14,15 @@ path: '/api/v1/entity/:id/subentity',
     queryParams: {
-        search: 'query',
+        search: (0, core_1.useDebounce)(search, 3500),
         sort: 'propery',
         limit: 100,
         page: 1,
-        filters: ['filter1', 'filter2', 'filter3']
+        filters: (0, core_1.useDebounce)(filters, 3500)
     },
     hash: 'someHash'
-}, 'https://somedomain.com');
-queryParams.size = (0, core_1.useDebounce)(queryParams.size, 500);
+}, 'https://somedomain.com/');
 console.log(url.value);
-hash.value = "newHashTag";
-queryParams.size = 2;
-console.log(url.value);
+search.value = "newQuery";
+filters.value = ["newFilter1", "newFilter"];
+setTimeout(() => {
+    console.log(url.value);
+}, 5000);

test/test.ts

@@ -0,4 +1,8 @@
+import { useDebounce } from '@vueuse/core';
 import { useUrl } from '../src/index'
-import { useDebounce } from '@vueuse/core'
+import { ref, reactive } from 'vue-demi'
  
+const search = ref('query')
+const filters = ref([ 'filter1', 'filter2', 'filter3' ])
+
 const { url, queryParams, pathVariables, hash, path, disableCSV } = useUrl({ 
@@ -10,21 +14,21 @@ path: '/api/v1/entity/:id/subentity',
     queryParams: {
-      search: 'query',
+      search: useDebounce(search, 3500),
       sort: 'propery',
       limit: 100,
       page: 1,
-      filters: [ 'filter1', 'filter2', 'filter3' ]
+      filters: useDebounce(filters, 3500)
     },
     hash: 'someHash'
 }, 
-'https://somedomain.com')
+'https://somedomain.com/')
 
-queryParams.size = useDebounce<number>(queryParams.size, 500)
+console.log(url.value)
 
+search.value = "newQuery"
+filters.value = ["newFilter1" , "newFilter"]
 
-console.log(url.value)
+setTimeout(() => {
+  console.log(url.value)
+},5000)
 
-hash.value = "newHashTag"
-queryParams.size = 2
 
-console.log(url.value)
-

No alert changes

Improved metrics

Total package byte prevSize

159169

increased by1.03%

Lines of code

280

increased by3.7%

Number of lines in readme file

171

increased by42.5%

No dependency changes