@akc42/app-utils 3.1.2 → 3.2.0

package/README.md

@@ -134,13 +134,9 @@ The purpose of this module is to provide a debugable capability which can be
   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 a client side
-  function to use the `mockConfig` call to replace the promise with one which
-  contained a different list of topics. `debug` (the function returned by the
-  call to `Debug('topic')`) checks the list of topics on every call so would
-  dynamically pick up the changes
+  **Note**: the debug function checks with the sessionStorage.getItem('debug) (via an await for the Config Promise)
+  to see if the topic is enabled (assumes the result is a ':' separated string of topics).  This allows the server to
+  change what topics are available via the config api call.
 
 # dom-host
 

package/debug.js

@@ -53,10 +53,11 @@
   would dynamically pick up the changes
 
 */
+import config from './config-promise.js';
 
 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)) {
@@ -64,7 +65,6 @@ function Debug (t) {
     throw new Error('Invalid Debug Topic');
   }
   const tl = t.toLowerCase(); 
-  let timestamp = new Date().getTime();
   if (topicMap.has(tl) ) {
     const topic = topicMap.get(tl);
     return topic.debug;
@@ -73,26 +73,34 @@ function Debug (t) {
   const topicHandler = {
     topic: tl,
     timestamp: new Date().getTime(),
-    debug: function (...args) {
-      api(`debugconf/${this.topic}`).then(found => {
-        if (found) {
-          const message = args.reduce((cum, arg) => {
-            return `${cum} ${arg}`.trim();
-          }, '');
-          const now = new Date().getTime();
-          const gap = now - this.timestamp;
-          this.timestamp = now;
-          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);
+    defined: false, //has the config been defined yet
+    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 (!this.defined) {
+        await config(); 
+        this.defined = true;
+        const debugConf = sessionStorage.getItem('debug');
+        if (debugConf) {
+          const topics = debugConf.split(':');
+          if (topics.includes(this.topic)) this.enabled = true;
         }
-
-      });
-
+      }
+      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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akc42/app-utils",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "General Utilities for SPAs",
   "exports": {
     ".": "./*.js"

package/submit-function.js

@@ -75,11 +75,14 @@ export default function submit(e) {
   }
   const params = {};
   if (checkLevel(target, params)) {
-    document.body.dispatchEvent(new CustomEvent('wait-request', {detail: true }));
-    api(target.getAttribute('action'), params).then(response => {
-      document.body.dispatchEvent(new CustomEvent('wait-request', {detail: false }));
-      target.dispatchEvent(new CustomEvent('form-response', { composed: true, bubbles: true, detail: response }));
-    });
+    const action = target.getAttribute('action')
+    if (target.dispatchEvent(new CustomEvent('form-submitting', { cancelable:true,  composed: true, bubbles: true, detail: params}))) {
+      document.body.dispatchEvent(new CustomEvent('wait-request', {detail: true }));
+      api(action, params).then(response => {
+        document.body.dispatchEvent(new CustomEvent('wait-request', {detail: false }));
+        target.dispatchEvent(new CustomEvent('form-response', { composed: true, bubbles: true, detail: response }));
+      });
+    }
     return params;
   } else {
     target.dispatchEvent(new CustomEvent('form-response', { composed: true, bubbles: true, detail: null }));