@studiometa/js-toolkit 2.0.0-rc.2 → 2.1.0

package/decorators/index.cjs

@@ -29,6 +29,7 @@ __export(decorators_exports, {
   withFreezedOptions: () => import_withFreezedOptions.default,
   withIntersectionObserver: () => import_withIntersectionObserver.default,
   withMountWhenInView: () => import_withMountWhenInView.default,
+  withResponsiveOptions: () => import_withResponsiveOptions.default,
   withScrolledInView: () => import_withScrolledInView.default,
   withVue2: () => import_withVue2.default
 });
@@ -40,6 +41,7 @@ var import_withExtraConfig = __toESM(require("./withExtraConfig.cjs"), 1);
 var import_withFreezedOptions = __toESM(require("./withFreezedOptions.cjs"), 1);
 var import_withIntersectionObserver = __toESM(require("./withIntersectionObserver.cjs"), 1);
 var import_withMountWhenInView = __toESM(require("./withMountWhenInView.cjs"), 1);
+var import_withResponsiveOptions = __toESM(require("./withResponsiveOptions.cjs"), 1);
 var import_withScrolledInView = __toESM(require("./withScrolledInView.cjs"), 1);
 var import_withVue2 = __toESM(require("./withVue2.cjs"), 1);
 if (module.exports.default) module.exports = module.exports.default;

package/decorators/index.d.ts

@@ -5,5 +5,6 @@ export { default as withExtraConfig } from "./withExtraConfig.js";
 export { default as withFreezedOptions } from "./withFreezedOptions.js";
 export { default as withIntersectionObserver } from "./withIntersectionObserver.js";
 export { default as withMountWhenInView } from "./withMountWhenInView.js";
+export { default as withResponsiveOptions } from "./withResponsiveOptions.js";
 export { default as withScrolledInView } from "./withScrolledInView.js";
 export { default as withVue2 } from "./withVue2.js";

package/decorators/index.js

@@ -5,8 +5,9 @@ import { default as default5 } from "./withExtraConfig.js";
 import { default as default6 } from "./withFreezedOptions.js";
 import { default as default7 } from "./withIntersectionObserver.js";
 import { default as default8 } from "./withMountWhenInView.js";
-import { default as default9 } from "./withScrolledInView.js";
-import { default as default10 } from "./withVue2.js";
+import { default as default9 } from "./withResponsiveOptions.js";
+import { default as default10 } from "./withScrolledInView.js";
+import { default as default11 } from "./withVue2.js";
 export {
   default2 as withBreakpointManager,
   default3 as withBreakpointObserver,
@@ -15,6 +16,7 @@ export {
   default6 as withFreezedOptions,
   default7 as withIntersectionObserver,
   default8 as withMountWhenInView,
-  default9 as withScrolledInView,
-  default10 as withVue2
+  default9 as withResponsiveOptions,
+  default10 as withScrolledInView,
+  default11 as withVue2
 };

package/decorators/withBreakpointManager.cjs

@@ -65,7 +65,6 @@ function withBreakpointManager(BaseClass, breakpoints) {
         testBreakpoints(instances.get(this));
       });
       this.instances = instances.get(this);
-      return this;
     }
     $mount() {
       super.$mount();

package/decorators/withBreakpointManager.d.ts

@@ -2,8 +2,8 @@
  * BreakpointManager class.
  * @template {BaseConstructor} T
  * @param {T} BaseClass
- * @param {Array<[String, BaseConstructor]>} breakpoints
- * @return {T}
+ * @param {Array<[string, BaseConstructor]>} breakpoints
+ * @returns {T}
  */
 export default function withBreakpointManager<T extends typeof import("../Base").default>(BaseClass: T, breakpoints: Array<[string, BaseConstructor]>): T;
 export type Base = import('../Base').default;

package/decorators/withBreakpointManager.js

@@ -38,7 +38,6 @@ function withBreakpointManager(BaseClass, breakpoints) {
         testBreakpoints(instances.get(this));
       });
       this.instances = instances.get(this);
-      return this;
     }
     $mount() {
       super.$mount();

package/decorators/withBreakpointObserver.cjs

@@ -87,10 +87,9 @@ function withBreakpointObserver(BaseClass) {
       });
       mutationObserver.observe(this.$el, { attributes: true });
       if (!hasBreakpointConfiguration(this)) {
-        return this;
+        return;
       }
       addToResize(key, this);
