vue-async-computed - npm Package Compare versions

Comparing version 4.0.0-mixin.0 to 4.0.0

dist/vue-async-computed.esm.esnext.js

 function setAsyncState (vm, stateObject, state) {
-  vm.$set(vm.$data._asyncComputed[stateObject], 'state', state);
-  vm.$set(vm.$data._asyncComputed[stateObject], 'updating', state === 'updating');
-  vm.$set(vm.$data._asyncComputed[stateObject], 'error', state === 'error');
-  vm.$set(vm.$data._asyncComputed[stateObject], 'success', state === 'success');
+  vm.$data._asyncComputed[stateObject].state = state;
+  vm.$data._asyncComputed[stateObject].updating = state === 'updating';
+  vm.$data._asyncComputed[stateObject].error = state === 'error';
+  vm.$data._asyncComputed[stateObject].success = state === 'success';
 }
@@ -113,9 +113,13 @@
 
+/** @type {import('vue').Plugin} */
 const AsyncComputed = {
-  install (Vue, pluginOptions) {
-    Vue.config
-      .optionMergeStrategies
-      .asyncComputed = Vue.config.optionMergeStrategies.computed;
+  install (app, pluginOptions) {
+    // Use same logic as `computed` merging.
+    // See: https://github.com/vuejs/core/blob/32bdc5d1900ceb8df1e8ee33ea65af7b4da61051/packages/runtime-core/src/componentOptions.ts#L1059
+    const mergeStrategy = function (to, from) {
+      return to ? Object.assign(Object.create(null), to, from) : from
+    };
+    app.config.optionMergeStrategies.asyncComputed = mergeStrategy;
 
-    Vue.mixin(getAsyncComputedMixin(pluginOptions));
+    app.mixin(getAsyncComputedMixin(pluginOptions));
   }
@@ -125,2 +129,3 @@ };
 function getAsyncComputedMixin (pluginOptions = {}) {
+  /** @type {import('vue').ComponentOptionsMixin} */
   return {
@@ -130,2 +135,3 @@ data () {
         _asyncComputed: {},
+        _asyncComputedIsMounted: false,
       }
@@ -164,3 +170,10 @@ },
       }
-    }
+    },
+
+    mounted () {
+      this._asyncComputedIsMounted = true;
+    },
+    beforeUnmount () {
+      this._asyncComputedIsMounted = false;
+    },
   }
@@ -190,3 +203,3 @@ }
       setAsyncState(vm, key, 'error');
-      vm.$set(vm.$data._asyncComputed[key], 'exception', err);
+      vm.$data._asyncComputed[key].exception = err;
       if (pluginOptions.errorHandler === false) return
@@ -205,10 +218,10 @@
   };
