@akc42/app-utils 3.1.5

package/README.md

@@ -0,0 +1,172 @@
+# app-utils
+General utilities that I use for building SPAs 
+
+New from release 3.0
+
+config-promise is a function which returns both a promise for the config AND adds the config items to sessionStorage.
+
+debug has been replaced with a version that works differently and is incompatible with our previous usage (hence the bump to version 3)
+
+# app-keys
+
+    `keys` is a module that provides keyboard support by normalising key
+    handling amongst browsers and providing a simple interface that can be used
+    by the application.  Each keyboard usage request the user create a new
+    instance of the AppKeys class passing the key target in to the constructor.
+    This module will add and event handler for itself to that key target for the
+    keydown event.  On that event it will parse the key combinations pressed and
+    fire a "key-pressed" event on the target.
+
+    The key grammer is of the form `[<modifier>+]<key>[:<event>]` and each of these is
+    space separated.  optional `<modifiers>` (default none) are shift ctrl alt meta, and the optional 
+    `<events>` are keydown and keyup (keydown is used as default) 
+
+    To allow a using module the freedom to connect and disconnect to the dom, we
+    provide two methods to be called during the disconnectCallback and
+    connectCallback to disconnect and reconnect to this event
+
+    There are two models of using this, the first, shown below allows an element to add
+    the keys event to document body.  This is good for pages that are swapped in and
+    out by a paging mechanism so that only one page is in the dom at a given time This is
+    good if only one handler is needed for the entire page.
+
+    NOTE: If you take this approach limit the keys to non function keys as the main app, with its main 
+    menu may add a handler for the function keys and both menus, and any actions you choose would run at the same time.
+
+```
+    constructor() {
+      super();
+      ...
+      this._keyPressed = this._keyPressed.bind(this);
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      document.body.addEventListener('key-pressed', this._keyPressed);
+      if (this.keys === undefined) {
+        this.keys = new AppKeys(document.body, 'Enter Esc'); //list the keys you want to identify (see comment above for grammer)
+      } else {
+        this.keys.connect();
+      }
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.keys.disconnect();
+      document.body.removeEventListener('key-pressed', this._keyPressed);
+    }
+    _keyPressed(e) {
+      e.detail is an string containing the [<modifier>+]<key> combination from one you requested
+    }
+```
+
+    The second way of using this, better for when you don't want to react unless a particular area of the page has focus, or
+    if there are different areas of the page needing the respond depending which area
+    has focus.  This is to create the AppKeys object in the firstUpdated function.  Here is a possible example (just one area)
+
+```
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.keys !== undefined) this.keys.connect();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.keys.disconnect();
+  }
+  firstUpdated() {
+    this.target = this.shadowRoot.querySelector('#keyreceive');
+    this.keys = new AppKeys(this.target, 'Enter');  //replace 'Enter' with space separated string of keys
+  }
+```  
+  Then on the dom element in the Render function
+
+  `<div id="keyreceive" @keys-pressed=${this._keyPressed}>Contents</div>`
+
+  NOTE: There is no need to bind this._keyPressed to this (as shown in the first example).  Lit manages it.
+
+  If for any reason you want more info about the keyPress, access
+  `this.keys.lastPressed`, and it will return the complete binding object
+
+
+# config-promise
+
+  This module provides two functions:-
+
+  1. This first is the default function which when called returns a promise. 
+  2. a `mockConfig` function which can be used by a test harness to provide the promise returned by the default function
+  
+  If a request is made for the promise and it hasn't yet been created a new promise is made with a fetch get request to `/api/config`
+  to retrieve the configuration data.  If the server is down, this request will continue attempting to get the value once a minute ad
+  infinitum.
+
+  The configuration data is returned to resolve the promise, but local session
+  storage also has one item added to it for each of the first level properties
+  of this data.  If the property is a String, this is stored in the session
+  storage as is, otherwise the value is passed through `JSON.stringify` and that is stored. 
+
+# csv
+
+  the modules default export is a function which can be called with a name and optionally a parameters object.  The name is added to `/api/csv/` to make a download request and if they exist the parameters object is turned into a query string.  The response from that uri is downloaded (expected to be a csv file).
+
+# debug
+
+The purpose of this module is to provide a debugable capability which can be
+  dynamically switched on and off browser by setting a key in the config
+  returned by the server. It will post request to `/api/log` url with an
+  `application/json` body part containing message, topic and gap, where message is
+  the concatenation of the debug parameters separated by space, topic is the
+  topic of this debug message and gap is the number of milliseconds since the
+  last debug message with the same topic.
+
+  Topic data is held in a map, so this module can be used in multiple modules in
+  the client and if its the same topic then the gap will be since the last call
+  from **any** module.
+
+  To use the debug function in your code, import this module then set the topic
+  as shown.
+
+  import Debug from 'debug.js';
+
+  const debug = Debug('topic') topic should only contain the characters a-z or
+  A-Z as is converted to lowercase.
+
+  debug(..messages) //messages will be concatenated by space
+
+  the debug function will only log the message if config.debug (see
+  config-promise) is set to a string which is a comma separated list of topics
+  and that list has the topic for this debug call in it.
+
+  **Note**: the debug function checks with the server (via a debugconf api call)
+  to see if the topic is enabled.  This is then cached for a minute, so any
+  calls around the same time will use the reply.  This allows the server to
+  change what topics are available and for the client side to quickly find if it
+  should now start sending message
+
+# dom-host
+
+  the default function of this module is called with a single parameter (normally `this` inside a custom element)
+  and it finds the parent.  Its useful for custom elements to sit at the top level of the custom element above and listen for
+  events bubbling up from below.  It uses this function to find the element to add an event listener to.
+
+# master-tab-promise
+
+the default function returns a promise, which when resolves will tell you if you are the first (and therefore master) tab in a particular application.
+
+if the master tab closes an custom Event 'master-close' is dispatched on the window.  You can use that to recheck the promise to see if you (or perhaps some other tab also still open is now master);
+
+
+# pdf
+
+the modules default export is a function which can be called with a name and optionally a parameters object.  The name is added to `/api/pdf/` to post a message to the server, expecting it to stream a precreated, or created on the fly pdf document.  This is opened in a new window.
+
+# post-api
+
+Provides a wrapper found the `fetch` api with error handling and built it post message support to a url prefixed with `/api/`.  
+
+# submit-function
+
+Acts as the on-submit handler for a form.  But instead of allowing the form to send itself it creates an ajax request with all the correct parameters.  
+In doing this it can traverse inside custom elements looking for input elements. It will also check for custom elements and if they have both a name and value property if can pretend to be in input.  Also slots are also traversed for all assigned nodes.
+
+
+# switch-path
+
+Changed window location based on parameters provided

