@selfcommunity/utils 0.1.4-alpha.2 → 0.1.5-alpha.1

package/lib/cjs/index.js

@@ -8,10 +8,44 @@ exports.capitalize = _string.capitalize;
 exports.isString = _string.isString;
 exports.stripHtml = _string.stripHtml;
 exports.camelCase = _string.camelCase;
+exports.copyTextToClipboard = _string.copyTextToClipboard;
+exports.fallbackCopyTextToClipboard = _string.fallbackCopyTextToClipboard;
+exports.random = _string.random;
 
 var _url = require("./utils/url");
 
 exports.isValidUrl = _url.isValidUrl;
 exports.isValidUrls = _url.isValidUrls;
 exports.urlReplacer = _url.urlReplacer;
-exports.getDomain = _url.getDomain;
+exports.getDomain = _url.getDomain;
+exports.appendURLSearchParams = _url.appendURLSearchParams;
+exports.urlB64ToUint8Array = _url.urlB64ToUint8Array;
+
+var _window = require("./utils/window");
+
+exports.getHighestSafeWindowContext = _window.getHighestSafeWindowContext;
+exports.getWindowWidth = _window.getWindowWidth;
+exports.getWindowHeight = _window.getWindowHeight;
+
+var _object = require("./utils/object");
+
+exports.mergeDeep = _object.mergeDeep;
+exports.isObject = _object.isObject;
+
+var _browser = require("./utils/browser");
+
+exports.loadVersionBrowser = _browser.loadVersionBrowser;
+
+var _logger = require("./utils/logger");
+
+exports.Logger = _logger.Logger;
+
+var _websocket = _interopRequireWildcard(require("./utils/websocket"));
+
+exports.WSClient = _websocket.default;
+exports.WSClientType = _websocket.WSClientType;
+exports.WSClientPropTypes = _websocket.WSClientPropTypes;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/cjs/utils/browser.js

@@ -0,0 +1,90 @@
+"use strict";
+
+exports.__esModule = true;
+exports.loadVersionBrowser = void 0;
+
+/**
+ * Get browser version to track on backend
+ * @return {{name: string, version: null}|{name: string, version: string}|{name: *, version: *}|{name: string, version}}
+ */
+const loadVersionBrowser = () => {
+  if ('userAgentData' in navigator) {
+    // navigator.userAgentData is not available in
+    // Firefox and Safari
+    const uaData = navigator['userAgentData']; // Outputs of navigator.userAgentData.brands[n].brand are e.g.
+    // Chrome: 'Google Chrome'
+    // Edge: 'Microsoft Edge'
+    // Opera: 'Opera'
+
+    let browsername;
+    let browserversion;
+    let chromeVersion = null;
+
+    for (let i = 0; i < uaData['brands'].length; i++) {
+      const brand = uaData['brands'][i].brand;
+      browserversion = uaData['brands'][i].version;
+
+      if (brand.match(/opera|chrome|edge|safari|firefox|msie|trident/i) !== null) {
+        // If we have a chrome match, save the match, but try to find another match
+        // E.g. Edge can also produce a false Chrome match.
+        if (brand.match(/chrome/i) !== null) {
+          chromeVersion = browserversion;
+        } // If this is not a chrome match return immediately
+        else {
+          browsername = brand.substr(brand.indexOf(' ') + 1);
+          return {
+            name: browsername,
+            version: browserversion
+          };
+        }
+      }
+    } // No non-Chrome match was found. If we have a chrome match, return it.
+
+
+    if (chromeVersion !== null) {
+      return {
+        name: 'chrome',
+        version: chromeVersion
+      };
+    }
+  } // If no userAgentData is not present, or if no match via userAgentData was found,
+  // try to extract the browser name and version from userAgent
+
+
+  const userAgent = navigator.userAgent;
+  let ua = userAgent;
+  let tem;
+  let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
+
+  if (/trident/i.test(M[1])) {
+    tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
+    return {
+      name: 'IE',
+      version: tem[1] || ''
+    };
+  }
+
+  if (M[1] === 'Chrome') {
+    tem = ua.match(/\bOPR\/(\d+)/);
+
+    if (tem != null) {
+      return {
+        name: 'Opera',
+        version: tem[1]
+      };
+    }
+  }
+
+  M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?']; // eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
+
+  if ((tem = ua.match(/version\/(\d+)/i)) != null) {
+    M.splice(1, 1, tem[1]);
+  }
+
+  return {
+    name: M[0],
+    version: M[1]
+  };
+};
+
+exports.loadVersionBrowser = loadVersionBrowser;

