support none-overlapping queries (cancel existing)

Author: shakyShane

special-pages/pages/history/app/history.service.js

@@ -91,7 +91,7 @@ export class HistoryService {
                 offset: this.query.data.results.length,
             };
 
-            this.query.triggerFetch(query);
+            this.query.nonOverlapping.triggerFetch(query);
         }
     }
 

special-pages/pages/new-tab/app/service.js

@@ -18,7 +18,8 @@ export class Service {
     DEBOUNCE_TIME_MS = 200;
     _broadcast = true;
     /** @type {undefined|((old: Data, next: Data, trigger: InvocationSource) => Data)} */
-    accept;
+    updater;
+    nonOverlapping = new NonOverlapping(this);
     /**
      * @param {object} props
      * @param {(arg?: any) => Promise<Data>} [props.initial]
@@ -41,7 +42,7 @@ export class Service {
      * @param {(old: Data, next: Data, trigger: InvocationSource) => Data} fn
      */
     withUpdater(fn) {
-        this.accept = fn;
+        this.updater = fn;
         return this;
     }
 
@@ -52,7 +53,7 @@ export class Service {
     async fetchInitial(params) {
         if (!this.impl.initial) throw new Error('unreachable');
         const initial = await this.impl.initial(params);
-        this._accept(initial, 'initial');
+        this.accept(initial, 'initial');
         return /** @type {Data} */ (this.data);
     }
 
@@ -63,7 +64,7 @@ export class Service {
     async triggerFetch(params) {
         if (!this.impl.initial) throw new Error('unreachable');
         const next = await this.impl.initial(params);
-        this._accept(next, 'trigger-fetch');
+        this.accept(next, 'trigger-fetch');
         return /** @type {Data} */ (this.data);
     }
 
@@ -104,7 +105,7 @@ export class Service {
     _setupSubscription() {
         if (this.sub) return;
         this.sub = this.impl.subscribe?.((data) => {
-            this._accept(data, 'subscription');
+            this.accept(data, 'subscription');
         });
     }
 
@@ -117,7 +118,7 @@ export class Service {
     }
 
     flush() {
-        if (this.data) this._accept(this.data, 'manual');
+        if (this.data) this.accept(this.data, 'manual');
     }
 
     /**
@@ -132,19 +133,18 @@ export class Service {
         if (this.data === null) return;
         const next = updaterFn(this.data);
         if (next) {
-            this._accept(next, 'manual');
+            this.accept(next, 'manual');
         } else {
             console.warn('could not update');
         }
     }
     /**
      * @param {Data} data
      * @param {InvocationSource} source
-     * @private
      */
-    _accept(data, source) {
-        if (this.accept && source !== 'initial') {
-            this.data = /** @type {NonNullable<Data>} */ (this.accept(/** @type {NonNullable<Data>} */ (this.data), data, source));
+    accept(data, source) {
+        if (this.updater && source !== 'initial') {
+            this.data = /** @type {NonNullable<Data>} */ (this.updater(/** @type {NonNullable<Data>} */ (this.data), data, source));
         } else {
             this.data = /** @type {NonNullable<Data>} */ (data);
         }
@@ -199,3 +199,32 @@ export class Service {
         this.impl.persist(this.data);
     }
 }
+
+class NonOverlapping {
+    /** @type {null|{promise: any}} */
+    _ongoing = null;
+
+    /**
+     * @param {Service} service
+     */
+    constructor(service) {
+        this.service = service;
+    }
+
+    /**
+     * @param {any} [params]
+     */
+    triggerFetch(params) {
+        if (!this.service.impl.initial) throw new Error('unreachable');
+        if (this._ongoing?.promise) {
+            this._ongoing.promise.cancelled = true;
+        }
+        // eslint-disable-next-line promise/prefer-await-to-then
+        const promise = this.service.impl.initial(params).then((data) => {
+            if (/** @type {any} */ (promise).cancelled) return;
+            this.service.accept(data, 'trigger-fetch');
+            this._ongoing = null;
+        });
+        this._ongoing = { promise };
+    }
+}