package/app-keys.js

@@ -0,0 +1,294 @@
+/**
+@licence
+    Copyright (c) 2020 Alan Chandler, all rights reserved
+
+    This file is part of @akc42/app-utils.
+
+    @akc42/app-utils is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    @akc42/app-utils is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with @akc42/app-utils.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+/*
+    `keys` is a module that provides keyboard support by normalising key
+    handling amongst browsers and providing a simple interface that can be used
+    by the application.  Each keyboard usage request the user create a new
+    instance of the AppKeys class passing the key target in to the constructor.
+    This module will add and event handler for itself to that key target for the
+    keydown event.  On that event it will parse the key combinations pressed and
+    fire a "key-pressed" event on the target.
+
+    The key grammer is of the form [<modifier>+]<key>[:<event>] and each of these is
+    space separated.  optional <modifiers> (default none) are shift ctrl alt meta, and the optional 
+    <events> are keydown and keyup (keydown is used as default) 
+
+    To allow a using module the freedom to connect and disconnect to the dom, we
+    provide two methods to be called during the disconnectCallback and
+    connectCallback to disconnect and reconnect to this event
+
+    There are two models of using this, the first, shown below allows an element to add
+    the keys event to document body.  This is good for pages that are swapped in and
+    out by a paging mechanism so that only one page is in the dom at a given time This is
+    good if only one handler is needed for the entire page.
+
+    NOTE: If you take this approach limit the keys to non function keys as the main app, with its main 
+    menu may add a handler for the function keys and both menus, and any actions you choose would run at the same time.
+
+    constructor() {
+      super();
+      ...
+      this._keyPressed = this._keyPressed.bind(this);
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      document.body.addEventListener('key-pressed', this._keyPressed);
+      if (this.keys === undefined) {
+        this.keys = new AppKeys(document.body, 'Enter Esc'); //list the keys you want to identify (see comment above for grammer)
+      } else {
+        this.keys.connect();
+      }
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.keys.disconnect();
+      document.body.removeEventListener('key-pressed', this._keyPressed);
+    }
+    _keyPressed(e) {
+      e.detail is an string containing the [<modifier>+]<key> combination from one you requested
+    }
+
+    The second way of using this, better for when you don't want to react unless a particular area of the page has focus, or
+    if there are different areas of the page needing the respond depending which area
+    has focus.  This is to create the AppKeys object in the firstUpdated function.  Here is a possible example (just one area)
+
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.keys !== undefined) this.keys.connect();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.keys.disconnect();
+  }
+  firstUpdated() {
+    this.target = this.shadowRoot.querySelector('#keyreceive');
+    this.keys = new AppKeys(this.target, 'Enter');  //replace 'Enter' with space separated string of keys
+  }
+  Then on the dom element in the Render function
+  <div id="keyreceive" @keys-pressed=${this._keyPressed}>Contents</div>
+
+  NOTE: There is no need to bind this._keyPressed to this (as in the first example).  Lit manages it.
+
+  If for any reason you want more info about the keyPress, access
+  this.keys.lastPressed, and it will return the complete binding object
+
+  NOTE: I considered making this a mixin to avoid some of this verbosity, but decided in 
+  the end the extra was worth it for the flexibility of the different use cases.
+*/
+/*
+      Initial constants are taken from iron-a11y-keys behavior with the following licence.  This same licences applies to those portions.
+
+      Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+      This code may only be used under the BSD style license found at
+      http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+      http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+      found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+      part of the polymer project is also subject to an additional IP rights grant
+      found at http://polymer.github.io/PATENTS.txt
+*/
+
+/**
+ * Special table for KeyboardEvent.keyCode. only used when KeyBoardEvent.key can't be
+ *
+ * Values from:
+ * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent.keyCode#Value_of_keyCode
+ */
+
+const KEY_CODE = {
+  8: 'backspace',
+  9: 'tab',
+  13: 'enter',
+  27: 'esc',
+  33: 'pageup',
+  34: 'pagedown',
+  35: 'end',
+  36: 'home',
+  32: 'space',
+  37: 'left',
+  38: 'up',
+  39: 'right',
+  40: 'down',
+  46: 'del',
+  106: '*'
+};
+/**
+ * MODIFIER_KEYS maps the short name for modifier keys used in a key
+ * combo string to the property name that references those same keys
+ * in a KeyboardEvent instance.
+ */
+
+const MODIFIER_KEYS = {
+  'shift': 'shift',
+  'ctrl': 'control',
+  'alt': 'alt',
+  'meta': 'meta'
+};
+/**
+ * KeyboardEvent.key is mostly represented by printable character made by
+ * the keyboard, with unprintable keys labeled nicely.
+ *
+ * However, on OS X, Alt+char can make a Unicode character that follows an
+ * Apple-specific mapping. In this case, we fall back to .keyCode.
+ */
+
+const KEY_CHAR = /[a-z0-9*]/;
+
+/**
+ * Matches arrow keys in Gecko 27.0+
+ */
+
+const ARROW_KEY = /^arrow/;
+/**
+ * Matches space keys everywhere (notably including IE10's exceptional name
+ * `spacebar`).
+ */
+
+const SPACE_KEY = /^space(bar)?/;
+/**
+ * Matches ESC key.
+ *
+ * Value from: http://w3c.github.io/uievents-key/#key-Escape
+ */
+
+const ESC_KEY = /^escape$/;
+
+class AppKeys {
+  constructor(target, keys, stop) {
+    this.stop = stop; //marker to say stop propagation;
+    if (!(target instanceof HTMLElement)) throw new Error('AppKeys required an HTML Element as target');
+    this.target = target;
+    this.lastPressed = null;
+    const keyArray = keys.split(' ');
+    this.eventBindings = {};
+    for (let keyString of keyArray) {
+      const [keyCombo, event] = keyString.split(':');
+      const keyBinding = { combo: keyCombo, modifiers: [], hasModifiers: false };
+      const keyComboArray = keyCombo.split('+');
+      keyBinding.key = keyComboArray.pop();
+      if (keyBinding.key.toLowerCase() in MODIFIER_KEYS) {
+        //we asked for a modifier so push it back
+        keyComboArray.push(keyBinding.key);
+      }
+      if (keyComboArray.length === 0) {
+        //There were no modifiers, but what if we want a single upperCase char
+        if (keyBinding.key.length === 1 && keyBinding.key.toLowerCase() !== keyBinding.key) {
+          keyBinding.hasModifiers = true;
+          keyBinding.modifiers.push('shift');
+        }
+      } else {
+        for (let modifier of keyComboArray) {
+          modifier = modifier.toLowerCase();
+          if (modifier in MODIFIER_KEYS) {
+            keyBinding.hasModifiers = true;
+            keyBinding.modifiers.push(modifier);
+          }
+        }
+      }
+      keyBinding.key = keyBinding.key.toLowerCase();
+      if (this.eventBindings[event ? event : 'keydown'] === undefined) {
+        this.eventBindings[event ? event : 'keydown'] = { keyBindings: [] };
+      }
+      this.eventBindings[event ? event : 'keydown'].keyBindings.push(keyBinding);
+    }
+    this._bindHandlers();
+  }
+  connect() {
+    if (!this.handlersBound) this._bindHandlers();
+  }
+  disconnect() {
+    if (this.handlersBound) {
+      for (let event in this.eventBindings) {
+        this.target.removeEventListener(event, this.eventBindings[event].boundHandler);
+      }
+      this.handlersBound = false;
+
+    }
+  }
+  _bindHandlers() {
+    for (let event in this.eventBindings) {
+      this.eventBindings[event].boundHandler = this._keyHandler.bind(this, this.eventBindings[event].keyBindings);
+      this.target.addEventListener(event, this.eventBindings[event].boundHandler);
+    }
+    this.handlersBound = true;
+
+  }
+  _keyHandler(keyBindings, e) {
+    if (e.defaultPrevented) return;
+    const key = e.key.toLowerCase();
+    let validKey = '';
+
+    if (key === ' ' || SPACE_KEY.test(key)) {
+      validKey = 'space';
+    } else if (ESC_KEY.test(key)) {
+      validKey = 'esc';
+    } else if (key.length == 1) {
+      if (KEY_CHAR.test(key)) {
+        validKey = key;
+      } else {
+        if (e.keyCode) {
+          if (e.keyCode in KEY_CODE) {
+            validKey = KEY_CODE[e.keyCode];
+          }
+        }
+      }
+    } else if (ARROW_KEY.test(key)) {
+      validKey = key.replace('arrow', '');
+    } else if (key == 'multiply') {
+      // numpad '*' can map to Multiply on IE/Windows
+      validKey = '*';
+    } else {
+      validKey = key;
+    }
+    for (let binding of keyBindings) {
+      if (binding.hasModifiers) {
+        let modifierNotFound = false;
+        for (let modifier of binding.modifiers) {
+          if (!e[modifier + 'Key']) {
+            modifierNotFound = true;
+            break;
+          }
+        }
+        if (modifierNotFound) return;  //didn't have the right combination of modifiers
+        if (binding.key in MODIFIER_KEYS) {
+          //we only wanted the modifiers so if our key IS the modifier we wanted
+          if (MODIFIER_KEYS[binding.key] === validKey) {
+            this.lastPressed = binding;
+            if (this.stop) e.stopPropagation();
+            if (!this.target.dispatchEvent(new CustomEvent('key-pressed', {bubbles: true, composed: true, cancelable: true, detail: binding.combo}))) {
+              e.preventDefault();
+            }
+            return;
+          }
+        }
+      }
+      if (binding.key === validKey) {
+        this.lastPressed = binding
+        if (this.stop) e.stopPropagation();
+        if (!this.target.dispatchEvent(new CustomEvent('key-pressed', { bubbles: true, composed: true, cancelable: true, detail: binding.combo }))) {
+          e.preventDefault();
+        }
+        return;
+      }
+    }
+  }
+}
+export default AppKeys;