package/lib/cjs/utils/logger.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Logger = void 0;
+
+/**
+ * Emit styled message
+ */
+class Logger {
+  static info(scope, message) {
+    console.info(`%c[${scope}]`, 'color:#008080', ` ${message}`);
+  }
+
+  static warn(scope, message) {
+    console.warn(`%c[${scope}]`, 'color:#008080', ` ${message}`);
+  }
+
+  static error(scope, message) {
+    console.error(`%c[${scope}]`, 'color:#008080', ` ${message}`);
+  }
+
+  static log(scope, message) {
+    console.log(`%c[${scope}]`, 'color:#008080', ` ${message}`);
+  }
+
+  static debug(scope, message) {
+    console.debug(`%c[${scope}]`, 'color:#008080', ` ${message}`);
+  }
+
+}
+
+exports.Logger = Logger;

package/lib/cjs/utils/object.js

@@ -0,0 +1,44 @@
+"use strict";
+
+exports.__esModule = true;
+exports.isObject = isObject;
+exports.mergeDeep = mergeDeep;
+
+/**
+ * Check if v is an object
+ * @param v
+ */
+function isObject(v) {
+  return typeof v === 'object' && !Array.isArray(v) && v !== null;
+}
+/**
+ * Perfrom deep merge of two objects (not a shallow merge)
+ * @param target
+ * @param source
+ * @return {*}
+ */
+
+
+function mergeDeep(target, source) {
+  let output = Object.assign({}, target);
+
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach(key => {
+      if (isObject(source[key])) {
+        if (!(key in target)) {
+          Object.assign(output, {
+            [key]: source[key]
+          });
+        } else {
+          output[key] = mergeDeep(target[key], source[key]);
+        }
+      } else {
+        Object.assign(output, {
+          [key]: source[key]
+        });
+      }
+    });
+  }
+
+  return output;
+}

package/lib/cjs/utils/string.js

@@ -3,7 +3,10 @@
 exports.__esModule = true;
 exports.camelCase = camelCase;
 exports.capitalize = capitalize;
+exports.copyTextToClipboard = copyTextToClipboard;
+exports.fallbackCopyTextToClipboard = fallbackCopyTextToClipboard;
 exports.isString = isString;
+exports.random = random;
 exports.stripHtml = stripHtml;
 
 /**
@@ -54,4 +57,58 @@ function camelCase(str) {
 
 function stripHtml(str) {
   return str.replace(/<[^>]*>?/gm, '').trim();
+}
+
+function random() {
+  return (Math.random() + 1).toString(36).substring(7);
+}
+/**
+ * Fallback if navigator.clipboard doensn't exist
+ * @param text
+ * @returns {Promise<void>}
+ */
+
+
+function fallbackCopyTextToClipboard(text) {
+  let textArea = document.createElement('textarea');
+  textArea.value = text; // Avoid scrolling to bottom
+
+  textArea.style.top = '0';
+  textArea.style.left = '0';
+  textArea.style.position = 'fixed';
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+
+  try {
+    document.execCommand('copy');
+    document.body.removeChild(textArea);
+    return Promise.resolve();
+  } catch (err) {
+    document.body.removeChild(textArea);
+    return Promise.reject(err);
+  }
+}
+/**
+ * Copy text to clipboard
+ * @param text
+ * @returns {Promise<void>}
+ *
+ * Ex.
+ * copyTextToClipboard(text).then(
+ *    function () {
+ *     console.log('Async: Copying to clipboard was successful!');
+ *   },
+ *   function (err) {
+ *     console.error('Async: Could not copy text: ', err);
+ *   });
+ */
+
+
+function copyTextToClipboard(text) {
+  if (!navigator.clipboard) {
+    return fallbackCopyTextToClipboard(text);
+  }
+
+  return navigator.clipboard.writeText(text);
 }

package/lib/cjs/utils/url.js

@@ -1,7 +1,8 @@
 "use strict";
 
 exports.__esModule = true;
