@studiometa/js-toolkit 3.5.0 → 3.6.0-beta.0

package/Base/Base.d.ts

@@ -100,12 +100,12 @@ export declare class Base<T extends BaseProps = BaseProps> {
      * @deprecated Use `$closest(name)` instead. Will be removed in v4.
      * @link https://js-toolkit.studiometa.dev/api/instance-properties.html#parent
      */
-    get $parent(): T['$parent'] & Base | null;
+    get $parent(): (T['$parent'] & Base) | null;
     /**
      * Internal parent resolution without deprecation warning.
      * @internal
      */
-    get __parent(): T['$parent'] & Base | null;
+    get __parent(): (T['$parent'] & Base) | null;
     /**
      * Merge configuration with the parents' configurations.
      * @private

package/Base/managers/AbstractManager.d.ts

@@ -11,12 +11,12 @@ export declare class AbstractManager<T extends any = any> {
      * Get the base instance root element.
      */
     get __element(): HTMLElement & {
-        __base__?: Map<string, Base | "terminated">;
+        __base__?: Map<string, Base | 'terminated'>;
     };
     /**
      * Get the base instance config.
      */
-    get __config(): import("../Base.js").BaseConfig;
+    get __config(): import("#private/index.js").BaseConfig;
     /**
      * Get the events manager.
      */

package/Base/utils.d.ts

@@ -34,7 +34,7 @@ export declare function getEventTarget(instance: Base, event: string, config: Ba
  * Get all mounted instances or the ones from a given component.
  * @link https://js-toolkit.studiometa.dev/api/helpers/getInstances.html
  */
-export declare function getInstances(): Set<Base>;
+export declare function getInstances(): ReadonlySet<Base>;
 export declare function getInstances<T extends BaseConstructor = BaseConstructor>(ctor: T): Set<InstanceType<T>>;
 export declare function getElements(): Set<HTMLElement & {
     __base__: Map<string, Base>;

package/Base/utils.js

@@ -74,9 +74,8 @@ function getInstances(ctor) {
       }
     }
     return filteredInstances;
-  } else {
-    return new Set(getInstancesStorage());
   }
+  return new Set(getInstancesStorage());
 }
 function getElements() {
   return new Set(getElementsStorage());

package/Base/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/Base/utils.ts"],
-  "sourcesContent": ["import { isArray, isDefined, SmartQueue, dashCase } from '../utils/index.js';\nimport type { Base, BaseConfig, BaseConstructor } from './index.js';\nimport { features } from './features.js';\nimport { useMutation } from '../services/MutationService.js';\nimport { getInstanceFromElement } from '../helpers/getInstanceFromElement.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 */\nexport function getSelector(nameOrSelector: string): string {\n  const { component } = features.get('attributes');\n  const prefix = features.get('prefix');\n  const key = prefix + component + nameOrSelector;\n\n  if (!selectors.has(key)) {\n    const parts = [\n      // Tag select\n      `${prefix}-${dashCase(nameOrSelector)}`,\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 * @return {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 */\nexport function getEventTarget(instance: Base, event: string, config: BaseConfig): Base['$el'] {\n  if (eventIsDefinedInConfig(event, config) || eventIsNative(event, instance.$el)) {\n    return instance.$el;\n  }\n}\n\n/**\n * Get the global instance storage.\n * We attach it to `globalThis` so it can be shared between different\n * instances of the framework.\n */\nfunction getInstancesStorage(): Set<Base> {\n  return (globalThis.__JS_TOOLKIT_INSTANCES__ ??= new Set<Base>());\n}\n\n/**\n * Get the global elements storage.\n * It will hold reference to all elements with at least one component attached to it.\n */\nfunction getElementsStorage(): Set<HTMLElement & { __base__: Map<string, Base>}> {\n  return (globalThis.__JS_TOOLKIT_ELEMENTS__ ??= new Set<HTMLElement & { __base__: Map<string, Base>}>());\n}\n\n/**\n * Get all mounted instances or the ones from a given component.\n * @link https://js-toolkit.studiometa.dev/api/helpers/getInstances.html\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 getInstancesStorage()) {\n      if (instance instanceof ctor) {\n        filteredInstances.add(instance as InstanceType<T>);\n      }\n    }\n    return filteredInstances;\n  } else {\n    return new Set(getInstancesStorage());\n  }\n}\n\nexport function getElements() {\n  return new Set(getElementsStorage());\n}\n\nexport function addInstance(instance: Base) {\n  getInstancesStorage().add(instance);\n  getElementsStorage().add(instance.$el as HTMLElement & { __base__: Map<string, Base>});\n}\n\nexport function deleteInstance(instance: Base) {\n  getInstancesStorage().delete(instance);\n  getElementsStorage().delete(instance.$el as HTMLElement & { __base__: Map<string, Base>});\n}\n\nconst registryKey = '__JS_TOOLKIT_REGISTRY__';\n\nfunction registry() {\n  return (globalThis[registryKey] ??= new Map<string, BaseConstructor>());\n}\n\nfunction mutationCallback() {\n  addToQueue(() => {\n    for (const [nameOrSelector, ctor] of registry()) {\n      for (const el of getComponentElements(nameOrSelector)) {\n        if (!getInstanceFromElement(el, ctor)) {\n          new ctor(el).$mount();\n        }\n      }\n    }\n  });\n\n  addToQueue(() => {\n    for (const instance of getInstances()) {\n      if (!instance.$el.isConnected) {\n        instance.$terminate();\n      }\n    }\n  });\n}\n\nexport function addToRegistry(nameOrSelector: string, ctor: BaseConstructor) {\n  if (registry().has(nameOrSelector)) {\n    return;\n  }\n\n  registry().set(nameOrSelector, ctor);\n\n  // Add children components to the registry\n  if (ctor.config?.components) {\n    for (const [selector, childConstructor] of Object.entries(ctor.config?.components)) {\n      if ('$isBase' in childConstructor && childConstructor.$isBase) {\n        addToRegistry(selector, childConstructor);\n      }\n    }\n  }\n\n  const mutation = useMutation(document, { childList: true, subtree: true });\n  if (!mutation.has(registryKey)) {\n    mutation.add(registryKey, mutationCallback);\n  }\n}\n\n/**\n * Find the closest instance from the given element in the given set of Base instances.\n */\nexport function findClosestInstance<T extends Base = Base>(element: HTMLElement, instances: Set<T>): T {\n  let closest = null;\n  let minDepth = Infinity;\n\n  for (const instance of instances) {\n    let depth = 0;\n    let el = element;\n    while (el && el !== instance.$el) {\n      depth++;\n      el = el.parentElement;\n    }\n\n    if (depth < minDepth) {\n      minDepth = depth;\n      closest = instance;\n    }\n  }\n\n  return closest;\n}\n"],
-  "mappings": "AAAA,SAAS,SAAS,WAAW,YAAY,gBAAgB;AAEzD,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AAEvC,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;AAKX,SAAS,YAAY,gBAAgC;AAC1D,QAAM,EAAE,UAAU,IAAI,SAAS,IAAI,YAAY;AAC/C,QAAM,SAAS,SAAS,IAAI,QAAQ;AACpC,QAAM,MAAM,SAAS,YAAY;AAEjC,MAAI,CAAC,UAAU,IAAI,GAAG,GAAG;AACvB,UAAM,QAAQ;AAAA;AAAA,MAEZ,GAAG,MAAM,IAAI,SAAS,cAAc,CAAC;AAAA;AAAA,MAErC,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;AAKO,SAAS,eAAe,UAAgB,OAAe,QAAiC;AAC7F,MAAI,uBAAuB,OAAO,MAAM,KAAK,cAAc,OAAO,SAAS,GAAG,GAAG;AAC/E,WAAO,SAAS;AAAA,EAClB;AACF;AAOA,SAAS,sBAAiC;AACxC,SAAQ,WAAW,6BAA6B,oBAAI,IAAU;AAChE;AAMA,SAAS,qBAAwE;AAC/E,SAAQ,WAAW,4BAA4B,oBAAI,IAAkD;AACvG;AAUO,SAAS,aACd,MACkC;AAClC,MAAI,UAAU,IAAI,GAAG;AACnB,UAAM,oBAAoB,oBAAI,IAAqB;AACnD,eAAW,YAAY,oBAAoB,GAAG;AAC5C,UAAI,oBAAoB,MAAM;AAC5B,0BAAkB,IAAI,QAA2B;AAAA,MACnD;AAAA,IACF;AACA,WAAO;AAAA,EACT,OAAO;AACL,WAAO,IAAI,IAAI,oBAAoB,CAAC;AAAA,EACtC;AACF;AAEO,SAAS,cAAc;AAC5B,SAAO,IAAI,IAAI,mBAAmB,CAAC;AACrC;AAEO,SAAS,YAAY,UAAgB;AAC1C,sBAAoB,EAAE,IAAI,QAAQ;AAClC,qBAAmB,EAAE,IAAI,SAAS,GAAmD;AACvF;AAEO,SAAS,eAAe,UAAgB;AAC7C,sBAAoB,EAAE,OAAO,QAAQ;AACrC,qBAAmB,EAAE,OAAO,SAAS,GAAmD;AAC1F;AAEA,MAAM,cAAc;AAEpB,SAAS,WAAW;AAClB,SAAQ,WAAW,WAAW,MAAM,oBAAI,IAA6B;AACvE;AAEA,SAAS,mBAAmB;AAC1B,aAAW,MAAM;AACf,eAAW,CAAC,gBAAgB,IAAI,KAAK,SAAS,GAAG;AAC/C,iBAAW,MAAM,qBAAqB,cAAc,GAAG;AACrD,YAAI,CAAC,uBAAuB,IAAI,IAAI,GAAG;AACrC,cAAI,KAAK,EAAE,EAAE,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AAED,aAAW,MAAM;AACf,eAAW,YAAY,aAAa,GAAG;AACrC,UAAI,CAAC,SAAS,IAAI,aAAa;AAC7B,iBAAS,WAAW;AAAA,MACtB;AAAA,IACF;AAAA,EACF,CAAC;AACH;AAEO,SAAS,cAAc,gBAAwB,MAAuB;AAC3E,MAAI,SAAS,EAAE,IAAI,cAAc,GAAG;AAClC;AAAA,EACF;AAEA,WAAS,EAAE,IAAI,gBAAgB,IAAI;AAGnC,MAAI,KAAK,QAAQ,YAAY;AAC3B,eAAW,CAAC,UAAU,gBAAgB,KAAK,OAAO,QAAQ,KAAK,QAAQ,UAAU,GAAG;AAClF,UAAI,aAAa,oBAAoB,iBAAiB,SAAS;AAC7D,sBAAc,UAAU,gBAAgB;AAAA,MAC1C;AAAA,IACF;AAAA,EACF;AAEA,QAAM,WAAW,YAAY,UAAU,EAAE,WAAW,MAAM,SAAS,KAAK,CAAC;AACzE,MAAI,CAAC,SAAS,IAAI,WAAW,GAAG;AAC9B,aAAS,IAAI,aAAa,gBAAgB;AAAA,EAC5C;AACF;AAKO,SAAS,oBAA2C,SAAsB,WAAsB;AACrG,MAAI,UAAU;AACd,MAAI,WAAW;AAEf,aAAW,YAAY,WAAW;AAChC,QAAI,QAAQ;AACZ,QAAI,KAAK;AACT,WAAO,MAAM,OAAO,SAAS,KAAK;AAChC;AACA,WAAK,GAAG;AAAA,IACV;AAEA,QAAI,QAAQ,UAAU;AACpB,iBAAW;AACX,gBAAU;AAAA,IACZ;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { isArray, isDefined, SmartQueue, dashCase } from '../utils/index.js';\nimport type { Base, BaseConfig, BaseConstructor } from './index.js';\nimport { features } from './features.js';\nimport { useMutation } from '../services/MutationService.js';\nimport { getInstanceFromElement } from '../helpers/getInstanceFromElement.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 */\nexport function getSelector(nameOrSelector: string): string {\n  const { component } = features.get('attributes');\n  const prefix = features.get('prefix');\n  const key = prefix + component + nameOrSelector;\n\n  if (!selectors.has(key)) {\n    const parts = [\n      // Tag select\n      `${prefix}-${dashCase(nameOrSelector)}`,\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 * @return {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 */\nexport function getEventTarget(instance: Base, event: string, config: BaseConfig): Base['$el'] {\n  if (eventIsDefinedInConfig(event, config) || eventIsNative(event, instance.$el)) {\n    return instance.$el;\n  }\n}\n\n/**\n * Get the global instance storage.\n * We attach it to `globalThis` so it can be shared between different\n * instances of the framework.\n */\nfunction getInstancesStorage(): Set<Base> {\n  return (globalThis.__JS_TOOLKIT_INSTANCES__ ??= new Set<Base>());\n}\n\n/**\n * Get the global elements storage.\n * It will hold reference to all elements with at least one component attached to it.\n */\nfunction getElementsStorage(): Set<HTMLElement & { __base__: Map<string, Base>}> {\n  return (globalThis.__JS_TOOLKIT_ELEMENTS__ ??= new Set<HTMLElement & { __base__: Map<string, Base>}>());\n}\n\n/**\n * Get all mounted instances or the ones from a given component.\n * @link https://js-toolkit.studiometa.dev/api/helpers/getInstances.html\n */\nexport function getInstances(): ReadonlySet<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): ReadonlySet<InstanceType<T>> | ReadonlySet<Base> {\n  if (isDefined(ctor)) {\n    const filteredInstances = new Set<InstanceType<T>>();\n    for (const instance of getInstancesStorage()) {\n      if (instance instanceof ctor) {\n        filteredInstances.add(instance as InstanceType<T>);\n      }\n    }\n    return filteredInstances;\n  }\n\n  return new Set(getInstancesStorage());\n}\n\nexport function getElements() {\n  return new Set(getElementsStorage());\n}\n\nexport function addInstance(instance: Base) {\n  getInstancesStorage().add(instance);\n  getElementsStorage().add(instance.$el as HTMLElement & { __base__: Map<string, Base>});\n}\n\nexport function deleteInstance(instance: Base) {\n  getInstancesStorage().delete(instance);\n  getElementsStorage().delete(instance.$el as HTMLElement & { __base__: Map<string, Base>});\n}\n\nconst registryKey = '__JS_TOOLKIT_REGISTRY__';\n\nfunction registry() {\n  return (globalThis[registryKey] ??= new Map<string, BaseConstructor>());\n}\n\nfunction mutationCallback() {\n  addToQueue(() => {\n    for (const [nameOrSelector, ctor] of registry()) {\n      for (const el of getComponentElements(nameOrSelector)) {\n        if (!getInstanceFromElement(el, ctor)) {\n          new ctor(el).$mount();\n        }\n      }\n    }\n  });\n\n  addToQueue(() => {\n    for (const instance of getInstances()) {\n      if (!instance.$el.isConnected) {\n        instance.$terminate();\n      }\n    }\n  });\n}\n\nexport function addToRegistry(nameOrSelector: string, ctor: BaseConstructor) {\n  if (registry().has(nameOrSelector)) {\n    return;\n  }\n\n  registry().set(nameOrSelector, ctor);\n\n  // Add children components to the registry\n  if (ctor.config?.components) {\n    for (const [selector, childConstructor] of Object.entries(ctor.config?.components)) {\n      if ('$isBase' in childConstructor && childConstructor.$isBase) {\n        addToRegistry(selector, childConstructor);\n      }\n    }\n  }\n\n  const mutation = useMutation(document, { childList: true, subtree: true });\n  if (!mutation.has(registryKey)) {\n    mutation.add(registryKey, mutationCallback);\n  }\n}\n\n/**\n * Find the closest instance from the given element in the given set of Base instances.\n */\nexport function findClosestInstance<T extends Base = Base>(element: HTMLElement, instances: Set<T>): T {\n  let closest = null;\n  let minDepth = Infinity;\n\n  for (const instance of instances) {\n    let depth = 0;\n    let el = element;\n    while (el && el !== instance.$el) {\n      depth++;\n      el = el.parentElement;\n    }\n\n    if (depth < minDepth) {\n      minDepth = depth;\n      closest = instance;\n    }\n  }\n\n  return closest;\n}\n"],
+  "mappings": "AAAA,SAAS,SAAS,WAAW,YAAY,gBAAgB;AAEzD,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AAEvC,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;AAKX,SAAS,YAAY,gBAAgC;AAC1D,QAAM,EAAE,UAAU,IAAI,SAAS,IAAI,YAAY;AAC/C,QAAM,SAAS,SAAS,IAAI,QAAQ;AACpC,QAAM,MAAM,SAAS,YAAY;AAEjC,MAAI,CAAC,UAAU,IAAI,GAAG,GAAG;AACvB,UAAM,QAAQ;AAAA;AAAA,MAEZ,GAAG,MAAM,IAAI,SAAS,cAAc,CAAC;AAAA;AAAA,MAErC,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;AAKO,SAAS,eAAe,UAAgB,OAAe,QAAiC;AAC7F,MAAI,uBAAuB,OAAO,MAAM,KAAK,cAAc,OAAO,SAAS,GAAG,GAAG;AAC/E,WAAO,SAAS;AAAA,EAClB;AACF;AAOA,SAAS,sBAAiC;AACxC,SAAQ,WAAW,6BAA6B,oBAAI,IAAU;AAChE;AAMA,SAAS,qBAAwE;AAC/E,SAAQ,WAAW,4BAA4B,oBAAI,IAAkD;AACvG;AAUO,SAAS,aACd,MACkD;AAClD,MAAI,UAAU,IAAI,GAAG;AACnB,UAAM,oBAAoB,oBAAI,IAAqB;AACnD,eAAW,YAAY,oBAAoB,GAAG;AAC5C,UAAI,oBAAoB,MAAM;AAC5B,0BAAkB,IAAI,QAA2B;AAAA,MACnD;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,SAAO,IAAI,IAAI,oBAAoB,CAAC;AACtC;AAEO,SAAS,cAAc;AAC5B,SAAO,IAAI,IAAI,mBAAmB,CAAC;AACrC;AAEO,SAAS,YAAY,UAAgB;AAC1C,sBAAoB,EAAE,IAAI,QAAQ;AAClC,qBAAmB,EAAE,IAAI,SAAS,GAAmD;AACvF;AAEO,SAAS,eAAe,UAAgB;AAC7C,sBAAoB,EAAE,OAAO,QAAQ;AACrC,qBAAmB,EAAE,OAAO,SAAS,GAAmD;AAC1F;AAEA,MAAM,cAAc;AAEpB,SAAS,WAAW;AAClB,SAAQ,WAAW,WAAW,MAAM,oBAAI,IAA6B;AACvE;AAEA,SAAS,mBAAmB;AAC1B,aAAW,MAAM;AACf,eAAW,CAAC,gBAAgB,IAAI,KAAK,SAAS,GAAG;AAC/C,iBAAW,MAAM,qBAAqB,cAAc,GAAG;AACrD,YAAI,CAAC,uBAAuB,IAAI,IAAI,GAAG;AACrC,cAAI,KAAK,EAAE,EAAE,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AAED,aAAW,MAAM;AACf,eAAW,YAAY,aAAa,GAAG;AACrC,UAAI,CAAC,SAAS,IAAI,aAAa;AAC7B,iBAAS,WAAW;AAAA,MACtB;AAAA,IACF;AAAA,EACF,CAAC;AACH;AAEO,SAAS,cAAc,gBAAwB,MAAuB;AAC3E,MAAI,SAAS,EAAE,IAAI,cAAc,GAAG;AAClC;AAAA,EACF;AAEA,WAAS,EAAE,IAAI,gBAAgB,IAAI;AAGnC,MAAI,KAAK,QAAQ,YAAY;AAC3B,eAAW,CAAC,UAAU,gBAAgB,KAAK,OAAO,QAAQ,KAAK,QAAQ,UAAU,GAAG;AAClF,UAAI,aAAa,oBAAoB,iBAAiB,SAAS;AAC7D,sBAAc,UAAU,gBAAgB;AAAA,MAC1C;AAAA,IACF;AAAA,EACF;AAEA,QAAM,WAAW,YAAY,UAAU,EAAE,WAAW,MAAM,SAAS,KAAK,CAAC;AACzE,MAAI,CAAC,SAAS,IAAI,WAAW,GAAG;AAC9B,aAAS,IAAI,aAAa,gBAAgB;AAAA,EAC5C;AACF;AAKO,SAAS,oBAA2C,SAAsB,WAAsB;AACrG,MAAI,UAAU;AACd,MAAI,WAAW;AAEf,aAAW,YAAY,WAAW;AAChC,QAAI,QAAQ;AACZ,QAAI,KAAK;AACT,WAAO,MAAM,OAAO,SAAS,KAAK;AAChC;AACA,WAAK,GAAG;AAAA,IACV;AAEA,QAAI,QAAQ,UAAU;AACpB,iBAAW;AACX,gBAAU;AAAA,IACZ;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/helpers/createApp.js

