Skip to content

Commit 6ba9a86

Browse files
foxbenjaminfoxfoxbenjaminfox
committed
Squash of all commits for the inital release of the plugin
0 parents  commit 6ba9a86

11 files changed

+459
-0
lines changed

‎.babelrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": [
3+
"es2015"
4+
]
5+
}

‎.editorconfig

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
charset = utf-8
7+
trim_trailing_whitespace = true
8+
insert_final_newline = true
9+
10+
[*.md]
11+
trim_trailing_whitespace = false

‎.eslintrc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"parser": "babel-eslint",
3+
"env": {
4+
"node": true,
5+
"es6": true
6+
},
7+
"rules": {
8+
}
9+
}

‎.gitignore

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.DS_Store
2+
logs
3+
*.log
4+
node_modules
5+
dist
6+
tmp
7+
coverage
8+
npm-debug.log

‎.travis.yml

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
language: node_js
2+
node_js:
3+
- v5
4+
- v4
5+
- '0.12'
6+
- '0.10'
7+
after_script:
8+
- 'npm run coveralls'

‎CHANGELOG.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
2+
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
3+
# Changelog
4+
5+
- [v1.0.0](#v100)
6+
7+
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
8+
9+
### v1.0.0
10+
11+
* Initial public version of the library.

‎LICENSE

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
This software is released under the MIT license:
2+
3+
Copyright (c) 2016 Benjamin Fox [email protected]
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of
6+
this software and associated documentation files (the "Software"), to deal in
7+
the Software without restriction, including without limitation the rights to
8+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9+
the Software, and to permit persons to whom the Software is furnished to do so,
10+
subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.))

