@studiometa/js-toolkit 2.12.1 → 3.0.0-alpha.10

package/Base/Base.d.ts

@@ -47,7 +47,7 @@ export type Managers = {
 /**
  * Base class.
  */
-export declare class Base<T extends BaseProps = BaseProps> extends EventTarget {
+export declare class Base<T extends BaseProps = BaseProps> {
     /**
      * This is a Base instance.
      */
@@ -126,19 +126,19 @@ export declare class Base<T extends BaseProps = BaseProps> extends EventTarget {
     /**
      * Trigger the `mounted` callback.
      */
-    $mount(): this;
+    $mount(): Promise<this>;
     /**
      * Update the instance children.
      */
-    $update(): this;
+    $update(): Promise<this>;
     /**
      * Trigger the `destroyed` callback.
      */
-    $destroy(): this;
+    $destroy(): Promise<this>;
     /**
      * Terminate a child instance when it is not needed anymore.
      */
-    $terminate(): void;
+    $terminate(): Promise<void>;
     /**
      * Add an emitted event.
      *
@@ -189,9 +189,9 @@ export declare class Base<T extends BaseProps = BaseProps> extends EventTarget {
      * @param  {any[]}  args  The arguments to apply to the functions bound to this event.
      * @returns {void}
      */
-    $emit(event: string, ...args: unknown[]): void;
+    $emit(event: string | Event, ...args: unknown[]): void;
     /**
-     * Factory method to generate multiple instance of the class.
+     * Register and mount all instances of the component.
      */
-    static $factory(nameOrSelector: string): Base[];
+    static $register(nameOrSelector?: string): Array<Promise<Base>>;
 }

package/Base/Base.js

@@ -1,4 +1,10 @@
-import { getComponentElements, getEventTarget, addToQueue } from "./utils.js";
+import {
+  getComponentElements,
+  getEventTarget,
+  addToQueue,
+  addInstance,
+  deleteInstance
+} from "./utils.js";
 import {
   ChildrenManager,
   RefsManager,
@@ -8,43 +14,7 @@ import {
 } from "./managers/index.js";
 import { noop, isDev, isFunction, isArray } from "../utils/index.js";
 let id = 0;
-function createAndTestManagers(instance) {
-  for (const { prop, constructorName, constructor } of [
-    {
-      prop: "__options",
-      constructorName: "OptionsManager",
-      constructor: OptionsManager
-    },
-    {
-      prop: "__services",
-      constructorName: "ServicesManager",
-      constructor: ServicesManager
-    },
-    {
-      prop: "__events",
-      constructorName: "EventsManager",
-      constructor: EventsManager
-    },
-    {
-      prop: "__refs",
-      constructorName: "RefsManager",
-      constructor: RefsManager
-    },
-    {
-      prop: "__children",
-      constructorName: "ChildrenManager",
-      constructor: ChildrenManager
-    }
-  ]) {
-    instance[prop] = new instance.__managers[constructorName](instance);
-    if (isDev && !(instance[prop] instanceof constructor)) {
-      throw new Error(
-        `The \`$managers.${constructorName}\` must extend the \`${constructorName}\` class.`
-      );
-    }
-  }
-}
-class Base extends EventTarget {
+class Base {
   /**
    * This is a Base instance.
    */
@@ -204,7 +174,6 @@ class Base extends EventTarget {
    * @param {HTMLElement} element The component's root element dd.
    */
   constructor(element) {
-    super();
     if (!element) {
       if (isDev) {
         throw new Error("The root element must be defined.");
@@ -225,7 +194,15 @@ class Base extends EventTarget {
       this.$el.__base__ = /* @__PURE__ */ new WeakMap();
     }
     this.$el.__base__.set(this.__ctor, this);
-    createAndTestManagers(this);
+    for (const service of ["Options", "Services", "Events", "Refs", "Children"]) {
+      this[`__${service.toLowerCase()}`] = new this.__managers[`${service}Manager`](this);
+    }
+    this.$on("mounted", () => {
+      addInstance(this);
+    });
+    this.$on("destroyed", () => {
+      deleteInstance(this);
+    });
     if (isDev) {
       this.__debug("constructor", this);
     }
@@ -233,7 +210,7 @@ class Base extends EventTarget {
   /**
    * Trigger the `mounted` callback.
    */
-  $mount() {
+  async $mount() {
     if (this.$isMounted) {
       return this;
     }
@@ -241,59 +218,73 @@ class Base extends EventTarget {
     if (isDev) {
       this.__debug("$mount");
     }
-    addToQueue(() => this.$children.registerAll());
-    addToQueue(() => this.$refs.registerAll());
-    addToQueue(() => this.__events.bindRootElement());
-    addToQueue(() => this.$services.enableAll());
-    addToQueue(() => this.$children.mountAll());
-    addToQueue(() => this.$isMounted = true);
-    addToQueue(() => this.__callMethod("mounted"));
+    await Promise.all([
+      addToQueue(() => this.$children.registerAll()),
+      addToQueue(() => this.$refs.registerAll()),
+      addToQueue(() => this.__events.bindRootElement()),
+      addToQueue(() => this.$services.enableAll()),
+      addToQueue(() => this.$children.mountAll()),
+      addToQueue(() => this.$isMounted = true),
+      addToQueue(() => this.__callMethod("mounted"))
+    ]);
     return this;
   }
   /**
    * Update the instance children.
    */
-  $update() {
+  async $update() {
     if (isDev) {
       this.__debug("$update");
     }
-    addToQueue(() => this.$refs.unregisterAll());
-    addToQueue(() => this.$services.disableAll());
-    addToQueue(() => this.$children.registerAll());
-    addToQueue(() => this.$refs.registerAll());
-    addToQueue(() => this.$services.enableAll());
-    addToQueue(() => this.$children.updateAll());
-    addToQueue(() => this.__callMethod("updated"));
+    await Promise.all([
+      // Undo
+      addToQueue(() => this.$refs.unregisterAll()),
+      addToQueue(() => this.$services.disableAll()),
+      // Redo
+      addToQueue(() => this.$children.registerAll()),
+      addToQueue(() => this.$refs.registerAll()),
+      addToQueue(() => this.$services.enableAll()),
+      // Update
+      addToQueue(() => this.$children.updateAll()),
+      addToQueue(() => this.__callMethod("updated"))
+    ]);
     return this;
   }
   /**
    * Trigger the `destroyed` callback.
    */
-  $destroy() {
+  async $destroy() {
     if (!this.$isMounted) {
       return this;
     }
     if (isDev) {
       this.__debug("$destroy");
     }
-    addToQueue(() => this.$isMounted = false);
-    addToQueue(() => this.__events.unbindRootElement());
-    addToQueue(() => this.$refs.unregisterAll());
-    addToQueue(() => this.$services.disableAll());
-    addToQueue(() => this.$children.destroyAll());
-    addToQueue(() => this.__callMethod("destroyed"));
+    await Promise.all([
+      addToQueue(() => this.$isMounted = false),
+      addToQueue(() => this.__events.unbindRootElement()),
+      addToQueue(() => this.$refs.unregisterAll()),
+      addToQueue(() => this.$services.disableAll()),
+      addToQueue(() => this.$children.destroyAll()),
+      addToQueue(() => this.__callMethod("destroyed"))
+    ]);
     return this;
   }
   /**
    * Terminate a child instance when it is not needed anymore.
    */
-  $terminate() {
+  async $terminate() {
     if (isDev) {
       this.__debug("$terminate");
     }
-    addToQueue(() => this.$destroy());
-    addToQueue(() => this.__callMethod("terminated"));
-    addToQueue(() => this.$el.__base__.set(this.__ctor, "terminated"));
+    await Promise.all([
+      // First, destroy the component.
+      addToQueue(() => this.$destroy()),
+      // Execute the `terminated` hook if it exists
+      addToQueue(() => this.__callMethod("terminated")),
+      // Delete instance
+      addToQueue(() => this.$el.__base__.set(this.__ctor, "terminated"))
+    ]);
   }
   /**
    * Add an emitted event.
@@ -349,7 +340,16 @@ class Base extends EventTarget {
     }
     set.add(listener);
     const target = getEventTarget(this, event, this.__config);
-    target.addEventListener(event, listener, options);
+    target?.addEventListener(event, listener, options);
+    if (isDev) {
+      if (!target) {
+        console.warn(
+          `[${this.$id}]`,
+          `The "${event}" event is missing from the configuration and is not a native`,
+          `event for the root element of type \`${this.$el.constructor.name}\`.`
+        );
+      }
+    }
     return () => {
       this.$off(event, listener, options);
     };
@@ -371,7 +371,7 @@ class Base extends EventTarget {
     }
     this.__eventHandlers.get(event).delete(listener);
     const target = getEventTarget(this, event, this.__config);
-    target.removeEventListener(event, listener, options);
+    target?.removeEventListener(event, listener, options);
   }
   /**
    * Emits an event.
@@ -384,18 +384,15 @@ class Base extends EventTarget {
     if (isDev) {
       this.__debug("$emit", event, args);
     }
-    this.dispatchEvent(new CustomEvent(event, { detail: args }));
+    this.$el.dispatchEvent(event instanceof Event ? event : new CustomEvent(event, { detail: args }));
   }
   /**
-   * Factory method to generate multiple instance of the class.
+   * Register and mount all instances of the component.
    */
-  static $factory(nameOrSelector) {
-    if (isDev && !nameOrSelector) {
-      throw new Error(
-        "The $factory method requires a component\u2019s name or selector to be specified."
-      );
-    }
-    return getComponentElements(nameOrSelector).map((el) => new this(el).$mount());
+  static $register(nameOrSelector) {
+    return getComponentElements(nameOrSelector ?? this.config.name).map(
+      (el) => new this(el).$mount()
+    );
   }
 }
 export {

package/Base/Base.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/Base/Base.ts"],
-  "sourcesContent": ["/* eslint-disable no-use-before-define */\nimport { getComponentElements, getEventTarget, addToQueue } from './utils.js';\nimport {\n  ChildrenManager,\n  RefsManager,\n  ServicesManager,\n  EventsManager,\n  OptionsManager,\n} from './managers/index.js';\nimport { noop, isDev, isFunction, isArray } from '../utils/index.js';\n\nlet id = 0;\n\n/**\n * Test if the managers' instances implement the default manager.\n *\n * @throws\n */\nfunction createAndTestManagers(instance: Base): void {\n  for (const { prop, constructorName, constructor } of [\n    {\n      prop: '__options',\n      constructorName: 'OptionsManager',\n      constructor: OptionsManager,\n    },\n    {\n      prop: '__services',\n      constructorName: 'ServicesManager',\n      constructor: ServicesManager,\n    },\n    {\n      prop: '__events',\n      constructorName: 'EventsManager',\n      constructor: EventsManager,\n    },\n    {\n      prop: '__refs',\n      constructorName: 'RefsManager',\n      constructor: RefsManager,\n    },\n    {\n      prop: '__children',\n      constructorName: 'ChildrenManager',\n      constructor: ChildrenManager,\n    },\n  ]) {\n    instance[prop] = new instance.__managers[constructorName](instance);\n    if (isDev && !(instance[prop] instanceof constructor)) {\n      throw new Error(\n        `The \\`$managers.${constructorName}\\` must extend the \\`${constructorName}\\` class.`,\n      );\n    }\n  }\n}\n\nexport type BaseEl = HTMLElement & { __base__?: WeakMap<BaseConstructor, Base | 'terminated'> };\nexport type BaseConstructor<T extends Base = Base> = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  new (...args: any[]): T;\n  prototype: Base;\n} & Pick<typeof Base, keyof typeof Base>;\nexport type BaseAsyncConstructor<T extends Base = Base> = (\n  instance: Base,\n) => Promise<BaseConstructor<T> | { default: BaseConstructor<T> }>;\nexport type BaseOptions = { [name: string]: unknown };\nexport type BaseRefs = { [name: string]: HTMLElement | HTMLElement[] };\nexport type BaseChildren = { [nameOrSelector: string]: Base[] | Promise<Base>[] };\nexport type BaseConfigComponents = {\n  [nameOrSelector: string]: BaseConstructor | BaseAsyncConstructor;\n};\n\nexport type BaseConfig = {\n  name: string;\n  debug?: boolean;\n  log?: boolean;\n  refs?: string[];\n  emits?: string[];\n  components?: BaseConfigComponents;\n  options?: import('./managers/OptionsManager').OptionsSchema;\n};\n\nexport type BaseProps = {\n  $el?: HTMLElement;\n  $options?: BaseOptions;\n  $refs?: BaseRefs;\n  $children?: BaseChildren;\n  $parent?: Base;\n};\n\nexport type Managers = {\n  ChildrenManager: typeof ChildrenManager;\n  EventsManager: typeof EventsManager;\n  OptionsManager: typeof OptionsManager;\n  RefsManager: typeof RefsManager;\n  ServicesManager: typeof ServicesManager;\n};\n\n/**\n * Base class.\n */\nexport class Base<T extends BaseProps = BaseProps> extends EventTarget {\n  /**\n   * This is a Base instance.\n   */\n  static readonly $isBase = true as const;\n\n  /**\n   * The instance parent.\n   */\n  $parent: T['$parent'] & Base = null;\n\n  /**\n   * The instance id.\n   */\n  $id: string;\n\n  /**\n   * The root element.\n   */\n  $el: T['$el'] & BaseEl;\n\n  /**\n   * The state of the component.\n   */\n  $isMounted = false;\n\n  /**\n   * Store the event handlers.\n   */\n  __eventHandlers: Map<string, Set<EventListenerOrEventListenerObject>> = new Map();\n\n  /**\n   * Get the root instance of the app.\n   */\n  get $root(): Base {\n    if (!this.$parent) {\n      return this;\n    }\n\n    let parent = this.$parent;\n    let root = this.$parent;\n\n    while (parent) {\n      if (!parent.$parent) {\n        root = parent;\n      }\n\n      parent = parent.$parent;\n    }\n\n    return root;\n  }\n\n  /**\n   * Merge configuration with the parents' configurations.\n   */\n  get __config(): BaseConfig {\n    let proto = Object.getPrototypeOf(this);\n    let { config } = proto.constructor;\n\n    while (proto.constructor.config && proto.constructor.$isBase) {\n      config = { ...proto.constructor.config, ...config };\n\n      if (proto.constructor.config.options) {\n        config.options = { ...proto.constructor.config.options, ...config.options };\n      }\n\n      if (proto.constructor.config.emits && config.emits) {\n        config.emits = [...proto.constructor.config.emits, ...config.emits];\n      }\n\n      proto = Object.getPrototypeOf(proto);\n    }\n\n    config.options = config.options ?? {};\n    config.refs = config.refs ?? [];\n    config.components = config.components ?? {};\n\n    return config;\n  }\n\n  static config: BaseConfig = {\n    name: 'Base',\n    emits: [\n      // hook events\n      'before-mounted',\n      'mounted',\n      'updated',\n      'destroyed',\n      'terminated',\n      // default services' events\n      'ticked',\n      'scrolled',\n      'resized',\n      'moved',\n      'loaded',\n      'keyed',\n    ],\n  };\n\n  __services: ServicesManager;\n\n  get $services(): ServicesManager {\n    return this.__services;\n  }\n\n  __refs: RefsManager & T['$refs'] & BaseRefs;\n\n  get $refs(): RefsManager & T['$refs'] & BaseRefs {\n    return this.__refs;\n  }\n\n  __options: OptionsManager & T['$options'] & BaseOptions;\n\n  get $options(): OptionsManager & T['$options'] & BaseOptions {\n    return this.__options;\n  }\n\n  __children: ChildrenManager & T['$children'] & BaseChildren;\n\n  get $children(): ChildrenManager & T['$children'] & BaseChildren {\n    return this.__children;\n  }\n\n  __events: EventsManager;\n\n  /**\n   * Small helper to log stuff.\n   */\n  get $log(): (...args: unknown[]) => void {\n    return this.__options.log ? window.console.log.bind(window, `[${this.__config.name}]`) : noop;\n  }\n\n  /**\n   * Small helper to make warning easier.\n   */\n  get $warn(): (...args: unknown[]) => void {\n    return this.__options.log ? window.console.warn.bind(window, `[${this.__config.name}]`) : noop;\n  }\n\n  /**\n   * Small helper to debug information.\n   */\n  get __debug(): (...args: unknown[]) => void {\n    return isDev && this.__options.debug\n      ? window.console.log.bind(window, `[debug] [${this.$id}]`)\n      : noop;\n  }\n\n  /**\n   * Get manager constructors.\n   */\n  get __managers(): Managers {\n    return {\n      ChildrenManager,\n      EventsManager,\n      OptionsManager,\n      RefsManager,\n      ServicesManager,\n    };\n  }\n\n  /**\n   * Call an instance method and emit corresponding events.\n   */\n  __callMethod(method: string, ...args: unknown[]): unknown {\n    if (isDev) {\n      this.__debug('callMethod', method, ...args);\n    }\n\n    this.$emit(method, ...args);\n\n    // We always emit an event, but we do not call the method if it does not exist\n    if (!isFunction(this[method])) {\n      return null;\n    }\n\n    if (isDev) {\n      this.__debug(method, this, ...args);\n    }\n\n    return this[method].call(this, ...args);\n  }\n\n  /**\n   * Test if the given event has been bound to the instance.\n   *\n   * @param   {string} event The event's name.\n   * @returns {boolean}      Wether the given event has been bound or not.\n   */\n  __hasEvent(event: string): boolean {\n    const eventHandlers = this.__eventHandlers.get(event);\n    return eventHandlers && eventHandlers.size > 0;\n  }\n\n  /**\n   * Class constructor where all the magic takes place.\n   *\n   * @param {HTMLElement} element The component's root element dd.\n   */\n  constructor(element: HTMLElement) {\n    super();\n\n    if (!element) {\n      if (isDev) {\n        throw new Error('The root element must be defined.');\n      }\n      return;\n    }\n\n    const { __config } = this;\n\n    if (__config.name === 'Base') {\n      if (isDev) {\n        throw new Error('The `config.name` property is required.');\n      }\n      return;\n    }\n\n    this.$id = `${__config.name}-${id}`;\n    id += 1;\n\n    this.$el = element;\n\n    if (!this.$el.__base__) {\n      this.$el.__base__ = new WeakMap();\n    }\n\n    this.$el.__base__.set(this.__ctor, this);\n\n    createAndTestManagers(this);\n\n    if (isDev) {\n      this.__debug('constructor', this);\n    }\n  }\n\n  /**\n   * Trigger the `mounted` callback.\n   */\n  $mount(): this {\n    if (this.$isMounted) {\n      return this;\n    }\n\n    this.$emit('before-mounted');\n\n    if (isDev) {\n      this.__debug('$mount');\n    }\n\n    addToQueue(() => this.$children.registerAll());\n    addToQueue(() => this.$refs.registerAll());\n    addToQueue(() => this.__events.bindRootElement());\n    addToQueue(() => this.$services.enableAll());\n    addToQueue(() => this.$children.mountAll());\n    // eslint-disable-next-line no-return-assign\n    addToQueue(() => (this.$isMounted = true));\n    addToQueue(() => this.__callMethod('mounted'));\n\n    return this;\n  }\n\n  /**\n   * Update the instance children.\n   */\n  $update(): this {\n    if (isDev) {\n      this.__debug('$update');\n    }\n\n    // Undo\n    addToQueue(() => this.$refs.unregisterAll());\n    addToQueue(() => this.$services.disableAll());\n    // Redo\n    addToQueue(() => this.$children.registerAll());\n    addToQueue(() => this.$refs.registerAll());\n    addToQueue(() => this.$services.enableAll());\n    // Update\n    addToQueue(() => this.$children.updateAll());\n    addToQueue(() => this.__callMethod('updated'));\n\n    return this;\n  }\n\n  /**\n   * Trigger the `destroyed` callback.\n   */\n  $destroy(): this {\n    if (!this.$isMounted) {\n      return this;\n    }\n\n    if (isDev) {\n      this.__debug('$destroy');\n    }\n\n    // eslint-disable-next-line no-return-assign\n    addToQueue(() => (this.$isMounted = false));\n    addToQueue(() => this.__events.unbindRootElement());\n    addToQueue(() => this.$refs.unregisterAll());\n    addToQueue(() => this.$services.disableAll());\n    addToQueue(() => this.$children.destroyAll());\n    addToQueue(() => this.__callMethod('destroyed'));\n\n    return this;\n  }\n\n  /**\n   * Terminate a child instance when it is not needed anymore.\n   */\n  $terminate(): void {\n    if (isDev) {\n      this.__debug('$terminate');\n    }\n\n    // First, destroy the component.\n    addToQueue(() => this.$destroy());\n    // Execute the `terminated` hook if it exists\n    addToQueue(() => this.__callMethod('terminated'));\n    // Delete instance\n    addToQueue(() => this.$el.__base__.set(this.__ctor, 'terminated'));\n  }\n\n  /**\n   * Add an emitted event.\n   *\n   * @param   {string} event The event name.\n   * @returns {void}\n   */\n  __addEmits(event: string): void {\n    const ctor = this.__ctor;\n    if (isArray(ctor.config.emits)) {\n      ctor.config.emits.push(event);\n    } else {\n      ctor.config.emits = [event];\n    }\n  }\n\n  /**\n   * Remove an emitted event.\n   *\n   * @param   {string} event The event name.\n   * @returns {void}\n   */\n  __removeEmits(event: string): void {\n    const ctor = this.__ctor;\n    const index = ctor.config.emits.indexOf(event);\n    ctor.config.emits.splice(index, 1);\n  }\n\n  /**\n   * Get the instance constructor.\n   */\n  get __ctor(): BaseConstructor {\n    return this.constructor as BaseConstructor;\n  }\n\n  /**\n   * Bind a listener function to an event.\n   *\n   * @param  {string} event\n   *   Name of the event.\n   * @param  {EventListenerOrEventListenerObject} listener\n   *   Function to be called.\n   * @param {boolean|AddEventListenerOptions} [options]\n   *   Options for the `removeEventListener` method.\n   * @returns {() => void}\n   *   A function to unbind the listener.\n   */\n  $on(\n    event: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ): () => void {\n    if (isDev) {\n      this.__debug('$on', event, listener, options);\n    }\n\n    let set = this.__eventHandlers.get(event);\n\n    if (!set) {\n      set = new Set();\n      this.__eventHandlers.set(event, set);\n    }\n\n    set.add(listener);\n\n    const target = getEventTarget(this, event, this.__config);\n    target.addEventListener(event, listener, options);\n\n    return () => {\n      this.$off(event, listener, options);\n    };\n  }\n\n  /**\n   * Unbind a listener function from an event.\n   *\n   * @param {string} event\n   *   Name of the event.\n   * @param {EventListenerOrEventListenerObject} listener\n   *   Function to be removed.\n   * @param {boolean|EventListenerOptions} [options]\n   *   Options for the `removeEventListener` method.\n   * @returns {void}\n   */\n  $off(\n    event: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | EventListenerOptions,\n  ) {\n    if (isDev) {\n      this.__debug('$off', event, listener);\n    }\n\n    this.__eventHandlers.get(event).delete(listener);\n\n    const target = getEventTarget(this, event, this.__config);\n    target.removeEventListener(event, listener, options);\n  }\n\n  /**\n   * Emits an event.\n   *\n   * @param  {string} event Name of the event.\n   * @param  {any[]}  args  The arguments to apply to the functions bound to this event.\n   * @returns {void}\n   */\n  $emit(event: string, ...args: unknown[]) {\n    if (isDev) {\n      this.__debug('$emit', event, args);\n    }\n\n    this.dispatchEvent(new CustomEvent(event, { detail: args }));\n  }\n\n  /**\n   * Factory method to generate multiple instance of the class.\n   */\n  static $factory(nameOrSelector: string): Base[] {\n    if (isDev && !nameOrSelector) {\n      throw new Error(\n        'The $factory method requires a component\u2019s name or selector to be specified.',\n      );\n    }\n\n    return getComponentElements(nameOrSelector).map((el) => new this(el).$mount());\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable no-use-before-define */\nimport {\n  getComponentElements,\n  getEventTarget,\n  addToQueue,\n  addInstance,\n  deleteInstance,\n} from './utils.js';\nimport {\n  ChildrenManager,\n  RefsManager,\n  ServicesManager,\n  EventsManager,\n  OptionsManager,\n} from './managers/index.js';\nimport { noop, isDev, isFunction, isArray } from '../utils/index.js';\n\nlet id = 0;\n\nexport type BaseEl = HTMLElement & { __base__?: WeakMap<BaseConstructor, Base | 'terminated'> };\nexport type BaseConstructor<T extends Base = Base> = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  new (...args: any[]): T;\n  prototype: Base;\n} & Pick<typeof Base, keyof typeof Base>;\nexport type BaseAsyncConstructor<T extends Base = Base> = (\n  instance: Base,\n) => Promise<BaseConstructor<T> | { default: BaseConstructor<T> }>;\nexport type BaseOptions = { [name: string]: unknown };\nexport type BaseRefs = { [name: string]: HTMLElement | HTMLElement[] };\nexport type BaseChildren = { [nameOrSelector: string]: Base[] | Promise<Base>[] };\nexport type BaseConfigComponents = {\n  [nameOrSelector: string]: BaseConstructor | BaseAsyncConstructor;\n};\n\nexport type BaseConfig = {\n  name: string;\n  debug?: boolean;\n  log?: boolean;\n  refs?: string[];\n  emits?: string[];\n  components?: BaseConfigComponents;\n  options?: import('./managers/OptionsManager').OptionsSchema;\n};\n\nexport type BaseProps = {\n  $el?: HTMLElement;\n  $options?: BaseOptions;\n  $refs?: BaseRefs;\n  $children?: BaseChildren;\n  $parent?: Base;\n};\n\nexport type Managers = {\n  ChildrenManager: typeof ChildrenManager;\n  EventsManager: typeof EventsManager;\n  OptionsManager: typeof OptionsManager;\n  RefsManager: typeof RefsManager;\n  ServicesManager: typeof ServicesManager;\n};\n\n/**\n * Base class.\n */\nexport class Base<T extends BaseProps = BaseProps> {\n  /**\n   * This is a Base instance.\n   */\n  static readonly $isBase = true as const;\n\n  /**\n   * The instance parent.\n   */\n  $parent: T['$parent'] & Base = null;\n\n  /**\n   * The instance id.\n   */\n  $id: string;\n\n  /**\n   * The root element.\n   */\n  $el: T['$el'] & BaseEl;\n\n  /**\n   * The state of the component.\n   */\n  $isMounted = false;\n\n  /**\n   * Store the event handlers.\n   */\n  __eventHandlers: Map<string, Set<EventListenerOrEventListenerObject>> = new Map();\n\n  /**\n   * Get the root instance of the app.\n   */\n  get $root(): Base {\n    if (!this.$parent) {\n      return this;\n    }\n\n    let parent = this.$parent;\n    let root = this.$parent;\n\n    while (parent) {\n      if (!parent.$parent) {\n        root = parent;\n      }\n\n      parent = parent.$parent;\n    }\n\n    return root;\n  }\n\n  /**\n   * Merge configuration with the parents' configurations.\n   */\n  get __config(): BaseConfig {\n    let proto = Object.getPrototypeOf(this);\n    let { config } = proto.constructor;\n\n    while (proto.constructor.config && proto.constructor.$isBase) {\n      config = { ...proto.constructor.config, ...config };\n\n      if (proto.constructor.config.options) {\n        config.options = { ...proto.constructor.config.options, ...config.options };\n      }\n\n      if (proto.constructor.config.emits && config.emits) {\n        config.emits = [...proto.constructor.config.emits, ...config.emits];\n      }\n\n      proto = Object.getPrototypeOf(proto);\n    }\n\n    config.options = config.options ?? {};\n    config.refs = config.refs ?? [];\n    config.components = config.components ?? {};\n\n    return config;\n  }\n\n  static config: BaseConfig = {\n    name: 'Base',\n    emits: [\n      // hook events\n      'before-mounted',\n      'mounted',\n      'updated',\n      'destroyed',\n      'terminated',\n      // default services' events\n      'ticked',\n      'scrolled',\n      'resized',\n      'moved',\n      'loaded',\n      'keyed',\n    ],\n  };\n\n  __services: ServicesManager;\n\n  get $services(): ServicesManager {\n    return this.__services;\n  }\n\n  __refs: RefsManager & T['$refs'] & BaseRefs;\n\n  get $refs(): RefsManager & T['$refs'] & BaseRefs {\n    return this.__refs;\n  }\n\n  __options: OptionsManager & T['$options'] & BaseOptions;\n\n  get $options(): OptionsManager & T['$options'] & BaseOptions {\n    return this.__options;\n  }\n\n  __children: ChildrenManager & T['$children'] & BaseChildren;\n\n  get $children(): ChildrenManager & T['$children'] & BaseChildren {\n    return this.__children;\n  }\n\n  __events: EventsManager;\n\n  /**\n   * Small helper to log stuff.\n   */\n  get $log(): (...args: unknown[]) => void {\n    return this.__options.log ? window.console.log.bind(window, `[${this.__config.name}]`) : noop;\n  }\n\n  /**\n   * Small helper to make warning easier.\n   */\n  get $warn(): (...args: unknown[]) => void {\n    return this.__options.log ? window.console.warn.bind(window, `[${this.__config.name}]`) : noop;\n  }\n\n  /**\n   * Small helper to debug information.\n   */\n  get __debug(): (...args: unknown[]) => void {\n    return isDev && this.__options.debug\n      ? window.console.log.bind(window, `[debug] [${this.$id}]`)\n      : noop;\n  }\n\n  /**\n   * Get manager constructors.\n   */\n  get __managers(): Managers {\n    return {\n      ChildrenManager,\n      EventsManager,\n      OptionsManager,\n      RefsManager,\n      ServicesManager,\n    };\n  }\n\n  /**\n   * Call an instance method and emit corresponding events.\n   */\n  __callMethod(method: string, ...args: unknown[]): unknown {\n    if (isDev) {\n      this.__debug('callMethod', method, ...args);\n    }\n\n    this.$emit(method, ...args);\n\n    // We always emit an event, but we do not call the method if it does not exist\n    if (!isFunction(this[method])) {\n      return null;\n    }\n\n    if (isDev) {\n      this.__debug(method, this, ...args);\n    }\n\n    return this[method].call(this, ...args);\n  }\n\n  /**\n   * Test if the given event has been bound to the instance.\n   *\n   * @param   {string} event The event's name.\n   * @returns {boolean}      Wether the given event has been bound or not.\n   */\n  __hasEvent(event: string): boolean {\n    const eventHandlers = this.__eventHandlers.get(event);\n    return eventHandlers && eventHandlers.size > 0;\n  }\n\n  /**\n   * Class constructor where all the magic takes place.\n   *\n   * @param {HTMLElement} element The component's root element dd.\n   */\n  constructor(element: HTMLElement) {\n    if (!element) {\n      if (isDev) {\n        throw new Error('The root element must be defined.');\n      }\n      return;\n    }\n\n    const { __config } = this;\n\n    if (__config.name === 'Base') {\n      if (isDev) {\n        throw new Error('The `config.name` property is required.');\n      }\n      return;\n    }\n\n    this.$id = `${__config.name}-${id}`;\n    id += 1;\n\n    this.$el = element;\n\n    if (!this.$el.__base__) {\n      this.$el.__base__ = new WeakMap();\n    }\n\n    this.$el.__base__.set(this.__ctor, this);\n\n    for (const service of ['Options', 'Services', 'Events', 'Refs', 'Children']) {\n      this[`__${service.toLowerCase()}`] = new this.__managers[`${service}Manager`](this);\n    }\n\n    this.$on('mounted', () => {\n      addInstance(this);\n    });\n    this.$on('destroyed', () => {\n      deleteInstance(this);\n    });\n\n    if (isDev) {\n      this.__debug('constructor', this);\n    }\n  }\n\n  /**\n   * Trigger the `mounted` callback.\n   */\n  async $mount(): Promise<this> {\n    if (this.$isMounted) {\n      return this;\n    }\n\n    this.$emit('before-mounted');\n\n    if (isDev) {\n      this.__debug('$mount');\n    }\n\n    await Promise.all([\n      addToQueue(() => this.$children.registerAll()),\n      addToQueue(() => this.$refs.registerAll()),\n      addToQueue(() => this.__events.bindRootElement()),\n      addToQueue(() => this.$services.enableAll()),\n      addToQueue(() => this.$children.mountAll()),\n      addToQueue(() => (this.$isMounted = true)),\n      addToQueue(() => this.__callMethod('mounted')),\n    ]);\n\n    return this;\n  }\n\n  /**\n   * Update the instance children.\n   */\n  async $update(): Promise<this> {\n    if (isDev) {\n      this.__debug('$update');\n    }\n\n    await Promise.all([\n      // Undo\n      addToQueue(() => this.$refs.unregisterAll()),\n      addToQueue(() => this.$services.disableAll()),\n      // Redo\n      addToQueue(() => this.$children.registerAll()),\n      addToQueue(() => this.$refs.registerAll()),\n      addToQueue(() => this.$services.enableAll()),\n      // Update\n      addToQueue(() => this.$children.updateAll()),\n      addToQueue(() => this.__callMethod('updated')),\n    ]);\n\n    return this;\n  }\n\n  /**\n   * Trigger the `destroyed` callback.\n   */\n  async $destroy(): Promise<this> {\n    if (!this.$isMounted) {\n      return this;\n    }\n\n    if (isDev) {\n      this.__debug('$destroy');\n    }\n\n    await Promise.all([\n      addToQueue(() => (this.$isMounted = false)),\n      addToQueue(() => this.__events.unbindRootElement()),\n      addToQueue(() => this.$refs.unregisterAll()),\n      addToQueue(() => this.$services.disableAll()),\n      addToQueue(() => this.$children.destroyAll()),\n      addToQueue(() => this.__callMethod('destroyed')),\n    ]);\n\n    return this;\n  }\n\n  /**\n   * Terminate a child instance when it is not needed anymore.\n   */\n  async $terminate(): Promise<void> {\n    if (isDev) {\n      this.__debug('$terminate');\n    }\n\n    await Promise.all([\n      // First, destroy the component.\n      addToQueue(() => this.$destroy()),\n      // Execute the `terminated` hook if it exists\n      addToQueue(() => this.__callMethod('terminated')),\n      // Delete instance\n      addToQueue(() => this.$el.__base__.set(this.__ctor, 'terminated')),\n    ]);\n  }\n\n  /**\n   * Add an emitted event.\n   *\n   * @param   {string} event The event name.\n   * @returns {void}\n   */\n  __addEmits(event: string): void {\n    const ctor = this.__ctor;\n    if (isArray(ctor.config.emits)) {\n      ctor.config.emits.push(event);\n    } else {\n      ctor.config.emits = [event];\n    }\n  }\n\n  /**\n   * Remove an emitted event.\n   *\n   * @param   {string} event The event name.\n   * @returns {void}\n   */\n  __removeEmits(event: string): void {\n    const ctor = this.__ctor;\n    const index = ctor.config.emits.indexOf(event);\n    ctor.config.emits.splice(index, 1);\n  }\n\n  /**\n   * Get the instance constructor.\n   */\n  get __ctor(): BaseConstructor {\n    return this.constructor as BaseConstructor;\n  }\n\n  /**\n   * Bind a listener function to an event.\n   *\n   * @param  {string} event\n   *   Name of the event.\n   * @param  {EventListenerOrEventListenerObject} listener\n   *   Function to be called.\n   * @param {boolean|AddEventListenerOptions} [options]\n   *   Options for the `removeEventListener` method.\n   * @returns {() => void}\n   *   A function to unbind the listener.\n   */\n  $on(\n    event: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ): () => void {\n    if (isDev) {\n      this.__debug('$on', event, listener, options);\n    }\n\n    let set = this.__eventHandlers.get(event);\n\n    if (!set) {\n      set = new Set();\n      this.__eventHandlers.set(event, set);\n    }\n\n    set.add(listener);\n\n    const target = getEventTarget(this, event, this.__config);\n    target?.addEventListener(event, listener, options);\n\n    if (isDev) {\n      if (!target) {\n        console.warn(\n          `[${this.$id}]`,\n          `The \"${event}\" event is missing from the configuration and is not a native`,\n          `event for the root element of type \\`${this.$el.constructor.name}\\`.`,\n        );\n      }\n    }\n\n    return () => {\n      this.$off(event, listener, options);\n    };\n  }\n\n  /**\n   * Unbind a listener function from an event.\n   *\n   * @param {string} event\n   *   Name of the event.\n   * @param {EventListenerOrEventListenerObject} listener\n   *   Function to be removed.\n   * @param {boolean|EventListenerOptions} [options]\n   *   Options for the `removeEventListener` method.\n   * @returns {void}\n   */\n  $off(\n    event: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | EventListenerOptions,\n  ) {\n    if (isDev) {\n      this.__debug('$off', event, listener);\n    }\n\n    this.__eventHandlers.get(event).delete(listener);\n\n    const target = getEventTarget(this, event, this.__config);\n    target?.removeEventListener(event, listener, options);\n  }\n\n  /**\n   * Emits an event.\n   *\n   * @param  {string} event Name of the event.\n   * @param  {any[]}  args  The arguments to apply to the functions bound to this event.\n   * @returns {void}\n   */\n  $emit(event: string | Event, ...args: unknown[]) {\n    if (isDev) {\n      this.__debug('$emit', event, args);\n    }\n\n    this.$el.dispatchEvent(event instanceof Event ? event : new CustomEvent(event, { detail: args }));\n  }\n\n  /**\n   * Register and mount all instances of the component.\n   */\n  static $register(nameOrSelector?: string): Array<Promise<Base>> {\n    return getComponentElements(nameOrSelector ?? this.config.name).map((el) =>\n      new this(el).$mount(),\n    );\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/Base/features.d.ts

@@ -1,2 +1,15 @@
-export type Features = Record<'asyncChildren', boolean>;
-export declare const features: Map<"asyncChildren", boolean>;
+export type Features = {
+    blocking: boolean;
+    breakpoints: Record<string, string>;
+    attributes: {
+        component: string;
+        option: string;
+        ref: string;
+    };
+};
+interface FeaturesMap extends Map<keyof Features, Features[keyof Features]> {
+    get<T extends keyof Features>(key: T): Features[T];
+    set<T extends keyof Features>(key: T, value: Features[T]): this;
+}
+export declare const features: FeaturesMap;
+export {};

package/Base/features.js

@@ -1,4 +1,34 @@
-const features = /* @__PURE__ */ new Map([["asyncChildren", false]]);
+const features = /* @__PURE__ */ new Map([
+  ["blocking", false],
+  [
+    "breakpoints",
+    {
+      xxs: "0rem",
+      xs: "30rem",
+      // 480px
+      s: "48rem",
+      // 768px
+      m: "64rem",
+      // 1024px
+      l: "80rem",
+      // 1280px
+      xl: "90rem",
+      // 1440px
+      xxl: "120rem",
+      // 1920px
+      xxxl: "160rem"
+      // 2560px
+    }
+  ],
+  [
+    "attributes",
+    {
+      component: "data-component",
+      option: "data-option",
+      ref: "data-ref"
+    }
+  ]
+]);
 export {
   features
 };

package/Base/features.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/Base/features.ts"],
-  "sourcesContent": ["export type Features = Record<'asyncChildren', boolean>;\n\nexport const features = new Map<keyof Features, boolean>([['asyncChildren', false]]);\n"],
-  "mappings": "AAEO,MAAM,WAAW,oBAAI,IAA6B,CAAC,CAAC,iBAAiB,KAAK,CAAC,CAAC;",
+  "sourcesContent": ["export type Features = {\n  blocking: boolean;\n  breakpoints: Record<string, string>;\n  attributes: {\n    component: string;\n    option: string;\n    ref: string;\n  }\n};\n\ninterface FeaturesMap extends Map<keyof Features, Features[keyof Features]> {\n  get<T extends keyof Features>(key: T): Features[T];\n  set<T extends keyof Features>(key: T, value: Features[T]): this;\n}\n\nexport const features = new Map<keyof Features, Features[keyof Features]>([\n  ['blocking', false],\n  [\n    'breakpoints',\n    {\n      xxs: '0rem',\n      xs: '30rem', // 480px\n      s: '48rem', // 768px\n      m: '64rem', // 1024px\n      l: '80rem', // 1280px\n      xl: '90rem', // 1440px\n      xxl: '120rem', // 1920px\n      xxxl: '160rem', // 2560px\n    },\n  ],\n  [\n    'attributes',\n    {\n      component: 'data-component',\n      option: 'data-option',\n      ref: 'data-ref'\n    }\n  ]\n]) as FeaturesMap;\n"],
+  "mappings": "AAeO,MAAM,WAAW,oBAAI,IAA8C;AAAA,EACxE,CAAC,YAAY,KAAK;AAAA,EAClB;AAAA,IACE;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,IAAI;AAAA;AAAA,MACJ,GAAG;AAAA;AAAA,MACH,GAAG;AAAA;AAAA,MACH,GAAG;AAAA;AAAA,MACH,IAAI;AAAA;AAAA,MACJ,KAAK;AAAA;AAAA,MACL,MAAM;AAAA;AAAA,IACR;AAAA,EACF;AAAA,EACA;AAAA,IACE;AAAA,IACA;AAAA,MACE,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,KAAK;AAAA,IACP;AAAA,EACF;AACF,CAAC;",
   "names": []
 }

package/Base/index.d.ts

@@ -1 +1,2 @@
 export * from './Base.js';
+export { getInstances } from './utils.js';

package/Base/index.js

@@ -1,2 +1,6 @@
 export * from "./Base.js";
+import { getInstances } from "./utils.js";
+export {
+  getInstances
+};
 //# sourceMappingURL=index.js.map

package/Base/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/Base/index.ts"],
-  "sourcesContent": ["export * from './Base.js';\n"],
-  "mappings": "AAAA,cAAc;",
+  "sourcesContent": ["export * from './Base.js';\nexport { getInstances } from './utils.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,SAAS,oBAAoB;",
   "names": []
 }

package/Base/managers/AbstractManager.d.ts

@@ -11,7 +11,7 @@ export declare class AbstractManager {
      * Get the base instance root element.
      */
     get __element(): HTMLElement & {
-        __base__?: WeakMap<import("../Base.js").BaseConstructor<Base<import("../Base.js").BaseProps>>, Base<import("../Base.js").BaseProps> | "terminated">;
+        __base__?: WeakMap<import("../Base.js").BaseConstructor, Base | "terminated">;
     };
     /**
      * Get the base instance config.

package/Base/managers/ChildrenManager.d.ts

@@ -17,19 +17,19 @@ export declare class ChildrenManager extends AbstractManager {
     /**
      * Register instances of all children components.
      */
-    registerAll(): void;
+    registerAll(): Promise<void>;
     /**
      * Mount all child component instances.
      */
-    mountAll(): void;
+    mountAll(): Promise<void>;
     /**
      * Update all child component instances.
      */
-    updateAll(): void;
+    updateAll(): Promise<void>;
     /**
      * Destroy all child component instances.
      */
-    destroyAll(): void;
+    destroyAll(): Promise<void>;
     /**
      * Execute the given hook for the given instance.
      *
@@ -38,7 +38,7 @@ export declare class ChildrenManager extends AbstractManager {
      * @param {string} name The name of the component.
      * @private
      */
-    __triggerHook(hook: '$mount' | '$update' | '$destroy', instance: Base, name: string): void;
+    __triggerHook(hook: '$mount' | '$update' | '$destroy', instance: Base, name: string): Promise<void>;
     /**
      * Register instance of a child component.
      *
@@ -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("../Base.js").BaseProps> | "terminated" | Promise<Base<import("../Base.js").BaseProps> | "terminated">)[];
+    __getValue(name: string, component: BaseConstructor | BaseAsyncConstructor): any[];
 }

package/Base/managers/ChildrenManager.js

@@ -1,7 +1,7 @@
 import { AbstractManager } from "./AbstractManager.js";
 import { getComponentElements, addToQueue } from "../utils.js";
 import { startsWith } from "../../utils/index.js";
-function __getChild(that, el, ComponentClass, name) {
+function __getChild(that, el, ComponentClass) {
   const asyncComponentPromise = that.__asyncComponentPromises.get(
     ComponentClass
   );
@@ -32,22 +32,26 @@ function __getChild(that, el, ComponentClass, name) {
       status: "resolved",
       ctor
     });
-    return __getChild(that, el, ctor, name);
+    return __getChild(that, el, ctor);
   });
 }
-function __triggerHookForAll(that, hook) {
-  addToQueue(() => {
+async function __triggerHookForAll(that, hook) {
+  return addToQueue(() => {
+    const promises = [];
     for (const name of that.registeredNames) {
       for (const instance of that[name]) {
         if (instance instanceof Promise) {
-          instance.then((resolvedInstance) => {
-            addToQueue(() => that.__triggerHook(hook, resolvedInstance, name));
-          });
+          promises.push(
+            instance.then(
+              (resolvedInstance) => addToQueue(() => that.__triggerHook(hook, resolvedInstance, name))
+            )
+          );
         } else {
-          addToQueue(() => that.__triggerHook(hook, instance, name));
+          promises.push(addToQueue(() => that.__triggerHook(hook, instance, name)));
         }
       }
     }
+    return Promise.all(promises);
   });
 }
 class ChildrenManager extends AbstractManager {
@@ -62,27 +66,30 @@ class ChildrenManager extends AbstractManager {
   /**
    * Register instances of all children components.
    */
-  registerAll() {
-    for (const [name, component] of Object.entries(this.__config.components))
-      this.__register(name, component);
+  async registerAll() {
+    const promises = [];
+    for (const [name, component] of Object.entries(this.__config.components)) {
+      promises.push(this.__register(name, component));
+    }
+    await Promise.all(promises);
   }
   /**
    * Mount all child component instances.
    */
-  mountAll() {
-    __triggerHookForAll(this, "$mount");
+  async mountAll() {
+    await __triggerHookForAll(this, "$mount");
   }
   /**
    * Update all child component instances.
    */
-  updateAll() {
-    __triggerHookForAll(this, "$update");
+  async updateAll() {
+    await __triggerHookForAll(this, "$update");
   }
   /**
    * Destroy all child component instances.
    */
-  destroyAll() {
-    __triggerHookForAll(this, "$destroy");
+  async destroyAll() {
+    await __triggerHookForAll(this, "$destroy");
   }
   /**
    * Execute the given hook for the given instance.
@@ -92,7 +99,7 @@ class ChildrenManager extends AbstractManager {
    * @param {string} name The name of the component.
    * @private
    */
-  __triggerHook(hook, instance, name) {
+  async __triggerHook(hook, instance, name) {
     if (hook === "$update" && !instance.$isMounted) {
       hook = "$mount";
     }
@@ -102,7 +109,7 @@ class ChildrenManager extends AbstractManager {
     if (hook === "$update" || hook === "$mount") {
       this.__eventsManager.bindChild(name, instance);
     }
-    instance[hook]();
+    await instance[hook]();
   }
   /**
    * Register instance of a child component.
@@ -125,7 +132,14 @@ class ChildrenManager extends AbstractManager {
     if (elements.length === 0) {
       return [];
     }
-    return elements.map((element) => __getChild(this, element, component, name)).filter((instance) => instance !== "terminated");
+    const children = [];
+    for (const element of elements) {
+      const child = __getChild(this, element, component);
+      if (child !== "terminated") {
+        children.push(child);
+      }
+    }
+    return children;
   }
 }
 export {