package/config-promise.js

@@ -0,0 +1,72 @@
+/**
+@licence
+    Copyright (c) 2020 Alan Chandler, all rights reserved
+
+    This file is part of @akc42/app-utils.
+
+    @akc42/app-utils is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    @akc42/app-utils is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with @akc42/app-utils.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+let configPromise;
+
+export function mockConfig(promise) {
+  configPromise = promise;
+}
+
+async function config() {
+  if (configPromise === undefined) {
+    let resolved = false;
+    let resolver;
+    configPromise = new Promise(accept => resolver = accept);
+    let text;
+    let config;
+    while (!resolved) {
+      try {
+        const response = await window.fetch('/api/config', { method: 'get' })
+        if (!response.ok) throw new CustomEvent('api-error', { composed: true, bubbles: true, detail: response.status });
+        text = await response.text();
+        config = JSON.parse(text); 
+        /* 
+          some uses of this put the config in sessionStorage, but that only works if every config value is a string
+          so we check if they are a string, otherwise we stringify them
+        */
+        for (const p in config) {
+          const v = config[p];
+          if (typeof v === 'string') {
+            sessionStorage.setItem(p, v);
+          } else {
+            sessionStorage.setItem(p,JSON.stringify(v));
+          }
+        }
+        resolver(config);
+        resolved = true;
+      } catch (err) {
+        if (err.detail === 502) {
+          //server down so wait a minute and try again;
+          await new Promise(accept => {
+            setTimeout(accept, 60000);
+          });
+        } else {
+          if (err.type === 'api-error') throw err; //just throw whatever error we had
+          //we failed to parse the json - the actual code should be in the text near the end;
+          throw new CustomEvent('api-error', { composed: true, bubbles: true, detail: parseInt(text.substr(-6, 3), 10) });
+        }
+      }
+    }
+  }
+  return configPromise;
+}
+
+
+export default config;

