@ornery/web-components 1.1.5 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornery/web-components",
-  "version": "1.1.5",
+  "version": "2.0.0",
   "description": "WebComponents html loader and optional runtime mixins to enable creation of custom HTML elements using es6 template literal syntax in *.html files.",
   "main": "index.js",
   "scripts": {

package/src/data-manager.js

@@ -1,34 +1,33 @@
 const EventMap = require('./event-map');
 
-module.exports = (() => {
-  /**
+/**
    * @class DataStore
    * @description Configuration values can be set and propagated to consuming
    * components via this static class or through
    * the corresponding wc-config element
    */
-  const DataStore = new class {
-    constructor() {
-      this._state = new EventMap();
-    }
+class DataManager {
+  constructor() {
+    this._state = new EventMap();
+  }
 
-    /**
+  /**
      * @memberOf DataStore
      * @param {String} key
      * @return {Object} the current value of the requested property name.
      */
-    get(key) {
-      return key ? this._state.get(key) : this._state.getAll();
-    }
+  get(key) {
+    return key ? this._state.get(key) : this._state.getAll();
+  }
 
-    /**
+  /**
      * @memberOf DataStore
      * @return {Object} the current state object.
      */
-    getState() {
-      return this._state.getAll();
-    }
-    /**
+  getState() {
+    return this._state.getAll();
+  }
+  /**
      * @memberOf DataStore
      * @param {String|Object} key the name of the value to set.
      * It can also be called with an {} query to set multiple values at once.
@@ -36,59 +35,59 @@ module.exports = (() => {
      * @return {{state}|*}
      * @description wraps this.set
      */
-    set(key, value) {
-      let query = key;
-      if (value) {
-        // we have a single value
-        query = {[key]: value};
-      }
-      return this._state.replace({...this._state.getAll(), ...query});
+  set(key, value) {
+    let query = key;
+    if (value) {
+      // we have a single value
+      query = {[key]: value};
     }
+    return this._state.replace({...this._state.getAll(), ...query});
+  }
 
-    /**
+  /**
      * @memberOf DataStore
      * @param {Object} newState the new state object.
      * @return {{state}|*}
      * @description wraps this.set
      */
-    setState(newState) {
-      return this.set(newState);
-    }
-    /**
+  setState(newState) {
+    return this.set(newState);
+  }
+  /**
      * @memberOf DataStore
      * @param {Function} callback is the function to execute when any property changes.
      * @return {{destroy}|*}
      * @description call destroy() on the returned object to remove the event listener.
      */
-    subscribe(callback) {
-      return callback && this._state.on('set', callback);
-    }
+  subscribe(callback) {
+    return callback && this._state.on('set', callback);
+  }
 
-    /**
+  /**
      * @memberOf DataStore
      * @param {Array} keys the property names to be notified when they mutate
      * @param {Function} callback the callback to be executed when any of the value for any of those keys have changed.
      * @return {{destroy}|*}
      * @description call destroy() on the returned object to remove the event listener.
      */
-    subscribeTo(keys, callback) {
-      keys = typeof (keys) === 'string' ? [keys] : keys;
-      return this.subscribe((event, newState, oldState) => {
-        let updates;
-        keys.forEach((property) => {
-          if (newState[property] !== oldState[property]) {
-            updates = {
-              ...updates,
-              [property]: {
-                oldValue: oldState[property],
-                newValue: newState[property],
-              },
-            };
-          }
-        });
-        updates && callback(updates, newState, oldState);
+  subscribeTo(keys, callback) {
+    keys = typeof (keys) === 'string' ? [keys] : keys;
+    return this.subscribe((event, newState, oldState) => {
+      let updates;
+      keys.forEach((property) => {
+        if (newState[property] !== oldState[property]) {
+          updates = {
+            ...updates,
+            [property]: {
+              oldValue: oldState[property],
+              newValue: newState[property],
+            },
+          };
+        }
       });
-    }
-  };
-  return DataStore;
-})();
+      updates && callback(updates, newState, oldState);
+    });
+  }
+}
+
+module.exports = DataManager;

package/src/i18n.js

@@ -1,16 +1,16 @@
-const DataManager = require("./data-manager");
-const { template, getFromObj, shouldEncode, encodeHTML } = require("./utils");
-const withContext = require("./context-binding");
+const DataManager = require('./data-manager');
+const {template, getFromObj, toLowerMap} = require('./utils');
 
-if (typeof HTMLElement === "undefined") {
-    HTMLElement = class {};
+if (typeof HTMLElement === 'undefined') {
+  // eslint-disable-next-line no-global-assign
+  HTMLElement = class {};
 }
 
 /**
  *
  * @class I18n
  * @description Import strings here and call I18n.addStrings() with the supported locale identifier
- * and the strings object exported from the language file
+ * and the strings object exported from the locale file
  * By default, it will set the values on window.i18n, if defined when loaded, as the starting messages.
  * This is useful if you wish to server-side render HTML certain content before laoding scripts on the client.
  * @example
@@ -36,296 +36,216 @@ if (typeof HTMLElement === "undefined") {
  * console.log(I18n.getMessages()) // will log the window.i18n object
  *
  */
-const I18n = new (class {
-    constructor() {
-        // language without region code;
-        this._altLangRegex = /[_-]/i;
-        this.setDefaultLang();
-        this.setLang();
-        if (typeof window !== "undefined") {
-            if (typeof navigator !== "undefined") {
-                this.setLang(navigator.language);
-            }
-            this.setMessages(window.i18n || {});
-        } else {
-            if (typeof process !== "undefined") {
-                const { env } = process;
-                this.setLang(
-                    env.LANG ||
-                    env.LANGUAGE ||
-                    env.LC_ALL ||
-                    env.LC_MESSAGES ||
-                    this._defaultLang
-                );
-            }
-        }
-    }
-
-    setDefaultLang(lang = "en") {
-        this._defaultLang = lang.toLowerCase();
-        this._fallbackMessages = this.getMessages(this._defaultLang);
-    }
-    /**
-     * @memberof I18n
-     * @return {String} lang
-     * @description returns the current language. defaults to the browser's navigator.language value.
-     * @example
-     *
-     * navigator.language = 'en-US';
-     * import { I18n } from '@ornery/web-components';
-     *
-     * console.log(I18n.getLang()) // "en-US"
-     */
-    getLang() {
-        return DataManager.get("i18n-language") || '';
-    }
-    getRootLang() {
-        return this.getLang().split(this._altLangRegex)[0];
-    }
-    /**
-     * @memberof I18n
-     * @param {String} lang
-     * @description sets the current i18n language. This does not change the browser language.
-     * @example
-     *
-     * import { I18n } from '@ornery/web-components';
-     *
-     * I18n.setLang('en-US')
-     * console.log(I18n.getLang()) //'en-US'
-     */
-    setLang(lang= "") {
-        return DataManager.set("i18n-language", lang)
-    }
-    /**
-     * @memberof I18n
-     * @return {String} lang
-     * @description returns the current i18n messages set in the DataManager
-     */
-    getMessages(lang) {
-        const allMessages = DataManager.get("i18n-messages") || {};
-        if (lang === "all") {
-            return allMessages;
-        } else {
-            lang = lang || this.getLang();
-            const rootLang = lang
-                ? lang.split(this._altLangRegex)[0]
-                : this.getRootLang();
-            return {
-                ...allMessages[rootLang],
-                ...allMessages[lang],
-            };
-        }
-    }
-    /**
-     * @memberof I18n
-     * @param {Object} values
-     * @description sets the strings as a whole. This overrides all existing strings.
-     * Use addMessages to add more strings to the existing set.
-     * @example
-     *
-     * import { I18n } from '@ornery/web-components';
-     *
-     * I18n.setMessages({
-     *     'en-US': {
-     *         'translatable.message.name': "I'm a translated string from i18n",
-     *         'tokenized.message': "I have a ${this.color} ${this.animal}"
-     *     }
-     * })
-     */
-    setMessages(values) {
-        return DataManager.set("i18n-messages", values);
-    }
-    /**
-     * @memberof I18n
-     * @param {String} lang
-     * @param {Object} strings
-     * @description add more strings to the existing language set.
-     *
-     * @example
-     *
-     * import { I18n } from '@ornery/web-components';
-     * I18n.addMessages('en-US', {
-     *  'translatable.message.name': "I'm a translated string from i18n",
-     *   'tokenized.message': "I have a ${color} ${animal}"
-     * });
-     */
-    addMessages(lang, newStrings) {
-        if (typeof lang !== "string") {
-            newStrings = lang;
-            lang = this.getLang();
-        }
-        lang = lang.toLowerCase();
-        const rootLang = lang.split(this._altLangRegex)[0];
-        const existing = this.getMessages("all");
-        existing[rootLang] = {
-            ...(existing[rootLang] || {}),
-            ...newStrings,
-        };
-        existing[lang] = {
-            ...(existing[lang] || {}),
-            ...newStrings,
-        };
-        this.setMessages(existing);
-        if (lang === this._defaultLang) {
-            this._fallbackMessages = this.getMessages(lang);
-        } else if (rootLang === this._defaultLang) {
-            this._fallbackMessages = this.getMessages(rootLang);
-        }
-    }
-
-    /**
-     * @memberof I18n
-     * @param {String} key they key of the string to retrieve from the current language set.
-     * @param {Object} data Optional, The data to process tokens in the string with.
-     * @return {String} Returns the value for the key. Processed if a data context is provided as the second argument.
-     * @description Returns the value for the key. If a context is provided as the second argument for tokens,
-     * the tokens will be replaced in the returned string.
-     * @example
-     *
-     * import { I18n } from '@ornery/web-components';
-     * I18n.addMessages('en-US', {
-     *   'tokenized.message': "I have a ${color} ${animal}"
-     * });
-     *
-     * const stringTestData = {
-     *     color: "grey",
-     *     animal: "monkey"
-     * };
-     * console.log(I18n.get('tokenized.message', stringTestData)) // "I have a grey monkey"
-     */
-    get(key, data = {}) {
-        const context = {
-            ...this._fallbackMessages,
-            ...this.getMessages(),
-            ...data,
-        };
-        return template(getFromObj(key, context), context);
-    }
-
-    /**
-     * @memberof I18n
-     * @param {String} namespace
-     * @return {Object} Returns all the messages for the given language. Filtered to namespace if provided.
-     * @description If a namespace is provided, returns all the key value pairs for that
-     * namespace without the namespace in the keys.
-     *
-     * @example
-     *
-     * import { I18n } from '@ornery/web-components';
-     * I18n.addMessages('en-US', {
-     *  'translatable.message.name': "I'm a translated string from i18n",
-     *   'tokenized.message': "I have a ${color} ${animal}"
-     * });
-     *
-     * console.log(I18n.getAll('tokenized', {color: "red", animal: "panda"})) // {"message": "I have a red panda"}
-     */
-    getAll(namespace, data) {
-        if (namespace) {
-            return Object.keys(this.getMessages()).reduce((reducer, key) => {
-                if (key.startsWith(namespace)) {
-                    reducer[key.replace(namespace + ".", "")] = this.get(key, data);
-                }
-                return reducer;
-            }, {});
-        } else {
-            return this.getMessages("all");
-        }
-    }
-})();
+class I18n {
+  constructor(options) {
+    const {
+      store = new DataManager(),
+      messages = null,
+      locale = null,
+      fallbackLocale = {
+        'default': 'en',
+        'de-ch': ['fr', 'it'],
+        'zh-hant': ['zh-hans'],
+        'es-cl': ['es-ar'],
+        'es': ['en'],
+        'pt': ['es-ar'],
+      },
+    } = options;
+    this.store = store;
+    this.setFallbackLocale(fallbackLocale);
+    if (locale) this.setLocale(locale);
+    if (messages) this.setMessages(messages);
+  }
 
-/**
- * @class I18nMessage
- * @description <i18n-message> HTML element. Provides tranlsation and interpolation for
- * translatable strings
- * @param {String} key the key for the strings based on current language. can be set as the innerHTML or
- * defined as the attibutes: key, id, data-key, data-id
- * @param {JSON} values can be passed as data-* attributes or as a json-parseable object string as "data-values"
- * @param {String} dataAttributes
- * @example <caption>Given the following configuration</caption>
- * import { I18n } from '@ornery/web-components';
- * I18n.addMessages('en-US', {
- *  'translatable.message.name': "I'm a translated string from i18n",
- *   'tokenized.message': "I have a ${color} ${animal}"
- * });
- * @example @lang html <caption>With the following usage</caption>
- * <i18n-message>translatable.message.name</i18n-message>
- * <div>
- *    <i18n-message data-values="{'color: 'grey', 'animal': 'monkey'}">tokenized.message</i18n-message>
- *    <i18n-message data-color="grey" data-animal="monkey">tokenized.message</i18n-message>
- *    <i18n-message key="tokenized.message"/>
- *    <!-- React does not pass key or ref props so you can use "data-key" or "data-id" as well-->
- *    <i18n-message data-key="tokenized.message"/>
- *    <i18n-message id="translatable.message.name"/>
- *    <i18n-message data-id="translatable.message.name"/>
- * </div>
- *
- * @example @lang html <caption>Renders the HTML</caption>
- * <i18n-message>I'm a translated string from i18n</i18n-message>
- * <i18n-message>I have a grey monkey</i18n-message>
- */
- class I18nMessage extends HTMLElement {
-    constructor() {
-        super();
-    }
-
-    static get observedAttributes() {
-        return ["key", "id", "data-values"];
-    }
+  setFallbackLocale(fallbackLocales) {
+    this._fallbackLocale = toLowerMap(fallbackLocales);
+  }
+  /**
+   * @memberof I18n
+   * @return {String} locale
+   * @description returns the current locale. defaults to the browser's navigator.locale value.
+   * @example
+   *
+   * navigator.locale = 'en-US';
+   * import { I18n } from '@ornery/web-components';
+   *
+   * console.log(I18n.getLocale()) // "en-US"
+   */
+  getLocale() {
+    return this.store.get('i18n-locale') || '';
+  }
 
-    get useShadow() {
-        if (this.hasAttribute("shadow")) {
-            let current = this.getAttribute("shadow");
-            if (current === "false") {
-                return false;
-            }
+  getFallbackLocale() {
+    const locale = this.getLocale();
+    const defaultLocale = this._fallbackLocale.default;
+    const fallbackMap = this._fallbackLocale[locale];
+    let fallbackLocale;
+    if (fallbackMap) {
+      const allMessages = this.store.get('i18n-messages') || {};
+      for (let i = 0; i < fallbackMap.length; i++) {
+        const fbl = fallbackMap[i];
+        if (allMessages[fbl]) {
+          fallbackLocale = fbl;
+          break;
         }
-        return true;
-    }
+      }
+    }
+    return fallbackLocale || defaultLocale || 'en';
+  }
+  /**
+   * @memberof I18n
+   * @param {String} locale
+   * @return {String} locale
+   * @description sets the current i18n locale. This does not change the browser locale.
+   * @example
+   *
+   * import { I18n } from '@ornery/web-components';
+   *
+   * I18n.setLocale('en-US')
+   * console.log(I18n.getLocale()) //'en-US'
+   */
+  setLocale(locale = '') {
+    return this.store.set('i18n-locale', locale);
+  }
+  /**
+   * @memberof I18n
+   * @param {String} locale
+   * @return {String} locale
+   * @description returns the current i18n messages set in the DataManager
+   */
+  getMessages(locale = null) {
+    const allMessages = this.store.get('i18n-messages') || {};
+    if (locale === 'all') {
+      return allMessages;
+    } else {
+      locale = locale || this.getLocale();
+      const fallbackLocale = this.getFallbackLocale();
+      return {
+        ...allMessages[fallbackLocale] || {},
+        ...allMessages[locale] || {},
+      };
+    }
+  }
+  /**
+   * @memberof I18n
+   * @param {Object} values
+   * @return {{state}|*}
+   * @description sets the strings as a whole. This overrides all existing strings.
+   * Use addMessages to add more strings to the existing set.
+   * @example
+   *
+   * import { I18n } from '@ornery/web-components';
+   *
+   * I18n.setMessages({
+   *     'en-US': {
+   *         'translatable.message.name': "I'm a translated string from i18n",
+   *         'tokenized.message': "I have a ${this.color} ${this.animal}"
+   *     }
+   * })
+   */
+  setMessages(values) {
+    const response = this.store.set('i18n-messages', values);
+    return response;
+  }
+  /**
+   * @memberof I18n
+   * @param {{String}|{Object}} locale
+   * @param {Object} newStrings
+   * @description add more strings to the existing locale set.
+   *
+   * @example
+   *
+   * import { I18n } from '@ornery/web-components';
+   * I18n.addMessages('en-US', {
+   *  'translatable.message.name': "I'm a translated string from i18n",
+   *   'tokenized.message': "I have a ${color} ${animal}"
+   * });
+   */
+  addMessages(locale, newStrings) {
+    if (typeof locale !== 'string') {
+      newStrings = locale;
+      locale = this.getLocale();
+    }
+    locale = locale.toLowerCase();
+    const fallbackLocale = this.getFallbackLocale();
+    const existing = this.getMessages('all');
+    existing[locale] = {
+      ...(existing[locale] || {}),
+      ...newStrings,
+    };
+    if (fallbackLocale !== locale) {
+      existing[fallbackLocale] = {
+        ...(existing[fallbackLocale] || {}),
+        ...newStrings,
+      };
+    }
+    this.setMessages(existing);
+  }
 
-    get translate() {
-        return this.getAttribute("key") || this.getAttribute("id");
-    }
+  /**
+   * @memberof I18n
+   * @param {String} key they key of the string to retrieve from the current locale set.
+   * @param {Object} data Optional, The data to process tokens in the string with.
+   * @return {String} Returns the value for the key. Processed if a data context is provided as the second argument.
+   * @description Returns the value for the key. If a context is provided as the second argument for tokens,
+   * the tokens will be replaced in the returned string.
+   * @example
+   *
+   * import { I18n } from '@ornery/web-components';
+   * I18n.addMessages('en-US', {
+   *   'tokenized.message': "I have a ${color} ${animal}"
+   * });
+   *
+   * const stringTestData = {
+   *     color: "grey",
+   *     animal: "monkey"
+   * };
+   * console.log(I18n.get('tokenized.message', stringTestData)) // "I have a grey monkey"
+   */
+  get(key, data = {}) {
+    const context = {
+      ...this.getMessages(),
+      ...data,
+    };
+    return template(getFromObj(key, context), context);
+  }
 
-    attributeChangedCallback(name) {
-        this.update();
-    }
-    
-    update() {
-        const root = this.shadowRoot || this;
-        const context = { ...this.getAttribute("data-values"), ...this.dataset };
-        let newMesage = I18n.get(this.translate, context);
-        if (shouldEncode(newMesage)) {
-            newMesage = encodeHTML(newMesage);
+  /**
+   * @memberof I18n
+   * @param {String} namespace
+   * @param {String} context
+   * @return {Object} Returns all the messages for the given locale. Filtered to namespace if provided.
+   * @description If a namespace is provided, returns all the key value pairs for that
+   * namespace without the namespace in the keys.
+   *
+   * @example
+   *
+   * import { I18n } from '@ornery/web-components';
+   * I18n.addMessages('en-US', {
+   *  'translatable.message.name': "I'm a translated string from i18n",
+   *   'tokenized.message': "I have a ${color} ${animal}"
+   * });
+   *
+   * console.log(I18n.getAll('tokenized', {color: "red", animal: "panda"})) // {"message": "I have a red panda"}
+   */
+  getAll(namespace, context) {
+    if (namespace) {
+      return Object.keys(this.getMessages()).reduce((reducer, key) => {
+        if (key.startsWith(namespace)) {
+          reducer[key.replace(namespace + '.', '')] = this.get(key, context);
         }
-        if (!root.innerHTML) {
-            root.innerHTML = newMesage;
-        } else if (newMesage !== this.translate || newMesage !== root.innerHTML) {
-            root.innerHTML = newMesage;
-        }  
-    }
-
-    connectedCallback() {
-        if (this.useShadow && !this.shadowRoot) this.attachShadow({ mode: "open" });
-        this._i18nListener = DataManager.subscribe((newVals) => {
-            this.update();
-        });
-        const attrObserver = new MutationObserver(() => this.update());
-        attrObserver.observe(this, { attributes: true, childList: this.useShadow });
+        return reducer;
+      }, {});
+    } else {
+      return this.getMessages('all');
     }
+  }
 
-    disconnectedCallback() {
-        if (this._i18nListener) {
-            this._i18nListener.destroy();
-            this._i18nListener = null;
-        }
-    }
-}
-
-if (typeof window !== "undefined" && typeof customElements !== "undefined" && !customElements.get("i18n-message")) {
-    customElements.define("i18n-message", withContext(I18nMessage));
+  subscribe(callback) {
+    return this.store.subscribe(callback);
+  }
 }
 
 module.exports = {
-    I18n,
-    I18nMessage,
+  I18n,
 };

package/src/utils.js

@@ -14,15 +14,15 @@
  *
  * result == 'bar';
  */
-const keyRegexp = /^[\w\-]+(\.[\w\-]+)+$/g
+const keyRegexp = /^[\w-]+(\.[\w-]+)+$/g;
 const getFromObj = (path, obj = {}) => {
-  path = path.trim();
-  if (path != null){
+  path = path && path.trim();
+  if (path != null) {
     if (obj[path] != null) {
       return obj[path];
     } else if (keyRegexp.test(path)) {
       return path.split('.').reduce((res, key) => res[key] != null ? res[key] : path, obj);
-    } 
+    }
   }
   return path;
 };
@@ -44,9 +44,9 @@ const stripES6 = function(expr, context) {
   let result = expr.replace(thisRegex, '');
   let matchArr;
   while (matchArr = nestedES6.exec(result)) {
-      let [wholeMatch, outerMatch, key] = matchArr;
-      const replacement = getFromObj(key, context);
-      result = stripES6(result.replace(outerMatch, replacement).trim(), context);
+    const [, outerMatch, key] = matchArr;
+    const replacement = getFromObj(key, context);
+    result = stripES6(result.replace(outerMatch, replacement).trim(), context);
   }
   return result.replace(es6Regex, (match, $1)=> getFromObj($1, context));
 };
@@ -104,12 +104,12 @@ const template = stripES6;
 const arrayParser = (val, key, params) => {
   let current = params[key];
   if (current) {
-      if (!Array.isArray(current)) {
-          current = [current];
-      }
-      current.push(val);
+    if (!Array.isArray(current)) {
+      current = [current];
+    }
+    current.push(val);
   } else {
-      current = val;
+    current = val;
   }
   return current;
 };
@@ -144,12 +144,12 @@ const toParams = (str, options = {}) => {
   const queryString = parts[1] || '';
   const params = {};
   queryString.split('&').forEach((val) => {
-      const innerParts = val.split('=');
-      if (innerParts.length !== 2) return;
-      const paramKey = decodeURIComponent(innerParts[0]);
-      const paramVal = decodeURIComponent(innerParts[1]);
-      const parser = options[paramKey] || (() => paramVal);
-      params[paramKey] = arrayParser(parser(paramVal, paramKey, params), paramKey, params);
+    const innerParts = val.split('=');
+    if (innerParts.length !== 2) return;
+    const paramKey = decodeURIComponent(innerParts[0]);
+    const paramVal = decodeURIComponent(innerParts[1]);
+    const parser = options[paramKey] || (() => paramVal);
+    params[paramKey] = arrayParser(parser(paramVal, paramKey, params), paramKey, params);
   });
   return params;
 };
@@ -176,11 +176,11 @@ const toParams = (str, options = {}) => {
 const toSearch = (options) => {
   const filtered = Object.entries(options).filter((ent) => !!ent[1]);
   return encodeURI(`?${filtered.map((ent) => {
-      if (Array.isArray(ent[1])) {
-          return ent[1].map((val) => [ent[0], val].join('=')).join('&');
-      } else {
-          return ent.join('=');
-      }
+    if (Array.isArray(ent[1])) {
+      return ent[1].map((val) => [ent[0], val].join('=')).join('&');
+    } else {
+      return ent.join('=');
+    }
   }).join('&')}`);
 };
 
@@ -210,13 +210,13 @@ const toSearch = (options) => {
 const prefixKeys = (obj, prefix) => {
   let keys = [];
   if (Array.isArray(obj)) {
-      keys = obj.map((val, i) => i);
+    keys = obj.map((val, i) => i);
   } else {
-      keys = Object.keys(obj);
+    keys = Object.keys(obj);
   }
   return Object.assign(
       {},
-      ...keys.map((key) => ({[prefix + key]: obj[key]}))
+      ...keys.map((key) => ({[prefix + key]: obj[key]})),
   );
 };
 
@@ -257,16 +257,25 @@ const toDataAttrs = (obj) => {
   return prefixKeys(obj, 'data-');
 };
 const HTMLEncodable = /[\u00A0-\u9999<>]/g;
-const encodeHTML = (stringVal = "") => stringVal.replace(HTMLEncodable, i => `&#${i.charCodeAt(0)};`)
+const encodeHTML = (stringVal = '') => stringVal.replace(HTMLEncodable, (i) => `&#${i.charCodeAt(0)};`);
 
 const withClosing = /<([^>]+?)([^>]*?)>(.*?)<\/\1>/gi;
 const selfClosing = /(<([^>]+)\/>)/ig;
-const shouldEncode = (str) => {
-    return (str || '')
-        .replace(withClosing, '')
-        .replace(selfClosing, '')
-        .trim();
-}
+const shouldEncode = (str) => (str || '').replace(withClosing, '').replace(selfClosing, '').trim();
+
+const toLowerMap = (obj = {}) => {
+  if (Array.isArray(obj)) {
+    return obj.map(toLowerMap);
+  }
+  if (typeof obj === 'string') {
+    return obj.toLowerCase();
+  }
+  return Object.entries(obj).reduce((acc, [key, val]) => {
+    const lck = key.toLowerCase();
+    acc[lck] = toLowerMap(val);
+    return acc;
+  }, {});
+};
 
 module.exports = {
   getFromObj,
@@ -278,5 +287,6 @@ module.exports = {
   prefixKeys,
   toDataAttrs,
   shouldEncode,
-  encodeHTML
+  encodeHTML,
+  toLowerMap,
 };