-exports.urlReplacer = exports.isValidUrls = exports.isValidUrl = exports.getDomain = void 0;
+exports.appendURLSearchParams = appendURLSearchParams;
+exports.urlReplacer = exports.urlB64ToUint8Array = exports.isValidUrls = exports.isValidUrl = exports.getDomain = void 0;
 
 /**
  * Utility Url Replacer
@@ -66,5 +67,46 @@ const isValidUrls = (value, delimiter) => {
   const urls = value.trim().split(delimiter);
   return urls.every(isValidUrl);
 };
+/**
+ * Append params
+ * @param baseUrl
+ * @param queryParams
+ */
+
+
+exports.isValidUrls = isValidUrls;
+
+function appendURLSearchParams(baseUrl, queryParams) {
+  let _url = baseUrl;
+
+  if (queryParams.length && _url) {
+    const key = Object.keys(queryParams[0])[0];
+    _url += (_url.split('?')[1] ? '&' : '?') + `${key}=${queryParams[0][key]}`;
+    queryParams.slice(1).map(p => {
+      const key = Object.keys(p)[0];
+      _url += `&${key}=${p[key]}`;
+    });
+  }
+
+  return _url;
+}
+/**
+ * Take the application server's public key, which is Base64 URL-safe encoded,
+ * and convert it to a UInt8Array, because this is the expected input of the subscribe()
+ */
+
+
+const urlB64ToUint8Array = base64String => {
+  const padding = '='.repeat((4 - base64String.length % 4) % 4);
+  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+
+  return outputArray;
+};
 
-exports.isValidUrls = isValidUrls;
+exports.urlB64ToUint8Array = urlB64ToUint8Array;

package/lib/cjs/utils/websocket.js