-      return this;
     }
     $mount() {
       if (!hasBreakpointConfiguration(this)) {

package/decorators/withBreakpointObserver.d.ts

@@ -3,7 +3,7 @@
  *
  * @template {BaseConstructor} T
  * @param {T} BaseClass The Base class to extend from.
- * @return {T}
+ * @returns {T}
  */
 export default function withBreakpointObserver<T extends typeof import("../Base").default>(BaseClass: T): T;
 export type Base = import('../Base').default;

package/decorators/withBreakpointObserver.js

@@ -61,10 +61,9 @@ function withBreakpointObserver(BaseClass) {
       });
       mutationObserver.observe(this.$el, { attributes: true });
       if (!hasBreakpointConfiguration(this)) {
-        return this;
+        return;
       }
       addToResize(key, this);
-      return this;
     }
     $mount() {
       if (!hasBreakpointConfiguration(this)) {

package/decorators/withDrag.d.ts

@@ -12,7 +12,7 @@
  * @template {BaseConstructor} T
  * @param {T} BaseClass
  * @param {DragDecoratorOptions} options
- * @return {T}
+ * @returns {T}
  */
 export default function withDrag<T extends typeof import("../Base").default>(BaseClass: T, { target, ...options }?: DragDecoratorOptions): T;
 export type Base = import('../Base').default;

package/decorators/withExtraConfig.d.ts

@@ -10,7 +10,7 @@
  * @param {T} BaseClass The Base class to extend.
  * @param {Partial<BaseConfig>} config Extra configuration to merge.
  * @param {DeepmergeOptions} options Options for the `deepmerge` function. {@link https://github.com/TehShrike/deepmerge#options}
- * @return {T}
+ * @returns {T}
  */
 export default function withExtraConfig<T extends typeof import("../Base").default>(BaseClass: T, config: Partial<BaseConfig>, options?: DeepmergeOptions): T;
 export type DeepmergeOptions = import('deepmerge').Options;

package/decorators/withFreezedOptions.cjs

@@ -2,6 +2,7 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -15,6 +16,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 
 // packages/js-toolkit/decorators/withFreezedOptions.js
 var withFreezedOptions_exports = {};
@@ -24,13 +29,17 @@ __export(withFreezedOptions_exports, {
 module.exports = __toCommonJS(withFreezedOptions_exports);
 function withFreezedOptions(BaseClass) {
   return class extends BaseClass {
+    constructor() {
+      super(...arguments);
+      __publicField(this, "__freezedOptions");
+    }
     get $options() {
-      Object.defineProperty(this, "$options", {
+      Object.defineProperty(this, "__freezedOptions", {
         value: Object.freeze({ ...super.$options }),
-        enumerable: true,
+        enumerable: false,
         configurable: true
       });
-      return this.$options;
+      return this.__freezedOptions;
     }
   };
 }

package/decorators/withFreezedOptions.d.ts

@@ -7,7 +7,7 @@
  *
  * @template {BaseConstructor} T
  * @param {T} BaseClass The Base class to extend.
- * @return {T}
+ * @returns {T}
  */
 export default function withFreezedOptions<T extends typeof import("../Base").default>(BaseClass: T): T;
 export type BaseOptions = import('../Base').BaseOptions;

package/decorators/withFreezedOptions.js

@@ -1,12 +1,22 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 function withFreezedOptions(BaseClass) {
   return class extends BaseClass {
+    constructor() {
+      super(...arguments);
+      __publicField(this, "__freezedOptions");
+    }
     get $options() {
-      Object.defineProperty(this, "$options", {
+      Object.defineProperty(this, "__freezedOptions", {
         value: Object.freeze({ ...super.$options }),
-        enumerable: true,
+        enumerable: false,
         configurable: true
       });
-      return this.$options;
+      return this.__freezedOptions;
     }
   };
 }

package/decorators/withIntersectionObserver.cjs

@@ -47,7 +47,6 @@ function withIntersectionObserver(BaseClass, defaultOptions = { threshold: creat
       this.$on("destroyed", () => {
         this.$observer.unobserve(this.$el);
       });
-      return this;
     }
   }, __publicField(_b, "config", {
     ...BaseClass.config,

package/decorators/withIntersectionObserver.d.ts

@@ -4,7 +4,7 @@
  * @template {BaseConstructor} T
  * @param {T} BaseClass The Base class to extend.
  * @param {Object} [defaultOptions] The options for the IntersectionObserver instance.
- * @return {T & { new: (element:HTMLElement) => { $observer: IntersectionObserver }}}
+ * @returns {T & { new: (element:HTMLElement) => { $observer: IntersectionObserver }}}
  */
 export default function withIntersectionObserver<T extends typeof import("../Base").default>(BaseClass: T, defaultOptions?: any): T & {
     new: (element: HTMLElement) => {

package/decorators/withIntersectionObserver.js

@@ -24,7 +24,6 @@ function withIntersectionObserver(BaseClass, defaultOptions = { threshold: creat
       this.$on("destroyed", () => {
         this.$observer.unobserve(this.$el);
       });
-      return this;
     }
   }, __publicField(_b, "config", {
     ...BaseClass.config,

package/decorators/withMountWhenInView.cjs

@@ -49,7 +49,6 @@ function withMountWhenInView(BaseClass, defaultOptions = { threshold: [0, 1] })
       this.$on("terminated", () => {
         this.__observer.disconnect();
       });
-      return this;
     }
     $mount() {
       if (this.__isVisible) {

package/decorators/withMountWhenInView.d.ts

@@ -18,7 +18,7 @@
  * @template {BaseConstructor} T
  * @param {T} BaseClass The Base class to extend.
  * @param {IntersectionObserverInit} [defaultOptions] The options for the IntersectionObserver instance.
- * @return {T}
+ * @returns {T}
  */
 export default function withMountWhenInView<T extends typeof import("../Base").default>(BaseClass: T, defaultOptions?: IntersectionObserverInit): T;
 export type Base = import('../Base').default;

package/decorators/withMountWhenInView.js

@@ -26,7 +26,6 @@ function withMountWhenInView(BaseClass, defaultOptions = { threshold: [0, 1] })
       this.$on("terminated", () => {
         this.__observer.disconnect();
       });
-      return this;
     }
     $mount() {
       if (this.__isVisible) {

package/decorators/withResponsiveOptions.cjs

@@ -0,0 +1,39 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/decorators/withResponsiveOptions.js
+var withResponsiveOptions_exports = {};
+__export(withResponsiveOptions_exports, {
+  default: () => withResponsiveOptions
+});
+module.exports = __toCommonJS(withResponsiveOptions_exports);
+var import_ResponsiveOptionsManager = __toESM(require("../Base/managers/ResponsiveOptionsManager.cjs"), 1);
+function withResponsiveOptions(BaseClass) {
+  return class extends BaseClass {
+    get __managers() {
+      return {
+        ...super.__managers,
+        OptionsManager: import_ResponsiveOptionsManager.default
+      };
+    }
+  };
+}
+if (module.exports.default) module.exports = module.exports.default;

package/decorators/withResponsiveOptions.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Extends the configuration of an existing class.
+ *
+ * @template {import('../Base').BaseConstructor} T
+ * @param {T} BaseClass The Base class to extend.
+ * @returns {T}
+ */
+export default function withResponsiveOptions<T extends typeof import("../Base").default>(BaseClass: T): T;

package/decorators/withResponsiveOptions.js

@@ -0,0 +1,14 @@
+import ResponsiveOptionsManager from "../Base/managers/ResponsiveOptionsManager.js";
+function withResponsiveOptions(BaseClass) {
+  return class extends BaseClass {
+    get __managers() {
+      return {
+        ...super.__managers,
+        OptionsManager: ResponsiveOptionsManager
+      };
+    }
+  };
+}
+export {
+  withResponsiveOptions as default
+};

package/decorators/withScrolledInView.cjs

@@ -32,11 +32,11 @@ __export(withScrolledInView_exports, {
 module.exports = __toCommonJS(withScrolledInView_exports);
 var import_withMountWhenInView = __toESM(require("./withMountWhenInView.cjs"), 1);
 var import_utils = require("../utils/index.cjs");
-function withScrolledInView(BaseClass, options) {
+function withScrolledInView(BaseClass, options = {}) {
   var _a;
   return _a = class extends (0, import_withMountWhenInView.default)(BaseClass, options) {
-    constructor() {
-      super(...arguments);
+    constructor(element) {
+      super(element);
       __publicField(this, "__props", {
         start: {
           x: 0,
@@ -61,37 +61,72 @@ function withScrolledInView(BaseClass, options) {
       });
       __publicField(this, "dampFactor", 0.1);
       __publicField(this, "dampPrecision", 1e-3);
+      const delegate = {
+        handleEvent(event) {
+          delegate[event.type](event.detail[0]);
+        },
+        resized: () => {
+          this.__setProps();
+        },
+        scrolled: (props) => {
+          if (!this.$services.has("ticked") && props.changed.y || props.changed.x) {
+            this.$services.enable("ticked");
+          }
+        },
+        ticked: () => {
+          this.__props.current.x = (0, import_utils.clamp)(window.pageXOffset, this.__props.start.x, this.__props.end.x);
+          this.__props.progress.x = (0, import_utils.clamp01)((this.__props.current.x - this.__props.start.x) / (this.__props.end.x - this.__props.start.x));
+          this.__props.dampedProgress.x = (0, import_utils.damp)(this.__props.progress.x, this.__props.dampedProgress.x, this.dampFactor, this.dampPrecision);
+          this.__props.current.y = (0, import_utils.clamp)(window.pageYOffset, this.__props.start.y, this.__props.end.y);
+          this.__props.progress.y = (0, import_utils.clamp01)((this.__props.current.y - this.__props.start.y) / (this.__props.end.y - this.__props.start.y));
+          this.__props.dampedProgress.y = (0, import_utils.damp)(this.__props.progress.y, this.__props.dampedProgress.y, this.dampFactor, this.dampPrecision);
+          if (this.__props.dampedProgress.x === this.__props.progress.x && this.__props.dampedProgress.y === this.__props.progress.y) {
+            this.$services.disable("ticked");
+          }
+          this.__callMethod("scrolledInView", this.__props);
+        }
+      };
+      this.$on("before-mounted", () => {
+        this.$on("resized", delegate);
+        this.$on("scrolled", delegate);
+        this.$on("ticked", delegate);
+      });
+      this.$on("mounted", () => {
+        this.__setProps();
+      });
+      this.$on("destroyed", () => {
+        this.$off("resized", delegate);
+        this.$off("scrolled", delegate);
+        this.$off("ticked", delegate);
+      });
     }
     mounted() {
-      this.__setProps();
+      if ((0, import_utils.isFunction)(super.mounted))
+        super.mounted();
     }
-    resized() {
-      this.__setProps();
+    resized(props) {
+      if ((0, import_utils.isFunction)(super.resized))
+        super.resized(props);
     }
     scrolled(props) {
-      if (!this.$services.has("ticked") && props.changed.y || props.changed.x) {
-        this.$services.enable("ticked");
-      }
+      if ((0, import_utils.isFunction)(super.scrolled))
+        super.scrolled(props);
+    }
+    ticked(props) {
+      if ((0, import_utils.isFunction)(super.ticked))
+        super.ticked(props);
     }
-    ticked() {
-      this.__props.current.x = (0, import_utils.clamp)(window.pageXOffset, this.__props.start.x, this.__props.end.x);
-      this.__props.progress.x = (0, import_utils.clamp01)((this.__props.current.x - this.__props.start.x) / (this.__props.end.x - this.__props.start.x));
-      this.__props.dampedProgress.x = (0, import_utils.damp)(this.__props.progress.x, this.__props.dampedProgress.x, this.dampFactor, this.dampPrecision);
-      this.__props.current.y = (0, import_utils.clamp)(window.pageYOffset, this.__props.start.y, this.__props.end.y);
-      this.__props.progress.y = (0, import_utils.clamp01)((this.__props.current.y - this.__props.start.y) / (this.__props.end.y - this.__props.start.y));
-      this.__props.dampedProgress.y = (0, import_utils.damp)(this.__props.progress.y, this.__props.dampedProgress.y, this.dampFactor, this.dampPrecision);
-      if (this.__props.dampedProgress.x === this.__props.progress.x && this.__props.dampedProgress.y === this.__props.progress.y) {
-        this.$services.disable("ticked");
-      }
-      this.__callMethod("scrolledInView", this.__props);
+    destroyed() {
+      if ((0, import_utils.isFunction)(super.destroyed))
+        super.destroyed();
     }
     __setProps() {
-      const sizes = this.$el.getBoundingClientRect();
-      const yEnd = sizes.top + window.pageYOffset + sizes.height;
+      const sizes = options.useOffsetSizes ? (0, import_utils.getOffsetSizes)(this.$el) : this.$el.getBoundingClientRect();
+      const yEnd = sizes.y + window.pageYOffset + sizes.height;
       const yStart = yEnd - window.innerHeight - sizes.height;
       const yCurrent = (0, import_utils.clamp)(window.pageYOffset, yStart, yEnd);
       const yProgress = (0, import_utils.clamp01)((yCurrent - yStart) / (yEnd - yStart));
-      const xEnd = sizes.left + window.pageXOffset + sizes.width;
+      const xEnd = sizes.x + window.pageXOffset + sizes.width;
       const xStart = xEnd - window.innerWidth - sizes.width;
       const xCurrent = (0, import_utils.clamp)(window.pageXOffset, xStart, xEnd);
       const xProgress = (0, import_utils.clamp01)((xCurrent - xStart) / (xEnd - xStart));

package/decorators/withScrolledInView.d.ts

@@ -8,10 +8,12 @@
  *
  * @template {BaseConstructor} T
  * @param {T} BaseClass
- * @param {IntersectionObserverInit} options
- * @return {T}
+ * @param {IntersectionObserverInit & { useOffsetSizes?: boolean }} options
+ * @returns {T}
  */
-export default function withScrolledInView<T extends typeof import("../Base").default>(BaseClass: T, options: IntersectionObserverInit): T;
+export default function withScrolledInView<T extends typeof import("../Base").default>(BaseClass: T, options?: IntersectionObserverInit & {
+    useOffsetSizes?: boolean;
+}): T;
 export type Base = import('../Base').default;
 export type BaseConstructor = import('../Base').BaseConstructor;
 export type BaseConfig = import('../Base').BaseConfig;

package/decorators/withScrolledInView.js

@@ -5,12 +5,12 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import withMountWhenInView from "./withMountWhenInView.js";
-import { damp, clamp, clamp01 } from "../utils/index.js";
-function withScrolledInView(BaseClass, options) {
+import { damp, clamp, clamp01, getOffsetSizes, isFunction } from "../utils/index.js";
+function withScrolledInView(BaseClass, options = {}) {
   var _a;
   return _a = class extends withMountWhenInView(BaseClass, options) {
-    constructor() {
-      super(...arguments);
+    constructor(element) {
+      super(element);
       __publicField(this, "__props", {
         start: {
           x: 0,
@@ -35,37 +35,72 @@ function withScrolledInView(BaseClass, options) {
       });
       __publicField(this, "dampFactor", 0.1);
       __publicField(this, "dampPrecision", 1e-3);
+      const delegate = {
+        handleEvent(event) {
+          delegate[event.type](event.detail[0]);
+        },
+        resized: () => {
+          this.__setProps();
+        },
+        scrolled: (props) => {
+          if (!this.$services.has("ticked") && props.changed.y || props.changed.x) {
+            this.$services.enable("ticked");
+          }
+        },
+        ticked: () => {
+          this.__props.current.x = clamp(window.pageXOffset, this.__props.start.x, this.__props.end.x);
+          this.__props.progress.x = clamp01((this.__props.current.x - this.__props.start.x) / (this.__props.end.x - this.__props.start.x));
+          this.__props.dampedProgress.x = damp(this.__props.progress.x, this.__props.dampedProgress.x, this.dampFactor, this.dampPrecision);
+          this.__props.current.y = clamp(window.pageYOffset, this.__props.start.y, this.__props.end.y);
+          this.__props.progress.y = clamp01((this.__props.current.y - this.__props.start.y) / (this.__props.end.y - this.__props.start.y));
+          this.__props.dampedProgress.y = damp(this.__props.progress.y, this.__props.dampedProgress.y, this.dampFactor, this.dampPrecision);
+          if (this.__props.dampedProgress.x === this.__props.progress.x && this.__props.dampedProgress.y === this.__props.progress.y) {
+            this.$services.disable("ticked");
+          }
+          this.__callMethod("scrolledInView", this.__props);
+        }
+      };
+      this.$on("before-mounted", () => {
+        this.$on("resized", delegate);
+        this.$on("scrolled", delegate);
+        this.$on("ticked", delegate);
+      });
+      this.$on("mounted", () => {
+        this.__setProps();
+      });
+      this.$on("destroyed", () => {
+        this.$off("resized", delegate);
+        this.$off("scrolled", delegate);
+        this.$off("ticked", delegate);
+      });
     }
     mounted() {
-      this.__setProps();
+      if (isFunction(super.mounted))
+        super.mounted();
     }
-    resized() {
-      this.__setProps();
+    resized(props) {
+      if (isFunction(super.resized))
+        super.resized(props);
     }
     scrolled(props) {
-      if (!this.$services.has("ticked") && props.changed.y || props.changed.x) {
-        this.$services.enable("ticked");
-      }
+      if (isFunction(super.scrolled))
+        super.scrolled(props);
+    }
+    ticked(props) {
+      if (isFunction(super.ticked))
+        super.ticked(props);
     }
-    ticked() {
-      this.__props.current.x = clamp(window.pageXOffset, this.__props.start.x, this.__props.end.x);
-      this.__props.progress.x = clamp01((this.__props.current.x - this.__props.start.x) / (this.__props.end.x - this.__props.start.x));
-      this.__props.dampedProgress.x = damp(this.__props.progress.x, this.__props.dampedProgress.x, this.dampFactor, this.dampPrecision);
-      this.__props.current.y = clamp(window.pageYOffset, this.__props.start.y, this.__props.end.y);
-      this.__props.progress.y = clamp01((this.__props.current.y - this.__props.start.y) / (this.__props.end.y - this.__props.start.y));
-      this.__props.dampedProgress.y = damp(this.__props.progress.y, this.__props.dampedProgress.y, this.dampFactor, this.dampPrecision);
-      if (this.__props.dampedProgress.x === this.__props.progress.x && this.__props.dampedProgress.y === this.__props.progress.y) {
-        this.$services.disable("ticked");
-      }
-      this.__callMethod("scrolledInView", this.__props);
+    destroyed() {
+      if (isFunction(super.destroyed))
+        super.destroyed();
     }
     __setProps() {
-      const sizes = this.$el.getBoundingClientRect();
-      const yEnd = sizes.top + window.pageYOffset + sizes.height;
+      const sizes = options.useOffsetSizes ? getOffsetSizes(this.$el) : this.$el.getBoundingClientRect();
+      const yEnd = sizes.y + window.pageYOffset + sizes.height;
       const yStart = yEnd - window.innerHeight - sizes.height;
       const yCurrent = clamp(window.pageYOffset, yStart, yEnd);
       const yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));
-      const xEnd = sizes.left + window.pageXOffset + sizes.width;
+      const xEnd = sizes.x + window.pageXOffset + sizes.width;
       const xStart = xEnd - window.innerWidth - sizes.width;
       const xCurrent = clamp(window.pageXOffset, xStart, xEnd);
       const xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));

package/helpers/createApp.d.ts

@@ -5,33 +5,10 @@
  * 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.
  *
- * @usage
- * ```js
- * // app.js
- * import Base, { createApp } from '@studiometa/js-toolkit';
- *
- * class App extends Base {
- *   static config = {
- *     name: 'App',
- *   }
- * }
- *
- * export default createApp(App, document.body);
- * ```
- * ```js
- * // other.js
- * import useApp from './app.js';
- *
- * const app = await useApp();
- * console.log(app.$options.name); // 'App'
- * ```
- *
  * @template {BaseConstructor} T
  * @param {T} App
- * @param {HTMLElement=} [rootElement]
- *
- * @return {() => Promise<InstanceType<T>>}
- *
+ * @param {HTMLElement} [rootElement]
+ * @returns {() => Promise<InstanceType<T>>}
  */
-export default function createApp<T extends typeof import("../Base/index.js").default>(App: T, rootElement?: HTMLElement | undefined): () => Promise<InstanceType<T>>;
+export default function createApp<T extends typeof import("../Base/index.js").default>(App: T, rootElement?: HTMLElement): () => Promise<InstanceType<T>>;
 export type BaseConstructor = import('../Base/index.js').BaseConstructor;

package/helpers/getInstanceFromElement.cjs

@@ -0,0 +1,32 @@
+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/helpers/getInstanceFromElement.js
+var getInstanceFromElement_exports = {};
+__export(getInstanceFromElement_exports, {
+  default: () => getInstanceFromElement
+});
+module.exports = __toCommonJS(getInstanceFromElement_exports);
+function getInstanceFromElement(element, Constructor) {
+  var _a;
+  if (!element.__base__) {
+    return null;
+  }
+  return (_a = element.__base__.get(Constructor)) != null ? _a : null;
+}
+if (module.exports.default) module.exports = module.exports.default;