vue-async-methods - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

index.js

 'use strict'
 
+var blockRegex = /^(address|blockquote|body|center|dir|div|dl|fieldset|form|h[1-6]|hr|isindex|menu|noframes|noscript|ol|p|pre|table|ul|dd|dt|frameset|li|tbody|td|tfoot|th|thead|tr|html)$/i
+
+function isBlockLevel(name) {
+  return blockRegex.test(name)
+}
+
 module.exports = {
@@ -99,2 +105,42 @@ install(Vue, options) {
 
+    Vue.component('catch-async-error', {
+      props: ['promise'],
+      render: function(h) {
+        if (!this.error || !this.$slots || !this.$slots.default) return null
+
+        if (this.$slots.default.length === 1) {
+          return this.$slots.default[0]
+        }
+
+        var isAnyBlock = this.$slots.default.some(function(vNode) {
+          return isBlockLevel(vNode.tag)
+        })
+        var baseElement = isAnyBlock ? 'div' : 'span'
+        return h(baseElement, this.$slots.default)
+      },
+      data() {
+        return {
+          error: null
+        }
+      },
+      created() {
+        if (this.promise) {
+          this.catchError()
+        }
+      },
+      watch: {
+        promise: 'catchError'
+      },
+      methods: {
+        catchError() {
+          this.error = null
+
+          this.promise.catch((err) => {
+            this.error = err
+            this.showError = true
+          })
+        }
+      }
+    })
+
     Vue.mixin({
@@ -101,0 +147,0 @@ beforeCreate() {

package.json

 {
   "name": "vue-async-methods",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Vue async methods support",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -23,3 +23,3 @@ # vue-async-methods [![Build Status](https://travis-ci.org/mokkabonna/vue-async-methods.svg?branch=master)](https://travis-ci.org/mokkabonna/vue-async-methods)
 
-default `false`, if true: creates computeds that proxies fetchArticle.resolvedWith
+default `false`, if true: creates computeds that proxies fetchArticles.resolvedWith
 
@@ -31,3 +31,3 @@ #### getComputedName
 ```js
-// turns "fetchArticle", "getArticle" or "loadArticle" into "article" computed
+// turns "fetchArticles", "getArticle" or "loadArticle" into "article" computed
 function (vm, funcName) {
@@ -44,3 +44,3 @@ var withoutPrefix = funcName.replace(/^(fetch|get|load)/, '')
   asyncMethods: {
-    fetchArticle() {
+    fetchArticles() {
       return ajax('http://example.com/data.json') //must return a promise
@@ -55,13 +55,13 @@ }
 ```js
-article // this is a computed that aliases fetchArticle.resolvedWith
-fetchArticle.execute // executes the method
-fetchArticle.promise // the current or last promise
-fetchArticle.isCalled // false until first called
-fetchArticle.isPending
-fetchArticle.isResolved
-fetchArticle.isRejected
-fetchArticle.resolvedWith
-fetchArticle.resolvedWithEmpty //empty means empty object or empty array
-fetchArticle.resolvedWithSomething //opposite of empty
-fetchArticle.rejectedWith //Error object
+articles // this is a computed that aliases fetchArticles.resolvedWith
+fetchArticles.execute // executes the method
+fetchArticles.promise // the current or last promise
+fetchArticles.isCalled // false until first called
+fetchArticles.isPending
+fetchArticles.isResolved
+fetchArticles.isRejected
+fetchArticles.resolvedWith
+fetchArticles.resolvedWithEmpty //empty means empty object or empty array
+fetchArticles.resolvedWithSomething //opposite of empty
+fetchArticles.rejectedWith //Error object
 ```
@@ -71,15 +71,15 @@
 ```html
-<button type="button" @click="fetchArticle.execute">Load data</button>
-<div v-if="!fetchArticle.isCalled">Click button to load data</div>
-<div v-if="fetchArticle.isPending">Loading data...</div>
+<button type="button" @click="fetchArticles.execute">Load data</button>
+<div v-if="!fetchArticles.isCalled">Click button to load data</div>
+<div v-if="fetchArticles.isPending">Loading data...</div>
 
-<div v-if="fetchArticle.isResolved">
-    <div v-if="fetchArticle.resolvedWithSomething">
+<div v-if="fetchArticles.isResolved">
+    <div v-if="fetchArticles.resolvedWithSomething">
         <ul>
-            <li v-for="item in fetchArticle.resolvedWith">
-                {{item.name}}
+            <li v-for="article in articles">
+                {{article.name}}
             </li>
         </ul>
     </div>
-    <div v-if="fetchArticle.resolvedWithEmpty">
+    <div v-if="fetchArticles.resolvedWithEmpty">
         Empty list returned
@@ -89,4 +89,4 @@ </div>
 
-<div v-if="fetchArticle.isRejected">
-    <div v-if="fetchArticle.rejectedWith">
+<div v-if="fetchArticles.isRejected">
+    <div v-if="fetchArticles.rejectedWith">
         Could not load data due to an error. Details: {{fetchData.rejectedWith.message}}
@@ -93,0 +93,0 @@ </div>

No alert changes

Improved metrics

Total package byte prevSize

9552

increased by14.41%

Lines of code

153

increased by35.4%

No dependency changes