From d75f8db97688a3dc675accdedd7d9ea972836b43 Mon Sep 17 00:00:00 2001 From: Elad Frizi Date: Tue, 12 Feb 2019 01:40:57 +0200 Subject: [PATCH 1/4] added support for watch as array and moved all the watch logic to speate module --- package-lock.json | 28 +++++++++++++++++++++------- src/index.js | 8 +++----- src/watch.js | 41 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 65 insertions(+), 12 deletions(-) create mode 100644 src/watch.js diff --git a/package-lock.json b/package-lock.json index d631ca0..2d29af4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3560,12 +3560,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3580,17 +3582,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3707,7 +3712,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3719,6 +3725,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3733,6 +3740,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3740,12 +3748,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -3764,6 +3774,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3844,7 +3855,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3856,6 +3868,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3977,6 +3990,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/src/index.js b/src/index.js index 1d5a9dd..da34010 100644 --- a/src/index.js +++ b/src/index.js @@ -6,6 +6,8 @@ import { silentGetLazy, silentSetLazy, } from './lazy' +import { getWatchedGetter } from './watch' + const prefix = '_async_computed$' const DidNotUpdate = typeof Symbol === 'function' ? Symbol('did-not-update') : {} @@ -137,11 +139,7 @@ function getterFn (key, fn) { let getter = fn.get if (fn.hasOwnProperty('watch')) { - const previousGetter = getter - getter = function getter () { - fn.watch.call(this) - return previousGetter.call(this) - } + getter = getWatchedGetter(fn) } if (fn.hasOwnProperty('shouldUpdate')) { diff --git a/src/watch.js b/src/watch.js new file mode 100644 index 0000000..3ad5ea8 --- /dev/null +++ b/src/watch.js @@ -0,0 +1,41 @@ +const getGetterWatchedByArray = computedAsyncProperty => + function getter() { + for (let key of computedAsyncProperty.watch) { + // check if nested key is watched + const splittedByDot = key.split('.'); + if (splittedByDot.length === 1) { + // if not just access it + this[key] + } else { + // access nested propety + try { + var start = this + for (let part of splittedByDot) { + start = start[part] + } + } catch (eror) { + console.error('computedAsyncPlugin: bad path: ', splittedByDot) + throw error + } + } + } + return computedAsyncProperty.get.call(this) + } + +const getGetterWatchedByFunction = computedAsyncProperty => + function getter() { + computedAsyncProperty.watch.call(this) + return computedAsyncProperty.get.call(this) + } + + +export function getWatchedGetter(computedAsyncProperty) { + if (typeof computedAsyncProperty.watch === 'function') { + return getGetterWatchedByFunction(computedAsyncProperty) + } + + if (Array.isArray(computedAsyncProperty.watch)) { + return getGetterWatchedByArray(computedAsyncProperty) + } + +} From 225d08cd3d7295b2b01630408ffc5c7dc9197f43 Mon Sep 17 00:00:00 2001 From: Elad Frizi Date: Tue, 12 Feb 2019 01:40:57 +0200 Subject: [PATCH 2/4] added support for watch as array and moved all the watch logic to speate module --- package-lock.json | 28 +++++++++++++++++++++------- src/index.js | 8 +++----- src/watch.js | 41 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 65 insertions(+), 12 deletions(-) create mode 100644 src/watch.js diff --git a/package-lock.json b/package-lock.json index d631ca0..2d29af4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3560,12 +3560,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3580,17 +3582,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3707,7 +3712,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3719,6 +3725,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3733,6 +3740,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3740,12 +3748,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -3764,6 +3774,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3844,7 +3855,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3856,6 +3868,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3977,6 +3990,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/src/index.js b/src/index.js index 1d5a9dd..da34010 100644 --- a/src/index.js +++ b/src/index.js @@ -6,6 +6,8 @@ import { silentGetLazy, silentSetLazy, } from './lazy' +import { getWatchedGetter } from './watch' + const prefix = '_async_computed$' const DidNotUpdate = typeof Symbol === 'function' ? Symbol('did-not-update') : {} @@ -137,11 +139,7 @@ function getterFn (key, fn) { let getter = fn.get if (fn.hasOwnProperty('watch')) { - const previousGetter = getter - getter = function getter () { - fn.watch.call(this) - return previousGetter.call(this) - } + getter = getWatchedGetter(fn) } if (fn.hasOwnProperty('shouldUpdate')) { diff --git a/src/watch.js b/src/watch.js new file mode 100644 index 0000000..c1d5b7d --- /dev/null +++ b/src/watch.js @@ -0,0 +1,41 @@ +const getGetterWatchedByArray = computedAsyncProperty => + function getter() { + for (let key of computedAsyncProperty.watch) { + // check if nested key is watched + const splittedByDot = key.split('.'); + if (splittedByDot.length === 1) { + // if not just access it + this[key] + } else { + // access nested propety + try { + var start = this + for (let part of splittedByDot) { + start = start[part] + } + } catch (error) { + console.error('computedAsyncPlugin: bad path: ', key) + throw error + } + } + } + return computedAsyncProperty.get.call(this) + } + +const getGetterWatchedByFunction = computedAsyncProperty => + function getter() { + computedAsyncProperty.watch.call(this) + return computedAsyncProperty.get.call(this) + } + + +export function getWatchedGetter(computedAsyncProperty) { + if (typeof computedAsyncProperty.watch === 'function') { + return getGetterWatchedByFunction(computedAsyncProperty) + } + + if (Array.isArray(computedAsyncProperty.watch)) { + return getGetterWatchedByArray(computedAsyncProperty) + } + +} From 9c465dd5d62d64af84012e8c66ed3613af68c590 Mon Sep 17 00:00:00 2001 From: Elad Frizi Date: Thu, 14 Feb 2019 21:54:45 +0200 Subject: [PATCH 3/4] added unit testing to the watch options, as array and as function --- test/index.js | 125 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) diff --git a/test/index.js b/test/index.js index 70a583f..5d3d232 100644 --- a/test/index.js +++ b/test/index.js @@ -885,3 +885,128 @@ test('Data of component still work as function and got vm', t => { }) t.equal(vm, _vmContext) }) + + +test("Watch as a function", t => { + t.plan(4) + let i = 0 + const vm = new Vue({ + data: { + y: 2, + obj: { + t: 0 + } + }, + asyncComputed: { + z: { + get () { + return Promise.resolve(i + this.y) + }, + watch(){ + this.obj.t + } + } + } + }) + t.equal(vm.z, null) + Vue.nextTick(() => { + t.equal(vm.z, 2) + i++ + vm.obj.t-- + Vue.nextTick(() => { + // This tick, Vue registers the change + // in the watcher, and reevaluates + // the getter function + t.equal(vm.z, 2) + Vue.nextTick(() => { + // Now in this tick the promise has + // resolved, and z is 3. + t.equal(vm.z, 3) + }) + }) + }) +}) + + +test("Watchers as array with nested path rerun the computation when a value changes", t => { + t.plan(4) + let i = 0 + const vm = new Vue({ + data: { + y: 2, + obj: { + t: 0 + } + }, + asyncComputed: { + z: { + get () { + return Promise.resolve(i + this.y) + }, + watch: ['obj.t'] + } + } + }) + t.equal(vm.z, null) + Vue.nextTick(() => { + t.equal(vm.z, 2) + i++ + vm.obj.t-- + Vue.nextTick(() => { + // This tick, Vue registers the change + // in the watcher, and reevaluates + // the getter function + t.equal(vm.z, 2) + Vue.nextTick(() => { + // Now in this tick the promise has + // resolved, and z is 3. + t.equal(vm.z, 3) + }) + }) + }) +}) + +test("Watch as array with more then one value", t => { + t.plan(4) + let i = 0 + const vm = new Vue({ + data: { + y: 2, + obj: { + t: 0 + }, + r:0 + }, + asyncComputed: { + z: { + get () { + return Promise.resolve(i + this.y) + }, + watch: ['obj.t', 'r'] + } + } + }) + t.equal(vm.z, null) + Vue.nextTick(() => { + t.equal(vm.z, 2) + i++ + vm.obj.t-- + Vue.nextTick(() => { + // This tick, Vue registers the change + // in the watcher, and reevaluates + // the getter function + t.equal(vm.z, 2) + Vue.nextTick(() => { + // Now in this tick the promise has + // resolved, and z is 3. + t.equal(vm.z, 3) + + i++ + vm.r-- + Vue.nextTick(()=>{ + t.equal(vm.z,4) + }) + }) + }) + }) +}) From adbc110f75d46605976e0c023bc8bad434a8f524 Mon Sep 17 00:00:00 2001 From: Elad Frizi Date: Thu, 14 Feb 2019 22:06:32 +0200 Subject: [PATCH 4/4] added error when input of watch is not valid --- src/watch.js | 8 ++++---- test/index.js | 8 ++++++-- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/watch.js b/src/watch.js index c1d5b7d..d24b508 100644 --- a/src/watch.js +++ b/src/watch.js @@ -1,6 +1,7 @@ const getGetterWatchedByArray = computedAsyncProperty => function getter() { for (let key of computedAsyncProperty.watch) { + if (typeof key !== 'string') throw new Error('AsyncComputed: watch elemnts must be strings') // check if nested key is watched const splittedByDot = key.split('.'); if (splittedByDot.length === 1) { @@ -32,10 +33,9 @@ const getGetterWatchedByFunction = computedAsyncProperty => export function getWatchedGetter(computedAsyncProperty) { if (typeof computedAsyncProperty.watch === 'function') { return getGetterWatchedByFunction(computedAsyncProperty) - } - - if (Array.isArray(computedAsyncProperty.watch)) { + } else if (Array.isArray(computedAsyncProperty.watch)) { return getGetterWatchedByArray(computedAsyncProperty) + } else { + throw Error('AsyncComouted: watch should be function or an array') } - } diff --git a/test/index.js b/test/index.js index 5d3d232..f77d03f 100644 --- a/test/index.js +++ b/test/index.js @@ -967,7 +967,7 @@ test("Watchers as array with nested path rerun the computation when a value chan }) test("Watch as array with more then one value", t => { - t.plan(4) + t.plan(5) let i = 0 const vm = new Vue({ data: { @@ -990,6 +990,7 @@ test("Watch as array with more then one value", t => { Vue.nextTick(() => { t.equal(vm.z, 2) i++ + // checking for nested property vm.obj.t-- Vue.nextTick(() => { // This tick, Vue registers the change @@ -1002,9 +1003,12 @@ test("Watch as array with more then one value", t => { t.equal(vm.z, 3) i++ + // one level and multiple watchers vm.r-- Vue.nextTick(()=>{ - t.equal(vm.z,4) + Vue.nextTick(() => { + t.equal(vm.z,4) + }) }) }) })