@logux/client - npm Package Compare versions

Comparing version 0.5.2 to 0.6.0

attention.js

@@ -6,3 +6,3 @@ /**
  *
- * @return {Function} Unbind attention listener.
+ * @return {function} Unbind attention listener.
  *
@@ -9,0 +9,0 @@ * @example

badge.js

@@ -47,33 +47,33 @@ var status = require('./status')
  * @param {Client} client Observed Client instance.
- * @param {object} options Widget settings.
- * @param {object} options.styles Inline styles for different states.
- * @param {object} options.styles.base Base styles.
- * @param {object} options.styles.text Style for text element inside widget.
- * @param {object} options.styles.synchronized Styles for synchronized state.
- * @param {object} options.styles.disconnected Styles for disconnected state.
- * @param {object} options.styles.wait Styles for wait state.
- * @param {object} options.styles.connecting Styles for connecting state.
- * @param {object} options.styles.sending Styles for sending state.
- * @param {object} options.styles.error Error styles.
- * @param {object} options.styles.protocolError Protocol error styles.
- * @param {object} options.styles.icons Icons in URL link or `data:uri`.
- * @param {string} options.styles.icons.synchronized Synchronized state.
- * @param {string} options.styles.icons.disconnected Disconnected state.
- * @param {string} options.styles.icons.wait Wait state.
- * @param {string} options.styles.icons.sending Sending state.
- * @param {string} options.styles.icons.error Error state.
- * @param {string} options.styles.icons.protocolError Protocol error state.
- * @param {object} options.messages Widget text for different states.
- * @param {object} options.messages.synchronized Text for synchronized state.
- * @param {object} options.messages.disconnected Text for disconnected state.
- * @param {object} options.messages.wait Text for wait state.
- * @param {object} options.messages.sending Text for sending state.
- * @param {object} options.messages.syncError Logux error text.
- * @param {object} options.messages.error Error text.
- * @param {object} options.messages.denied Denied text.
- * @param {object} options.messages.protocolError Protocol error text.
- * @param {string} [options.position="bottom-right"] Widget position.
- * @param {number} [options.duration=3000] Synchronized state duration.
+ * @param {object} opts Widget settings.
+ * @param {object} opts.styles Inline styles for different states.
+ * @param {object} opts.styles.base Base styles.
+ * @param {object} opts.styles.text Style for text element inside widget.
+ * @param {object} opts.styles.synchronized Styles for synchronized state.
+ * @param {object} opts.styles.disconnected Styles for disconnected state.
+ * @param {object} opts.styles.wait Styles for wait state.
+ * @param {object} opts.styles.connecting Styles for connecting state.
+ * @param {object} opts.styles.sending Styles for sending state.
+ * @param {object} opts.styles.error Error styles.
+ * @param {object} opts.styles.protocolError Protocol error styles.
+ * @param {object} opts.styles.icons Icons in URL link or `data:uri`.
+ * @param {string} opts.styles.icons.synchronized Synchronized state.
+ * @param {string} opts.styles.icons.disconnected Disconnected state.
+ * @param {string} opts.styles.icons.wait Wait state.
+ * @param {string} opts.styles.icons.sending Sending state.
+ * @param {string} opts.styles.icons.error Error state.
+ * @param {string} opts.styles.icons.protocolError Protocol error state.
+ * @param {object} opts.messages Widget text for different states.
+ * @param {object} opts.messages.synchronized Text for synchronized state.
+ * @param {object} opts.messages.disconnected Text for disconnected state.
+ * @param {object} opts.messages.wait Text for wait state.
+ * @param {object} opts.messages.sending Text for sending state.
+ * @param {object} opts.messages.syncError Logux error text.
+ * @param {object} opts.messages.error Error text.
+ * @param {object} opts.messages.denied Denied text.
+ * @param {object} opts.messages.protocolError Protocol error text.
+ * @param {string} [opts.position="bottom-right"] Widget position.
+ * @param {number} [opts.duration=3000] Synchronized state duration.
  *
- * @return {Function} Unbind badge listener and remove widget from DOM.
+ * @return {function} Unbind badge listener and remove widget from DOM.
  *
@@ -93,7 +93,10 @@ * @example
  * })
+ *
+ * @name badge
+ * @function
  */
-function badge (client, options) {
-  var messages = options.messages
-  var position = options.position || 'bottom-right'
-  var styles = options.styles
+function badge (client, opts) {
+  var messages = opts.messages
+  var position = opts.position || 'bottom-right'
+  var styles = opts.styles
 
@@ -140,3 +143,3 @@ var widget = document.createElement('div')
     }
-  }, options)
+  }, opts)
 
@@ -143,0 +146,0 @@ widget.appendChild(text)

