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

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/withScrolledInView.d.ts

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

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;

package/helpers/getInstanceFromElement.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @typedef {import('../Base/index.js').BaseConstructor} BaseConstructor
+ */
+/**
+ * Get a component instance from a DOM element.
+ * @template {BaseConstructor} T
+ * @param    {HTMLElement & { __base__?: WeakMap<T, InstanceType<T>> }} element
+ * @param    {T} Constructor
+ * @returns  {null|InstanceType<T>}
+ */
+export default function getInstanceFromElement<T extends typeof import("../Base/index.js").default>(element: HTMLElement & {
+    __base__?: WeakMap<T, InstanceType<T>>;
+}, Constructor: T): InstanceType<T>;
+export type BaseConstructor = import('../Base/index.js').BaseConstructor;

package/helpers/getInstanceFromElement.js

@@ -0,0 +1,10 @@
+function getInstanceFromElement(element, Constructor) {
+  var _a;
+  if (!element.__base__) {
+    return null;
+  }
+  return (_a = element.__base__.get(Constructor)) != null ? _a : null;
+}
+export {
+  getInstanceFromElement as default
+};

package/helpers/importOnInteraction.d.ts

@@ -6,20 +6,18 @@
  * Import a component on an interaction.
  *
  * @template {BaseConstructor} T
- *
  * @param {() => Promise<T|{default:T}>} fn
  *   The import function.
  * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement
  *   The name or selector for the component.
  * @param {string|string[]} events
  *   The events to listen to to trigger the import.
- * @param {Base=} [parent]
+ * @param {Base} [parent]
  *   The parent component.
- *
- * @return {Promise<T>}
+ * @returns {Promise<T>}
  */
 export default function importOnInteraction<T extends typeof import("../Base/index.js").default>(fn: () => Promise<T | {
     default: T;
-}>, nameOrSelectorOrElement: string | HTMLElement | HTMLElement[], events: string | string[], parent?: Base | undefined): Promise<T>;
+}>, nameOrSelectorOrElement: string | HTMLElement | HTMLElement[], events: string | string[], parent?: Base): Promise<T>;
 export type BaseConstructor = import('../Base/index.js').BaseConstructor;
 export type Base = import('../Base/index.js').default;

package/helpers/importWhenIdle.d.ts

@@ -6,17 +6,15 @@
  * Import a component when user is idle.
  *
  * @template {BaseConstructor} T
- *
  * @param {() => Promise<T|{default:T}>} fn
  *   The import function.
- * @param {ImportWhenIdleOptions=} [options]
+ * @param {ImportWhenIdleOptions} [options]
  *   The time to wait before triggering the callback if never idle.
- *
- * @return {Promise<T>}
+ * @returns {Promise<T>}
  */
 export default function importWhenIdle<T extends typeof import("../Base/index.js").default>(fn: () => Promise<T | {
     default: T;
-}>, options?: ImportWhenIdleOptions | undefined): Promise<T>;
+}>, options?: ImportWhenIdleOptions): Promise<T>;
 export type BaseConstructor = import('../Base/index.js').BaseConstructor;
 export type ImportWhenIdleOptions = {
     timeout?: number;

package/helpers/importWhenVisible.d.ts

@@ -6,20 +6,18 @@
  * Import a component when it is visible.
  *
  * @template {BaseConstructor} T
- *
  * @param {() => Promise<T|{default:T}>} fn
  *   The import function.
  * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement
  *   The name or selector for the component.
- * @param {Base=} [parent]
+ * @param {Base} [parent]
  *   The parent component.
- * @param {IntersectionObserverInit=} [observerOptions]
+ * @param {IntersectionObserverInit} [observerOptions]
  *   Options for the `IntersectionObserver` instance.
- *
- * @return {Promise<T>}
+ * @returns {Promise<T>}
  */
 export default function importWhenVisible<T extends typeof import("../Base/index.js").default>(fn: () => Promise<T | {
     default: T;
-}>, nameOrSelectorOrElement: string | HTMLElement | HTMLElement[], parent?: Base | undefined, observerOptions?: IntersectionObserverInit | undefined): Promise<T>;
+}>, nameOrSelectorOrElement: string | HTMLElement | HTMLElement[], parent?: Base, observerOptions?: IntersectionObserverInit): Promise<T>;
 export type Base = import('../Base/index.js').default;
 export type BaseConstructor = import('../Base/index.js').BaseConstructor;

package/helpers/index.cjs

@@ -23,12 +23,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var helpers_exports = {};
 __export(helpers_exports, {
   createApp: () => import_createApp.default,
+  getInstanceFromElement: () => import_getInstanceFromElement.default,
   importOnInteraction: () => import_importOnInteraction.default,
   importWhenIdle: () => import_importWhenIdle.default,
   importWhenVisible: () => import_importWhenVisible.default
 });
 module.exports = __toCommonJS(helpers_exports);
 var import_createApp = __toESM(require("./createApp.cjs"), 1);