@@ -0,0 +1,307 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+/**
+ * WSClientPropTypes interface
+ */
+
+/**
+ * WSClient: manage socket connection
+ * @param options
+ * @constructor
+ */
+class WSClient {
+  /**
+   * Constructor
+   * @param cfg
+   */
+  constructor(cfg) {
+    this._attempts = 1;
+    this._heartbeatInterval = null;
+    this._missedHeartbeats = 0;
+
+    if (!this.isValidOptions(cfg)) {
+      return;
+    }
+
+    this._cfg = Object.assign({}, {
+      heartbeatMsg: null,
+      debug: false,
+      mustReconnect: true
+    }, cfg);
+    this.connect();
+  }
+  /**
+   * Get instance
+   */
+
+
+  static getInstance(cfg) {
+    this._instance = this._instance || new WSClient(cfg);
+    return this._instance;
+  }
+  /**
+   * Connect
+   */
+
+
+  connect() {
+    try {
+      if (this._ws && (this.isConnecting() || this.isConnected())) {
+        // There is already a connection
+        this._cfg.debug && console.info('Websocket is connecting or already connected.');
+        return;
+      } // Callback 'connecting' if exist
+
+
+      typeof this._cfg.connecting === 'function' && this._cfg.connecting();
+      this._cfg.debug && console.info(`Connecting to ${this._cfg.uri} ...`); // Open the connection
+
+      this._ws = new WebSocket(this._cfg.uri, this._cfg.protocols);
+      this._ws.onopen = this.onOpen.bind(this);
+      this._ws.onmessage = this.onMessage.bind(this);
+      this._ws.onerror = this.onError.bind(this);
+      this._ws.onclose = this.onClose.bind(this);
+      this._timer = null;
+    } catch (err) {
+      console.error(err);
+      this.tryToReconnect();
+    }
+  }
+  /**
+   * Validate options
+   * @param cfg
+   */
+
+
+  isValidOptions(cfg) {
+    let _error = false;
+
+    if (!cfg) {
+      console.error('Invalid WSClient options.');
+      return _error;
+    }
+
+    if (!cfg.uri) {
+      console.error('Invalid WSClient Uri options.');
+      _error = true;
+    }
+
+    if (cfg && cfg.connecting && !(typeof cfg.connecting === 'function')) {
+      console.error('Invalid WSClient connecting options.');
+      _error = true;
+    }
+
+    if (cfg && cfg.connected && !(typeof cfg.connected === 'function')) {
+      console.error('Invalid WSClient connected options.');
+      _error = true;
+    }
+
+    if (cfg && cfg.receiveMessage && !(typeof cfg.receiveMessage === 'function')) {
+      console.error('Invalid WSClient receiveMessage options.');
+      _error = true;
+    }
+
+    if (cfg && cfg.disconnected && !(typeof cfg.disconnected === 'function')) {
+      console.error('Invalid WSClient connecting options.');
+      _error = true;
+    }
+
+    if (cfg && cfg.heartbeatMsg && !(typeof cfg.heartbeatMsg === 'string')) {
+      console.error('Invalid WSClient heartbeatMsg options.');
+      _error = true;
+    }
+
+    if (cfg && cfg.debug && !(typeof cfg.debug === 'boolean')) {
+      console.error('Invalid WSClient debug options.');
+      _error = true;
+    }
+
+    return !_error;
+  }
+  /**
+   * Try to reconnect if previous connection failed
+   * Generate an interval, after that try to reconnect
+   */
+
+
+  tryToReconnect() {
+    if (this._cfg.mustReconnect && !this._timer) {
+      this._cfg.debug && console.info(`Reconnecting...`);
+      let interval = this.generateInteval(this._attempts);
+      this._timer = setTimeout(this.reconnect.bind(this), interval);
+    }
+  }
+  /**
+   * Reestablish the connection
+   * Increase the number of attempts
+   */
+
+
+  reconnect() {
+    this._attempts++;
+    this.connect();
+  }
+  /**
+   * Send heartbeat every 5 seconds
+   * If missing more than 3 heartbeats close connection
+   */
+
+
+  sendHeartbeat() {
+    try {
+      this._missedHeartbeats++;
+      if (this._missedHeartbeats > 3) throw new Error('Too many missed heartbeats.');
+
+      this._ws.send(this._cfg.heartbeatMsg);
+    } catch (e) {
+      clearInterval(this._heartbeatInterval);
+      this._heartbeatInterval = null;
+      this._cfg.debug && console.warn(`Closing connection. Reason: ${e.message}`);
+
+      if (!this.isClosing() && !this.isClosed()) {
+        this.close();
+      }
+    }
+  }
+  /**
+   * Established the new connection
+   * Reset this._attempts counter
+   */
+
+
+  onOpen() {
+    this._cfg.debug && console.info('Connected!');
+    this._attempts = 1;
+
+    if (this._cfg.heartbeatMsg && this._heartbeatInterval === null) {
+      this._missedHeartbeats = 0;
+      this._heartbeatInterval = setInterval(this.sendHeartbeat.bind(this), 5000);
+    }
+
+    typeof this._cfg.connected === 'function' && this._cfg.connected();
+  }
+  /**
+   * Connection closed. Try to reconnect.
+   * @param evt
+   */
+
+
+  onClose(evt) {
+    this._cfg.debug && console.info('Connection closed!');
+    typeof this._cfg.disconnected === 'function' && this._cfg.disconnected(evt);
+    this.tryToReconnect();
+  }
+  /**
+   * An error occured
+   * @param evt
+   */
+
+
+  onError(evt) {
+    this._cfg.debug && console.error('Websocket connection is broken!');
+    this._cfg.debug && console.error(evt);
+  }
+  /**
+   * A message has arrived.
+   * If it is the heartbeat -> reset this._missedHeartbeats
+   * If it is data pass data to the callback
+   * @param evt
+   */
+
+
+  onMessage(evt) {
+    if (this._cfg.heartbeatMsg && evt.data === this._cfg.heartbeatMsg) {
+      // reset the counter for missed heartbeats
+      this._missedHeartbeats = 0;
+    } else if (typeof this._cfg.receiveMessage === 'function') {
+      return this._cfg.receiveMessage(evt.data);
+    }
+  }
+  /**
+   * Generate an interval that is randomly between 0 and 2^k - 1, where k is
+   * the number of connection attmpts, with a maximum interval of 30 seconds,
+   * so it starts at 0 - 1 seconds and maxes out at 0 - 30 seconds
+   */
+
+
+  generateInteval(k) {
+    let maxInterval = (Math.pow(2, k) - 1) * 1000; // If the generated interval is more than 30 seconds, truncate it down to 30 seconds.
+
+    if (maxInterval > 30 * 1000) {
+      maxInterval = 30 * 1000;
+    } // generate the interval to a random number between 0 and the maxInterval determined from above
+
+
+    return Math.random() * maxInterval;
+  }
+  /**
+   * Send message
+   * @param message
+   */
+
+
+  sendMessage(message) {
+    this._ws && this._ws.send(message);
+  }
+  /**
+   * Get the ws state
+   */
+
+
+  getState() {
+    return this._ws && this._ws.readyState;
+  }
+  /**
+   * Check if ws is in connecting state
+   */
+
+
+  isConnecting() {
+    return this._ws && this._ws.readyState === 0;
+  }
+  /**
+   * Check if ws is connected
+   */
+
+
+  isConnected() {
+    return this._ws && this._ws.readyState === 1;
+  }
+  /**
+   * Check if ws is in closing state
+   */
+
+
+  isClosing() {
+    return this._ws && this._ws.readyState === 2;
+  }
+  /**
+   * Check if ws is closed
+   */
+
+
+  isClosed() {
+    return this._ws && this._ws.readyState === 3;
+  }
+  /**
+   * Close the connection
+   */
+
+
+  close() {
+    clearInterval(this._heartbeatInterval);
+    this._cfg.mustReconnect = false;
+
+    if (!this.isClosing() || !this.isClosed()) {
+      this._ws.close();
+
+      this._cfg.debug && console.error('Websocket closed.');
+    }
+  }
+
+}
+
+exports.default = WSClient;

