glib-web 3.0.2 → 3.0.4

package/utils/http.js

@@ -33,7 +33,8 @@ export default class {
     const formData = new FormData();
     var params = data || {};
     for (const key in params) {
-      formData.append(key, params[key]);
+      // formData.append(key, params[key]);
+      this._populateFormData(formData, key, params[key]);
     }
 
     if (needCsrfToken && !Type.isString(params["authenticity_token"])) {
@@ -42,8 +43,33 @@ export default class {
     return formData;
   }
 
+  static _populateFormData(formData, key, value) {
+    if (GLib.type.isArray(value)) {
+      for (const item of value) {
+        this._populateFormData(formData, `${key}[]`, item);
+      }
+    } else if (GLib.type.isObject(value)) {
+      for (const innerKey in value) {
+        this._populateFormData(
+          formData,
+          `${key}[${innerKey}]`,
+          value[innerKey]
+        );
+      }
+    } else {
+      formData.append(key, value);
+    }
+  }
+
   static load(properties, component) {
-    const url = new URL(properties["url"]);
+    const urlString = properties["url"];
+    let url;
+    try {
+      url = new URL(urlString);
+    } catch (e) {
+      console.warn("Invalid URL", urlString);
+      throw e;
+    }
     const domainMatched = window.location.hostname == url.hostname;
 
     // If this is an external domain, we rely on `onUnload()` instead.
@@ -120,14 +146,14 @@ export default class {
       Utils.http.forceComponentUpdate(() => {
         vueApp.page = page
         const redirectUrl = Utils.url.htmlUrl(response.url);
-        Utils.history.updatePage(page, redirectUrl);
+        Utils.history.updatePage(vueApp.page, redirectUrl);
 
         GLib.action.execute(properties["onReload"], component);
       });
     });
   }
 
-  static execute(properties, methodName, component, jsonHandler) {
+  static execute(properties, methodName, component, jsonHandler, errorHandler) {
     this.startIndicator(component);
 
     // `fetch()` only supports uppercase
@@ -138,18 +164,26 @@ export default class {
       url = Utils.url.appendParams(url, body);
       body = null;
     }
-    console.log(`${method} ${url}`);
+    const silent = properties.silent;
+    if (!silent) {
+      console.debug(`${method} ${url}`);
+    }
 
     const request = new HttpRequest();
     let response = null;
     const vm = this;
 
     const analyticsHeaders = this.analyticsHeaders(component);
+    const headers = Object.assign(
+      { Accept: "text/html" },
+      analyticsHeaders,
+      GLib.settings.headerAugmenter(url, method)
+    );
 
     fetch(url, {
       method: method,
       body: body,
-      headers: Object.assign({ Accept: "text/html" }, analyticsHeaders),
+      headers: headers,
       // Make sure to pass cookies for same origin URLs.
       // Needed for some browsers, e.g. Edge and Android's native.
       credentials: "same-origin",
@@ -158,24 +192,36 @@ export default class {
       .then(res => {
         vm.stopIndicator(component);
 
+        response = res;
         if (res.status >= 500) {
           throw "Server error";
         } else if (res.status >= 400) {
           throw "Not accessible";
         } else {
-          response = res;
           return res.json();
         }
       })
       .then(data => {
-        console.debug("Success", data);
+        if (!silent) {
+          console.debug("Success", data);
+        }
         jsonHandler(data, response);
       })
       .catch(error => {
         vm.stopIndicator(component);
+
         if (!request.canceled) {
-          console.error("Error:", error);
-          Utils.launch.snackbar.error(error, component);
+          const message = error.toString();
+
+          console.error("Error:", message);
+
+          if (errorHandler) {
+            errorHandler(error, response);
+          } else {
+            if (!silent) {
+              Utils.launch.snackbar.error(message, component);
+            }
+          }
         } else {
           console.info("Canceled");
         }

package/utils/private/ws.js

@@ -9,13 +9,13 @@ export default class {
     const ws = vueApp.webSocket;
     Utils.type.ifObject(payload.wsHeader, header => {
       Object.assign(ws.header, header);
-      console.log("New header: ", ws.header);
+      console.debug("New header: ", ws.header);
     });
 
     const actionName = payload.action;
     if (actionName.startsWith("component/")) {
       const methodName = actionName.replace(/^component\//, "");
-      console.log(`Executing component action: ${methodName}`);
+      console.debug(`Executing component action: ${methodName}`);
       component[`action_${methodName}`](payload);
     } else {
       GLib.action.execute(payload, component);

package/utils/public.js

@@ -5,11 +5,8 @@ import Type from "./type";
 import Form from "./form";
 import Component from "./component";
 import Hash from "./hash";
-import Queue from "./queue";
 import Settings from "./settings";
 
-const _queue = new Queue();
-
 export default class {
   static get action() {
     return Action;
@@ -35,7 +32,4 @@ export default class {
   static get settings() {
     return Settings;
   }
-  static get queue() {
-    return _queue;
-  }
 }

package/utils/settings.js

@@ -5,8 +5,12 @@ class MutableSettings {
     this.reactive = true;
     this.themes = {};
     this.gtagId = null;
-    this.errorHandler = err => {
-      console.error(err.message);
+    this.errorHandler = (err, message) => {
+      console.error(message || err.message);
+    };
+    this.headerAugmenter = (_url, _method) => {
+      // Set a custom augmenter to add custom HTTP headers.
+      return {};
     };
   }
 }
@@ -26,6 +30,10 @@ export default class ImmutableSettings {
     return settings.errorHandler;
   }
 
+  static get headerAugmenter() {
+    return settings.headerAugmenter;
+  }
+
   static get env() {
     return process.env.NODE_ENV;
   }

package/actions/commands/enqueue.js

@@ -1,17 +0,0 @@
-// import Hash from "../../utils/hash";
-
-export default class {
-  // async executeJob(spec, component) {
-  //   console.log("Waiting for next job1...");
-  //   GLib.action.execute(spec.onExecute, component);
-  //   await this.sleep(2000);
-  //   console.log("Waiting for next job2...");
-  // }
-  execute(spec, component) {
-    GLib.queue.enqueue(() => {
-      GLib.action.execute(spec.onExecute, component);
-      // console.log("Waiting for next job0...");
-      // this.executeJob(spec, component);
-    });
-  }
-}

package/utils/queue.js

@@ -1,102 +0,0 @@
-// From https://stackoverflow.com/questions/47157428/how-to-implement-a-pseudo-blocking-async-queue-in-js-ts
-
-// const jobQueue = [];
-export default class {
-  constructor() {
-    // invariant: at least one of the arrays is empty
-    this.resolvers = [];
-    this.promises = [];
-  }
-  _add() {
-    this.promises.push(
-      new Promise(resolve => {
-        this.resolvers.push(resolve);
-      })
-    );
-  }
-  enqueue(t) {
-    // if (this.resolvers.length) this.resolvers.shift()(t);
-    // else this.promises.push(Promise.resolve(t));
-    if (!this.resolvers.length) this._add();
-    this.resolvers.shift()(t);
-  }
-  dequeue() {
-    if (!this.promises.length) this._add();
-    return this.promises.shift();
-  }
-  // now some utilities:
-  isEmpty() {
-    // there are no values available
-    return !this.promises.length; // this.length <= 0
-  }
-  isBlocked() {
-    // it's waiting for values
-    return !!this.resolvers.length; // this.length < 0
-  }
-  get length() {
-    return this.promises.length - this.resolvers.length;
-  }
-  sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-  }
-  async start() {
-    // TODO: This is experimental
-    const delayBetweenJobs = 2000;
-
-    for await (const job of this) {
-      console.log("Executing job...");
-      job();
-      if (delayBetweenJobs) {
-        console.log("Waiting for next job1...");
-        await this.sleep(delayBetweenJobs);
-        console.log("Waiting for next job2...");
-      }
-    }
-  }
-  [Symbol.asyncIterator]() {
-    // Todo: Use AsyncIterator.from()
-    return {
-      next: () => this.dequeue().then(value => ({ done: false, value })),
-      [Symbol.asyncIterator]() {
-        return this;
-      }
-    };
-  }
-}
-
-// export default class {
-//   constructor() {
-//     this.jobQueue = [];
-//     this.timerHandle = null;
-//   }
-//   // static get csrfElement() {
-//   //   return document.querySelector(`meta[name="csrf-token"]`);
-//   // }
-
-//   // static getCsrf() {
-//   //   return this.csrfElement.getAttribute("content");
-//   // }
-
-//   // static setCsrf(value) {
-//   //   return this.csrfElement.setAttribute("content", value);
-//   // }
-
-//   start(interval) {
-//     this.timerHandle = setInterval(() => {
-//       console.log("DEQUQE1");
-//       const oldestJob = this.jobQueue.shift();
-//       if (oldestJob) {
-//         console.log("DEQUQE2");
-//         oldestJob();
-//       }
-//     }, interval);
-//   }
-
-//   stop() {
-//     clearInterval(this.timerHandle);
-//   }
-
-//   enqueue(job) {
-//     this.jobQueue.push(job);
-//   }
-// }