+var import_getInstanceFromElement = __toESM(require("./getInstanceFromElement.cjs"), 1);
 var import_importOnInteraction = __toESM(require("./importOnInteraction.cjs"), 1);
 var import_importWhenIdle = __toESM(require("./importWhenIdle.cjs"), 1);
 var import_importWhenVisible = __toESM(require("./importWhenVisible.cjs"), 1);

package/helpers/index.d.ts

@@ -1,4 +1,5 @@
 export { default as createApp } from "./createApp.js";
+export { default as getInstanceFromElement } from "./getInstanceFromElement.js";
 export { default as importOnInteraction } from "./importOnInteraction.js";
 export { default as importWhenIdle } from "./importWhenIdle.js";
 export { default as importWhenVisible } from "./importWhenVisible.js";

package/helpers/index.js

@@ -1,10 +1,12 @@
 import { default as default2 } from "./createApp.js";
-import { default as default3 } from "./importOnInteraction.js";
-import { default as default4 } from "./importWhenIdle.js";
-import { default as default5 } from "./importWhenVisible.js";
+import { default as default3 } from "./getInstanceFromElement.js";
+import { default as default4 } from "./importOnInteraction.js";
+import { default as default5 } from "./importWhenIdle.js";
+import { default as default6 } from "./importWhenVisible.js";
 export {
   default2 as createApp,
-  default3 as importOnInteraction,
-  default4 as importWhenIdle,
-  default5 as importWhenVisible
+  default3 as getInstanceFromElement,
+  default4 as importOnInteraction,
+  default5 as importWhenIdle,
+  default6 as importWhenVisible
 };

package/helpers/utils.d.ts

@@ -3,9 +3,8 @@
  *
  * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement
  *   The original selector or element, or list of elements.
- * @param {HTMLElement=} [context]
+ * @param {HTMLElement} [context]
  *   The optional context to use to query for elements.
- *
- * @return {HTMLElement[]} A normalized list of elements.
+ * @returns {HTMLElement[]} A normalized list of elements.
  */
-export function getTargetElements(nameOrSelectorOrElement: string | HTMLElement | HTMLElement[], context?: HTMLElement | undefined): HTMLElement[];
+export function getTargetElements(nameOrSelectorOrElement: string | HTMLElement | HTMLElement[], context?: HTMLElement): HTMLElement[];

package/package.json

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

package/services/Service.d.ts

@@ -13,43 +13,43 @@ export default class Service {
      * This method MUST be implemented by the service extending this class.
      *
      * @param {...any} args
-     * @return {this['props']}
+     * @returns {this['props']}
      */
     updateProps(...args: any[]): unknown;
     /**
      * Method to initialize the service behaviors.
      * This method MUST be implemented by the service extending this class.
      *
-     * @return {void}
+     * @returns {void}
      */
     init(): void;
     /**
      * Method to kill the service behaviors.
      * This method MUST be implemented by the service extending this class.
      *
-     * @return {void}
+     * @returns {void}
      */
     kill(): void;
     /**
      * Add a callback.
      *
-     * @param  {String}   key      The callback's identifier
+     * @param  {string}   key      The callback's identifier
      * @param  {Function} callback The callback function
-     * @return {void}
+     * @returns {void}
      */
     add(key: string, callback: Function): void;
     /**
      * Test if a callback with the given key has already been added.
      *
-     * @param  {String}  key The identifier to test
-     * @return {Boolean}     Whether or not the identifier already exists
+     * @param  {string}  key The identifier to test
+     * @returns {boolean}     Whether or not the identifier already exists
      */
     has(key: string): boolean;
     /**
      * Get the callback tied to the given key.
      *
      * @param  {string}   key The identifier to get
-     * @return {Function}     The callback function
+     * @returns {Function}     The callback function
      */
     get(key: string): Function;
     /**
@@ -62,7 +62,7 @@ export default class Service {
      * Trigger each added callback with the given arguments.
      *
      * @param  {...any}   args All the arguments to apply to the callback
-     * @return {this}      The current instance
+     * @returns {this}      The current instance
      */
     trigger(...args: any[]): this;
 }

package/services/drag.cjs

