Updated

Author: djthorpe

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    },
+    "eslint.validate": [
+        "javascript"
+    ]
+}

html/index.html

@@ -36,18 +36,29 @@ <h1>Tests</h1>
             "arr": "[]StrModel",
             "override": "string",
         });
-        
-        var obj = new KeyModel({ _id: "[this is the key]", map: { a: 1, b: 2 }, arr: [ "a", "b" ], override: "not done" });
-        obj.$type.forEach((v,k) =>{
-            console.log(`${k} => `,v);
+
+        var obj = new KeyModel({ _id: "[this is the key]", map: { a: 1, b: 2 }, arr: ["a", "b"], override: "not done" });
+        obj.$type.forEach((v, k) => {
+            console.log(`${k} => `, v);
+        });
+        console.log("className=", obj.$className);
+        console.log("getClassName=", obj.getClassName());
+        console.log("str=", obj.str);
+        console.log("map=", obj.map);
+        console.log("arr=", obj.arr);
+        console.log("override=", obj.override);
+        console.log("toString=", "" + obj);
+
+        var provider = new mvc.Provider();
+        provider.addEventListener('mvc.provider.completed', (sender) => {
+            console.log("Completed", sender);
+        });
+        provider.addEventListener('mvc.provider.error', (sender, error) => {
+            console.log("Error", error);
+        });
+        provider.fetch('https://rpi4b.mutablelogic.com/', {
+            mode: 'no-cors',
         });
-        console.log("className=",obj.$className);
-        console.log("getClassName=",obj.getClassName());
-        console.log("str=",obj.str);
-        console.log("map=",obj.map);
-        console.log("arr=",obj.arr);
-        console.log("override=",obj.override);
-        console.log("toString=","" + obj);
     </script>
 </body>
 

js/events.js

@@ -0,0 +1,23 @@
+// Emitter class
+
+export default class Emitter {
+  constructor() {
+    this.$listeners = new Map();
+  }
+
+  addEventListener(type, fn) {
+    if (!this.$listeners.has(type)) {
+      this.$listeners.set(type, []);
+    }
+    this.$listeners.get(type).push(fn);
+  }
+
+  dispatchEvent(type, ...args) {
+    const listeners = this.$listeners.get(type);
+    if (listeners) {
+      listeners.forEach((fn) => {
+        fn(...args);
+      });
+    }
+  }
+}

js/index.js

@@ -2,7 +2,8 @@ import Model from './model';
 import View from './view';
 import Provider from './provider';
 import Error from './error';
+import Emitter from './events';
 
 export {
-  Model, View, Provider, Error,
+  Model, View, Provider, Error, Emitter,
 };

js/provider.js

@@ -1,59 +1,62 @@
 // Provider class to be subclassed by an actual provider
 
 import Error from './error';
+import Emitter from './events';
 
 // ////////////////////////////////////////////////////////////////////////////
 // CONSTANTS
 
-const EVENT_COMPLETED = "mvc.provider.completed";
-const EVENT_ERROR = "mvc.provider.error";
+const EVENT_ROOT = 'mvc.provider';
+const EVENT_COMPLETED = `${EVENT_ROOT}.completed`;
+const EVENT_ERROR = `${EVENT_ROOT}.error`;
 
 // ////////////////////////////////////////////////////////////////////////////
 // PROVIDER CLASS
 
-export default class Provider {
+export default class Provider extends Emitter {
   constructor(root) {
-    this.$root = root;
+    super();
+    this.$root = root || '';
   }
-  
-  $fetch(url, req, userInfo) {
-    var status;
-    window.fetch(this.$root + url, req).then(response => {
-      status = response;
-      switch (status.headers.get("Content-Type").split(";")[0]) {
-        case "application/json":
-        case "text/json":
-          return response.json();
-        case "text/plain":
-          return response.text();
-        default:
-          return response.blob();
-      }
-    }).then(data => {
-      if (!status.ok) {
-        if (typeof (data) == "object" && data.reason) {
-          throw new Error(data.reason, data.code);
+
+  fetch(url, req, userInfo) {
+    let status;
+    fetch(this.$root + url, req)
+      .then((response) => {
+        status = response;
+        const contentType = response.headers ? response.headers.get('Content-Type') || '' : '';
+        switch (contentType.split(';')[0]) {
+          case 'application/json':
+          case 'text/json':
+            return response.json();
+          case 'text/plain':
+            return response.text();
+          default:
+            return response.blob();
+        }
+      })
+      .then((data) => {
+        if (!status.ok) {
+          if (typeof (data) === 'object' && data.reason) {
+            throw new Error(data.reason, data.code);
+          } else {
+            throw new Error(status.statusText, status.status);
+          }
+        } else if (typeof (data) === 'object' && Array.isArray(data)) {
+          this.$array(data);
+        } else {
+          this.$object(data);
+        }
+      })
+      .then(() => {
+        this.dispatchEvent(EVENT_COMPLETED, this, userInfo);
+      })
+      .catch((error) => {
+        if (error instanceof Error) {
+          this.dispatchEvent(EVENT_ERROR, this, error, userInfo);
         } else {
-          throw new Error(status.statusText, status.status);
+          throw error;
         }
-      } else if (typeof (data) == "object" && Array.isArray(data)) {
-        this.$array(data);
-      } else {
-        this.$object(data);
-      }
-    }).then(() => {
-      document.dispatchEvent(new Event(EVENT_COMPLETED, {
-        userInfo: userInfo,
-      }));
-    }).catch(error => {
-      if (error instanceof Error) {
-        document.dispatchEvent(new Event(EVENT_ERROR, {
-          userInfo: userInfo,
-          error: error,
-        }));
-      } else {
-        throw error;
-      }
-    });
+      });
   }
 }