Skip to content

Commit f3fa1ba

Browse files
pikaxpikax
committed
update readme
1 parent f621434 commit f3fa1ba

File tree

3 files changed

+105
-82
lines changed

3 files changed

+105
-82
lines changed

‎CHANGELOG.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
77
88
--- -->
99

10+
## 1.0.0-dev.28
11+
12+
_2020-04-13_
13+
14+
## Breaking change
15+
16+
- [vue-composable/web](https://www.npmjs.com/package/@vue-composable/web) and [vue-composable/core](https://www.npmjs.com/package/@vue-composable/core) are deprecated
17+
18+
## Vue3
19+
20+
- Developing for vue-next first, with the same code base
21+
1022
## 1.0.0-dev.21
1123

1224
_2020-04-13_

‎packages/axios/README.md

Lines changed: 41 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,37 @@
22

33
<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>
44

5-
<!-- [![npm version](https://badge.fury.io/js/%40vue-composable%2Faxios.svg)](https://badge.fury.io/js/%40vue-composable%2Faxios) -->
5+
[![npm version](https://badge.fury.io/js/%40vue-composable%2Faxios.svg)](https://badge.fury.io/js/%40vue-composable%2Faxios)
66

77
[![bundle size](https://badgen.net/bundlephobia/minzip/@vue-composable/axios@next)](https://bundlephobia.com/result?p=@vue-composable/axios@next)
88

9-
# Vue 3
10-
11-
This version is `alpha` with support for the vue3 ([vue-next](https://github.com/vuejs/vue-next))
12-
13-
> Check webpack [vue3 example](https://github.com/pikax/vue-composable/tree/vue3/examples/vue-next-webpack-preview-master) or [CodeSandbox](https://codesandbox.io/s/vue-composable-next-6m5et)
14-
159
## Introduction
1610

1711
Use Axios library with the [composition-api](https://github.com/vuejs/composition-api)
1812

13+
# Vue 3
14+
15+
[Vue3](https://github.com/vuejs/vue-next) aka [vue-next](https://github.com/vuejs/vue-next) is supported on the [@next](https://www.npmjs.com/package/vue-composable/v/next)
16+
1917
## Installing
2018

2119
```bash
20+
# @vue/composition-api
21+
22+
# install with yarn
23+
yarn add @vue/composition-api @vue-composable/axios
24+
25+
# install with npm
26+
npm install @vue/composition-api @vue-composable/axios
27+
28+
29+
# vue-next / [email protected]
30+
2231
# install with yarn
23-
yarn add vue@next vue-composable@next @vue-composable/axios@next
32+
yarn add @vue-composable/axios@next
2433

2534
# install with npm
26-
npm install vue@next vue-composable@next @vue-composable/axios@next
35+
npm install @vue-composable/axios@next
2736
```
2837

2938
## Documentation
@@ -82,6 +91,29 @@ export default {
8291
4. Push to the branch: `git push origin feat/new-composable`
8392
5. Submit a pull request
8493

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+
85117
## License
86118

87119
[MIT](http://opensource.org/licenses/MIT)

‎packages/vue-composable/README.md

Lines changed: 52 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -2,61 +2,64 @@
22

33
<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>
44

5-
<!-- [![CircleCI](https://circleci.com/gh/pikax/vue-composable.svg?style=svg)](https://circleci.com/gh/pikax/vue-composable) -->
5+
[![CircleCI](https://circleci.com/gh/pikax/vue-composable.svg?style=svg)](https://circleci.com/gh/pikax/vue-composable)
6+
[![Coverage Status](https://coveralls.io/repos/github/pikax/vue-composable/badge.svg?branch=master)](https://coveralls.io/github/pikax/vue-composable?branch=master)
7+
[![npm version](https://badge.fury.io/js/vue-composable.svg)](https://badge.fury.io/js/vue-composable)
8+
[![bundle size](https://badgen.net/bundlephobia/minzip/vue-composable)](https://bundlephobia.com/result?p=vue-composable@next)
69

7-
[![Coverage Status](https://coveralls.io/repos/github/pikax/vue-composable/badge.svg?branch=vue3)](https://coveralls.io/github/pikax/vue-composable?branch=vue3)
10+
## Introduction
811

9-
<!-- [![npm version](https://badge.fury.io/js/vue-composable.svg)](https://badge.fury.io/js/vue-composable) -->
12+
`vue-composable` is out-of-box ready to use [composition-api](https://github.com/vuejs/composition-api) generic components.
1013

11-
[![bundle size](https://badgen.net/bundlephobia/minzip/vue-composable@next)](https://bundlephobia.com/result?p=vue-composable@next)
14+
100% typescript based composable components and full type support out-of-box.
1215

13-
# Vue 3
16+
Built for [vue-next](https://github.com/vuejs/vue-next) and [composition-api](https://github.com/vuejs/composition-api)
1417

15-
This version is `alpha` with support for the vue3 ([vue-next](https://github.com/vuejs/vue-next))
18+
This library aim is to be one stop shop for many real-world composable functions, with aggressive tree-shaking to keep it light on your end code.
1619

17-
> Check webpack [vue3 example](https://github.com/pikax/vue-composable/tree/vue3/examples/vue-next-webpack-preview-master) or [CodeSandbox](https://codesandbox.io/s/vue-composable-next-6m5et)
20+
# Vue 3
1821

19-
## Introduction
22+
[Vue3](https://github.com/vuejs/vue-next) aka [vue-next](https://github.com/vuejs/vue-next) is supported on the [@next](https://www.npmjs.com/package/vue-composable/v/next)
2023

21-
`vue-composable` is out-of-box ready to use the brand new [Vue 3](https://github.com/vuejs/vue-next) [composition-api](https://vue-composition-api-rfc.netlify.com/) generic components.
24+
## Installing
2225

23-
100% typescript based composable components and full type support out-of-box.
26+
```bash
27+
# @vue/composition-api
2428

25-
This library aim is to be one stop shop for many real-world composable functions, with aggressive tree-shaking to keep it light on your end code.
29+
# install with yarn
30+
yarn add @vue/composition-api vue-composable
2631

27-
[vue-composable](https://www.npmjs.com/package/vue-composable) is composed by two package [@vue-composable/core](./packages/core) and [@vue-composable/web](./packages/web).
32+
# install with npm
33+
npm install @vue/composition-api vue-composable
2834

29-
- [@vue-composable/core](./packages/core): contains helpers composables, such as Promise and Pagination.
30-
- [@vue-composable/web](./packages/web): contains [Web API](https://developer.mozilla.org/en-US/docs/Web/API) implementations
3135

32-
## Installing
36+
# vue-next / [email protected]
3337

34-
```bash
3538
# install with yarn
36-
yarn add @vue/runtime-core vue-composable
39+
yarn add vue-composable@next
3740

3841
# install with npm
39-
npm install @vue/runtime-core vue-composable
42+
npm install vue-composable@next
4043
```
4144

4245
## Documentation
4346

44-
> NOTE documentation might be slightly wrong, because it was built for the v2
45-
4647
Check our [documentation](https://pikax.me/vue-composable/)
4748

49+
### Composable
50+
4851
### Event
4952

5053
- [Event](https://pikax.me/vue-composable/composable/event/event) - Attach event listener to a DOM element
51-
- [Mouse Move](https://pikax.me/vue-composable/composable/event/onMoveMove) - Attach `mousemove` listener to a DOM element
54+
- [Mouse Move](https://pikax.me/vue-composable/composable/event/onMouseMove) - Attach `mousemove` listener to a DOM element
5255
- [Resize](https://pikax.me/vue-composable/composable/event/onResize) - Attach `resize` listener to a DOM element
5356
- [Scroll](https://pikax.me/vue-composable/composable/event/onScroll) - Attach `scroll` listener to a DOM element
5457

5558
### Date
5659

57-
- [useNow][now] : Return reactive custom timer with specified refresh rate
58-
- [useDateNow][date-now] : Returns reactive `Date.now()` with custom refresh rate
59-
- [usePerformanceNow][performance-now] : Returns reactive `performance.now()` with custom refresh rate
60+
- [useNow](https://pikax.me/vue-composable/composable/date/now) : Return reactive custom timer with specified refresh rate
61+
- [useDateNow](https://pikax.me/vue-composable/composable/date/dateNow) : Returns reactive `Date.now()` with custom refresh rate
62+
- [usePerformanceNow](https://pikax.me/vue-composable/composable/date/performanceNow) : Returns reactive `performance.now()` with custom refresh rate
6063

6164
### Format
6265

@@ -102,6 +105,7 @@ Check our [documentation](https://pikax.me/vue-composable/)
102105
### Promise
103106

104107
- [Promise](https://pikax.me/vue-composable/composable/promise/promise) - `Promise` reactive resolve and reject
108+
- [promiseLazy](https://pikax.me/vue-composable/composable/promise/promiseLazy) - Sugar for [usePromise](https://pikax.me/vue-composable/composable/promise/promise) `lazy:true`
105109
- [Cancellable Promise](https://pikax.me/vue-composable/composable/promise/cancellablePromise) - Allow to cancel promises
106110
- [Retry](https://pikax.me/vue-composable/composable/promise/retry) - Provides functionality to retry `promise`
107111

@@ -117,61 +121,19 @@ Check our [documentation](https://pikax.me/vue-composable/)
117121
- [BroadcastChannel](https://pikax.me/vue-composable/composable/web/broadcastChannel) - reactive `BroadcastChannel API`
118122
- [Geolocation API](https://pikax.me/vue-composable/composable/web/geolocation)
119123
- [CSS variables](https://pikax.me/vue-composable/composable/web/cssVariables) - reactive `CSS variables`
124+
- [Worker](https://pikax.me/vue-composable/composable/web/worker) - `Web Worker API`
125+
- [WorkerFunction](https://pikax.me/vue-composable/composable/web/workerFunction) - Webworker Function, offload a function to webworker
120126

121127
### External
122128

123129
> New packages needed
124130
125131
- [Axios](https://pikax.me/vue-composable/composable/external/axios) - [@vue-composable/axios](https://www.npmjs.com/package/@vue-composable/axios) reactive `axios` wrapper client
132+
- [makeAxios](https://pikax.me/vue-composable/composable/external/makeAxios) - [@vue-composable/makeAxios](https://www.npmjs.com/package/@vue-composable/makeAxios) wrap your `axios` instance
126133

127-
## Examples
128-
129-
Check out the [examples folder](examples) or start hacking on [codesandbox](https://codesandbox.io/s/vue-composable-examples-yuusf).
130-
131-
[![Edit Vue Composable Examples](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-template-yuusf?fontsize=14)
132-
133-
### NOTE
134-
135-
Currently only works with [composition-api](https://github.com/vuejs/composition-api), when [Vue3](https://github.com/vuejs/vue-next) gets release I will update to use the new reactive system (using [@vue/reactivity](https://github.com/vuejs/vue-next/tree/master/packages/reactivity))
136-
137-
For [vue-next](https://github.com/vuejs/vue-next) support please check [@next](https://www.npmjs.com/package/vue-composable/v/next)
138-
139-
## Usage
140-
141-
```vue
142-
<template>
143-
<div>
144-
<p>page {{ currentPage }} of {{ lastPage }}</p>
145-
<p>
146-
<button @click="prev">prev</button>
147-
<button @click="next">next</button>
148-
</p>
149-
<ul>
150-
<li v-for="n in result" :key="n">
151-
{{ n }}
152-
</li>
153-
</ul>
154-
</div>
155-
</template>
156-
157-
<script>
158-
import { useArrayPagination } from "vue-composable";
159-
160-
export default {
161-
setup() {
162-
const array = new Array(1000).fill(0).map((_, i) => i);
163-
const { result, next, prev, currentPage, lastPage } = useArrayPagination(
164-
array,
165-
{
166-
pageSize: 3
167-
}
168-
);
169-
170-
return { result, next, prev, currentPage, lastPage };
171-
}
172-
};
173-
</script>
174-
```
134+
## Information
135+
136+
This is a monorepo project, please check [packages](packages/)
175137

176138
## Contributing
177139

@@ -181,7 +143,24 @@ Tests and Documentation are the most important things for me, because good docum
181143

182144
I really appreciate some tweaks or changes on how the documentation is displayed and how to make it easier to read.
183145

184-
> I really need an logo for this project, if you have a good idea for a logo, please enter in contact with me, you can find me on the `Vue discord : @pikax`
146+
> I really need an logo for this project, if you have a good idea for a logo, please enter in contact with me, you can find me on the `Vue discord : @pikax
147+
148+
Twitter: [@pikax_dev](https://twitter.com/pikax_dev)
149+
150+
## Build
151+
152+
```bash
153+
# install packages
154+
yarn
155+
156+
# build and test for v2
157+
yarn build --version=2
158+
yarn test:vue2
159+
160+
# build and test for v3
161+
yarn build
162+
yarn test
163+
```
185164

186165
### New composable
187166

0 commit comments

Comments
 (0)