glib-web 2.5.0 → 3.0.0-beta1

package/utils/launch.js

@@ -1,8 +1,8 @@
-import Vue from "vue";
-import Dialog from "../nav/dialog";
-import Sheet from "../nav/sheet";
-import Snackbar from "../nav/snackbar";
-import Vuetify from "vuetify";
+import { Vue } from "../index";
+import Dialog from "../nav/dialog.vue";
+import Sheet from "../nav/sheet.vue";
+import Snackbar from "../nav/snackbar.vue";
+import { createApp, h } from "vue";
 
 export default class {
   static get dialog() {
@@ -36,30 +36,27 @@ class LaunchDialog {
       this.stack = [];
     }
 
+
     // https://css-tricks.com/creating-vue-js-component-instances-programmatically/
-    const DialogClass = Vue.extend(Dialog);
-    const instance = new DialogClass({
-      vuetify: new Vuetify({
-        theme: {
-          themes: Utils.settings.themes
+    const props = {
+      spec: properties,
+      stack: this.stack,
+      vueApp: window.vueApp
+    }
+
+    const instance = createApp(
+      {
+        render: function () {
+          return h(Dialog, props)
         }
-      }),
-      propsData: {
-        spec: properties,
-        stack: this.stack,
-        vueApp: window.vueApp
       }
-    });
+    )
+    Object.assign(instance._context, Vue._context)
 
     if (component) {
-      // const placeholder = component
-      //   .$dialogContainer()
-      //   .appendChild(document.createElement("div"));
-
-      const placeholder = component.$el.appendChild(
-        document.createElement("div")
-      );
-      instance.$mount(placeholder);
+      const placeholder = document.createElement('div')
+      document.body.appendChild(placeholder)
+      instance.mount(placeholder);
     } else {
       console.error("A dialog has to be displayed in a component");
     }
@@ -108,21 +105,19 @@ class LaunchDialog {
 
 class LaunchSheet {
   static open(properties, component) {
-    const SheetClass = Vue.extend(Sheet);
-    const instance = new SheetClass({
-      vuetify: new Vuetify({
-        theme: {
-          themes: Utils.settings.themes
+    const instance = createApp(
+      {
+        render: function () {
+          return h(Sheet, { spec: properties })
         }
-      }),
-      propsData: { spec: properties }
-    });
+      }
+    )
+    Object.assign(instance._context, Vue._context)
 
     if (component) {
-      const placeholder = component.$el.appendChild(
-        document.createElement("div")
-      );
-      instance.$mount(placeholder);
+      const placeholder = document.createElement('div')
+      document.body.appendChild(placeholder)
+      instance.mount(placeholder);
     } else {
       console.error("A sheet has to be displayed in a component");
     }
@@ -150,25 +145,22 @@ class LaunchSheet {
 
 class LaunchSnackbar {
   static open(properties, component) {
-    const SnackbarClass = Vue.extend(Snackbar);
-    const instance = new SnackbarClass({
-      vuetify: window.vueApp.vuetify,
-      propsData: { spec: properties, vueApp: window.vueApp }
-    });
+    const instance = createApp(
+      {
+        render: function () {
+          return h(Snackbar, { spec: properties, vueApp: window.vueApp })
+        }
+      }
+    )
+    Object.assign(instance._context, Vue._context)
 
     if (component) {
-      // This doesn't seem to work when it is triggered from a list row's menu.
-      // const placeholder = component.$el.appendChild(
-      //   document.createElement("div")
-      // );
-
-      const placeholder = document.body.appendChild(
-        document.createElement("div")
-      );
-      instance.$mount(placeholder);
+      const placeholder = document.createElement('div')
+      document.body.appendChild(placeholder)
+      instance.mount(placeholder);
       instance.show = true;
     } else {
-      console.error("A snackbar has to be displayed in a component");
+      console.error("A Snackbar has to be displayed in a component");
     }
 
     return instance;

package/utils/public.js

@@ -5,6 +5,9 @@ import Type from "./type";
 import Form from "./form";
 import Component from "./component";
 import Hash from "./hash";
+import Queue from "./queue";
+
+const _queue = new Queue();
 
 export default class {
   static get action() {
@@ -28,4 +31,7 @@ export default class {
   static get Hash() {
     return Hash;
   }
+  static get queue() {
+    return _queue;
+  }
 }

package/utils/queue.js

@@ -0,0 +1,110 @@
+// 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...");
+      }
+    }
+    // console.log("JOB1");
+    // const job = this.dequeue();
+    // console.log("JOB2", job);
+    // job();
+    // Vue.nextTick(() => {
+    //   this.start();
+    // });
+    // await this.next();
+  }
+  [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);
+//   }
+// }

package/utils/settings.js

@@ -1,3 +1,5 @@
+import config from '../package.json';
+
 class MutableSettings {
   constructor() {
     this.reactive = true;
@@ -22,7 +24,7 @@ export default class ImmutableSettings {
   }
 
   static get appVersion() {
-    return require("../package.json").version;
+    return config.version;
   }
 
   // static get build() {