@studiometa/js-toolkit 2.9.0 → 2.10.0

package/decorators/index.cjs

@@ -26,5 +26,7 @@ __reExport(decorators_exports, require("./withMountWhenInView.cjs"), module.expo
 __reExport(decorators_exports, require("./withResponsiveOptions.cjs"), module.exports);
 __reExport(decorators_exports, require("./withScrolledInView/index.cjs"), module.exports);
 __reExport(decorators_exports, require("./withVue2.cjs"), module.exports);
+__reExport(decorators_exports, require("./withMountOnMediaQuery.cjs"), module.exports);
+__reExport(decorators_exports, require("./withMountWhenPrefersMotion"), module.exports);
 if (module.exports.default) module.exports = module.exports.default;
 //# sourceMappingURL=index.cjs.map

package/decorators/index.cjs.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 './withMountWhenInView.js';\nexport * from './withResponsiveOptions.js';\nexport * from './withScrolledInView/index.js';\nexport * from './withVue2.js';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,wCAAd;AACA,+BAAc,yCADd;AAEA,+BAAc,2BAFd;AAGA,+BAAc,kCAHd;AAIA,+BAAc,qCAJd;AAKA,+BAAc,2CALd;AAMA,+BAAc,sCANd;AAOA,+BAAc,wCAPd;AAQA,+BAAc,2CARd;AASA,+BAAc,2BATd;",
+  "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 './withMountWhenInView.js';\nexport * from './withResponsiveOptions.js';\nexport * from './withScrolledInView/index.js';\nexport * from './withVue2.js';\nexport * from './withMountOnMediaQuery.js';\nexport * from './withMountWhenPrefersMotion';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,wCAAd;AACA,+BAAc,yCADd;AAEA,+BAAc,2BAFd;AAGA,+BAAc,kCAHd;AAIA,+BAAc,qCAJd;AAKA,+BAAc,2CALd;AAMA,+BAAc,sCANd;AAOA,+BAAc,wCAPd;AAQA,+BAAc,2CARd;AASA,+BAAc,2BATd;AAUA,+BAAc,wCAVd;AAWA,+BAAc,yCAXd;",
   "names": []
 }

package/decorators/index.d.ts

@@ -8,3 +8,5 @@ export * from './withMountWhenInView.js';
 export * from './withResponsiveOptions.js';
 export * from './withScrolledInView/index.js';
 export * from './withVue2.js';
+export * from './withMountOnMediaQuery.js';
+export * from './withMountWhenPrefersMotion';

package/decorators/index.js

@@ -8,4 +8,6 @@ export * from "./withMountWhenInView.js";
 export * from "./withResponsiveOptions.js";
 export * from "./withScrolledInView/index.js";
 export * from "./withVue2.js";
+export * from "./withMountOnMediaQuery.js";
+export * from "./withMountWhenPrefersMotion";
 //# sourceMappingURL=index.js.map

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 './withMountWhenInView.js';\nexport * from './withResponsiveOptions.js';\nexport * from './withScrolledInView/index.js';\nexport * from './withVue2.js';\n"],
-  "mappings": "AAAA,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 './withMountWhenInView.js';\nexport * from './withResponsiveOptions.js';\nexport * from './withScrolledInView/index.js';\nexport * from './withVue2.js';\nexport * from './withMountOnMediaQuery.js';\nexport * from './withMountWhenPrefersMotion';\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;",
   "names": []
 }

package/decorators/withMountOnMediaQuery.cjs