-  vm.$set(vm.$data._asyncComputed, key, {
+  vm.$data._asyncComputed[key] = {
     exception: null,
     update: () => {
-      if (!vm._isDestroyed) {
+      if (vm._asyncComputedIsMounted) {
         watcher(getterOnly(vm.$options.asyncComputed[key]).apply(vm));
       }
     }
-  });
+  };
   setAsyncState(vm, key, 'updating');
@@ -215,0 +228,0 @@ vm.$watch(prefix + key, watcher, { immediate: true });

dist/vue-async-computed.esm.js

 function setAsyncState(vm, stateObject, state) {
-  vm.$set(vm.$data._asyncComputed[stateObject], 'state', state);
-  vm.$set(vm.$data._asyncComputed[stateObject], 'updating', state === 'updating');
-  vm.$set(vm.$data._asyncComputed[stateObject], 'error', state === 'error');
-  vm.$set(vm.$data._asyncComputed[stateObject], 'success', state === 'success');
+  vm.$data._asyncComputed[stateObject].state = state;
+  vm.$data._asyncComputed[stateObject].updating = state === 'updating';
+  vm.$data._asyncComputed[stateObject].error = state === 'error';
+  vm.$data._asyncComputed[stateObject].success = state === 'success';
 }
@@ -117,7 +117,13 @@
 
+/** @type {import('vue').Plugin} */
 var AsyncComputed = {
-  install: function install(Vue, pluginOptions) {
-    Vue.config.optionMergeStrategies.asyncComputed = Vue.config.optionMergeStrategies.computed;
+  install: function install(app, pluginOptions) {
+    // Use same logic as `computed` merging.
+    // See: https://github.com/vuejs/core/blob/32bdc5d1900ceb8df1e8ee33ea65af7b4da61051/packages/runtime-core/src/componentOptions.ts#L1059
+    var mergeStrategy = function mergeStrategy(to, from) {
+      return to ? Object.assign(Object.create(null), to, from) : from;
+    };
+    app.config.optionMergeStrategies.asyncComputed = mergeStrategy;
 
-    Vue.mixin(getAsyncComputedMixin(pluginOptions));
+    app.mixin(getAsyncComputedMixin(pluginOptions));
   }
@@ -129,6 +135,8 @@ };
 
+  /** @type {import('vue').ComponentOptionsMixin} */
   return {
     data: function data() {
       return {
-        _asyncComputed: {}
+        _asyncComputed: {},
+        _asyncComputedIsMounted: false
       };
@@ -168,2 +176,8 @@ },
       }
+    },
+    mounted: function mounted() {
+      this._asyncComputedIsMounted = true;
+    },
+    beforeUnmount: function beforeUnmount() {
+      this._asyncComputedIsMounted = false;
     }
@@ -194,3 +208,3 @@ };
       setAsyncState(vm, key, 'error');
-      vm.$set(vm.$data._asyncComputed[key], 'exception', err);
+      vm.$data._asyncComputed[key].exception = err;
       if (pluginOptions.errorHandler === false) return;
@@ -207,10 +221,10 @@
   };
-  vm.$set(vm.$data._asyncComputed, key, {
+  vm.$data._asyncComputed[key] = {
     exception: null,
     update: function update() {
-      if (!vm._isDestroyed) {
+      if (vm._asyncComputedIsMounted) {
         watcher(getterOnly(vm.$options.asyncComputed[key]).apply(vm));
       }
     }
-  });
+  };
   setAsyncState(vm, key, 'updating');
@@ -217,0 +231,0 @@ vm.$watch(prefix + key, watcher, { immediate: true });

dist/vue-async-computed.esnext.js

@@ -8,6 +8,6 @@ (function (global, factory) {
   function setAsyncState (vm, stateObject, state) {
-    vm.$set(vm.$data._asyncComputed[stateObject], 'state', state);
-    vm.$set(vm.$data._asyncComputed[stateObject], 'updating', state === 'updating');
-    vm.$set(vm.$data._asyncComputed[stateObject], 'error', state === 'error');
-    vm.$set(vm.$data._asyncComputed[stateObject], 'success', state === 'success');
+    vm.$data._asyncComputed[stateObject].state = state;
+    vm.$data._asyncComputed[stateObject].updating = state === 'updating';
+    vm.$data._asyncComputed[stateObject].error = state === 'error';
+    vm.$data._asyncComputed[stateObject].success = state === 'success';
   }
@@ -120,9 +120,13 @@
 
+  /** @type {import('vue').Plugin} */
   const AsyncComputed = {
-    install (Vue, pluginOptions) {
-      Vue.config
-        .optionMergeStrategies
-        .asyncComputed = Vue.config.optionMergeStrategies.computed;
+    install (app, pluginOptions) {
+      // Use same logic as `computed` merging.
+      // See: https://github.com/vuejs/core/blob/32bdc5d1900ceb8df1e8ee33ea65af7b4da61051/packages/runtime-core/src/componentOptions.ts#L1059
+      const mergeStrategy = function (to, from) {
+        return to ? Object.assign(Object.create(null), to, from) : from
+      };
+      app.config.optionMergeStrategies.asyncComputed = mergeStrategy;
 
-      Vue.mixin(getAsyncComputedMixin(pluginOptions));
+      app.mixin(getAsyncComputedMixin(pluginOptions));
     }
@@ -132,2 +136,3 @@ };
   function getAsyncComputedMixin (pluginOptions = {}) {
+    /** @type {import('vue').ComponentOptionsMixin} */
     return {
@@ -137,2 +142,3 @@ data () {
           _asyncComputed: {},
+          _asyncComputedIsMounted: false,
         }
@@ -171,3 +177,10 @@ },
         }
-      }
+      },
+
+      mounted () {
+        this._asyncComputedIsMounted = true;
+      },
+      beforeUnmount () {
+        this._asyncComputedIsMounted = false;
+      },
     }
@@ -197,3 +210,3 @@ }
         setAsyncState(vm, key, 'error');
