vue-async-computed
Advanced tools
Comparing version 3.6.1 to 3.7.0
@@ -5,2 +5,3 @@ <!-- START doctoc generated TOC please keep comment here to allow auto update --> | ||
- [v3.7.0](#v370) | ||
- [v3.6.1](#v361) | ||
@@ -30,2 +31,6 @@ - [v3.6.0](#v360) | ||
### v3.7.0 | ||
* [#68](https://github.com/foxbenjaminfox/vue-async-computed/pull/68) Refactoring to make some of the code be more readable. | ||
* [#71](https://github.com/foxbenjaminfox/vue-async-computed/pull/71) Add `vm` and `info` arguments to the error handler callback (when `useRawError` is set.) | ||
### v3.6.1 | ||
@@ -32,0 +37,0 @@ * Fix for browsers that don't support `Symbol.iterator`. |
@@ -82,5 +82,16 @@ function isComputedLazy (item) { | ||
const prefix = '_async_computed$'; | ||
const DidNotUpdate = typeof Symbol === 'function' ? Symbol('did-not-update') : {}; | ||
const getGetterWithShouldUpdate = (asyncProprety, currentGetter) => { | ||
return function getter () { | ||
return (asyncProprety.shouldUpdate.call(this)) | ||
? currentGetter.call(this) | ||
: DidNotUpdate | ||
} | ||
}; | ||
const shouldNotUpdate = (value) => DidNotUpdate === value; | ||
const prefix = '_async_computed$'; | ||
const AsyncComputed = { | ||
@@ -100,34 +111,18 @@ install (Vue, pluginOptions) { | ||
}, | ||
computed: { | ||
$asyncComputed () { | ||
return this.$data._asyncComputed | ||
} | ||
}, | ||
beforeCreate () { | ||
const optionData = this.$options.data; | ||
const asyncComputed = this.$options.asyncComputed || {}; | ||
if (!this.$options.computed) this.$options.computed = {}; | ||
this.$options.computed.$asyncComputed = () => this.$data._asyncComputed; | ||
if (!Object.keys(asyncComputed).length) return | ||
for (const key in asyncComputed) { | ||
const getter = getterFn(key, this.$options.asyncComputed[key]); | ||
const getter = getterFn(key, asyncComputed[key]); | ||
this.$options.computed[prefix + key] = getter; | ||
} | ||
this.$options.data = function vueAsyncComputedInjectedDataFn (vm) { | ||
const data = ( | ||
(typeof optionData === 'function') | ||
? optionData.call(this, vm) | ||
: optionData | ||
) || {}; | ||
for (const key in asyncComputed) { | ||
const item = this.$options.asyncComputed[key]; | ||
if (isComputedLazy(item)) { | ||
initLazy(data, key); | ||
this.$options.computed[key] = makeLazyComputed(key); | ||
} else { | ||
data[key] = null; | ||
} | ||
} | ||
return data | ||
}; | ||
this.$options.data = initDataWithAsyncComputed(this.$options); | ||
}, | ||
@@ -146,50 +141,72 @@ created () { | ||
for (const key in this.$options.asyncComputed || {}) { | ||
let promiseId = 0; | ||
const watcher = newPromise => { | ||
const thisPromise = ++promiseId; | ||
handleAsyncComputedPropetyChanges(this, key, pluginOptions, Vue); | ||
} | ||
} | ||
}); | ||
} | ||
}; | ||
function handleAsyncComputedPropetyChanges (vm, key, pluginOptions, Vue) { | ||
let promiseId = 0; | ||
const watcher = newPromise => { | ||
const thisPromise = ++promiseId; | ||
if (newPromise === DidNotUpdate) { | ||
return | ||
} | ||
if (shouldNotUpdate(newPromise)) return | ||
if (!newPromise || !newPromise.then) { | ||
newPromise = Promise.resolve(newPromise); | ||
} | ||
setAsyncState(this, key, 'updating'); | ||
if (!newPromise || !newPromise.then) { | ||
newPromise = Promise.resolve(newPromise); | ||
} | ||
setAsyncState(vm, key, 'updating'); | ||
newPromise.then(value => { | ||
if (thisPromise !== promiseId) return | ||
setAsyncState(this, key, 'success'); | ||
this[key] = value; | ||
}).catch(err => { | ||
if (thisPromise !== promiseId) return | ||
newPromise.then(value => { | ||
if (thisPromise !== promiseId) return | ||
setAsyncState(vm, key, 'success'); | ||
vm[key] = value; | ||
}).catch(err => { | ||
if (thisPromise !== promiseId) return | ||
setAsyncState(this, key, 'error'); | ||
Vue.set(this.$data._asyncComputed[key], 'exception', err); | ||
if (pluginOptions.errorHandler === false) return | ||
setAsyncState(vm, key, 'error'); | ||
Vue.set(vm.$data._asyncComputed[key], 'exception', err); | ||
if (pluginOptions.errorHandler === false) return | ||
const handler = (pluginOptions.errorHandler === undefined) | ||
? console.error.bind(console, 'Error evaluating async computed property:') | ||
: pluginOptions.errorHandler; | ||
const handler = (pluginOptions.errorHandler === undefined) | ||
? console.error.bind(console, 'Error evaluating async computed property:') | ||
: pluginOptions.errorHandler; | ||
if (pluginOptions.useRawError) { | ||
handler(err); | ||
} else { | ||
handler(err.stack); | ||
} | ||
}); | ||
}; | ||
Vue.set(this.$data._asyncComputed, key, { | ||
exception: null, | ||
update: () => { | ||
watcher(getterOnly(this.$options.asyncComputed[key]).apply(this)); | ||
} | ||
}); | ||
setAsyncState(this, key, 'updating'); | ||
this.$watch(prefix + key, watcher, { immediate: true }); | ||
} | ||
if (pluginOptions.useRawError) { | ||
handler(err, vm, err.stack); | ||
} else { | ||
handler(err.stack); | ||
} | ||
}); | ||
}; | ||
Vue.set(vm.$data._asyncComputed, key, { | ||
exception: null, | ||
update: () => { | ||
watcher(getterOnly(vm.$options.asyncComputed[key]).apply(vm)); | ||
} | ||
}); | ||
setAsyncState(vm, key, 'updating'); | ||
vm.$watch(prefix + key, watcher, { immediate: true }); | ||
} | ||
function initDataWithAsyncComputed (options) { | ||
const optionData = options.data; | ||
const asyncComputed = options.asyncComputed || {}; | ||
return function vueAsyncComputedInjectedDataFn (vm) { | ||
const data = ((typeof optionData === 'function') | ||
? optionData.call(this, vm) | ||
: optionData) || {}; | ||
for (const key in asyncComputed) { | ||
const item = this.$options.asyncComputed[key]; | ||
if (isComputedLazy(item)) { | ||
initLazy(data, key); | ||
this.$options.computed[key] = makeLazyComputed(key); | ||
} else { | ||
data[key] = null; | ||
} | ||
} | ||
return data | ||
} | ||
}; | ||
} | ||
@@ -219,9 +236,3 @@ function setAsyncState (vm, stateObject, state) { | ||
if (fn.hasOwnProperty('shouldUpdate')) { | ||
const previousGetter = getter; | ||
getter = function getter () { | ||
if (fn.shouldUpdate.call(this)) { | ||
return previousGetter.call(this) | ||
} | ||
return DidNotUpdate | ||
}; | ||
getter = getGetterWithShouldUpdate(fn, getter); | ||
} | ||
@@ -228,0 +239,0 @@ |
@@ -86,5 +86,16 @@ function isComputedLazy(item) { | ||
var prefix = '_async_computed$'; | ||
var DidNotUpdate = typeof Symbol === 'function' ? Symbol('did-not-update') : {}; | ||
var getGetterWithShouldUpdate = function getGetterWithShouldUpdate(asyncProprety, currentGetter) { | ||
return function getter() { | ||
return asyncProprety.shouldUpdate.call(this) ? currentGetter.call(this) : DidNotUpdate; | ||
}; | ||
}; | ||
var shouldNotUpdate = function shouldNotUpdate(value) { | ||
return DidNotUpdate === value; | ||
}; | ||
var prefix = '_async_computed$'; | ||
var AsyncComputed = { | ||
@@ -102,38 +113,21 @@ install: function install(Vue, pluginOptions) { | ||
}, | ||
computed: { | ||
$asyncComputed: function $asyncComputed() { | ||
return this.$data._asyncComputed; | ||
} | ||
}, | ||
beforeCreate: function beforeCreate() { | ||
var _this2 = this; | ||
var optionData = this.$options.data; | ||
var asyncComputed = this.$options.asyncComputed || {}; | ||
if (!this.$options.computed) this.$options.computed = {}; | ||
this.$options.computed.$asyncComputed = function () { | ||
return _this2.$data._asyncComputed; | ||
}; | ||
if (!Object.keys(asyncComputed).length) return; | ||
for (var key in asyncComputed) { | ||
var getter = getterFn(key, this.$options.asyncComputed[key]); | ||
var getter = getterFn(key, asyncComputed[key]); | ||
this.$options.computed[prefix + key] = getter; | ||
} | ||
this.$options.data = function vueAsyncComputedInjectedDataFn(vm) { | ||
var data = (typeof optionData === 'function' ? optionData.call(this, vm) : optionData) || {}; | ||
for (var _key in asyncComputed) { | ||
var item = this.$options.asyncComputed[_key]; | ||
if (isComputedLazy(item)) { | ||
initLazy(data, _key); | ||
this.$options.computed[_key] = makeLazyComputed(_key); | ||
} else { | ||
data[_key] = null; | ||
} | ||
} | ||
return data; | ||
}; | ||
this.$options.data = initDataWithAsyncComputed(this.$options); | ||
}, | ||
created: function created() { | ||
var _this3 = this; | ||
for (var key in this.$options.asyncComputed || {}) { | ||
@@ -149,54 +143,70 @@ var item = this.$options.asyncComputed[key], | ||
var _loop = function _loop(_key2) { | ||
var promiseId = 0; | ||
var watcher = function watcher(newPromise) { | ||
var thisPromise = ++promiseId; | ||
for (var _key in this.$options.asyncComputed || {}) { | ||
handleAsyncComputedPropetyChanges(this, _key, pluginOptions, Vue); | ||
} | ||
} | ||
}); | ||
} | ||
}; | ||
function handleAsyncComputedPropetyChanges(vm, key, pluginOptions, Vue) { | ||
var promiseId = 0; | ||
var watcher = function watcher(newPromise) { | ||
var thisPromise = ++promiseId; | ||
if (newPromise === DidNotUpdate) { | ||
return; | ||
} | ||
if (shouldNotUpdate(newPromise)) return; | ||
if (!newPromise || !newPromise.then) { | ||
newPromise = Promise.resolve(newPromise); | ||
} | ||
setAsyncState(_this3, _key2, 'updating'); | ||
if (!newPromise || !newPromise.then) { | ||
newPromise = Promise.resolve(newPromise); | ||
} | ||
setAsyncState(vm, key, 'updating'); | ||
newPromise.then(function (value) { | ||
if (thisPromise !== promiseId) return; | ||
setAsyncState(_this3, _key2, 'success'); | ||
_this3[_key2] = value; | ||
}).catch(function (err) { | ||
if (thisPromise !== promiseId) return; | ||
newPromise.then(function (value) { | ||
if (thisPromise !== promiseId) return; | ||
setAsyncState(vm, key, 'success'); | ||
vm[key] = value; | ||
}).catch(function (err) { | ||
if (thisPromise !== promiseId) return; | ||
setAsyncState(_this3, _key2, 'error'); | ||
Vue.set(_this3.$data._asyncComputed[_key2], 'exception', err); | ||
if (pluginOptions.errorHandler === false) return; | ||
setAsyncState(vm, key, 'error'); | ||
Vue.set(vm.$data._asyncComputed[key], 'exception', err); | ||
if (pluginOptions.errorHandler === false) return; | ||
var handler = pluginOptions.errorHandler === undefined ? console.error.bind(console, 'Error evaluating async computed property:') : pluginOptions.errorHandler; | ||
var handler = pluginOptions.errorHandler === undefined ? console.error.bind(console, 'Error evaluating async computed property:') : pluginOptions.errorHandler; | ||
if (pluginOptions.useRawError) { | ||
handler(err); | ||
} else { | ||
handler(err.stack); | ||
} | ||
}); | ||
}; | ||
Vue.set(_this3.$data._asyncComputed, _key2, { | ||
exception: null, | ||
update: function update() { | ||
watcher(getterOnly(_this3.$options.asyncComputed[_key2]).apply(_this3)); | ||
} | ||
}); | ||
setAsyncState(_this3, _key2, 'updating'); | ||
_this3.$watch(prefix + _key2, watcher, { immediate: true }); | ||
}; | ||
for (var _key2 in this.$options.asyncComputed || {}) { | ||
_loop(_key2); | ||
} | ||
if (pluginOptions.useRawError) { | ||
handler(err, vm, err.stack); | ||
} else { | ||
handler(err.stack); | ||
} | ||
}); | ||
} | ||
}; | ||
}; | ||
Vue.set(vm.$data._asyncComputed, key, { | ||
exception: null, | ||
update: function update() { | ||
watcher(getterOnly(vm.$options.asyncComputed[key]).apply(vm)); | ||
} | ||
}); | ||
setAsyncState(vm, key, 'updating'); | ||
vm.$watch(prefix + key, watcher, { immediate: true }); | ||
} | ||
function initDataWithAsyncComputed(options) { | ||
var optionData = options.data; | ||
var asyncComputed = options.asyncComputed || {}; | ||
return function vueAsyncComputedInjectedDataFn(vm) { | ||
var data = (typeof optionData === 'function' ? optionData.call(this, vm) : optionData) || {}; | ||
for (var key in asyncComputed) { | ||
var item = this.$options.asyncComputed[key]; | ||
if (isComputedLazy(item)) { | ||
initLazy(data, key); | ||
this.$options.computed[key] = makeLazyComputed(key); | ||
} else { | ||
data[key] = null; | ||
} | ||
} | ||
return data; | ||
}; | ||
} | ||
function setAsyncState(vm, stateObject, state) { | ||
@@ -225,9 +235,3 @@ vm.$set(vm.$data._asyncComputed[stateObject], 'state', state); | ||
if (fn.hasOwnProperty('shouldUpdate')) { | ||
var previousGetter = getter; | ||
getter = function getter() { | ||
if (fn.shouldUpdate.call(this)) { | ||
return previousGetter.call(this); | ||
} | ||
return DidNotUpdate; | ||
}; | ||
getter = getGetterWithShouldUpdate(fn, getter); | ||
} | ||
@@ -234,0 +238,0 @@ |
@@ -88,5 +88,16 @@ (function (global, factory) { | ||
const prefix = '_async_computed$'; | ||
const DidNotUpdate = typeof Symbol === 'function' ? Symbol('did-not-update') : {}; | ||
const getGetterWithShouldUpdate = (asyncProprety, currentGetter) => { | ||
return function getter () { | ||
return (asyncProprety.shouldUpdate.call(this)) | ||
? currentGetter.call(this) | ||
: DidNotUpdate | ||
} | ||
}; | ||
const shouldNotUpdate = (value) => DidNotUpdate === value; | ||
const prefix = '_async_computed$'; | ||
const AsyncComputed = { | ||
@@ -106,34 +117,18 @@ install (Vue, pluginOptions) { | ||
}, | ||
computed: { | ||
$asyncComputed () { | ||
return this.$data._asyncComputed | ||
} | ||
}, | ||
beforeCreate () { | ||
const optionData = this.$options.data; | ||
const asyncComputed = this.$options.asyncComputed || {}; | ||
if (!this.$options.computed) this.$options.computed = {}; | ||
this.$options.computed.$asyncComputed = () => this.$data._asyncComputed; | ||
if (!Object.keys(asyncComputed).length) return | ||
for (const key in asyncComputed) { | ||
const getter = getterFn(key, this.$options.asyncComputed[key]); | ||
const getter = getterFn(key, asyncComputed[key]); | ||
this.$options.computed[prefix + key] = getter; | ||
} | ||
this.$options.data = function vueAsyncComputedInjectedDataFn (vm) { | ||
const data = ( | ||
(typeof optionData === 'function') | ||
? optionData.call(this, vm) | ||
: optionData | ||
) || {}; | ||
for (const key in asyncComputed) { | ||
const item = this.$options.asyncComputed[key]; | ||
if (isComputedLazy(item)) { | ||
initLazy(data, key); | ||
this.$options.computed[key] = makeLazyComputed(key); | ||
} else { | ||
data[key] = null; | ||
} | ||
} | ||
return data | ||
}; | ||
this.$options.data = initDataWithAsyncComputed(this.$options); | ||
}, | ||
@@ -152,50 +147,72 @@ created () { | ||
for (const key in this.$options.asyncComputed || {}) { | ||
let promiseId = 0; | ||
const watcher = newPromise => { | ||
const thisPromise = ++promiseId; | ||
handleAsyncComputedPropetyChanges(this, key, pluginOptions, Vue); | ||
} | ||
} | ||
}); | ||
} | ||
}; | ||
function handleAsyncComputedPropetyChanges (vm, key, pluginOptions, Vue) { | ||
let promiseId = 0; | ||
const watcher = newPromise => { | ||
const thisPromise = ++promiseId; | ||
if (newPromise === DidNotUpdate) { | ||
return | ||
} | ||
if (shouldNotUpdate(newPromise)) return | ||
if (!newPromise || !newPromise.then) { | ||
newPromise = Promise.resolve(newPromise); | ||
} | ||
setAsyncState(this, key, 'updating'); | ||
if (!newPromise || !newPromise.then) { | ||
newPromise = Promise.resolve(newPromise); | ||
} | ||
setAsyncState(vm, key, 'updating'); | ||
newPromise.then(value => { | ||
if (thisPromise !== promiseId) return | ||
setAsyncState(this, key, 'success'); | ||
this[key] = value; | ||
}).catch(err => { | ||
if (thisPromise !== promiseId) return | ||
newPromise.then(value => { | ||
if (thisPromise !== promiseId) return | ||
setAsyncState(vm, key, 'success'); | ||
vm[key] = value; | ||
}).catch(err => { | ||
if (thisPromise !== promiseId) return | ||
setAsyncState(this, key, 'error'); | ||
Vue.set(this.$data._asyncComputed[key], 'exception', err); | ||
if (pluginOptions.errorHandler === false) return | ||
setAsyncState(vm, key, 'error'); | ||
Vue.set(vm.$data._asyncComputed[key], 'exception', err); | ||
if (pluginOptions.errorHandler === false) return | ||
const handler = (pluginOptions.errorHandler === undefined) | ||
? console.error.bind(console, 'Error evaluating async computed property:') | ||
: pluginOptions.errorHandler; | ||
const handler = (pluginOptions.errorHandler === undefined) | ||
? console.error.bind(console, 'Error evaluating async computed property:') | ||
: pluginOptions.errorHandler; | ||
if (pluginOptions.useRawError) { | ||
handler(err); | ||
} else { | ||
handler(err.stack); | ||
} | ||
}); | ||
}; | ||
Vue.set(this.$data._asyncComputed, key, { | ||
exception: null, | ||
update: () => { | ||
watcher(getterOnly(this.$options.asyncComputed[key]).apply(this)); | ||
} | ||
}); | ||
setAsyncState(this, key, 'updating'); | ||
this.$watch(prefix + key, watcher, { immediate: true }); | ||
} | ||
if (pluginOptions.useRawError) { | ||
handler(err, vm, err.stack); | ||
} else { | ||
handler(err.stack); | ||
} | ||
}); | ||
}; | ||
Vue.set(vm.$data._asyncComputed, key, { | ||
exception: null, | ||
update: () => { | ||
watcher(getterOnly(vm.$options.asyncComputed[key]).apply(vm)); | ||
} | ||
}); | ||
setAsyncState(vm, key, 'updating'); | ||
vm.$watch(prefix + key, watcher, { immediate: true }); | ||
} | ||
function initDataWithAsyncComputed (options) { | ||
const optionData = options.data; | ||
const asyncComputed = options.asyncComputed || {}; | ||
return function vueAsyncComputedInjectedDataFn (vm) { | ||
const data = ((typeof optionData === 'function') | ||
? optionData.call(this, vm) | ||
: optionData) || {}; | ||
for (const key in asyncComputed) { | ||
const item = this.$options.asyncComputed[key]; | ||
if (isComputedLazy(item)) { | ||
initLazy(data, key); | ||
this.$options.computed[key] = makeLazyComputed(key); | ||
} else { | ||
data[key] = null; | ||
} | ||
} | ||
return data | ||
} | ||
}; | ||
} | ||
@@ -225,9 +242,3 @@ function setAsyncState (vm, stateObject, state) { | ||
if (fn.hasOwnProperty('shouldUpdate')) { | ||
const previousGetter = getter; | ||
getter = function getter () { | ||
if (fn.shouldUpdate.call(this)) { | ||
return previousGetter.call(this) | ||
} | ||
return DidNotUpdate | ||
}; | ||
getter = getGetterWithShouldUpdate(fn, getter); | ||
} | ||
@@ -234,0 +245,0 @@ |
@@ -93,5 +93,16 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; | ||
var prefix = '_async_computed$'; | ||
var DidNotUpdate = typeof Symbol === 'function' ? Symbol('did-not-update') : {}; | ||
var getGetterWithShouldUpdate = function getGetterWithShouldUpdate(asyncProprety, currentGetter) { | ||
return function getter() { | ||
return asyncProprety.shouldUpdate.call(this) ? currentGetter.call(this) : DidNotUpdate; | ||
}; | ||
}; | ||
var shouldNotUpdate = function shouldNotUpdate(value) { | ||
return DidNotUpdate === value; | ||
}; | ||
var prefix = '_async_computed$'; | ||
var AsyncComputed = { | ||
@@ -109,38 +120,21 @@ install: function install(Vue, pluginOptions) { | ||
}, | ||
computed: { | ||
$asyncComputed: function $asyncComputed() { | ||
return this.$data._asyncComputed; | ||
} | ||
}, | ||
beforeCreate: function beforeCreate() { | ||
var _this2 = this; | ||
var optionData = this.$options.data; | ||
var asyncComputed = this.$options.asyncComputed || {}; | ||
if (!this.$options.computed) this.$options.computed = {}; | ||
this.$options.computed.$asyncComputed = function () { | ||
return _this2.$data._asyncComputed; | ||
}; | ||
if (!Object.keys(asyncComputed).length) return; | ||
for (var key in asyncComputed) { | ||
var getter = getterFn(key, this.$options.asyncComputed[key]); | ||
var getter = getterFn(key, asyncComputed[key]); | ||
this.$options.computed[prefix + key] = getter; | ||
} | ||
this.$options.data = function vueAsyncComputedInjectedDataFn(vm) { | ||
var data = (typeof optionData === 'function' ? optionData.call(this, vm) : optionData) || {}; | ||
for (var _key in asyncComputed) { | ||
var item = this.$options.asyncComputed[_key]; | ||
if (isComputedLazy(item)) { | ||
initLazy(data, _key); | ||
this.$options.computed[_key] = makeLazyComputed(_key); | ||
} else { | ||
data[_key] = null; | ||
} | ||
} | ||
return data; | ||
}; | ||
this.$options.data = initDataWithAsyncComputed(this.$options); | ||
}, | ||
created: function created() { | ||
var _this3 = this; | ||
for (var key in this.$options.asyncComputed || {}) { | ||
@@ -156,54 +150,70 @@ var item = this.$options.asyncComputed[key], | ||
var _loop = function _loop(_key2) { | ||
var promiseId = 0; | ||
var watcher = function watcher(newPromise) { | ||
var thisPromise = ++promiseId; | ||
for (var _key in this.$options.asyncComputed || {}) { | ||
handleAsyncComputedPropetyChanges(this, _key, pluginOptions, Vue); | ||
} | ||
} | ||
}); | ||
} | ||
}; | ||
function handleAsyncComputedPropetyChanges(vm, key, pluginOptions, Vue) { | ||
var promiseId = 0; | ||
var watcher = function watcher(newPromise) { | ||
var thisPromise = ++promiseId; | ||
if (newPromise === DidNotUpdate) { | ||
return; | ||
} | ||
if (shouldNotUpdate(newPromise)) return; | ||
if (!newPromise || !newPromise.then) { | ||
newPromise = Promise.resolve(newPromise); | ||
} | ||
setAsyncState(_this3, _key2, 'updating'); | ||
if (!newPromise || !newPromise.then) { | ||
newPromise = Promise.resolve(newPromise); | ||
} | ||
setAsyncState(vm, key, 'updating'); | ||
newPromise.then(function (value) { | ||
if (thisPromise !== promiseId) return; | ||
setAsyncState(_this3, _key2, 'success'); | ||
_this3[_key2] = value; | ||
}).catch(function (err) { | ||
if (thisPromise !== promiseId) return; | ||
newPromise.then(function (value) { | ||
if (thisPromise !== promiseId) return; | ||
setAsyncState(vm, key, 'success'); | ||
vm[key] = value; | ||
}).catch(function (err) { | ||
if (thisPromise !== promiseId) return; | ||
setAsyncState(_this3, _key2, 'error'); | ||
Vue.set(_this3.$data._asyncComputed[_key2], 'exception', err); | ||
if (pluginOptions.errorHandler === false) return; | ||
setAsyncState(vm, key, 'error'); | ||
Vue.set(vm.$data._asyncComputed[key], 'exception', err); | ||
if (pluginOptions.errorHandler === false) return; | ||
var handler = pluginOptions.errorHandler === undefined ? console.error.bind(console, 'Error evaluating async computed property:') : pluginOptions.errorHandler; | ||
var handler = pluginOptions.errorHandler === undefined ? console.error.bind(console, 'Error evaluating async computed property:') : pluginOptions.errorHandler; | ||
if (pluginOptions.useRawError) { | ||
handler(err); | ||
} else { | ||
handler(err.stack); | ||
} | ||
}); | ||
}; | ||
Vue.set(_this3.$data._asyncComputed, _key2, { | ||
exception: null, | ||
update: function update() { | ||
watcher(getterOnly(_this3.$options.asyncComputed[_key2]).apply(_this3)); | ||
} | ||
}); | ||
setAsyncState(_this3, _key2, 'updating'); | ||
_this3.$watch(prefix + _key2, watcher, { immediate: true }); | ||
}; | ||
for (var _key2 in this.$options.asyncComputed || {}) { | ||
_loop(_key2); | ||
} | ||
if (pluginOptions.useRawError) { | ||
handler(err, vm, err.stack); | ||
} else { | ||
handler(err.stack); | ||
} | ||
}); | ||
} | ||
}; | ||
}; | ||
Vue.set(vm.$data._asyncComputed, key, { | ||
exception: null, | ||
update: function update() { | ||
watcher(getterOnly(vm.$options.asyncComputed[key]).apply(vm)); | ||
} | ||
}); | ||
setAsyncState(vm, key, 'updating'); | ||
vm.$watch(prefix + key, watcher, { immediate: true }); | ||
} | ||
function initDataWithAsyncComputed(options) { | ||
var optionData = options.data; | ||
var asyncComputed = options.asyncComputed || {}; | ||
return function vueAsyncComputedInjectedDataFn(vm) { | ||
var data = (typeof optionData === 'function' ? optionData.call(this, vm) : optionData) || {}; | ||
for (var key in asyncComputed) { | ||
var item = this.$options.asyncComputed[key]; | ||
if (isComputedLazy(item)) { | ||
initLazy(data, key); | ||
this.$options.computed[key] = makeLazyComputed(key); | ||
} else { | ||
data[key] = null; | ||
} | ||
} | ||
return data; | ||
}; | ||
} | ||
function setAsyncState(vm, stateObject, state) { | ||
@@ -232,9 +242,3 @@ vm.$set(vm.$data._asyncComputed[stateObject], 'state', state); | ||
if (fn.hasOwnProperty('shouldUpdate')) { | ||
var previousGetter = getter; | ||
getter = function getter() { | ||
if (fn.shouldUpdate.call(this)) { | ||
return previousGetter.call(this); | ||
} | ||
return DidNotUpdate; | ||
}; | ||
getter = getGetterWithShouldUpdate(fn, getter); | ||
} | ||
@@ -241,0 +245,0 @@ |
{ | ||
"name": "vue-async-computed", | ||
"version": "3.6.1", | ||
"version": "3.7.0", | ||
"description": "Async computed properties for Vue", | ||
@@ -62,10 +62,10 @@ "main": "dist/vue-async-computed.js", | ||
"babel-preset-env": "^1.7.0", | ||
"coveralls": "^3.0.2", | ||
"coveralls": "^3.0.3", | ||
"dependency-check": "^3.3.0", | ||
"doctoc": "^1.4.0", | ||
"eslint": "^5.12.0", | ||
"eslint": "^5.16.0", | ||
"eslint-config-standard": "^12.0.0", | ||
"eslint-plugin-import": "^2.14.0", | ||
"eslint-plugin-node": "^8.0.1", | ||
"eslint-plugin-promise": "^4.0.1", | ||
"eslint-plugin-import": "^2.17.3", | ||
"eslint-plugin-node": "^9.1.0", | ||
"eslint-plugin-promise": "^4.1.1", | ||
"eslint-plugin-standard": "^4.0.0", | ||
@@ -75,5 +75,5 @@ "estraverse-fb": "^1.3.2", | ||
"rimraf": "^2.6.3", | ||
"rollup": "^1.0.2", | ||
"rollup": "^1.14.0", | ||
"tap-spec": "^5.0.0", | ||
"tape": "^4.9.2", | ||
"tape": "^4.10.2", | ||
"vue": "^2.5.21", | ||
@@ -80,0 +80,0 @@ "watch": "^1.0.2" |
@@ -20,3 +20,3 @@ <big><h1 align="center">vue-async-computed</h1></big> | ||
<a href="https://npmjs.org/package/vue-async-computed"> | ||
<img src="http://img.shields.io/npm/dm/vue-async-computed.svg?style=flat-square" | ||
<img src="https://img.shields.io/npm/dm/vue-async-computed.svg?style=flat-square" | ||
alt="Downloads"> | ||
@@ -36,4 +36,2 @@ </a> | ||
**This plugin is now Vue 2.0 compatible!** | ||
With this plugin, you can have computed properties in Vue that are computed asynchronously. | ||
@@ -54,3 +52,3 @@ | ||
// that contains something like this: | ||
// { | ||
// { | ||
// "username": "username-goes-here" | ||
@@ -104,7 +102,7 @@ // } | ||
<script src="https://unpkg.com/vue-async-computed"></script> | ||
<!-- | ||
<!-- | ||
That will always point to the latest version of vue-async-computed. | ||
You probably want to instead pin it to a specific version: | ||
--> | ||
<script src="https://unpkg.com/vue-async-computed@3.6.1"></script> | ||
<script src="https://unpkg.com/vue-async-computed@3.7.0"></script> | ||
``` | ||
@@ -140,3 +138,3 @@ | ||
then the property is re-run automatically. | ||
You can almost completely ignore the fact that behind the | ||
@@ -193,3 +191,3 @@ scenes they are asynchronous. The one thing to remember is | ||
}, | ||
// The computed proporty `blogPostContent` will have | ||
// The computed proporty `blogPostContent` will have | ||
// the value 'Loading...' until the first time the promise | ||
@@ -401,6 +399,10 @@ // returned from the `get` function resolves. | ||
If you want to use a custom logging function, the plugin takes an `errorHandler` option, which should be the function you want called with the error information. By default, it will be called with the error's stack trace as an argument, but if you want the raw error itself you can set the | ||
`useRawError` option to `true`. | ||
If you want to use a custom logging function, the plugin takes an `errorHandler` | ||
option, which should be the function you want called with the error information. | ||
By default, it will be called with only the error's stack trace as an argument, | ||
but if you register the `errorHandler` with `useRawError` set to `true` the | ||
function will receive the raw error, a reference to the `Vue` instance that | ||
threw the error and the error's stack trace. | ||
For example: | ||
For example: | ||
@@ -419,7 +421,7 @@ ```js | ||
useRawError: true, | ||
errorHandler (err) { | ||
errorHandler (err, vm, stack) { | ||
console.log('An error occurred!') | ||
console.log('The error message was: ' + err.msg) | ||
console.log('And the stack trace was:') | ||
console.log(err.stack) | ||
console.log(stack) | ||
} | ||
@@ -433,16 +435,2 @@ ) | ||
MIT © [Benjamin Fox](http://github.com/foxbenjaminfox) | ||
[npm-url]: https://npmjs.org/package/vue-async-computed | ||
[npm-image]: https://img.shields.io/npm/v/vue-async-computed.svg?style=flat-square | ||
[travis-url]: https://travis-ci.org/foxbenjaminfox/vue-async-computed | ||
[travis-image]: https://img.shields.io/travis/foxbenjaminfox/vue-async-computed.svg?style=flat-square | ||
[coveralls-url]: https://coveralls.io/r/foxbenjaminfox/vue-async-computed | ||
[coveralls-image]: https://img.shields.io/coveralls/foxbenjaminfox/vue-async-computed.svg?style=flat-square | ||
[depstat-url]: https://david-dm.org/foxbenjaminfox/vue-async-computed | ||
[depstat-image]: https://david-dm.org/foxbenjaminfox/vue-async-computed.svg?style=flat-square | ||
[download-badge]: http://img.shields.io/npm/dm/vue-async-computed.svg?style=flat-square | ||
MIT © [Benjamin Fox](https://github.com/foxbenjaminfox) |
930
52212
428