@@ -0,0 +1,70 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/decorators/withMountOnMediaQuery.ts
+var withMountOnMediaQuery_exports = {};
+__export(withMountOnMediaQuery_exports, {
+  withMountOnMediaQuery: () => withMountOnMediaQuery
+});
+module.exports = __toCommonJS(withMountOnMediaQuery_exports);
+var import_is = require("../utils/is.cjs");
+function withMountOnMediaQuery(BaseClass, media) {
+  class WithMountOnMediaQuery extends BaseClass {
+    static config = {
+      ...BaseClass.config,
+      name: `${BaseClass.config.name}withMountOnMediaQuery`,
+      options: {
+        ...BaseClass.config?.options || {},
+        media: String
+      }
+    };
+    __matches = false;
+    constructor(element) {
+      super(element);
+      if (import_is.isDev && !this.$options.media && !media) {
+        this.$warn(
+          'Missing either "$options.media" or "media" argument in withMountOnMediaQuery decorator.'
+        );
+        return;
+      }
+      const mediaQueryList = window.matchMedia(this.$options.media || media);
+      this.__matches = mediaQueryList.matches;
+      const changeHandler = (event) => {
+        this.__matches = event.matches;
+        if (event.matches && !this.$isMounted) {
+          this.$mount();
+        } else if (this.$isMounted) {
+          setTimeout(() => this.$destroy());
+        }
+      };
+      mediaQueryList.addEventListener("change", changeHandler);
+      this.$on("terminated", () => {
+        mediaQueryList.removeEventListener("change", changeHandler);
+      });
+    }
+    $mount() {
+      if (this.__matches) {
+        super.$mount();
+      }
+      return this;
+    }
+  }
+  return WithMountOnMediaQuery;
+}
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=withMountOnMediaQuery.cjs.map

package/decorators/withMountOnMediaQuery.cjs.map

@@ -0,0 +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     * @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": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,gBAAsB;AAmBf,SAAS,sBACd,WACA,OAC8E;AAI9E,QAAM,8BAA+D,UAEnE;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,SAAS;AAAA,QACP,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IAMA,YAAY;AAAA,IAOZ,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,mBAAS,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,IAKA,SAAS;AACP,UAAI,KAAK,WAAW;AAClB,cAAM,OAAO;AAAA,MACf;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
+  "names": []
+}

package/decorators/withMountOnMediaQuery.d.ts

@@ -0,0 +1,18 @@
+import { BaseInterface, BaseDecorator } from '../Base/types.js';
+import type { Base, BaseProps } from '../Base/index.js';
+export interface withMountOnMediaQueryProps extends BaseProps {
+    $options: {
+        media: string;
+    };
+}
+export interface withMountOnMediaQueryInterface extends BaseInterface {
+    /**
+     * @private
+     */
+    __matches: boolean;
+    $mount(): this;
+}
+/**
+ * IntersectionObserver decoration.
+ */
+export declare function withMountOnMediaQuery<S extends Base = Base>(BaseClass: typeof Base, media: any): BaseDecorator<withMountOnMediaQueryInterface, S, withMountOnMediaQueryProps>;

package/decorators/withMountOnMediaQuery.js

@@ -0,0 +1,48 @@
+import { isDev } from "../utils/is.js";
+function withMountOnMediaQuery(BaseClass, media) {
+  class WithMountOnMediaQuery extends BaseClass {
+    static config = {
+      ...BaseClass.config,
+      name: `${BaseClass.config.name}withMountOnMediaQuery`,
+      options: {
+        ...BaseClass.config?.options || {},
+        media: String
+      }
+    };
+    __matches = false;
+    constructor(element) {
+      super(element);
+      if (isDev && !this.$options.media && !media) {
+        this.$warn(
+          'Missing either "$options.media" or "media" argument in withMountOnMediaQuery decorator.'
+        );
+        return;
+      }
+      const mediaQueryList = window.matchMedia(this.$options.media || media);
+      this.__matches = mediaQueryList.matches;
+      const changeHandler = (event) => {
+        this.__matches = event.matches;
+        if (event.matches && !this.$isMounted) {
+          this.$mount();
+        } else if (this.$isMounted) {
+          setTimeout(() => this.$destroy());
+        }
+      };
+      mediaQueryList.addEventListener("change", changeHandler);
+      this.$on("terminated", () => {
+        mediaQueryList.removeEventListener("change", changeHandler);
+      });
+    }
+    $mount() {
+      if (this.__matches) {
+        super.$mount();
+      }
+      return this;
+    }
+  }
+  return WithMountOnMediaQuery;
+}
+export {
+  withMountOnMediaQuery
+};
+//# sourceMappingURL=withMountOnMediaQuery.js.map

