@studiometa/js-toolkit 2.2.2 → 2.4.0

package/Base/index.cjs

@@ -36,10 +36,8 @@ var import_RefsManager = __toESM(require("./managers/RefsManager.cjs"), 1);
 var import_ServicesManager = __toESM(require("./managers/ServicesManager.cjs"), 1);
 var import_EventsManager = __toESM(require("./managers/EventsManager.cjs"), 1);
 var import_OptionsManager = __toESM(require("./managers/OptionsManager.cjs"), 1);
+var import_utils2 = require("../utils/index.cjs");
 var id = 0;
-var isDev = typeof __DEV__ !== "undefined" && __DEV__;
-function noop() {
-}
 function createAndTestManagers(instance) {
   [
     {
@@ -69,7 +67,7 @@ function createAndTestManagers(instance) {
     }
   ].forEach(({ prop, constructorName, constructor }) => {
     instance[prop] = new instance.__managers[constructorName](instance);
-    if (!(instance[prop] instanceof constructor)) {
+    if (import_utils2.isDev && !(instance[prop] instanceof constructor)) {
       throw new Error(`The \`$managers.${constructorName}\` must extend the \`${constructorName}\` class.`);
     }
   });
@@ -88,11 +86,17 @@ var Base = class extends EventTarget {
     __publicField(this, "__children");
     __publicField(this, "__events");
     if (!element) {
-      throw new Error("The root element must be defined.");
+      if (import_utils2.isDev) {
+        throw new Error("The root element must be defined.");
+      }
+      return;
     }
     const { __config } = this;
     if (__config.name === "Base") {
-      throw new Error("The `config.name` property is required.");
+      if (import_utils2.isDev) {
+        throw new Error("The `config.name` property is required.");
+      }
+      return;
     }
     this.$id = `${__config.name}-${id}`;
     id += 1;
@@ -102,7 +106,7 @@ var Base = class extends EventTarget {
     }
     this.$el.__base__.set(this.__ctor, this);
     createAndTestManagers(this);
-    if (isDev) {
+    if (import_utils2.isDev) {
       this.__debug("constructor", this);
     }
   }
@@ -152,10 +156,10 @@ var Base = class extends EventTarget {
     return this.__children;
   }
   get $log() {
-    return this.__options.log ? window.console.log.bind(window, `[${this.__config.name}]`) : noop;
+    return this.__options.log ? window.console.log.bind(window, `[${this.__config.name}]`) : import_utils2.noop;
   }
   get __debug() {
-    return isDev && this.__options.debug ? window.console.log.bind(window, `[debug] [${this.$id}]`) : noop;
+    return import_utils2.isDev && this.__options.debug ? window.console.log.bind(window, `[debug] [${this.$id}]`) : import_utils2.noop;
   }
   get __managers() {
     return {
@@ -167,14 +171,14 @@ var Base = class extends EventTarget {
     };
   }
   __callMethod(method, ...args) {
-    if (isDev) {
+    if (import_utils2.isDev) {
       this.__debug("callMethod", method, ...args);
     }
     this.$emit(method, ...args);
-    if (typeof this[method] !== "function") {
+    if (!(0, import_utils2.isFunction)(this[method])) {
       return null;
     }
-    if (isDev) {
+    if (import_utils2.isDev) {
       this.__debug(method, this, ...args);
     }
     return this[method].call(this, ...args);
@@ -189,7 +193,7 @@ var Base = class extends EventTarget {
     }
     this.$emit("before-mounted");
     this.$isMounted = true;
-    if (isDev) {
+    if (import_utils2.isDev) {
       this.__debug("$mount");
     }
     this.$children.registerAll();
@@ -201,7 +205,7 @@ var Base = class extends EventTarget {
     return this;
   }
   $update() {
-    if (isDev) {
+    if (import_utils2.isDev) {
       this.__debug("$update");
     }
     this.$refs.unregisterAll();
@@ -218,7 +222,7 @@ var Base = class extends EventTarget {
       return this;
     }
     this.$isMounted = false;
-    if (isDev) {
+    if (import_utils2.isDev) {
       this.__debug("$destroy");
     }
     this.__events.unbindRootElement();
@@ -229,21 +233,16 @@ var Base = class extends EventTarget {
     return this;
   }
   $terminate() {
-    if (isDev) {
+    if (import_utils2.isDev) {
       this.__debug("$terminate");
     }
     this.$destroy();
     this.__callMethod("terminated");
     this.$el.__base__.set(this.__ctor, "terminated");
   }
-  __testEventIsDefined(event) {
-    if (!(Array.isArray(this.__config.emits) && this.__config.emits.includes(event))) {
-      console.warn(`[${this.__config.name}]`, `The "${event}" event is missing from the configuration.`);
-    }
-  }
   __addEmits(event) {
     const ctor = this.__ctor;
-    if (Array.isArray(ctor.config.emits)) {
+    if ((0, import_utils2.isArray)(ctor.config.emits)) {
       ctor.config.emits.push(event);
     } else {
       ctor.config.emits = [event];
@@ -258,44 +257,37 @@ var Base = class extends EventTarget {
     return this.constructor;
   }
   $on(event, listener, options) {
-    if (isDev) {
+    if (import_utils2.isDev) {
       this.__debug("$on", event, listener, options);
     }
-    if (isDev) {
-      this.__testEventIsDefined(event);
-    }
     let set = this.__eventHandlers.get(event);
     if (!set) {
       set = /* @__PURE__ */ new Set();
       this.__eventHandlers.set(event, set);
     }
     set.add(listener);
-    this.addEventListener(event, listener, options);
+    const target = (0, import_utils.getEventTarget)(this, event, this.__config);
+    target.addEventListener(event, listener, options);
     return () => {
       this.$off(event, listener, options);
     };
   }
   $off(event, listener, options) {
-    if (isDev) {
+    if (import_utils2.isDev) {
       this.__debug("$off", event, listener);
     }
-    if (isDev) {
-      this.__testEventIsDefined(event);
-    }
     this.__eventHandlers.get(event).delete(listener);
-    this.removeEventListener(event, listener, options);
+    const target = (0, import_utils.getEventTarget)(this, event, this.__config);
+    target.removeEventListener(event, listener, options);
   }
   $emit(event, ...args) {
-    if (isDev) {
+    if (import_utils2.isDev) {
       this.__debug("$emit", event, args);
     }
-    if (isDev) {
-      this.__testEventIsDefined(event);
-    }
     this.dispatchEvent(new CustomEvent(event, { detail: args }));
   }
   static $factory(nameOrSelector) {
-    if (!nameOrSelector) {
+    if (import_utils2.isDev && !nameOrSelector) {
       throw new Error("The $factory method requires a component\u2019s name or selector to be specified.");
     }
     return (0, import_utils.getComponentElements)(nameOrSelector).map((el) => new this(el).$mount());

package/Base/index.d.ts

@@ -191,14 +191,6 @@ export default class Base extends EventTarget {
      * @returns {void}
      */
     $terminate(): void;
-    /**
-     * Test if the given event is configured and warn otherwise.
-     *
-     * @private
-     * @param   {string} event The event name.
-     * @returns {void}
-     */
-    private __testEventIsDefined;
     /**
      * Add an emitted event.
      *

package/Base/index.js

@@ -4,16 +4,14 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { getComponentElements } from "./utils.js";
+import { getComponentElements, getEventTarget } from "./utils.js";
 import ChildrenManager from "./managers/ChildrenManager.js";
 import RefsManager from "./managers/RefsManager.js";
 import ServicesManager from "./managers/ServicesManager.js";
 import EventsManager from "./managers/EventsManager.js";
 import OptionsManager from "./managers/OptionsManager.js";
+import { noop, isDev, isFunction, isArray } from "../utils/index.js";
 let id = 0;
-const isDev = typeof __DEV__ !== "undefined" && __DEV__;
-function noop() {
-}
 function createAndTestManagers(instance) {
   [
     {
@@ -43,7 +41,7 @@ function createAndTestManagers(instance) {
     }
   ].forEach(({ prop, constructorName, constructor }) => {
     instance[prop] = new instance.__managers[constructorName](instance);
-    if (!(instance[prop] instanceof constructor)) {
+    if (isDev && !(instance[prop] instanceof constructor)) {
       throw new Error(`The \`$managers.${constructorName}\` must extend the \`${constructorName}\` class.`);
     }
   });
@@ -62,11 +60,17 @@ class Base extends EventTarget {
     __publicField(this, "__children");
     __publicField(this, "__events");
     if (!element) {
-      throw new Error("The root element must be defined.");
+      if (isDev) {
+        throw new Error("The root element must be defined.");
+      }
+      return;
     }
     const { __config } = this;
     if (__config.name === "Base") {
-      throw new Error("The `config.name` property is required.");
+      if (isDev) {
+        throw new Error("The `config.name` property is required.");
+      }
+      return;
     }
     this.$id = `${__config.name}-${id}`;
     id += 1;
@@ -145,7 +149,7 @@ class Base extends EventTarget {
       this.__debug("callMethod", method, ...args);
     }
     this.$emit(method, ...args);
-    if (typeof this[method] !== "function") {
+    if (!isFunction(this[method])) {
       return null;
     }
     if (isDev) {
@@ -210,14 +214,9 @@ class Base extends EventTarget {
     this.__callMethod("terminated");
     this.$el.__base__.set(this.__ctor, "terminated");
   }
-  __testEventIsDefined(event) {
-    if (!(Array.isArray(this.__config.emits) && this.__config.emits.includes(event))) {
-      console.warn(`[${this.__config.name}]`, `The "${event}" event is missing from the configuration.`);
-    }
-  }
   __addEmits(event) {
     const ctor = this.__ctor;
-    if (Array.isArray(ctor.config.emits)) {
+    if (isArray(ctor.config.emits)) {
       ctor.config.emits.push(event);
     } else {
       ctor.config.emits = [event];
@@ -235,16 +234,14 @@ class Base extends EventTarget {
     if (isDev) {
       this.__debug("$on", event, listener, options);
     }
-    if (isDev) {
-      this.__testEventIsDefined(event);
-    }
     let set = this.__eventHandlers.get(event);
     if (!set) {
       set = /* @__PURE__ */ new Set();
       this.__eventHandlers.set(event, set);
     }
     set.add(listener);
-    this.addEventListener(event, listener, options);
+    const target = getEventTarget(this, event, this.__config);
+    target.addEventListener(event, listener, options);
     return () => {
       this.$off(event, listener, options);
     };
@@ -253,23 +250,18 @@ class Base extends EventTarget {
     if (isDev) {
       this.__debug("$off", event, listener);
     }
-    if (isDev) {
-      this.__testEventIsDefined(event);
-    }
     this.__eventHandlers.get(event).delete(listener);
-    this.removeEventListener(event, listener, options);
+    const target = getEventTarget(this, event, this.__config);
+    target.removeEventListener(event, listener, options);
   }
   $emit(event, ...args) {
     if (isDev) {
       this.__debug("$emit", event, args);
     }
-    if (isDev) {
-      this.__testEventIsDefined(event);
-    }
     this.dispatchEvent(new CustomEvent(event, { detail: args }));
   }
   static $factory(nameOrSelector) {
-    if (!nameOrSelector) {
+    if (isDev && !nameOrSelector) {
       throw new Error("The $factory method requires a component\u2019s name or selector to be specified.");
     }
     return getComponentElements(nameOrSelector).map((el) => new this(el).$mount());

package/Base/managers/EventsManager.cjs

@@ -33,6 +33,8 @@ __export(EventsManager_exports, {
 });
 module.exports = __toCommonJS(EventsManager_exports);
 var import_getAllProperties = __toESM(require("../../utils/object/getAllProperties.cjs"), 1);
+var import_utils = require("../../utils/index.cjs");
+var import_utils2 = require("../utils.cjs");
 var import_AbstractManager = __toESM(require("./AbstractManager.cjs"), 1);
 var import_RefsManager = require("./RefsManager.cjs");
 var names = /* @__PURE__ */ new Map();
@@ -56,12 +58,12 @@ function getRegex(regex) {
   }
   return regexes.get(regex);
 }
-function __getEventNameByMethod(that, method, name = "") {
+function getEventNameByMethod(method, name = "") {
   const regex = getRegex(`^on${normalizeName(name)}([A-Z].*)$`);
   const [, event] = method.match(regex);
   return normalizeEventName(event);
 }
-function __getEventMethodsByName(that, name = "") {
+function getEventMethodsByName(that, name = "") {
   const regex = getRegex(`^on${normalizeName(name)}[A-Z].*$`);
   const key = regex.toString();
   let methods = that.__methodsCache.get(key);
@@ -71,29 +73,28 @@ function __getEventMethodsByName(that, name = "") {
   }
   return methods;
 }
-function __manageRef(that, name, elements, mode = "add") {
+function manageRef(that, name, elements, mode = "add") {
   const action = `${mode}EventListener`;
-  const methods = __getEventMethodsByName(that, name);
+  const methods = getEventMethodsByName(that, name);
   methods.forEach((method) => {
-    const event = __getEventNameByMethod(that, method, name);
+    const event = getEventNameByMethod(method, name);
     elements.forEach((element) => element[action](event, that.__refsHandler));
   });
 }
-function __manageChild(that, name, instance, mode = "add") {
+function manageChild(that, name, instance, mode = "add") {
   const action = mode === "add" ? "$on" : "$off";
-  const methods = __getEventMethodsByName(that, name);
+  const methods = getEventMethodsByName(that, name);
   methods.forEach((method) => {
-    const event = __getEventNameByMethod(that, method, name);
+    const event = getEventNameByMethod(method, name);
     instance[action](event, that.__childrenHandler);
   });
 }
-function __manageRootElement(that, mode = "add") {
+function manageRootElement(that, mode = "add") {
   const modeMethod = `${mode}EventListener`;
-  const methods = __getEventMethodsByName(that);
-  const { emits = [] } = that.__base.__config;
-  methods.forEach((method) => {
-    const event = __getEventNameByMethod(that, method);
-    const target = emits.includes(event) ? that.__base : that.__element;
+  const methods = getEventMethodsByName(that);
+  const { __base: base, __config: config } = that;
+  methods.map((method) => getEventNameByMethod(method)).filter((event) => (0, import_utils2.eventIsDefinedInConfig)(event, config) || (0, import_utils2.eventIsNative)(event, base.$el)).forEach((event) => {
+    const target = (0, import_utils2.getEventTarget)(base, event, config);
     target[modeMethod](event, that.__rootElementHandler);
   });
 }
@@ -105,7 +106,11 @@ var EventsManager = class extends import_AbstractManager.default {
       handleEvent: (event) => {
         const normalizedEventName = normalizeName(event.type);
         const method = `on${normalizedEventName}`;
-        this.__base[method](event);
+        if (event instanceof CustomEvent && (0, import_utils.isArray)(event.detail) && event.detail.length) {
+          this.__base[method](...event.detail, event);
+        } else {
+          this.__base[method](event);
+        }
       }
     });
     __publicField(this, "__refsHandler", {
@@ -116,7 +121,7 @@ var EventsManager = class extends import_AbstractManager.default {
         const normalizedEventName = normalizeName(event.type);
         const method = `on${normalizedRefName}${normalizedEventName}`;
         let index = 0;
-        if (Array.isArray(this.__base.$refs[refName])) {
+        if ((0, import_utils.isArray)(this.__base.$refs[refName])) {
           index = this.__base.$refs[refName].indexOf(ref);
         }
         this.__base[method](event, index);
@@ -124,22 +129,16 @@ var EventsManager = class extends import_AbstractManager.default {
     });
     __publicField(this, "__childrenHandler", {
       handleEvent: (event) => {
-        const child = event.currentTarget;
-        let childName;
-        let index = 0;
         const childrenManager = this.__base.$children;
-        childrenManager.registeredNames.find((name) => {
-          if (childrenManager[name].includes(child)) {
-            childName = name;
-            index = childrenManager[name].indexOf(child);
-            return true;
-          }
-          return false;
-        });
-        const normalizedRefName = normalizeName(childName);
+        const { name, child: resolvedChild } = childrenManager.registeredNames.map((childName) => ({
+          name: childName,
+          child: childrenManager[childName].find((instance) => instance === event.currentTarget || instance.$el === event.currentTarget)
+        })).find(({ child }) => child);
+        const normalizedChildName = normalizeName(name);
         const normalizedEventName = normalizeName(event.type);
-        const method = `on${normalizedRefName}${normalizedEventName}`;
-        const args = Array.isArray(event.detail) ? event.detail : [];
+        const method = `on${normalizedChildName}${normalizedEventName}`;
+        const index = childrenManager[name].indexOf(resolvedChild);
+        const args = (0, import_utils.isArray)(event.detail) ? event.detail : [];
         this.__base[method](...args, index, event);
       }
     });
@@ -151,22 +150,22 @@ var EventsManager = class extends import_AbstractManager.default {
     ]);
   }
   bindRef(name, elements) {
-    __manageRef(this, name, elements);
+    manageRef(this, name, elements);
   }
   unbindRef(name, elements) {
-    __manageRef(this, name, elements, "remove");
+    manageRef(this, name, elements, "remove");
   }
   bindChild(name, instance) {
-    __manageChild(this, name, instance);
+    manageChild(this, name, instance);
   }
   unbindChild(name, instance) {
-    __manageChild(this, name, instance, "remove");
+    manageChild(this, name, instance, "remove");
   }
   bindRootElement() {
-    __manageRootElement(this);
+    manageRootElement(this);
   }
   unbindRootElement() {
-    __manageRootElement(this, "remove");
+    manageRootElement(this, "remove");
   }
 };
 if (module.exports.default) module.exports = module.exports.default;

package/Base/managers/EventsManager.js

@@ -5,6 +5,8 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import getAllProperties from "../../utils/object/getAllProperties.js";
+import { isArray } from "../../utils/index.js";
+import { getEventTarget, eventIsNative, eventIsDefinedInConfig } from "../utils.js";
 import AbstractManager from "./AbstractManager.js";
 import { normalizeRefName } from "./RefsManager.js";
 const names = /* @__PURE__ */ new Map();
@@ -28,12 +30,12 @@ function getRegex(regex) {
   }
   return regexes.get(regex);
 }
-function __getEventNameByMethod(that, method, name = "") {
+function getEventNameByMethod(method, name = "") {
   const regex = getRegex(`^on${normalizeName(name)}([A-Z].*)$`);
   const [, event] = method.match(regex);
   return normalizeEventName(event);
 }
-function __getEventMethodsByName(that, name = "") {
+function getEventMethodsByName(that, name = "") {
   const regex = getRegex(`^on${normalizeName(name)}[A-Z].*$`);
   const key = regex.toString();
   let methods = that.__methodsCache.get(key);
@@ -43,29 +45,28 @@ function __getEventMethodsByName(that, name = "") {
   }
   return methods;
 }
-function __manageRef(that, name, elements, mode = "add") {
+function manageRef(that, name, elements, mode = "add") {
   const action = `${mode}EventListener`;
-  const methods = __getEventMethodsByName(that, name);
+  const methods = getEventMethodsByName(that, name);
   methods.forEach((method) => {
-    const event = __getEventNameByMethod(that, method, name);
+    const event = getEventNameByMethod(method, name);
     elements.forEach((element) => element[action](event, that.__refsHandler));
   });
 }
-function __manageChild(that, name, instance, mode = "add") {
+function manageChild(that, name, instance, mode = "add") {
   const action = mode === "add" ? "$on" : "$off";
-  const methods = __getEventMethodsByName(that, name);
+  const methods = getEventMethodsByName(that, name);
   methods.forEach((method) => {
-    const event = __getEventNameByMethod(that, method, name);
+    const event = getEventNameByMethod(method, name);
     instance[action](event, that.__childrenHandler);
   });
 }
-function __manageRootElement(that, mode = "add") {
+function manageRootElement(that, mode = "add") {
   const modeMethod = `${mode}EventListener`;
-  const methods = __getEventMethodsByName(that);
-  const { emits = [] } = that.__base.__config;
-  methods.forEach((method) => {
-    const event = __getEventNameByMethod(that, method);
-    const target = emits.includes(event) ? that.__base : that.__element;
+  const methods = getEventMethodsByName(that);
+  const { __base: base, __config: config } = that;
+  methods.map((method) => getEventNameByMethod(method)).filter((event) => eventIsDefinedInConfig(event, config) || eventIsNative(event, base.$el)).forEach((event) => {
+    const target = getEventTarget(base, event, config);
     target[modeMethod](event, that.__rootElementHandler);
   });
 }
@@ -77,7 +78,11 @@ class EventsManager extends AbstractManager {
       handleEvent: (event) => {
         const normalizedEventName = normalizeName(event.type);
         const method = `on${normalizedEventName}`;
-        this.__base[method](event);
+        if (event instanceof CustomEvent && isArray(event.detail) && event.detail.length) {
+          this.__base[method](...event.detail, event);
+        } else {
+          this.__base[method](event);
+        }
       }
     });
     __publicField(this, "__refsHandler", {
@@ -88,7 +93,7 @@ class EventsManager extends AbstractManager {
         const normalizedEventName = normalizeName(event.type);
         const method = `on${normalizedRefName}${normalizedEventName}`;
         let index = 0;
-        if (Array.isArray(this.__base.$refs[refName])) {
+        if (isArray(this.__base.$refs[refName])) {
           index = this.__base.$refs[refName].indexOf(ref);
         }
         this.__base[method](event, index);
@@ -96,22 +101,16 @@ class EventsManager extends AbstractManager {
     });
     __publicField(this, "__childrenHandler", {
       handleEvent: (event) => {
-        const child = event.currentTarget;
-        let childName;
-        let index = 0;
         const childrenManager = this.__base.$children;
-        childrenManager.registeredNames.find((name) => {
-          if (childrenManager[name].includes(child)) {
-            childName = name;
-            index = childrenManager[name].indexOf(child);
-            return true;
-          }
-          return false;
-        });
-        const normalizedRefName = normalizeName(childName);
+        const { name, child: resolvedChild } = childrenManager.registeredNames.map((childName) => ({
+          name: childName,
+          child: childrenManager[childName].find((instance) => instance === event.currentTarget || instance.$el === event.currentTarget)
+        })).find(({ child }) => child);
+        const normalizedChildName = normalizeName(name);
         const normalizedEventName = normalizeName(event.type);
-        const method = `on${normalizedRefName}${normalizedEventName}`;
-        const args = Array.isArray(event.detail) ? event.detail : [];
+        const method = `on${normalizedChildName}${normalizedEventName}`;
+        const index = childrenManager[name].indexOf(resolvedChild);
+        const args = isArray(event.detail) ? event.detail : [];
         this.__base[method](...args, index, event);
       }
     });
@@ -123,22 +122,22 @@ class EventsManager extends AbstractManager {
     ]);
   }
   bindRef(name, elements) {
-    __manageRef(this, name, elements);
+    manageRef(this, name, elements);
   }
   unbindRef(name, elements) {
-    __manageRef(this, name, elements, "remove");
+    manageRef(this, name, elements, "remove");
   }
   bindChild(name, instance) {
-    __manageChild(this, name, instance);
+    manageChild(this, name, instance);
   }
   unbindChild(name, instance) {
-    __manageChild(this, name, instance, "remove");
+    manageChild(this, name, instance, "remove");
   }
   bindRootElement() {
-    __manageRootElement(this);
+    manageRootElement(this);
   }
   unbindRootElement() {
-    __manageRootElement(this, "remove");
+    manageRootElement(this, "remove");
   }
 }
 export {