-        vm.$set(vm.$data._asyncComputed[key], 'exception', err);
+        vm.$data._asyncComputed[key].exception = err;
         if (pluginOptions.errorHandler === false) return
@@ -212,10 +225,10 @@
     };
-    vm.$set(vm.$data._asyncComputed, key, {
+    vm.$data._asyncComputed[key] = {
       exception: null,
       update: () => {
-        if (!vm._isDestroyed) {
+        if (vm._asyncComputedIsMounted) {
           watcher(getterOnly(vm.$options.asyncComputed[key]).apply(vm));
         }
       }
-    });
+    };
     setAsyncState(vm, key, 'updating');
@@ -222,0 +235,0 @@ vm.$watch(prefix + key, watcher, { immediate: true });

dist/vue-async-computed.js

@@ -9,6 +9,6 @@ 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; };
   function setAsyncState(vm, stateObject, state) {
-    vm.$set(vm.$data._asyncComputed[stateObject], 'state', state);
-    vm.$set(vm.$data._asyncComputed[stateObject], 'updating', state === 'updating');
-    vm.$set(vm.$data._asyncComputed[stateObject], 'error', state === 'error');
-    vm.$set(vm.$data._asyncComputed[stateObject], 'success', state === 'success');
+    vm.$data._asyncComputed[stateObject].state = state;
+    vm.$data._asyncComputed[stateObject].updating = state === 'updating';
+    vm.$data._asyncComputed[stateObject].error = state === 'error';
+    vm.$data._asyncComputed[stateObject].success = state === 'success';
   }
@@ -125,7 +125,13 @@
 
+  /** @type {import('vue').Plugin} */
   var AsyncComputed = {
-    install: function install(Vue, pluginOptions) {
-      Vue.config.optionMergeStrategies.asyncComputed = Vue.config.optionMergeStrategies.computed;
+    install: function install(app, pluginOptions) {
+      // Use same logic as `computed` merging.
+      // See: https://github.com/vuejs/core/blob/32bdc5d1900ceb8df1e8ee33ea65af7b4da61051/packages/runtime-core/src/componentOptions.ts#L1059
+      var mergeStrategy = function mergeStrategy(to, from) {
+        return to ? Object.assign(Object.create(null), to, from) : from;
+      };
+      app.config.optionMergeStrategies.asyncComputed = mergeStrategy;
 
-      Vue.mixin(getAsyncComputedMixin(pluginOptions));
+      app.mixin(getAsyncComputedMixin(pluginOptions));
     }
@@ -137,6 +143,8 @@ };
 
+    /** @type {import('vue').ComponentOptionsMixin} */
     return {
       data: function data() {
         return {
-          _asyncComputed: {}
+          _asyncComputed: {},
+          _asyncComputedIsMounted: false
         };
@@ -176,2 +184,8 @@ },
         }
+      },
+      mounted: function mounted() {
+        this._asyncComputedIsMounted = true;
+      },
+      beforeUnmount: function beforeUnmount() {
+        this._asyncComputedIsMounted = false;
       }
@@ -202,3 +216,3 @@ };
         setAsyncState(vm, key, 'error');
-        vm.$set(vm.$data._asyncComputed[key], 'exception', err);
+        vm.$data._asyncComputed[key].exception = err;
         if (pluginOptions.errorHandler === false) return;
@@ -215,10 +229,10 @@
     };
