Skip to content

Commit 03e6633

Browse files
jy0529pikax
jy0529
and
pikax
committed
feat: add useCookie composable (#745)
* feat(composable): add a new composable * chore: update tests to use fake timers * refactor(use-cookie): add new repo for useCookie. * chore: few changes * chore: fix example on readme * chore: remove extra peerDependency * chore: build Co-authored-by: pikax <[email protected]>
1 parent 2ff3937 commit 03e6633

31 files changed

+952
-48
lines changed

‎docs/.vuepress/components/CookieExample.vue

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<div>
3+
cookie value: {{ cookie }}
4+
<p>
5+
<button @click="updateCookie">Update Cookie</button>
6+
</p>
7+
<p>
8+
<button @click="deleteCookie">Remove Cookie</button>
9+
</p>
10+
</div>
11+
</template>
12+
13+
<script>
14+
import { defineComponent } from "@vue/composition-api";
15+
import { useCookie } from "@vue-composable/cookie";
16+
17+
export default defineComponent({
18+
name: "cookie-example",
19+
20+
setup() {
21+
let idx = 0;
22+
23+
let { cookie, setCookie, removeCookie } = useCookie("my-cookie");
24+
25+
function updateCookie() {
26+
cookie.value = `my-cookie-${++idx}`;
27+
}
28+
29+
function deleteCookie() {
30+
removeCookie();
31+
}
32+
33+
return {
34+
cookie,
35+
36+
updateCookie,
37+
deleteCookie,
38+
};
39+
},
40+
});
41+
</script>
42+
43+
<style></style>

‎docs/.vuepress/config.js

+1
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,7 @@ module.exports = {
253253
children: [
254254
["composable/external/axios", "axios"],
255255
["composable/external/makeAxios", "makeAxios"],
256+
["composable/external/cookie", "cookie"],
256257
],
257258
},
258259
],

