@studiometa/js-toolkit 3.0.0-alpha.5 → 3.0.0-alpha.7

package/Base/utils.d.ts

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

package/Base/utils.js

@@ -1,4 +1,4 @@
-import { isArray, isDefined, isDev, SmartQueue } from "../utils/index.js";
+import { isArray, isDefined, SmartQueue } from "../utils/index.js";
 import { features } from "./features.js";
 let queue;
 function addToQueue(fn) {
@@ -9,25 +9,27 @@ function addToQueue(fn) {
   if (!queue) {
     queue = new SmartQueue();
   }
-  queue.add(fn);
+  return queue.add(fn);
 }
 const selectors = /* @__PURE__ */ new Map();
 const separator = " ";
 function getSelector(nameOrSelector) {
-  if (!selectors.has(nameOrSelector)) {
+  const { component } = features.get("attributes");
+  const key = component + nameOrSelector;
+  if (!selectors.has(key)) {
     const parts = [
       // Single selector
-      `[data-component="${nameOrSelector}"]`,
+      `[${component}="${nameOrSelector}"]`,
       // Selector in the middle of a list of selectors
-      `[data-component*="${separator}${nameOrSelector}${separator}"]`,
+      `[${component}*="${separator}${nameOrSelector}${separator}"]`,
       // Selector at the end of a list of selectors
-      `[data-component$="${separator}${nameOrSelector}"]`,
+      `[${component}$="${separator}${nameOrSelector}"]`,
       // Selector at the beginning of a list of selectors
-      `[data-component^="${nameOrSelector}${separator}"]`
+      `[${component}^="${nameOrSelector}${separator}"]`
     ];
-    selectors.set(nameOrSelector, parts.join(","));
+    selectors.set(key, parts.join(","));
   }
-  return selectors.get(nameOrSelector);
+  return selectors.get(key);
 }
 function getComponentElements(nameOrSelector, element = document) {
   const selector = getSelector(nameOrSelector);
@@ -54,14 +56,6 @@ function getEventTarget(instance, event, config) {
   if (eventIsNative(event, instance.$el)) {
     return instance.$el;
   }
-  if (isDev) {
-    console.warn(
-      `[${config.name}]`,
-      `The "${event}" event is missing from the configuration and is not a native`,
-      `event for the root element of type \`${instance.$el.constructor.name}\`.`
-    );
-  }
-  return instance;
 }
 const instances = /* @__PURE__ */ new Set();
 function getInstances(ctor) {

package/Base/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/Base/utils.ts"],
-  "sourcesContent": ["import { isArray, isDefined, isDev, SmartQueue } from '../utils/index.js';\nimport type { Base, BaseConfig, BaseConstructor } 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('blocking')) {\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, and if the selector does not\n  // start with an uppercase letter, matching a component's name, try a classic DOM selector.\n  if (elements.length === 0 && nameOrSelector[0] === nameOrSelector[0].toLowerCase()) {\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 *\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\nconst instances = new Set<Base>();\n\n/**\n * Get all mounted instances or the ones from a given component.\n */\nexport function getInstances(): Set<Base>;\nexport function getInstances<T extends BaseConstructor = BaseConstructor>(ctor: T): Set<InstanceType<T>>;\nexport function getInstances<T extends BaseConstructor = BaseConstructor>(ctor?: T): Set<InstanceType<T>> | Set<Base> {\n  if (isDefined(ctor)) {\n    const filteredInstances = new Set<InstanceType<T>>();\n    for (const instance of instances) {\n      if (instance instanceof ctor) {\n        filteredInstances.add(instance as InstanceType<T>);\n      }\n    }\n    return filteredInstances;\n  } else {\n    return new Set(instances);\n  }\n}\n\nexport function addInstance(instance: Base) {\n  instances.add(instance);\n}\n\nexport function deleteInstance(instance: Base) {\n  instances.delete(instance);\n}\n"],
-  "mappings": "AAAA,SAAS,SAAS,WAAW,OAAO,kBAAkB;AAEtD,SAAS,gBAAgB;AAEzB,IAAI;AAKG,SAAS,WAAW,IAAyB;AAClD,MAAI,SAAS,IAAI,UAAU,GAAG;AAC5B,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;AAAA,MAEZ,oBAAoB,cAAc;AAAA;AAAA,MAElC,qBAAqB,SAAS,GAAG,cAAc,GAAG,SAAS;AAAA;AAAA,MAE3D,qBAAqB,SAAS,GAAG,cAAc;AAAA;AAAA,MAE/C,qBAAqB,cAAc,GAAG,SAAS;AAAA,IACjD;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,QAAQ;AAAA,EAAC;AAIT,MAAI,SAAS,WAAW,KAAK,eAAe,CAAC,MAAM,eAAe,CAAC,EAAE,YAAY,GAAG;AAClF,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,KAAK,EAAE,CAAC;AACxC;AAOO,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,IAAI;AAAA,MACf,QAAQ,KAAK;AAAA,MACb,wCAAwC,SAAS,IAAI,YAAY,IAAI;AAAA,IACvE;AAAA,EACF;AAGA,SAAO;AACT;AAEA,MAAM,YAAY,oBAAI,IAAU;AAOzB,SAAS,aAA0D,MAA4C;AACpH,MAAI,UAAU,IAAI,GAAG;AACnB,UAAM,oBAAoB,oBAAI,IAAqB;AACnD,eAAW,YAAY,WAAW;AAChC,UAAI,oBAAoB,MAAM;AAC5B,0BAAkB,IAAI,QAA2B;AAAA,MACnD;AAAA,IACF;AACA,WAAO;AAAA,EACT,OAAO;AACL,WAAO,IAAI,IAAI,SAAS;AAAA,EAC1B;AACF;AAEO,SAAS,YAAY,UAAgB;AAC1C,YAAU,IAAI,QAAQ;AACxB;AAEO,SAAS,eAAe,UAAgB;AAC7C,YAAU,OAAO,QAAQ;AAC3B;",
+  "sourcesContent": ["import { isArray, isDefined, isDev, SmartQueue } from '../utils/index.js';\nimport type { Base, BaseConfig, BaseConstructor } 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) {\n  if (features.get('blocking')) {\n    fn();\n    return;\n  }\n\n  if (!queue) {\n    queue = new SmartQueue();\n  }\n\n  return 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  const { component } = features.get('attributes');\n  const key = component + nameOrSelector;\n\n  if (!selectors.has(key)) {\n    const parts = [\n      // Single selector\n      `[${component}=\"${nameOrSelector}\"]`,\n      // Selector in the middle of a list of selectors\n      `[${component}*=\"${separator}${nameOrSelector}${separator}\"]`,\n      // Selector at the end of a list of selectors\n      `[${component}$=\"${separator}${nameOrSelector}\"]`,\n      // Selector at the beginning of a list of selectors\n      `[${component}^=\"${nameOrSelector}${separator}\"]`,\n    ];\n    selectors.set(key, parts.join(','));\n  }\n\n  return selectors.get(key);\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, and if the selector does not\n  // start with an uppercase letter, matching a component's name, try a classic DOM selector.\n  if (elements.length === 0 && nameOrSelector[0] === nameOrSelector[0].toLowerCase()) {\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 *\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\nconst instances = new Set<Base>();\n\n/**\n * Get all mounted instances or the ones from a given component.\n */\nexport function getInstances(): Set<Base>;\nexport function getInstances<T extends BaseConstructor = BaseConstructor>(\n  ctor: T,\n): Set<InstanceType<T>>;\nexport function getInstances<T extends BaseConstructor = BaseConstructor>(\n  ctor?: T,\n): Set<InstanceType<T>> | Set<Base> {\n  if (isDefined(ctor)) {\n    const filteredInstances = new Set<InstanceType<T>>();\n    for (const instance of instances) {\n      if (instance instanceof ctor) {\n        filteredInstances.add(instance as InstanceType<T>);\n      }\n    }\n    return filteredInstances;\n  } else {\n    return new Set(instances);\n  }\n}\n\nexport function addInstance(instance: Base) {\n  instances.add(instance);\n}\n\nexport function deleteInstance(instance: Base) {\n  instances.delete(instance);\n}\n"],
+  "mappings": "AAAA,SAAS,SAAS,WAAkB,kBAAkB;AAEtD,SAAS,gBAAgB;AAEzB,IAAI;AAKG,SAAS,WAAW,IAAmB;AAC5C,MAAI,SAAS,IAAI,UAAU,GAAG;AAC5B,OAAG;AACH;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACV,YAAQ,IAAI,WAAW;AAAA,EACzB;AAEA,SAAO,MAAM,IAAI,EAAE;AACrB;AAEA,MAAM,YAAY,oBAAI,IAAI;AAG1B,MAAM,YAAY;AAKlB,SAAS,YAAY,gBAAgC;AACnD,QAAM,EAAE,UAAU,IAAI,SAAS,IAAI,YAAY;AAC/C,QAAM,MAAM,YAAY;AAExB,MAAI,CAAC,UAAU,IAAI,GAAG,GAAG;AACvB,UAAM,QAAQ;AAAA;AAAA,MAEZ,IAAI,SAAS,KAAK,cAAc;AAAA;AAAA,MAEhC,IAAI,SAAS,MAAM,SAAS,GAAG,cAAc,GAAG,SAAS;AAAA;AAAA,MAEzD,IAAI,SAAS,MAAM,SAAS,GAAG,cAAc;AAAA;AAAA,MAE7C,IAAI,SAAS,MAAM,cAAc,GAAG,SAAS;AAAA,IAC/C;AACA,cAAU,IAAI,KAAK,MAAM,KAAK,GAAG,CAAC;AAAA,EACpC;AAEA,SAAO,UAAU,IAAI,GAAG;AAC1B;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,QAAQ;AAAA,EAAC;AAIT,MAAI,SAAS,WAAW,KAAK,eAAe,CAAC,MAAM,eAAe,CAAC,EAAE,YAAY,GAAG;AAClF,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,KAAK,EAAE,CAAC;AACxC;AAOO,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;AACF;AAEA,MAAM,YAAY,oBAAI,IAAU;AASzB,SAAS,aACd,MACkC;AAClC,MAAI,UAAU,IAAI,GAAG;AACnB,UAAM,oBAAoB,oBAAI,IAAqB;AACnD,eAAW,YAAY,WAAW;AAChC,UAAI,oBAAoB,MAAM;AAC5B,0BAAkB,IAAI,QAA2B;AAAA,MACnD;AAAA,IACF;AACA,WAAO;AAAA,EACT,OAAO;AACL,WAAO,IAAI,IAAI,SAAS;AAAA,EAC1B;AACF;AAEO,SAAS,YAAY,UAAgB;AAC1C,YAAU,IAAI,QAAQ;AACxB;AAEO,SAAS,eAAe,UAAgB;AAC7C,YAAU,OAAO,QAAQ;AAC3B;",
   "names": []
 }

package/decorators/withBreakpointManager.js

@@ -55,20 +55,22 @@ function withBreakpointManager(BaseClass, breakpoints) {
      * Override the default $mount method to prevent component's from being
      * mounted when they should not.
      */
-    $mount() {
-      super.$mount();
+    async $mount() {
+      await super.$mount();
       testBreakpoints(instances.get(this));
       return this;
     }
     /**
      * Destroy all instances when the main one is destroyed.
      */
-    $destroy() {
+    async $destroy() {
+      const promises = [];
       if (isArray(instances.get(this))) {
         for (const [, instance] of instances.get(this)) {
-          instance.$destroy();
+          promises.push(instance.$destroy());
         }
       }
+      await Promise.all(promises);
       return super.$destroy();
     }
   }

package/decorators/withBreakpointManager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withBreakpointManager.ts"],
-  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport { isDev, isArray } from '../utils/index.js';\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n */\nfunction testBreakpoints(breakpoints: Array<[string[], Base]>) {\n  const { breakpoint } = useResize().props();\n  for (const [breakpointKeys, instance] of breakpoints) {\n    if (breakpointKeys.includes(breakpoint) && !instance.$isMounted) {\n      setTimeout(() => instance.$mount(), 0);\n    } else if (!breakpointKeys.includes(breakpoint) && instance.$isMounted) {\n      instance.$destroy();\n    }\n  }\n}\n\n/**\n * Prepare the components.\n */\nfunction mountComponents(\n  instance: Base,\n  breakpoints: Array<[string, BaseConstructor]>,\n): Array<[string[], Base]> {\n  return breakpoints.map(([bk, ComponentClass]) => {\n    const child = new ComponentClass(instance.$el);\n    Object.defineProperty(child, '$parent', { get: () => instance.$parent });\n    return [bk.split(' '), child];\n  });\n}\n\n/**\n * A cache object to hold each Base sub-instances.\n */\nconst instances: WeakMap<Base, Array<[string[], Base]>> = new WeakMap();\n\n/**\n * BreakpointManager class.\n */\nexport function withBreakpointManager<S extends Base>(\n  BaseClass: typeof Base,\n  breakpoints: Array<[string, BaseConstructor<Base>]>,\n): BaseDecorator<BaseInterface, S> {\n  if (!isArray(breakpoints)) {\n    if (isDev) {\n      throw new Error('[withBreakpointManager] The `breakpoints` parameter must be an array.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  if (breakpoints.length < 2) {\n    if (isDev) {\n      throw new Error('[withBreakpointManager] You must define at least 2 breakpoints.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  const { add, props } = useResize();\n\n  // Do nothing if no breakpoint has been defined.\n  // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n  if (!props().breakpoint) {\n    if (isDev) {\n      throw new Error('The `BreakpointManager` class requires breakpoints to be defined.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  /**\n   * Class.\n   */\n  class WithBreakpointManager<T extends BaseProps = BaseProps> extends BaseClass<T> {\n    /**\n     * Watch for the document resize to test the breakpoints.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      if (!instances.has(this)) {\n        instances.set(this, mountComponents(this, breakpoints));\n      }\n\n      add(`BreakpointManager-${this.$id}`, () => {\n        testBreakpoints(instances.get(this));\n      });\n    }\n\n    /**\n     * Override the default $mount method to prevent component's from being\n     * mounted when they should not.\n     */\n    $mount(): this {\n      super.$mount();\n\n      testBreakpoints(instances.get(this));\n\n      return this;\n    }\n\n    /**\n     * Destroy all instances when the main one is destroyed.\n     */\n    $destroy(): this {\n      if (isArray(instances.get(this))) {\n        for (const [, instance] of instances.get(this)) {\n          instance.$destroy();\n        }\n      }\n\n      return super.$destroy();\n    }\n  }\n\n  // @ts-ignore\n  return WithBreakpointManager;\n}\n"],
-  "mappings": "AAEA,SAAS,iBAAiB;AAC1B,SAAS,OAAO,eAAe;AAK/B,SAAS,gBAAgB,aAAsC;AAC7D,QAAM,EAAE,WAAW,IAAI,UAAU,EAAE,MAAM;AACzC,aAAW,CAAC,gBAAgB,QAAQ,KAAK,aAAa;AACpD,QAAI,eAAe,SAAS,UAAU,KAAK,CAAC,SAAS,YAAY;AAC/D,iBAAW,MAAM,SAAS,OAAO,GAAG,CAAC;AAAA,IACvC,WAAW,CAAC,eAAe,SAAS,UAAU,KAAK,SAAS,YAAY;AACtE,eAAS,SAAS;AAAA,IACpB;AAAA,EACF;AACF;AAKA,SAAS,gBACP,UACA,aACyB;AACzB,SAAO,YAAY,IAAI,CAAC,CAAC,IAAI,cAAc,MAAM;AAC/C,UAAM,QAAQ,IAAI,eAAe,SAAS,GAAG;AAC7C,WAAO,eAAe,OAAO,WAAW,EAAE,KAAK,MAAM,SAAS,QAAQ,CAAC;AACvE,WAAO,CAAC,GAAG,MAAM,GAAG,GAAG,KAAK;AAAA,EAC9B,CAAC;AACH;AAKA,MAAM,YAAoD,oBAAI,QAAQ;AAK/D,SAAS,sBACd,WACA,aACiC;AACjC,MAAI,CAAC,QAAQ,WAAW,GAAG;AACzB,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,uEAAuE;AAAA,IACzF;AAGA,WAAO;AAAA,EACT;AAEA,MAAI,YAAY,SAAS,GAAG;AAC1B,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,iEAAiE;AAAA,IACnF;AAGA,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,KAAK,MAAM,IAAI,UAAU;AAIjC,MAAI,CAAC,MAAM,EAAE,YAAY;AACvB,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,mEAAmE;AAAA,IACrF;AAGA,WAAO;AAAA,EACT;AAAA,EAKA,MAAM,8BAA+D,UAAa;AAAA;AAAA;AAAA;AAAA,IAIhF,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,CAAC,UAAU,IAAI,IAAI,GAAG;AACxB,kBAAU,IAAI,MAAM,gBAAgB,MAAM,WAAW,CAAC;AAAA,MACxD;AAEA,UAAI,qBAAqB,KAAK,GAAG,IAAI,MAAM;AACzC,wBAAgB,UAAU,IAAI,IAAI,CAAC;AAAA,MACrC,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAe;AACb,YAAM,OAAO;AAEb,sBAAgB,UAAU,IAAI,IAAI,CAAC;AAEnC,aAAO;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKA,WAAiB;AACf,UAAI,QAAQ,UAAU,IAAI,IAAI,CAAC,GAAG;AAChC,mBAAW,CAAC,EAAE,QAAQ,KAAK,UAAU,IAAI,IAAI,GAAG;AAC9C,mBAAS,SAAS;AAAA,QACpB;AAAA,MACF;AAEA,aAAO,MAAM,SAAS;AAAA,IACxB;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport { isDev, isArray } from '../utils/index.js';\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n */\nfunction testBreakpoints(breakpoints: Array<[string[], Base]>) {\n  const { breakpoint } = useResize().props();\n  for (const [breakpointKeys, instance] of breakpoints) {\n    if (breakpointKeys.includes(breakpoint) && !instance.$isMounted) {\n      setTimeout(() => instance.$mount(), 0);\n    } else if (!breakpointKeys.includes(breakpoint) && instance.$isMounted) {\n      instance.$destroy();\n    }\n  }\n}\n\n/**\n * Prepare the components.\n */\nfunction mountComponents(\n  instance: Base,\n  breakpoints: Array<[string, BaseConstructor]>,\n): Array<[string[], Base]> {\n  return breakpoints.map(([bk, ComponentClass]) => {\n    const child = new ComponentClass(instance.$el);\n    Object.defineProperty(child, '$parent', { get: () => instance.$parent });\n    return [bk.split(' '), child];\n  });\n}\n\n/**\n * A cache object to hold each Base sub-instances.\n */\nconst instances: WeakMap<Base, Array<[string[], Base]>> = new WeakMap();\n\n/**\n * BreakpointManager class.\n */\nexport function withBreakpointManager<S extends Base>(\n  BaseClass: typeof Base,\n  breakpoints: Array<[string, BaseConstructor<Base>]>,\n): BaseDecorator<BaseInterface, S> {\n  if (!isArray(breakpoints)) {\n    if (isDev) {\n      throw new Error('[withBreakpointManager] The `breakpoints` parameter must be an array.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  if (breakpoints.length < 2) {\n    if (isDev) {\n      throw new Error('[withBreakpointManager] You must define at least 2 breakpoints.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  const { add, props } = useResize();\n\n  // Do nothing if no breakpoint has been defined.\n  // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n  if (!props().breakpoint) {\n    if (isDev) {\n      throw new Error('The `BreakpointManager` class requires breakpoints to be defined.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  /**\n   * Class.\n   */\n  class WithBreakpointManager<T extends BaseProps = BaseProps> extends BaseClass<T> {\n    /**\n     * Watch for the document resize to test the breakpoints.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      if (!instances.has(this)) {\n        instances.set(this, mountComponents(this, breakpoints));\n      }\n\n      add(`BreakpointManager-${this.$id}`, () => {\n        testBreakpoints(instances.get(this));\n      });\n    }\n\n    /**\n     * Override the default $mount method to prevent component's from being\n     * mounted when they should not.\n     */\n    async $mount() {\n      await super.$mount();\n\n      testBreakpoints(instances.get(this));\n\n      return this;\n    }\n\n    /**\n     * Destroy all instances when the main one is destroyed.\n     */\n    async $destroy() {\n      const promises = [];\n      if (isArray(instances.get(this))) {\n        for (const [, instance] of instances.get(this)) {\n          promises.push(instance.$destroy());\n        }\n      }\n\n      await Promise.all(promises);\n\n      return super.$destroy();\n    }\n  }\n\n  // @ts-ignore\n  return WithBreakpointManager;\n}\n"],
+  "mappings": "AAEA,SAAS,iBAAiB;AAC1B,SAAS,OAAO,eAAe;AAK/B,SAAS,gBAAgB,aAAsC;AAC7D,QAAM,EAAE,WAAW,IAAI,UAAU,EAAE,MAAM;AACzC,aAAW,CAAC,gBAAgB,QAAQ,KAAK,aAAa;AACpD,QAAI,eAAe,SAAS,UAAU,KAAK,CAAC,SAAS,YAAY;AAC/D,iBAAW,MAAM,SAAS,OAAO,GAAG,CAAC;AAAA,IACvC,WAAW,CAAC,eAAe,SAAS,UAAU,KAAK,SAAS,YAAY;AACtE,eAAS,SAAS;AAAA,IACpB;AAAA,EACF;AACF;AAKA,SAAS,gBACP,UACA,aACyB;AACzB,SAAO,YAAY,IAAI,CAAC,CAAC,IAAI,cAAc,MAAM;AAC/C,UAAM,QAAQ,IAAI,eAAe,SAAS,GAAG;AAC7C,WAAO,eAAe,OAAO,WAAW,EAAE,KAAK,MAAM,SAAS,QAAQ,CAAC;AACvE,WAAO,CAAC,GAAG,MAAM,GAAG,GAAG,KAAK;AAAA,EAC9B,CAAC;AACH;AAKA,MAAM,YAAoD,oBAAI,QAAQ;AAK/D,SAAS,sBACd,WACA,aACiC;AACjC,MAAI,CAAC,QAAQ,WAAW,GAAG;AACzB,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,uEAAuE;AAAA,IACzF;AAGA,WAAO;AAAA,EACT;AAEA,MAAI,YAAY,SAAS,GAAG;AAC1B,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,iEAAiE;AAAA,IACnF;AAGA,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,KAAK,MAAM,IAAI,UAAU;AAIjC,MAAI,CAAC,MAAM,EAAE,YAAY;AACvB,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,mEAAmE;AAAA,IACrF;AAGA,WAAO;AAAA,EACT;AAAA,EAKA,MAAM,8BAA+D,UAAa;AAAA;AAAA;AAAA;AAAA,IAIhF,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,CAAC,UAAU,IAAI,IAAI,GAAG;AACxB,kBAAU,IAAI,MAAM,gBAAgB,MAAM,WAAW,CAAC;AAAA,MACxD;AAEA,UAAI,qBAAqB,KAAK,GAAG,IAAI,MAAM;AACzC,wBAAgB,UAAU,IAAI,IAAI,CAAC;AAAA,MACrC,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAM,SAAS;AACb,YAAM,MAAM,OAAO;AAEnB,sBAAgB,UAAU,IAAI,IAAI,CAAC;AAEnC,aAAO;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,WAAW;AACf,YAAM,WAAW,CAAC;AAClB,UAAI,QAAQ,UAAU,IAAI,IAAI,CAAC,GAAG;AAChC,mBAAW,CAAC,EAAE,QAAQ,KAAK,UAAU,IAAI,IAAI,GAAG;AAC9C,mBAAS,KAAK,SAAS,SAAS,CAAC;AAAA,QACnC;AAAA,MACF;AAEA,YAAM,QAAQ,IAAI,QAAQ;AAE1B,aAAO,MAAM,SAAS;AAAA,IACxB;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withBreakpointObserver.d.ts

@@ -7,7 +7,6 @@ export interface WithBreakpointObserverProps extends BaseProps {
     };
 }
 export interface WithBreakpointObserverInterface extends BaseInterface {
-    $mount(): this;
 }
 /**
  * BreakpointObserver class.

package/decorators/withBreakpointObserver.js

@@ -1,5 +1,6 @@
 import { useResize } from "../services/index.js";
 import { isDev, startsWith } from "../utils/index.js";
+import { features } from "../Base/features.js";
 function testBreakpoints(instance, breakpoint = useResize().props().breakpoint) {
   const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
   const isInActiveBreakpoint = activeBreakpoints && activeBreakpoints.split(" ").includes(breakpoint);
@@ -67,8 +68,9 @@ function withBreakpointObserver(BaseClass) {
         return;
       }
       const key = `BreakpointObserver-${this.$id}`;
+      const attributes = features.get("attributes");
       const mutationObserver = new MutationObserver(([mutation]) => {
-        if (mutation.type === "attributes" && (mutation.attributeName === "data-options" || startsWith(mutation.attributeName, "data-option-"))) {
+        if (mutation.type === "attributes" && startsWith(mutation.attributeName, `${attributes.option}-`)) {
           if (!hasBreakpointConfiguration(this)) {
             this.$mount();
             remove(key);
@@ -87,7 +89,7 @@ function withBreakpointObserver(BaseClass) {
      * Override the default $mount method to prevent component's from being
      * mounted when they should not.
      */
-    $mount() {
+    async $mount() {
       if (!hasBreakpointConfiguration(this)) {
         return super.$mount();
       }

package/decorators/withBreakpointObserver.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withBreakpointObserver.ts"],
-  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport { isDev, startsWith } from '../utils/index.js';\n\nexport interface WithBreakpointObserverProps extends BaseProps {\n  $options: {\n    activeBreakpoints?: string;\n    inactiveBreakpoints?: string;\n  };\n}\n\nexport interface WithBreakpointObserverInterface extends BaseInterface {\n  $mount(): this;\n}\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n *\n * @param   {Base<WithBreakpointObserverProps>} instance The component's instance.\n * @param   {string} [breakpoint] The breakpoint to test.\n * @returns {string} The action to trigger.\n */\nfunction testBreakpoints(\n  instance: Base<WithBreakpointObserverProps>,\n  breakpoint: string = useResize().props().breakpoint,\n): string {\n  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n  const isInActiveBreakpoint =\n    activeBreakpoints && activeBreakpoints.split(' ').includes(breakpoint);\n  const isInInactiveBreakpoint =\n    inactiveBreakpoints && inactiveBreakpoints.split(' ').includes(breakpoint);\n\n  if (\n    (activeBreakpoints && isInActiveBreakpoint) ||\n    (inactiveBreakpoints && !isInInactiveBreakpoint)\n  ) {\n    return '$mount';\n  }\n\n  return '$destroy';\n}\n\n/**\n * Test if the given instance is configured for breakpoints.\n *\n * @param  {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {boolean} True if configured correctly, false otherwise.\n */\nfunction hasBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): boolean {\n  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n  return Boolean(activeBreakpoints || inactiveBreakpoints);\n}\n\n/**\n * Test if the given instance has a conflicting configuration for breakpoints.\n *\n * @param  {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {void}\n */\nfunction testConflictingBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): void {\n  const { activeBreakpoints, inactiveBreakpoints, name } = instance.$options;\n  if (activeBreakpoints && inactiveBreakpoints) {\n    throw new Error(\n      `[${name}] Incorrect configuration: the \\`activeBreakpoints\\` and \\`inactiveBreakpoints\\` are not compatible.`,\n    );\n  }\n}\n\n/**\n * Add the current instance to the resize service.\n *\n * @param {string} key      The key for the resize service callback.\n * @param {Base}   instance The instance to observe.\n */\nfunction addToResize(key, instance) {\n  if (isDev) {\n    testConflictingBreakpointConfiguration(instance);\n  }\n\n  const { add, has } = useResize();\n\n  if (!has(key)) {\n    add(key, ({ breakpoint }) => {\n      const action = testBreakpoints(instance, breakpoint);\n\n      // Always destroy before mounting\n      if (action === '$destroy' && instance.$isMounted) {\n        instance[action]();\n      } else if (action === '$mount' && !instance.$isMounted) {\n        setTimeout(() => instance[action](), 0);\n      }\n    });\n  }\n}\n\n/**\n * BreakpointObserver class.\n */\nexport function withBreakpointObserver<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<WithBreakpointObserverInterface, S, WithBreakpointObserverProps> {\n  /**\n   * Class.\n   */\n  class WithBreakpointObserver<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithBreakpointObserverProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithBreakpointObserver`,\n      options: {\n        ...BaseClass.config?.options,\n        activeBreakpoints: String,\n        inactiveBreakpoints: String,\n      },\n    };\n\n    /**\n     * Watch for the document resize to test the breakpoints.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const { remove, props } = useResize();\n      const { name } = this.$options;\n\n      // Do nothing if no breakpoint has been defined.\n      // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n      if (!props().breakpoint) {\n        if (isDev) {\n          throw new Error(\n            `[${name}] The \\`BreakpointObserver\\` class requires breakpoints to be defined.`,\n          );\n        }\n        return;\n      }\n\n      const key = `BreakpointObserver-${this.$id}`;\n\n      // Watch change on the `data-options` attribute to emit the `set:options` event.\n      const mutationObserver = new MutationObserver(([mutation]) => {\n        if (\n          mutation.type === 'attributes' &&\n          (mutation.attributeName === 'data-options' ||\n            startsWith(mutation.attributeName, 'data-option-'))\n        ) {\n          // Stop here silently when no breakpoint configuration given.\n          if (!hasBreakpointConfiguration(this)) {\n            this.$mount();\n            remove(key);\n            return;\n          }\n\n          addToResize(key, this);\n        }\n      });\n      mutationObserver.observe(this.$el, { attributes: true });\n\n      // Stop here silently when no breakpoint configuration given.\n      if (!hasBreakpointConfiguration(this)) {\n        return;\n      }\n\n      addToResize(key, this);\n    }\n\n    /**\n     * Override the default $mount method to prevent component's from being\n     * mounted when they should not.\n     */\n    $mount(): this {\n      // Execute normal behavior when no breakpoint configuration given.\n      if (!hasBreakpointConfiguration(this)) {\n        return super.$mount();\n      }\n\n      const action = testBreakpoints(this);\n      if (action === '$mount') {\n        return super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithBreakpointObserver;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport { isDev, startsWith } from '../utils/index.js';\nimport { features } from '../Base/features.js';\n\nexport interface WithBreakpointObserverProps extends BaseProps {\n  $options: {\n    activeBreakpoints?: string;\n    inactiveBreakpoints?: string;\n  };\n}\n\nexport interface WithBreakpointObserverInterface extends BaseInterface {}\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n *\n * @param   {Base<WithBreakpointObserverProps>} instance The component's instance.\n * @param   {string} [breakpoint] The breakpoint to test.\n * @returns {string} The action to trigger.\n */\nfunction testBreakpoints(\n  instance: Base<WithBreakpointObserverProps>,\n  breakpoint: string = useResize().props().breakpoint,\n): string {\n  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n  const isInActiveBreakpoint =\n    activeBreakpoints && activeBreakpoints.split(' ').includes(breakpoint);\n  const isInInactiveBreakpoint =\n    inactiveBreakpoints && inactiveBreakpoints.split(' ').includes(breakpoint);\n\n  if (\n    (activeBreakpoints && isInActiveBreakpoint) ||\n    (inactiveBreakpoints && !isInInactiveBreakpoint)\n  ) {\n    return '$mount';\n  }\n\n  return '$destroy';\n}\n\n/**\n * Test if the given instance is configured for breakpoints.\n *\n * @param  {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {boolean} True if configured correctly, false otherwise.\n */\nfunction hasBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): boolean {\n  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n  return Boolean(activeBreakpoints || inactiveBreakpoints);\n}\n\n/**\n * Test if the given instance has a conflicting configuration for breakpoints.\n *\n * @param  {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {void}\n */\nfunction testConflictingBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): void {\n  const { activeBreakpoints, inactiveBreakpoints, name } = instance.$options;\n  if (activeBreakpoints && inactiveBreakpoints) {\n    throw new Error(\n      `[${name}] Incorrect configuration: the \\`activeBreakpoints\\` and \\`inactiveBreakpoints\\` are not compatible.`,\n    );\n  }\n}\n\n/**\n * Add the current instance to the resize service.\n *\n * @param {string} key      The key for the resize service callback.\n * @param {Base}   instance The instance to observe.\n */\nfunction addToResize(key, instance) {\n  if (isDev) {\n    testConflictingBreakpointConfiguration(instance);\n  }\n\n  const { add, has } = useResize();\n\n  if (!has(key)) {\n    add(key, ({ breakpoint }) => {\n      const action = testBreakpoints(instance, breakpoint);\n\n      // Always destroy before mounting\n      if (action === '$destroy' && instance.$isMounted) {\n        instance[action]();\n      } else if (action === '$mount' && !instance.$isMounted) {\n        setTimeout(() => instance[action](), 0);\n      }\n    });\n  }\n}\n\n/**\n * BreakpointObserver class.\n */\nexport function withBreakpointObserver<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<WithBreakpointObserverInterface, S, WithBreakpointObserverProps> {\n  /**\n   * Class.\n   */\n  class WithBreakpointObserver<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithBreakpointObserverProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithBreakpointObserver`,\n      options: {\n        ...BaseClass.config?.options,\n        activeBreakpoints: String,\n        inactiveBreakpoints: String,\n      },\n    };\n\n    /**\n     * Watch for the document resize to test the breakpoints.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const { remove, props } = useResize();\n      const { name } = this.$options;\n\n      // Do nothing if no breakpoint has been defined.\n      // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n      if (!props().breakpoint) {\n        if (isDev) {\n          throw new Error(\n            `[${name}] The \\`BreakpointObserver\\` class requires breakpoints to be defined.`,\n          );\n        }\n        return;\n      }\n\n      const key = `BreakpointObserver-${this.$id}`;\n      const attributes = features.get('attributes');\n\n      // Watch change on the `data-options` attribute to emit the `set:options` event.\n      const mutationObserver = new MutationObserver(([mutation]) => {\n        if (\n          mutation.type === 'attributes' &&\n          startsWith(mutation.attributeName, `${attributes.option}-`)\n        ) {\n          // Stop here silently when no breakpoint configuration given.\n          if (!hasBreakpointConfiguration(this)) {\n            this.$mount();\n            remove(key);\n            return;\n          }\n\n          addToResize(key, this);\n        }\n      });\n      mutationObserver.observe(this.$el, { attributes: true });\n\n      // Stop here silently when no breakpoint configuration given.\n      if (!hasBreakpointConfiguration(this)) {\n        return;\n      }\n\n      addToResize(key, this);\n    }\n\n    /**\n     * Override the default $mount method to prevent component's from being\n     * mounted when they should not.\n     */\n    async $mount() {\n      // Execute normal behavior when no breakpoint configuration given.\n      if (!hasBreakpointConfiguration(this)) {\n        return super.$mount();\n      }\n\n      const action = testBreakpoints(this);\n      if (action === '$mount') {\n        return super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithBreakpointObserver;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/decorators/withMountOnMediaQuery.js

@@ -49,9 +49,9 @@ function withMountOnMediaQuery(BaseClass, media) {
     /**
      * Override the mounting of the component.
      */
-    $mount() {
+    async $mount() {
       if (this.__matches) {
-        super.$mount();
+        return super.$mount();
       }
       return this;
     }

package/decorators/withMountOnMediaQuery.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withMountOnMediaQuery.ts"],
-  "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { isDev } from '../utils/is.js';\n\nexport interface withMountOnMediaQueryProps extends BaseProps {\n  $options: {\n    media: string;\n  };\n}\n\nexport interface withMountOnMediaQueryInterface extends BaseInterface {\n  /**\n   * @private\n   */\n  __matches: boolean;\n  $mount(): this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountOnMediaQuery<S extends Base = Base>(\n  BaseClass: typeof Base,\n  media,\n): BaseDecorator<withMountOnMediaQueryInterface, S, withMountOnMediaQueryProps> {\n  /**\n   * Class.\n   */\n  class WithMountOnMediaQuery<T extends BaseProps = BaseProps> extends BaseClass<\n    T & withMountOnMediaQueryProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}withMountOnMediaQuery`,\n      options: {\n        ...BaseClass.config?.options,\n        media: String,\n      },\n    };\n\n    /**\n     * Is the media query matches?\n     *\n     * @private\n     */\n    __matches = false;\n\n    /**\n     * Listen for media query changes when the class in instantiated.\n     *\n     * @param {HTMLElement} element The component's root element.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      if (isDev && !this.$options.media && !media) {\n        this.$warn(\n          'Missing either \"$options.media\" or \"media\" argument in withMountOnMediaQuery decorator.',\n        );\n        return;\n      }\n\n      const mediaQueryList = window.matchMedia(this.$options.media || media);\n\n      // Set initial value\n      this.__matches = mediaQueryList.matches;\n\n      const changeHandler = (event: MediaQueryListEvent) => {\n        this.__matches = event.matches;\n\n        if (event.matches && !this.$isMounted) {\n          this.$mount();\n        } else if (this.$isMounted) {\n          setTimeout(() => this.$destroy());\n        }\n      };\n\n      // Start listening for changes\n      mediaQueryList.addEventListener('change', changeHandler);\n\n      this.$on('terminated', () => {\n        mediaQueryList.removeEventListener('change', changeHandler);\n      });\n    }\n\n    /**\n     * Override the mounting of the component.\n     */\n    $mount() {\n      if (this.__matches) {\n        super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithMountOnMediaQuery;\n}\n"],
-  "mappings": "AAEA,SAAS,aAAa;AAmBf,SAAS,sBACd,WACA,OAC8E;AAAA,EAI9E,MAAM,8BAA+D,UAEnE;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO,IAAI;AAAA,MAC9B,SAAS;AAAA,QACP,GAAG,UAAU,QAAQ;AAAA,QACrB,OAAO;AAAA,MACT;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOZ,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,SAAS,CAAC,KAAK,SAAS,SAAS,CAAC,OAAO;AAC3C,aAAK;AAAA,UACH;AAAA,QACF;AACA;AAAA,MACF;AAEA,YAAM,iBAAiB,OAAO,WAAW,KAAK,SAAS,SAAS,KAAK;AAGrE,WAAK,YAAY,eAAe;AAEhC,YAAM,gBAAgB,CAAC,UAA+B;AACpD,aAAK,YAAY,MAAM;AAEvB,YAAI,MAAM,WAAW,CAAC,KAAK,YAAY;AACrC,eAAK,OAAO;AAAA,QACd,WAAW,KAAK,YAAY;AAC1B,qBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,QAClC;AAAA,MACF;AAGA,qBAAe,iBAAiB,UAAU,aAAa;AAEvD,WAAK,IAAI,cAAc,MAAM;AAC3B,uBAAe,oBAAoB,UAAU,aAAa;AAAA,MAC5D,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA,IAKA,SAAS;AACP,UAAI,KAAK,WAAW;AAClB,cAAM,OAAO;AAAA,MACf;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { isDev } from '../utils/is.js';\n\nexport interface withMountOnMediaQueryProps extends BaseProps {\n  $options: {\n    media: string;\n  };\n}\n\nexport interface withMountOnMediaQueryInterface extends BaseInterface {\n  /**\n   * @private\n   */\n  __matches: boolean;\n  $mount(): this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountOnMediaQuery<S extends Base = Base>(\n  BaseClass: typeof Base,\n  media,\n): BaseDecorator<withMountOnMediaQueryInterface, S, withMountOnMediaQueryProps> {\n  /**\n   * Class.\n   */\n  class WithMountOnMediaQuery<T extends BaseProps = BaseProps> extends BaseClass<\n    T & withMountOnMediaQueryProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}withMountOnMediaQuery`,\n      options: {\n        ...BaseClass.config?.options,\n        media: String,\n      },\n    };\n\n    /**\n     * Is the media query matches?\n     *\n     * @private\n     */\n    __matches = false;\n\n    /**\n     * Listen for media query changes when the class in instantiated.\n     *\n     * @param {HTMLElement} element The component's root element.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      if (isDev && !this.$options.media && !media) {\n        this.$warn(\n          'Missing either \"$options.media\" or \"media\" argument in withMountOnMediaQuery decorator.',\n        );\n        return;\n      }\n\n      const mediaQueryList = window.matchMedia(this.$options.media || media);\n\n      // Set initial value\n      this.__matches = mediaQueryList.matches;\n\n      const changeHandler = (event: MediaQueryListEvent) => {\n        this.__matches = event.matches;\n\n        if (event.matches && !this.$isMounted) {\n          this.$mount();\n        } else if (this.$isMounted) {\n          setTimeout(() => this.$destroy());\n        }\n      };\n\n      // Start listening for changes\n      mediaQueryList.addEventListener('change', changeHandler);\n\n      this.$on('terminated', () => {\n        mediaQueryList.removeEventListener('change', changeHandler);\n      });\n    }\n\n    /**\n     * Override the mounting of the component.\n     */\n    async $mount() {\n      if (this.__matches) {\n        return super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithMountOnMediaQuery;\n}\n"],
+  "mappings": "AAEA,SAAS,aAAa;AAmBf,SAAS,sBACd,WACA,OAC8E;AAAA,EAI9E,MAAM,8BAA+D,UAEnE;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO,IAAI;AAAA,MAC9B,SAAS;AAAA,QACP,GAAG,UAAU,QAAQ;AAAA,QACrB,OAAO;AAAA,MACT;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOZ,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,SAAS,CAAC,KAAK,SAAS,SAAS,CAAC,OAAO;AAC3C,aAAK;AAAA,UACH;AAAA,QACF;AACA;AAAA,MACF;AAEA,YAAM,iBAAiB,OAAO,WAAW,KAAK,SAAS,SAAS,KAAK;AAGrE,WAAK,YAAY,eAAe;AAEhC,YAAM,gBAAgB,CAAC,UAA+B;AACpD,aAAK,YAAY,MAAM;AAEvB,YAAI,MAAM,WAAW,CAAC,KAAK,YAAY;AACrC,eAAK,OAAO;AAAA,QACd,WAAW,KAAK,YAAY;AAC1B,qBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,QAClC;AAAA,MACF;AAGA,qBAAe,iBAAiB,UAAU,aAAa;AAEvD,WAAK,IAAI,cAAc,MAAM;AAC3B,uBAAe,oBAAoB,UAAU,aAAa;AAAA,MAC5D,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,SAAS;AACb,UAAI,KAAK,WAAW;AAClB,eAAO,MAAM,OAAO;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withMountWhenInView.js

@@ -55,9 +55,9 @@ function withMountWhenInView(BaseClass, defaultOptions = { threshold: [0, 1] })
     /**
      * Override the mounting of the component.
      */
-    $mount() {
+    async $mount() {
       if (this.__isVisible) {
-        super.$mount();
+        return super.$mount();
       }
       return this;
     }

package/decorators/withMountWhenInView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withMountWhenInView.ts"],
-  "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\n\nexport interface WithMountWhenInViewProps extends BaseProps {\n  $options: {\n    intersectionObserver: IntersectionObserverInit;\n  };\n}\n\nexport interface WithMountWhenInViewInterface extends BaseInterface {\n  /**\n   * @private\n   */\n  __isVisible: boolean;\n  /**\n   * @private\n   */\n  __observer: IntersectionObserver;\n  $mount(): this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountWhenInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  // eslint-disable-next-line unicorn/no-object-as-default-parameter\n  defaultOptions: IntersectionObserverInit = { threshold: [0, 1] },\n): BaseDecorator<WithMountWhenInViewInterface, S, WithMountWhenInViewProps> {\n  /**\n   * Class.\n   */\n  class WithMountWhenInView<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithMountWhenInViewProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      options: {\n        ...BaseClass.config?.options,\n        intersectionObserver: Object,\n      },\n    };\n\n    /**\n     * Is the component visible?\n     *\n     * @private\n     */\n    __isVisible = false;\n\n    /**\n     * The component's observer.\n     *\n     * @private\n     */\n    __observer: IntersectionObserver;\n\n    /**\n     * Create an observer when the class in instantiated.\n     *\n     * @param {HTMLElement} element The component's root element.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.__observer = new IntersectionObserver(\n        (entries) => {\n          const isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);\n          if (this.__isVisible !== isVisible) {\n            this.__isVisible = isVisible;\n\n            if (isVisible) {\n              this.$mount();\n            } else {\n              setTimeout(() => this.$destroy());\n            }\n          }\n        },\n        {\n          ...defaultOptions,\n          ...(this.$options as typeof this.$options & WithMountWhenInViewProps['$options'])\n            .intersectionObserver,\n        },\n      );\n\n      this.__observer.observe(this.$el);\n\n      this.$on('terminated', () => {\n        this.__observer.disconnect();\n      });\n    }\n\n    /**\n     * Override the mounting of the component.\n     */\n    $mount() {\n      if (this.__isVisible) {\n        super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithMountWhenInView;\n}\n"],
-  "mappings": "AAwBO,SAAS,oBACd,WAEA,iBAA2C,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,GACW;AAAA,EAI1E,MAAM,4BAA6D,UAEjE;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO,IAAI;AAAA,MAC9B,SAAS;AAAA,QACP,GAAG,UAAU,QAAQ;AAAA,QACrB,sBAAsB;AAAA,MACxB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,aAAa,IAAI;AAAA,QACpB,CAAC,YAAY;AACX,gBAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,UAAU,OAAO,MAAM,gBAAgB,KAAK;AACnF,cAAI,KAAK,gBAAgB,WAAW;AAClC,iBAAK,cAAc;AAEnB,gBAAI,WAAW;AACb,mBAAK,OAAO;AAAA,YACd,OAAO;AACL,yBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,YAClC;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,KAAK,SACN;AAAA,QACL;AAAA,MACF;AAEA,WAAK,WAAW,QAAQ,KAAK,GAAG;AAEhC,WAAK,IAAI,cAAc,MAAM;AAC3B,aAAK,WAAW,WAAW;AAAA,MAC7B,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA,IAKA,SAAS;AACP,UAAI,KAAK,aAAa;AACpB,cAAM,OAAO;AAAA,MACf;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\n\nexport interface WithMountWhenInViewProps extends BaseProps {\n  $options: {\n    intersectionObserver: IntersectionObserverInit;\n  };\n}\n\nexport interface WithMountWhenInViewInterface extends BaseInterface {\n  /**\n   * @private\n   */\n  __isVisible: boolean;\n  /**\n   * @private\n   */\n  __observer: IntersectionObserver;\n  $mount(): this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountWhenInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  // eslint-disable-next-line unicorn/no-object-as-default-parameter\n  defaultOptions: IntersectionObserverInit = { threshold: [0, 1] },\n): BaseDecorator<WithMountWhenInViewInterface, S, WithMountWhenInViewProps> {\n  /**\n   * Class.\n   */\n  class WithMountWhenInView<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithMountWhenInViewProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      options: {\n        ...BaseClass.config?.options,\n        intersectionObserver: Object,\n      },\n    };\n\n    /**\n     * Is the component visible?\n     *\n     * @private\n     */\n    __isVisible = false;\n\n    /**\n     * The component's observer.\n     *\n     * @private\n     */\n    __observer: IntersectionObserver;\n\n    /**\n     * Create an observer when the class in instantiated.\n     *\n     * @param {HTMLElement} element The component's root element.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.__observer = new IntersectionObserver(\n        (entries) => {\n          const isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);\n          if (this.__isVisible !== isVisible) {\n            this.__isVisible = isVisible;\n\n            if (isVisible) {\n              this.$mount();\n            } else {\n              setTimeout(() => this.$destroy());\n            }\n          }\n        },\n        {\n          ...defaultOptions,\n          ...(this.$options as typeof this.$options & WithMountWhenInViewProps['$options'])\n            .intersectionObserver,\n        },\n      );\n\n      this.__observer.observe(this.$el);\n\n      this.$on('terminated', () => {\n        this.__observer.disconnect();\n      });\n    }\n\n    /**\n     * Override the mounting of the component.\n     */\n    async $mount() {\n      if (this.__isVisible) {\n        return super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithMountWhenInView;\n}\n"],
+  "mappings": "AAwBO,SAAS,oBACd,WAEA,iBAA2C,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,GACW;AAAA,EAI1E,MAAM,4BAA6D,UAEjE;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO,IAAI;AAAA,MAC9B,SAAS;AAAA,QACP,GAAG,UAAU,QAAQ;AAAA,QACrB,sBAAsB;AAAA,MACxB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,aAAa,IAAI;AAAA,QACpB,CAAC,YAAY;AACX,gBAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,UAAU,OAAO,MAAM,gBAAgB,KAAK;AACnF,cAAI,KAAK,gBAAgB,WAAW;AAClC,iBAAK,cAAc;AAEnB,gBAAI,WAAW;AACb,mBAAK,OAAO;AAAA,YACd,OAAO;AACL,yBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,YAClC;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,KAAK,SACN;AAAA,QACL;AAAA,MACF;AAEA,WAAK,WAAW,QAAQ,KAAK,GAAG;AAEhC,WAAK,IAAI,cAAc,MAAM;AAC3B,aAAK,WAAW,WAAW;AAAA,MAC7B,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,SAAS;AACb,UAAI,KAAK,aAAa;AACpB,eAAO,MAAM,OAAO;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/helpers/createApp.js

@@ -5,7 +5,8 @@ function createApp(App, options = {}) {
   const {
     root = document.body,
     breakpoints = null,
-    blocking = null
+    blocking = null,
+    attributes = null
   } = options instanceof HTMLElement ? { root: options } : options;
   if (isObject(breakpoints)) {
     features.set("breakpoints", breakpoints);
@@ -13,13 +14,17 @@ function createApp(App, options = {}) {
   if (isBoolean(blocking)) {
     features.set("blocking", blocking);
   }
-  function init() {
-    app = new App(root).$mount();
+  if (isObject(attributes)) {
+    features.set("attributes", attributes);
+  }
+  async function init() {
+    app = new App(root);
+    await app.$mount();
     return app;
   }
   let p;
   if (features.get("blocking")) {
-    p = Promise.resolve(init());
+    p = init();
   } else {
     p = new Promise((resolve) => {
       if (document.readyState === "complete") {

package/helpers/createApp.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/createApp.ts"],
-  "sourcesContent": ["import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport type { Features } from '../Base/features.js';\nimport { features } from '../Base/features.js';\nimport { isBoolean, isObject } from '../utils/index.js';\n\nexport type CreateAppOptions = Partial<Features> & {\n  root?: HTMLElement;\n};\n\n/**\n * Instantiate and mount the given component on the given root element when the page has been loaded\n * and return a function to use the app instance when it is ready.\n */\nexport default function createApp<S extends BaseConstructor<Base>, T extends BaseProps = BaseProps>(\n  App: S,\n  options: HTMLElement | CreateAppOptions = {},\n): () => Promise<S & Base<T>> {\n  let app: S & Base<T>;\n  const {\n    root = document.body,\n    breakpoints = null,\n    blocking = null,\n  } = options instanceof HTMLElement ? { root: options } : options;\n\n  if (isObject(breakpoints)) {\n    features.set('breakpoints', breakpoints);\n  }\n\n  if (isBoolean(blocking)) {\n    features.set('blocking', blocking);\n  }\n\n  function init() {\n    app = (new App(root) as S & Base<T>).$mount();\n    return app;\n  }\n\n  let p: Promise<S & Base<T>>;\n\n  if (features.get('blocking')) {\n    p = Promise.resolve(init());\n  } else {\n    p = new Promise<S & Base<T>>((resolve) => {\n      if (document.readyState === 'complete') {\n        resolve(init());\n      } else {\n        document.addEventListener('readystatechange', () => {\n          if (document.readyState === 'complete') {\n            resolve(init());\n          }\n        });\n      }\n    });\n  }\n\n  return () => p;\n}\n"],
-  "mappings": "AAEA,SAAS,gBAAgB;AACzB,SAAS,WAAW,gBAAgB;AAUrB,SAAR,UACL,KACA,UAA0C,CAAC,GACf;AAC5B,MAAI;AACJ,QAAM;AAAA,IACJ,OAAO,SAAS;AAAA,IAChB,cAAc;AAAA,IACd,WAAW;AAAA,EACb,IAAI,mBAAmB,cAAc,EAAE,MAAM,QAAQ,IAAI;AAEzD,MAAI,SAAS,WAAW,GAAG;AACzB,aAAS,IAAI,eAAe,WAAW;AAAA,EACzC;AAEA,MAAI,UAAU,QAAQ,GAAG;AACvB,aAAS,IAAI,YAAY,QAAQ;AAAA,EACnC;AAEA,WAAS,OAAO;AACd,UAAO,IAAI,IAAI,IAAI,EAAkB,OAAO;AAC5C,WAAO;AAAA,EACT;AAEA,MAAI;AAEJ,MAAI,SAAS,IAAI,UAAU,GAAG;AAC5B,QAAI,QAAQ,QAAQ,KAAK,CAAC;AAAA,EAC5B,OAAO;AACL,QAAI,IAAI,QAAqB,CAAC,YAAY;AACxC,UAAI,SAAS,eAAe,YAAY;AACtC,gBAAQ,KAAK,CAAC;AAAA,MAChB,OAAO;AACL,iBAAS,iBAAiB,oBAAoB,MAAM;AAClD,cAAI,SAAS,eAAe,YAAY;AACtC,oBAAQ,KAAK,CAAC;AAAA,UAChB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,MAAM;AACf;",
+  "sourcesContent": ["import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport type { Features } from '../Base/features.js';\nimport { features } from '../Base/features.js';\nimport { isBoolean, isObject } from '../utils/index.js';\n\nexport type CreateAppOptions = Partial<Features> & {\n  root?: HTMLElement;\n};\n\n/**\n * Instantiate and mount the given component on the given root element when the page has been loaded\n * and return a function to use the app instance when it is ready.\n */\nexport default function createApp<S extends BaseConstructor<Base>, T extends BaseProps = BaseProps>(\n  App: S,\n  options: HTMLElement | CreateAppOptions = {},\n): () => Promise<S & Base<T>> {\n  let app: S & Base<T>;\n  const {\n    root = document.body,\n    breakpoints = null,\n    blocking = null,\n    attributes = null,\n  } = options instanceof HTMLElement ? { root: options } : options;\n\n  if (isObject(breakpoints)) {\n    features.set('breakpoints', breakpoints);\n  }\n\n  if (isBoolean(blocking)) {\n    features.set('blocking', blocking);\n  }\n\n  if (isObject(attributes)) {\n    features.set('attributes', attributes);\n  }\n\n  async function init() {\n    app = (new App(root) as S & Base<T>)\n    await app.$mount();\n    return app;\n  }\n\n  let p: Promise<S & Base<T>>;\n\n  if (features.get('blocking')) {\n    p = init();\n  } else {\n    p = new Promise<S & Base<T>>((resolve) => {\n      if (document.readyState === 'complete') {\n        resolve(init());\n      } else {\n        document.addEventListener('readystatechange', () => {\n          if (document.readyState === 'complete') {\n            resolve(init());\n          }\n        });\n      }\n    });\n  }\n\n  return () => p;\n}\n"],
+  "mappings": "AAEA,SAAS,gBAAgB;AACzB,SAAS,WAAW,gBAAgB;AAUrB,SAAR,UACL,KACA,UAA0C,CAAC,GACf;AAC5B,MAAI;AACJ,QAAM;AAAA,IACJ,OAAO,SAAS;AAAA,IAChB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,aAAa;AAAA,EACf,IAAI,mBAAmB,cAAc,EAAE,MAAM,QAAQ,IAAI;AAEzD,MAAI,SAAS,WAAW,GAAG;AACzB,aAAS,IAAI,eAAe,WAAW;AAAA,EACzC;AAEA,MAAI,UAAU,QAAQ,GAAG;AACvB,aAAS,IAAI,YAAY,QAAQ;AAAA,EACnC;AAEA,MAAI,SAAS,UAAU,GAAG;AACxB,aAAS,IAAI,cAAc,UAAU;AAAA,EACvC;AAEA,iBAAe,OAAO;AACpB,UAAO,IAAI,IAAI,IAAI;AACnB,UAAM,IAAI,OAAO;AACjB,WAAO;AAAA,EACT;AAEA,MAAI;AAEJ,MAAI,SAAS,IAAI,UAAU,GAAG;AAC5B,QAAI,KAAK;AAAA,EACX,OAAO;AACL,QAAI,IAAI,QAAqB,CAAC,YAAY;AACxC,UAAI,SAAS,eAAe,YAAY;AACtC,gBAAQ,KAAK,CAAC;AAAA,MAChB,OAAO;AACL,iBAAS,iBAAiB,oBAAoB,MAAM;AAClD,cAAI,SAAS,eAAe,YAAY;AACtC,oBAAQ,KAAK,CAAC;AAAA,UAChB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,MAAM;AACf;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.7",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"

package/utils/index.d.ts

@@ -23,3 +23,4 @@ export { SmartQueue } from './SmartQueue.js';
 export * from './dom/index.js';
 export * from './wait.js';
 export * from './random.js';
+export * from './memo.js';

package/utils/index.js

@@ -27,6 +27,7 @@ import { SmartQueue } from "./SmartQueue.js";
 export * from "./dom/index.js";
 export * from "./wait.js";
 export * from "./random.js";
+export * from "./memo.js";
 export {
   Queue,
   SmartQueue,

package/utils/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/utils/index.ts"],
-  "sourcesContent": ["export { default as debounce } from './debounce.js';\nexport * from './trapFocus.js';\nexport { default as keyCodes } from './keyCodes.js';\nexport { default as memoize } from './memoize.js';\nexport { nextFrame } from './nextFrame.js';\nexport { nextTick } from './nextTick.js';\nexport { nextMicrotask } from './nextMicrotask.js';\nexport { default as throttle } from './throttle.js';\nexport { scrollTo } from './scrollTo.js';\nexport { default as getComponentResolver } from './getComponentResolver.js';\nexport * from './is.js';\nexport * from './has.js';\nexport * from './css/index.js';\nexport {\n  objectToURLSearchParams,\n  push as historyPush,\n  replace as historyReplace,\n} from './history.js';\nexport * from './collide/index.js';\nexport * from './math/index.js';\nexport * from './string/index.js';\nexport * from './scheduler.js';\nexport * from './noop.js';\nexport { tween } from './tween.js';\nexport { Queue } from './Queue.js';\nexport { SmartQueue } from './SmartQueue.js';\nexport * from './dom/index.js';\nexport * from './wait.js';\nexport * from './random.js';\n"],
-  "mappings": "AAAA,SAAoB,WAAXA,gBAA2B;AACpC,cAAc;AACd,SAAoB,WAAXA,gBAA2B;AACpC,SAAoB,WAAXA,gBAA0B;AACnC,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAoB,WAAXA,gBAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAoB,WAAXA,gBAAuC;AAChD,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EACE;AAAA,EACQ;AAAA,EACG;AAAA,OACN;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export { default as debounce } from './debounce.js';\nexport * from './trapFocus.js';\nexport { default as keyCodes } from './keyCodes.js';\nexport { default as memoize } from './memoize.js';\nexport { nextFrame } from './nextFrame.js';\nexport { nextTick } from './nextTick.js';\nexport { nextMicrotask } from './nextMicrotask.js';\nexport { default as throttle } from './throttle.js';\nexport { scrollTo } from './scrollTo.js';\nexport { default as getComponentResolver } from './getComponentResolver.js';\nexport * from './is.js';\nexport * from './has.js';\nexport * from './css/index.js';\nexport {\n  objectToURLSearchParams,\n  push as historyPush,\n  replace as historyReplace,\n} from './history.js';\nexport * from './collide/index.js';\nexport * from './math/index.js';\nexport * from './string/index.js';\nexport * from './scheduler.js';\nexport * from './noop.js';\nexport { tween } from './tween.js';\nexport { Queue } from './Queue.js';\nexport { SmartQueue } from './SmartQueue.js';\nexport * from './dom/index.js';\nexport * from './wait.js';\nexport * from './random.js';\nexport * from './memo.js';\n"],
+  "mappings": "AAAA,SAAoB,WAAXA,gBAA2B;AACpC,cAAc;AACd,SAAoB,WAAXA,gBAA2B;AACpC,SAAoB,WAAXA,gBAA0B;AACnC,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAoB,WAAXA,gBAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAoB,WAAXA,gBAAuC;AAChD,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EACE;AAAA,EACQ;AAAA,EACG;AAAA,OACN;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": ["default"]
 }

package/utils/memo.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Memoize the result of a function with a single argument indefinitely.
+ * This is a simpler implementation of the `memoize` function.
+ */
+export declare function memo<T extends (...args: unknown[]) => unknown>(fn: T): T;

package/utils/memo.js

@@ -0,0 +1,14 @@
+function memo(fn) {
+  const cache = /* @__PURE__ */ new Map();
+  return function cached(...args) {
+    const key = args.join("");
+    if (!cache.has(key)) {
+      cache.set(key, fn(...args));
+    }
+    return cache.get(key);
+  };
+}
+export {
+  memo
+};
+//# sourceMappingURL=memo.js.map

package/utils/memo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/utils/memo.ts"],
+  "sourcesContent": ["/**\n * Memoize the result of a function with a single argument indefinitely.\n * This is a simpler implementation of the `memoize` function.\n */\nexport function memo<T extends (...args: unknown[]) => unknown>(fn: T): T {\n  const cache = new Map<string, ReturnType<T>>();\n\n  // @ts-ignore\n  return function cached(...args) {\n    const key = args.join('');\n    if (!cache.has(key)) {\n      cache.set(key, fn(...args) as ReturnType<T>);\n    }\n    return cache.get(key);\n  };\n}\n"],
+  "mappings": "AAIO,SAAS,KAAgD,IAAU;AACxE,QAAM,QAAQ,oBAAI,IAA2B;AAG7C,SAAO,SAAS,UAAU,MAAM;AAC9B,UAAM,MAAM,KAAK,KAAK,EAAE;AACxB,QAAI,CAAC,MAAM,IAAI,GAAG,GAAG;AACnB,YAAM,IAAI,KAAK,GAAG,GAAG,IAAI,CAAkB;AAAA,IAC7C;AACA,WAAO,MAAM,IAAI,GAAG;AAAA,EACtB;AACF;",
+  "names": []
+}

package/utils/string/changeCase.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Convert a string to lowercase.
+ */
+export declare function lowerCase(string: string): string;
+/**
+ * Convert a string to UPPERCASE.
+ */
+export declare function upperCase(string: string): string;
+/**
+ * Convert a string to camelCase.
+ */
+export declare const camelCase: (string: string) => string;
+/**
+ * Convert a string to PascalCase.
+ */
+export declare const pascalCase: (string: string) => string;
+/**
+ * Convert a string to snake_case.
+ */
+export declare const snakeCase: (string: string) => string;
+/**
+ * Convert a string to dash-case.
+ */
+export declare const dashCase: (string: string) => string;

package/utils/string/changeCase.js

@@ -0,0 +1,47 @@
+import { memo } from "../memo.js";
+const SPLIT_LOWER_UPPER_RE = /([\p{Ll}\d])(\p{Lu})/gu;
+const SPLIT_UPPER_UPPER_RE = /(\p{Lu})([\p{Lu}][\p{Ll}])/gu;
+const DEFAULT_STRIP_REGEXP = /[^\p{L}\d]+/giu;
+const SPLIT_REPLACE_VALUE = "$1\0$2";
+function split(value) {
+  let result = value.trim();
+  result = result.replace(SPLIT_LOWER_UPPER_RE, SPLIT_REPLACE_VALUE).replace(SPLIT_UPPER_UPPER_RE, SPLIT_REPLACE_VALUE);
+  result = result.replace(DEFAULT_STRIP_REGEXP, "\0");
+  let start = 0;
+  let end = result.length;
+  while (result.charAt(start) === "\0") start++;
+  if (start === end) return [];
+  while (result.charAt(end - 1) === "\0") end--;
+  return result.slice(start, end).split(/\0/g);
+}
+function delimitedCase(string, delimiter) {
+  return split(string).map((word) => lowerCase(word)).join(delimiter);
+}
+function lowerCase(string) {
+  return string.toLowerCase();
+}
+function upperCase(string) {
+  return string.toUpperCase();
+}
+const camelCase = memo(function camelCase2(string) {
+  const result = pascalCase(string);
+  return lowerCase(result[0]) + result.slice(1);
+});
+const pascalCase = memo(function pascalCase2(string) {
+  return split(string).map((word) => upperCase(word[0]) + lowerCase(word.slice(1))).join("");
+});
+const snakeCase = memo(function snakeCase2(string) {
+  return delimitedCase(string, "_");
+});
+const dashCase = memo(function dashCase2(string) {
+  return delimitedCase(string, "-");
+});
+export {
+  camelCase,
+  dashCase,
+  lowerCase,
+  pascalCase,
+  snakeCase,
+  upperCase
+};
+//# sourceMappingURL=changeCase.js.map

package/utils/string/changeCase.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/utils/string/changeCase.ts"],
+  "sourcesContent": ["import { memo } from '../memo.js';\n\nconst SPLIT_LOWER_UPPER_RE = /([\\p{Ll}\\d])(\\p{Lu})/gu;\nconst SPLIT_UPPER_UPPER_RE = /(\\p{Lu})([\\p{Lu}][\\p{Ll}])/gu;\nconst DEFAULT_STRIP_REGEXP = /[^\\p{L}\\d]+/giu;\nconst SPLIT_REPLACE_VALUE = '$1\\0$2';\n\n/**\n * Split function from the `change-case` package.\n * @see https://github.com/blakeembrey/change-case\n */\nfunction split(value: string) {\n  let result = value.trim();\n\n  result = result\n    .replace(SPLIT_LOWER_UPPER_RE, SPLIT_REPLACE_VALUE)\n    .replace(SPLIT_UPPER_UPPER_RE, SPLIT_REPLACE_VALUE);\n\n  result = result.replace(DEFAULT_STRIP_REGEXP, '\\0');\n\n  let start = 0;\n  let end = result.length;\n\n  // Trim the delimiter from around the output string.\n  while (result.charAt(start) === '\\0') start++;\n  if (start === end) return [];\n  while (result.charAt(end - 1) === '\\0') end--;\n\n  return result.slice(start, end).split(/\\0/g);\n}\n\n/**\n * Convert a string to lowercase and join each word with the given delimiter.\n */\nfunction delimitedCase(string: string, delimiter: string): string {\n  return split(string)\n    .map((word) => lowerCase(word))\n    .join(delimiter);\n}\n/**\n * Convert a string to lowercase.\n */\nexport function lowerCase(string: string): string {\n  return string.toLowerCase();\n}\n\n/**\n * Convert a string to UPPERCASE.\n */\nexport function upperCase(string: string): string {\n  return string.toUpperCase();\n}\n\n/**\n * Convert a string to camelCase.\n */\nexport const camelCase = memo(function camelCase(string: string): string {\n  const result = pascalCase(string);\n  return lowerCase(result[0]) + result.slice(1);\n});\n\n/**\n * Convert a string to PascalCase.\n */\nexport const pascalCase = memo(function pascalCase(string: string): string {\n  return split(string)\n    .map((word) => upperCase(word[0]) + lowerCase(word.slice(1)))\n    .join('');\n});\n\n/**\n * Convert a string to snake_case.\n */\nexport const snakeCase = memo(function snakeCase(string: string): string {\n  return delimitedCase(string, '_');\n});\n\n/**\n * Convert a string to dash-case.\n */\nexport const dashCase = memo(function dashCase(string: string): string {\n  return delimitedCase(string, '-');\n});\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAErB,MAAM,uBAAuB;AAC7B,MAAM,uBAAuB;AAC7B,MAAM,uBAAuB;AAC7B,MAAM,sBAAsB;AAM5B,SAAS,MAAM,OAAe;AAC5B,MAAI,SAAS,MAAM,KAAK;AAExB,WAAS,OACN,QAAQ,sBAAsB,mBAAmB,EACjD,QAAQ,sBAAsB,mBAAmB;AAEpD,WAAS,OAAO,QAAQ,sBAAsB,IAAI;AAElD,MAAI,QAAQ;AACZ,MAAI,MAAM,OAAO;AAGjB,SAAO,OAAO,OAAO,KAAK,MAAM,KAAM;AACtC,MAAI,UAAU,IAAK,QAAO,CAAC;AAC3B,SAAO,OAAO,OAAO,MAAM,CAAC,MAAM,KAAM;AAExC,SAAO,OAAO,MAAM,OAAO,GAAG,EAAE,MAAM,KAAK;AAC7C;AAKA,SAAS,cAAc,QAAgB,WAA2B;AAChE,SAAO,MAAM,MAAM,EAChB,IAAI,CAAC,SAAS,UAAU,IAAI,CAAC,EAC7B,KAAK,SAAS;AACnB;AAIO,SAAS,UAAU,QAAwB;AAChD,SAAO,OAAO,YAAY;AAC5B;AAKO,SAAS,UAAU,QAAwB;AAChD,SAAO,OAAO,YAAY;AAC5B;AAKO,MAAM,YAAY,KAAK,SAASA,WAAU,QAAwB;AACvE,QAAM,SAAS,WAAW,MAAM;AAChC,SAAO,UAAU,OAAO,CAAC,CAAC,IAAI,OAAO,MAAM,CAAC;AAC9C,CAAC;AAKM,MAAM,aAAa,KAAK,SAASC,YAAW,QAAwB;AACzE,SAAO,MAAM,MAAM,EAChB,IAAI,CAAC,SAAS,UAAU,KAAK,CAAC,CAAC,IAAI,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,EAC3D,KAAK,EAAE;AACZ,CAAC;AAKM,MAAM,YAAY,KAAK,SAASC,WAAU,QAAwB;AACvE,SAAO,cAAc,QAAQ,GAAG;AAClC,CAAC;AAKM,MAAM,WAAW,KAAK,SAASC,UAAS,QAAwB;AACrE,SAAO,cAAc,QAAQ,GAAG;AAClC,CAAC;",
+  "names": ["camelCase", "pascalCase", "snakeCase", "dashCase"]
+}

package/utils/string/index.d.ts

@@ -10,3 +10,4 @@ export { default as withTrailingCharacters } from './withTrailingCharacters.js';
 export { default as withTrailingSlash } from './withTrailingSlash.js';
 export * from './startsWith.js';
 export * from './endsWith.js';
+export * from './changeCase.js';

package/utils/string/index.js

@@ -10,6 +10,7 @@ import { default as default10 } from "./withTrailingCharacters.js";
 import { default as default11 } from "./withTrailingSlash.js";
 export * from "./startsWith.js";
 export * from "./endsWith.js";
+export * from "./changeCase.js";
 export {
   default2 as withLeadingCharacters,
   default3 as withLeadingSlash,

package/utils/string/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/utils/string/index.ts"],
-  "sourcesContent": ["export { default as withLeadingCharacters } from './withLeadingCharacters.js';\nexport { default as withLeadingSlash } from './withLeadingSlash.js';\nexport { default as withoutLeadingCharacters } from './withoutLeadingCharacters.js';\nexport { default as withoutLeadingCharactersRecursive } from './withoutLeadingCharactersRecursive.js';\nexport { default as withoutLeadingSlash } from './withoutLeadingSlash.js';\nexport { default as withoutTrailingCharacters } from './withoutTrailingCharacters.js';\nexport { default as withoutTrailingCharactersRecursive } from './withoutTrailingCharactersRecursive.js';\nexport { default as withoutTrailingSlash } from './withoutTrailingSlash.js';\nexport { default as withTrailingCharacters } from './withTrailingCharacters.js';\nexport { default as withTrailingSlash } from './withTrailingSlash.js';\nexport * from './startsWith.js';\nexport * from './endsWith.js';\n"],
-  "mappings": "AAAA,SAAoB,WAAXA,gBAAwC;AACjD,SAAoB,WAAXA,gBAAmC;AAC5C,SAAoB,WAAXA,gBAA2C;AACpD,SAAoB,WAAXA,gBAAoD;AAC7D,SAAoB,WAAXA,gBAAsC;AAC/C,SAAoB,WAAXA,gBAA4C;AACrD,SAAoB,WAAXA,gBAAqD;AAC9D,SAAoB,WAAXA,gBAAuC;AAChD,SAAoB,WAAXA,iBAAyC;AAClD,SAAoB,WAAXA,iBAAoC;AAC7C,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export { default as withLeadingCharacters } from './withLeadingCharacters.js';\nexport { default as withLeadingSlash } from './withLeadingSlash.js';\nexport { default as withoutLeadingCharacters } from './withoutLeadingCharacters.js';\nexport { default as withoutLeadingCharactersRecursive } from './withoutLeadingCharactersRecursive.js';\nexport { default as withoutLeadingSlash } from './withoutLeadingSlash.js';\nexport { default as withoutTrailingCharacters } from './withoutTrailingCharacters.js';\nexport { default as withoutTrailingCharactersRecursive } from './withoutTrailingCharactersRecursive.js';\nexport { default as withoutTrailingSlash } from './withoutTrailingSlash.js';\nexport { default as withTrailingCharacters } from './withTrailingCharacters.js';\nexport { default as withTrailingSlash } from './withTrailingSlash.js';\nexport * from './startsWith.js';\nexport * from './endsWith.js';\nexport * from './changeCase.js';\n"],
+  "mappings": "AAAA,SAAoB,WAAXA,gBAAwC;AACjD,SAAoB,WAAXA,gBAAmC;AAC5C,SAAoB,WAAXA,gBAA2C;AACpD,SAAoB,WAAXA,gBAAoD;AAC7D,SAAoB,WAAXA,gBAAsC;AAC/C,SAAoB,WAAXA,gBAA4C;AACrD,SAAoB,WAAXA,gBAAqD;AAC9D,SAAoB,WAAXA,gBAAuC;AAChD,SAAoB,WAAXA,iBAAyC;AAClD,SAAoB,WAAXA,iBAAoC;AAC7C,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": ["default"]
 }

package/Base/managers/ActionManager.d.ts

@@ -1,4 +0,0 @@
-import { AbstractManager } from './AbstractManager.js';
-export declare class ActionManager extends AbstractManager {
-    registerAll(): void;
-}

package/Base/managers/ActionManager.js

@@ -1,10 +0,0 @@
-import { AbstractManager } from "./AbstractManager.js";
-class ActionManager extends AbstractManager {
-  registerAll() {
-    this.__element.querySelectorAll("[data-on]");
-  }
-}
-export {
-  ActionManager
-};
-//# sourceMappingURL=ActionManager.js.map

package/Base/managers/ActionManager.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/js-toolkit/Base/managers/ActionManager.ts"],
-  "sourcesContent": ["import { AbstractManager } from './AbstractManager.js';\n\nexport class ActionManager extends AbstractManager {\n  registerAll() {\n    this.__element.querySelectorAll('[data-on]');\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAEzB,MAAM,sBAAsB,gBAAgB;AAAA,EACjD,cAAc;AACZ,SAAK,UAAU,iBAAiB,WAAW;AAAA,EAC7C;AACF;",
-  "names": []
-}