-    vm.$set(vm.$data._asyncComputed, key, {
+    vm.$data._asyncComputed[key] = {
       exception: null,
       update: function update() {
-        if (!vm._isDestroyed) {
+        if (vm._asyncComputedIsMounted) {
           watcher(getterOnly(vm.$options.asyncComputed[key]).apply(vm));
         }
       }
-    });
+    };
     setAsyncState(vm, key, 'updating');
@@ -225,0 +239,0 @@ vm.$watch(prefix + key, watcher, { immediate: true });

package.json

 {
   "name": "vue-async-computed",
-  "version": "4.0.0-mixin.0",
+  "version": "4.0.0",
   "description": "Async computed properties for Vue",
@@ -17,3 +17,3 @@ "main": "dist/vue-async-computed.js",
     "watch": "watch 'npm run build' src test",
-    "test": "babel-node --presets env test/index.js | tspec",
+    "test": "vitest run",
     "prebuild": "npm run lint -s && npm run clean -s && mkdirp dist",
@@ -27,3 +27,3 @@ "build": "npm run rollup -s && npm run babel -s",
     "babel": "npm run babel-umd -s && npm run babel-esm -s",
-    "postbuild": "npm run test -s",
+    "postbuild": "vitest run",
     "prepublishOnly": "npm run build -s",
@@ -54,3 +54,3 @@ "patch": "npm version patch && npm publish",
   "peerDependencies": {
-    "vue": "~2"
+    "vue": "~3"
   },
@@ -70,10 +70,10 @@ "devDependencies": {
     "estraverse-fb": "^1.3.2",
+    "happy-dom": "^12.10.3",
     "mkdirp": "^1.0.4",
     "rimraf": "^3.0.2",
     "rollup": "^2.26.3",
-    "tap-spec": "^5.0.0",
-    "tape": "^5.0.1",
-    "vue": "^2.5.21",
+    "vitest": "^0.34.6",
+    "vue": "^3.3.7",
     "watch": "^1.0.2"
   }
 }

README.md

@@ -278,5 +278,5 @@ <big><h1 align="center">vue-async-computed</h1></big>
 
-Using `watch` it is possible to run the computed property again but it will run regardless of the
-value of the watched property. If you need more control over when the computation should be rerun
-you can use `shouldUpdate`:
+Using `watch` it is possible to force the computed property to run again unconditionally.
+If you need more control over when the computation should be rerun you can use `shouldUpdate`:
+
 ```js
@@ -287,3 +287,3 @@
     postId: 1,
-    // Imagine pageType can be one of 'index', 'details' and 'edit'
+    // Imagine pageType can be one of 'index', 'details' and 'edit'.
     pageType: 'index'
@@ -297,6 +297,6 @@ },
       },
-      // Will update whenever the pageType or postId changes
-      // but only if the pageType is not 'index' this way the
-      // blogPostContent will be refetched when loading the
-      // 'details' and 'edit' pages
+      // Will update whenever the pageType or postId changes,
+      // but only if the pageType is not 'index'. This way the
+      // blogPostContent will be refetched only when loading the
+      // 'details' and 'edit' pages.
       shouldUpdate () {
@@ -310,8 +310,7 @@ return this.pageType !== 'index'
 
-The main advantage over adding an if statement within the get function is that when the computation is
-not rerun you are able to still access the old value.
+The main advantage over adding an `if` statement within the get function is that the old value is still accessible even if the computation is not re-run.
 
 ## Lazy properties
 
-Normally, computed properties are run both immediately, and as necessary when their dependencies change.
+Normally, computed properties are both run immediately, and re-run as necessary when their dependencies change.
 With async computed properties, you sometimes don't want that. With `lazy: true`, an async computed
@@ -374,3 +373,3 @@ property will only be computed the first time it's accessed.
 
-// 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:
+// 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:
 // <div v-if="$asyncComputed.posts.updating && posts === null"> Loading posts </div>
@@ -377,0 +376,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

1071

increased by5.1%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

53194

decreased by-4.08%

Number of package files

8

decreased by-11.11%

Number of lines in readme file

417

decreased by-0.24%

No dependency changes