‎docs/README.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,7 @@ Check out the [examples folder](examples) or start hacking on [codesandbox](http
150150
151151
- [Axios](composable/external/axios) - [@vue-composable/axios](https://www.npmjs.com/package/@vue-composable/axios) reactive `axios` wrapper client
152152
- [makeAxios](composable/external/makeAxios) - [@vue-composable/axios](https://www.npmjs.com/package/@vue-composable/axios) wrap your `axios` instance
153+
- [useCookie](https://pikax.me/vue-composable/composable/external/useCookie) - [@vue-composable/cookie](https://www.npmjs.com/package/@vue-composable/cookie) `js-cookie` wrapper
153154

154155
## Usage
155156

@@ -178,12 +179,12 @@ export default {
178179
const { result, next, prev, currentPage, lastPage } = useArrayPagination(
179180
array,
180181
{
181-
pageSize: 3
182+
pageSize: 3,
182183
}
183184
);
184185
185186
return { result, next, prev, currentPage, lastPage };
186-
}
187+
},
187188
};
188189
</script>
189190
```

‎docs/api/cookie.api.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
## API Report File for "@vue-composable/cookie"
2+
3+
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4+
5+
```ts
6+
import { default as Cookies_2 } from "js-cookie";
7+
import { Ref } from "@vue/runtime-core";
8+
9+
// Warning: (ae-forgotten-export) The symbol "UseCookieReturn" needs to be exported by the entry point index.d.ts
10+
//
11+
// @public (undocumented)
12+
export function useCookie(
13+
key: string,
14+
defaultValue?: string,
15+
defaultOptions?: Cookies_2.CookieAttributes
16+
): UseCookieReturn;
17+
18+
// (No @packageDocumentation comment for this package)
19+
```

‎docs/api/vue-composable.api.md

+6
Original file line numberDiff line numberDiff line change
@@ -700,6 +700,9 @@ export const isElement: (val: unknown) => val is Element;
700700
// @public (undocumented)
701701
export const isFunction: (val: unknown) => val is Function;
702702

703+
// @public (undocumented)
704+
export const isNull: (val: unknown) => val is null;
705+
703706
// @public (undocumented)
704707
export const isNumber: (val: unknown) => val is number;
705708

@@ -715,6 +718,9 @@ export const isString: (val: unknown) => val is string;
715718
// @public (undocumented)
716719
export const isSymbol: (val: unknown) => val is symbol;
717720

721+
// @public (undocumented)
722+
export const isUndefined: (val: unknown) => val is undefined;
723+
718724
// @public (undocumented)
719725
export interface LocalStorageReturn<T> {
720726
clear: () => void;

‎docs/composable/external/cookie.md

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
# Cookie
2+
3+
> The [cookie](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie).
4+
5+
Provides a wrapper to use [js-cookie](https://github.com/js-cookie/js-cookie).
6+
7+
## Parameters
8+
9+
```js
10+
import { useCookie } from "@vue-composable/cookie";
11+
12+
useCookie(key, defaultValue, defaultOptions);
13+
```
14+
15+
| Parameters | Type | Required | Description |
16+
| -------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
17+
| key | `String` | `true` | Cookie name |
18+
| defaultValue | `String` | `false` | Set default value when cookie is undefined |
19+
| defaultOptions | `Object` | `false` | Set default options when cookie is undefined. <br/> <br/> The [js-cookie options](https://github.com/js-cookie/js-cookie#cookie-attributes). |
20+
21+
## State
22+
23+
The `useCookie` function exposes the following reactive state:
24+
25+
```js
26+
import { useCookie } from "@vue-composable/cookie";
27+
28+
const { cookie } = useCookie("some-cookie");
29+
```
30+
31+
| State | Type | Description |
32+
| ------ | ----------- | ----------- | ----------- | ---------------- |
33+
| cookie | `Ref<String | null | undefined>` | The cookie value |
34+
35+
## Methods
36+
37+
The `useCookie` function exposes the following methods:
38+
39+
```js
40+
import { useCookie } from "@vue-composable/cookie";
41+
42+
const { setCookie, removeCookie } = useCookie("some-cookie");
43+
```
44+
45+
| Signature | Description |
46+
| -------------- | ----------------------- |
47+
| `setCookie` | Update the cookie value |
48+
| `removeCookie` | Remove the cookie |
49+
50+
## Example
51+
52+
<cookie-example />
53+
54+
### Code
55+
56+
```vue
57+
<template>
58+
<div>
59+
cookie value: {{ cookie }}
60+
<p>
61+
<button @click="updateCookie">Update Cookie</button>
62+
</p>
63+
<p>
64+
<button @click="deleteCookie">Remove Cookie</button>
65+
</p>
66+
</div>
67+
</template>
68+
69+
<script>
70+
import { defineComponent } from "@vue/composition-api";
71+
import { useCookie } from "@vue-composable/cookie";
72+
73+
export default defineComponent({
74+
name: "cookie-example",
75+
76+
setup() {
77+
let idx = 0;
78+
79+
let { cookie, setCookie, removeCookie } = useCookie("my-cookie");
80+
81+
function updateCookie() {
82+
cookie.value = `my-cookie-${++idx}`;
83+
}
84+
85+
function deleteCookie() {
86+
removeCookie();
87+
}
88+
89+
return {
90+
cookie,
91+
92+
updateCookie,
93+
deleteCookie,
94+
};
95+
},
96+
});
97+
</script>
98+
99+
<style></style>
100+
```

‎jest.config.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,20 @@ module.exports = {
77
__SSR__: true,
88
__VERSION__: pkg.version,
99
__VUE_2__: process.env.VUE === "2",
10-
__COMMIT__: "none"
10+
__COMMIT__: "none",
1111
},
1212
setupFiles: [
1313
"<rootDir>/__tests__/setupTest.js",
1414
"<rootDir>/packages/vue-composable/__tests__/setupTest.js",
15-
"<rootDir>/packages/axios/__tests__/setupTest.js"
15+
"<rootDir>/packages/axios/__tests__/setupTest.js",
16+
"<rootDir>/packages/cookie/__tests__/setupTest.js",
1617
],
1718
coverageDirectory: "coverage",
1819
coverageReporters: ["html", "lcov", "text"],
1920
collectCoverageFrom: ["src/**/*.ts", "packages/*/src/**/*.ts"],
2021
watchPathIgnorePatterns: ["/node_modules/"],
2122
moduleFileExtensions: ["ts", "tsx", "js", "json"],
2223
rootDir: __dirname,
23-
testMatch: ["<rootDir>/packages/**/__tests__/**/*spec.[jt]s?(x)"]
24+
testMatch: ["<rootDir>/packages/**/__tests__/**/*spec.[jt]s?(x)"],
2425
// testMatch: ["<rootDir>/packages/vue-composable/__tests__/**/*spec.[jt]s?(x)"]
2526
};

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,8 @@
6060
"@rollup/plugin-node-resolve": "^11.2.0",
6161
"@rollup/plugin-replace": "^2.3.4",
6262
"@types/jest": "26.0.20",
63-
"@types/node": "^14.14.30",
63+
"@types/js-cookie": "^2.2.6",
64+
"@types/node": "^14.14.25",
6465
"@vue/compiler-sfc": "^3.0.5",
6566
"@vue/composition-api": "^1.0.0-rc.2",
6667
"@vue/reactivity": "^3.0.5",
@@ -80,6 +81,7 @@
8081
"jest": "^26.6.3",
8182
"jest-junit": "^12.0.0",
8283
"jest-websocket-mock": "^2.2.0",
84+
"js-cookie": "^2.2.1",
8385
"lint-staged": "^10.5.4",
8486
"lodash.camelcase": "^4.3.0",
8587
"minimist": "^1.2.5",

‎packages/axios/package.json

+6-2
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,10 @@
5959
"@types/jest": "^26.0.20",
6060
"@types/node": "^14.14.30",
6161
"@vue/runtime-core": "^3.0.5",
62-
"typescript": "^4.1.5"
62+
"typescript": "^4.1.4"
63+
},
64+
"peerDependencies": {
65+
"@vue/runtime-core": "^3.0.0",
66+
"axios": "^0.22.0"
6367
}
64-
}
68+
}

‎packages/cookie/README.md

+119
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
# @vue-composable/cookie
2+
3+
<p align="center"><a href="https://pikax.me/vue-composable/" target="_blank" rel="noopener noreferrer"><img width="250" src="https://pikax.me/vue-composable/assets/logo.svg" alt="vue-composable logo"></a></p>
4+
5+
[![npm version](https://badge.fury.io/js/%40vue-composable%2Fcookie.svg)](https://badge.fury.io/js/%40vue-composable%2Fcookie)
6+
7+
[![bundle size](https://badgen.net/bundlephobia/minzip/@vue-composable/cookie)](https://bundlephobia.com/result?p=@vue-composable/cookie)
8+
9+
## Introduction
10+
11+
Use js-cookie library with the [composition-api](https://github.com/vuejs/composition-api)
12+
13+
# Vue 3
14+
15+
[Vue3](https://github.com/vuejs/vue-next) aka [vue-next](https://github.com/vuejs/vue-next) is fully supported
16+
17+
## Installing
18+
19+
```bash
20+
# @vue/composition-api
21+
22+
# install with yarn
23+
yarn add @vue/composition-api @vue-composable/cookie
24+
25+
# install with npm
26+
npm install @vue/composition-api @vue-composable/cookie
27+
28+
29+
# vue-next / [email protected]
30+
31+
# install with yarn
32+
yarn add @vue-composable/cookie
33+
34+
# install with npm
35+
npm install @vue-composable/cookie
36+
```
37+
38+
## Documentation
39+
40+
Check our [documentation](https://pikax.me/vue-composable/composable/external/cookie)
41+
42+
```vue
43+
<template>
44+
<div>
45+
cookie value: {{ cookie }}
46+
<p>
47+
<button @click="updateCookie">Update Cookie</button>
48+
</p>
49+
<p>
50+
<button @click="deleteCookie">Remove Cookie</button>
51+
</p>
52+
</div>
53+
</template>
54+
55+
<script>
56+
import { defineComponent } from "@vue/composition-api";
57+
import { useCookie } from "@vue-composable/cookie";
58+
59+
export default defineComponent({
60+
name: "cookie-example",
61+
62+
setup() {
63+
let idx = 0;
64+
65+
let { cookie, setCookie, removeCookie } = useCookie("my-cookie");
66+
67+
function updateCookie() {
68+
cookie.value = `my-cookie-${++idx}`;
69+
}
70+
71+
function deleteCookie() {
72+
removeCookie();
73+
}
74+
75+
return {
76+
cookie,
77+
78+
updateCookie,
79+
deleteCookie,
80+
};
81+
},
82+
});
83+
</script>
84+
```
85+
86+
## Contributing
87+
88+
1. Fork it!
89+
2. Create your feature branch: `git checkout -b feat/new-composable`
90+
3. Commit your changes: `git commit -am 'feat(composable): add a new composable'`
91+
4. Push to the branch: `git push origin feat/new-composable`
92+
5. Submit a pull request
93+
94+
## Build
95+
96+
```bash
97+
# install packages
98+
yarn
99+
100+
# build and test for v2
101+
yarn build --version=2
102+
yarn test:vue2
103+
104+
# build and test for v3
105+
yarn build
106+
yarn test
107+
```
108+
109+
### New composable
110+
111+
1. Fork it!
112+
2. Create your feature branch: `git checkout -b feat/new-composable`
113+
3. Commit your changes: `git commit -am 'feat(composable): add a new composable'`
114+
4. Push to the branch: `git push origin feat/new-composable`
115+
5. Submit a pull request
116+
117+
## License
118+
119+
[MIT](http://opensource.org/licenses/MIT)

0 commit comments

Comments
 (0)