vue-offline - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

mixin/index.js

+export default {
+  data () {
+      return {
+          OfflineOnly: false,
+          OnlineOnly: false
+      }
+  },
+  mounted () {
+      if (window) {
+          if (navigator.onLine) {
+              this.OnlineOnly = true
+          } else {
+              this.OfflineOnly = true
+          }
+          
+          const onlineHandler = () => {
+              this.$emit('online')
+              this.OnlineOnly = true
+              this.OfflineOnly = false
+          }
+
+          const offlienHandler = () => {
+              this.$emit('offline')
+              this.OfflineOnly = true
+              this.OnlineOnly = false
+          }
+
+          window.addEventListener('online',  onlineHandler)
+          window.addEventListener('offline',  offlineHandler)
+
+          this.$once('hook:desktroyed', () => {
+              window.removeEventListener('online', onlineHandler)
+              window.removeEventListener('offline', offlineHandler)
+          })
+      }
+  }
+}

index.js

@@ -1,3 +0,3 @@
-module.exports = {
-    install (Vue) {
+export default {
+    install (Vue, options) {
         
@@ -46,2 +46,6 @@ // Legacy, doesn't work as intended
 
+
+
+
+
         const offlineHooksMixin = {
@@ -61,11 +65,21 @@ data () {
                     }
-                    window.addEventListener('online',  () => {
+                    
+                    const onlineHandler = () => {
                         this.$emit('online')
                         this.OnlineOnly = true
                         this.OfflineOnly = false
-                    })
-                    window.addEventListener('offline',  () => {
+                    }
+
+                    const offlienHandler = () => {
                         this.$emit('offline')
                         this.OfflineOnly = true
                         this.OnlineOnly = false
+                    }
+
+                    window.addEventListener('online',  onlineHandler)
+                    window.addEventListener('offline',  offlineHandler)
+
+                    this.$once('hook:desktroyed', () => {
+                        window.removeEventListener('online', onlineHandler)
+                        window.removeEventListener('offline', offlineHandler)
                     })
@@ -72,0 +86,0 @@ }

package.json

 {
   "name": "vue-offline",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Online/Offline events and directives for vue application",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -9,3 +9,5 @@ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-````
+There are two ways to install this plugin:
+ 1. <b>Global</b> - if you register the plugin globally all features will be immediately avvailable in all of your components
+ ````
 npm install vue-offline --save
@@ -20,7 +22,21 @@ ````
 ````
+ 2. <b>Local for specific components </b>- if you need online/offline features only in specific components you can inject them as a mixins. This approach could save a little bit of performance.
+ ````
+npm install vue-offline --save
+````
+And inside components that you want to have features listed below:
+````js
+import VueOfflineMixin from 'vue-offline/mixin'
 
+export default {
+  mixins: [VueOfflineMixin]
+}
+
+````
+
+
 # Features 
 
-* `OnlineOnly` data property available for each component - shows component only when online
-* `OfflineOnly` data property available for each component - shows component only when offline
+* `OnlineOnly` data property available for each component - `true` only when online
+* `OfflineOnly` data property available for each component - `true` only when offline
 * `online` event - available in every component, emitted when user changes from offline to online
@@ -27,0 +43,0 @@ * `offline` event - available in every component, emitted when user changes from online to offline

No alert changes

Improved metrics

Total package byte prevSize

6410

38.42%

Number of package files

4

33.33%

Lines of code

109

53.52%

Number of lines in readme file

71

29.09%

No dependency changes