package/lib/cjs/utils/window.js

@@ -0,0 +1,41 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getHighestSafeWindowContext = getHighestSafeWindowContext;
+exports.getWindowHeight = getWindowHeight;
+exports.getWindowWidth = getWindowWidth;
+
+function getWindowWidth() {
+  return typeof global.window !== 'undefined' ? global.window.innerWidth : 0;
+}
+
+function getWindowHeight() {
+  return typeof global.window !== 'undefined' ? global.window.innerHeight : 0;
+}
+
+const isCrossOriginFrame = () => {
+  try {
+    return global.window.location.hostname !== global.window.parent.location.hostname;
+  } catch (e) {
+    return true;
+  }
+}; // Get the highest window context that isn't cross-origin
+// (When in an iframe)
+
+
+function getHighestSafeWindowContext(self = global.window.self) {
+  // If we reached the top level, return self
+  if (self === global.window.top) {
+    return self;
+  } // If parent is the same origin, we can move up one context
+  // Reference: https://stackoverflow.com/a/21965342/1601953
+
+
+  if (!isCrossOriginFrame()) {
+    return getHighestSafeWindowContext(self.parent);
+  } // If a different origin, we consider the current level
+  // as the top reachable one
+
+
+  return self;
+}

package/lib/esm/index.d.ts

@@ -1,7 +1,12 @@
-import { capitalize, isString, stripHtml, camelCase } from './utils/string';
-import { isValidUrl, isValidUrls, urlReplacer, getDomain } from './utils/url';
+import { capitalize, isString, stripHtml, camelCase, copyTextToClipboard, fallbackCopyTextToClipboard, random } from './utils/string';
+import { isValidUrl, isValidUrls, urlReplacer, getDomain, appendURLSearchParams, urlB64ToUint8Array } from './utils/url';
+import { getHighestSafeWindowContext, getWindowWidth, getWindowHeight } from './utils/window';
+import { mergeDeep, isObject } from './utils/object';
+import { loadVersionBrowser } from './utils/browser';
+import { Logger } from './utils/logger';
+import WSClient, { WSClientType, WSClientPropTypes } from './utils/websocket';
 /**
  * Export all utilities
  */
-export { capitalize, isString, stripHtml, camelCase, isValidUrl, isValidUrls, urlReplacer, getDomain };
+export { capitalize, isString, stripHtml, camelCase, copyTextToClipboard, fallbackCopyTextToClipboard, random, isValidUrl, isValidUrls, urlReplacer, getDomain, appendURLSearchParams, urlB64ToUint8Array, getHighestSafeWindowContext, getWindowWidth, getWindowHeight, Logger, mergeDeep, isObject, WSClient, WSClientType, WSClientPropTypes, loadVersionBrowser };
 //# sourceMappingURL=index.d.ts.map