‎README.md

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<big><h1 align="center">vue-async-computed</h1></big>
2+
3+
<p align="center">
4+
<a href="https://npmjs.org/package/vue-async-computed">
5+
<img src="https://img.shields.io/npm/v/vue-async-computed.svg?style=flat-square"
6+
alt="NPM Version">
7+
</a>
8+
9+
<a href="https://coveralls.io/r/foxbenjaminfox/vue-async-computed">
10+
<img src="https://img.shields.io/coveralls/foxbenjaminfox/vue-async-computed.svg?style=flat-square"
11+
alt="Coverage Status">
12+
</a>
13+
14+
<a href="https://travis-ci.org/foxbenjaminfox/vue-async-computed">
15+
<img src="https://img.shields.io/travis/foxbenjaminfox/vue-async-computed.svg?style=flat-square"
16+
alt="Build Status">
17+
</a>
18+
19+
<a href="https://npmjs.org/package/vue-async-computed">
20+
<img src="http://img.shields.io/npm/dm/vue-async-computed.svg?style=flat-square"
21+
alt="Downloads">
22+
</a>
23+
24+
<a href="https://david-dm.org/foxbenjaminfox/vue-async-computed.svg">
25+
<img src="https://david-dm.org/foxbenjaminfox/vue-async-computed.svg?style=flat-square"
26+
alt="Dependency Status">
27+
</a>
28+
29+
<a href="https://github.com/foxbenjaminfox/vue-async-computed/blob/master/LICENSE">
30+
<img src="https://img.shields.io/npm/l/vue-async-computed.svg?style=flat-square"
31+
alt="License">
32+
</a>
33+
</p>
34+
35+
With this plugin, you can have have computed properties in Vue that are computed asynchronously.
36+
37+
Without using this plugin, you can't do this:
38+
39+
````js
40+
new Vue({
41+
data: {
42+
userId: 1
43+
},
44+
computed: {
45+
username: {
46+
// Using vue-resource
47+
return Vue.http.get('/get-username-by-id', { id: this.userId })
48+
}
49+
}
50+
}
51+
````
52+
53+
Or rather, you could, but it wouldn't do what you'd want it to do. But using this plugin, it works just like you'd expect:
54+
55+
````js
56+
new Vue({
57+
data: {
58+
userId: 1
59+
},
60+
asyncComputed: {
61+
username: {
62+
return Vue.http.get('/get-username-by-id', { id: this.userId })
63+
}
64+
}
65+
}
66+
````
67+
68+
This is especily useful with ES7 async functions:
69+
70+
````js
71+
new Vue({
72+
asyncComputed: {
73+
async someCalculation () {
74+
const x = await someAsycFunction()
75+
const y = await anotherAsyncFunction()
76+
return x + y
77+
}
78+
}
79+
})
80+
````
81+
82+
## Install
83+
84+
````sh
85+
npm install --save vue-async-computed
86+
````
87+
88+
## Usage example
89+
90+
````js
91+
import AsyncComputed from 'vue-async-computed'
92+
93+
/* Initialize the plugin */
94+
Vue.use(AsyncComputed)
95+
96+
/* Then, when you create a Vue instance (or component),
97+
you can pass an object named "asyncComputed" as well as
98+
or instead of one named "computed". The functions you pass
99+
to "asyncComputed" should return promises, and the values
100+
those promises resolve to are then asynchronously bound to
101+
the Vue instance as the promises resolve. Just like with
102+
normal computed properties, if the data the property depends
103+
on changes then the property is re-run automatically.
104+
105+
You can almost completely ignore the fact that behind the
106+
scenes they are asynchronous. The one thing to remember is
107+
that until a asynchronously property's promise resolves
108+
for the first time, the value of the computed property is null.
109+
*/
110+
111+
const vm = new Vue({
112+
data: {
113+
x: 2,
114+
y: 3
115+
},
116+
asyncComputed: {
117+
sum () {
118+
const sum = this.x + this.y
119+
return new Promise(resolve =>
120+
setTimeout(() => resolve(sum), 1000)
121+
)
122+
}
123+
}
124+
})
125+
126+
/* Until one second has passed, vm.sum will be null.
127+
After that, vm.sum will be 5. If you change vm.x or vm.y,
128+
one second later vm.sum will automatically update itself to be
129+
the sum of what you set vm.x and vm.y to be a second before.
130+
*/
131+
````
132+
133+
## License
134+
135+
MIT © [Benjamin Fox](http://github.com/foxbenjaminfox)
136+
137+
[npm-url]: https://npmjs.org/package/vue-async-computed
138+
[npm-image]: https://img.shields.io/npm/v/vue-async-computed.svg?style=flat-square
139+
140+
[travis-url]: https://travis-ci.org/foxbenjaminfox/vue-async-computed
141+
[travis-image]: https://img.shields.io/travis/foxbenjaminfox/vue-async-computed.svg?style=flat-square
142+
143+
[coveralls-url]: https://coveralls.io/r/foxbenjaminfox/vue-async-computed
144+
[coveralls-image]: https://img.shields.io/coveralls/foxbenjaminfox/vue-async-computed.svg?style=flat-square
145+
146+
[depstat-url]: https://david-dm.org/foxbenjaminfox/vue-async-computed
147+
[depstat-image]: https://david-dm.org/foxbenjaminfox/vue-async-computed.svg?style=flat-square
148+
149+
[download-badge]: http://img.shields.io/npm/dm/vue-async-computed.svg?style=flat-square

‎package.json

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"name": "vue-async-computed",
3+
"version": "1.0.4",
4+
"description": "Async computed properties for Vue",
5+
"main": "dist/index.js",
6+
"files": [
7+
"bin/",
8+
"dist/"
9+
],
10+
"scripts": {
11+
"clean": "rimraf dist",
12+
"lint": "eslint src test",
13+
"check": "npm run lint -s && dependency-check package.json --entry src",
14+
"watch": "watch 'npm run build' src test",
15+
"test": "babel-node test/index.js | tspec",
16+
"prebuild": "npm run check -s && npm run clean -s",
17+
"build": "babel --optional runtime src -d dist",
18+
"postbuild": "npm run test -s",
19+
"coverage": "babel-node node_modules/isparta/bin/isparta cover test/index.js",
20+
"coveralls": "npm run coverage -s && coveralls < coverage/lcov.info",
21+
"postcoveralls": "rimraf ./coverage",
22+
"prepublish": "npm run build -s",
23+
"patch": "npm version patch && npm publish",
24+
"minor": "npm version minor && npm publish",
25+
"major": "npm version major && npm publish",
26+
"postpublish": "git push origin master --follow-tags",
27+
"toc": "doctoc --github --title \"# Changelog\" CHANGELOG.md"
28+
},
29+
"repository": {
30+
"type": "git",
31+
"url": "git+https://github.com/foxbenjaminfox/vue-async-computed.git"
32+
},
33+
"keywords": [
34+
"vue async computed data"
35+
],
36+
"author": "Benjamin Fox <[email protected]>",
37+
"license": "MIT",
38+
"bugs": {
39+
"url": "https://github.com/foxbenjaminfox/vue-async-computed/issues"
40+
},
41+
"homepage": "https://github.com/foxbenjaminfox/vue-async-computed#readme",
42+
"devDependencies": {
43+
"babel-cli": "^6.6.5",
44+
"babel-core": "^6.7.4",
45+
"babel-eslint": "*",
46+
"babel-preset-es2015": "^6.6.0",
47+
"coveralls": "*",
48+
"dependency-check": "*",
49+
"doctoc": "*",
50+
"eslint": "*",
51+
"estraverse-fb": "^1.3.1",
52+
"isparta": "*",
53+
"rimraf": "*",
54+
"tap-spec": "*",
55+
"tape": "*",
56+
"vue": "^1.0.20",
57+
"watch": "*"
58+
}
59+
}

‎src/index.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const prefix = '_async_computed_'
2+
3+
export default {
4+
install (Vue, options) {
5+
Vue.mixin({
6+
created () {
7+
Object.keys(this.$options.asyncComputed || {}).forEach(key => {
8+
const fn = this.$options.asyncComputed[key]
9+
if (!this.$options.computed) this.$options.computed = {}
10+
Vue.set(this.$options.computed, prefix + key, fn)
11+
Vue.set(this.$data, key, null)
12+
})
13+
14+
this._initComputed()
15+
16+
Object.keys(this.$options.asyncComputed || {}).forEach(key => {
17+
let promiseId = 0
18+
this.$watch(prefix + key, newPromise => {
19+
const thisPromise = ++promiseId
20+
newPromise.then(value => {
21+
if (thisPromise !== promiseId) return
22+
this[key] = value
23+
}).catch(err => {
24+
throw err
25+
})
26+
}, { immediate: true })
27+
})
28+
}
29+
})
30+
}
31+
}

0 commit comments

Comments
 (0)