package/decorators/withMountOnMediaQuery.js.map

@@ -0,0 +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     * @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;AAI9E,QAAM,8BAA+D,UAEnE;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,SAAS;AAAA,QACP,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IAMA,YAAY;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,IAKA,SAAS;AACP,UAAI,KAAK,WAAW;AAClB,cAAM,OAAO;AAAA,MACf;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
+  "names": []
+}

package/decorators/withMountWhenPrefersMotion.cjs

@@ -0,0 +1,30 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/decorators/withMountWhenPrefersMotion.ts
+var withMountWhenPrefersMotion_exports = {};
+__export(withMountWhenPrefersMotion_exports, {
+  withMountWhenPrefersMotion: () => withMountWhenPrefersMotion
+});
+module.exports = __toCommonJS(withMountWhenPrefersMotion_exports);
+var import_withMountOnMediaQuery = require("./withMountOnMediaQuery.cjs");
+function withMountWhenPrefersMotion(BaseClass) {
+  return (0, import_withMountOnMediaQuery.withMountOnMediaQuery)(BaseClass, "not (prefers-reduced-motion)");
+}
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=withMountWhenPrefersMotion.cjs.map

package/decorators/withMountWhenPrefersMotion.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/decorators/withMountWhenPrefersMotion.ts"],
+  "sourcesContent": ["import { withMountOnMediaQuery } from './withMountOnMediaQuery.js';\nimport type { Base } from '../Base/index.js';\nimport { BaseDecorator, BaseInterface } from '../Base/types.js';\n\nexport function withMountWhenPrefersMotion<S extends Base = Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<BaseInterface, S> {\n  return withMountOnMediaQuery(BaseClass, 'not (prefers-reduced-motion)');\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mCAAsC;AAI/B,SAAS,2BACd,WACiC;AACjC,aAAO,oDAAsB,WAAW,8BAA8B;AACxE;",
+  "names": []
+}

package/decorators/withMountWhenPrefersMotion.d.ts

@@ -0,0 +1,3 @@
+import type { Base } from '../Base/index.js';
+import { BaseDecorator, BaseInterface } from '../Base/types.js';
+export declare function withMountWhenPrefersMotion<S extends Base = Base>(BaseClass: typeof Base): BaseDecorator<BaseInterface, S>;

package/decorators/withMountWhenPrefersMotion.js

@@ -0,0 +1,8 @@
+import { withMountOnMediaQuery } from "./withMountOnMediaQuery.js";
+function withMountWhenPrefersMotion(BaseClass) {
+  return withMountOnMediaQuery(BaseClass, "not (prefers-reduced-motion)");
+}
+export {
+  withMountWhenPrefersMotion
+};
+//# sourceMappingURL=withMountWhenPrefersMotion.js.map

package/decorators/withMountWhenPrefersMotion.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/decorators/withMountWhenPrefersMotion.ts"],
+  "sourcesContent": ["import { withMountOnMediaQuery } from './withMountOnMediaQuery.js';\nimport type { Base } from '../Base/index.js';\nimport { BaseDecorator, BaseInterface } from '../Base/types.js';\n\nexport function withMountWhenPrefersMotion<S extends Base = Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<BaseInterface, S> {\n  return withMountOnMediaQuery(BaseClass, 'not (prefers-reduced-motion)');\n}\n"],
+  "mappings": "AAAA,SAAS,6BAA6B;AAI/B,SAAS,2BACd,WACiC;AACjC,SAAO,sBAAsB,WAAW,8BAA8B;AACxE;",
+  "names": []
+}

package/decorators/withScrolledInView/withScrolledInView.cjs

@@ -26,6 +26,11 @@ var import_withMountWhenInView = require("../withMountWhenInView.cjs");
 var import_utils = require("../../utils/index.cjs");
 var import_utils2 = require("./utils.cjs");
 var scheduler = (0, import_utils.useScheduler)(["update", "render"]);