CHANGELOG.md

 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 0.6
+* Do not synchronize event cleaning between tabs.
+* Ask to update page receiving bigger `subprocol` from another tab.
+* Disable cross-tab communication on `localStorage` error.
+* Fix falling on empty `userId` (by @Abdubek).
+
 ## 0.5.2
@@ -5,0 +11,0 @@ * Fix React Native and React Server-Side Rendering support (by Can Rau).

client.js

@@ -43,23 +43,22 @@ var isFirstOlder = require('@logux/core/is-first-older')
  *
- * @param {object} options Client options.
- * @param {string|Connection} options.server Server URL.
- * @param {string} options.subprotocol Client subprotocol version
- *                                     in SemVer format.
- * @param {number|string|false} options.userId User ID. Pass `false` if no user.
- * @param {any} [options.credentials] Client credentials for authentication.
- * @param {string} [options.prefix="logux"] Prefix for `IndexedDB` database
- *                                          to run multiple Logux instances
- *                                          in the same browser.
- * @param {number} [options.timeout=20000] Timeout in milliseconds
- *                                         to break connection.
- * @param {number} [options.ping=10000] Milliseconds since last message to test
- *                                      connection by sending ping.
- * @param {Store} [options.store] Store to save log data. `IndexedStore`
- *                                by default (if available)
- * @param {TestTime} [options.time] Test time to test client.
- * @param {number} [options.minDelay=1000] Minimum delay between reconnections.
- * @param {number} [options.maxDelay=5000] Maximum delay between reconnections.
- * @param {number} [options.attempts=Infinity] Maximum reconnection attempts.
- * @param {bool} [options.allowDangerousProtocol=false] Do not show warning
- *                                                      when using 'ws://'
+ * @param {object} opts Client options.
+ * @param {string|Connection} opts.server Server URL.
+ * @param {string} opts.subprotocol Client subprotocol version in SemVer format.
+ * @param {number|string|false} opts.userId User ID. Pass `false` if no user.
+ * @param {any} [opts.credentials] Client credentials for authentication.
+ * @param {string} [opts.prefix="logux"] Prefix for `IndexedDB` database to run
+ *                                       multiple Logux instances
+ *                                       in the same browser.
+ * @param {number} [opts.timeout=20000] Timeout in milliseconds
+ *                                      to break connection.
+ * @param {number} [opts.ping=10000] Milliseconds since last message to test
+ *                                   connection by sending ping.
+ * @param {Store} [opts.store] Store to save log data. `IndexedStore`
+ *                             by default (if available)
+ * @param {TestTime} [opts.time] Test time to test client.
+ * @param {number} [opts.minDelay=1000] Minimum delay between reconnections.
+ * @param {number} [opts.maxDelay=5000] Maximum delay between reconnections.
+ * @param {number} [opts.attempts=Infinity] Maximum reconnection attempts.
+ * @param {boolean} [opts.allowDangerousProtocol=false] Do not show warning
+ *                                                      when using `ws://`
  *                                                      in production.
@@ -83,3 +82,3 @@ *
  */
