@studiometa/js-toolkit 2.8.0 → 2.9.1

package/Base/managers/ChildrenManager.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/Base/managers/ChildrenManager.ts"],
-  "sourcesContent": ["import type { Base, BaseConstructor, BaseAsyncConstructor, BaseEl } from '../index.js';\nimport { AbstractManager } from './AbstractManager.js';\nimport { getComponentElements } from '../utils.js';\n\n/**\n * Get a child component's instance.\n *\n * @param {ChildrenManager} that\n * @param {HTMLElement & { __base__?: WeakMap<BaseConstructor, Base> }} el\n *   The root element of the child component.\n * @param {BaseConstructor|BaseAsyncConstructor} ComponentClass\n *   A Base class or a Promise for async components.\n * @param {string} name\n *   The name of the child component.\n * @returns {Base|Promise<Base | 'terminated'>|'terminated'}\n *   A Base instance or a Promise resolving to a Base instance.\n * @private\n */\nfunction __getChild(\n  // eslint-disable-next-line no-use-before-define\n  that: ChildrenManager,\n  el: BaseEl,\n  ComponentClass: BaseConstructor | BaseAsyncConstructor,\n  name: string,\n): Base | Promise<Base | 'terminated'> | 'terminated' {\n  const asyncComponentPromise = that.__asyncComponentPromises.get(\n    ComponentClass as BaseAsyncConstructor,\n  );\n\n  // Test if we have a constructor and not a promise or if the promise has been resolved\n  if (\n    '$isBase' in ComponentClass ||\n    (asyncComponentPromise && asyncComponentPromise.status === 'resolved')\n  ) {\n    let ctor = ComponentClass as BaseConstructor;\n\n    // Get resolved constructor from weakmap.\n    // Only test for existence as the status was checked before.\n    if (asyncComponentPromise) {\n      ctor = asyncComponentPromise.ctor;\n    }\n\n    // Return existing instance if it exists\n    if (el.__base__ && el.__base__.has(ctor)) {\n      return el.__base__.get(ctor);\n    }\n\n    // Return a new instance if the component class is a child of the Base class\n    // eslint-disable-next-line new-cap\n    const child = new ctor(el);\n    Object.defineProperty(child, '$parent', { get: () => that.__base });\n    return child;\n  }\n\n  const promise = asyncComponentPromise\n    ? asyncComponentPromise.promise\n    : ComponentClass(that.__base);\n\n  if (!asyncComponentPromise) {\n    that.__asyncComponentPromises.set(ComponentClass, {\n      promise,\n      status: 'pending',\n      ctor: undefined,\n    });\n  }\n\n  // Resolve async components\n  return promise.then((module) => {\n    // @ts-ignore\n    const ctor = module.default ?? module;\n\n    that.__asyncComponentPromises.set(ComponentClass, {\n      promise,\n      status: 'resolved',\n      ctor,\n    });\n\n    return __getChild(that, el, ctor, name);\n  });\n}\n\n/**\n * Execute the given hook for all children instances.\n *\n * @param {ChildrenManager} that\n * @param {'$mount'|'$update'|'$destroy'} hook The hook to execute.\n * @private\n */\n// eslint-disable-next-line no-use-before-define\nfunction __triggerHookForAll(that: ChildrenManager, hook: '$mount' | '$update' | '$destroy') {\n  that.registeredNames.forEach((name) => {\n    that[name].forEach((instance) => {\n      if (instance instanceof Promise) {\n        instance.then((resolvedInstance) => that.__triggerHook(hook, resolvedInstance, name));\n      } else {\n        that.__triggerHook(hook, instance, name);\n      }\n    });\n  });\n}\n\n/**\n * Children manager.\n */\nexport class ChildrenManager extends AbstractManager {\n  /**\n   * Store async component promises to avoid calling them multiple times and\n   * waiting for them when they are already resolved.\n   */\n  __asyncComponentPromises: WeakMap<\n    BaseAsyncConstructor,\n    {\n      promise: ReturnType<BaseAsyncConstructor>;\n      status: 'pending' | 'resolved';\n      ctor?: BaseConstructor;\n    }\n  > = new WeakMap();\n\n  get registeredNames(): string[] {\n    return Object.keys(this).filter((key) => !key.startsWith('__'));\n  }\n\n  /**\n   * Register instances of all children components.\n   */\n  registerAll() {\n    Object.entries(this.__config.components).forEach(([name, component]) =>\n      this.__register(name, component),\n    );\n  }\n\n  /**\n   * Mount all child component instances.\n   */\n  mountAll() {\n    __triggerHookForAll(this, '$mount');\n  }\n\n  /**\n   * Update all child component instances.\n   */\n  updateAll() {\n    __triggerHookForAll(this, '$update');\n  }\n\n  /**\n   * Destroy all child component instances.\n   */\n  destroyAll() {\n    __triggerHookForAll(this, '$destroy');\n  }\n\n  /**\n   * Execute the given hook for the given instance.\n   *\n   * @param {'$mount'|'$update'|'$destroy'} hook The hook to trigger.\n   * @param {Base} instance The target instance.\n   * @param {string} name The name of the component.\n   * @private\n   */\n  __triggerHook(hook: '$mount' | '$update' | '$destroy', instance: Base, name: string) {\n    if (hook === '$update' && !instance.$isMounted) {\n      // eslint-disable-next-line no-param-reassign\n      hook = '$mount';\n    }\n\n    if (hook === '$update' || hook === '$destroy') {\n      this.__eventsManager.unbindChild(name, instance);\n    }\n\n    if (hook === '$update' || hook === '$mount') {\n      this.__eventsManager.bindChild(name, instance);\n    }\n\n    instance[hook]();\n  }\n\n  /**\n   * Register instance of a child component.\n   *\n   * @param {string} name\n   *   The name of the child component.\n   * @param {BaseConstructor|BaseAsyncConstructor} component\n   *   A Base class or a Promise for async components.\n   * @private\n   */\n  __register(name: string, component: BaseConstructor | BaseAsyncConstructor) {\n    Object.defineProperty(this, name, {\n      enumerable: true,\n      configurable: true,\n      get: () => this.__getValue(name, component),\n    });\n  }\n\n  __getValue(name: string, component: BaseConstructor | BaseAsyncConstructor) {\n    const elements = getComponentElements(name, this.__element);\n\n    if (elements.length === 0) {\n      return [];\n    }\n\n    return elements\n      .map((element) => __getChild(this, element, component, name))\n      .filter((instance) => instance !== 'terminated');\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Base, BaseConstructor, BaseAsyncConstructor, BaseEl } from '../index.js';\nimport { AbstractManager } from './AbstractManager.js';\nimport { getComponentElements, addToQueue } from '../utils.js';\n\n/**\n * Get a child component's instance.\n *\n * @param {ChildrenManager} that\n * @param {HTMLElement & { __base__?: WeakMap<BaseConstructor, Base> }} el\n *   The root element of the child component.\n * @param {BaseConstructor|BaseAsyncConstructor} ComponentClass\n *   A Base class or a Promise for async components.\n * @param {string} name\n *   The name of the child component.\n * @returns {Base|Promise<Base | 'terminated'>|'terminated'}\n *   A Base instance or a Promise resolving to a Base instance.\n * @private\n */\nfunction __getChild(\n  // eslint-disable-next-line no-use-before-define\n  that: ChildrenManager,\n  el: BaseEl,\n  ComponentClass: BaseConstructor | BaseAsyncConstructor,\n  name: string,\n): Base | Promise<Base | 'terminated'> | 'terminated' {\n  const asyncComponentPromise = that.__asyncComponentPromises.get(\n    ComponentClass as BaseAsyncConstructor,\n  );\n\n  // Test if we have a constructor and not a promise or if the promise has been resolved\n  if (\n    '$isBase' in ComponentClass ||\n    (asyncComponentPromise && asyncComponentPromise.status === 'resolved')\n  ) {\n    let ctor = ComponentClass as BaseConstructor;\n\n    // Get resolved constructor from weakmap.\n    // Only test for existence as the status was checked before.\n    if (asyncComponentPromise) {\n      ctor = asyncComponentPromise.ctor;\n    }\n\n    // Return existing instance if it exists\n    if (el.__base__ && el.__base__.has(ctor)) {\n      return el.__base__.get(ctor);\n    }\n\n    // Return a new instance if the component class is a child of the Base class\n    // eslint-disable-next-line new-cap\n    const child = new ctor(el);\n    Object.defineProperty(child, '$parent', { get: () => that.__base });\n    return child;\n  }\n\n  const promise = asyncComponentPromise\n    ? asyncComponentPromise.promise\n    : ComponentClass(that.__base);\n\n  if (!asyncComponentPromise) {\n    that.__asyncComponentPromises.set(ComponentClass, {\n      promise,\n      status: 'pending',\n      ctor: undefined,\n    });\n  }\n\n  // Resolve async components\n  return promise.then((module) => {\n    // @ts-ignore\n    const ctor = module.default ?? module;\n\n    that.__asyncComponentPromises.set(ComponentClass, {\n      promise,\n      status: 'resolved',\n      ctor,\n    });\n\n    return __getChild(that, el, ctor, name);\n  });\n}\n\n/**\n * Execute the given hook for all children instances.\n *\n * @param {ChildrenManager} that\n * @param {'$mount'|'$update'|'$destroy'} hook The hook to execute.\n * @private\n */\n// eslint-disable-next-line no-use-before-define\nfunction __triggerHookForAll(that: ChildrenManager, hook: '$mount' | '$update' | '$destroy') {\n  addToQueue(() => {\n    that.registeredNames.forEach((name) => {\n      that[name].forEach((instance) => {\n        if (instance instanceof Promise) {\n          instance.then((resolvedInstance) => {\n            addToQueue(() => that.__triggerHook(hook, resolvedInstance, name));\n          });\n        } else {\n          addToQueue(() => that.__triggerHook(hook, instance, name));\n        }\n      });\n    });\n  });\n}\n\n/**\n * Children manager.\n */\nexport class ChildrenManager extends AbstractManager {\n  /**\n   * Store async component promises to avoid calling them multiple times and\n   * waiting for them when they are already resolved.\n   */\n  __asyncComponentPromises: WeakMap<\n    BaseAsyncConstructor,\n    {\n      promise: ReturnType<BaseAsyncConstructor>;\n      status: 'pending' | 'resolved';\n      ctor?: BaseConstructor;\n    }\n  > = new WeakMap();\n\n  get registeredNames(): string[] {\n    return Object.keys(this).filter((key) => !key.startsWith('__'));\n  }\n\n  /**\n   * Register instances of all children components.\n   */\n  registerAll() {\n    Object.entries(this.__config.components).forEach(([name, component]) =>\n      this.__register(name, component),\n    );\n  }\n\n  /**\n   * Mount all child component instances.\n   */\n  mountAll() {\n    __triggerHookForAll(this, '$mount');\n  }\n\n  /**\n   * Update all child component instances.\n   */\n  updateAll() {\n    __triggerHookForAll(this, '$update');\n  }\n\n  /**\n   * Destroy all child component instances.\n   */\n  destroyAll() {\n    __triggerHookForAll(this, '$destroy');\n  }\n\n  /**\n   * Execute the given hook for the given instance.\n   *\n   * @param {'$mount'|'$update'|'$destroy'} hook The hook to trigger.\n   * @param {Base} instance The target instance.\n   * @param {string} name The name of the component.\n   * @private\n   */\n  __triggerHook(hook: '$mount' | '$update' | '$destroy', instance: Base, name: string) {\n    if (hook === '$update' && !instance.$isMounted) {\n      // eslint-disable-next-line no-param-reassign\n      hook = '$mount';\n    }\n\n    if (hook === '$update' || hook === '$destroy') {\n      this.__eventsManager.unbindChild(name, instance);\n    }\n\n    if (hook === '$update' || hook === '$mount') {\n      this.__eventsManager.bindChild(name, instance);\n    }\n\n    instance[hook]();\n  }\n\n  /**\n   * Register instance of a child component.\n   *\n   * @param {string} name\n   *   The name of the child component.\n   * @param {BaseConstructor|BaseAsyncConstructor} component\n   *   A Base class or a Promise for async components.\n   * @private\n   */\n  __register(name: string, component: BaseConstructor | BaseAsyncConstructor) {\n    Object.defineProperty(this, name, {\n      enumerable: true,\n      configurable: true,\n      get: () => this.__getValue(name, component),\n    });\n  }\n\n  __getValue(name: string, component: BaseConstructor | BaseAsyncConstructor) {\n    const elements = getComponentElements(name, this.__element);\n\n    if (elements.length === 0) {\n      return [];\n    }\n\n    return elements\n      .map((element) => __getChild(this, element, component, name))\n      .filter((instance) => instance !== 'terminated');\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,6BAAgC;AAChC,mBAAiD;AAgBjD,SAAS,WAEP,MACA,IACA,gBACA,MACoD;AACpD,QAAM,wBAAwB,KAAK,yBAAyB;AAAA,IAC1D;AAAA,EACF;AAGA,MACE,aAAa,kBACZ,yBAAyB,sBAAsB,WAAW,YAC3D;AACA,QAAI,OAAO;AAIX,QAAI,uBAAuB;AACzB,aAAO,sBAAsB;AAAA,IAC/B;AAGA,QAAI,GAAG,YAAY,GAAG,SAAS,IAAI,IAAI,GAAG;AACxC,aAAO,GAAG,SAAS,IAAI,IAAI;AAAA,IAC7B;AAIA,UAAM,QAAQ,IAAI,KAAK,EAAE;AACzB,WAAO,eAAe,OAAO,WAAW,EAAE,KAAK,MAAM,KAAK,OAAO,CAAC;AAClE,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,wBACZ,sBAAsB,UACtB,eAAe,KAAK,MAAM;AAE9B,MAAI,CAAC,uBAAuB;AAC1B,SAAK,yBAAyB,IAAI,gBAAgB;AAAA,MAChD;AAAA,MACA,QAAQ;AAAA,MACR,MAAM;AAAA,IACR,CAAC;AAAA,EACH;AAGA,SAAO,QAAQ,KAAK,CAACA,YAAW;AAE9B,UAAM,OAAOA,QAAO,WAAWA;AAE/B,SAAK,yBAAyB,IAAI,gBAAgB;AAAA,MAChD;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,IACF,CAAC;AAED,WAAO,WAAW,MAAM,IAAI,MAAM,IAAI;AAAA,EACxC,CAAC;AACH;AAUA,SAAS,oBAAoB,MAAuB,MAAyC;AAC3F,+BAAW,MAAM;AACf,SAAK,gBAAgB,QAAQ,CAAC,SAAS;AACrC,WAAK,MAAM,QAAQ,CAAC,aAAa;AAC/B,YAAI,oBAAoB,SAAS;AAC/B,mBAAS,KAAK,CAAC,qBAAqB;AAClC,yCAAW,MAAM,KAAK,cAAc,MAAM,kBAAkB,IAAI,CAAC;AAAA,UACnE,CAAC;AAAA,QACH,OAAO;AACL,uCAAW,MAAM,KAAK,cAAc,MAAM,UAAU,IAAI,CAAC;AAAA,QAC3D;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AAKO,IAAM,kBAAN,cAA8B,uCAAgB;AAAA,EAKnD,2BAOI,oBAAI,QAAQ;AAAA,EAEhB,IAAI,kBAA4B;AAC9B,WAAO,OAAO,KAAK,IAAI,EAAE,OAAO,CAAC,QAAQ,CAAC,IAAI,WAAW,IAAI,CAAC;AAAA,EAChE;AAAA,EAKA,cAAc;AACZ,WAAO,QAAQ,KAAK,SAAS,UAAU,EAAE;AAAA,MAAQ,CAAC,CAAC,MAAM,SAAS,MAChE,KAAK,WAAW,MAAM,SAAS;AAAA,IACjC;AAAA,EACF;AAAA,EAKA,WAAW;AACT,wBAAoB,MAAM,QAAQ;AAAA,EACpC;AAAA,EAKA,YAAY;AACV,wBAAoB,MAAM,SAAS;AAAA,EACrC;AAAA,EAKA,aAAa;AACX,wBAAoB,MAAM,UAAU;AAAA,EACtC;AAAA,EAUA,cAAc,MAAyC,UAAgB,MAAc;AACnF,QAAI,SAAS,aAAa,CAAC,SAAS,YAAY;AAE9C,aAAO;AAAA,IACT;AAEA,QAAI,SAAS,aAAa,SAAS,YAAY;AAC7C,WAAK,gBAAgB,YAAY,MAAM,QAAQ;AAAA,IACjD;AAEA,QAAI,SAAS,aAAa,SAAS,UAAU;AAC3C,WAAK,gBAAgB,UAAU,MAAM,QAAQ;AAAA,IAC/C;AAEA,aAAS,MAAM;AAAA,EACjB;AAAA,EAWA,WAAW,MAAc,WAAmD;AAC1E,WAAO,eAAe,MAAM,MAAM;AAAA,MAChC,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,KAAK,MAAM,KAAK,WAAW,MAAM,SAAS;AAAA,IAC5C,CAAC;AAAA,EACH;AAAA,EAEA,WAAW,MAAc,WAAmD;AAC1E,UAAM,eAAW,mCAAqB,MAAM,KAAK,SAAS;AAE1D,QAAI,SAAS,WAAW,GAAG;AACzB,aAAO,CAAC;AAAA,IACV;AAEA,WAAO,SACJ,IAAI,CAAC,YAAY,WAAW,MAAM,SAAS,WAAW,IAAI,CAAC,EAC3D,OAAO,CAAC,aAAa,aAAa,YAAY;AAAA,EACnD;AACF;",
   "names": ["module"]
 }