+function updateProgress(props, axis, progressKey, currentKey) {
+  props[progressKey][axis] = props.start[axis] === props.end[axis] ? 0 : (0, import_utils.clamp01)(
+    (props[currentKey][axis] - props.start[axis]) / (props.end[axis] - props.start[axis])
+  );
+}
 function updateProps(props, dampFactor, dampPrecision, axis = "x") {
   props.current[axis] = (0, import_utils.clamp)(
     axis === "x" ? window.pageXOffset : window.pageYOffset,
@@ -38,12 +43,8 @@ function updateProps(props, dampFactor, dampPrecision, axis = "x") {
     dampFactor,
     dampPrecision
   );
-  props.progress[axis] = (0, import_utils.clamp01)(
-    (props.current[axis] - props.start[axis]) / (props.end[axis] - props.start[axis])
-  );
-  props.dampedProgress[axis] = (0, import_utils.clamp01)(
-    (props.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis])
-  );
+  updateProgress(props, axis, "progress", "current");
+  updateProgress(props, axis, "dampedProgress", "dampedCurrent");
 }
 function withScrolledInView(BaseClass, options = {}) {
   class WithScrolledInView extends (0, import_withMountWhenInView.withMountWhenInView)(
@@ -110,10 +111,10 @@ function withScrolledInView(BaseClass, options = {}) {
         const offset = (0, import_utils2.normalizeOffset)(this.$options.offset);
         const [yStart, yEnd] = (0, import_utils2.getEdges)("y", targetSizes, containerSizes, offset);
         const yCurrent = (0, import_utils.clamp)(window.pageYOffset, yStart, yEnd);
-        const yProgress = (0, import_utils.clamp01)((yCurrent - yStart) / (yEnd - yStart));
+        const yProgress = yStart === yEnd ? 0 : (0, import_utils.clamp01)((yCurrent - yStart) / (yEnd - yStart));
         const [xStart, xEnd] = (0, import_utils2.getEdges)("x", targetSizes, containerSizes, offset);
         const xCurrent = (0, import_utils.clamp)(window.pageXOffset, xStart, xEnd);
-        const xProgress = (0, import_utils.clamp01)((xCurrent - xStart) / (xEnd - xStart));
+        const xProgress = xStart === xEnd ? 0 : (0, import_utils.clamp01)((xCurrent - xStart) / (xEnd - xStart));
         this.__props.start.x = xStart;
         this.__props.start.y = yStart;
         this.__props.end.x = xEnd;

package/decorators/withScrolledInView/withScrolledInView.cjs.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\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  props.progress[axis] = clamp01(\n    (props.current[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n  props.dampedProgress[axis] = clamp01(\n    (props.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\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 = 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 = 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     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampFactor?: number = null;\n\n    /**\n     * Precision for the `dampedProgress` props.\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.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     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampFactor?: number = null;\n\n    /**\n     * Precision for the `dampedProgress` props.\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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",
   "names": ["import_utils"]
 }

package/decorators/withScrolledInView/withScrolledInView.js

@@ -9,6 +9,11 @@ import {
 } from "../../utils/index.js";
 import { normalizeOffset, getEdges } from "./utils.js";
 const scheduler = useScheduler(["update", "render"]);
+function updateProgress(props, axis, progressKey, currentKey) {
+  props[progressKey][axis] = props.start[axis] === props.end[axis] ? 0 : clamp01(
+    (props[currentKey][axis] - props.start[axis]) / (props.end[axis] - props.start[axis])
+  );
+}
 function updateProps(props, dampFactor, dampPrecision, axis = "x") {
   props.current[axis] = clamp(
     axis === "x" ? window.pageXOffset : window.pageYOffset,
@@ -21,12 +26,8 @@ function updateProps(props, dampFactor, dampPrecision, axis = "x") {
     dampFactor,
     dampPrecision
   );
-  props.progress[axis] = clamp01(
-    (props.current[axis] - props.start[axis]) / (props.end[axis] - props.start[axis])
-  );
-  props.dampedProgress[axis] = clamp01(
-    (props.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis])
-  );
+  updateProgress(props, axis, "progress", "current");
+  updateProgress(props, axis, "dampedProgress", "dampedCurrent");
 }
 function withScrolledInView(BaseClass, options = {}) {
   class WithScrolledInView extends withMountWhenInView(
@@ -93,10 +94,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 yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));
+        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 xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));
+        const xProgress = xStart === xEnd ? 0 : clamp01((xCurrent - xStart) / (xEnd - xStart));
         this.__props.start.x = xStart;
         this.__props.start.y = yStart;
         this.__props.end.x = xEnd;

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\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  props.progress[axis] = clamp01(\n    (props.current[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n  props.dampedProgress[axis] = clamp01(\n    (props.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\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 = 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 = 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     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampFactor?: number = null;\n\n    /**\n     * Precision for the `dampedProgress` props.\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.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     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampFactor?: number = null;\n\n    /**\n     * Precision for the `dampedProgress` props.\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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",
   "names": []
 }

package/helpers/createApp.cjs

@@ -32,26 +32,27 @@ function createApp(App, rootElement = document.body) {
       import_features.features.set(feature, value);
     });
   }
-  const p = new Promise((resolve) => {
-    const callback = () => {
-      setTimeout(() => {
-        app = new App(options.root).$mount();
-        resolve(app);
-      }, 0);
-    };
-    if (import_features.features.get("asyncChildren") || document.readyState === "complete") {
-      callback();
-    } else {
-      document.addEventListener("readystatechange", () => {
-        if (document.readyState === "complete") {
-          callback();
-        }
-      });
-    }
-  });
-  return function useApp() {
-    return p;
-  };
+  function init() {
+    app = new App(options.root).$mount();
+    return app;
+  }
+  let p;
+  if (import_features.features.get("asyncChildren")) {
+    p = Promise.resolve(init());
+  } else {
+    p = new Promise((resolve) => {
+      if (document.readyState === "complete") {
+        resolve(init());
+      } else {
+        document.addEventListener("readystatechange", () => {
+          if (document.readyState === "complete") {
+            resolve(init());
+          }
+        });
+      }
+    });
+  }
+  return () => p;
 }
 if (module.exports.default) module.exports = module.exports.default;
 //# sourceMappingURL=createApp.cjs.map

package/helpers/createApp.cjs.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 { isDefined } from '../utils/index.js';\n\nexport type CreateAppOptions = {\n  root: HTMLElement;\n  features: Features;\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  rootElement: HTMLElement | Partial<CreateAppOptions> = document.body,\n): () => Promise<S & Base<T>> {\n  let app: S & Base<T>;\n  const options =\n    rootElement instanceof HTMLElement\n      ? { root: rootElement, features: undefined }\n      : { root: document.body, ...rootElement };\n\n  if (isDefined(options.features)) {\n    Object.entries(options.features).forEach(([feature, value]) => {\n      features.set(feature as keyof Features, value);\n    });\n  }\n\n  const p: Promise<S & Base<T>> = new Promise((resolve) => {\n    const callback = () => {\n      setTimeout(() => {\n        app = (new App(options.root) as S & Base<T>).$mount();\n        resolve(app);\n      }, 0);\n    };\n\n    if (features.get('asyncChildren') || document.readyState === 'complete') {\n      callback();\n    } else {\n      document.addEventListener('readystatechange', () => {\n        if (document.readyState === 'complete') {\n          callback();\n        }\n      });\n    }\n  });\n\n  return function useApp() {\n    return p;\n  };\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAyB;AACzB,mBAA0B;AAWX,SAAR,UACL,KACA,cAAuD,SAAS,MACpC;AAC5B,MAAI;AACJ,QAAM,UACJ,uBAAuB,cACnB,EAAE,MAAM,aAAa,UAAU,OAAU,IACzC,EAAE,MAAM,SAAS,MAAM,GAAG,YAAY;AAE5C,UAAI,wBAAU,QAAQ,QAAQ,GAAG;AAC/B,WAAO,QAAQ,QAAQ,QAAQ,EAAE,QAAQ,CAAC,CAAC,SAAS,KAAK,MAAM;AAC7D,+BAAS,IAAI,SAA2B,KAAK;AAAA,IAC/C,CAAC;AAAA,EACH;AAEA,QAAM,IAA0B,IAAI,QAAQ,CAAC,YAAY;AACvD,UAAM,WAAW,MAAM;AACrB,iBAAW,MAAM;AACf,cAAO,IAAI,IAAI,QAAQ,IAAI,EAAkB,OAAO;AACpD,gBAAQ,GAAG;AAAA,MACb,GAAG,CAAC;AAAA,IACN;AAEA,QAAI,yBAAS,IAAI,eAAe,KAAK,SAAS,eAAe,YAAY;AACvE,eAAS;AAAA,IACX,OAAO;AACL,eAAS,iBAAiB,oBAAoB,MAAM;AAClD,YAAI,SAAS,eAAe,YAAY;AACtC,mBAAS;AAAA,QACX;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,SAAO,SAAS,SAAS;AACvB,WAAO;AAAA,EACT;AACF;",
+  "sourcesContent": ["import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport type { Features } from '../Base/features.js';\nimport { features } from '../Base/features.js';\nimport { isDefined } from '../utils/index.js';\n\nexport type CreateAppOptions = {\n  root: HTMLElement;\n  features: Features;\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  rootElement: HTMLElement | Partial<CreateAppOptions> = document.body,\n): () => Promise<S & Base<T>> {\n  let app: S & Base<T>;\n  const options =\n    rootElement instanceof HTMLElement\n      ? { root: rootElement, features: undefined }\n      : { root: document.body, ...rootElement };\n\n  if (isDefined(options.features)) {\n    Object.entries(options.features as Features).forEach(([feature, value]) => {\n      features.set(feature as keyof Features, value);\n    });\n  }\n\n  function init() {\n    app = (new App(options.root) as S & Base<T>).$mount();\n    return app;\n  }\n\n  let p: Promise<S & Base<T>>;\n\n  if (features.get('asyncChildren')) {\n    p = Promise.resolve(init());\n  } else {\n    p = new Promise<S & Base<T>>((resolve) => {\n      if (document.readyState === 'complete') {\n        resolve(init());\n      } else {\n        document.addEventListener('readystatechange', () => {\n          if (document.readyState === 'complete') {\n            resolve(init());\n          }\n        });\n      }\n    });\n  }\n\n  return () => p;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAyB;AACzB,mBAA0B;AAWX,SAAR,UACL,KACA,cAAuD,SAAS,MACpC;AAC5B,MAAI;AACJ,QAAM,UACJ,uBAAuB,cACnB,EAAE,MAAM,aAAa,UAAU,OAAU,IACzC,EAAE,MAAM,SAAS,MAAM,GAAG,YAAY;AAE5C,UAAI,wBAAU,QAAQ,QAAQ,GAAG;AAC/B,WAAO,QAAQ,QAAQ,QAAoB,EAAE,QAAQ,CAAC,CAAC,SAAS,KAAK,MAAM;AACzE,+BAAS,IAAI,SAA2B,KAAK;AAAA,IAC/C,CAAC;AAAA,EACH;AAEA,WAAS,OAAO;AACd,UAAO,IAAI,IAAI,QAAQ,IAAI,EAAkB,OAAO;AACpD,WAAO;AAAA,EACT;AAEA,MAAI;AAEJ,MAAI,yBAAS,IAAI,eAAe,GAAG;AACjC,QAAI,QAAQ,QAAQ,KAAK,CAAC;AAAA,EAC5B,OAAO;AACL,QAAI,IAAI,QAAqB,CAAC,YAAY;AACxC,UAAI,SAAS,eAAe,YAAY;AACtC,gBAAQ,KAAK,CAAC;AAAA,MAChB,OAAO;AACL,iBAAS,iBAAiB,oBAAoB,MAAM;AAClD,cAAI,SAAS,eAAe,YAAY;AACtC,oBAAQ,KAAK,CAAC;AAAA,UAChB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,MAAM;AACf;",
   "names": []
 }