vscroll 1.5.2 → 1.5.3-passive

package/dist/bundles/vscroll.esm6.js

@@ -1,6 +1,6 @@
 /**
  * vscroll (https://github.com/dhilt/vscroll) FESM2015
- * Version: 1.5.2 (2022-09-12T12:01:26.863Z)
+ * Version: 1.5.3-passive (2022-11-04T12:11:44.543Z)
  * Author: Denis Hilt
  * License: MIT
  */
@@ -306,12 +306,14 @@ const getDefaultAdapterProps = () => [
   {
     type: Type.Reactive,
     name: Name.firstVisible$,
-    value: new Reactive(EMPTY_ITEM, { emitOnSubscribe: true })
+    value: new Reactive(EMPTY_ITEM, { emitOnSubscribe: true }),
+    wanted: true
   },
   {
     type: Type.Reactive,
     name: Name.lastVisible$,
-    value: new Reactive(EMPTY_ITEM, { emitOnSubscribe: true })
+    value: new Reactive(EMPTY_ITEM, { emitOnSubscribe: true }),
+    wanted: true
   },
   {
     type: Type.Reactive,
@@ -328,9 +330,37 @@ const reactiveConfigStorage = new Map();
 
 var core = {
   name: 'vscroll',
-  version: '1.5.2'
+  version: '1.5.3-passive'
 };
 
+const getBox = (id) => {
+  var _a;
+  return (_a = wantedStorage.get(id || -1)) === null || _a === void 0 ? void 0 : _a.box;
+};
+const setBox = ({ name, wanted }, id) => {
+  const Wanted = wantedStorage.get(id || -1);
+  if (wanted && Wanted && !Wanted.box[name] && !Wanted.block) {
+    const { firstVisible: a, firstVisible$: a$ } = AdapterPropName;
+    const { lastVisible: b, lastVisible$: b$ } = AdapterPropName;
+    Wanted.box[a] = Wanted.box[a$] = [a, a$].some(n => n === name) || Wanted.box[a];
+    Wanted.box[b] = Wanted.box[b$] = [b, b$].some(n => n === name) || Wanted.box[b];
+    return true;
+  }
+  return false;
+};
+const setBlock = (value, id) => {
+  const Wanted = wantedStorage.get(id || -1);
+  if (Wanted) {
+    Wanted.block = value;
+  }
+};
+const wantedUtils = {
+  getBox,
+  setBox,
+  setBlock
+};
+const wantedStorage = new Map();
+
 let instanceCount$1 = 0;
 class AdapterContext {
   constructor(config) {
@@ -338,6 +368,7 @@ class AdapterContext {
     const id = ++instanceCount$1;
     const conf = { configurable: true };
     const reactivePropsStore = {};
+    wantedStorage.set(id, { box: {}, block: false });
     // set up permanent props
     Object.defineProperty(this, AdapterPropName.id, Object.assign({ get: () => id }, conf));
     Object.defineProperty(this, AdapterPropName.mock, Object.assign({ get: () => mock }, conf));
@@ -346,20 +377,24 @@ class AdapterContext {
     // set up default props, they will be reassigned during the Adapter instantiation
     getDefaultAdapterProps()
       .filter(({ permanent }) => !permanent)
-      .forEach(({ name, value, type }) => {
+      .forEach(prop => {
+      let { value } = prop;
       // reactive props might be reconfigured by the vscroll consumer
-      if (reactive && type === AdapterPropType.Reactive) {
-        const react = reactive[name];
+      if (reactive && prop.type === AdapterPropType.Reactive) {
+        const react = reactive[prop.name];
         if (react) {
           // here we have a configured reactive property that came from the outer config
           // this prop must be exposed via Adapter, but at the same time we need to
           // persist the original default value as it will be used by the Adapter internally
-          reactivePropsStore[name] = Object.assign(Object.assign({}, react), { default: value // persisting the default native Reactive prop
+          reactivePropsStore[prop.name] = Object.assign(Object.assign({}, react), { default: value // persisting the default native Reactive prop
            });
           value = react.source; // exposing the configured prop instead of the default one
         }
       }
-      Object.defineProperty(this, name, Object.assign({ get: () => value }, conf));
+      Object.defineProperty(this, prop.name, Object.assign({ get: () => {
+          wantedUtils.setBox(prop, id);
+          return value;
+        } }, conf));
     });
     if (reactive) { // save both configured and default reactive props in the store
       reactiveConfigStorage.set(id, reactivePropsStore);
@@ -381,6 +416,7 @@ class DatasourceGeneric {
   }
   dispose() {
     reactiveConfigStorage.delete(this.adapter.id);
+    wantedStorage.delete(this.adapter.id);
   }
 }
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
@@ -2363,7 +2399,7 @@ class End extends BaseProcessFactory(CommonProcess.end) {
     const { workflow, state: { cycle: { interrupter } } } = scroller;
     if (!error && !interrupter) {
       // set out params accessible via Adapter
-      End.calculateParams(scroller, workflow);
+      End.calculateParams(scroller);
     }
     // explicit interruption for we don't want to go through the inner loop finalizing
     if (isInterrupted(workflow)) {
@@ -2378,21 +2414,10 @@ class End extends BaseProcessFactory(CommonProcess.end) {
       payload: Object.assign({}, (interrupter ? { process: interrupter } : {}))
     });
   }
-  static calculateParams(scroller, workflow) {
-    const { adapter, viewport, buffer: { items } } = scroller;
-    if (adapter.wanted.firstVisible) {
-      const { item } = viewport.getEdgeVisibleItem(items, Direction.backward);
-      if (!item || item.element !== adapter.firstVisible.element) {
-        adapter.firstVisible = item ? item.get() : EMPTY_ITEM;
-      }
-    }
-    // the workflow can be interrupter on firstVisible change
-    if (adapter.wanted.lastVisible && !isInterrupted(workflow)) {
-      const { item } = viewport.getEdgeVisibleItem(items, Direction.forward);
-      if (!item || item.element !== adapter.lastVisible.element) {
-        adapter.lastVisible = item ? item.get() : EMPTY_ITEM;
-      }
-    }
+  static calculateParams(scroller) {
+    const { adapter, workflow } = scroller;
+    adapter.setFirstOrLastVisible({ first: true, workflow });
+    adapter.setFirstOrLastVisible({ last: true, workflow });
   }
   static shouldContinueRun(scroller, error) {
     const { cycle, fetch, render } = scroller.state;
@@ -2856,7 +2881,7 @@ class Logger {
       }
     }
   }
-  // logNow(...args: any[]) {
+  // logNow(...args: unknown[]) {
   //   const immediateLog = this.immediateLog;
   //   const debug = this.debug;
   //   (this as any).debug = true;
@@ -3039,7 +3064,7 @@ class Routines {
   }
   onScroll(handler) {
     const eventReceiver = this.settings.window ? window : this.viewport;
-    eventReceiver.addEventListener('scroll', handler);
+    eventReceiver.addEventListener('scroll', handler, { passive: true });
     return () => eventReceiver.removeEventListener('scroll', handler);
   }
 }
@@ -4268,14 +4293,19 @@ class Adapter {
     this.source = {}; // for Reactive props
     this.box = {}; // for Scalars over Reactive props
     this.demand = {}; // for Scalars on demand
-    this.wanted = {};
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this.setFirstOrLastVisible = (_) => { };
     this.getWorkflow = getWorkflow;
     this.logger = logger;
     this.relax$ = null;
     this.relaxRun = null;
     this.reloadCounter = 0;
-    // public context (if exists) should provide access Reactive props configuration by id
+    const contextId = (context === null || context === void 0 ? void 0 : context.id) || -1;
+    // public context (if exists) should provide access to Reactive props config by id
     const reactivePropsStore = context && reactiveConfigStorage.get(context.id) || {};
+    // the Adapter initialization should not trigger "wanted" props setting;
+    // after the initialization is completed, "wanted" functionality must be unblocked
+    wantedUtils.setBlock(true, contextId);
     // make array of the original values from public context if present
     const adapterProps = context
       ? ADAPTER_PROPS_STUB.map(prop => {
@@ -4304,34 +4334,37 @@ class Adapter {
       configurable: true,
       get: () => value
     }));
-    // Reactive props
-    // 1) store original values in "source" container, to avoid extra .get() calls on scalar twins set
-    // 2) "wanted" container is bound with scalars; get() updates it
+    // Reactive props: store original values in "source" container, to avoid extra .get() calls on scalar twins set
     adapterProps
       .filter(prop => prop.type === AdapterPropType.Reactive)
       .forEach(({ name, value }) => {
       this.source[name] = value;
       Object.defineProperty(this, name, {
         configurable: true,
-        get: () => {
-          const scalarWanted = ADAPTER_PROPS_STUB.find(({ wanted, reactive }) => wanted && reactive === name);
-          if (scalarWanted && this.externalContext) {
-            this.wanted[scalarWanted.name] = true;
-          }
-          return this.source[name];
-        }
+        get: () => this.source[name]
       });
     });
+    // for "wanted" props that can be explicitly requested for the first time after the Adapter initialization,
+    // an implicit calculation of the initial value is required;
+    // so this method should be called when accessing the "wanted" props through one of the following getters
+    const processWanted = (prop) => {
+      if (wantedUtils.setBox(prop, contextId)) {
+        if ([AdapterPropName.firstVisible, AdapterPropName.firstVisible$].some(n => n === prop.name)) {
+          this.setFirstOrLastVisible({ first: true });
+        }
+        else if ([AdapterPropName.lastVisible, AdapterPropName.lastVisible$].some(n => n === prop.name)) {
+          this.setFirstOrLastVisible({ last: true });
+        }
+      }
+    };
     // Scalar props that have Reactive twins
-    // 1) scalars should use "box" container
-    // 2) "wanted" should be updated on get
-    // 3) reactive props (from "source") are triggered on set
+    // 1) reactive props (from "source") should be triggered on set
+    // 2) scalars should use "box" container on get
+    // 3) "wanted" scalars should also run wanted-related logic on get
     adapterProps
       .filter(prop => prop.type === AdapterPropType.Scalar && !!prop.reactive)
-      .forEach(({ name, value, reactive, wanted }) => {
-      if (wanted) {
-        this.wanted[name] = false;
-      }
+      .forEach((prop) => {
+      const { name, value, reactive } = prop;
       this.box[name] = value;
       Object.defineProperty(this, name, {
         configurable: true,
@@ -4347,9 +4380,7 @@ class Adapter {
           }
         },
         get: () => {
-          if (wanted && this.externalContext) {
-            this.wanted[name] = true;
-          }
+          processWanted(prop);
           return this.box[name];
         }
       });
@@ -4371,7 +4402,8 @@ class Adapter {
     }
     // Adapter public context augmentation
     adapterProps
-      .forEach(({ name, type, value: defaultValue, permanent }) => {
+      .forEach((prop) => {
+      const { name, type, value: defaultValue, permanent } = prop;
       let value = this[name];
       if (type === AdapterPropType.Function) {
         value = value.bind(this);
@@ -4385,14 +4417,20 @@ class Adapter {
       else if (name === AdapterPropName.augmented) {
         value = true;
       }
+      const nonPermanentScalar = !permanent && type === AdapterPropType.Scalar;
       Object.defineProperty(context, name, {
         configurable: true,
-        get: () => !permanent && type === AdapterPropType.Scalar
-          ? this[name] // non-permanent Scalars should be taken in runtime
-          : value // Reactive props and methods (Functions/WorkflowRunners) can be defined once
+        get: () => {
+          processWanted(prop); // consider accessing "wanted" Reactive props
+          if (nonPermanentScalar) {
+            return this[name]; // non-permanent Scalars should be taken in runtime
+          }
+          return value; // other props (Reactive/Functions/WorkflowRunners) can be defined once
+        }
       });
     });
     this.externalContext = context;
+    wantedUtils.setBlock(false, contextId);
   }
   get workflow() {
     return this.getWorkflow();
@@ -4413,7 +4451,7 @@ class Adapter {
       })
       : defaultMethod.apply(this, args);
   }
-  initialize(buffer, state, logger, adapterRun$) {
+  initialize(buffer, state, viewport, logger, adapterRun$) {
     // buffer
     Object.defineProperty(this.demand, AdapterPropName.itemsCount, {
       get: () => buffer.getVisibleItemsCount()
@@ -4441,6 +4479,26 @@ class Adapter {
     state.cycle.innerLoop.busy.on(busy => this.loopPending = busy);
     this.isLoading = state.cycle.busy.get();
     state.cycle.busy.on(busy => this.isLoading = busy);
+    //viewport
+    this.setFirstOrLastVisible = ({ first, last, workflow }) => {
+      var _a, _b, _c;
+      if ((!first && !last) || ((_a = workflow === null || workflow === void 0 ? void 0 : workflow.call) === null || _a === void 0 ? void 0 : _a.interrupted)) {
+        return;
+      }
+      const token = first ? AdapterPropName.firstVisible : AdapterPropName.lastVisible;
+      if (!((_c = wantedUtils.getBox((_b = this.externalContext) === null || _b === void 0 ? void 0 : _b.id)) === null || _c === void 0 ? void 0 : _c[token])) {
+        return;
+      }
+      if (buffer.items.some(({ element }) => !element)) {
+        logger.log('skipping first/lastVisible set because not all buffered items are rendered at this moment');
+        return;
+      }
+      const direction = first ? Direction.backward : Direction.forward;
+      const { item } = viewport.getEdgeVisibleItem(buffer.items, direction);
+      if (!item || item.element !== this[token].element) {
+        this[token] = (item ? item.get() : EMPTY_ITEM);
+      }
+    };
     // logger
     this.logger = logger;
     // self-pending subscription; set up only on the very first init
@@ -4484,7 +4542,8 @@ class Adapter {
     });
   }
   resetContext() {
-    const reactiveStore = reactiveConfigStorage.get(this.externalContext.id);
+    var _a;
+    const reactiveStore = reactiveConfigStorage.get((_a = this.externalContext) === null || _a === void 0 ? void 0 : _a.id);
     ADAPTER_PROPS_STUB
       .forEach(({ type, permanent, name, value }) => {
       // assign initial values to non-reactive non-permanent props
@@ -4697,7 +4756,7 @@ class Scroller {
   init(adapterRun$) {
     this.viewport.reset(this.buffer.startIndex);
     this.logger.stat('initialization');
-    this.adapter.initialize(this.buffer, this.state, this.logger, adapterRun$);
+    this.adapter.initialize(this.buffer, this.state, this.viewport, this.logger, adapterRun$);
   }
   dispose(forever) {
     if (forever) { // Adapter is not re-instantiated on reset