Skip to content

Commit ce5e31e

Browse files
rainxh11rainxh11
committed
+ removed 'disableCsv'
+ added 'arraySerializer' + used URLSearchParams() to serialize query params
1 parent 754204d commit ce5e31e

File tree

5 files changed

+1134
-903
lines changed

5 files changed

+1134
-903
lines changed

‎README.md‎

Lines changed: 115 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
<img src="https://raw.githubusercontent.com/rainxh11/vue-useurl/master/assets/logo.svg" width="300">
22

3-
# 🔗 Vue-useUrl
4-
## Reactive Url Builder Vue Composable for Vue 2 & Vue 3
3+
# 🔗 Vue-useUrl
4+
5+
## Reactive Url Builder Vue Composable for Vue 2 & Vue 3
6+
57
[![NPM version](https://img.shields.io/npm/v/vue-useurl.svg)](https://www.npmjs.com/package/vue-useurl)
68

7-
A library for building URL using ***(Query Parameters, Path Variables, Hash, Path)*** while being reactive and ready to use as Vue Composition API Composable
9+
A library for building URL using ***(Query Parameters, Path Variables, Hash, Path)*** while being reactive and ready to
10+
use as Vue Composition API Composable
811

912
## Installation
1013

@@ -20,101 +23,106 @@ npm install vue-useurl --save
2023
import { useUrl } from 'vue-useurl'
2124

2225
const params = {
23-
search: 'ahmed',
24-
limit: 50,
25-
page: 12,
26-
sort: 'CreatedOn',
27-
types: ['Cancelled', 'OnGoing']
26+
search: 'ahmed',
27+
limit: 50,
28+
page: 12,
29+
sort: 'CreatedOn',
30+
types: ['Cancelled', 'OnGoing']
2831
}
2932

30-
const { url, queryParams, pathVariables, hash, path, disableCSV } = useUrl({
31-
path: '/api/v1/users/:id/search',
32-
pathVariables: {
33-
id: 451
34-
},
35-
queryParams: {
36-
...params
37-
},
38-
hash: 'someHash',
39-
disableCSV: false
40-
},
41-
'http://api.com')
33+
const { url, queryParams, pathVariables, hash, path, disableCSV } = useUrl({
34+
path: '/api/v1/users/:id/search',
35+
pathVariables: {
36+
id: 451
37+
},
38+
queryParams: {
39+
...params
40+
},
41+
hash: 'someHash',
42+
arraySerializer: (v) => v.join(',')
43+
},
44+
'http://api.com')
4245
```
4346

4447
## Options
4548

4649
The `userUrl` function accepts two arguments. The first is 'options' of type IUrlOptions e.g:
50+
4751
```ts
52+
import { useUrl } from 'vue-useurl'
4853

49-
{
50-
path: '/path/path1', // URL Path
51-
pathVariables: {
52-
id: 451
53-
}, // Path variables e.g: /:id/
54-
queryParams: {
55-
limit:10,
56-
sortBy: 'property',
57-
page: 1
58-
}, // Query parameters
59-
hash: 'someHash', // Hash
60-
disableCSV: false
61-
// Enabled: param=1&param=2&param=3
62-
// Disabled: param=1,2,3
63-
}
54+
const { url, queryParams, pathVariables, hash, path, disableCSV } = useUrl(
55+
{
56+
path: '/path/path1', // URL Path
57+
pathVariables:
58+
{
59+
id: 451
60+
}
61+
, // Path variables e.g: /:id/
62+
queryParams: {
63+
limit: 10,
64+
sortBy:
65+
'property',
66+
page:
67+
1
68+
}
69+
, // Query parameters
70+
hash: 'someHash', // Hash
71+
})
6472
```
6573

6674
The second is 'baseUrl' that will be appended to Url path
6775

6876
```ts
69-
useUrl({
70-
path: '/about',
71-
queryParams: {
72-
foo:'bar',
73-
fizz: 'baz'
74-
},
75-
hash: 'contact',
76-
disableCSV: false
77-
},
78-
'http://api.com')
77+
useUrl({
78+
path: '/about',
79+
queryParams: {
80+
foo: 'bar',
81+
fizz: 'baz'
82+
},
83+
hash: 'contact',
84+
},
85+
'http://api.com')
7986

8087
// returns http://api.com/about?foo=bar&bar=baz#contact
8188
```
8289

83-
Variables returned by `useUrl()` are all reactive objects, changing any of: `path` `queryParams` `pathVariables` `hash` `disableCSV` will rebuild `url`
90+
Variables returned by `useUrl()` are all reactive objects, changing any
91+
of: `path` `queryParams` `pathVariables` `hash` `arraySerializer` will rebuild `url`
8492

8593
```ts
8694
const { url, queryParams, pathVariables, hash, path, disableCSV } = useUrl(/*..*/)
8795
```
8896

8997
## Usage with VueUse 'useFetch()'
9098

91-
This library is compatible with VueUse `useFetch()`, and `url` returned from `useUrl()` can easily be used to trigger auto-reftech if option `{ refetch: true }` is passed to `useFetch()` which make for intuitive and easy way to work with url parametes and variables without the need to modify url string directly
99+
This library is compatible with VueUse `useFetch()`, and `url` returned from `useUrl()` can easily be used to trigger
100+
auto-reftech if option `{ refetch: true }` is passed to `useFetch()` which make for intuitive and easy way to work with
101+
url parametes and variables without the need to modify url string directly
102+
92103
```ts
93104
import { useFetch } from "@vueuse/core"
94105
import { useUrl } from 'vue-useurl'
95106

96-
const { url, queryParams, pathVariables, hash, path, disableCSV } = useUrl({
97-
path: '/api/v1/users/:id/search',
98-
pathVariables: {
99-
id: 451
100-
},
101-
queryParams: {
102-
search: 'ahmed',
103-
limit: 50,
104-
page: 12,
105-
sort: 'CreatedOn',
106-
types: ['Cancelled', 'OnGoing']
107-
},
108-
hash: 'hashtag',
109-
disableCSV: false
110-
},
111-
'http://api.com')
112-
113-
const { isFetching, error, data } = useFetch(
114-
url,
115-
{ initialData: { results: [] }, refetch: true})
116-
.get()
117-
.json()
107+
const { url, queryParams, pathVariables, hash, path, disableCSV } = useUrl({
108+
path: '/api/v1/users/:id/search',
109+
pathVariables: {
110+
id: 451
111+
},
112+
queryParams: {
113+
search: 'ahmed',
114+
limit: 50,
115+
page: 12,
116+
sort: 'CreatedOn',
117+
types: ['Cancelled', 'OnGoing']
118+
},
119+
hash: 'hashtag',
120+
},
121+
'http://api.com')
122+
123+
const { isFetching, error, data } = useFetch(url, { initialData: { results: [] }, refetch: true })
124+
.get()
125+
.json()
118126
```
119127

120128
## How to use debouncing, throttling and other reactive backpressures with useUrl():
@@ -124,43 +132,44 @@ import { useFetch, useDebounce } from "@vueuse/core"
124132
import { useUrl } from 'vue-useurl'
125133
import { ref } from 'vue-demi'
126134

127-
export useApi() {
128-
const search = ref('query') //
129-
const filters = ref([ 'filter1', 'filter2', 'filter3' ]) // declare reactive varibales
130-
131-
const { url, queryParams, pathVariables, hash, path, disableCSV } = useUrl({
132-
path: '/api/v1/users/:id/search',
133-
pathVariables: {
134-
id: 451
135-
},
136-
queryParams: {
137-
search: useDebounce(search, 500), //
138-
limit: 50,
139-
page: 12,
140-
sort: 'CreatedOn',
141-
types: useDebounce(filters, 3500) // then pass their reactive backpressure objects instead
142-
},
143-
hash: 'hashtag',
144-
disableCSV: false
145-
},
146-
'http://api.com')
147-
148-
const { isFetching, error, data } = useFetch(
149-
url,
150-
{ initialData: { results: [] }, refetch: true})
151-
.get()
152-
.json()
153-
154-
return {
155-
data,
156-
search, //
157-
filters,// changing this now will trigger the url re-build
158-
queryParams,
159-
pathVariables,
160-
hash,
161-
path,
162-
url
163-
}
135+
export function useApi()
136+
{
137+
const search = ref('query') //
138+
const filters = ref(['filter1', 'filter2', 'filter3']) // declare reactive varibales
139+
140+
const { url, queryParams, pathVariables, hash, path, disableCSV } = useUrl({
141+
path: '/api/v1/users/:id/search',
142+
pathVariables: {
143+
id: 451
144+
},
145+
queryParams: {
146+
search: useDebounce(search, 500), //
147+
limit: 50,
148+
page: 12,
149+
sort: 'CreatedOn',
150+
types: useDebounce(filters, 3500) // then pass their reactive backpressure objects instead
151+
},
152+
hash: 'hashtag',
153+
disableCSV: false
154+
},
155+
'http://api.com')
156+
157+
const { isFetching, error, data } = useFetch(
158+
url,
159+
{ initialData: { results: [] }, refetch: true })
160+
.get()
161+
.json()
162+
163+
return {
164+
data,
165+
search, //
166+
filters,// changing this now will trigger the url re-build
167+
queryParams,
168+
pathVariables,
169+
hash,
170+
path,
171+
url
172+
}
164173
}
165174

166175
```

‎package.json‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-useurl",
3-
"version": "1.1.0",
3+
"version": "1.2.0",
44
"description": "Reactive Url Builder Vue Composable",
55
"type": "module",
66
"exports": "./dist/index.js",
@@ -20,7 +20,9 @@
2020
"publishConfig": {
2121
"@rainxh11:registry": "https://npm.pkg.github.com"
2222
},
23-
"files": ["dist/**/*"],
23+
"files": [
24+
"dist/**/*"
25+
],
2426
"keywords": [
2527
"vue",
2628
"compositionapi",
@@ -53,7 +55,7 @@
5355
},
5456
"homepage": "https://github.com/rainxh11/vue-useurl#readme",
5557
"dependencies": {
56-
"vue-demi": "^0.13.11"
58+
"vue-demi": "^0.14.7"
5759
},
5860
"peerDependencies": {
5961
"@vue/composition-api": "^1.0.0-rc.1",
@@ -65,16 +67,17 @@
6567
}
6668
},
6769
"devDependencies": {
68-
"@types/jest": "^27.4.1",
69-
"@types/node": "^18.15.3",
70-
"@typescript-eslint/eslint-plugin": "^5.17.0",
71-
"@typescript-eslint/parser": "^5.17.0",
72-
"@vueuse/core": "^8.3.1",
73-
"eslint": "^8.12.0",
70+
"@types/jest": "^29.5.12",
71+
"@types/node": "^20.11.19",
72+
"@typescript-eslint/eslint-plugin": "^7.0.1",
73+
"@typescript-eslint/parser": "^7.0.1",
74+
"@vueuse/core": "^10.7.2",
75+
"eslint": "^8.56.0",
76+
"eslint-plugin-vue": "^9.21.1",
7477
"jest": "^27.5.1",
75-
"prettier": "^2.8.2",
76-
"ts-jest": "^27.1.4",
77-
"ts-node": "^10.7.0",
78-
"typescript": "^4.6.4"
78+
"prettier": "^3.2.5",
79+
"ts-jest": "^29.1.2",
80+
"ts-node": "^10.9.2",
81+
"typescript": "^5.3.3"
7982
}
80-
}
83+
}

0 commit comments

Comments
 (0)