@knocklabs/client - npm Package Compare versions

Comparing version 0.8.2 to 0.8.3

dist/cjs/clients/feed/feed.js

@@ -30,7 +30,3 @@ "use strict";
 
-function invertStatus(status) {
-  return status.startsWith("un") ? status.substring(2, status.length) : "un".concat(status);
-} // Default options to apply
-
-
+// Default options to apply
 var feedClientDefaults = {
@@ -53,2 +49,3 @@ archived: "exclude"
     (0, _defineProperty2["default"])(this, "defaultOptions", void 0);
+    (0, _defineProperty2["default"])(this, "broadcastChannel", void 0);
     (0, _defineProperty2["default"])(this, "store", void 0);
@@ -67,3 +64,6 @@ this.apiClient = knock.client();
       return _this.onNewMessageReceived(resp);
-    });
+    }); // Attempt to bind to listen to other events from this feed in different tabs for when
+    // `items:updated` event is
+
+    this.broadcastChannel = "BroadcastChannel" in self ? new BroadcastChannel("knock:feed:".concat(this.userFeedId)) : null;
   }
@@ -83,2 +83,6 @@ /**
       this.store.destroy();
+
+      if (this.broadcastChannel) {
+        this.broadcastChannel.close();
+      }
     }
@@ -93,2 +97,4 @@ /*
     value: function listenForUpdates() {
+      var _this2 = this;
+
       // Connect the socket only if we don't already have a connection
@@ -102,2 +108,25 @@ if (!this.apiClient.socket.isConnected()) {
         this.channel.join();
+      } // Opt into receiving updates from _other tabs for the same user / feed_ via the broadcast
+      // channel (iff it's enabled and exists)
+
+
+      if (this.broadcastChannel && this.defaultOptions.__experimentalCrossBrowserUpdates === true) {
+        this.broadcastChannel.onmessage = function (e) {
+          switch (e.data.type) {
+            case "items:archived":
+            case "items:unarchived":
+            case "items:seen":
+            case "items:unseen":
+            case "items:read":
+            case "items:unread":
+              // When items are updated in any other tab, simply refetch to get the latest state
+              // to make sure that the state gets updated accordingly. In the future here we could
+              // maybe do this optimistically without the fetch.
+              return _this2.fetch();
+              break;
+
+            default:
+              return null;
+          }
+        };
       }
@@ -259,3 +288,3 @@ }
                 /*
-                  In the proceeding code here we want to optimistically update counts and items
+                  In the code here we want to optimistically update counts and items
                   that are persisted such that we can display updates immediately on the feed
@@ -398,3 +427,8 @@ without needing to make a network request.
 
-                queryParams = _objectSpread(_objectSpread({}, this.defaultOptions), options);
+                queryParams = _objectSpread(_objectSpread(_objectSpread({}, this.defaultOptions), options), {}, {
+                  // Unset options that should not be sent to the API
+                  __loadingType: undefined,
+                  __fetchSource: undefined,
+                  __experimentalCrossBrowserUpdates: undefined
+                });
                 _context7.next = 9;
@@ -603,3 +637,3 @@ return this.apiClient.makeRequest({
       var _makeStatusUpdate = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10(itemOrItems, type) {
-        var itemIds, result;
+        var items, itemIds, result;
         return _regenerator["default"].wrap(function _callee10$(_context10) {
@@ -609,8 +643,5 @@ while (1) {
               case 0:
-                if (!Array.isArray(itemOrItems)) {
-                  _context10.next = 5;
-                  break;
-                }
-
-                itemIds = itemOrItems.map(function (item) {
+                // Always treat items as a batch to use the corresponding batch endpoint
+                items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
+                itemIds = items.map(function (item) {
                   return item.id;
@@ -628,31 +659,21 @@ });
               case 4:
-                return _context10.abrupt("return", _context10.sent);
+                result = _context10.sent;
+                // Emit the event that these items had their statuses changed
+                // Note: we do this after the update to ensure that the server event actually completed
+                this.broadcaster.emit("items:".concat(type), {
+                  items: items
+                });
 
-              case 5:
-                if (!type.startsWith("un")) {
-                  _context10.next = 9;
-                  break;
+                if (this.broadcastChannel) {
+                  this.broadcastChannel.postMessage({
+                    type: "items:".concat(type),
+                    payload: {
+                      items: items
+                    }
+                  });
                 }
 
-                _context10.next = 8;
-                return this.apiClient.makeRequest({
-                  method: "DELETE",
-                  url: "/v1/messages/".concat(itemOrItems.id, "/").concat(invertStatus(type))
-                });
+                return _context10.abrupt("return", result);
 
               case 8:
-                return _context10.abrupt("return", _context10.sent);
-
-              case 9:
-                _context10.next = 11;
-                return this.apiClient.makeRequest({
-                  method: "PUT",
-                  url: "/v1/messages/".concat(itemOrItems.id, "/").concat(type)
-                });
-
-              case 11:
-                result = _context10.sent;
-                return _context10.abrupt("return", result);
-
-              case 13:
               case "end":
@@ -659,0 +680,0 @@ return _context10.stop();

dist/esm/clients/feed/feed.js

@@ -11,8 +11,3 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import { isRequestInFlight, NetworkStatus } from "../../networkStatus";
-
-function invertStatus(status) {
-  return status.startsWith("un") ? status.substring(2, status.length) : "un".concat(status);
-} // Default options to apply
-
-
+// Default options to apply
 var feedClientDefaults = {
@@ -38,2 +33,4 @@ archived: "exclude"
 
+    _defineProperty(this, "broadcastChannel", void 0);
+
     _defineProperty(this, "store", void 0);
@@ -51,3 +48,6 @@
     this.channel = this.apiClient.socket.channel("feeds:".concat(this.userFeedId), this.defaultOptions);
-    this.channel.on("new-message", resp => this.onNewMessageReceived(resp));
+    this.channel.on("new-message", resp => this.onNewMessageReceived(resp)); // Attempt to bind to listen to other events from this feed in different tabs for when
+    // `items:updated` event is
+
+    this.broadcastChannel = "BroadcastChannel" in self ? new BroadcastChannel("knock:feed:".concat(this.userFeedId)) : null;
   }
@@ -65,2 +65,6 @@ /**
     this.store.destroy();
+
+    if (this.broadcastChannel) {
+      this.broadcastChannel.close();
+    }
   }
@@ -82,2 +86,25 @@ /*
       this.channel.join();
+    } // Opt into receiving updates from _other tabs for the same user / feed_ via the broadcast
+    // channel (iff it's enabled and exists)
+
+
+    if (this.broadcastChannel && this.defaultOptions.__experimentalCrossBrowserUpdates === true) {
+      this.broadcastChannel.onmessage = e => {
+        switch (e.data.type) {
+          case "items:archived":
+          case "items:unarchived":
+          case "items:seen":
+          case "items:unseen":
+          case "items:read":
+          case "items:unread":
+            // When items are updated in any other tab, simply refetch to get the latest state
+            // to make sure that the state gets updated accordingly. In the future here we could
+            // maybe do this optimistically without the fetch.
+            return this.fetch();
+            break;
+
+          default:
+            return null;
+        }
+      };
     }
@@ -172,3 +199,3 @@ }
       /*
-        In the proceeding code here we want to optimistically update counts and items
+        In the code here we want to optimistically update counts and items
         that are persisted such that we can display updates immediately on the feed
@@ -260,3 +287,8 @@ without needing to make a network request.
 
-      var queryParams = _objectSpread(_objectSpread({}, _this7.defaultOptions), options);
+      var queryParams = _objectSpread(_objectSpread(_objectSpread({}, _this7.defaultOptions), options), {}, {
+        // Unset options that should not be sent to the API
+        __loadingType: undefined,
+        __fetchSource: undefined,
+        __experimentalCrossBrowserUpdates: undefined
+      });
 
@@ -405,27 +437,27 @@ var result = yield _this7.apiClient.makeRequest({
     return _asyncToGenerator(function* () {
-      // If we're interacting with an array, then we want to send this as a batch
-      if (Array.isArray(itemOrItems)) {
-        var itemIds = itemOrItems.map(item => item.id);
-        return yield _this10.apiClient.makeRequest({
-          method: "POST",
-          url: "/v1/messages/batch/".concat(type),
-          data: {
-            message_ids: itemIds
-          }
-        });
-      } // Handle unx actions
+      // Always treat items as a batch to use the corresponding batch endpoint
+      var items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
+      var itemIds = items.map(item => item.id);
+      var result = yield _this10.apiClient.makeRequest({
+        method: "POST",
+        url: "/v1/messages/batch/".concat(type),
+        data: {
+          message_ids: itemIds
+        }
+      }); // Emit the event that these items had their statuses changed
+      // Note: we do this after the update to ensure that the server event actually completed
 
+      _this10.broadcaster.emit("items:".concat(type), {
+        items
+      });
 
-      if (type.startsWith("un")) {
-        return yield _this10.apiClient.makeRequest({
-          method: "DELETE",
-          url: "/v1/messages/".concat(itemOrItems.id, "/").concat(invertStatus(type))
+      if (_this10.broadcastChannel) {
+        _this10.broadcastChannel.postMessage({
+          type: "items:".concat(type),
+          payload: {
+            items
+          }
         });
-      } // If its a single then we can just call the regular endpoint
+      }
 
-
-      var result = yield _this10.apiClient.makeRequest({
-        method: "PUT",
-        url: "/v1/messages/".concat(itemOrItems.id, "/").concat(type)
-      });
       return result;
@@ -432,0 +464,0 @@ })();

dist/types/clients/feed/feed.d.ts

@@ -14,2 +14,3 @@ import { StoreApi } from "zustand";
     private defaultOptions;
+    private broadcastChannel;
     store: StoreApi<FeedStoreState>;
@@ -16,0 +17,0 @@ constructor(knock: Knock, feedId: string, options: FeedClientOptions);

dist/types/clients/feed/interfaces.d.ts

@@ -12,2 +12,3 @@ import { Activity, GenericData, PageInfo, Recipient } from "../../interfaces";
     archived?: "include" | "exclude" | "only";
+    __experimentalCrossBrowserUpdates?: boolean;
 }
@@ -17,3 +18,3 @@ export declare type FetchFeedOptions = {
     __fetchSource?: "socket" | "http";
-} & FeedClientOptions;
+} & Omit<FeedClientOptions, "__experimentalCrossBrowserUpdates">;
 export interface ContentBlock {
@@ -20,0 +21,0 @@ content: string;

dist/types/clients/feed/types.d.ts

@@ -24,4 +24,4 @@ import { PageInfo } from "../../interfaces";
 export declare type FeedRealTimeEvent = "messages.new";
-export declare type FeedEvent = FeedRealTimeEvent | "items.received.page" | "items.received.realtime";
-export declare type BindableFeedEvent = FeedEvent | "items.received.*";
+export declare type FeedEvent = FeedRealTimeEvent | "items.received.page" | "items.received.realtime" | "items.archived" | "items.unarchived" | "items.seen" | "items.unseen" | "items.read" | "items.unread";
+export declare type BindableFeedEvent = FeedEvent | "items.received.*" | "items.*";
 export declare type FeedEventPayload = {
@@ -28,0 +28,0 @@ event: Omit<FeedEvent, "messages.new">;

package.json

 {
   "name": "@knocklabs/client",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "The clientside library for interacting with Knock",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/knocklabs/knock-client-js",

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

Improved metrics

Total package byte prevSize

226844

increased by3%

Lines of code

2478

increased by2.19%

No dependency changes