@@ -1,5 +1,7 @@
 import { features } from "../Base/features.js";
 import { defineFeatures } from "./defineFeatures.js";
+import { isDev } from "../utils/index.js";
+import { logTree } from "./logTree.js";
 function createApp(App, options = {}) {
   let app;
   const {
@@ -10,6 +12,9 @@ function createApp(App, options = {}) {
   async function init() {
     app = new App(root);
     await app.$mount();
+    if (isDev) {
+      globalThis.$logTree = () => logTree(app);
+    }
     return app;
   }
   let p;

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 { defineFeatures } from './defineFeatures.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 * @link https://js-toolkit.studiometa.dev/api/helpers/createApp.html\n*/\nexport 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    ...featureOptions\n  } = options instanceof HTMLElement ? { root: options } : options;\n\n  defineFeatures(featureOptions);\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,sBAAsB;AAWxB,SAAS,UACd,KACA,UAA0C,CAAC,GACf;AAC5B,MAAI;AACJ,QAAM;AAAA,IACJ,OAAO,SAAS;AAAA,IAChB,GAAG;AAAA,EACL,IAAI,mBAAmB,cAAc,EAAE,MAAM,QAAQ,IAAI;AAEzD,iBAAe,cAAc;AAE7B,iBAAe,OAAO;AACpB,UAAM,IAAI,IAAI,IAAI;AAClB,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;",
+  "sourcesContent": ["import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport type { Features } from '../Base/features.js';\nimport { features } from '../Base/features.js';\nimport { defineFeatures } from './defineFeatures.js';\nimport { isDev } from '../utils/index.js';\nimport { logTree } from './logTree.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 * @link https://js-toolkit.studiometa.dev/api/helpers/createApp.html\n*/\nexport 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    ...featureOptions\n  } = options instanceof HTMLElement ? { root: options } : options;\n\n  defineFeatures(featureOptions);\n\n  async function init() {\n    app = new App(root) as S & Base<T>;\n    await app.$mount();\n    if (isDev) {\n      globalThis.$logTree = () => logTree(app);\n    }\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,sBAAsB;AAC/B,SAAS,aAAa;AACtB,SAAS,eAAe;AAWjB,SAAS,UACd,KACA,UAA0C,CAAC,GACf;AAC5B,MAAI;AACJ,QAAM;AAAA,IACJ,OAAO,SAAS;AAAA,IAChB,GAAG;AAAA,EACL,IAAI,mBAAmB,cAAc,EAAE,MAAM,QAAQ,IAAI;AAEzD,iBAAe,cAAc;AAE7B,iBAAe,OAAO;AACpB,UAAM,IAAI,IAAI,IAAI;AAClB,UAAM,IAAI,OAAO;AACjB,QAAI,OAAO;AACT,iBAAW,WAAW,MAAM,QAAQ,GAAG;AAAA,IACzC;AACA,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/helpers/index.d.ts

@@ -8,5 +8,6 @@ export * from './importOnMediaQuery.js';
 export * from './importWhenIdle.js';
 export * from './importWhenPrefersMotion.js';
 export * from './importWhenVisible.js';
+export * from './logTree.js';
 export * from './registerComponent.js';
 export { type QueryOptions, queryComponent, queryComponentAll, closestComponent, } from './queryComponent.js';

package/helpers/index.js

@@ -8,6 +8,7 @@ export * from "./importOnMediaQuery.js";
 export * from "./importWhenIdle.js";
 export * from "./importWhenPrefersMotion.js";
 export * from "./importWhenVisible.js";
+export * from "./logTree.js";
 export * from "./registerComponent.js";
 import {
   queryComponent,

package/helpers/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/index.ts"],
-  "sourcesContent": ["export * from './createApp.js';\nexport * from './defineFeatures.js';\nexport * from './getClosestParent.js';\nexport * from './getDirectChildren.js';\nexport * from './getInstanceFromElement.js';\nexport * from './importOnInteraction.js';\nexport * from './importOnMediaQuery.js';\nexport * from './importWhenIdle.js';\nexport * from './importWhenPrefersMotion.js';\nexport * from './importWhenVisible.js';\nexport * from './registerComponent.js';\nexport {\n  type QueryOptions,\n  queryComponent,\n  queryComponentAll,\n  closestComponent,\n} from './queryComponent.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
+  "sourcesContent": ["export * from './createApp.js';\nexport * from './defineFeatures.js';\nexport * from './getClosestParent.js';\nexport * from './getDirectChildren.js';\nexport * from './getInstanceFromElement.js';\nexport * from './importOnInteraction.js';\nexport * from './importOnMediaQuery.js';\nexport * from './importWhenIdle.js';\nexport * from './importWhenPrefersMotion.js';\nexport * from './importWhenVisible.js';\nexport * from './logTree.js';\nexport * from './registerComponent.js';\nexport {\n  type QueryOptions,\n  queryComponent,\n  queryComponentAll,\n  closestComponent,\n} from './queryComponent.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
   "names": []
 }

package/helpers/logTree.d.ts

@@ -0,0 +1,17 @@
+import type { Base } from '../Base/Base.js';
+/**
+ * Log the component tree starting from the given instance.
+ *
+ * Uses the global instance registry and DOM containment to build the tree,
+ * without relying on the deprecated `$children` API.
+ *
+ * @param   {Base} instance The root component instance.
+ * @example
+ * ```js
+ * import { createApp, logTree } from '@studiometa/js-toolkit';
+ *
+ * const useApp = createApp(App);
+ * useApp().then((app) => logTree(app));
+ * ```
+ */
+export declare function logTree(instance: Base): void;

package/helpers/logTree.js

@@ -0,0 +1,59 @@
+import { getInstances } from "../Base/index.js";
+function buildTree(root) {
+  const allInstances = getInstances();
+  const rootNode = { instance: root, children: [] };
+  const descendants = [];
+  for (const instance of allInstances) {
+    if (instance !== root && root.$el.contains(instance.$el)) {
+      descendants.push(instance);
+    }
+  }
+  descendants.sort((a, b) => {
+    const position = a.$el.compareDocumentPosition(b.$el);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+    return 0;
+  });
+  const nodeMap = /* @__PURE__ */ new Map();
+  nodeMap.set(root, rootNode);
+  for (const instance of descendants) {
+    const node = { instance, children: [] };
+    nodeMap.set(instance, node);
+    let parentNode = rootNode;
+    for (const [candidate, candidateNode] of nodeMap) {
+      if (candidate !== instance && candidate.$el.contains(instance.$el) && // Pick the most specific (deepest) container
+      parentNode.instance.$el.contains(candidate.$el)) {
+        parentNode = candidateNode;
+      }
+    }
+    parentNode.children.push(node);
+  }
+  return rootNode;
+}
+function logNode(node) {
+  const { instance } = node;
+  const mounted = instance.$isMounted;
+  const status = mounted ? "\u25CF" : "\u25CB";
+  const label = `${status} ${instance.$id}`;
+  if (node.children.length > 0) {
+    console.groupCollapsed(label, instance.$el);
+    for (const child of node.children) {
+      logNode(child);
+    }
+    console.groupEnd();
+  } else {
+    console.log(label, instance.$el);
+  }
+}
+function logTree(instance) {
+  const tree = buildTree(instance);
+  console.group(`\u{1F333} ${instance.$config.name}`);
+  for (const child of tree.children) {
+    logNode(child);
+  }
+  console.groupEnd();
+}
+export {
+  logTree
+};
+//# sourceMappingURL=logTree.js.map

package/helpers/logTree.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/logTree.ts"],
+  "sourcesContent": ["import type { Base } from '../Base/Base.js';\nimport { getInstances } from '../Base/index.js';\n\n/**\n * Build a tree structure from a flat set of instances using DOM containment.\n */\nfunction buildTree(root: Base): TreeNode {\n  const allInstances = getInstances();\n  const rootNode: TreeNode = { instance: root, children: [] };\n\n  // Collect all instances that are descendants of root (excluding root itself)\n  const descendants: Base[] = [];\n  for (const instance of allInstances) {\n    if (instance !== root && root.$el.contains(instance.$el)) {\n      descendants.push(instance);\n    }\n  }\n\n  // Sort by DOM order (depth-first)\n  descendants.sort((a, b) => {\n    const position = a.$el.compareDocumentPosition(b.$el);\n    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;\n    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;\n    return 0;\n  });\n\n  // Build tree: assign each instance to its closest ancestor in the tree\n  const nodeMap = new Map<Base, TreeNode>();\n  nodeMap.set(root, rootNode);\n\n  for (const instance of descendants) {\n    const node: TreeNode = { instance, children: [] };\n    nodeMap.set(instance, node);\n\n    // Find the closest ancestor that is already in the tree\n    let parentNode = rootNode;\n    for (const [candidate, candidateNode] of nodeMap) {\n      if (\n        candidate !== instance &&\n        candidate.$el.contains(instance.$el) &&\n        // Pick the most specific (deepest) container\n        parentNode.instance.$el.contains(candidate.$el)\n      ) {\n        parentNode = candidateNode;\n      }\n    }\n\n    parentNode.children.push(node);\n  }\n\n  return rootNode;\n}\n\ninterface TreeNode {\n  instance: Base;\n  children: TreeNode[];\n}\n\n/**\n * Log a tree node and its children using console groups.\n */\nfunction logNode(node: TreeNode): void {\n  const { instance } = node;\n  const mounted = instance.$isMounted;\n  const status = mounted ? '\u25CF' : '\u25CB';\n  const label = `${status} ${instance.$id}`;\n\n  if (node.children.length > 0) {\n    console.groupCollapsed(label, instance.$el);\n    for (const child of node.children) {\n      logNode(child);\n    }\n    console.groupEnd();\n  } else {\n    console.log(label, instance.$el);\n  }\n}\n\n/**\n * Log the component tree starting from the given instance.\n *\n * Uses the global instance registry and DOM containment to build the tree,\n * without relying on the deprecated `$children` API.\n *\n * @param   {Base} instance The root component instance.\n * @example\n * ```js\n * import { createApp, logTree } from '@studiometa/js-toolkit';\n *\n * const useApp = createApp(App);\n * useApp().then((app) => logTree(app));\n * ```\n */\nexport function logTree(instance: Base): void {\n  const tree = buildTree(instance);\n  console.group(`\uD83C\uDF33 ${instance.$config.name}`);\n  for (const child of tree.children) {\n    logNode(child);\n  }\n  console.groupEnd();\n}\n"],
+  "mappings": "AACA,SAAS,oBAAoB;AAK7B,SAAS,UAAU,MAAsB;AACvC,QAAM,eAAe,aAAa;AAClC,QAAM,WAAqB,EAAE,UAAU,MAAM,UAAU,CAAC,EAAE;AAG1D,QAAM,cAAsB,CAAC;AAC7B,aAAW,YAAY,cAAc;AACnC,QAAI,aAAa,QAAQ,KAAK,IAAI,SAAS,SAAS,GAAG,GAAG;AACxD,kBAAY,KAAK,QAAQ;AAAA,IAC3B;AAAA,EACF;AAGA,cAAY,KAAK,CAAC,GAAG,MAAM;AACzB,UAAM,WAAW,EAAE,IAAI,wBAAwB,EAAE,GAAG;AACpD,QAAI,WAAW,KAAK,4BAA6B,QAAO;AACxD,QAAI,WAAW,KAAK,4BAA6B,QAAO;AACxD,WAAO;AAAA,EACT,CAAC;AAGD,QAAM,UAAU,oBAAI,IAAoB;AACxC,UAAQ,IAAI,MAAM,QAAQ;AAE1B,aAAW,YAAY,aAAa;AAClC,UAAM,OAAiB,EAAE,UAAU,UAAU,CAAC,EAAE;AAChD,YAAQ,IAAI,UAAU,IAAI;AAG1B,QAAI,aAAa;AACjB,eAAW,CAAC,WAAW,aAAa,KAAK,SAAS;AAChD,UACE,cAAc,YACd,UAAU,IAAI,SAAS,SAAS,GAAG;AAAA,MAEnC,WAAW,SAAS,IAAI,SAAS,UAAU,GAAG,GAC9C;AACA,qBAAa;AAAA,MACf;AAAA,IACF;AAEA,eAAW,SAAS,KAAK,IAAI;AAAA,EAC/B;AAEA,SAAO;AACT;AAUA,SAAS,QAAQ,MAAsB;AACrC,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,UAAU,SAAS;AACzB,QAAM,SAAS,UAAU,WAAM;AAC/B,QAAM,QAAQ,GAAG,MAAM,IAAI,SAAS,GAAG;AAEvC,MAAI,KAAK,SAAS,SAAS,GAAG;AAC5B,YAAQ,eAAe,OAAO,SAAS,GAAG;AAC1C,eAAW,SAAS,KAAK,UAAU;AACjC,cAAQ,KAAK;AAAA,IACf;AACA,YAAQ,SAAS;AAAA,EACnB,OAAO;AACL,YAAQ,IAAI,OAAO,SAAS,GAAG;AAAA,EACjC;AACF;AAiBO,SAAS,QAAQ,UAAsB;AAC5C,QAAM,OAAO,UAAU,QAAQ;AAC/B,UAAQ,MAAM,aAAM,SAAS,QAAQ,IAAI,EAAE;AAC3C,aAAW,SAAS,KAAK,UAAU;AACjC,YAAQ,KAAK;AAAA,EACf;AACA,UAAQ,SAAS;AACnB;",
+  "names": []
+}

package/helpers/queryComponent.js

@@ -42,20 +42,19 @@ function queryComponentAll(query, options = {}) {
 function closestComponent(query, options = { from: null }) {
   const { from } = options;
   const parsedQuery = parseQuery(query);
-  const instances = getInstances();
-  let closestInstance = null;
+  let closestInstance;
   getAncestorWhere(from, (element) => {
     if (!element) return false;
-    if (parsedQuery.cssSelector && !element.matches(parsedQuery.cssSelector)) return false;
-    for (const instance of instances) {
-      if (instanceIsMatching(instance, parsedQuery)) {
-        closestInstance = instance;
-        return true;
-      }
+    const baseMap = element.__base__;
+    if (!baseMap) return false;
+    const instance = baseMap.get(parsedQuery.name);
+    if (instance && instance !== "terminated" && instanceIsMatching(instance, parsedQuery)) {
+      closestInstance = instance;
+      return true;
     }
     return false;
-  }) ?? void 0;
-  return closestInstance ?? void 0;
+  });
+  return closestInstance;
 }
 export {
   closestComponent,

package/helpers/queryComponent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/queryComponent.ts"],
-  "sourcesContent": ["import type { Base } from '../Base/index.js';\nimport { getInstances } from '../Base/index.js';\nimport { memo } from '../utils/memo.js';\nimport { getAncestorWhere } from '../utils/dom/ancestors.js';\n\nexport interface QueryOptions {\n  from?: HTMLElement | Document;\n}\n\ntype ComponentState = 'mounted' | 'destroyed' | 'terminated';\nexport type ParsedQuery = {\n  name: string;\n  cssSelector?: string;\n  state?: string;\n};\n\nconst REGEX_QUERY = /([a-zA-Z0-9]+)(\\((.*)\\))?(:([a-z]+))?/;\n\n/**\n * Parse a query string like 'Foo(.css-selector):mounted' into its parts.\n */\nexport const parseQuery = memo((query: string): ParsedQuery => {\n  const [, name, , cssSelector, , state] = query.match(REGEX_QUERY) as [\n    string,\n    string,\n    string | undefined,\n    string | undefined,\n    string | undefined,\n    ComponentState | undefined,\n  ];\n\n  return {\n    name,\n    cssSelector,\n    state,\n  };\n});\n\nexport function instanceIsMatching(instance: Base, parsedQuery: ParsedQuery): boolean {\n  if (instance.$config.name !== parsedQuery.name) return false;\n  if (parsedQuery.cssSelector && !instance.$el.matches(parsedQuery.cssSelector)) return false;\n\n  if (parsedQuery.state === 'mounted' && !instance.$isMounted) return false;\n  if (parsedQuery.state === 'destroyed' && instance.$isMounted) return false;\n\n  return true;\n}\n\n/**\n * Get the first instance of component with the given query.\n */\nexport function queryComponent<T extends Base = Base>(\n  query: string,\n  options: QueryOptions = {},\n): T | undefined {\n  const parsedQuery = parseQuery(query);\n  const { from = document } = options;\n  const instances = getInstances() as Set<T>;\n\n  for (const instance of instances) {\n    if (!instanceIsMatching(instance, parsedQuery)) continue;\n    if (from !== document && !(from === instance.$el || from.contains(instance.$el))) continue;\n\n    return instance;\n  }\n}\n\n/**\n * Get all instances of component with the given query.\n */\nexport function queryComponentAll<T extends Base = Base>(\n  query: string,\n  options: QueryOptions = {},\n): T[] {\n  const parsedQuery = parseQuery(query);\n  const { from = document } = options;\n  const instances = getInstances() as Set<T>;\n  const selectedInstances = new Set<T>();\n\n  for (const instance of instances) {\n    if (!instanceIsMatching(instance, parsedQuery)) continue;\n    if (from !== document && !(from === instance.$el || from.contains(instance.$el))) continue;\n\n    selectedInstances.add(instance);\n  }\n\n  return Array.from(selectedInstances);\n}\n\n/**\n * Get the closest component instance by traversing up the DOM tree.\n */\nexport function closestComponent<T extends Base = Base>(\n  query: string,\n  options: { from: HTMLElement } = { from: null },\n): T | undefined {\n  const { from } = options;\n  const parsedQuery = parseQuery(query);\n  const instances = getInstances() as Set<T>;\n  let closestInstance = null;\n\n  getAncestorWhere(from, (element) => {\n    if (!element) return false;\n    if (parsedQuery.cssSelector && !element.matches(parsedQuery.cssSelector)) return false;\n\n    for (const instance of instances) {\n      if (instanceIsMatching(instance, parsedQuery)) {\n        closestInstance = instance;\n        return true;\n      }\n    }\n\n    return false;\n  }) ?? undefined;\n\n  return closestInstance ?? undefined;\n}\n"],
-  "mappings": "AACA,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,wBAAwB;AAajC,MAAM,cAAc;AAKb,MAAM,aAAa,KAAK,CAAC,UAA+B;AAC7D,QAAM,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,MAAM,MAAM,WAAW;AAShE,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF,CAAC;AAEM,SAAS,mBAAmB,UAAgB,aAAmC;AACpF,MAAI,SAAS,QAAQ,SAAS,YAAY,KAAM,QAAO;AACvD,MAAI,YAAY,eAAe,CAAC,SAAS,IAAI,QAAQ,YAAY,WAAW,EAAG,QAAO;AAEtF,MAAI,YAAY,UAAU,aAAa,CAAC,SAAS,WAAY,QAAO;AACpE,MAAI,YAAY,UAAU,eAAe,SAAS,WAAY,QAAO;AAErE,SAAO;AACT;AAKO,SAAS,eACd,OACA,UAAwB,CAAC,GACV;AACf,QAAM,cAAc,WAAW,KAAK;AACpC,QAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,QAAM,YAAY,aAAa;AAE/B,aAAW,YAAY,WAAW;AAChC,QAAI,CAAC,mBAAmB,UAAU,WAAW,EAAG;AAChD,QAAI,SAAS,YAAY,EAAE,SAAS,SAAS,OAAO,KAAK,SAAS,SAAS,GAAG,GAAI;AAElF,WAAO;AAAA,EACT;AACF;AAKO,SAAS,kBACd,OACA,UAAwB,CAAC,GACpB;AACL,QAAM,cAAc,WAAW,KAAK;AACpC,QAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,QAAM,YAAY,aAAa;AAC/B,QAAM,oBAAoB,oBAAI,IAAO;AAErC,aAAW,YAAY,WAAW;AAChC,QAAI,CAAC,mBAAmB,UAAU,WAAW,EAAG;AAChD,QAAI,SAAS,YAAY,EAAE,SAAS,SAAS,OAAO,KAAK,SAAS,SAAS,GAAG,GAAI;AAElF,sBAAkB,IAAI,QAAQ;AAAA,EAChC;AAEA,SAAO,MAAM,KAAK,iBAAiB;AACrC;AAKO,SAAS,iBACd,OACA,UAAiC,EAAE,MAAM,KAAK,GAC/B;AACf,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,cAAc,WAAW,KAAK;AACpC,QAAM,YAAY,aAAa;AAC/B,MAAI,kBAAkB;AAEtB,mBAAiB,MAAM,CAAC,YAAY;AAClC,QAAI,CAAC,QAAS,QAAO;AACrB,QAAI,YAAY,eAAe,CAAC,QAAQ,QAAQ,YAAY,WAAW,EAAG,QAAO;AAEjF,eAAW,YAAY,WAAW;AAChC,UAAI,mBAAmB,UAAU,WAAW,GAAG;AAC7C,0BAAkB;AAClB,eAAO;AAAA,MACT;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC,KAAK;AAEN,SAAO,mBAAmB;AAC5B;",
+  "sourcesContent": ["import type { Base, BaseEl } from '../Base/index.js';\nimport { getInstances } from '../Base/index.js';\nimport { memo } from '../utils/memo.js';\nimport { getAncestorWhere } from '../utils/dom/ancestors.js';\n\nexport interface QueryOptions {\n  from?: HTMLElement | Document;\n}\n\ntype ComponentState = 'mounted' | 'destroyed' | 'terminated';\nexport type ParsedQuery = {\n  name: string;\n  cssSelector?: string;\n  state?: string;\n};\n\nconst REGEX_QUERY = /([a-zA-Z0-9]+)(\\((.*)\\))?(:([a-z]+))?/;\n\n/**\n * Parse a query string like 'Foo(.css-selector):mounted' into its parts.\n */\nexport const parseQuery = memo((query: string): ParsedQuery => {\n  const [, name, , cssSelector, , state] = query.match(REGEX_QUERY) as [\n    string,\n    string,\n    string | undefined,\n    string | undefined,\n    string | undefined,\n    ComponentState | undefined,\n  ];\n\n  return {\n    name,\n    cssSelector,\n    state,\n  };\n});\n\nexport function instanceIsMatching(instance: Base, parsedQuery: ParsedQuery): boolean {\n  if (instance.$config.name !== parsedQuery.name) return false;\n  if (parsedQuery.cssSelector && !instance.$el.matches(parsedQuery.cssSelector)) return false;\n\n  if (parsedQuery.state === 'mounted' && !instance.$isMounted) return false;\n  if (parsedQuery.state === 'destroyed' && instance.$isMounted) return false;\n\n  return true;\n}\n\n/**\n * Get the first instance of component with the given query.\n */\nexport function queryComponent<T extends Base = Base>(\n  query: string,\n  options: QueryOptions = {},\n): T | undefined {\n  const parsedQuery = parseQuery(query);\n  const { from = document } = options;\n  const instances = getInstances() as ReadonlySet<T>;\n\n  for (const instance of instances) {\n    if (!instanceIsMatching(instance, parsedQuery)) continue;\n    if (from !== document && !(from === instance.$el || from.contains(instance.$el))) continue;\n\n    return instance;\n  }\n}\n\n/**\n * Get all instances of component with the given query.\n */\nexport function queryComponentAll<T extends Base = Base>(\n  query: string,\n  options: QueryOptions = {},\n): T[] {\n  const parsedQuery = parseQuery(query);\n  const { from = document } = options;\n  const instances = getInstances() as ReadonlySet<T>;\n  const selectedInstances = new Set<T>();\n\n  for (const instance of instances) {\n    if (!instanceIsMatching(instance, parsedQuery)) continue;\n    if (from !== document && !(from === instance.$el || from.contains(instance.$el))) continue;\n\n    selectedInstances.add(instance);\n  }\n\n  return Array.from(selectedInstances);\n}\n\n/**\n * Get the closest component instance by traversing up the DOM tree.\n */\nexport function closestComponent<T extends Base = Base>(\n  query: string,\n  options: { from: HTMLElement } = { from: null },\n): T | undefined {\n  const { from } = options;\n  const parsedQuery = parseQuery(query);\n  let closestInstance: T | undefined;\n\n  getAncestorWhere(from, (element) => {\n    if (!element) return false;\n\n    // Use the element's __base__ map for O(1) lookup by component name\n    const baseMap = (element as BaseEl).__base__;\n    if (!baseMap) return false;\n\n    const instance = baseMap.get(parsedQuery.name) as T;\n    if (instance && instance !== ('terminated' as unknown) && instanceIsMatching(instance, parsedQuery)) {\n      closestInstance = instance;\n      return true;\n    }\n\n    return false;\n  });\n\n  return closestInstance;\n}\n"],
+  "mappings": "AACA,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,wBAAwB;AAajC,MAAM,cAAc;AAKb,MAAM,aAAa,KAAK,CAAC,UAA+B;AAC7D,QAAM,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,MAAM,MAAM,WAAW;AAShE,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF,CAAC;AAEM,SAAS,mBAAmB,UAAgB,aAAmC;AACpF,MAAI,SAAS,QAAQ,SAAS,YAAY,KAAM,QAAO;AACvD,MAAI,YAAY,eAAe,CAAC,SAAS,IAAI,QAAQ,YAAY,WAAW,EAAG,QAAO;AAEtF,MAAI,YAAY,UAAU,aAAa,CAAC,SAAS,WAAY,QAAO;AACpE,MAAI,YAAY,UAAU,eAAe,SAAS,WAAY,QAAO;AAErE,SAAO;AACT;AAKO,SAAS,eACd,OACA,UAAwB,CAAC,GACV;AACf,QAAM,cAAc,WAAW,KAAK;AACpC,QAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,QAAM,YAAY,aAAa;AAE/B,aAAW,YAAY,WAAW;AAChC,QAAI,CAAC,mBAAmB,UAAU,WAAW,EAAG;AAChD,QAAI,SAAS,YAAY,EAAE,SAAS,SAAS,OAAO,KAAK,SAAS,SAAS,GAAG,GAAI;AAElF,WAAO;AAAA,EACT;AACF;AAKO,SAAS,kBACd,OACA,UAAwB,CAAC,GACpB;AACL,QAAM,cAAc,WAAW,KAAK;AACpC,QAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,QAAM,YAAY,aAAa;AAC/B,QAAM,oBAAoB,oBAAI,IAAO;AAErC,aAAW,YAAY,WAAW;AAChC,QAAI,CAAC,mBAAmB,UAAU,WAAW,EAAG;AAChD,QAAI,SAAS,YAAY,EAAE,SAAS,SAAS,OAAO,KAAK,SAAS,SAAS,GAAG,GAAI;AAElF,sBAAkB,IAAI,QAAQ;AAAA,EAChC;AAEA,SAAO,MAAM,KAAK,iBAAiB;AACrC;AAKO,SAAS,iBACd,OACA,UAAiC,EAAE,MAAM,KAAK,GAC/B;AACf,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,cAAc,WAAW,KAAK;AACpC,MAAI;AAEJ,mBAAiB,MAAM,CAAC,YAAY;AAClC,QAAI,CAAC,QAAS,QAAO;AAGrB,UAAM,UAAW,QAAmB;AACpC,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,WAAW,QAAQ,IAAI,YAAY,IAAI;AAC7C,QAAI,YAAY,aAAc,gBAA4B,mBAAmB,UAAU,WAAW,GAAG;AACnG,wBAAkB;AAClB,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,CAAC;AAED,SAAO;AACT;",
   "names": []
 }

package/index.d.ts

@@ -1,4 +1,4 @@
-export declare const version: "3.5.0";
+export declare const version: '3.6.0-beta.0';
 export * from './Base/index.js';
 export * from './Base/types.js';
 export * from './decorators/index.js';

package/index.js

@@ -1,4 +1,4 @@
-const version = "3.5.0";
+const version = "3.6.0-beta.0";
 export * from "./Base/index.js";
 export * from "./Base/types.js";
 export * from "./decorators/index.js";

package/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../packages/js-toolkit/index.ts"],
-  "sourcesContent": ["export const version = '3.5.0' as const;\n\nexport * from './Base/index.js';\nexport * from './Base/types.js';\nexport * from './decorators/index.js';\nexport * from './helpers/index.js';\nexport * from './services/index.js';\n"],
+  "sourcesContent": ["export const version = '3.6.0-beta.0' as const;\n\nexport * from './Base/index.js';\nexport * from './Base/types.js';\nexport * from './decorators/index.js';\nexport * from './helpers/index.js';\nexport * from './services/index.js';\n"],
   "mappings": "AAAO,MAAM,UAAU;AAEvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/package.json

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

package/services/AbstractService.d.ts

@@ -82,7 +82,7 @@ export declare class AbstractService<PropsType = any> {
     /**
      * Implements the EventListenerObject interface.
      */
-    handleEvent(event: Event): void;
+    handleEvent(_event: Event): void;
     /**
      * Add or remove event listeners based on the static `config` property.
      */

package/services/AbstractService.js

@@ -82,7 +82,7 @@ class AbstractService {
   /**
    * Implements the EventListenerObject interface.
    */
-  handleEvent(event) {
+  handleEvent(_event) {
   }
   /**
    * Add or remove event listeners based on the static `config` property.

package/services/AbstractService.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/services/AbstractService.ts"],
-  "sourcesContent": ["import { cache } from '../utils/cache.js';\n\nexport interface ServiceInterface<T> {\n  /**\n   * Remove a function from the resize service by its key.\n   */\n  remove(key: string | symbol): void;\n  /**\n   * Add a callback to the service. The callback will receive the current service props as parameter.\n   */\n  add(key: string | symbol, callback: (props: T) => void): void;\n  /**\n   * Test if the service has alreaydy a callback for the given key.\n   */\n  has(key: string | symbol): boolean;\n  /**\n   * Get the service's props.\n   */\n  props(): T;\n}\n\n/**\n * Service configuration of events to be attached to targets.\n */\nexport type ServiceConfig = [\n  (instance: AbstractService) => EventTarget,\n  [string, AddEventListenerOptions?][],\n][];\n\n/**\n * AbstractService class.\n */\nexport class AbstractService<PropsType = any> {\n  /**\n   * Used to type `this.constructor` correctly\n   * @link https://github.com/microsoft/TypeScript/issues/3841#issuecomment-2381594311\n   */\n  declare ['constructor']: typeof AbstractService;\n\n  /**\n   * Service configuration.\n   */\n  static config: ServiceConfig = [];\n\n  /**\n   * Cache for the created instances.\n   */\n  static __instances = new Map();\n\n  /**\n   * Get a service instance as a singleton based on the given key.\n   */\n  static getInstance<T extends ServiceInterface<any>>(keys: any = [this], ...args: any[]) {\n    return cache(keys, () => {\n      // @ts-ignore\n      const instance = new this(...args);\n      return {\n        add: (key, callback) => instance.add(key, callback),\n        remove: (key) => instance.remove(key),\n        has: (key) => instance.has(key),\n        props: () => instance.props,\n      } as T;\n    });\n  }\n\n  /**\n   * Is the service active or not?\n   */\n  __isInit = false;\n\n  /**\n   * Props for the service.\n   */\n  props = {};\n\n  /**\n   * Holds all the callbacks that will be triggered.\n   */\n  callbacks: Map<string | symbol, (props: PropsType) => unknown> = new Map();\n\n  /**\n   * Does the service has the given key?\n   */\n  has(key: string | symbol): boolean {\n    return this.callbacks.has(key);\n  }\n\n  /**\n   * Get a service callback by its key.\n   */\n  get(key: string | symbol): (props: PropsType) => unknown {\n    return this.callbacks.get(key);\n  }\n\n  /**\n   * Add a callback to the service.\n   */\n  add(key: string | symbol, callback: (props: PropsType) => unknown) {\n    if (this.has(key)) {\n      console.warn(`The key \\`${String(key)}\\` has already been added.`);\n      return;\n    }\n\n    // Initialize the service when we add the first callback\n    if (this.callbacks.size === 0 && !this.__isInit) {\n      this.init();\n      this.__isInit = true;\n    }\n\n    this.callbacks.set(key, callback);\n  }\n\n  /**\n   * Remove a callback from the service by its key.\n   */\n  remove(key: string | symbol) {\n    this.callbacks.delete(key);\n\n    // Kill the service when we remove the last callback\n    if (this.callbacks.size === 0 && this.__isInit) {\n      this.kill();\n      this.__isInit = false;\n    }\n  }\n\n  /**\n   * Trigger all service callbacks with service props.\n   */\n  trigger(props: PropsType) {\n    for (const callback of this.callbacks.values()) {\n      callback(props);\n    }\n  }\n\n  /* v8 ignore next 6 */\n  /**\n   * Implements the EventListenerObject interface.\n   */\n  handleEvent(event: Event) {\n    // Should be implemented.\n  }\n\n  /**\n   * Add or remove event listeners based on the static `config` property.\n   */\n  __manageEvents(mode: 'add' | 'remove') {\n    for (const [target, events] of this.constructor.config) {\n      const resolvedTarget = target(this);\n      for (const [type, options] of events) {\n        resolvedTarget[`${mode}EventListener`](type, this, options);\n      }\n    }\n  }\n\n  /**\n   * Triggered when the service is initialized.\n   */\n  init() {\n    this.__manageEvents('add');\n  }\n\n  /**\n   * Triggered when the service is killed.\n   */\n  kill() {\n    this.__manageEvents('remove');\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AAgCf,MAAM,gBAAiC;AAAA;AAAA;AAAA;AAAA,EAU5C,OAAO,SAAwB,CAAC;AAAA;AAAA;AAAA;AAAA,EAKhC,OAAO,cAAc,oBAAI,IAAI;AAAA;AAAA;AAAA;AAAA,EAK7B,OAAO,YAA6C,OAAY,CAAC,IAAI,MAAM,MAAa;AACtF,WAAO,MAAM,MAAM,MAAM;AAEvB,YAAM,WAAW,IAAI,KAAK,GAAG,IAAI;AACjC,aAAO;AAAA,QACL,KAAK,CAAC,KAAK,aAAa,SAAS,IAAI,KAAK,QAAQ;AAAA,QAClD,QAAQ,CAAC,QAAQ,SAAS,OAAO,GAAG;AAAA,QACpC,KAAK,CAAC,QAAQ,SAAS,IAAI,GAAG;AAAA,QAC9B,OAAO,MAAM,SAAS;AAAA,MACxB;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AAAA;AAAA;AAAA;AAAA,EAKX,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,EAKT,YAAiE,oBAAI,IAAI;AAAA;AAAA;AAAA;AAAA,EAKzE,IAAI,KAA+B;AACjC,WAAO,KAAK,UAAU,IAAI,GAAG;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAqD;AACvD,WAAO,KAAK,UAAU,IAAI,GAAG;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAsB,UAAyC;AACjE,QAAI,KAAK,IAAI,GAAG,GAAG;AACjB,cAAQ,KAAK,aAAa,OAAO,GAAG,CAAC,4BAA4B;AACjE;AAAA,IACF;AAGA,QAAI,KAAK,UAAU,SAAS,KAAK,CAAC,KAAK,UAAU;AAC/C,WAAK,KAAK;AACV,WAAK,WAAW;AAAA,IAClB;AAEA,SAAK,UAAU,IAAI,KAAK,QAAQ;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,KAAsB;AAC3B,SAAK,UAAU,OAAO,GAAG;AAGzB,QAAI,KAAK,UAAU,SAAS,KAAK,KAAK,UAAU;AAC9C,WAAK,KAAK;AACV,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,OAAkB;AACxB,eAAW,YAAY,KAAK,UAAU,OAAO,GAAG;AAC9C,eAAS,KAAK;AAAA,IAChB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAAY,OAAc;AAAA,EAE1B;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,MAAwB;AACrC,eAAW,CAAC,QAAQ,MAAM,KAAK,KAAK,YAAY,QAAQ;AACtD,YAAM,iBAAiB,OAAO,IAAI;AAClC,iBAAW,CAAC,MAAM,OAAO,KAAK,QAAQ;AACpC,uBAAe,GAAG,IAAI,eAAe,EAAE,MAAM,MAAM,OAAO;AAAA,MAC5D;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,SAAK,eAAe,KAAK;AAAA,EAC3B;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,SAAK,eAAe,QAAQ;AAAA,EAC9B;AACF;",
+  "sourcesContent": ["import { cache } from '../utils/cache.js';\n\nexport interface ServiceInterface<T> {\n  /**\n   * Remove a function from the resize service by its key.\n   */\n  remove(key: string | symbol): void;\n  /**\n   * Add a callback to the service. The callback will receive the current service props as parameter.\n   */\n  add(key: string | symbol, callback: (props: T) => void): void;\n  /**\n   * Test if the service has alreaydy a callback for the given key.\n   */\n  has(key: string | symbol): boolean;\n  /**\n   * Get the service's props.\n   */\n  props(): T;\n}\n\n/**\n * Service configuration of events to be attached to targets.\n */\nexport type ServiceConfig = [\n  (instance: AbstractService) => EventTarget,\n  [string, AddEventListenerOptions?][],\n][];\n\n/**\n * AbstractService class.\n */\nexport class AbstractService<PropsType = any> {\n  /**\n   * Used to type `this.constructor` correctly\n   * @link https://github.com/microsoft/TypeScript/issues/3841#issuecomment-2381594311\n   */\n  declare ['constructor']: typeof AbstractService;\n\n  /**\n   * Service configuration.\n   */\n  static config: ServiceConfig = [];\n\n  /**\n   * Cache for the created instances.\n   */\n  static __instances = new Map();\n\n  /**\n   * Get a service instance as a singleton based on the given key.\n   */\n  static getInstance<T extends ServiceInterface<any>>(keys: any = [this], ...args: any[]) {\n    return cache(keys, () => {\n      // @ts-ignore\n      const instance = new this(...args);\n      return {\n        add: (key, callback) => instance.add(key, callback),\n        remove: (key) => instance.remove(key),\n        has: (key) => instance.has(key),\n        props: () => instance.props,\n      } as T;\n    });\n  }\n\n  /**\n   * Is the service active or not?\n   */\n  __isInit = false;\n\n  /**\n   * Props for the service.\n   */\n  props = {};\n\n  /**\n   * Holds all the callbacks that will be triggered.\n   */\n  callbacks: Map<string | symbol, (props: PropsType) => unknown> = new Map();\n\n  /**\n   * Does the service has the given key?\n   */\n  has(key: string | symbol): boolean {\n    return this.callbacks.has(key);\n  }\n\n  /**\n   * Get a service callback by its key.\n   */\n  get(key: string | symbol): (props: PropsType) => unknown {\n    return this.callbacks.get(key);\n  }\n\n  /**\n   * Add a callback to the service.\n   */\n  add(key: string | symbol, callback: (props: PropsType) => unknown) {\n    if (this.has(key)) {\n      console.warn(`The key \\`${String(key)}\\` has already been added.`);\n      return;\n    }\n\n    // Initialize the service when we add the first callback\n    if (this.callbacks.size === 0 && !this.__isInit) {\n      this.init();\n      this.__isInit = true;\n    }\n\n    this.callbacks.set(key, callback);\n  }\n\n  /**\n   * Remove a callback from the service by its key.\n   */\n  remove(key: string | symbol) {\n    this.callbacks.delete(key);\n\n    // Kill the service when we remove the last callback\n    if (this.callbacks.size === 0 && this.__isInit) {\n      this.kill();\n      this.__isInit = false;\n    }\n  }\n\n  /**\n   * Trigger all service callbacks with service props.\n   */\n  trigger(props: PropsType) {\n    for (const callback of this.callbacks.values()) {\n      callback(props);\n    }\n  }\n\n  /* v8 ignore next 6 */\n  /**\n   * Implements the EventListenerObject interface.\n   */\n  handleEvent(_event: Event) {\n    // Should be implemented.\n  }\n\n  /**\n   * Add or remove event listeners based on the static `config` property.\n   */\n  __manageEvents(mode: 'add' | 'remove') {\n    for (const [target, events] of this.constructor.config) {\n      const resolvedTarget = target(this);\n      for (const [type, options] of events) {\n        resolvedTarget[`${mode}EventListener`](type, this, options);\n      }\n    }\n  }\n\n  /**\n   * Triggered when the service is initialized.\n   */\n  init() {\n    this.__manageEvents('add');\n  }\n\n  /**\n   * Triggered when the service is killed.\n   */\n  kill() {\n    this.__manageEvents('remove');\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AAgCf,MAAM,gBAAiC;AAAA;AAAA;AAAA;AAAA,EAU5C,OAAO,SAAwB,CAAC;AAAA;AAAA;AAAA;AAAA,EAKhC,OAAO,cAAc,oBAAI,IAAI;AAAA;AAAA;AAAA;AAAA,EAK7B,OAAO,YAA6C,OAAY,CAAC,IAAI,MAAM,MAAa;AACtF,WAAO,MAAM,MAAM,MAAM;AAEvB,YAAM,WAAW,IAAI,KAAK,GAAG,IAAI;AACjC,aAAO;AAAA,QACL,KAAK,CAAC,KAAK,aAAa,SAAS,IAAI,KAAK,QAAQ;AAAA,QAClD,QAAQ,CAAC,QAAQ,SAAS,OAAO,GAAG;AAAA,QACpC,KAAK,CAAC,QAAQ,SAAS,IAAI,GAAG;AAAA,QAC9B,OAAO,MAAM,SAAS;AAAA,MACxB;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AAAA;AAAA;AAAA;AAAA,EAKX,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,EAKT,YAAiE,oBAAI,IAAI;AAAA;AAAA;AAAA;AAAA,EAKzE,IAAI,KAA+B;AACjC,WAAO,KAAK,UAAU,IAAI,GAAG;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAqD;AACvD,WAAO,KAAK,UAAU,IAAI,GAAG;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAsB,UAAyC;AACjE,QAAI,KAAK,IAAI,GAAG,GAAG;AACjB,cAAQ,KAAK,aAAa,OAAO,GAAG,CAAC,4BAA4B;AACjE;AAAA,IACF;AAGA,QAAI,KAAK,UAAU,SAAS,KAAK,CAAC,KAAK,UAAU;AAC/C,WAAK,KAAK;AACV,WAAK,WAAW;AAAA,IAClB;AAEA,SAAK,UAAU,IAAI,KAAK,QAAQ;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,KAAsB;AAC3B,SAAK,UAAU,OAAO,GAAG;AAGzB,QAAI,KAAK,UAAU,SAAS,KAAK,KAAK,UAAU;AAC9C,WAAK,KAAK;AACV,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,OAAkB;AACxB,eAAW,YAAY,KAAK,UAAU,OAAO,GAAG;AAC9C,eAAS,KAAK;AAAA,IAChB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAAY,QAAe;AAAA,EAE3B;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,MAAwB;AACrC,eAAW,CAAC,QAAQ,MAAM,KAAK,KAAK,YAAY,QAAQ;AACtD,YAAM,iBAAiB,OAAO,IAAI;AAClC,iBAAW,CAAC,MAAM,OAAO,KAAK,QAAQ;AACpC,uBAAe,GAAG,IAAI,eAAe,EAAE,MAAM,MAAM,OAAO;AAAA,MAC5D;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,SAAK,eAAe,KAAK;AAAA,EAC3B;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,SAAK,eAAe,QAAQ;AAAA,EAC9B;AACF;",
   "names": []
 }

package/services/DragService.d.ts

@@ -71,11 +71,11 @@ export interface DragServiceOptions {
 }
 export declare class DragService extends AbstractService<DragServiceProps> {
     static MODES: {
-        readonly START: "start";
-        readonly DRAG: "drag";
-        readonly DROP: "drop";
-        readonly INERTIA: "inertia";
-        readonly STOP: "stop";
+        readonly START: 'start';
+        readonly DRAG: 'drag';
+        readonly DROP: 'drop';
+        readonly INERTIA: 'inertia';
+        readonly STOP: 'stop';
     };
     static config: ServiceConfig;
     id: string;

package/services/RafService.d.ts

@@ -13,7 +13,7 @@ export declare class RafService extends AbstractService<RafServiceProps> {
     /**
      * @private
      */
-    scheduler: Record<"read" | "write" | "afterWrite", (fn: () => unknown) => void>;
+    scheduler: Record<"afterWrite" | "read" | "write", (fn: () => unknown) => void>;
     props: RafServiceProps;
     trigger(props: RafServiceProps): void;
     loop(): void;

package/services/RafService.js

@@ -15,16 +15,22 @@ class RafService extends AbstractService {
     delta: 0
   };
   trigger(props) {
-    for (const callback of this.callbacks.values()) {
-      this.scheduler.read(() => {
+    this.scheduler.read(() => {
+      const writeQueue = [];
+      for (const callback of this.callbacks.values()) {
         const render = callback(props);
         if (isFunction(render)) {
-          this.scheduler.write(() => {
-            render(props);
-          });
+          writeQueue.push(render);
         }
-      });
-    }
+      }
+      if (writeQueue.length > 0) {
+        this.scheduler.write(() => {
+          for (let i = 0; i < writeQueue.length; i++) {
+            writeQueue[i](props);
+          }
+        });
+      }
+    });
   }
   loop() {
     const time = performance.now();

package/services/RafService.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/services/RafService.ts"],
-  "sourcesContent": ["import type { ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { domScheduler } from '../utils/scheduler.js';\nimport { isFunction } from '../utils/is.js';\n\nexport interface RafServiceProps {\n  time: DOMHighResTimeStamp;\n  delta: number;\n}\n\nexport type RafServiceInterface = ServiceInterface<RafServiceProps>;\n\nexport class RafService extends AbstractService<RafServiceProps> {\n  /**\n   * @private\n   */\n  isTicking = false;\n\n  /**\n   * @private\n   */\n  scheduler = domScheduler;\n\n  props: RafServiceProps = {\n    time: performance.now(),\n    delta: 0,\n  };\n\n  trigger(props: RafServiceProps) {\n    for (const callback of this.callbacks.values()) {\n      this.scheduler.read(() => {\n        const render = callback(props) as (() => unknown) | void;\n        if (isFunction(render)) {\n          this.scheduler.write(() => {\n            // @ts-ignore\n            render(props);\n          });\n        }\n      });\n    }\n  }\n\n  loop() {\n    const time = performance.now();\n    this.props.delta = time - this.props.time;\n    this.props.time = time;\n    this.trigger(this.props);\n\n    if (!this.isTicking) {\n      return;\n    }\n\n    requestAnimationFrame(() => this.loop());\n  }\n\n  init() {\n    this.isTicking = true;\n    requestAnimationFrame(() => this.loop());\n  }\n\n  kill() {\n    this.isTicking = false;\n  }\n}\n\n/**\n * Use the RequestAnimationFrame (raf) service.\n * @link https://js-toolkit.studiometa.dev/api/services/useRaf.html\n*/\nexport function useRaf(): RafServiceInterface {\n  return RafService.getInstance();\n}\n"],
-  "mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AASpB,MAAM,mBAAmB,gBAAiC;AAAA;AAAA;AAAA;AAAA,EAI/D,YAAY;AAAA;AAAA;AAAA;AAAA,EAKZ,YAAY;AAAA,EAEZ,QAAyB;AAAA,IACvB,MAAM,YAAY,IAAI;AAAA,IACtB,OAAO;AAAA,EACT;AAAA,EAEA,QAAQ,OAAwB;AAC9B,eAAW,YAAY,KAAK,UAAU,OAAO,GAAG;AAC9C,WAAK,UAAU,KAAK,MAAM;AACxB,cAAM,SAAS,SAAS,KAAK;AAC7B,YAAI,WAAW,MAAM,GAAG;AACtB,eAAK,UAAU,MAAM,MAAM;AAEzB,mBAAO,KAAK;AAAA,UACd,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,OAAO;AACL,UAAM,OAAO,YAAY,IAAI;AAC7B,SAAK,MAAM,QAAQ,OAAO,KAAK,MAAM;AACrC,SAAK,MAAM,OAAO;AAClB,SAAK,QAAQ,KAAK,KAAK;AAEvB,QAAI,CAAC,KAAK,WAAW;AACnB;AAAA,IACF;AAEA,0BAAsB,MAAM,KAAK,KAAK,CAAC;AAAA,EACzC;AAAA,EAEA,OAAO;AACL,SAAK,YAAY;AACjB,0BAAsB,MAAM,KAAK,KAAK,CAAC;AAAA,EACzC;AAAA,EAEA,OAAO;AACL,SAAK,YAAY;AAAA,EACnB;AACF;AAMO,SAAS,SAA8B;AAC5C,SAAO,WAAW,YAAY;AAChC;",
+  "sourcesContent": ["import type { ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { domScheduler } from '../utils/scheduler.js';\nimport { isFunction } from '../utils/is.js';\n\nexport interface RafServiceProps {\n  time: DOMHighResTimeStamp;\n  delta: number;\n}\n\nexport type RafServiceInterface = ServiceInterface<RafServiceProps>;\n\nexport class RafService extends AbstractService<RafServiceProps> {\n  /**\n   * @private\n   */\n  isTicking = false;\n\n  /**\n   * @private\n   */\n  scheduler = domScheduler;\n\n  props: RafServiceProps = {\n    time: performance.now(),\n    delta: 0,\n  };\n\n  trigger(props: RafServiceProps) {\n    this.scheduler.read(() => {\n      const writeQueue: Array<(props: RafServiceProps) => unknown> = [];\n\n      for (const callback of this.callbacks.values()) {\n        const render = callback(props) as ((props: RafServiceProps) => unknown) | void;\n        if (isFunction(render)) {\n          writeQueue.push(render);\n        }\n      }\n\n      if (writeQueue.length > 0) {\n        this.scheduler.write(() => {\n          for (let i = 0; i < writeQueue.length; i++) {\n            writeQueue[i](props);\n          }\n        });\n      }\n    });\n  }\n\n  loop() {\n    const time = performance.now();\n    this.props.delta = time - this.props.time;\n    this.props.time = time;\n    this.trigger(this.props);\n\n    if (!this.isTicking) {\n      return;\n    }\n\n    requestAnimationFrame(() => this.loop());\n  }\n\n  init() {\n    this.isTicking = true;\n    requestAnimationFrame(() => this.loop());\n  }\n\n  kill() {\n    this.isTicking = false;\n  }\n}\n\n/**\n * Use the RequestAnimationFrame (raf) service.\n * @link https://js-toolkit.studiometa.dev/api/services/useRaf.html\n*/\nexport function useRaf(): RafServiceInterface {\n  return RafService.getInstance();\n}\n"],
+  "mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AASpB,MAAM,mBAAmB,gBAAiC;AAAA;AAAA;AAAA;AAAA,EAI/D,YAAY;AAAA;AAAA;AAAA;AAAA,EAKZ,YAAY;AAAA,EAEZ,QAAyB;AAAA,IACvB,MAAM,YAAY,IAAI;AAAA,IACtB,OAAO;AAAA,EACT;AAAA,EAEA,QAAQ,OAAwB;AAC9B,SAAK,UAAU,KAAK,MAAM;AACxB,YAAM,aAAyD,CAAC;AAEhE,iBAAW,YAAY,KAAK,UAAU,OAAO,GAAG;AAC9C,cAAM,SAAS,SAAS,KAAK;AAC7B,YAAI,WAAW,MAAM,GAAG;AACtB,qBAAW,KAAK,MAAM;AAAA,QACxB;AAAA,MACF;AAEA,UAAI,WAAW,SAAS,GAAG;AACzB,aAAK,UAAU,MAAM,MAAM;AACzB,mBAAS,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK;AAC1C,uBAAW,CAAC,EAAE,KAAK;AAAA,UACrB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,OAAO;AACL,UAAM,OAAO,YAAY,IAAI;AAC7B,SAAK,MAAM,QAAQ,OAAO,KAAK,MAAM;AACrC,SAAK,MAAM,OAAO;AAClB,SAAK,QAAQ,KAAK,KAAK;AAEvB,QAAI,CAAC,KAAK,WAAW;AACnB;AAAA,IACF;AAEA,0BAAsB,MAAM,KAAK,KAAK,CAAC;AAAA,EACzC;AAAA,EAEA,OAAO;AACL,SAAK,YAAY;AACjB,0BAAsB,MAAM,KAAK,KAAK,CAAC;AAAA,EACzC;AAAA,EAEA,OAAO;AACL,SAAK,YAAY;AAAA,EACnB;AACF;AAMO,SAAS,SAA8B;AAC5C,SAAO,WAAW,YAAY;AAChC;",
   "names": []
 }

package/services/ScrollService.d.ts

@@ -45,14 +45,32 @@ export interface ScrollServiceProps {
 export type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;
 export declare class ScrollService extends AbstractService<ScrollServiceProps> {
     static config: ServiceConfig;
+    /**
+     * Cached scroll max values, updated on resize and first scroll.
+     * @private
+     */
+    __maxX: number | null;
+    __maxY: number | null;
+    /**
+     * Observe scroll container size changes that do not trigger window resize.
+     * @private
+     */
+    __resizeObserver: ResizeObserver | null;
     props: ScrollServiceProps;
     updateProps(): ScrollServiceProps;
-    update(): void;
+    update(trigger?: boolean): void;
     onScrollDebounced: (...args: unknown[]) => void;
     /**
-     * Scroll handler.
+     * Update cached max scroll values on resize.
+     * @private
+     */
+    __updateMaxValues(): void;
+    /**
+     * Scroll and resize handler.
      */
-    handleEvent(): void;
+    handleEvent(event: Event): void;
+    init(): void;
+    kill(): void;
 }
 /**
  * Use the scroll service.