package/csv.js

@@ -0,0 +1,37 @@
+/**
+@licence
+    Copyright (c) 2021 Alan Chandler, all rights reserved
+
+    This file is part of @akc42/app-utils.
+
+    @akc42/app-utils is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    @akc42/app-utils is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with @akc42/app-utils.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import {generateUri} from './switch-path.js';
+const link = document.createElement('a');
+link.setAttribute('download', null);
+
+const csv = (url, params) => {
+  let href;
+  if (typeof url == 'string') {
+    href = generateUri(`/api/csv/${url}`, params ?? {});
+  } else {
+    //we assume it is a URL object
+    href = url.href;
+  }
+  link.setAttribute('href', href);
+  link.click();
+};
+
+export default csv;

package/debug.js

@@ -0,0 +1,109 @@
+/**
+@licence
+    Copyright (c) 2021 Alan Chandler, all rights reserved
+
+    This file is part of @akc42/app-utils.
+
+    @akc42/app-utils is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    @akc42/app-utils is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with @akc42/app-utils.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+/*
+  The purpose of this module is to provide a debugable capability which can be
+  dynamically switched on and off browser by setting a key in the config
+  returned by the server. It will post request to '/api/log' url with
+  application/json body part containing message, topic and gap, where message is
+  the concatenation of the debug parameters separated by space, topic is the
+  topic of this debug message and gap is the number of milliseconds since the
+  last debug message with the same topic.
+
+  Topic data is held in a map, so this module can be used in multiple modules in
+  the client and if its the same topic then the gap will be since the last call
+  from ANY module.
+
+  To use the debug function in your code, import this module then set the topic
+  as shown.
+
+  import Debug from 'debug.js';
+
+  const debug = Debug('topic') topic should only contain the characters a-z or
+  A-Z as is converted to lowercase.
+
+  debug(..messages) //messages will be concatenated by space
+
+  the debug function will only log the message if config.debug (see
+  config-promise) is set to a string which is a comma separated list of topics
+  and that list has the topic for this debug call in it.
+
+  NOTE: It is normally expected for the server to provide a mechanism to update
+  the config before it is returned and for the client to be restarted to enable
+  the appropriate debug topics, an alternative could be for client side function
+  to use the `mockConfig` call to replace the promise with one which contained a
+  different list of topics. debug checks the list of topics on every call so
+  would dynamically pick up the changes
+
+*/
+
+const topicMap = new Map();
+
+import api from './post-api.js';
+
+function Debug (t) {
+  if (typeof t !== 'string' || t.length === 0 || !/^[a-zA-Z]+$/.test(t)) {
+    console.error('Debug requires topic which is a non zero length string of only letters', t, 'Received');
+    throw new Error('Invalid Debug Topic');
+  }
+  const tl = t.toLowerCase(); 
+
+  if (topicMap.has(tl) ) {
+    const topic = topicMap.get(tl);
+    return topic.debug;
+  }
+
+  const topicHandler = {
+    topic: tl,
+    timestamp: new Date().getTime(),
+    expires: 0, //when our knowledge of enabled expires
+    enabled: false, //is this topic enabled
+    debug: async function (...args) {
+      //do time calc before potential delay to see if we are enabled
+      const now = new Date().getTime();
+      const gap = now - this.timestamp;
+      this.timestamp = now;
+      if (now > this.expires) {
+        //do this first so following requests don't try to find out again whilst I am checking, wasting calls
+        this.expires = now + 60000; 
+        //expired so find out if topic is enabled
+        this.enabled = await api(`debugconf/${this.topic}`);
+
+      }
+      if (this.enabled) {
+        const message = args.reduce((cum, arg) => {
+          return `${cum} ${arg}`.trim();
+        }, '');
+        console.log(`+${gap}ms`, this.topic, message);
+        const blob = new Blob([JSON.stringify({
+          message: message,
+          gap: gap
+        })], { type: 'application/json' })
+
+        navigator.sendBeacon(`/api/debuglog/${this.topic}`, blob);
+      }
+    }
+  }
+  topicHandler.debug = topicHandler.debug.bind(topicHandler);
+  topicMap.set(topicHandler.topic, topicHandler);
+  return topicHandler.debug
+}
+
+export default Debug;