-function Client (options) {
+function Client (opts) {
   /**
@@ -92,3 +91,3 @@ * Client options.
    */
-  this.options = options || { }
+  this.options = opts || { }
 
@@ -122,3 +121,8 @@ if (process.env.NODE_ENV !== 'production') {
 
-  this.options.userId = this.options.userId.toString()
+  if (this.options.userId) {
+    this.options.userId = this.options.userId.toString()
+  } else {
+    this.options.userId = 'false'
+  }
+
   if (!this.options.time) {
@@ -153,3 +157,3 @@ /**
   var auth
-  if (/^ws:\/\//.test(this.options.server) && !options.allowDangerousProtocol) {
+  if (/^ws:\/\//.test(this.options.server) && !opts.allowDangerousProtocol) {
     auth = function (cred) {
@@ -198,3 +202,5 @@ if (typeof cred !== 'object' || cred.env !== 'development') {
   var unsubscribing = { }
-  function listener (action, meta) {
+
+  this.emitter = new NanoEvents()
+  this.on('add', function (action, meta) {
     var type = action.type
@@ -253,7 +259,4 @@ var json, last
     }
-  }
+  })
 
-  this.emitter = new NanoEvents()
-  this.on('add', listener)
-
   this.tabPing = 60000
@@ -260,0 +263,0 @@ this.tabTimeout = 10 * this.tabPing

confirm.js

@@ -12,3 +12,3 @@ function block (e) {
  *
- * @return {Function} Unbind confirm listener.
+ * @return {function} Unbind confirm listener.
  *
@@ -15,0 +15,0 @@ * @example

cross-tab-client.js

@@ -0,1 +1,2 @@
+var LoguxError = require('@logux/core/logux-error')
 var merge = require('@logux/core/merge')
@@ -11,3 +12,13 @@
   if (!client.isLocalStorage) return
-  localStorage.setItem(storageKey(client, event), JSON.stringify(data))
+  var key = storageKey(client, event)
+  var json = JSON.stringify(data)
+  try {
+    localStorage.setItem(key, json)
+  } catch (e) {
+    console.error(e)
+    client.isLocalStorage = false
+    client.role = 'leader'
+    client.emitter.emit('role')
+    client.node.connection.connect()
+  }
 }
@@ -44,2 +55,24 @@
 
+function areWeOutdates (client, meta) {
+  if (!meta.subprotocol) return false
+  if (client.node.options.subprotocol === meta.subprotocol) return false
+
+  var id = meta.id.split(' ')[1]
+  var prefix = client.clientId + ':'
+  if (id.slice(0, prefix.length) !== prefix) return false
+
+  var ourParts = client.node.options.subprotocol.split('.')
+  var remoteParts = meta.subprotocol.split('.')
+  for (var i = 0; i < ourParts.length; i++) {
+    var ourNumber = parseInt(ourParts[i])
+    var remoteNumber = parseInt(remoteParts[i])
+    if (ourNumber > remoteNumber) {
+      return false
+    } else if (ourNumber < remoteNumber) {
+      return true
+    }
+  }
+  return false
+}
+
 function setRole (client, role) {
@@ -115,23 +148,22 @@ if (client.role !== role) {
  *
- * @param {object} options Client options.
- * @param {string|Connection} options.server Server URL.
- * @param {string} options.subprotocol Client subprotocol version
- *                                     in SemVer format.
- * @param {number|string|false} options.userId User ID. Pass `false` if no user.
- * @param {any} [options.credentials] Client credentials for authentication.
- * @param {string} [options.prefix="logux"] Prefix for `IndexedDB` database
- *                                          to run multiple Logux instances
- *                                          in the same browser.
- * @param {number} [options.timeout=20000] Timeout in milliseconds
- *                                         to break connection.
- * @param {number} [options.ping=10000] Milliseconds since last message to test
- *                                      connection by sending ping.
- * @param {Store} [options.store] Store to save log data. `IndexedStore`
- *                                by default (if available)
- * @param {TestTime} [options.time] Test time to test client.
- * @param {number} [options.minDelay=1000] Minimum delay between reconnections.
- * @param {number} [options.maxDelay=5000] Maximum delay between reconnections.
- * @param {number} [options.attempts=Infinity] Maximum reconnection attempts.
- * @param {bool} [options.allowDangerousProtocol=false] Do not show warning
- *                                                      when using 'ws://'
+ * @param {object} opts Client options.
+ * @param {string|Connection} opts.server Server URL.
+ * @param {string} opts.subprotocol Client subprotocol version in SemVer format.
+ * @param {number|string|false} opts.userId User ID. Pass `false` if no user.
+ * @param {any} [opts.credentials] Client credentials for authentication.
+ * @param {string} [opts.prefix="logux"] Prefix for `IndexedDB` database to run
+ *                                       multiple Logux instances
+ *                                       in the same browser.
+ * @param {number} [opts.timeout=20000] Timeout in milliseconds
+ *                                      to break connection.
+ * @param {number} [opts.ping=10000] Milliseconds since last message to test
+ *                                   connection by sending ping.
+ * @param {Store} [opts.store] Store to save log data. `IndexedStore`
+ *                             by default (if available)
+ * @param {TestTime} [opts.time] Test time to test client.
+ * @param {number} [opts.minDelay=1000] Minimum delay between reconnections.
+ * @param {number} [opts.maxDelay=5000] Maximum delay between reconnections.
+ * @param {number} [opts.attempts=Infinity] Maximum reconnection attempts.
+ * @param {boolean} [opts.allowDangerousProtocol=false] Do not show warning
+ *                                                      when using `ws://`
  *                                                      in production.
@@ -156,4 +188,4 @@ *
  */
-function CrossTabClient (options) {
-  Client.call(this, options)
+function CrossTabClient (opts) {
+  Client.call(this, opts)
 
@@ -208,5 +240,2 @@ /**
     client.emitter.emit('clean', action, meta)
-    if (meta.tab !== client.tabId) {
-      sendToTabs(client, 'clean', [client.tabId, action, meta])
-    }
   })
@@ -256,3 +285,2 @@
       localStorage.removeItem(storageKey(this, 'add'))
-      localStorage.removeItem(storageKey(this, 'clean'))
       localStorage.removeItem(storageKey(this, 'state'))
@@ -300,22 +328,21 @@ localStorage.removeItem(storageKey(this, 'client'))
       if (data[0] !== this.tabId) {
-        if (!data[2].tab || data[2].tab === this.tabId) {
+        var action = data[1]
+        var meta = data[2]
+        if (areWeOutdates(this, meta)) {
+          var err = new LoguxError('wrong-subprotocol', {
+            supported: meta.subprotocol,
+            used: this.node.options.subprotocol
+          }, true)
+          this.node.emitter.emit('error', err)
+        }
+        if (!meta.tab || meta.tab === this.tabId) {
           if (isMemory(this.log.store)) {
-            this.log.store.add(data[1], data[2])
+            this.log.store.add(action, meta)
           }
-          this.emitter.emit('add', data[1], data[2])
+          this.emitter.emit('add', action, meta)
           if (this.role === 'leader') {
-            this.node.onAdd(data[1], data[2])
+            this.node.onAdd(action, meta)
           }
         }
       }
-    } else if (e.key === storageKey(this, 'clean')) {
-      data = JSON.parse(e.newValue)
-      if (data[0] !== this.tabId) {
-        if (!data[2].tab || data[2].tab === this.tabId) {
-          if (isMemory(this.log.store)) {
-            this.log.store.remove(data[2].id)
-          }
-          this.emitter.emit('clean', data[1], data[2])
-        }
-      }
     } else if (e.key === storageKey(this, 'leader')) {
@@ -322,0 +349,0 @@ data = JSON.parse(e.newValue)

favicon.js

@@ -11,3 +11,3 @@ /**
  *
- * @return {Function} Unbind favicon listener.
+ * @return {function} Unbind favicon listener.
  *
@@ -14,0 +14,0 @@ * @example

indexed-store.js

@@ -52,3 +52,13 @@ var isFirstOlder = require('@logux/core/is-first-older')
  * import IndexedStore from '@logux/client/indexed-store'
- * var log = new Log({ store: new IndexedStore(), nodeId })
+ * const client = new CrossTabClient({
+ *   …,
+ *   store: new IndexedStore()
+ * })
+ *
+ * @example
+ * import IndexedStore from '@logux/client/indexed-store'
+ * const createStore = createLoguxCreator({
+ *   …,
+ *   store: new IndexedStore()
+ * })
  */
@@ -55,0 +65,0 @@ function IndexedStore (name) {

log.js

@@ -45,3 +45,3 @@ var browserSupportsLogStyles = require('browser-supports-log-styles')
  *
- * @return {Function} Unbind log listener.
+ * @return {function} Unbind log listener.
  *
@@ -48,0 +48,0 @@ * @example

package.json

 {
   "name": "@logux/client",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "Logux base components to build web client",
@@ -14,8 +14,9 @@ "keywords": [
   "license": "MIT",
+  "homepage": "https://logux.io/",
   "repository": "logux/client",
   "dependencies": {
-    "@logux/core": "^0.3.4",
+    "@logux/core": "^0.3.5",
     "browser-supports-log-styles": "^1.1.7",
     "nanoevents": "^2.0.0",
-    "nanoid": "^2.1.6"
+    "nanoid": "^2.1.11"
   },
@@ -26,4 +27,5 @@ "eslintIgnore": [
   "sharec": {
-    "version": "0.4.4"
+    "config": "@logux/sharec-config",
+    "version": "0.5.7"
   }
 }

README.md

 # Logux Client [![Cult Of Martians][cult-img]][cult]
 
-<img align="right" width="95" height="95" title="Logux logo"
-     src="https://cdn.rawgit.com/logux/logux/master/logo.svg">
+<img align="right" width="95" height="148" title="Logux logotype"
+     src="https://logux.io/branding/logotype.svg">
 
@@ -10,3 +10,3 @@ Logux is a new way to connect client and server. Instead of sending
 
-**Documentation: [logux/logux]**
+**Documentation: [logux.io]**
 
@@ -29,3 +29,3 @@ This repository contains Logux base components to build web client:
 
-[logux/logux]: https://github.com/logux/logux
+[logux.io]: https://logux.io/
 [demo page]: https://logux.github.io/client/
@@ -32,0 +32,0 @@ [cult-img]: http://cultofmartians.com/assets/badges/badge.svg

status.js

@@ -10,3 +10,3 @@ /**
  *
- * @return {Function} Unbind status listener.
+ * @return {function} Unbind status listener.
  *
@@ -13,0 +13,0 @@ * @example

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 website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

62836

increased by1.58%

Lines of code

1727

increased by2.31%

Number of low quality alerts

1

decreased by-50%

Dependency changes

• Updated@logux/core@^0.3.5

• Updatednanoid@^2.1.11