@studiometa/js-toolkit 3.0.0-beta.2 → 3.0.0-beta.3

package/Base/managers/EventsManager.js

@@ -1,4 +1,4 @@
-import getAllProperties from "../../utils/object/getAllProperties.js";
+import { getAllProperties } from "../../utils/object/getAllProperties.js";
 import { dashCase, isArray, pascalCase } from "../../utils/index.js";
 import { getEventTarget, eventIsNative, eventIsDefinedInConfig } from "../utils.js";
 import { AbstractManager } from "./AbstractManager.js";

package/Base/managers/EventsManager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/Base/managers/EventsManager.ts"],
-  "sourcesContent": ["import type { Base, BaseProps } from '../index.js';\nimport getAllProperties from '../../utils/object/getAllProperties.js';\nimport { dashCase, isArray, pascalCase } from '../../utils/index.js';\nimport { getEventTarget, eventIsNative, eventIsDefinedInConfig } from '../utils.js';\nimport { AbstractManager } from './AbstractManager.js';\nimport { normalizeRefName } from './RefsManager.js';\nimport { features } from '../features.js';\n\nconst regexes = new Map();\n\n/**\n * Get a regex with a cache;\n *\n * @param   {string} regex\n * @returns {RegExp}\n */\nfunction getRegex(regex: string): RegExp {\n  if (!regexes.has(regex)) {\n    regexes.set(regex, new RegExp(regex));\n  }\n\n  return regexes.get(regex);\n}\n\n/**\n * Get the event name from the given method and its tied ref or children name.\n *\n * @param {string} method\n * @param {string} name\n * @returns {string}\n * @private\n */\nfunction getEventNameByMethod(method: string, name = ''): string {\n  const regex = getRegex(`^on${pascalCase(name)}([A-Z].*)$`);\n  const [, event] = method.match(regex);\n  return dashCase(event);\n}\n\n/**\n * Get the base instance methods matching the `onSomething` pattern.\n *\n * @param {EventsManager} that\n * @param {string} [name]\n * @returns {string[]}\n * @private\n */\n// eslint-disable-next-line no-use-before-define\nfunction getEventMethodsByName(that: EventsManager, name = ''): string[] {\n  const regex = getRegex(`^on${pascalCase(name)}[A-Z].*$`);\n  const key = regex.toString();\n\n  let methods = that.__methodsCache.get(key);\n\n  if (!methods) {\n    methods = Array.from(\n      getAllProperties(that.__base, [], (method) => regex.test(method)).reduce(\n        (set, [method]) => set.add(method),\n        new Set(),\n      ),\n    ) as string[];\n    that.__methodsCache.set(key, methods);\n  }\n\n  return methods;\n}\n\n/**\n * Manage a ref event methods.\n *\n * @param {EventsManager} that\n * @param  {string} name\n *   The name of the ref.\n * @param  {HTMLElement[]} elements\n *   The elements of the ref.\n * @param  {'add'|'remove'} [mode]\n *   The action to perform: add or remove the event listeners.\n * @returns {void}\n * @private\n */\nfunction manageRef(\n  // eslint-disable-next-line no-use-before-define\n  that: EventsManager,\n  name: string,\n  elements: HTMLElement[],\n  mode: 'add' | 'remove' = 'add',\n) {\n  const action = `${mode}EventListener`;\n  const methods = getEventMethodsByName(that, name);\n  for (const method of methods) {\n    const event = getEventNameByMethod(method, name);\n    for (const element of elements) {\n      element?.[action](event, that.__refsHandler);\n    }\n  }\n}\n/**\n * Manage event methods to the given child instance.\n *\n * @param {EventsManager} that\n * @param {string} name\n *   The name of the ref.\n * @param {Base} instance\n *   A base instance.\n * @param {'add'|'remove'} [mode]\n *   The action to perform: add or remove the event listeners.\n * @returns {void}\n * @private\n */\nfunction manageChild(\n  // eslint-disable-next-line no-use-before-define\n  that: EventsManager,\n  name: string,\n  instance: Base,\n  mode: 'add' | 'remove' = 'add',\n) {\n  const action = mode === 'add' ? '$on' : '$off';\n  const methods = getEventMethodsByName(that, name);\n  const config = instance.__config;\n  for (const method of methods) {\n    const event = getEventNameByMethod(method, name);\n    if (getEventTarget(instance, event, config)) {\n      instance[action](event, that.__childrenHandler);\n    }\n  }\n}\n\nconst isDocumentRegex = /^onDocument[A-Z][a-z]+/;\nconst isWindowRegex = /^onWindow[A-Z][a-z]+/;\nconst methodIsDocument = (method) => isDocumentRegex.test(method);\nconst methodIsWindow = (method) => isWindowRegex.test(method);\nconst methodIsGlobal = (method) => methodIsWindow(method) || methodIsDocument(method);\nconst getGlobalEventTarget = (method) => (methodIsDocument(method) ? document : window);\n\n/**\n * Manage event methods on the root element.\n *\n * @param {EventsManager} that\n * @param {'add'|'remove'} [mode]\n *   The action to perform: add or remove the event listeners, defaults to 'add'.\n * @returns {void}\n * @private\n */\n// eslint-disable-next-line no-use-before-define\nfunction manageRootElement(that: EventsManager, mode: 'add' | 'remove' = 'add') {\n  const modeMethod = `${mode}EventListener`;\n  const methods = getEventMethodsByName(that);\n\n  const { __base: base, __config: config } = that;\n\n  for (const method of methods) {\n    let event = getEventNameByMethod(method);\n\n    if (methodIsGlobal(method)) {\n      event = getEventNameByMethod(method, methodIsDocument(method) ? 'document' : 'window');\n      const target = getGlobalEventTarget(method);\n      target[modeMethod](\n        event,\n        methodIsDocument(method) ? that.__documentHandler : that.__windowHandler,\n      );\n    } else {\n      const target = getEventTarget(base, event, config);\n      target?.[modeMethod](event, that.__rootElementHandler);\n    }\n  }\n}\n\nexport type EventManagerCallbackParams = {\n  event: Event | null;\n  args: Array<any>;\n  index: number;\n  target: Element | Base | Promise<Base> | typeof window | typeof document | null;\n};\n\n/**\n * Normalize `on...` method params.\n */\nfunction normalizeParams(\n  params: Partial<EventManagerCallbackParams> = {},\n): EventManagerCallbackParams {\n  return {\n    event: null,\n    args: [],\n    index: 0,\n    target: null,\n    ...params,\n  };\n}\n\n/**\n * Event management class.\n *\n * @todo Prevent binding of `onChildOrRefEvent` to the root element\n * @todo Use event delegation?\n */\nexport class EventsManager extends AbstractManager {\n  __methodsCache: Map<string, string[]> = new Map();\n\n  /**\n   * Event listener object for the root element.\n   */\n  __rootElementHandler: EventListenerObject = {\n    handleEvent: (event: Event | CustomEvent) => {\n      const normalizedEventName = pascalCase(event.type);\n      const method = `on${normalizedEventName}`;\n      const isCustomEvent = event instanceof CustomEvent;\n\n      this.__base[method](\n        normalizeParams({\n          event,\n          args: isCustomEvent ? (event.detail ?? []) : [],\n          target: isCustomEvent ? this.__base : this.__element,\n        }),\n      );\n    },\n  };\n\n  /**\n   * Event listener object for the root element.\n   *\n   * @type {EventListenerObject}\n   */\n  __documentHandler = {\n    /**\n     * @param   {Event|CustomEvent} event\n     * @returns {void}\n     */\n    handleEvent: (event) => {\n      const normalizedEventName = pascalCase(event.type);\n      const method = `onDocument${normalizedEventName}`;\n\n      this.__base[method](normalizeParams({ event, target: document }));\n    },\n  };\n\n  /**\n   * Event listener object for the root element.\n   *\n   * @type {EventListenerObject}\n   */\n  __windowHandler = {\n    /**\n     * @param   {Event|CustomEvent} event\n     * @returns {void}\n     */\n    handleEvent: (event) => {\n      const normalizedEventName = pascalCase(event.type);\n      const method = `onWindow${normalizedEventName}`;\n\n      this.__base[method](normalizeParams({ event, target: window }));\n    },\n  };\n\n  /**\n   * Event listener object for the refs.\n   */\n  __refsHandler: EventListenerObject = {\n    handleEvent: (event) => {\n      const ref = event.currentTarget as HTMLElement;\n      const attributes = features.get('attributes');\n      const refName = normalizeRefName(ref.getAttribute(attributes.ref));\n\n      const normalizedRefName = pascalCase(refName);\n      const normalizedEventName = pascalCase(event.type);\n      const method = `on${normalizedRefName}${normalizedEventName}`;\n\n      let index = 0;\n      if (isArray(this.__base.$refs[refName])) {\n        index = (this.__base.$refs[refName] as HTMLElement[]).indexOf(ref);\n      }\n\n      this.__base[method](normalizeParams({ event, index, target: ref }));\n    },\n  };\n\n  /**\n   * Event listener object for the children.\n   */\n  __childrenHandler: EventListenerObject = {\n    handleEvent: (event: CustomEvent) => {\n      const children = this.__base.$children;\n\n      for (const childName of Object.keys(children)) {\n        let index = -1;\n\n        for (const child of children[childName] as Base<BaseProps>[]) {\n          index++;\n\n          if (\n            child.$el === event.currentTarget &&\n            (eventIsNative(event.type, child.$el) ||\n              eventIsDefinedInConfig(event.type, child.__config))\n          ) {\n            const normalizedEventName = pascalCase(event.type);\n            const normalizedChildName = pascalCase(childName);\n            const method = `on${normalizedChildName}${normalizedEventName}`;\n            const args = isArray(event.detail) ? event.detail : [];\n            this.__base[method](normalizeParams({ event, index, args, target: child }));\n          }\n        }\n      }\n    },\n  };\n\n  /**\n   * Class constructor.\n   */\n  constructor(base: Base) {\n    super(base);\n  }\n\n  /**\n   * Bind event methods to the given ref elements.\n   *\n   * @param {string} name\n   *   The name of the ref.\n   * @param {HTMLElement[]} elements\n   *   The elements of the ref.\n   * @returns {void}\n   */\n  bindRef(name: string, elements: HTMLElement[]) {\n    manageRef(this, name, elements);\n  }\n\n  /**\n   * Bind event methods to the given ref elements.\n   *\n   * @param {string} name\n   *   The name of the ref.\n   * @param {HTMLElement[]} elements\n   *   The elements of the ref.\n   * @returns {void}\n   */\n  unbindRef(name: string, elements: HTMLElement[]) {\n    manageRef(this, name, elements, 'remove');\n  }\n\n  /**\n   * Bind event methods to the given child instance.\n   *\n   * @param {string} name\n   *   The name of the ref.\n   * @param {Base} instance\n   *   A base instance.\n   * @returns {void}\n   */\n  bindChild(name: string, instance: Base) {\n    manageChild(this, name, instance);\n  }\n\n  /**\n   * Unbind event methods to the given child instance.\n   *\n   * @param {string} name\n   *   The name of the ref.\n   * @param {Base} instance\n   *   A base instance.\n   * @returns {void}\n   */\n  unbindChild(name: string, instance: Base) {\n    manageChild(this, name, instance, 'remove');\n  }\n\n  /**\n   * Bind event methods on the root element.\n   *\n   * @returns {void}\n   */\n  bindRootElement() {\n    manageRootElement(this);\n  }\n\n  /**\n   * Unbind event method from the root element.\n   *\n   * @returns {void}\n   */\n  unbindRootElement() {\n    manageRootElement(this, 'remove');\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Base, BaseProps } from '../index.js';\nimport { getAllProperties } from '../../utils/object/getAllProperties.js';\nimport { dashCase, isArray, pascalCase } from '../../utils/index.js';\nimport { getEventTarget, eventIsNative, eventIsDefinedInConfig } from '../utils.js';\nimport { AbstractManager } from './AbstractManager.js';\nimport { normalizeRefName } from './RefsManager.js';\nimport { features } from '../features.js';\n\nconst regexes = new Map();\n\n/**\n * Get a regex with a cache;\n *\n * @param   {string} regex\n * @returns {RegExp}\n */\nfunction getRegex(regex: string): RegExp {\n  if (!regexes.has(regex)) {\n    regexes.set(regex, new RegExp(regex));\n  }\n\n  return regexes.get(regex);\n}\n\n/**\n * Get the event name from the given method and its tied ref or children name.\n *\n * @param {string} method\n * @param {string} name\n * @returns {string}\n * @private\n */\nfunction getEventNameByMethod(method: string, name = ''): string {\n  const regex = getRegex(`^on${pascalCase(name)}([A-Z].*)$`);\n  const [, event] = method.match(regex);\n  return dashCase(event);\n}\n\n/**\n * Get the base instance methods matching the `onSomething` pattern.\n *\n * @param {EventsManager} that\n * @param {string} [name]\n * @returns {string[]}\n * @private\n */\n// eslint-disable-next-line no-use-before-define\nfunction getEventMethodsByName(that: EventsManager, name = ''): string[] {\n  const regex = getRegex(`^on${pascalCase(name)}[A-Z].*$`);\n  const key = regex.toString();\n\n  let methods = that.__methodsCache.get(key);\n\n  if (!methods) {\n    methods = Array.from(\n      getAllProperties(that.__base, [], (method) => regex.test(method)).reduce(\n        (set, [method]) => set.add(method),\n        new Set(),\n      ),\n    ) as string[];\n    that.__methodsCache.set(key, methods);\n  }\n\n  return methods;\n}\n\n/**\n * Manage a ref event methods.\n *\n * @param {EventsManager} that\n * @param  {string} name\n *   The name of the ref.\n * @param  {HTMLElement[]} elements\n *   The elements of the ref.\n * @param  {'add'|'remove'} [mode]\n *   The action to perform: add or remove the event listeners.\n * @returns {void}\n * @private\n */\nfunction manageRef(\n  // eslint-disable-next-line no-use-before-define\n  that: EventsManager,\n  name: string,\n  elements: HTMLElement[],\n  mode: 'add' | 'remove' = 'add',\n) {\n  const action = `${mode}EventListener`;\n  const methods = getEventMethodsByName(that, name);\n  for (const method of methods) {\n    const event = getEventNameByMethod(method, name);\n    for (const element of elements) {\n      element?.[action](event, that.__refsHandler);\n    }\n  }\n}\n/**\n * Manage event methods to the given child instance.\n *\n * @param {EventsManager} that\n * @param {string} name\n *   The name of the ref.\n * @param {Base} instance\n *   A base instance.\n * @param {'add'|'remove'} [mode]\n *   The action to perform: add or remove the event listeners.\n * @returns {void}\n * @private\n */\nfunction manageChild(\n  // eslint-disable-next-line no-use-before-define\n  that: EventsManager,\n  name: string,\n  instance: Base,\n  mode: 'add' | 'remove' = 'add',\n) {\n  const action = mode === 'add' ? '$on' : '$off';\n  const methods = getEventMethodsByName(that, name);\n  const config = instance.__config;\n  for (const method of methods) {\n    const event = getEventNameByMethod(method, name);\n    if (getEventTarget(instance, event, config)) {\n      instance[action](event, that.__childrenHandler);\n    }\n  }\n}\n\nconst isDocumentRegex = /^onDocument[A-Z][a-z]+/;\nconst isWindowRegex = /^onWindow[A-Z][a-z]+/;\nconst methodIsDocument = (method) => isDocumentRegex.test(method);\nconst methodIsWindow = (method) => isWindowRegex.test(method);\nconst methodIsGlobal = (method) => methodIsWindow(method) || methodIsDocument(method);\nconst getGlobalEventTarget = (method) => (methodIsDocument(method) ? document : window);\n\n/**\n * Manage event methods on the root element.\n *\n * @param {EventsManager} that\n * @param {'add'|'remove'} [mode]\n *   The action to perform: add or remove the event listeners, defaults to 'add'.\n * @returns {void}\n * @private\n */\n// eslint-disable-next-line no-use-before-define\nfunction manageRootElement(that: EventsManager, mode: 'add' | 'remove' = 'add') {\n  const modeMethod = `${mode}EventListener`;\n  const methods = getEventMethodsByName(that);\n\n  const { __base: base, __config: config } = that;\n\n  for (const method of methods) {\n    let event = getEventNameByMethod(method);\n\n    if (methodIsGlobal(method)) {\n      event = getEventNameByMethod(method, methodIsDocument(method) ? 'document' : 'window');\n      const target = getGlobalEventTarget(method);\n      target[modeMethod](\n        event,\n        methodIsDocument(method) ? that.__documentHandler : that.__windowHandler,\n      );\n    } else {\n      const target = getEventTarget(base, event, config);\n      target?.[modeMethod](event, that.__rootElementHandler);\n    }\n  }\n}\n\nexport type EventManagerCallbackParams = {\n  event: Event | null;\n  args: Array<any>;\n  index: number;\n  target: Element | Base | Promise<Base> | typeof window | typeof document | null;\n};\n\n/**\n * Normalize `on...` method params.\n */\nfunction normalizeParams(\n  params: Partial<EventManagerCallbackParams> = {},\n): EventManagerCallbackParams {\n  return {\n    event: null,\n    args: [],\n    index: 0,\n    target: null,\n    ...params,\n  };\n}\n\n/**\n * Event management class.\n *\n * @todo Prevent binding of `onChildOrRefEvent` to the root element\n * @todo Use event delegation?\n */\nexport class EventsManager extends AbstractManager {\n  __methodsCache: Map<string, string[]> = new Map();\n\n  /**\n   * Event listener object for the root element.\n   */\n  __rootElementHandler: EventListenerObject = {\n    handleEvent: (event: Event | CustomEvent) => {\n      const normalizedEventName = pascalCase(event.type);\n      const method = `on${normalizedEventName}`;\n      const isCustomEvent = event instanceof CustomEvent;\n\n      this.__base[method](\n        normalizeParams({\n          event,\n          args: isCustomEvent ? (event.detail ?? []) : [],\n          target: isCustomEvent ? this.__base : this.__element,\n        }),\n      );\n    },\n  };\n\n  /**\n   * Event listener object for the root element.\n   *\n   * @type {EventListenerObject}\n   */\n  __documentHandler = {\n    /**\n     * @param   {Event|CustomEvent} event\n     * @returns {void}\n     */\n    handleEvent: (event) => {\n      const normalizedEventName = pascalCase(event.type);\n      const method = `onDocument${normalizedEventName}`;\n\n      this.__base[method](normalizeParams({ event, target: document }));\n    },\n  };\n\n  /**\n   * Event listener object for the root element.\n   *\n   * @type {EventListenerObject}\n   */\n  __windowHandler = {\n    /**\n     * @param   {Event|CustomEvent} event\n     * @returns {void}\n     */\n    handleEvent: (event) => {\n      const normalizedEventName = pascalCase(event.type);\n      const method = `onWindow${normalizedEventName}`;\n\n      this.__base[method](normalizeParams({ event, target: window }));\n    },\n  };\n\n  /**\n   * Event listener object for the refs.\n   */\n  __refsHandler: EventListenerObject = {\n    handleEvent: (event) => {\n      const ref = event.currentTarget as HTMLElement;\n      const attributes = features.get('attributes');\n      const refName = normalizeRefName(ref.getAttribute(attributes.ref));\n\n      const normalizedRefName = pascalCase(refName);\n      const normalizedEventName = pascalCase(event.type);\n      const method = `on${normalizedRefName}${normalizedEventName}`;\n\n      let index = 0;\n      if (isArray(this.__base.$refs[refName])) {\n        index = (this.__base.$refs[refName] as HTMLElement[]).indexOf(ref);\n      }\n\n      this.__base[method](normalizeParams({ event, index, target: ref }));\n    },\n  };\n\n  /**\n   * Event listener object for the children.\n   */\n  __childrenHandler: EventListenerObject = {\n    handleEvent: (event: CustomEvent) => {\n      const children = this.__base.$children;\n\n      for (const childName of Object.keys(children)) {\n        let index = -1;\n\n        for (const child of children[childName] as Base<BaseProps>[]) {\n          index++;\n\n          if (\n            child.$el === event.currentTarget &&\n            (eventIsNative(event.type, child.$el) ||\n              eventIsDefinedInConfig(event.type, child.__config))\n          ) {\n            const normalizedEventName = pascalCase(event.type);\n            const normalizedChildName = pascalCase(childName);\n            const method = `on${normalizedChildName}${normalizedEventName}`;\n            const args = isArray(event.detail) ? event.detail : [];\n            this.__base[method](normalizeParams({ event, index, args, target: child }));\n          }\n        }\n      }\n    },\n  };\n\n  /**\n   * Class constructor.\n   */\n  constructor(base: Base) {\n    super(base);\n  }\n\n  /**\n   * Bind event methods to the given ref elements.\n   *\n   * @param {string} name\n   *   The name of the ref.\n   * @param {HTMLElement[]} elements\n   *   The elements of the ref.\n   * @returns {void}\n   */\n  bindRef(name: string, elements: HTMLElement[]) {\n    manageRef(this, name, elements);\n  }\n\n  /**\n   * Bind event methods to the given ref elements.\n   *\n   * @param {string} name\n   *   The name of the ref.\n   * @param {HTMLElement[]} elements\n   *   The elements of the ref.\n   * @returns {void}\n   */\n  unbindRef(name: string, elements: HTMLElement[]) {\n    manageRef(this, name, elements, 'remove');\n  }\n\n  /**\n   * Bind event methods to the given child instance.\n   *\n   * @param {string} name\n   *   The name of the ref.\n   * @param {Base} instance\n   *   A base instance.\n   * @returns {void}\n   */\n  bindChild(name: string, instance: Base) {\n    manageChild(this, name, instance);\n  }\n\n  /**\n   * Unbind event methods to the given child instance.\n   *\n   * @param {string} name\n   *   The name of the ref.\n   * @param {Base} instance\n   *   A base instance.\n   * @returns {void}\n   */\n  unbindChild(name: string, instance: Base) {\n    manageChild(this, name, instance, 'remove');\n  }\n\n  /**\n   * Bind event methods on the root element.\n   *\n   * @returns {void}\n   */\n  bindRootElement() {\n    manageRootElement(this);\n  }\n\n  /**\n   * Unbind event method from the root element.\n   *\n   * @returns {void}\n   */\n  unbindRootElement() {\n    manageRootElement(this, 'remove');\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/decorators/index.d.ts

@@ -7,6 +7,7 @@ export * from './withIntersectionObserver.js';
 export * from './withMountOnMediaQuery.js';
 export * from './withMountWhenInView.js';
 export * from './withMountWhenPrefersMotion.js';
+export * from './withMutation.js';
 export * from './withName.js';
 export * from './withRelativePointer.js';
 export * from './withResponsiveOptions.js';

package/decorators/index.js

@@ -7,6 +7,7 @@ export * from "./withIntersectionObserver.js";
 export * from "./withMountOnMediaQuery.js";
 export * from "./withMountWhenInView.js";
 export * from "./withMountWhenPrefersMotion.js";
+export * from "./withMutation.js";
 export * from "./withName.js";
 export * from "./withRelativePointer.js";
 export * from "./withResponsiveOptions.js";

package/decorators/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/index.ts"],
-  "sourcesContent": ["export * from './withBreakpointManager.js';\nexport * from './withBreakpointObserver.js';\nexport * from './withDrag.js';\nexport * from './withExtraConfig.js';\nexport * from './withFreezedOptions.js';\nexport * from './withIntersectionObserver.js';\nexport * from './withMountOnMediaQuery.js';\nexport * from './withMountWhenInView.js';\nexport * from './withMountWhenPrefersMotion.js';\nexport * from './withName.js';\nexport * from './withRelativePointer.js';\nexport * from './withResponsiveOptions.js';\nexport * from './withScrolledInView/index.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,cAAc;",
+  "sourcesContent": ["export * from './withBreakpointManager.js';\nexport * from './withBreakpointObserver.js';\nexport * from './withDrag.js';\nexport * from './withExtraConfig.js';\nexport * from './withFreezedOptions.js';\nexport * from './withIntersectionObserver.js';\nexport * from './withMountOnMediaQuery.js';\nexport * from './withMountWhenInView.js';\nexport * from './withMountWhenPrefersMotion.js';\nexport * from './withMutation.js';\nexport * from './withName.js';\nexport * from './withRelativePointer.js';\nexport * from './withResponsiveOptions.js';\nexport * from './withScrolledInView/index.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,cAAc;AACd,cAAc;",
   "names": []
 }

package/decorators/withBreakpointObserver.js

@@ -50,9 +50,7 @@ function withBreakpointObserver(BaseClass) {
      */
     static config = {
       ...BaseClass.config,
-      name: `${BaseClass.config.name}WithBreakpointObserver`,
       options: {
-        ...BaseClass.config?.options,
         activeBreakpoints: String,
         inactiveBreakpoints: String
       }

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 type { ResizeServiceProps } 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 * Callback triggered when the window is resized.\n */\nfunction createResizeCallback(\n  instance: Base<WithBreakpointObserverProps>,\n): (resizeProps: ResizeServiceProps) => void {\n  return ({ 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 * 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, props } = useResize();\n\n  if (!has(key)) {\n    const callback = createResizeCallback(instance);\n    add(key, callback);\n    callback(props());\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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",
+  "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 type { ResizeServiceProps } 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 * Callback triggered when the window is resized.\n */\nfunction createResizeCallback(\n  instance: Base<WithBreakpointObserverProps>,\n): (resizeProps: ResizeServiceProps) => void {\n  return ({ 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 * 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, props } = useResize();\n\n  if (!has(key)) {\n    const callback = createResizeCallback(instance);\n    add(key, callback);\n    callback(props());\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      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/withDrag.js

@@ -5,7 +5,7 @@ function withDrag(BaseClass, { target = (instance) => instance.$el, ...options }
      * Config.
      */
     static config = {
-      name: `${BaseClass.config.name}WithDrag`,
+      ...BaseClass.config,
       emits: ["dragged"]
     };
     /**

package/decorators/withDrag.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withDrag.ts"],
-  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { DragServiceOptions, DragServiceProps } from '../services/index.js';\nimport { useDrag } from '../services/index.js';\n\nexport type DragDecoratorOptions = DragServiceOptions & {\n  target?: (this: Base, instance: Base) => HTMLElement;\n};\n\nexport interface WithDragInterface extends BaseInterface {\n  dragged?(props: DragServiceProps): void;\n}\n\n/**\n * Add dragging capabilities to a component.\n */\nexport function withDrag<S extends Base>(\n  BaseClass: typeof Base,\n  { target = (instance) => instance.$el, ...options }: DragDecoratorOptions = {},\n): BaseDecorator<BaseInterface, S> {\n  /**\n   * Class.\n   */\n  class WithDrag<T extends BaseProps = BaseProps> extends BaseClass<T & WithDragInterface> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: `${BaseClass.config.name}WithDrag`,\n      emits: ['dragged'],\n    };\n\n    /**\n     * Class constructor.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$on('mounted', () => {\n        this.$services.register(\n          'dragged',\n          useDrag.bind(undefined, target.call(this, this), options),\n        );\n        this.$services.enable('dragged');\n      });\n\n      this.$on('destroyed', () => {\n        this.$services.disable('dragged');\n        this.$services.unregister('dragged');\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithDrag;\n}\n"],
-  "mappings": "AAGA,SAAS,eAAe;AAajB,SAAS,SACd,WACA,EAAE,SAAS,CAAC,aAAa,SAAS,KAAK,GAAG,QAAQ,IAA0B,CAAC,GAC5C;AAAA,EAIjC,MAAM,iBAAkD,UAAiC;AAAA;AAAA;AAAA;AAAA,IAIvF,OAAO,SAAqB;AAAA,MAC1B,MAAM,GAAG,UAAU,OAAO,IAAI;AAAA,MAC9B,OAAO,CAAC,SAAS;AAAA,IACnB;AAAA;AAAA;AAAA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU;AAAA,UACb;AAAA,UACA,QAAQ,KAAK,QAAW,OAAO,KAAK,MAAM,IAAI,GAAG,OAAO;AAAA,QAC1D;AACA,aAAK,UAAU,OAAO,SAAS;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,UAAU,QAAQ,SAAS;AAChC,aAAK,UAAU,WAAW,SAAS;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { DragServiceOptions, DragServiceProps } from '../services/index.js';\nimport { useDrag } from '../services/index.js';\n\nexport type DragDecoratorOptions = DragServiceOptions & {\n  target?: (this: Base, instance: Base) => HTMLElement;\n};\n\nexport interface WithDragInterface extends BaseInterface {\n  dragged?(props: DragServiceProps): void;\n}\n\n/**\n * Add dragging capabilities to a component.\n */\nexport function withDrag<S extends Base>(\n  BaseClass: typeof Base,\n  { target = (instance) => instance.$el, ...options }: DragDecoratorOptions = {},\n): BaseDecorator<BaseInterface, S> {\n  /**\n   * Class.\n   */\n  class WithDrag<T extends BaseProps = BaseProps> extends BaseClass<T & WithDragInterface> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      emits: ['dragged'],\n    };\n\n    /**\n     * Class constructor.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$on('mounted', () => {\n        this.$services.register(\n          'dragged',\n          useDrag.bind(undefined, target.call(this, this), options),\n        );\n        this.$services.enable('dragged');\n      });\n\n      this.$on('destroyed', () => {\n        this.$services.disable('dragged');\n        this.$services.unregister('dragged');\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithDrag;\n}\n"],
+  "mappings": "AAGA,SAAS,eAAe;AAajB,SAAS,SACd,WACA,EAAE,SAAS,CAAC,aAAa,SAAS,KAAK,GAAG,QAAQ,IAA0B,CAAC,GAC5C;AAAA,EAIjC,MAAM,iBAAkD,UAAiC;AAAA;AAAA;AAAA;AAAA,IAIvF,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,OAAO,CAAC,SAAS;AAAA,IACnB;AAAA;AAAA;AAAA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU;AAAA,UACb;AAAA,UACA,QAAQ,KAAK,QAAW,OAAO,KAAK,MAAM,IAAI,GAAG,OAAO;AAAA,QAC1D;AACA,aAAK,UAAU,OAAO,SAAS;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,UAAU,QAAQ,SAAS;AAChC,aAAK,UAAU,WAAW,SAAS;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withIntersectionObserver.js

@@ -6,9 +6,7 @@ function withIntersectionObserver(BaseClass, defaultOptions = { threshold: creat
      */
     static config = {
       ...BaseClass.config,
-      name: `${BaseClass.config.name}WithIntersectionObserver`,
       options: {
-        ...BaseClass.config?.options,
         intersectionObserver: Object
       },
       emits: ["intersected"]

package/decorators/withIntersectionObserver.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withIntersectionObserver.ts"],
-  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { createRange } from '../utils/index.js';\n\nexport interface WithIntersectionObserverProps extends BaseProps {\n  $options: {\n    intersectionObserver: IntersectionObserverInit;\n  };\n  $observer: IntersectionObserver;\n  intersected(entries: IntersectionObserverEntry[]): void;\n}\n\nexport interface WithIntersectionObserverInterface extends BaseInterface {\n  $observer: IntersectionObserver;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withIntersectionObserver<S extends Base>(\n  BaseClass: typeof Base,\n  // eslint-disable-next-line unicorn/no-object-as-default-parameter\n  defaultOptions: IntersectionObserverInit = { threshold: createRange(0, 1, 0.01) },\n): BaseDecorator<WithIntersectionObserverInterface, S, WithIntersectionObserverProps> {\n  /**\n   * Class.\n   */\n  class WithIntersectionObserver<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithIntersectionObserverProps\n  > {\n    /**\n     * Config\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithIntersectionObserver`,\n      options: {\n        ...BaseClass.config?.options,\n        intersectionObserver: Object,\n      },\n      emits: ['intersected'],\n    };\n\n    /**\n     * Intersection observer instance.\n     */\n    $observer: IntersectionObserver;\n\n    /**\n     * Create an observer when the class in instantiated.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$observer = new IntersectionObserver(\n        (entries) => {\n          this.__callMethod('intersected', entries);\n        },\n        {\n          ...defaultOptions,\n          ...(this.$options.intersectionObserver as IntersectionObserverInit),\n        },\n      );\n\n      this.$on('mounted', () => {\n        this.$observer.observe(this.$el);\n      });\n\n      this.$on('destroyed', () => {\n        this.$observer.unobserve(this.$el);\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithIntersectionObserver;\n}\n"],
-  "mappings": "AAEA,SAAS,mBAAmB;AAiBrB,SAAS,yBACd,WAEA,iBAA2C,EAAE,WAAW,YAAY,GAAG,GAAG,IAAI,EAAE,GACI;AAAA,EAIpF,MAAM,iCAAkE,UAEtE;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,MACA,OAAO,CAAC,aAAa;AAAA,IACvB;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,YAAY,IAAI;AAAA,QACnB,CAAC,YAAY;AACX,eAAK,aAAa,eAAe,OAAO;AAAA,QAC1C;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,KAAK,SAAS;AAAA,QACpB;AAAA,MACF;AAEA,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU,QAAQ,KAAK,GAAG;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,UAAU,UAAU,KAAK,GAAG;AAAA,MACnC,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { createRange } from '../utils/index.js';\n\nexport interface WithIntersectionObserverProps extends BaseProps {\n  $options: {\n    intersectionObserver: IntersectionObserverInit;\n  };\n  $observer: IntersectionObserver;\n  intersected(entries: IntersectionObserverEntry[]): void;\n}\n\nexport interface WithIntersectionObserverInterface extends BaseInterface {\n  $observer: IntersectionObserver;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withIntersectionObserver<S extends Base>(\n  BaseClass: typeof Base,\n  // eslint-disable-next-line unicorn/no-object-as-default-parameter\n  defaultOptions: IntersectionObserverInit = { threshold: createRange(0, 1, 0.01) },\n): BaseDecorator<WithIntersectionObserverInterface, S, WithIntersectionObserverProps> {\n  /**\n   * Class.\n   */\n  class WithIntersectionObserver<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithIntersectionObserverProps\n  > {\n    /**\n     * Config\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      options: {\n        intersectionObserver: Object,\n      },\n      emits: ['intersected'],\n    };\n\n    /**\n     * Intersection observer instance.\n     */\n    $observer: IntersectionObserver;\n\n    /**\n     * Create an observer when the class in instantiated.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$observer = new IntersectionObserver(\n        (entries) => {\n          this.__callMethod('intersected', entries);\n        },\n        {\n          ...defaultOptions,\n          ...(this.$options.intersectionObserver as IntersectionObserverInit),\n        },\n      );\n\n      this.$on('mounted', () => {\n        this.$observer.observe(this.$el);\n      });\n\n      this.$on('destroyed', () => {\n        this.$observer.unobserve(this.$el);\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithIntersectionObserver;\n}\n"],
+  "mappings": "AAEA,SAAS,mBAAmB;AAiBrB,SAAS,yBACd,WAEA,iBAA2C,EAAE,WAAW,YAAY,GAAG,GAAG,IAAI,EAAE,GACI;AAAA,EAIpF,MAAM,iCAAkE,UAEtE;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,SAAS;AAAA,QACP,sBAAsB;AAAA,MACxB;AAAA,MACA,OAAO,CAAC,aAAa;AAAA,IACvB;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,YAAY,IAAI;AAAA,QACnB,CAAC,YAAY;AACX,eAAK,aAAa,eAAe,OAAO;AAAA,QAC1C;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,KAAK,SAAS;AAAA,QACpB;AAAA,MACF;AAEA,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU,QAAQ,KAAK,GAAG;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,UAAU,UAAU,KAAK,GAAG;AAAA,MACnC,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withMountOnMediaQuery.js

@@ -6,9 +6,7 @@ function withMountOnMediaQuery(BaseClass, media) {
      */
     static config = {
       ...BaseClass.config,
-      name: `${BaseClass.config.name}withMountOnMediaQuery`,
       options: {
-        ...BaseClass.config?.options,
         media: String
       }
     };

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    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;",
+  "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      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,SAAS;AAAA,QACP,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

@@ -5,9 +5,7 @@ function withMountWhenInView(BaseClass, defaultOptions = { threshold: [0, 1] })
      */
     static config = {
       ...BaseClass.config,
-      name: `${BaseClass.config.name}WithMountWhenInView`,
       options: {
-        ...BaseClass.config?.options,
         intersectionObserver: Object
       }
     };

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    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;",
+  "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      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,SAAS;AAAA,QACP,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/decorators/withMutation.d.ts

@@ -0,0 +1,13 @@
+import type { BaseDecorator, BaseInterface } from '../Base/types.js';
+import type { Base } from '../Base/index.js';
+import type { MutationServiceOptions, MutationServiceProps } from '../services/index.js';
+export type MutationDecoratorOptions = MutationServiceOptions & {
+    target?: (this: Base, instance: Base) => Node;
+};
+export interface WithMutationInterface extends BaseInterface {
+    mutated?(props: MutationServiceProps): void;
+}
+/**
+ * Add a mutation observer to a component.
+ */
+export declare function withMutation<S extends Base>(BaseClass: typeof Base, { target, ...options }?: MutationDecoratorOptions): BaseDecorator<BaseInterface, S>;

package/decorators/withMutation.js

@@ -0,0 +1,34 @@
+import { useMutation } from "../services/index.js";
+function withMutation(BaseClass, { target = (instance) => instance.$el, ...options } = {}) {
+  class WithMutation extends BaseClass {
+    /**
+     * Config.
+     */
+    static config = {
+      ...BaseClass.config,
+      emits: ["mutated"]
+    };
+    /**
+     * Class constructor.
+     */
+    constructor(element) {
+      super(element);
+      this.$on("mounted", () => {
+        this.$services.register(
+          "mutated",
+          useMutation.bind(void 0, target.call(this, this), options)
+        );
+        this.$services.enable("mutated");
+      });
+      this.$on("destroyed", () => {
+        this.$services.disable("mutated");
+        this.$services.unregister("mutated");
+      });
+    }
+  }
+  return WithMutation;
+}
+export {
+  withMutation
+};
+//# sourceMappingURL=withMutation.js.map

package/decorators/withMutation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/decorators/withMutation.ts"],
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { MutationServiceOptions, MutationServiceProps } from '../services/index.js';\nimport { useMutation } from '../services/index.js';\n\nexport type MutationDecoratorOptions = MutationServiceOptions & {\n  target?: (this: Base, instance: Base) => Node;\n};\n\nexport interface WithMutationInterface extends BaseInterface {\n  mutated?(props: MutationServiceProps): void;\n}\n\n/**\n * Add a mutation observer to a component.\n */\nexport function withMutation<S extends Base>(\n  BaseClass: typeof Base,\n  { target = (instance) => instance.$el, ...options }: MutationDecoratorOptions = {},\n): BaseDecorator<BaseInterface, S> {\n  /**\n   * Class.\n   */\n  class WithMutation<T extends BaseProps = BaseProps> extends BaseClass<T & WithMutationInterface> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      emits: ['mutated'],\n    };\n\n    /**\n     * Class constructor.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n      this.$on('mounted', () => {\n        this.$services.register(\n          'mutated',\n          useMutation.bind(undefined, target.call(this, this), options),\n        );\n        this.$services.enable('mutated');\n      });\n\n      this.$on('destroyed', () => {\n        this.$services.disable('mutated');\n        this.$services.unregister('mutated');\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithMutation;\n}\n"],
+  "mappings": "AAGA,SAAS,mBAAmB;AAarB,SAAS,aACd,WACA,EAAE,SAAS,CAAC,aAAa,SAAS,KAAK,GAAG,QAAQ,IAA8B,CAAC,GAChD;AAAA,EAIjC,MAAM,qBAAsD,UAAqC;AAAA;AAAA;AAAA;AAAA,IAI/F,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,OAAO,CAAC,SAAS;AAAA,IACnB;AAAA;AAAA;AAAA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AACb,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU;AAAA,UACb;AAAA,UACA,YAAY,KAAK,QAAW,OAAO,KAAK,MAAM,IAAI,GAAG,OAAO;AAAA,QAC9D;AACA,aAAK,UAAU,OAAO,SAAS;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,UAAU,QAAQ,SAAS;AAChC,aAAK,UAAU,WAAW,SAAS;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
+  "names": []
+}

package/decorators/withRelativePointer.js

@@ -5,7 +5,7 @@ function withRelativePointer(BaseClass, { target = (instance) => instance.$el }
      * Config.
      */
     static config = {
-      name: `${BaseClass.config.name}WithRelativePointer`,
+      ...BaseClass.config,
       emits: ["movedrelative"]
     };
     /**

package/decorators/withRelativePointer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withRelativePointer.ts"],
-  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { PointerServiceProps } from '../services/index.js';\nimport { usePointer } from '../services/index.js';\n\nexport type RelativePointerDecoratorOptions = {\n  target?: (this: Base, instance: Base) => HTMLElement;\n};\n\nexport interface RelativePointerInterface extends BaseInterface {\n  movedrelative?(props: PointerServiceProps): void;\n}\n\n/**\n * Add dragging capabilities to a component.\n */\nexport function withRelativePointer<S extends Base>(\n  BaseClass: typeof Base,\n  { target = (instance) => instance.$el }: RelativePointerDecoratorOptions = {},\n): BaseDecorator<RelativePointerInterface, S> {\n  /**\n   * Class.\n   */\n  class WithRelativePointer<T extends BaseProps = BaseProps> extends BaseClass<T> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: `${BaseClass.config.name}WithRelativePointer`,\n      emits: ['movedrelative'],\n    };\n\n    /**\n     * Class constructor.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$on('mounted', () => {\n        this.$services.register(\n          'movedrelative',\n          usePointer.bind(undefined, target.call(this, this)),\n        );\n        this.$services.enable('movedrelative');\n      });\n\n      this.$on('destroyed', () => {\n        this.$services.disable('movedrelative');\n        this.$services.unregister('movedrelative');\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithRelativePointer;\n}\n"],
-  "mappings": "AAGA,SAAS,kBAAkB;AAapB,SAAS,oBACd,WACA,EAAE,SAAS,CAAC,aAAa,SAAS,IAAI,IAAqC,CAAC,GAChC;AAAA,EAI5C,MAAM,4BAA6D,UAAa;AAAA;AAAA;AAAA;AAAA,IAI9E,OAAO,SAAqB;AAAA,MAC1B,MAAM,GAAG,UAAU,OAAO,IAAI;AAAA,MAC9B,OAAO,CAAC,eAAe;AAAA,IACzB;AAAA;AAAA;AAAA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU;AAAA,UACb;AAAA,UACA,WAAW,KAAK,QAAW,OAAO,KAAK,MAAM,IAAI,CAAC;AAAA,QACpD;AACA,aAAK,UAAU,OAAO,eAAe;AAAA,MACvC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,UAAU,QAAQ,eAAe;AACtC,aAAK,UAAU,WAAW,eAAe;AAAA,MAC3C,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { PointerServiceProps } from '../services/index.js';\nimport { usePointer } from '../services/index.js';\n\nexport type RelativePointerDecoratorOptions = {\n  target?: (this: Base, instance: Base) => HTMLElement;\n};\n\nexport interface RelativePointerInterface extends BaseInterface {\n  movedrelative?(props: PointerServiceProps): void;\n}\n\n/**\n * Add dragging capabilities to a component.\n */\nexport function withRelativePointer<S extends Base>(\n  BaseClass: typeof Base,\n  { target = (instance) => instance.$el }: RelativePointerDecoratorOptions = {},\n): BaseDecorator<RelativePointerInterface, S> {\n  /**\n   * Class.\n   */\n  class WithRelativePointer<T extends BaseProps = BaseProps> extends BaseClass<T> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      emits: ['movedrelative'],\n    };\n\n    /**\n     * Class constructor.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$on('mounted', () => {\n        this.$services.register(\n          'movedrelative',\n          usePointer.bind(undefined, target.call(this, this)),\n        );\n        this.$services.enable('movedrelative');\n      });\n\n      this.$on('destroyed', () => {\n        this.$services.disable('movedrelative');\n        this.$services.unregister('movedrelative');\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithRelativePointer;\n}\n"],
+  "mappings": "AAGA,SAAS,kBAAkB;AAapB,SAAS,oBACd,WACA,EAAE,SAAS,CAAC,aAAa,SAAS,IAAI,IAAqC,CAAC,GAChC;AAAA,EAI5C,MAAM,4BAA6D,UAAa;AAAA;AAAA;AAAA;AAAA,IAI9E,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,OAAO,CAAC,eAAe;AAAA,IACzB;AAAA;AAAA;AAAA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU;AAAA,UACb;AAAA,UACA,WAAW,KAAK,QAAW,OAAO,KAAK,MAAM,IAAI,CAAC;AAAA,QACpD;AACA,aAAK,UAAU,OAAO,eAAe;AAAA,MACvC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,UAAU,QAAQ,eAAe;AACtC,aAAK,UAAU,WAAW,eAAe;AAAA,MAC3C,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withScrolledInView/withScrolledInView.js

@@ -38,7 +38,7 @@ function withScrolledInView(BaseClass, options = {}) {
      * Config.
      */
     static config = {
-      name: `${BaseClass.config.name}WithMountWhenInView`,
+      ...BaseClass.config,
       emits: ["scrolledInView"],
       options: {
         dampFactor: {

package/decorators/withScrolledInView/withScrolledInView.js.map

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

package/helpers/createApp.d.ts

@@ -7,4 +7,4 @@ export type CreateAppOptions = Partial<Features> & {
  * Instantiate and mount the given component on the given root element when the page has been loaded
  * and return a function to use the app instance when it is ready.
  */
-export default function createApp<S extends BaseConstructor<Base>, T extends BaseProps = BaseProps>(App: S, options?: HTMLElement | CreateAppOptions): () => Promise<S & Base<T>>;
+export declare function createApp<S extends BaseConstructor<Base>, T extends BaseProps = BaseProps>(App: S, options?: HTMLElement | CreateAppOptions): () => Promise<S & Base<T>>;

package/helpers/createApp.js

@@ -1,4 +1,6 @@
+import { getInstances } from "../Base/index.js";
 import { features } from "../Base/features.js";
+import { useMutation } from "../services/index.js";
 import { isBoolean, isObject, isString } from "../utils/index.js";
 function createApp(App, options = {}) {
   let app;
@@ -21,6 +23,23 @@ function createApp(App, options = {}) {
   if (isObject(attributes)) {
     features.set("attributes", attributes);
   }
+  const service = useMutation(document.documentElement, { childList: true, subtree: true });
+  const symbol = Symbol("createApp");
+  service.add(symbol, (props) => {
+    for (const mutation of props.mutations) {
+      if (mutation.type === "childList") {
+        for (const node of mutation.removedNodes) {
+          if (!node.isConnected) {
+            for (const instance of getInstances()) {
+              if (node === instance.$el || node.contains(instance.$el)) {
+                instance.$terminate();
+              }
+            }
+          }
+        }
+      }
+    }
+  });
   async function init() {
     app = new App(root);
     await app.$mount();
@@ -45,6 +64,6 @@ function createApp(App, options = {}) {
   return () => p;
 }
 export {
-  createApp as default
+  createApp
 };
 //# sourceMappingURL=createApp.js.map

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, isString } 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    prefix = 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 (isString(prefix)) {\n    features.set('prefix', prefix);\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,UAAU,gBAAgB;AAU/B,SAAR,UACL,KACA,UAA0C,CAAC,GACf;AAC5B,MAAI;AACJ,QAAM;AAAA,IACJ,OAAO,SAAS;AAAA,IAChB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,SAAS;AAAA,IACT,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,MAAM,GAAG;AACpB,aAAS,IAAI,UAAU,MAAM;AAAA,EAC/B;AAEA,MAAI,SAAS,UAAU,GAAG;AACxB,aAAS,IAAI,cAAc,UAAU;AAAA,EACvC;AAEA,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 { getInstances } from '../Base/index.js';\nimport { features } from '../Base/features.js';\nimport { useMutation } from '../services/index.js';\nimport { isBoolean, isObject, isString } 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 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    prefix = 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 (isString(prefix)) {\n    features.set('prefix', prefix);\n  }\n\n  if (isObject(attributes)) {\n    features.set('attributes', attributes);\n  }\n\n  // Terminate components whose root element has been removed from the DOM\n  const service = useMutation(document.documentElement, { childList: true, subtree: true });\n  const symbol = Symbol('createApp');\n  service.add(symbol, (props) => {\n    for (const mutation of props.mutations) {\n      if (mutation.type === 'childList') {\n        for (const node of mutation.removedNodes) {\n          if (!node.isConnected) {\n            for (const instance of getInstances()) {\n              if (node === instance.$el || node.contains(instance.$el)) {\n                instance.$terminate();\n              }\n            }\n          }\n        }\n      }\n    }\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,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,WAAW,UAAU,gBAAgB;AAUvC,SAAS,UACd,KACA,UAA0C,CAAC,GACf;AAC5B,MAAI;AACJ,QAAM;AAAA,IACJ,OAAO,SAAS;AAAA,IAChB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,SAAS;AAAA,IACT,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,MAAM,GAAG;AACpB,aAAS,IAAI,UAAU,MAAM;AAAA,EAC/B;AAEA,MAAI,SAAS,UAAU,GAAG;AACxB,aAAS,IAAI,cAAc,UAAU;AAAA,EACvC;AAGA,QAAM,UAAU,YAAY,SAAS,iBAAiB,EAAE,WAAW,MAAM,SAAS,KAAK,CAAC;AACxF,QAAM,SAAS,OAAO,WAAW;AACjC,UAAQ,IAAI,QAAQ,CAAC,UAAU;AAC7B,eAAW,YAAY,MAAM,WAAW;AACtC,UAAI,SAAS,SAAS,aAAa;AACjC,mBAAW,QAAQ,SAAS,cAAc;AACxC,cAAI,CAAC,KAAK,aAAa;AACrB,uBAAW,YAAY,aAAa,GAAG;AACrC,kBAAI,SAAS,SAAS,OAAO,KAAK,SAAS,SAAS,GAAG,GAAG;AACxD,yBAAS,WAAW;AAAA,cACtB;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AAED,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;",
   "names": []
 }

package/helpers/getClosestParent.d.ts

@@ -2,4 +2,4 @@ import type { Base, BaseConstructor } from '../Base/index.js';
 /**
  * Get the closest parent of a component.
  */
-export default function getClosestParent<T extends BaseConstructor>(childInstance: Base, ParentConstructor: T): InstanceType<T>;
+export declare function getClosestParent<T extends BaseConstructor>(childInstance: Base, ParentConstructor: T): InstanceType<T>;

package/helpers/getClosestParent.js

@@ -1,4 +1,4 @@
-import getInstanceFromElement from "./getInstanceFromElement.js";
+import { getInstanceFromElement } from "./getInstanceFromElement.js";
 import { getAncestorWhere } from "../utils/index.js";
 function getClosestParent(childInstance, ParentConstructor) {
   const parentEl = getAncestorWhere(
@@ -8,6 +8,6 @@ function getClosestParent(childInstance, ParentConstructor) {
   return parentEl ? getInstanceFromElement(parentEl, ParentConstructor) : null;
 }
 export {
-  getClosestParent as default
+  getClosestParent
 };
 //# sourceMappingURL=getClosestParent.js.map

package/helpers/getClosestParent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/getClosestParent.ts"],
-  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport getInstanceFromElement from './getInstanceFromElement.js';\nimport { getAncestorWhere } from '../utils/index.js';\n\n/**\n * Get the closest parent of a component.\n */\nexport default function getClosestParent<T extends BaseConstructor>(\n  childInstance: Base,\n  ParentConstructor: T,\n) {\n  const parentEl = getAncestorWhere(\n    childInstance.$el,\n    (element) => element && getInstanceFromElement(element, ParentConstructor) !== null,\n  );\n\n  return parentEl ? getInstanceFromElement(parentEl, ParentConstructor) : null;\n}\n"],
-  "mappings": "AACA,OAAO,4BAA4B;AACnC,SAAS,wBAAwB;AAKlB,SAAR,iBACL,eACA,mBACA;AACA,QAAM,WAAW;AAAA,IACf,cAAc;AAAA,IACd,CAAC,YAAY,WAAW,uBAAuB,SAAS,iBAAiB,MAAM;AAAA,EACjF;AAEA,SAAO,WAAW,uBAAuB,UAAU,iBAAiB,IAAI;AAC1E;",
+  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport { getInstanceFromElement } from './getInstanceFromElement.js';\nimport { getAncestorWhere } from '../utils/index.js';\n\n/**\n * Get the closest parent of a component.\n */\nexport function getClosestParent<T extends BaseConstructor>(\n  childInstance: Base,\n  ParentConstructor: T,\n) {\n  const parentEl = getAncestorWhere(\n    childInstance.$el,\n    (element) => element && getInstanceFromElement(element, ParentConstructor) !== null,\n  );\n\n  return parentEl ? getInstanceFromElement(parentEl, ParentConstructor) : null;\n}\n"],
+  "mappings": "AACA,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AAK1B,SAAS,iBACd,eACA,mBACA;AACA,QAAM,WAAW;AAAA,IACf,cAAc;AAAA,IACd,CAAC,YAAY,WAAW,uBAAuB,SAAS,iBAAiB,MAAM;AAAA,EACjF;AAEA,SAAO,WAAW,uBAAuB,UAAU,iBAAiB,IAAI;AAC1E;",
   "names": []
 }