package/Base/managers/ChildrenManager.d.ts

@@ -49,5 +49,5 @@ export declare class ChildrenManager extends AbstractManager {
      * @private
      */
     __register(name: string, component: BaseConstructor | BaseAsyncConstructor): void;
-    __getValue(name: string, component: BaseConstructor | BaseAsyncConstructor): (Base<import("../index.js").BaseProps> | "terminated" | Promise<Base<import("../index.js").BaseProps> | "terminated">)[];
+    __getValue(name: string, component: BaseConstructor | BaseAsyncConstructor): (Base<import("../Base.js").BaseProps> | "terminated" | Promise<Base<import("../Base.js").BaseProps> | "terminated">)[];
 }

package/Base/managers/ChildrenManager.js

@@ -1,5 +1,5 @@
 import { AbstractManager } from "./AbstractManager.js";
-import { getComponentElements } from "../utils.js";
+import { getComponentElements, addToQueue } from "../utils.js";
 function __getChild(that, el, ComponentClass, name) {
   const asyncComponentPromise = that.__asyncComponentPromises.get(
     ComponentClass
@@ -35,13 +35,17 @@ function __getChild(that, el, ComponentClass, name) {
   });
 }
 function __triggerHookForAll(that, hook) {
-  that.registeredNames.forEach((name) => {
-    that[name].forEach((instance) => {
-      if (instance instanceof Promise) {
-        instance.then((resolvedInstance) => that.__triggerHook(hook, resolvedInstance, name));
-      } else {
-        that.__triggerHook(hook, instance, name);
-      }
+  addToQueue(() => {
+    that.registeredNames.forEach((name) => {
+      that[name].forEach((instance) => {
+        if (instance instanceof Promise) {
+          instance.then((resolvedInstance) => {
+            addToQueue(() => that.__triggerHook(hook, resolvedInstance, name));
+          });
+        } else {
+          addToQueue(() => that.__triggerHook(hook, instance, name));
+        }
+      });
     });
   });
 }

package/Base/managers/ChildrenManager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/Base/managers/ChildrenManager.ts"],
-  "sourcesContent": ["import type { Base, BaseConstructor, BaseAsyncConstructor, BaseEl } from '../index.js';\nimport { AbstractManager } from './AbstractManager.js';\nimport { getComponentElements } from '../utils.js';\n\n/**\n * Get a child component's instance.\n *\n * @param {ChildrenManager} that\n * @param {HTMLElement & { __base__?: WeakMap<BaseConstructor, Base> }} el\n *   The root element of the child component.\n * @param {BaseConstructor|BaseAsyncConstructor} ComponentClass\n *   A Base class or a Promise for async components.\n * @param {string} name\n *   The name of the child component.\n * @returns {Base|Promise<Base | 'terminated'>|'terminated'}\n *   A Base instance or a Promise resolving to a Base instance.\n * @private\n */\nfunction __getChild(\n  // eslint-disable-next-line no-use-before-define\n  that: ChildrenManager,\n  el: BaseEl,\n  ComponentClass: BaseConstructor | BaseAsyncConstructor,\n  name: string,\n): Base | Promise<Base | 'terminated'> | 'terminated' {\n  const asyncComponentPromise = that.__asyncComponentPromises.get(\n    ComponentClass as BaseAsyncConstructor,\n  );\n\n  // Test if we have a constructor and not a promise or if the promise has been resolved\n  if (\n    '$isBase' in ComponentClass ||\n    (asyncComponentPromise && asyncComponentPromise.status === 'resolved')\n  ) {\n    let ctor = ComponentClass as BaseConstructor;\n\n    // Get resolved constructor from weakmap.\n    // Only test for existence as the status was checked before.\n    if (asyncComponentPromise) {\n      ctor = asyncComponentPromise.ctor;\n    }\n\n    // Return existing instance if it exists\n    if (el.__base__ && el.__base__.has(ctor)) {\n      return el.__base__.get(ctor);\n    }\n\n    // Return a new instance if the component class is a child of the Base class\n    // eslint-disable-next-line new-cap\n    const child = new ctor(el);\n    Object.defineProperty(child, '$parent', { get: () => that.__base });\n    return child;\n  }\n\n  const promise = asyncComponentPromise\n    ? asyncComponentPromise.promise\n    : ComponentClass(that.__base);\n\n  if (!asyncComponentPromise) {\n    that.__asyncComponentPromises.set(ComponentClass, {\n      promise,\n      status: 'pending',\n      ctor: undefined,\n    });\n  }\n\n  // Resolve async components\n  return promise.then((module) => {\n    // @ts-ignore\n    const ctor = module.default ?? module;\n\n    that.__asyncComponentPromises.set(ComponentClass, {\n      promise,\n      status: 'resolved',\n      ctor,\n    });\n\n    return __getChild(that, el, ctor, name);\n  });\n}\n\n/**\n * Execute the given hook for all children instances.\n *\n * @param {ChildrenManager} that\n * @param {'$mount'|'$update'|'$destroy'} hook The hook to execute.\n * @private\n */\n// eslint-disable-next-line no-use-before-define\nfunction __triggerHookForAll(that: ChildrenManager, hook: '$mount' | '$update' | '$destroy') {\n  that.registeredNames.forEach((name) => {\n    that[name].forEach((instance) => {\n      if (instance instanceof Promise) {\n        instance.then((resolvedInstance) => that.__triggerHook(hook, resolvedInstance, name));\n      } else {\n        that.__triggerHook(hook, instance, name);\n      }\n    });\n  });\n}\n\n/**\n * Children manager.\n */\nexport class ChildrenManager extends AbstractManager {\n  /**\n   * Store async component promises to avoid calling them multiple times and\n   * waiting for them when they are already resolved.\n   */\n  __asyncComponentPromises: WeakMap<\n    BaseAsyncConstructor,\n    {\n      promise: ReturnType<BaseAsyncConstructor>;\n      status: 'pending' | 'resolved';\n      ctor?: BaseConstructor;\n    }\n  > = new WeakMap();\n\n  get registeredNames(): string[] {\n    return Object.keys(this).filter((key) => !key.startsWith('__'));\n  }\n\n  /**\n   * Register instances of all children components.\n   */\n  registerAll() {\n    Object.entries(this.__config.components).forEach(([name, component]) =>\n      this.__register(name, component),\n    );\n  }\n\n  /**\n   * Mount all child component instances.\n   */\n  mountAll() {\n    __triggerHookForAll(this, '$mount');\n  }\n\n  /**\n   * Update all child component instances.\n   */\n  updateAll() {\n    __triggerHookForAll(this, '$update');\n  }\n\n  /**\n   * Destroy all child component instances.\n   */\n  destroyAll() {\n    __triggerHookForAll(this, '$destroy');\n  }\n\n  /**\n   * Execute the given hook for the given instance.\n   *\n   * @param {'$mount'|'$update'|'$destroy'} hook The hook to trigger.\n   * @param {Base} instance The target instance.\n   * @param {string} name The name of the component.\n   * @private\n   */\n  __triggerHook(hook: '$mount' | '$update' | '$destroy', instance: Base, name: string) {\n    if (hook === '$update' && !instance.$isMounted) {\n      // eslint-disable-next-line no-param-reassign\n      hook = '$mount';\n    }\n\n    if (hook === '$update' || hook === '$destroy') {\n      this.__eventsManager.unbindChild(name, instance);\n    }\n\n    if (hook === '$update' || hook === '$mount') {\n      this.__eventsManager.bindChild(name, instance);\n    }\n\n    instance[hook]();\n  }\n\n  /**\n   * Register instance of a child component.\n   *\n   * @param {string} name\n   *   The name of the child component.\n   * @param {BaseConstructor|BaseAsyncConstructor} component\n   *   A Base class or a Promise for async components.\n   * @private\n   */\n  __register(name: string, component: BaseConstructor | BaseAsyncConstructor) {\n    Object.defineProperty(this, name, {\n      enumerable: true,\n      configurable: true,\n      get: () => this.__getValue(name, component),\n    });\n  }\n\n  __getValue(name: string, component: BaseConstructor | BaseAsyncConstructor) {\n    const elements = getComponentElements(name, this.__element);\n\n    if (elements.length === 0) {\n      return [];\n    }\n\n    return elements\n      .map((element) => __getChild(this, element, component, name))\n      .filter((instance) => instance !== 'terminated');\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Base, BaseConstructor, BaseAsyncConstructor, BaseEl } from '../index.js';\nimport { AbstractManager } from './AbstractManager.js';\nimport { getComponentElements, addToQueue } from '../utils.js';\n\n/**\n * Get a child component's instance.\n *\n * @param {ChildrenManager} that\n * @param {HTMLElement & { __base__?: WeakMap<BaseConstructor, Base> }} el\n *   The root element of the child component.\n * @param {BaseConstructor|BaseAsyncConstructor} ComponentClass\n *   A Base class or a Promise for async components.\n * @param {string} name\n *   The name of the child component.\n * @returns {Base|Promise<Base | 'terminated'>|'terminated'}\n *   A Base instance or a Promise resolving to a Base instance.\n * @private\n */\nfunction __getChild(\n  // eslint-disable-next-line no-use-before-define\n  that: ChildrenManager,\n  el: BaseEl,\n  ComponentClass: BaseConstructor | BaseAsyncConstructor,\n  name: string,\n): Base | Promise<Base | 'terminated'> | 'terminated' {\n  const asyncComponentPromise = that.__asyncComponentPromises.get(\n    ComponentClass as BaseAsyncConstructor,\n  );\n\n  // Test if we have a constructor and not a promise or if the promise has been resolved\n  if (\n    '$isBase' in ComponentClass ||\n    (asyncComponentPromise && asyncComponentPromise.status === 'resolved')\n  ) {\n    let ctor = ComponentClass as BaseConstructor;\n\n    // Get resolved constructor from weakmap.\n    // Only test for existence as the status was checked before.\n    if (asyncComponentPromise) {\n      ctor = asyncComponentPromise.ctor;\n    }\n\n    // Return existing instance if it exists\n    if (el.__base__ && el.__base__.has(ctor)) {\n      return el.__base__.get(ctor);\n    }\n\n    // Return a new instance if the component class is a child of the Base class\n    // eslint-disable-next-line new-cap\n    const child = new ctor(el);\n    Object.defineProperty(child, '$parent', { get: () => that.__base });\n    return child;\n  }\n\n  const promise = asyncComponentPromise\n    ? asyncComponentPromise.promise\n    : ComponentClass(that.__base);\n\n  if (!asyncComponentPromise) {\n    that.__asyncComponentPromises.set(ComponentClass, {\n      promise,\n      status: 'pending',\n      ctor: undefined,\n    });\n  }\n\n  // Resolve async components\n  return promise.then((module) => {\n    // @ts-ignore\n    const ctor = module.default ?? module;\n\n    that.__asyncComponentPromises.set(ComponentClass, {\n      promise,\n      status: 'resolved',\n      ctor,\n    });\n\n    return __getChild(that, el, ctor, name);\n  });\n}\n\n/**\n * Execute the given hook for all children instances.\n *\n * @param {ChildrenManager} that\n * @param {'$mount'|'$update'|'$destroy'} hook The hook to execute.\n * @private\n */\n// eslint-disable-next-line no-use-before-define\nfunction __triggerHookForAll(that: ChildrenManager, hook: '$mount' | '$update' | '$destroy') {\n  addToQueue(() => {\n    that.registeredNames.forEach((name) => {\n      that[name].forEach((instance) => {\n        if (instance instanceof Promise) {\n          instance.then((resolvedInstance) => {\n            addToQueue(() => that.__triggerHook(hook, resolvedInstance, name));\n          });\n        } else {\n          addToQueue(() => that.__triggerHook(hook, instance, name));\n        }\n      });\n    });\n  });\n}\n\n/**\n * Children manager.\n */\nexport class ChildrenManager extends AbstractManager {\n  /**\n   * Store async component promises to avoid calling them multiple times and\n   * waiting for them when they are already resolved.\n   */\n  __asyncComponentPromises: WeakMap<\n    BaseAsyncConstructor,\n    {\n      promise: ReturnType<BaseAsyncConstructor>;\n      status: 'pending' | 'resolved';\n      ctor?: BaseConstructor;\n    }\n  > = new WeakMap();\n\n  get registeredNames(): string[] {\n    return Object.keys(this).filter((key) => !key.startsWith('__'));\n  }\n\n  /**\n   * Register instances of all children components.\n   */\n  registerAll() {\n    Object.entries(this.__config.components).forEach(([name, component]) =>\n      this.__register(name, component),\n    );\n  }\n\n  /**\n   * Mount all child component instances.\n   */\n  mountAll() {\n    __triggerHookForAll(this, '$mount');\n  }\n\n  /**\n   * Update all child component instances.\n   */\n  updateAll() {\n    __triggerHookForAll(this, '$update');\n  }\n\n  /**\n   * Destroy all child component instances.\n   */\n  destroyAll() {\n    __triggerHookForAll(this, '$destroy');\n  }\n\n  /**\n   * Execute the given hook for the given instance.\n   *\n   * @param {'$mount'|'$update'|'$destroy'} hook The hook to trigger.\n   * @param {Base} instance The target instance.\n   * @param {string} name The name of the component.\n   * @private\n   */\n  __triggerHook(hook: '$mount' | '$update' | '$destroy', instance: Base, name: string) {\n    if (hook === '$update' && !instance.$isMounted) {\n      // eslint-disable-next-line no-param-reassign\n      hook = '$mount';\n    }\n\n    if (hook === '$update' || hook === '$destroy') {\n      this.__eventsManager.unbindChild(name, instance);\n    }\n\n    if (hook === '$update' || hook === '$mount') {\n      this.__eventsManager.bindChild(name, instance);\n    }\n\n    instance[hook]();\n  }\n\n  /**\n   * Register instance of a child component.\n   *\n   * @param {string} name\n   *   The name of the child component.\n   * @param {BaseConstructor|BaseAsyncConstructor} component\n   *   A Base class or a Promise for async components.\n   * @private\n   */\n  __register(name: string, component: BaseConstructor | BaseAsyncConstructor) {\n    Object.defineProperty(this, name, {\n      enumerable: true,\n      configurable: true,\n      get: () => this.__getValue(name, component),\n    });\n  }\n\n  __getValue(name: string, component: BaseConstructor | BaseAsyncConstructor) {\n    const elements = getComponentElements(name, this.__element);\n\n    if (elements.length === 0) {\n      return [];\n    }\n\n    return elements\n      .map((element) => __getChild(this, element, component, name))\n      .filter((instance) => instance !== 'terminated');\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/Base/managers/index.cjs

@@ -20,7 +20,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var managers_exports = {};
 __export(managers_exports, {
   AbstractManager: () => import_AbstractManager.AbstractManager,
-  AsyncChildrenManager: () => import_AsyncChildrenManager.AsyncChildrenManager,
   ChildrenManager: () => import_ChildrenManager.ChildrenManager,
   EventsManager: () => import_EventsManager.EventsManager,
   OptionsManager: () => import_OptionsManager.OptionsManager,
@@ -30,7 +29,6 @@ __export(managers_exports, {
 });
 module.exports = __toCommonJS(managers_exports);
 var import_AbstractManager = require("./AbstractManager.cjs");
-var import_AsyncChildrenManager = require("./AsyncChildrenManager.cjs");
 var import_ChildrenManager = require("./ChildrenManager.cjs");
 var import_EventsManager = require("./EventsManager.cjs");
 var import_OptionsManager = require("./OptionsManager.cjs");

package/Base/managers/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/Base/managers/index.ts"],
-  "sourcesContent": ["export { AbstractManager } from './AbstractManager.js';\nexport { AsyncChildrenManager } from './AsyncChildrenManager.js';\nexport { ChildrenManager } from './ChildrenManager.js';\nexport { EventsManager } from './EventsManager.js';\nexport { OptionsManager } from './OptionsManager.js';\nexport { RefsManager } from './RefsManager.js';\nexport { ResponsiveOptionsManager } from './ResponsiveOptionsManager.js';\nexport { ServicesManager } from './ServicesManager.js';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAgC;AAChC,kCAAqC;AACrC,6BAAgC;AAChC,2BAA8B;AAC9B,4BAA+B;AAC/B,yBAA4B;AAC5B,sCAAyC;AACzC,6BAAgC;",
+  "sourcesContent": ["export { AbstractManager } from './AbstractManager.js';\nexport { ChildrenManager } from './ChildrenManager.js';\nexport { EventsManager } from './EventsManager.js';\nexport { OptionsManager } from './OptionsManager.js';\nexport { RefsManager } from './RefsManager.js';\nexport { ResponsiveOptionsManager } from './ResponsiveOptionsManager.js';\nexport { ServicesManager } from './ServicesManager.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAgC;AAChC,6BAAgC;AAChC,2BAA8B;AAC9B,4BAA+B;AAC/B,yBAA4B;AAC5B,sCAAyC;AACzC,6BAAgC;",
   "names": []
 }

package/Base/managers/index.d.ts

@@ -1,5 +1,4 @@
 export { AbstractManager } from './AbstractManager.js';
-export { AsyncChildrenManager } from './AsyncChildrenManager.js';
 export { ChildrenManager } from './ChildrenManager.js';
 export { EventsManager } from './EventsManager.js';
 export { OptionsManager } from './OptionsManager.js';

package/Base/managers/index.js

@@ -1,5 +1,4 @@
 import { AbstractManager } from "./AbstractManager.js";
-import { AsyncChildrenManager } from "./AsyncChildrenManager.js";
 import { ChildrenManager } from "./ChildrenManager.js";
 import { EventsManager } from "./EventsManager.js";
 import { OptionsManager } from "./OptionsManager.js";
@@ -8,7 +7,6 @@ import { ResponsiveOptionsManager } from "./ResponsiveOptionsManager.js";
 import { ServicesManager } from "./ServicesManager.js";
 export {
   AbstractManager,
-  AsyncChildrenManager,
   ChildrenManager,
   EventsManager,
   OptionsManager,

package/Base/managers/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/Base/managers/index.ts"],
-  "sourcesContent": ["export { AbstractManager } from './AbstractManager.js';\nexport { AsyncChildrenManager } from './AsyncChildrenManager.js';\nexport { ChildrenManager } from './ChildrenManager.js';\nexport { EventsManager } from './EventsManager.js';\nexport { OptionsManager } from './OptionsManager.js';\nexport { RefsManager } from './RefsManager.js';\nexport { ResponsiveOptionsManager } from './ResponsiveOptionsManager.js';\nexport { ServicesManager } from './ServicesManager.js';\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,uBAAuB;",
+  "sourcesContent": ["export { AbstractManager } from './AbstractManager.js';\nexport { ChildrenManager } from './ChildrenManager.js';\nexport { EventsManager } from './EventsManager.js';\nexport { OptionsManager } from './OptionsManager.js';\nexport { RefsManager } from './RefsManager.js';\nexport { ResponsiveOptionsManager } from './ResponsiveOptionsManager.js';\nexport { ServicesManager } from './ServicesManager.js';\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,uBAAuB;",
   "names": []
 }

package/Base/utils.cjs

@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/js-toolkit/Base/utils.ts
 var utils_exports = {};
 __export(utils_exports, {
+  addToQueue: () => addToQueue,
   eventIsDefinedInConfig: () => eventIsDefinedInConfig,
   eventIsNative: () => eventIsNative,
   getComponentElements: () => getComponentElements,
@@ -26,6 +27,18 @@ __export(utils_exports, {
 });
 module.exports = __toCommonJS(utils_exports);
 var import_utils = require("../utils/index.cjs");
+var import_features = require("./features.cjs");
+var queue;
+function addToQueue(fn) {
+  if (!import_features.features.get("asyncChildren")) {
+    fn();
+    return;
+  }
+  if (!queue) {
+    queue = new import_utils.SmartQueue();
+  }
+  queue.add(fn);
+}
 var selectors = /* @__PURE__ */ new Map();
 var separator = " ";
 function getSelector(nameOrSelector) {

package/Base/utils.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/Base/utils.ts"],
-  "sourcesContent": ["import { isArray, isDefined, isDev } from '../utils/index.js';\nimport type { Base, BaseConfig } from './index.js';\n\nconst selectors = new Map();\n\n// Separator used for multi-component declaration in `data-component` attributeS.\nconst separator = ' ';\n\n/**\n * Get the selector for a given component.\n */\nfunction getSelector(nameOrSelector: string): string {\n  if (!selectors.has(nameOrSelector)) {\n    const parts = [\n      // Single selector\n      `[data-component=\"${nameOrSelector}\"]`,\n      // Selector in the middle of a list of selectors\n      `[data-component*=\"${separator}${nameOrSelector}${separator}\"]`,\n      // Selector at the end of a list of selectors\n      `[data-component$=\"${separator}${nameOrSelector}\"]`,\n      // Selector at the beginning of a list of selectors\n      `[data-component^=\"${nameOrSelector}${separator}\"]`,\n    ];\n    selectors.set(nameOrSelector, parts.join(','));\n  }\n\n  return selectors.get(nameOrSelector);\n}\n\n/**\n * Get a list of elements based on the name of a component.\n *\n * @param {string} nameOrSelector\n *   The name or selector to used for this component.\n * @param {HTMLElement|Document} element\n *   The root element on which to query the selector, defaults to `document`.\n * @returns {Array<HTMLElement>}\n *   A list of elements on which the component should be mounted.\n */\nexport function getComponentElements(\n  nameOrSelector: string,\n  element: HTMLElement | Document = document,\n): HTMLElement[] {\n  const selector = getSelector(nameOrSelector);\n  let elements = [];\n\n  try {\n    elements = Array.from(element.querySelectorAll(selector));\n    // eslint-disable-next-line no-empty\n  } catch {}\n\n  // If no child component found with the default selector, try a classic DOM selector\n  if (elements.length === 0) {\n    elements = Array.from(element.querySelectorAll(nameOrSelector));\n  }\n\n  return elements;\n}\n\n/**\n * Test if an event is defined in the given config.\n */\nexport function eventIsDefinedInConfig(event: string, config: BaseConfig): boolean {\n  return isArray(config.emits) && config.emits.includes(event);\n}\n\n/**\n * Test if an event can be used on the given element.\n */\nexport function eventIsNative(event: string, element: HTMLElement): boolean {\n  return isDefined(element[`on${event}`]);\n}\n\n/**\n * Get the target of a given event.\n * @todo Return false in v3 if event is not defined or not native to prevent adding a listener.\n */\nexport function getEventTarget(\n  instance: Base,\n  event: string,\n  config: BaseConfig,\n): Base | Base['$el'] {\n  if (eventIsDefinedInConfig(event, config)) {\n    return instance;\n  }\n\n  if (eventIsNative(event, instance.$el)) {\n    return instance.$el;\n  }\n\n  if (isDev) {\n    console.warn(\n      `[${config.name}]`,\n      `The \"${event}\" event is missing from the configuration and is not a native`,\n      `event for the root element of type \\`${instance.$el.constructor.name}\\`.`,\n    );\n  }\n\n  // @todo v3 return false or null\n  return instance;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAG1C,IAAM,YAAY,oBAAI,IAAI;AAG1B,IAAM,YAAY;AAKlB,SAAS,YAAY,gBAAgC;AACnD,MAAI,CAAC,UAAU,IAAI,cAAc,GAAG;AAClC,UAAM,QAAQ;AAAA,MAEZ,oBAAoB;AAAA,MAEpB,qBAAqB,YAAY,iBAAiB;AAAA,MAElD,qBAAqB,YAAY;AAAA,MAEjC,qBAAqB,iBAAiB;AAAA,IACxC;AACA,cAAU,IAAI,gBAAgB,MAAM,KAAK,GAAG,CAAC;AAAA,EAC/C;AAEA,SAAO,UAAU,IAAI,cAAc;AACrC;AAYO,SAAS,qBACd,gBACA,UAAkC,UACnB;AACf,QAAM,WAAW,YAAY,cAAc;AAC3C,MAAI,WAAW,CAAC;AAEhB,MAAI;AACF,eAAW,MAAM,KAAK,QAAQ,iBAAiB,QAAQ,CAAC;AAAA,EAE1D,QAAE;AAAA,EAAO;AAGT,MAAI,SAAS,WAAW,GAAG;AACzB,eAAW,MAAM,KAAK,QAAQ,iBAAiB,cAAc,CAAC;AAAA,EAChE;AAEA,SAAO;AACT;AAKO,SAAS,uBAAuB,OAAe,QAA6B;AACjF,aAAO,sBAAQ,OAAO,KAAK,KAAK,OAAO,MAAM,SAAS,KAAK;AAC7D;AAKO,SAAS,cAAc,OAAe,SAA+B;AAC1E,aAAO,wBAAU,QAAQ,KAAK,QAAQ;AACxC;AAMO,SAAS,eACd,UACA,OACA,QACoB;AACpB,MAAI,uBAAuB,OAAO,MAAM,GAAG;AACzC,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO,SAAS,GAAG,GAAG;AACtC,WAAO,SAAS;AAAA,EAClB;AAEA,MAAI,oBAAO;AACT,YAAQ;AAAA,MACN,IAAI,OAAO;AAAA,MACX,QAAQ;AAAA,MACR,wCAAwC,SAAS,IAAI,YAAY;AAAA,IACnE;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { isArray, isDefined, isDev, SmartQueue } from '../utils/index.js';\nimport type { Base, BaseConfig } from './index.js';\nimport { features } from './features.js';\n\nlet queue: SmartQueue;\n\n/**\n * Add a task to the main queue.\n */\nexport function addToQueue(fn: () => unknown): void {\n  if (!features.get('asyncChildren')) {\n    fn();\n    return;\n  }\n\n  if (!queue) {\n    queue = new SmartQueue();\n  }\n\n  queue.add(fn);\n}\n\nconst selectors = new Map();\n\n// Separator used for multi-component declaration in `data-component` attributeS.\nconst separator = ' ';\n\n/**\n * Get the selector for a given component.\n */\nfunction getSelector(nameOrSelector: string): string {\n  if (!selectors.has(nameOrSelector)) {\n    const parts = [\n      // Single selector\n      `[data-component=\"${nameOrSelector}\"]`,\n      // Selector in the middle of a list of selectors\n      `[data-component*=\"${separator}${nameOrSelector}${separator}\"]`,\n      // Selector at the end of a list of selectors\n      `[data-component$=\"${separator}${nameOrSelector}\"]`,\n      // Selector at the beginning of a list of selectors\n      `[data-component^=\"${nameOrSelector}${separator}\"]`,\n    ];\n    selectors.set(nameOrSelector, parts.join(','));\n  }\n\n  return selectors.get(nameOrSelector);\n}\n\n/**\n * Get a list of elements based on the name of a component.\n *\n * @param {string} nameOrSelector\n *   The name or selector to used for this component.\n * @param {HTMLElement|Document} element\n *   The root element on which to query the selector, defaults to `document`.\n * @returns {Array<HTMLElement>}\n *   A list of elements on which the component should be mounted.\n */\nexport function getComponentElements(\n  nameOrSelector: string,\n  element: HTMLElement | Document = document,\n): HTMLElement[] {\n  const selector = getSelector(nameOrSelector);\n  let elements = [];\n\n  try {\n    elements = Array.from(element.querySelectorAll(selector));\n    // eslint-disable-next-line no-empty\n  } catch {}\n\n  // If no child component found with the default selector, try a classic DOM selector\n  if (elements.length === 0) {\n    elements = Array.from(element.querySelectorAll(nameOrSelector));\n  }\n\n  return elements;\n}\n\n/**\n * Test if an event is defined in the given config.\n */\nexport function eventIsDefinedInConfig(event: string, config: BaseConfig): boolean {\n  return isArray(config.emits) && config.emits.includes(event);\n}\n\n/**\n * Test if an event can be used on the given element.\n */\nexport function eventIsNative(event: string, element: HTMLElement): boolean {\n  return isDefined(element[`on${event}`]);\n}\n\n/**\n * Get the target of a given event.\n * @todo Return false in v3 if event is not defined or not native to prevent adding a listener.\n */\nexport function getEventTarget(\n  instance: Base,\n  event: string,\n  config: BaseConfig,\n): Base | Base['$el'] {\n  if (eventIsDefinedInConfig(event, config)) {\n    return instance;\n  }\n\n  if (eventIsNative(event, instance.$el)) {\n    return instance.$el;\n  }\n\n  if (isDev) {\n    console.warn(\n      `[${config.name}]`,\n      `The \"${event}\" event is missing from the configuration and is not a native`,\n      `event for the root element of type \\`${instance.$el.constructor.name}\\`.`,\n    );\n  }\n\n  // @todo v3 return false or null\n  return instance;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsD;AAEtD,sBAAyB;AAEzB,IAAI;AAKG,SAAS,WAAW,IAAyB;AAClD,MAAI,CAAC,yBAAS,IAAI,eAAe,GAAG;AAClC,OAAG;AACH;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACV,YAAQ,IAAI,wBAAW;AAAA,EACzB;AAEA,QAAM,IAAI,EAAE;AACd;AAEA,IAAM,YAAY,oBAAI,IAAI;AAG1B,IAAM,YAAY;AAKlB,SAAS,YAAY,gBAAgC;AACnD,MAAI,CAAC,UAAU,IAAI,cAAc,GAAG;AAClC,UAAM,QAAQ;AAAA,MAEZ,oBAAoB;AAAA,MAEpB,qBAAqB,YAAY,iBAAiB;AAAA,MAElD,qBAAqB,YAAY;AAAA,MAEjC,qBAAqB,iBAAiB;AAAA,IACxC;AACA,cAAU,IAAI,gBAAgB,MAAM,KAAK,GAAG,CAAC;AAAA,EAC/C;AAEA,SAAO,UAAU,IAAI,cAAc;AACrC;AAYO,SAAS,qBACd,gBACA,UAAkC,UACnB;AACf,QAAM,WAAW,YAAY,cAAc;AAC3C,MAAI,WAAW,CAAC;AAEhB,MAAI;AACF,eAAW,MAAM,KAAK,QAAQ,iBAAiB,QAAQ,CAAC;AAAA,EAE1D,QAAE;AAAA,EAAO;AAGT,MAAI,SAAS,WAAW,GAAG;AACzB,eAAW,MAAM,KAAK,QAAQ,iBAAiB,cAAc,CAAC;AAAA,EAChE;AAEA,SAAO;AACT;AAKO,SAAS,uBAAuB,OAAe,QAA6B;AACjF,aAAO,sBAAQ,OAAO,KAAK,KAAK,OAAO,MAAM,SAAS,KAAK;AAC7D;AAKO,SAAS,cAAc,OAAe,SAA+B;AAC1E,aAAO,wBAAU,QAAQ,KAAK,QAAQ;AACxC;AAMO,SAAS,eACd,UACA,OACA,QACoB;AACpB,MAAI,uBAAuB,OAAO,MAAM,GAAG;AACzC,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO,SAAS,GAAG,GAAG;AACtC,WAAO,SAAS;AAAA,EAClB;AAEA,MAAI,oBAAO;AACT,YAAQ;AAAA,MACN,IAAI,OAAO;AAAA,MACX,QAAQ;AAAA,MACR,wCAAwC,SAAS,IAAI,YAAY;AAAA,IACnE;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/Base/utils.d.ts

@@ -1,4 +1,8 @@
 import type { Base, BaseConfig } from './index.js';
+/**
+ * Add a task to the main queue.
+ */
+export declare function addToQueue(fn: () => unknown): void;
 /**
  * Get a list of elements based on the name of a component.
  *

package/Base/utils.js

@@ -1,4 +1,16 @@
-import { isArray, isDefined, isDev } from "../utils/index.js";
+import { isArray, isDefined, isDev, SmartQueue } from "../utils/index.js";
+import { features } from "./features.js";
+let queue;
+function addToQueue(fn) {
+  if (!features.get("asyncChildren")) {
+    fn();
+    return;
+  }
+  if (!queue) {
+    queue = new SmartQueue();
+  }
+  queue.add(fn);
+}
 const selectors = /* @__PURE__ */ new Map();
 const separator = " ";
 function getSelector(nameOrSelector) {
@@ -48,6 +60,7 @@ function getEventTarget(instance, event, config) {
   return instance;
 }
 export {
+  addToQueue,
   eventIsDefinedInConfig,
   eventIsNative,
   getComponentElements,

package/Base/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/Base/utils.ts"],
-  "sourcesContent": ["import { isArray, isDefined, isDev } from '../utils/index.js';\nimport type { Base, BaseConfig } from './index.js';\n\nconst selectors = new Map();\n\n// Separator used for multi-component declaration in `data-component` attributeS.\nconst separator = ' ';\n\n/**\n * Get the selector for a given component.\n */\nfunction getSelector(nameOrSelector: string): string {\n  if (!selectors.has(nameOrSelector)) {\n    const parts = [\n      // Single selector\n      `[data-component=\"${nameOrSelector}\"]`,\n      // Selector in the middle of a list of selectors\n      `[data-component*=\"${separator}${nameOrSelector}${separator}\"]`,\n      // Selector at the end of a list of selectors\n      `[data-component$=\"${separator}${nameOrSelector}\"]`,\n      // Selector at the beginning of a list of selectors\n      `[data-component^=\"${nameOrSelector}${separator}\"]`,\n    ];\n    selectors.set(nameOrSelector, parts.join(','));\n  }\n\n  return selectors.get(nameOrSelector);\n}\n\n/**\n * Get a list of elements based on the name of a component.\n *\n * @param {string} nameOrSelector\n *   The name or selector to used for this component.\n * @param {HTMLElement|Document} element\n *   The root element on which to query the selector, defaults to `document`.\n * @returns {Array<HTMLElement>}\n *   A list of elements on which the component should be mounted.\n */\nexport function getComponentElements(\n  nameOrSelector: string,\n  element: HTMLElement | Document = document,\n): HTMLElement[] {\n  const selector = getSelector(nameOrSelector);\n  let elements = [];\n\n  try {\n    elements = Array.from(element.querySelectorAll(selector));\n    // eslint-disable-next-line no-empty\n  } catch {}\n\n  // If no child component found with the default selector, try a classic DOM selector\n  if (elements.length === 0) {\n    elements = Array.from(element.querySelectorAll(nameOrSelector));\n  }\n\n  return elements;\n}\n\n/**\n * Test if an event is defined in the given config.\n */\nexport function eventIsDefinedInConfig(event: string, config: BaseConfig): boolean {\n  return isArray(config.emits) && config.emits.includes(event);\n}\n\n/**\n * Test if an event can be used on the given element.\n */\nexport function eventIsNative(event: string, element: HTMLElement): boolean {\n  return isDefined(element[`on${event}`]);\n}\n\n/**\n * Get the target of a given event.\n * @todo Return false in v3 if event is not defined or not native to prevent adding a listener.\n */\nexport function getEventTarget(\n  instance: Base,\n  event: string,\n  config: BaseConfig,\n): Base | Base['$el'] {\n  if (eventIsDefinedInConfig(event, config)) {\n    return instance;\n  }\n\n  if (eventIsNative(event, instance.$el)) {\n    return instance.$el;\n  }\n\n  if (isDev) {\n    console.warn(\n      `[${config.name}]`,\n      `The \"${event}\" event is missing from the configuration and is not a native`,\n      `event for the root element of type \\`${instance.$el.constructor.name}\\`.`,\n    );\n  }\n\n  // @todo v3 return false or null\n  return instance;\n}\n"],
-  "mappings": "AAAA,SAAS,SAAS,WAAW,aAAa;AAG1C,MAAM,YAAY,oBAAI,IAAI;AAG1B,MAAM,YAAY;AAKlB,SAAS,YAAY,gBAAgC;AACnD,MAAI,CAAC,UAAU,IAAI,cAAc,GAAG;AAClC,UAAM,QAAQ;AAAA,MAEZ,oBAAoB;AAAA,MAEpB,qBAAqB,YAAY,iBAAiB;AAAA,MAElD,qBAAqB,YAAY;AAAA,MAEjC,qBAAqB,iBAAiB;AAAA,IACxC;AACA,cAAU,IAAI,gBAAgB,MAAM,KAAK,GAAG,CAAC;AAAA,EAC/C;AAEA,SAAO,UAAU,IAAI,cAAc;AACrC;AAYO,SAAS,qBACd,gBACA,UAAkC,UACnB;AACf,QAAM,WAAW,YAAY,cAAc;AAC3C,MAAI,WAAW,CAAC;AAEhB,MAAI;AACF,eAAW,MAAM,KAAK,QAAQ,iBAAiB,QAAQ,CAAC;AAAA,EAE1D,QAAE;AAAA,EAAO;AAGT,MAAI,SAAS,WAAW,GAAG;AACzB,eAAW,MAAM,KAAK,QAAQ,iBAAiB,cAAc,CAAC;AAAA,EAChE;AAEA,SAAO;AACT;AAKO,SAAS,uBAAuB,OAAe,QAA6B;AACjF,SAAO,QAAQ,OAAO,KAAK,KAAK,OAAO,MAAM,SAAS,KAAK;AAC7D;AAKO,SAAS,cAAc,OAAe,SAA+B;AAC1E,SAAO,UAAU,QAAQ,KAAK,QAAQ;AACxC;AAMO,SAAS,eACd,UACA,OACA,QACoB;AACpB,MAAI,uBAAuB,OAAO,MAAM,GAAG;AACzC,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO,SAAS,GAAG,GAAG;AACtC,WAAO,SAAS;AAAA,EAClB;AAEA,MAAI,OAAO;AACT,YAAQ;AAAA,MACN,IAAI,OAAO;AAAA,MACX,QAAQ;AAAA,MACR,wCAAwC,SAAS,IAAI,YAAY;AAAA,IACnE;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { isArray, isDefined, isDev, SmartQueue } from '../utils/index.js';\nimport type { Base, BaseConfig } from './index.js';\nimport { features } from './features.js';\n\nlet queue: SmartQueue;\n\n/**\n * Add a task to the main queue.\n */\nexport function addToQueue(fn: () => unknown): void {\n  if (!features.get('asyncChildren')) {\n    fn();\n    return;\n  }\n\n  if (!queue) {\n    queue = new SmartQueue();\n  }\n\n  queue.add(fn);\n}\n\nconst selectors = new Map();\n\n// Separator used for multi-component declaration in `data-component` attributeS.\nconst separator = ' ';\n\n/**\n * Get the selector for a given component.\n */\nfunction getSelector(nameOrSelector: string): string {\n  if (!selectors.has(nameOrSelector)) {\n    const parts = [\n      // Single selector\n      `[data-component=\"${nameOrSelector}\"]`,\n      // Selector in the middle of a list of selectors\n      `[data-component*=\"${separator}${nameOrSelector}${separator}\"]`,\n      // Selector at the end of a list of selectors\n      `[data-component$=\"${separator}${nameOrSelector}\"]`,\n      // Selector at the beginning of a list of selectors\n      `[data-component^=\"${nameOrSelector}${separator}\"]`,\n    ];\n    selectors.set(nameOrSelector, parts.join(','));\n  }\n\n  return selectors.get(nameOrSelector);\n}\n\n/**\n * Get a list of elements based on the name of a component.\n *\n * @param {string} nameOrSelector\n *   The name or selector to used for this component.\n * @param {HTMLElement|Document} element\n *   The root element on which to query the selector, defaults to `document`.\n * @returns {Array<HTMLElement>}\n *   A list of elements on which the component should be mounted.\n */\nexport function getComponentElements(\n  nameOrSelector: string,\n  element: HTMLElement | Document = document,\n): HTMLElement[] {\n  const selector = getSelector(nameOrSelector);\n  let elements = [];\n\n  try {\n    elements = Array.from(element.querySelectorAll(selector));\n    // eslint-disable-next-line no-empty\n  } catch {}\n\n  // If no child component found with the default selector, try a classic DOM selector\n  if (elements.length === 0) {\n    elements = Array.from(element.querySelectorAll(nameOrSelector));\n  }\n\n  return elements;\n}\n\n/**\n * Test if an event is defined in the given config.\n */\nexport function eventIsDefinedInConfig(event: string, config: BaseConfig): boolean {\n  return isArray(config.emits) && config.emits.includes(event);\n}\n\n/**\n * Test if an event can be used on the given element.\n */\nexport function eventIsNative(event: string, element: HTMLElement): boolean {\n  return isDefined(element[`on${event}`]);\n}\n\n/**\n * Get the target of a given event.\n * @todo Return false in v3 if event is not defined or not native to prevent adding a listener.\n */\nexport function getEventTarget(\n  instance: Base,\n  event: string,\n  config: BaseConfig,\n): Base | Base['$el'] {\n  if (eventIsDefinedInConfig(event, config)) {\n    return instance;\n  }\n\n  if (eventIsNative(event, instance.$el)) {\n    return instance.$el;\n  }\n\n  if (isDev) {\n    console.warn(\n      `[${config.name}]`,\n      `The \"${event}\" event is missing from the configuration and is not a native`,\n      `event for the root element of type \\`${instance.$el.constructor.name}\\`.`,\n    );\n  }\n\n  // @todo v3 return false or null\n  return instance;\n}\n"],
+  "mappings": "AAAA,SAAS,SAAS,WAAW,OAAO,kBAAkB;AAEtD,SAAS,gBAAgB;AAEzB,IAAI;AAKG,SAAS,WAAW,IAAyB;AAClD,MAAI,CAAC,SAAS,IAAI,eAAe,GAAG;AAClC,OAAG;AACH;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACV,YAAQ,IAAI,WAAW;AAAA,EACzB;AAEA,QAAM,IAAI,EAAE;AACd;AAEA,MAAM,YAAY,oBAAI,IAAI;AAG1B,MAAM,YAAY;AAKlB,SAAS,YAAY,gBAAgC;AACnD,MAAI,CAAC,UAAU,IAAI,cAAc,GAAG;AAClC,UAAM,QAAQ;AAAA,MAEZ,oBAAoB;AAAA,MAEpB,qBAAqB,YAAY,iBAAiB;AAAA,MAElD,qBAAqB,YAAY;AAAA,MAEjC,qBAAqB,iBAAiB;AAAA,IACxC;AACA,cAAU,IAAI,gBAAgB,MAAM,KAAK,GAAG,CAAC;AAAA,EAC/C;AAEA,SAAO,UAAU,IAAI,cAAc;AACrC;AAYO,SAAS,qBACd,gBACA,UAAkC,UACnB;AACf,QAAM,WAAW,YAAY,cAAc;AAC3C,MAAI,WAAW,CAAC;AAEhB,MAAI;AACF,eAAW,MAAM,KAAK,QAAQ,iBAAiB,QAAQ,CAAC;AAAA,EAE1D,QAAE;AAAA,EAAO;AAGT,MAAI,SAAS,WAAW,GAAG;AACzB,eAAW,MAAM,KAAK,QAAQ,iBAAiB,cAAc,CAAC;AAAA,EAChE;AAEA,SAAO;AACT;AAKO,SAAS,uBAAuB,OAAe,QAA6B;AACjF,SAAO,QAAQ,OAAO,KAAK,KAAK,OAAO,MAAM,SAAS,KAAK;AAC7D;AAKO,SAAS,cAAc,OAAe,SAA+B;AAC1E,SAAO,UAAU,QAAQ,KAAK,QAAQ;AACxC;AAMO,SAAS,eACd,UACA,OACA,QACoB;AACpB,MAAI,uBAAuB,OAAO,MAAM,GAAG;AACzC,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO,SAAS,GAAG,GAAG;AACtC,WAAO,SAAS;AAAA,EAClB;AAEA,MAAI,OAAO;AACT,YAAQ;AAAA,MACN,IAAI,OAAO;AAAA,MACX,QAAQ;AAAA,MACR,wCAAwC,SAAS,IAAI,YAAY;AAAA,IACnE;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withScrolledInView/withScrolledInView.cjs

@@ -26,6 +26,11 @@ var import_withMountWhenInView = require("../withMountWhenInView.cjs");
 var import_utils = require("../../utils/index.cjs");
 var import_utils2 = require("./utils.cjs");
 var scheduler = (0, import_utils.useScheduler)(["update", "render"]);
+function updateProgress(props, axis, progressKey, currentKey) {
+  props[progressKey][axis] = props.start[axis] === props.end[axis] ? 0 : (0, import_utils.clamp01)(
+    (props[currentKey][axis] - props.start[axis]) / (props.end[axis] - props.start[axis])
+  );
+}
 function updateProps(props, dampFactor, dampPrecision, axis = "x") {
   props.current[axis] = (0, import_utils.clamp)(
     axis === "x" ? window.pageXOffset : window.pageYOffset,
@@ -38,12 +43,8 @@ function updateProps(props, dampFactor, dampPrecision, axis = "x") {
     dampFactor,
     dampPrecision
   );
-  props.progress[axis] = (0, import_utils.clamp01)(
-    (props.current[axis] - props.start[axis]) / (props.end[axis] - props.start[axis])
-  );
-  props.dampedProgress[axis] = (0, import_utils.clamp01)(
-    (props.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis])
-  );
+  updateProgress(props, axis, "progress", "current");
+  updateProgress(props, axis, "dampedProgress", "dampedCurrent");
 }
 function withScrolledInView(BaseClass, options = {}) {
   class WithScrolledInView extends (0, import_withMountWhenInView.withMountWhenInView)(
@@ -94,13 +95,48 @@ function withScrolledInView(BaseClass, options = {}) {
         y: 0
       }
     };
+    shouldEvaluateProps = true;
+    get props() {
+      if (this.shouldEvaluateProps) {
+        this.shouldEvaluateProps = false;
+        const targetSizes = options.useOffsetSizes ? (0, import_utils.getOffsetSizes)(this.$el) : this.$el.getBoundingClientRect();
+        targetSizes.y += window.pageYOffset;
+        targetSizes.x += window.pageXOffset;
+        const containerSizes = {
+          x: 0,
+          y: 0,
+          height: window.innerHeight,
+          width: window.innerWidth
+        };
+        const offset = (0, import_utils2.normalizeOffset)(this.$options.offset);
+        const [yStart, yEnd] = (0, import_utils2.getEdges)("y", targetSizes, containerSizes, offset);
+        const yCurrent = (0, import_utils.clamp)(window.pageYOffset, yStart, yEnd);
+        const yProgress = yStart === yEnd ? 0 : (0, import_utils.clamp01)((yCurrent - yStart) / (yEnd - yStart));
+        const [xStart, xEnd] = (0, import_utils2.getEdges)("x", targetSizes, containerSizes, offset);
+        const xCurrent = (0, import_utils.clamp)(window.pageXOffset, xStart, xEnd);
+        const xProgress = xStart === xEnd ? 0 : (0, import_utils.clamp01)((xCurrent - xStart) / (xEnd - xStart));
+        this.__props.start.x = xStart;
+        this.__props.start.y = yStart;
+        this.__props.end.x = xEnd;
+        this.__props.end.y = yEnd;
+        this.__props.current.x = xCurrent;
+        this.__props.current.y = yCurrent;
+        this.__props.dampedCurrent.x = xCurrent;
+        this.__props.dampedCurrent.y = yCurrent;
+        this.__props.progress.x = xProgress;
+        this.__props.progress.y = yProgress;
+        this.__props.dampedProgress.x = xProgress;
+        this.__props.dampedProgress.y = yProgress;
+      }
+      return this.__props;
+    }
     dampFactor = null;
     dampPrecision = null;
     constructor(element) {
       super(element);
       const render = () => {
         scheduler.update(() => {
-          const renderFn = this.__callMethod("scrolledInView", this.__props);
+          const renderFn = this.__callMethod("scrolledInView", this.props);
           if ((0, import_utils.isFunction)(renderFn)) {
             scheduler.render(() => {
               renderFn(this.__props);
@@ -113,7 +149,8 @@ function withScrolledInView(BaseClass, options = {}) {
           delegate[event.type](event.detail[0]);
         },
         resized: () => {
-          this.__setProps();
+          this.shouldEvaluateProps = true;
+          render();
         },
         scrolled: (props) => {
           if (!this.$services.has("ticked") && props.changed.y || props.changed.x) {
@@ -136,9 +173,6 @@ function withScrolledInView(BaseClass, options = {}) {
         this.$on("scrolled", delegate);
         this.$on("ticked", delegate);
       });
-      this.$on("mounted", () => {
-        this.__setProps();
-      });
       this.$on("destroyed", () => {
         this.$off("resized", delegate);
         this.$off("scrolled", delegate);
@@ -175,50 +209,6 @@ function withScrolledInView(BaseClass, options = {}) {
         super.destroyed();
       }
     }
-    __setProps() {
-      const targetSizes = options.useOffsetSizes ? (0, import_utils.getOffsetSizes)(this.$el) : this.$el.getBoundingClientRect();
-      targetSizes.y += window.pageYOffset;
-      targetSizes.x += window.pageXOffset;
-      const containerSizes = {
-        x: 0,
-        y: 0,
-        height: window.innerHeight,
-        width: window.innerWidth
-      };
-      const offset = (0, import_utils2.normalizeOffset)(this.$options.offset);
-      const [yStart, yEnd] = (0, import_utils2.getEdges)("y", targetSizes, containerSizes, offset);
-      const yCurrent = (0, import_utils.clamp)(window.pageYOffset, yStart, yEnd);
-      const yProgress = (0, import_utils.clamp01)((yCurrent - yStart) / (yEnd - yStart));
-      const [xStart, xEnd] = (0, import_utils2.getEdges)("x", targetSizes, containerSizes, offset);
-      const xCurrent = (0, import_utils.clamp)(window.pageXOffset, xStart, xEnd);
-      const xProgress = (0, import_utils.clamp01)((xCurrent - xStart) / (xEnd - xStart));
-      this.__props.start.x = xStart;
-      this.__props.start.y = yStart;
-      this.__props.end.x = xEnd;
-      this.__props.end.y = yEnd;
-      this.__props.current.x = xCurrent;
-      this.__props.current.y = yCurrent;
-      this.__props.dampedCurrent.x = (0, import_utils.damp)(
-        xCurrent,
-        this.__props.dampedCurrent.x,
-        this.dampFactor,
-        this.dampPrecision
-      );
-      this.__props.dampedCurrent.y = (0, import_utils.damp)(
-        yCurrent,
-        this.__props.dampedCurrent.y,
-        this.dampFactor,
-        this.dampPrecision
-      );
-      this.__props.progress.x = xProgress;
-      this.__props.progress.y = yProgress;
-      this.__props.dampedProgress.x = (0, import_utils.clamp01)(
-        (this.__props.dampedCurrent.x - xStart) / (xEnd - xStart)
-      );
-      this.__props.dampedProgress.y = (0, import_utils.clamp01)(
-        (this.__props.dampedCurrent.y - yStart) / (yEnd - yStart)
-      );
-    }
   }
   return WithScrolledInView;
 }

package/decorators/withScrolledInView/withScrolledInView.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/decorators/withScrolledInView/withScrolledInView.ts"],
-  "sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../../Base/index.js';\nimport type {\n  RafServiceProps,\n  ScrollServiceProps,\n  ResizeServiceProps,\n} from '../../services/index.js';\nimport { withMountWhenInView } from '../withMountWhenInView.js';\nimport {\n  damp,\n  clamp,\n  clamp01,\n  getOffsetSizes,\n  isFunction,\n  useScheduler,\n} from '../../utils/index.js';\nimport { normalizeOffset, getEdges } from './utils.js';\n\nconst scheduler = useScheduler(['update', 'render']);\n\nexport interface WithScrolledInViewProps extends BaseProps {\n  $options: {\n    dampFactor: number;\n    dampPrecision: number;\n    offset: string;\n  };\n}\n\nexport type ScrollInViewProps = {\n  start: {\n    x: number;\n    y: number;\n  };\n  end: {\n    x: number;\n    y: number;\n  };\n  current: {\n    x: number;\n    y: number;\n  };\n  dampedCurrent: {\n    x: number;\n    y: number;\n  };\n  progress: {\n    x: number;\n    y: number;\n  };\n  dampedProgress: {\n    x: number;\n    y: number;\n  };\n};\n\nexport type WithScrolledInViewOptions = IntersectionObserverInit & {\n  useOffsetSizes?: boolean;\n};\n\n/**\n * Update props on tick.\n */\nfunction updateProps(\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n): void {\n  props.current[axis] = clamp(\n    axis === 'x' ? window.pageXOffset : window.pageYOffset,\n    props.start[axis],\n    props.end[axis],\n  );\n  props.dampedCurrent[axis] = damp(\n    props.current[axis],\n    props.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  props.progress[axis] = clamp01(\n    (props.current[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n  props.dampedProgress[axis] = clamp01(\n    (props.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n}\n\nexport interface WithScrolledInViewInterface extends BaseInterface {\n  /**\n   * @private\n   * @type {ScrollInViewProps}\n   */\n  __props: ScrollInViewProps;\n  dampFactor?: number;\n  dampPrecision?: number;\n  mounted(): void;\n  resized(props: ResizeServiceProps): void;\n  scrolled(props: ScrollServiceProps): void;\n  ticked(props: RafServiceProps): void;\n  destroyed(): void;\n  /**\n   * @private\n   */\n  __setProps(): void;\n}\n\n/**\n * Add scrolled in view capabilities to a component.\n */\nexport function withScrolledInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  options: WithScrolledInViewOptions = {},\n): BaseDecorator<WithScrolledInViewInterface, S, WithScrolledInViewProps> {\n  /**\n   * Class.\n   */\n  class WithScrolledInView<T extends BaseProps = BaseProps> extends withMountWhenInView(\n    BaseClass,\n    options,\n  )<T & WithScrolledInViewProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      emits: ['scrolledInView'],\n      options: {\n        dampFactor: {\n          type: Number,\n          default: 0.1,\n        },\n        dampPrecision: {\n          type: Number,\n          default: 0.001,\n        },\n        offset: {\n          type: String,\n          default: 'start end / end start',\n        },\n      },\n    };\n\n    __props: ScrollInViewProps = {\n      start: {\n        x: 0,\n        y: 0,\n      },\n      end: {\n        x: 0,\n        y: 0,\n      },\n      current: {\n        x: 0,\n        y: 0,\n      },\n      dampedCurrent: {\n        x: 0,\n        y: 0,\n      },\n      progress: {\n        x: 0,\n        y: 0,\n      },\n      dampedProgress: {\n        x: 0,\n        y: 0,\n      },\n    };\n\n    /**\n     * Factor used for the `dampedProgress` props.\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampFactor?: number = null;\n\n    /**\n     * Precision for the `dampedProgress` props.\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampPrecision?: number = null;\n\n    /**\n     * Bind listeners.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const render = () => {\n        scheduler.update(() => {\n          // @ts-ignore\n          const renderFn = this.__callMethod('scrolledInView', this.__props);\n          if (isFunction(renderFn)) {\n            scheduler.render(() => {\n              renderFn(this.__props);\n            });\n          }\n        });\n      };\n\n      const delegate = {\n        handleEvent(event) {\n          delegate[event.type](event.detail[0]);\n        },\n        resized: () => {\n          this.__setProps();\n        },\n        scrolled: (props) => {\n          if ((!this.$services.has('ticked') && props.changed.y) || props.changed.x) {\n            this.$services.enable('ticked');\n          }\n        },\n        ticked: () => {\n          const dampFactor = this.dampFactor ?? this.$options.dampFactor;\n          const dampPrecision = this.dampPrecision ?? this.$options.dampPrecision;\n\n          updateProps(this.__props, dampFactor, dampPrecision, 'x');\n          updateProps(this.__props, dampFactor, dampPrecision, 'y');\n\n          if (\n            this.__props.dampedCurrent.x === this.__props.current.x &&\n            this.__props.dampedCurrent.y === this.__props.current.y\n          ) {\n            this.$services.disable('ticked');\n          }\n\n          render();\n        },\n      };\n\n      this.$on('before-mounted', () => {\n        this.$on('resized', delegate);\n        this.$on('scrolled', delegate);\n        this.$on('ticked', delegate);\n      });\n\n      this.$on('mounted', () => {\n        this.__setProps();\n      });\n\n      this.$on('destroyed', () => {\n        this.$off('resized', delegate);\n        this.$off('scrolled', delegate);\n        this.$off('ticked', delegate);\n\n        // Clamp damped values to their final value and trigger one last render on destroy\n        this.__props.dampedCurrent.x = this.__props.current.x;\n        this.__props.dampedCurrent.y = this.__props.current.y;\n        this.__props.dampedProgress.x = this.__props.progress.x;\n        this.__props.dampedProgress.y = this.__props.progress.y;\n        render();\n      });\n    }\n\n    /**\n     * Mounted hook.\n     */\n    mounted() {\n      // @ts-ignore\n      if (isFunction(super.mounted)) {\n        // @ts-ignore\n        super.mounted();\n      }\n    }\n\n    /**\n     * Resized hook.\n     */\n    resized(props: ResizeServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.resized)) {\n        // @ts-ignore\n        super.resized(props);\n      }\n    }\n\n    /**\n     * Scrolled hook.\n     */\n    scrolled(props: ScrollServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.scrolled)) {\n        // @ts-ignore\n        super.scrolled(props);\n      }\n    }\n\n    /**\n     * Ticked hook.\n     */\n    ticked(props: RafServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.ticked)) {\n        // @ts-ignore\n        super.ticked(props);\n      }\n    }\n\n    /**\n     * Destroyed hook.\n     */\n    destroyed() {\n      // @ts-ignore\n      if (isFunction(super.destroyed)) {\n        // @ts-ignore\n        super.destroyed();\n      }\n    }\n\n    /**\n     * Set the decorator props.\n     */\n    __setProps() {\n      const targetSizes = options.useOffsetSizes\n        ? getOffsetSizes(this.$el)\n        : this.$el.getBoundingClientRect();\n\n      targetSizes.y += window.pageYOffset;\n      targetSizes.x += window.pageXOffset;\n\n      const containerSizes = {\n        x: 0,\n        y: 0,\n        height: window.innerHeight,\n        width: window.innerWidth,\n      };\n\n      const offset = normalizeOffset(this.$options.offset);\n\n      // Y axis\n      const [yStart, yEnd] = getEdges('y', targetSizes, containerSizes, offset);\n      const yCurrent = clamp(window.pageYOffset, yStart, yEnd);\n      const yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));\n      // X axis\n      const [xStart, xEnd] = getEdges('x', targetSizes, containerSizes, offset);\n      const xCurrent = clamp(window.pageXOffset, xStart, xEnd);\n      const xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));\n\n      this.__props.start.x = xStart;\n      this.__props.start.y = yStart;\n      this.__props.end.x = xEnd;\n      this.__props.end.y = yEnd;\n      this.__props.current.x = xCurrent;\n      this.__props.current.y = yCurrent;\n      this.__props.dampedCurrent.x = damp(\n        xCurrent,\n        this.__props.dampedCurrent.x,\n        this.dampFactor,\n        this.dampPrecision,\n      );\n      this.__props.dampedCurrent.y = damp(\n        yCurrent,\n        this.__props.dampedCurrent.y,\n        this.dampFactor,\n        this.dampPrecision,\n      );\n      this.__props.progress.x = xProgress;\n      this.__props.progress.y = yProgress;\n      this.__props.dampedProgress.x = clamp01(\n        (this.__props.dampedCurrent.x - xStart) / (xEnd - xStart),\n      );\n      this.__props.dampedProgress.y = clamp01(\n        (this.__props.dampedCurrent.y - yStart) / (yEnd - yStart),\n      );\n    }\n  }\n\n  // @ts-ignore\n  return WithScrolledInView;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../../Base/index.js';\nimport type {\n  RafServiceProps,\n  ScrollServiceProps,\n  ResizeServiceProps,\n} from '../../services/index.js';\nimport { withMountWhenInView } from '../withMountWhenInView.js';\nimport {\n  damp,\n  clamp,\n  clamp01,\n  getOffsetSizes,\n  isFunction,\n  useScheduler,\n} from '../../utils/index.js';\nimport { normalizeOffset, getEdges } from './utils.js';\n\nconst scheduler = useScheduler(['update', 'render']);\n\nexport interface WithScrolledInViewProps extends BaseProps {\n  $options: {\n    dampFactor: number;\n    dampPrecision: number;\n    offset: string;\n  };\n}\n\nexport type ScrollInViewProps = {\n  start: {\n    x: number;\n    y: number;\n  };\n  end: {\n    x: number;\n    y: number;\n  };\n  current: {\n    x: number;\n    y: number;\n  };\n  dampedCurrent: {\n    x: number;\n    y: number;\n  };\n  progress: {\n    x: number;\n    y: number;\n  };\n  dampedProgress: {\n    x: number;\n    y: number;\n  };\n};\n\nexport type WithScrolledInViewOptions = IntersectionObserverInit & {\n  useOffsetSizes?: boolean;\n};\n\nfunction updateProgress(\n  props: ScrollInViewProps,\n  axis: 'x' | 'y',\n  progressKey: 'progress' | 'dampedProgress',\n  currentKey: 'current' | 'dampedCurrent',\n) {\n  props[progressKey][axis] =\n    props.start[axis] === props.end[axis]\n      ? 0\n      : clamp01(\n          (props[currentKey][axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n        );\n}\n\n/**\n * Update props on tick.\n */\nfunction updateProps(\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n): void {\n  props.current[axis] = clamp(\n    axis === 'x' ? window.pageXOffset : window.pageYOffset,\n    props.start[axis],\n    props.end[axis],\n  );\n  props.dampedCurrent[axis] = damp(\n    props.current[axis],\n    props.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  updateProgress(props, axis, 'progress', 'current');\n  updateProgress(props, axis, 'dampedProgress', 'dampedCurrent');\n}\n\nexport interface WithScrolledInViewInterface extends BaseInterface {\n  /**\n   * @type {ScrollInViewProps}\n   */\n  readonly props: ScrollInViewProps;\n  dampFactor?: number;\n  dampPrecision?: number;\n  mounted(): void;\n  resized(props: ResizeServiceProps): void;\n  scrolled(props: ScrollServiceProps): void;\n  ticked(props: RafServiceProps): void;\n  destroyed(): void;\n}\n\n/**\n * Add scrolled in view capabilities to a component.\n */\nexport function withScrolledInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  options: WithScrolledInViewOptions = {},\n): BaseDecorator<WithScrolledInViewInterface, S, WithScrolledInViewProps> {\n  /**\n   * Class.\n   */\n  class WithScrolledInView<T extends BaseProps = BaseProps> extends withMountWhenInView(\n    BaseClass,\n    options,\n  )<T & WithScrolledInViewProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      emits: ['scrolledInView'],\n      options: {\n        dampFactor: {\n          type: Number,\n          default: 0.1,\n        },\n        dampPrecision: {\n          type: Number,\n          default: 0.001,\n        },\n        offset: {\n          type: String,\n          default: 'start end / end start',\n        },\n      },\n    };\n\n    __props: ScrollInViewProps = {\n      start: {\n        x: 0,\n        y: 0,\n      },\n      end: {\n        x: 0,\n        y: 0,\n      },\n      current: {\n        x: 0,\n        y: 0,\n      },\n      dampedCurrent: {\n        x: 0,\n        y: 0,\n      },\n      progress: {\n        x: 0,\n        y: 0,\n      },\n      dampedProgress: {\n        x: 0,\n        y: 0,\n      },\n    };\n\n    shouldEvaluateProps = true;\n\n    get props() {\n      if (this.shouldEvaluateProps) {\n        this.shouldEvaluateProps = false;\n        const targetSizes = options.useOffsetSizes\n          ? getOffsetSizes(this.$el)\n          : this.$el.getBoundingClientRect();\n\n        targetSizes.y += window.pageYOffset;\n        targetSizes.x += window.pageXOffset;\n\n        const containerSizes = {\n          x: 0,\n          y: 0,\n          height: window.innerHeight,\n          width: window.innerWidth,\n        };\n\n        const offset = normalizeOffset(this.$options.offset);\n\n        // Y axis\n        const [yStart, yEnd] = getEdges('y', targetSizes, containerSizes, offset);\n        const yCurrent = clamp(window.pageYOffset, yStart, yEnd);\n        const yProgress = yStart === yEnd ? 0 : clamp01((yCurrent - yStart) / (yEnd - yStart));\n        // X axis\n        const [xStart, xEnd] = getEdges('x', targetSizes, containerSizes, offset);\n        const xCurrent = clamp(window.pageXOffset, xStart, xEnd);\n        const xProgress = xStart === xEnd ? 0 : clamp01((xCurrent - xStart) / (xEnd - xStart));\n\n        this.__props.start.x = xStart;\n        this.__props.start.y = yStart;\n        this.__props.end.x = xEnd;\n        this.__props.end.y = yEnd;\n        this.__props.current.x = xCurrent;\n        this.__props.current.y = yCurrent;\n        this.__props.dampedCurrent.x = xCurrent;\n        this.__props.dampedCurrent.y = yCurrent;\n        this.__props.progress.x = xProgress;\n        this.__props.progress.y = yProgress;\n        this.__props.dampedProgress.x = xProgress;\n        this.__props.dampedProgress.y = yProgress;\n      }\n\n      return this.__props;\n    }\n\n    /**\n     * Factor used for the `dampedProgress` props.\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampFactor?: number = null;\n\n    /**\n     * Precision for the `dampedProgress` props.\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampPrecision?: number = null;\n\n    /**\n     * Bind listeners.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const render = () => {\n        scheduler.update(() => {\n          // @ts-ignore\n          const renderFn = this.__callMethod('scrolledInView', this.props);\n          if (isFunction(renderFn)) {\n            scheduler.render(() => {\n              renderFn(this.__props);\n            });\n          }\n        });\n      };\n\n      const delegate = {\n        handleEvent(event) {\n          delegate[event.type](event.detail[0]);\n        },\n        resized: () => {\n          this.shouldEvaluateProps = true;\n          render();\n        },\n        scrolled: (props) => {\n          if ((!this.$services.has('ticked') && props.changed.y) || props.changed.x) {\n            this.$services.enable('ticked');\n          }\n        },\n        ticked: () => {\n          const dampFactor = this.dampFactor ?? this.$options.dampFactor;\n          const dampPrecision = this.dampPrecision ?? this.$options.dampPrecision;\n          updateProps(this.__props, dampFactor, dampPrecision, 'x');\n          updateProps(this.__props, dampFactor, dampPrecision, 'y');\n\n          if (\n            this.__props.dampedCurrent.x === this.__props.current.x &&\n            this.__props.dampedCurrent.y === this.__props.current.y\n          ) {\n            this.$services.disable('ticked');\n          }\n\n          render();\n        },\n      };\n\n      this.$on('before-mounted', () => {\n        this.$on('resized', delegate);\n        this.$on('scrolled', delegate);\n        this.$on('ticked', delegate);\n      });\n\n      this.$on('destroyed', () => {\n        this.$off('resized', delegate);\n        this.$off('scrolled', delegate);\n        this.$off('ticked', delegate);\n\n        // Clamp damped values to their final value and trigger one last render on destroy\n        this.__props.dampedCurrent.x = this.__props.current.x;\n        this.__props.dampedCurrent.y = this.__props.current.y;\n        this.__props.dampedProgress.x = this.__props.progress.x;\n        this.__props.dampedProgress.y = this.__props.progress.y;\n        render();\n      });\n    }\n\n    /**\n     * Mounted hook.\n     */\n    mounted() {\n      // @ts-ignore\n      if (isFunction(super.mounted)) {\n        // @ts-ignore\n        super.mounted();\n      }\n    }\n\n    /**\n     * Resized hook.\n     */\n    resized(props: ResizeServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.resized)) {\n        // @ts-ignore\n        super.resized(props);\n      }\n    }\n\n    /**\n     * Scrolled hook.\n     */\n    scrolled(props: ScrollServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.scrolled)) {\n        // @ts-ignore\n        super.scrolled(props);\n      }\n    }\n\n    /**\n     * Ticked hook.\n     */\n    ticked(props: RafServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.ticked)) {\n        // @ts-ignore\n        super.ticked(props);\n      }\n    }\n\n    /**\n     * Destroyed hook.\n     */\n    destroyed() {\n      // @ts-ignore\n      if (isFunction(super.destroyed)) {\n        // @ts-ignore\n        super.destroyed();\n      }\n    }\n  }\n\n  // @ts-ignore\n  return WithScrolledInView;\n}\n"],
+  "mappings": "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",
   "names": ["import_utils"]
 }

package/decorators/withScrolledInView/withScrolledInView.d.ts

@@ -39,10 +39,9 @@ export type WithScrolledInViewOptions = IntersectionObserverInit & {
 };
 export interface WithScrolledInViewInterface extends BaseInterface {
     /**
-     * @private
      * @type {ScrollInViewProps}
      */
-    __props: ScrollInViewProps;
+    readonly props: ScrollInViewProps;
     dampFactor?: number;
     dampPrecision?: number;
     mounted(): void;
@@ -50,10 +49,6 @@ export interface WithScrolledInViewInterface extends BaseInterface {
     scrolled(props: ScrollServiceProps): void;
     ticked(props: RafServiceProps): void;
     destroyed(): void;
-    /**
-     * @private
-     */
-    __setProps(): void;
 }
 /**
  * Add scrolled in view capabilities to a component.