@@ -80,7 +80,6 @@ var Drag = class extends import_Service.default {
     this.options = { ...this.options, ...options };
     this.pointerHandler = this.pointerHandler.bind(this);
     this.rafHandler = this.rafHandler.bind(this);
-    return this;
   }
   init() {
     const options = { passive: true };

package/services/drag.d.ts

@@ -12,7 +12,7 @@
  *
  * @param {HTMLElement} target
  * @param {DragServiceOptions} options
- * @return {DragService}
+ * @returns {DragService}
  */
 export default function useDrag(target: HTMLElement, options: DragServiceOptions): DragService;
 export type DragService = import('./index').ServiceInterface<DragServiceProps>;
@@ -73,6 +73,6 @@ export type DragServiceProps = {
     };
 };
 export type DragServiceOptions = {
-    dampFactor?: number | undefined;
-    dragTreshold?: number | undefined;
+    dampFactor?: number;
+    dragTreshold?: number;
 };

package/services/drag.js

@@ -54,7 +54,6 @@ class Drag extends Service {
     this.options = { ...this.options, ...options };
     this.pointerHandler = this.pointerHandler.bind(this);
     this.rafHandler = this.rafHandler.bind(this);
-    return this;
   }
   init() {
     const options = { passive: true };

package/services/key.d.ts

@@ -9,7 +9,7 @@
  * props();
  * ```
  *
- * @return {KeyService}
+ * @returns {KeyService}
  */
 export default function useKey(): KeyService;
 export type KeyService = import('./index').ServiceInterface<KeyServiceProps>;

package/services/load.d.ts

@@ -9,7 +9,7 @@
  * props();
  * ```
  *
- * @return {LoadService}
+ * @returns {LoadService}
  */
 export default function useLoad(): LoadService;
 export type LoadService = import('./index').ServiceInterface<LoadServiceProps>;

package/services/pointer.d.ts

@@ -10,7 +10,7 @@
  * ```
  *
  * @todo Add element as parameter to get the pointer position relatively from.
- * @return {PointerService}
+ * @returns {PointerService}
  */
 export default function usePointer(): PointerService;
 export type PointerService = import('./index').ServiceInterface<PointerServiceProps>;

package/services/raf.d.ts

@@ -9,7 +9,7 @@
  * props();
  * ```
  *
- * @return {RafService}
+ * @returns {RafService}
  */
 export default function useRaf(): RafService;
 export type RafService = import('./index').ServiceInterface<RafServiceProps>;

package/services/resize.cjs

@@ -78,10 +78,10 @@ var Resize = class extends import_Service.default {
     return document.querySelector("[data-breakpoint]");
   }
   get breakpoint() {
-    return window.getComputedStyle(this.breakpointElement, "::before").getPropertyValue("content").replace(/"/g, "");
+    return window.getComputedStyle(this.breakpointElement, "::before").getPropertyValue("content").replaceAll('"', "");
   }
   get breakpoints() {
-    const breakpoints = window.getComputedStyle(this.breakpointElement, "::after").getPropertyValue("content").replace(/"/g, "");
+    const breakpoints = window.getComputedStyle(this.breakpointElement, "::after").getPropertyValue("content").replaceAll('"', "");
     return breakpoints.split(",");
   }
 };

package/services/resize.d.ts

@@ -8,7 +8,7 @@
  * remove(key);
  * props();
  * ```
- * @return {ResizeService}
+ * @returns {ResizeService}
  */
 export default function useResize(): ResizeService;
 export type ResizeService = import('./index').ServiceInterface<ResizeServiceProps>;

package/services/resize.js

@@ -52,10 +52,10 @@ class Resize extends Service {
     return document.querySelector("[data-breakpoint]");
   }
   get breakpoint() {
-    return window.getComputedStyle(this.breakpointElement, "::before").getPropertyValue("content").replace(/"/g, "");
+    return window.getComputedStyle(this.breakpointElement, "::before").getPropertyValue("content").replaceAll('"', "");
   }
   get breakpoints() {
-    const breakpoints = window.getComputedStyle(this.breakpointElement, "::after").getPropertyValue("content").replace(/"/g, "");
+    const breakpoints = window.getComputedStyle(this.breakpointElement, "::after").getPropertyValue("content").replaceAll('"', "");
     return breakpoints.split(",");
   }
 }

package/services/scroll.d.ts

@@ -9,7 +9,7 @@
  * props();
  * ```
  *
- * @return {ScrollService}
+ * @returns {ScrollService}
  */
 export default function useScroll(): ScrollService;
 export type ScrollService = import('./index').ServiceInterface<ScrollServiceProps>;

package/utils/collide/boundingRectToCircle.d.ts

@@ -1,15 +1,15 @@
 /**
  * @typedef {Object} Circle
- * @property {Number} x Circle's x position
- * @property {Number} y Circle's y position
- * @property {Number} radius Circle's radius
+ * @property {number} x Circle's x position
+ * @property {number} y Circle's y position
+ * @property {number} radius Circle's radius
  */
 /**
  * Convert clientRect to a formatted circle object
  *
  * @param {Partial<DOMRect>} domRect DOMRect of a square DOMElement
- * @param {Boolean} force Force usage of non-square DOMElements
- * @return {Circle} Circle object that can be used in collides functions
+ * @param {boolean} force Force usage of non-square DOMElements
+ * @returns {Circle} Circle object that can be used in collides functions
  */
 export default function boundingRectToCircle({ x, y, width, height }: Partial<DOMRect>, force?: boolean): Circle;
 export type Circle = {

package/utils/collide/collideCircleCircle.d.ts

@@ -1,8 +1,8 @@
 /**
  * @typedef {Object} Circle
- * @property {Number} x Circle's x position
- * @property {Number} y Circle's y position
- * @property {Number} radius Circle's radius
+ * @property {number} x Circle's x position
+ * @property {number} y Circle's y position
+ * @property {number} radius Circle's radius
  */
 /**
  * Test if a circle collides with another.
@@ -10,7 +10,7 @@
  *
  * @param {Circle} circle1 Circle 1
  * @param {Circle} circle2 Circle 2
- * @return {boolean} Are the sides of one circle touching the other ?
+ * @returns {boolean} Are the sides of one circle touching the other ?
  */
 export default function collideCircleCircle(circle1: Circle, circle2: Circle): boolean;
 export type Circle = {

package/utils/collide/collideCircleRect.d.ts

@@ -1,15 +1,15 @@
 /**
  * @typedef {Object} Rect
- * @property {Number} x Rectangle's x position
- * @property {Number} y Rectangle's y position
- * @property {Number} width Rectangle's width
- * @property {Number} height Rectangle's height
+ * @property {number} x Rectangle's x position
+ * @property {number} y Rectangle's y position
+ * @property {number} width Rectangle's width
+ * @property {number} height Rectangle's height
  */
 /**
  * @typedef {Object} Circle
- * @property {Number} x Circle's x position
- * @property {Number} y Circle's y position
- * @property {Number} radius Circle's radius
+ * @property {number} x Circle's x position
+ * @property {number} y Circle's y position
+ * @property {number} radius Circle's radius
  */
 /**
  * Test if a circle collides with a rectangle.
@@ -17,7 +17,7 @@
  *
  * @param {Circle} circle Circle
  * @param {Rect} rect Rectangle
- * @return {boolean} Are the sides of the circle touching the rectangle ?
+ * @returns {boolean} Are the sides of the circle touching the rectangle ?
  */
 export default function collideCircleRect(circle: Circle, rect: Rect): boolean;
 export type Rect = {

package/utils/collide/collidePointCircle.d.ts

@@ -1,13 +1,13 @@
 /**
  * @typedef {Object} Point
- * @property {Number} x Point's x position
- * @property {Number} y Point's y position
+ * @property {number} x Point's x position
+ * @property {number} y Point's y position
  */
 /**
  * @typedef {Object} Circle
- * @property {Number} x Circle's x position
- * @property {Number} y Circle's y position
- * @property {Number} radius Circle's radius
+ * @property {number} x Circle's x position
+ * @property {number} y Circle's y position
+ * @property {number} radius Circle's radius
  */
 /**
  * Test if a point is inside a circle.
@@ -15,7 +15,7 @@
  *
  * @param {Point} point Point
  * @param {Circle} circle Circle
- * @return {boolean} Is the point inside the circle's bounds ?
+ * @returns {boolean} Is the point inside the circle's bounds ?
  */
 export default function collidePointCircle(point: Point, circle: Circle): boolean;
 export type Point = {

package/utils/collide/collidePointRect.d.ts

@@ -1,14 +1,14 @@
 /**
  * @typedef {Object} Point
- * @property {Number} x Point's x position
- * @property {Number} y Point's y position
+ * @property {number} x Point's x position
+ * @property {number} y Point's y position
  */
 /**
  * @typedef {Object} Rect
- * @property {Number} x Rectangle's x position
- * @property {Number} y Rectangle's y position
- * @property {Number} width Rectangle's width
- * @property {Number} height Rectangle's height
+ * @property {number} x Rectangle's x position
+ * @property {number} y Rectangle's y position
+ * @property {number} width Rectangle's width
+ * @property {number} height Rectangle's height
  */
 /**
  * Test if a point collides with a rectangle.
@@ -16,7 +16,7 @@
  *
  * @param {Point} point Point
  * @param {Rect} rect Rectangle
- * @return {boolean} Is the point inside the rectangle's bounds ?
+ * @returns {boolean} Is the point inside the rectangle's bounds ?
  */
 export default function collidePointRect(point: Point, rect: Rect): boolean;
 export type Point = {