From f13838be9db162d8a7920261ca499cd7f5b8a4af Mon Sep 17 00:00:00 2001
From: William Mcmurray
Date: Wed, 25 Jan 2017 23:17:05 -0500
Subject: [PATCH 001/150] I have have found a typo
I didn't know we could submit a file change directly from github ! lets see how it goes...
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 68a33ac..fc69823 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@
**This plugin is now Vue 2.0 compatible!**
-With this plugin, you can have have computed properties in Vue that are computed asynchronously.
+With this plugin, you can have computed properties in Vue that are computed asynchronously.
Without using this plugin, you can't do this:
From e6db3f09bc920259bac161b28b7694fa32fee8be Mon Sep 17 00:00:00 2001
From: Benjamin Fox
Date: Sun, 19 Feb 2017 22:56:48 +0200
Subject: [PATCH 002/150] Update dev dependencies and swap out isparta in favor
of babel-istanbul
---
.travis.yml | 2 --
README.md | 2 --
package.json | 24 ++++++++++++------------
3 files changed, 12 insertions(+), 16 deletions(-)
diff --git a/.travis.yml b/.travis.yml
index 32b19fe..25bb398 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -2,7 +2,5 @@ language: node_js
node_js:
- v7
- v6
- - v5
- - v4
after_script:
- 'npm run coveralls'
diff --git a/README.md b/README.md
index 68a33ac..c19eafe 100644
--- a/README.md
+++ b/README.md
@@ -32,8 +32,6 @@
+
+// If you only want to display the message the first times the posts load, you can use the fact that the default value is null:
+//
Loading posts
+
+// You can display an error message if loading the posts failed.
+// The vue-resources library passes the error response on to the rejection handler.
+// It is therefore available in $asyncComputed.posts.exception
+//
Error while loading posts: $asyncComputed.posts.exception.statusText
+
+
+
+
+```
## Usage example
```js
-import AsyncComputed from 'vue-async-computed'
-
-/* Initialize the plugin */
-Vue.use(AsyncComputed)
-
-/*
- Then, when you create a Vue instance (or component),
- you can pass an object named "asyncComputed" as well as
- or instead of the standard "computed" option. The functions
- you pass to "asyncComputed" should return promises, and the values
- those promises resolve to are then asynchronously bound to the
- Vue instance as they resolve. Just as with normal computed
- properties, if the data the property depends on changes
- then the property is re-run automatically.
-
- You can almost completely ignore the fact that behind the
- scenes they are asynchronous. The one thing to remember is
- that until a asynchronous property's promise resolves
- for the first time, the value of the computed property is null.
-*/
-
-const vm = new Vue({
- data: {
- x: 2,
- y: 3
+export default {
+ data () {
+ return {
+ x: 2,
+ y: 3
+ }
},
+
+ /*
+ When you create a Vue instance (or component),
+ you can pass an object named "asyncComputed" as well as
+ or instead of the standard "computed" option. The functions
+ you pass to "asyncComputed" should return promises, and the values
+ those promises resolve to are then asynchronously bound to the
+ Vue instance as they resolve. Just as with normal computed
+ properties, if the data the property depends on changes
+ then the property is re-run automatically.
+
+ You can almost completely ignore the fact that behind the
+ scenes they are asynchronous. The one thing to remember is
+ that until a asynchronous property's promise resolves
+ for the first time, the value of the computed property is null.
+ */
asyncComputed: {
- sum () {
- const total = this.x + this.y
- return new Promise(resolve =>
- setTimeout(() => resolve(total), 1000)
- )
+ /*
+ Until one second has passed, vm.sum will be null. After that,
+ vm.sum will be 5. If you change vm.x or vm.y, then one
+ second later vm.sum will automatically update itself to be
+ the sum of the values to which you set vm.x and vm.y the previous second.
+ */
+ async sum () {
+ await new Promise(resolve => setTimeout(resolve, 1000))
+ return this.x + this.y
}
}
-})
-
-/*
- Until one second has passed, vm.sum will be null. After that,
- vm.sum will be 5. If you change vm.x or vm.y, then one
- second later vm.sum will automatically update itself to be
- the sum of the values to which you set vm.x and vm.y the previous second.
-*/
+}
```
-[Like with regular synchronous computed properties](https://vuejs.org/guide/computed.html#Computed-Setter), you can pass an object
+[Like with regular synchronous computed properties](https://vuejs.org/guide/essentials/computed.html#writable-computed), you can pass an object
with a `get` method instead of a function, but unlike regular computed
properties, async computed properties are always getter-only. If the
object provided has a `set` method it will be ignored.
@@ -160,20 +179,23 @@ Async computed properties can also have a custom default value, which will
be used until the data is loaded for the first time:
```js
-new Vue({
- data: {
- postId: 1
+export default {
+ data () {
+ return {
+ postId: 1
+ }
},
asyncComputed: {
blogPostContent: {
// The `get` function is the same as the function you would
// pass directly as the value to `blogPostContent` if you
// didn't need to specify a default value.
- get () {
- return Vue.http.get('/post/' + this.postId)
- .then(response => response.data.postContent)
- },
- // The computed proporty `blogPostContent` will have
+ async get () {
+ const post = await fetch(`/post/${this.postId}`)
+ .then(response => response.json())
+ return post.postContent
+ },
+ // The computed property `blogPostContent` will have
// the value 'Loading...' until the first time the promise
// returned from the `get` function resolves.
default: 'Loading...'
@@ -192,28 +214,31 @@ You can instead define the default value as a function, in order to depend on
props or on data:
```js
-new Vue({
- data: {
- postId: 1
+export default {
+ data () {
+ return {
+ postId: 1
+ }
},
asyncComputed: {
blogPostContent: {
- get () {
- return Vue.http.get('/post/' + this.postId)
- .then(response => response.data.postContent)
+ async get () {
+ const post = await fetch(`/post/${this.postId}`)
+ .then(response => response.json())
+ return post.postContent
},
default () {
- return 'Loading post ' + this.postId
+ return `Loading post ${this.postId}...`
}
}
}
}
```
-You can also set a custom global default value in the options passed to `Vue.use`:
+You can also set a custom global default value in the options passed to `app.use`:
```javascript
-Vue.use(AsyncComputed, {
+app.use(AsyncComputed, {
default: 'Global default value'
})
```
@@ -227,47 +252,50 @@ without any of its (local) dependencies changing, such as for instance the data
You can set up a `watch` property, listing the additional dependencies to watch.
Your async computed property will then be recalculated also if any of the watched
dependencies change, in addition to the real dependencies the property itself has:
-```js
-new Vue({
- data: {
- postId: 1,
- timesPostHasBeenUpdated: 0
+```js
+export default {
+ data () {
+ return {
+ postId: 1,
+ timesPostHasBeenUpdated: 0
+ }
},
asyncComputed: {
// blogPostContent will update its contents if postId is changed
// to point to a diffrent post, but will also refetch the post's
// contents when you increment timesPostHasBeenUpdated.
blogPostContent: {
- get () {
- return Vue.http.get('/post/' + this.postId)
- .then(response => response.data.postContent)
+ async get () {
+ const post = await fetch(`/post/${this.postId}`)
+ .then(response => response.json())
+ return post.postContent
},
watch: ['timesPostHasBeenUpdated']
}
}
}
```
-Just like with Vue's normal `watch`, you can use a dotted path in order to watch a nested property. For example, `watch: ['a.b.c', 'd.e']` would declare a dependancy on `this.a.b.c` and on `this.d.e`.
-You can trigger re-computation of an async computed property manually, e.g. to re-try if an error occured during evaluation. This should be avoided if you are able to achieve the same result using a watched property.
+Just like with Vue's normal `watch`, you can use a dotted path in order to watch a nested property. For example, `watch: ['a.b.c', 'd.e']` would declare a dependency on `this.a.b.c` and on `this.d.e`.
-````js
+You can trigger re-computation of an async computed property manually, e.g. to re-try if an error occurred during evaluation. This should be avoided if you are able to achieve the same result using a watched property.
-new Vue({
+````js
+export default {
asyncComputed: {
blogPosts: {
- get () {
- return Vue.http.get('/posts')
- .then(response => response.data)
- },
+ async get () {
+ return fetch('/posts')
+ .then(response => response.json())
+ }
}
},
methods: {
refresh() {
// Triggers an immediate update of blogPosts
// Will work even if an update is in progress.
- this.$asyncComputed.blogPosts.update();
+ this.$asyncComputed.blogPosts.update()
}
}
}
@@ -280,17 +308,20 @@ If you need more control over when the computation should be rerun you can use `
```js
-new Vue({
- data: {
- postId: 1,
- // Imagine pageType can be one of 'index', 'details' and 'edit'.
- pageType: 'index'
+export default {
+ data () {
+ return {
+ postId: 1,
+ // Imagine pageType can be one of 'index', 'details' and 'edit'.
+ pageType: 'index'
+ }
},
asyncComputed: {
blogPostContent: {
- get () {
- return Vue.http.get('/post/' + this.postId)
- .then(response => response.data.postContent)
+ async get () {
+ const post = await fetch(`/post/${this.postId}`)
+ .then(response => response.json())
+ return post.postContent
},
// Will update whenever the pageType or postId changes,
// but only if the pageType is not 'index'. This way the
@@ -314,16 +345,19 @@ property will only be computed the first time it's accessed.
For example:
```js
-new Vue({
- data: {
- id: 1
+export default {
+ data () {
+ return {
+ id: 1
+ }
},
asyncComputed: {
mightNotBeNeeded: {
lazy: true,
- get () {
- return Vue.http.get('/might-not-be-needed/' + this.id)
- .then(response => response.data.value)
+ async get () {
+ return fetch(`/might-not-be-needed/${this.id}`)
+ .then(response => response.json())
+ .then(response => response.value)
}
// The value of `mightNotBeNeeded` will only be
// calculated when it is first accessed.
@@ -342,7 +376,7 @@ For each async computed property, an object is added to `$asyncComputed` that co
state: 'updating',
// A boolean that is true while the property is updating.
updating: true,
- // The property finished updating wihtout errors (the promise was resolved) and the current value is available.
+ // The property finished updating without errors (the promise was resolved) and the current value is available.
success: false,
// The promise was rejected.
error: false,
@@ -351,29 +385,40 @@ For each async computed property, an object is added to `$asyncComputed` that co
}
```
-It is meant to be used in your rendering code to display update / error information.
+It is meant to be used in your rendering code to display update / error information:
````js
-new Vue({
+
+
+
+ Loading...
+
+
+
+ Error while loading posts: {{ $asyncComputed.posts.exception }}
+
+
+
+
+
+ {{ posts }}
+
+
+````
-// If you only want to display the message the first time the posts load, you can use the fact that the default value is null:
-//
Loading posts
+Note: If you want to display a special message the first time the posts load, you can use the fact that the default value is null:
-// You can display an error message if loading the posts failed.
-// The vue-resources library passes the error response on to the rejection handler.
-// It is therefore available in $asyncComputed.posts.exception
-//
Error while loading posts: $asyncComputed.posts.exception.statusText
-````
+```html
+
Loading posts
+```
## Global error handling
@@ -389,7 +434,7 @@ threw the error and the error's stack trace.
For example:
```js
-Vue.use(AsyncComputed, {
+app.use(AsyncComputed, {
errorHandler (stack) {
console.log('Hey, an error!')
console.log('---')
@@ -398,7 +443,7 @@ Vue.use(AsyncComputed, {
})
// Or with `useRawError`:
-Vue.use(AsyncComputed, {
+app.use(AsyncComputed, {
useRawError: true,
errorHandler (err, vm, stack) {
console.log('An error occurred!')
From 7b2214a53d51a1b79876e878f06c0708c37515c2 Mon Sep 17 00:00:00 2001
From: Drini Cami
Date: Sat, 18 Nov 2023 20:56:02 -0500
Subject: [PATCH 146/150] Small fix to README
---
README.md | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/README.md b/README.md
index 48510d7..05d6361 100644
--- a/README.md
+++ b/README.md
@@ -102,13 +102,14 @@ app.mount('#app')
Alternately, you can link it directly from a CDN:
```html
+
+
+
+
= {{sum == null ? 'Loading' : sum}}
-
-
-
+
+
diff --git a/package-lock.json b/package-lock.json
index ec15cde..a951b84 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "vue-async-computed",
- "version": "4.0.0",
+ "version": "4.0.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "vue-async-computed",
- "version": "4.0.0",
+ "version": "4.0.1",
"license": "MIT",
"devDependencies": {
"babel-cli": "^6.26.0",
diff --git a/package.json b/package.json
index 1351fc9..922ce57 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "vue-async-computed",
- "version": "4.0.0",
+ "version": "4.0.1",
"description": "Async computed properties for Vue",
"main": "dist/vue-async-computed.js",
"module": "dist/vue-async-computed.esm.js",
From 6e871eca83cbe7cab96a7f2799e7d270696b57af Mon Sep 17 00:00:00 2001
From: Drini Cami
Date: Sat, 18 Nov 2023 21:40:12 -0500
Subject: [PATCH 150/150] Fix example in README not working
---
README.md | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index bb2bbf7..a49fb61 100644
--- a/README.md
+++ b/README.md
@@ -120,8 +120,9 @@ Alternately, you can link it directly from a CDN:
},
asyncComputed: {
async sum () {
+ const total = this.x + this.y
await new Promise(resolve => setTimeout(resolve, 1000))
- return this.x + this.y
+ return total
}
}
})
@@ -164,8 +165,9 @@ export default {
the sum of the values to which you set vm.x and vm.y the previous second.
*/
async sum () {
+ const total = this.x + this.y
await new Promise(resolve => setTimeout(resolve, 1000))
- return this.x + this.y
+ return total
}
}
}