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

package/decorators/withBreakpointManager.js

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

package/decorators/withBreakpointManager.js.map

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

package/decorators/withBreakpointObserver.d.ts

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

package/decorators/withBreakpointObserver.js

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

package/decorators/withBreakpointObserver.js.map

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

package/decorators/withIntersectionObserver.js

@@ -1,7 +1,5 @@
-function createArrayOfNumber(length) {
-  return new Array(length + 1).fill(length).map((val, index) => index / length);
-}
-function withIntersectionObserver(BaseClass, defaultOptions = { threshold: createArrayOfNumber(100) }) {
+import { createRange } from "../utils/index.js";
+function withIntersectionObserver(BaseClass, defaultOptions = { threshold: createRange(0, 1, 0.01) }) {
   class WithIntersectionObserver extends BaseClass {
     /**
      * Config
@@ -10,7 +8,7 @@ function withIntersectionObserver(BaseClass, defaultOptions = { threshold: creat
       ...BaseClass.config,
       name: `${BaseClass.config.name}WithIntersectionObserver`,
       options: {
-        ...BaseClass.config?.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';\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 * Create an array of number between 0 and 1 from the given length.\n */\nfunction createArrayOfNumber(length: number): number[] {\n  return new Array(length + 1).fill(length).map((val, index) => index / length);\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: createArrayOfNumber(100) },\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": "AAkBA,SAAS,oBAAoB,QAA0B;AACrD,SAAO,IAAI,MAAM,SAAS,CAAC,EAAE,KAAK,MAAM,EAAE,IAAI,CAAC,KAAK,UAAU,QAAQ,MAAM;AAC9E;AAKO,SAAS,yBACd,WAEA,iBAA2C,EAAE,WAAW,oBAAoB,GAAG,EAAE,GACG;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,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,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      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;",
   "names": []
 }

package/decorators/withMountOnMediaQuery.js

@@ -8,7 +8,7 @@ function withMountOnMediaQuery(BaseClass, media) {
       ...BaseClass.config,
       name: `${BaseClass.config.name}withMountOnMediaQuery`,
       options: {
-        ...BaseClass.config?.options || {},
+        ...BaseClass.config?.options,
         media: String
       }
     };
@@ -49,9 +49,9 @@ function withMountOnMediaQuery(BaseClass, media) {
     /**
      * Override the mounting of the component.
      */
-    $mount() {
+    async $mount() {
       if (this.__matches) {
-        super.$mount();
+        return super.$mount();
       }
       return this;
     }

package/decorators/withMountOnMediaQuery.js.map

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

package/decorators/withMountWhenInView.js

@@ -7,7 +7,7 @@ function withMountWhenInView(BaseClass, defaultOptions = { threshold: [0, 1] })
       ...BaseClass.config,
       name: `${BaseClass.config.name}WithMountWhenInView`,
       options: {
-        ...BaseClass.config?.options || {},
+        ...BaseClass.config?.options,
         intersectionObserver: Object
       }
     };
@@ -55,9 +55,9 @@ function withMountWhenInView(BaseClass, defaultOptions = { threshold: [0, 1] })
     /**
      * Override the mounting of the component.
      */
-    $mount() {
+    async $mount() {
       if (this.__isVisible) {
-        super.$mount();
+        return super.$mount();
       }
       return this;
     }

package/decorators/withMountWhenInView.js.map

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

package/decorators/withName.d.ts

@@ -0,0 +1,6 @@
+import type { BaseDecorator, BaseInterface } from '../Base/types.js';
+import type { Base, BaseProps } from '../Base/index.js';
+/**
+ * Override the name of the given component.
+ */
+export declare function withName<S extends Base = Base>(BaseClass: typeof Base, name: string): BaseDecorator<BaseInterface, S, BaseProps>;

package/decorators/withName.js

@@ -0,0 +1,12 @@
+function withName(BaseClass, name) {
+  return class extends BaseClass {
+    static config = {
+      ...BaseClass.config,
+      name
+    };
+  };
+}
+export {
+  withName
+};
+//# sourceMappingURL=withName.js.map

package/decorators/withName.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/decorators/withName.ts"],
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\n\n/**\n * Override the name of the given component.\n */\nexport function withName<S extends Base = Base>(\n  BaseClass: typeof Base,\n  name: string,\n): BaseDecorator<BaseInterface, S, BaseProps> {\n  // @ts-ignore\n  return class extends BaseClass {\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name,\n    };\n  };\n}\n"],
+  "mappings": "AAMO,SAAS,SACd,WACA,MAC4C;AAE5C,SAAO,cAAc,UAAU;AAAA,IAC7B,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": []
+}

package/decorators/withScrolledInView/utils.d.ts

@@ -11,7 +11,18 @@ export declare function parseNamedOffset(offset: string | number): string | numb
  * Get an edge value given a start, size and offset value.
  */
 export declare function getEdgeWithOffset(start: number, size: number, offset: string | number): number;
+type HorizontalOnlyRect = {
+    x: number;
+    width: number;
+};
+type VerticalOnlyRect = {
+    y: number;
+    height: number;
+};
+type HorizontalRect = HorizontalOnlyRect & Partial<VerticalOnlyRect>;
+type VerticalRect = Partial<HorizontalOnlyRect> & VerticalOnlyRect;
 /**
  * Get starting and ending edges for a given axis, a target sizings, a container sizings and their offset.
  */
-export declare function getEdges(axis: 'x' | 'y', targetSizes: any, containerSizes: any, offset: any): [number, number];
+export declare function getEdges<T extends 'x' | 'y'>(axis: T, targetSizes: T extends 'x' ? HorizontalRect : VerticalRect, containerSizes: T extends 'x' ? HorizontalRect : VerticalRect, offset: NormalizedOffset): [number, number];
+export {};

package/decorators/withScrolledInView/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/decorators/withScrolledInView/utils.ts"],
-  "sourcesContent": ["import { isNumber, isString, endsWith } from '../../utils/index.js';\nimport type { NormalizedOffset } from './types.js';\n\nconst units = {\n  px: 'px',\n  vh: 'vh',\n  vw: 'vw',\n  vmin: 'vmin',\n  vmax: 'vmax',\n  percent: '%',\n};\n\nconst namedOffsets = {\n  start: 0,\n  center: 0.5,\n  end: 1,\n};\n\n/**\n * Normalize offset input.\n */\nexport function normalizeOffset(offsets: string): NormalizedOffset {\n  return offsets\n    .split('/')\n    .map((offset) => offset.trim().split(' ').slice(0, 2)) as NormalizedOffset;\n}\n\n/**\n * Parse the given offset.\n */\nexport function parseNamedOffset(offset: string | number): string | number {\n  if (isNumber(offset)) {\n    return offset;\n  }\n\n  if (isNumber(namedOffsets[offset])) {\n    return namedOffsets[offset];\n  }\n\n  if (isNumber(Number(offset))) {\n    return Number(offset);\n  }\n\n  if (isString(offset) && endsWith(offset, units.percent)) {\n    return Number.parseFloat(offset) / 100;\n  }\n\n  return offset;\n}\n\n/**\n * Get an edge value given a start, size and offset value.\n */\nexport function getEdgeWithOffset(start: number, size: number, offset: string | number): number {\n  if (isNumber(offset)) {\n    return start + size * offset;\n  }\n\n  const parsedNamedOffset = parseNamedOffset(offset);\n  if (isNumber(parsedNamedOffset)) {\n    return start + size * parsedNamedOffset;\n  }\n\n  if (isString(parsedNamedOffset)) {\n    const parsedOffset = Number.parseFloat(parsedNamedOffset);\n\n    if (endsWith(parsedNamedOffset, units.px)) {\n      return start + parsedOffset;\n    }\n\n    if (endsWith(parsedNamedOffset, units.vh)) {\n      return start + (parsedOffset * window.innerHeight) / 100;\n    }\n\n    if (endsWith(parsedNamedOffset, units.vw)) {\n      return start + (parsedOffset * window.innerWidth) / 100;\n    }\n\n    if (endsWith(parsedNamedOffset, units.vmin)) {\n      return start + (parsedOffset * Math.min(window.innerWidth, window.innerHeight)) / 100;\n    }\n\n    if (endsWith(parsedNamedOffset, units.vmax)) {\n      return start + (parsedOffset * Math.max(window.innerWidth, window.innerHeight)) / 100;\n    }\n  }\n\n  return start;\n}\n\n/**\n * Get starting and ending edges for a given axis, a target sizings, a container sizings and their offset.\n */\nexport function getEdges(axis: 'x' | 'y', targetSizes, containerSizes, offset): [number, number] {\n  const sizeKey = axis === 'x' ? 'width' : 'height';\n  const targetStart = getEdgeWithOffset(targetSizes[axis], targetSizes[sizeKey], offset[0][0]);\n  const containerStart = getEdgeWithOffset(0, containerSizes[sizeKey], offset[0][1]);\n  const targetEnd = getEdgeWithOffset(targetSizes[axis], targetSizes[sizeKey], offset[1][0]);\n  const containerEnd = getEdgeWithOffset(0, containerSizes[sizeKey], offset[1][1]);\n  const start = targetStart - containerStart;\n  const end = targetEnd - containerEnd;\n\n  return [start, end];\n}\n"],
-  "mappings": "AAAA,SAAS,UAAU,UAAU,gBAAgB;AAG7C,MAAM,QAAQ;AAAA,EACZ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,eAAe;AAAA,EACnB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACP;AAKO,SAAS,gBAAgB,SAAmC;AACjE,SAAO,QACJ,MAAM,GAAG,EACT,IAAI,CAAC,WAAW,OAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;AACzD;AAKO,SAAS,iBAAiB,QAA0C;AACzE,MAAI,SAAS,MAAM,GAAG;AACpB,WAAO;AAAA,EACT;AAEA,MAAI,SAAS,aAAa,MAAM,CAAC,GAAG;AAClC,WAAO,aAAa,MAAM;AAAA,EAC5B;AAEA,MAAI,SAAS,OAAO,MAAM,CAAC,GAAG;AAC5B,WAAO,OAAO,MAAM;AAAA,EACtB;AAEA,MAAI,SAAS,MAAM,KAAK,SAAS,QAAQ,MAAM,OAAO,GAAG;AACvD,WAAO,OAAO,WAAW,MAAM,IAAI;AAAA,EACrC;AAEA,SAAO;AACT;AAKO,SAAS,kBAAkB,OAAe,MAAc,QAAiC;AAC9F,MAAI,SAAS,MAAM,GAAG;AACpB,WAAO,QAAQ,OAAO;AAAA,EACxB;AAEA,QAAM,oBAAoB,iBAAiB,MAAM;AACjD,MAAI,SAAS,iBAAiB,GAAG;AAC/B,WAAO,QAAQ,OAAO;AAAA,EACxB;AAEA,MAAI,SAAS,iBAAiB,GAAG;AAC/B,UAAM,eAAe,OAAO,WAAW,iBAAiB;AAExD,QAAI,SAAS,mBAAmB,MAAM,EAAE,GAAG;AACzC,aAAO,QAAQ;AAAA,IACjB;AAEA,QAAI,SAAS,mBAAmB,MAAM,EAAE,GAAG;AACzC,aAAO,QAAS,eAAe,OAAO,cAAe;AAAA,IACvD;AAEA,QAAI,SAAS,mBAAmB,MAAM,EAAE,GAAG;AACzC,aAAO,QAAS,eAAe,OAAO,aAAc;AAAA,IACtD;AAEA,QAAI,SAAS,mBAAmB,MAAM,IAAI,GAAG;AAC3C,aAAO,QAAS,eAAe,KAAK,IAAI,OAAO,YAAY,OAAO,WAAW,IAAK;AAAA,IACpF;AAEA,QAAI,SAAS,mBAAmB,MAAM,IAAI,GAAG;AAC3C,aAAO,QAAS,eAAe,KAAK,IAAI,OAAO,YAAY,OAAO,WAAW,IAAK;AAAA,IACpF;AAAA,EACF;AAEA,SAAO;AACT;AAKO,SAAS,SAAS,MAAiB,aAAa,gBAAgB,QAA0B;AAC/F,QAAM,UAAU,SAAS,MAAM,UAAU;AACzC,QAAM,cAAc,kBAAkB,YAAY,IAAI,GAAG,YAAY,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AAC3F,QAAM,iBAAiB,kBAAkB,GAAG,eAAe,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AACjF,QAAM,YAAY,kBAAkB,YAAY,IAAI,GAAG,YAAY,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AACzF,QAAM,eAAe,kBAAkB,GAAG,eAAe,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AAC/E,QAAM,QAAQ,cAAc;AAC5B,QAAM,MAAM,YAAY;AAExB,SAAO,CAAC,OAAO,GAAG;AACpB;",
+  "sourcesContent": ["import { isNumber, isString, endsWith } from '../../utils/index.js';\nimport type { NormalizedOffset } from './types.js';\n\nconst units = {\n  px: 'px',\n  vh: 'vh',\n  vw: 'vw',\n  vmin: 'vmin',\n  vmax: 'vmax',\n  percent: '%',\n};\n\nconst namedOffsets = {\n  start: 0,\n  center: 0.5,\n  end: 1,\n};\n\n/**\n * Normalize offset input.\n */\nexport function normalizeOffset(offsets: string): NormalizedOffset {\n  return offsets\n    .split('/')\n    .map((offset) => offset.trim().split(' ').slice(0, 2)) as NormalizedOffset;\n}\n\n/**\n * Parse the given offset.\n */\nexport function parseNamedOffset(offset: string | number): string | number {\n  if (isNumber(offset)) {\n    return offset;\n  }\n\n  if (isNumber(namedOffsets[offset])) {\n    return namedOffsets[offset];\n  }\n\n  if (isNumber(Number(offset))) {\n    return Number(offset);\n  }\n\n  if (isString(offset) && endsWith(offset, units.percent)) {\n    return Number.parseFloat(offset) / 100;\n  }\n\n  return offset;\n}\n\n/**\n * Get an edge value given a start, size and offset value.\n */\nexport function getEdgeWithOffset(start: number, size: number, offset: string | number): number {\n  if (isNumber(offset)) {\n    return start + size * offset;\n  }\n\n  const parsedNamedOffset = parseNamedOffset(offset);\n  if (isNumber(parsedNamedOffset)) {\n    return start + size * parsedNamedOffset;\n  }\n\n  if (isString(parsedNamedOffset)) {\n    const parsedOffset = Number.parseFloat(parsedNamedOffset);\n\n    if (endsWith(parsedNamedOffset, units.px)) {\n      return start + parsedOffset;\n    }\n\n    if (endsWith(parsedNamedOffset, units.vh)) {\n      return start + (parsedOffset * window.innerHeight) / 100;\n    }\n\n    if (endsWith(parsedNamedOffset, units.vw)) {\n      return start + (parsedOffset * window.innerWidth) / 100;\n    }\n\n    if (endsWith(parsedNamedOffset, units.vmin)) {\n      return start + (parsedOffset * Math.min(window.innerWidth, window.innerHeight)) / 100;\n    }\n\n    if (endsWith(parsedNamedOffset, units.vmax)) {\n      return start + (parsedOffset * Math.max(window.innerWidth, window.innerHeight)) / 100;\n    }\n  }\n\n  return start;\n}\n\ntype HorizontalOnlyRect = {\n  x: number;\n  width: number;\n};\n\ntype VerticalOnlyRect = {\n  y: number;\n  height: number;\n};\n\ntype HorizontalRect = HorizontalOnlyRect & Partial<VerticalOnlyRect>;\ntype VerticalRect = Partial<HorizontalOnlyRect> & VerticalOnlyRect;\n\n/**\n * Get starting and ending edges for a given axis, a target sizings, a container sizings and their offset.\n */\nexport function getEdges<T extends 'x' | 'y'>(\n  axis: T,\n  targetSizes: T extends 'x' ? HorizontalRect : VerticalRect,\n  containerSizes: T extends 'x' ? HorizontalRect : VerticalRect,\n  offset: NormalizedOffset,\n): [number, number] {\n  const sizeKey = axis === 'x' ? 'width' : 'height';\n  const targetStart = getEdgeWithOffset(targetSizes[axis], targetSizes[sizeKey], offset[0][0]);\n  const containerStart = getEdgeWithOffset(0, containerSizes[sizeKey], offset[0][1]);\n  const targetEnd = getEdgeWithOffset(targetSizes[axis], targetSizes[sizeKey], offset[1][0]);\n  const containerEnd = getEdgeWithOffset(0, containerSizes[sizeKey], offset[1][1]);\n  const start = targetStart - containerStart;\n  const end = targetEnd - containerEnd;\n\n  return [start, end];\n}\n"],
+  "mappings": "AAAA,SAAS,UAAU,UAAU,gBAAgB;AAG7C,MAAM,QAAQ;AAAA,EACZ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,eAAe;AAAA,EACnB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACP;AAKO,SAAS,gBAAgB,SAAmC;AACjE,SAAO,QACJ,MAAM,GAAG,EACT,IAAI,CAAC,WAAW,OAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;AACzD;AAKO,SAAS,iBAAiB,QAA0C;AACzE,MAAI,SAAS,MAAM,GAAG;AACpB,WAAO;AAAA,EACT;AAEA,MAAI,SAAS,aAAa,MAAM,CAAC,GAAG;AAClC,WAAO,aAAa,MAAM;AAAA,EAC5B;AAEA,MAAI,SAAS,OAAO,MAAM,CAAC,GAAG;AAC5B,WAAO,OAAO,MAAM;AAAA,EACtB;AAEA,MAAI,SAAS,MAAM,KAAK,SAAS,QAAQ,MAAM,OAAO,GAAG;AACvD,WAAO,OAAO,WAAW,MAAM,IAAI;AAAA,EACrC;AAEA,SAAO;AACT;AAKO,SAAS,kBAAkB,OAAe,MAAc,QAAiC;AAC9F,MAAI,SAAS,MAAM,GAAG;AACpB,WAAO,QAAQ,OAAO;AAAA,EACxB;AAEA,QAAM,oBAAoB,iBAAiB,MAAM;AACjD,MAAI,SAAS,iBAAiB,GAAG;AAC/B,WAAO,QAAQ,OAAO;AAAA,EACxB;AAEA,MAAI,SAAS,iBAAiB,GAAG;AAC/B,UAAM,eAAe,OAAO,WAAW,iBAAiB;AAExD,QAAI,SAAS,mBAAmB,MAAM,EAAE,GAAG;AACzC,aAAO,QAAQ;AAAA,IACjB;AAEA,QAAI,SAAS,mBAAmB,MAAM,EAAE,GAAG;AACzC,aAAO,QAAS,eAAe,OAAO,cAAe;AAAA,IACvD;AAEA,QAAI,SAAS,mBAAmB,MAAM,EAAE,GAAG;AACzC,aAAO,QAAS,eAAe,OAAO,aAAc;AAAA,IACtD;AAEA,QAAI,SAAS,mBAAmB,MAAM,IAAI,GAAG;AAC3C,aAAO,QAAS,eAAe,KAAK,IAAI,OAAO,YAAY,OAAO,WAAW,IAAK;AAAA,IACpF;AAEA,QAAI,SAAS,mBAAmB,MAAM,IAAI,GAAG;AAC3C,aAAO,QAAS,eAAe,KAAK,IAAI,OAAO,YAAY,OAAO,WAAW,IAAK;AAAA,IACpF;AAAA,EACF;AAEA,SAAO;AACT;AAkBO,SAAS,SACd,MACA,aACA,gBACA,QACkB;AAClB,QAAM,UAAU,SAAS,MAAM,UAAU;AACzC,QAAM,cAAc,kBAAkB,YAAY,IAAI,GAAG,YAAY,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AAC3F,QAAM,iBAAiB,kBAAkB,GAAG,eAAe,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AACjF,QAAM,YAAY,kBAAkB,YAAY,IAAI,GAAG,YAAY,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AACzF,QAAM,eAAe,kBAAkB,GAAG,eAAe,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AAC/E,QAAM,QAAQ,cAAc;AAC5B,QAAM,MAAM,YAAY;AAExB,SAAO,CAAC,OAAO,GAAG;AACpB;",
   "names": []
 }

package/decorators/withScrolledInView/withScrolledInView.js

@@ -16,7 +16,7 @@ function updateProgress(props, axis, progressKey, currentKey) {
 }
 function updateProps(props, dampFactor, dampPrecision, axis = "x") {
   props.current[axis] = clamp(
-    axis === "x" ? window.pageXOffset : window.pageYOffset,
+    axis === "x" ? window.scrollX : window.scrollY,
     props.start[axis],
     props.end[axis]
   );
@@ -86,8 +86,8 @@ function withScrolledInView(BaseClass, options = {}) {
       if (this.shouldEvaluateProps) {
         this.shouldEvaluateProps = false;
         const targetSizes = options.useOffsetSizes ? getOffsetSizes(this.$el) : this.$el.getBoundingClientRect();
-        targetSizes.y += window.pageYOffset;
-        targetSizes.x += window.pageXOffset;
+        targetSizes.y += window.scrollY;
+        targetSizes.x += window.scrollX;
         const containerSizes = {
           x: 0,
           y: 0,
@@ -96,10 +96,10 @@ function withScrolledInView(BaseClass, options = {}) {
         };
         const offset = normalizeOffset(this.$options.offset);
         const [yStart, yEnd] = getEdges("y", targetSizes, containerSizes, offset);
-        const yCurrent = clamp(window.pageYOffset, yStart, yEnd);
+        const yCurrent = clamp(window.scrollY, yStart, yEnd);
         const yProgress = yStart === yEnd ? 0 : clamp01((yCurrent - yStart) / (yEnd - yStart));
         const [xStart, xEnd] = getEdges("x", targetSizes, containerSizes, offset);
-        const xCurrent = clamp(window.pageXOffset, xStart, xEnd);
+        const xCurrent = clamp(window.scrollX, xStart, xEnd);
         const xProgress = xStart === xEnd ? 0 : clamp01((xCurrent - xStart) / (xEnd - xStart));
         this.__props.start.x = xStart;
         this.__props.start.y = yStart;
@@ -116,20 +116,6 @@ function withScrolledInView(BaseClass, options = {}) {
       }
       return this.__props;
     }
-    /**
-     * Factor used for the `dampedProgress` props.
-     *
-     * @deprecated
-     * @todo v3 delete in favor of option API
-     */
-    dampFactor = null;
-    /**
-     * Precision for the `dampedProgress` props.
-     *
-     * @deprecated
-     * @todo v3 delete in favor of option API
-     */
-    dampPrecision = null;
     /**
      * Bind listeners.
      */
@@ -154,13 +140,12 @@ function withScrolledInView(BaseClass, options = {}) {
           render();
         },
         scrolled: (props) => {
-          if (!this.$services.has("ticked") && props.changed.y || props.changed.x) {
+          if (props.changed.y || props.changed.x) {
             this.$services.enable("ticked");
           }
         },
         ticked: () => {
-          const dampFactor = this.dampFactor ?? this.$options.dampFactor;
-          const dampPrecision = this.dampPrecision ?? this.$options.dampPrecision;
+          const { dampFactor, dampPrecision } = this.$options;
           updateProps(this.__props, dampFactor, dampPrecision, "x");
           updateProps(this.__props, dampFactor, dampPrecision, "y");
           if (this.__props.dampedCurrent.x === this.__props.current.x && this.__props.dampedCurrent.y === this.__props.current.y) {
@@ -185,46 +170,6 @@ function withScrolledInView(BaseClass, options = {}) {
         render();
       });
     }
-    /**
-     * Mounted hook.
-     */
-    mounted() {
-      if (isFunction(super.mounted)) {
-        super.mounted();
-      }
-    }
-    /**
-     * Resized hook.
-     */
-    resized(props) {
-      if (isFunction(super.resized)) {
-        super.resized(props);
-      }
-    }
-    /**
-     * Scrolled hook.
-     */
-    scrolled(props) {
-      if (isFunction(super.scrolled)) {
-        super.scrolled(props);
-      }
-    }
-    /**
-     * Ticked hook.
-     */
-    ticked(props) {
-      if (isFunction(super.ticked)) {
-        super.ticked(props);
-      }
-    }
-    /**
-     * Destroyed hook.
-     */
-    destroyed() {
-      if (isFunction(super.destroyed)) {
-        super.destroyed();
-      }
-    }
   }
   return WithScrolledInView;
 }

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

package/helpers/createApp.d.ts

@@ -1,11 +1,10 @@
 import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';
 import type { Features } from '../Base/features.js';
-export type CreateAppOptions = {
-    root: HTMLElement;
-    features: Features;
+export type CreateAppOptions = Partial<Features> & {
+    root?: HTMLElement;
 };
 /**
  * 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, rootElement?: HTMLElement | Partial<CreateAppOptions>): () => Promise<S & Base<T>>;
+export default function createApp<S extends BaseConstructor<Base>, T extends BaseProps = BaseProps>(App: S, options?: HTMLElement | CreateAppOptions): () => Promise<S & Base<T>>;