@studiometa/js-toolkit 2.3.0 → 2.4.2

package/Base/index.cjs

@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   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 __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);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -68,16 +71,50 @@ function createAndTestManagers(instance) {
   ].forEach(({ prop, constructorName, constructor }) => {
     instance[prop] = new instance.__managers[constructorName](instance);
     if (import_utils2.isDev && !(instance[prop] instanceof constructor)) {
-      throw new Error(`The \`$managers.${constructorName}\` must extend the \`${constructorName}\` class.`);
+      throw new Error(
+        `The \`$managers.${constructorName}\` must extend the \`${constructorName}\` class.`
+      );
     }
   });
 }
 var Base = class extends EventTarget {
-  $parent = null;
-  $id;
-  $el;
-  $isMounted = false;
-  __eventHandlers = /* @__PURE__ */ new Map();
+  constructor(element) {
+    super();
+    __publicField(this, "$parent", null);
+    __publicField(this, "$id");
+    __publicField(this, "$el");
+    __publicField(this, "$isMounted", false);
+    __publicField(this, "__eventHandlers", /* @__PURE__ */ new Map());
+    __publicField(this, "__services");
+    __publicField(this, "__refs");
+    __publicField(this, "__options");
+    __publicField(this, "__children");
+    __publicField(this, "__events");
+    if (!element) {
+      if (import_utils2.isDev) {
+        throw new Error("The root element must be defined.");
+      }
+      return;
+    }
+    const { __config } = this;
+    if (__config.name === "Base") {
+      if (import_utils2.isDev) {
+        throw new Error("The `config.name` property is required.");
+      }
+      return;
+    }
+    this.$id = `${__config.name}-${id}`;
+    id += 1;
+    this.$el = element;
+    if (!this.$el.__base__) {
+      this.$el.__base__ = /* @__PURE__ */ new WeakMap();
+    }
+    this.$el.__base__.set(this.__ctor, this);
+    createAndTestManagers(this);
+    if (import_utils2.isDev) {
+      this.__debug("constructor", this);
+    }
+  }
   get $root() {
     if (!this.$parent) {
       return this;
@@ -93,6 +130,7 @@ var Base = class extends EventTarget {
     return root;
   }
   get __config() {
+    var _a, _b, _c;
     let proto = Object.getPrototypeOf(this);
     let { config } = proto.constructor;
     while (proto.constructor.config && proto.constructor.$isBase) {
@@ -105,28 +143,23 @@ var Base = class extends EventTarget {
       }
       proto = Object.getPrototypeOf(proto);
     }
-    config.options = config.options ?? {};
-    config.refs = config.refs ?? [];
-    config.components = config.components ?? {};
+    config.options = (_a = config.options) != null ? _a : {};
+    config.refs = (_b = config.refs) != null ? _b : [];
+    config.components = (_c = config.components) != null ? _c : {};
     return config;
   }
-  __services;
   get $services() {
     return this.__services;
   }
-  __refs;
   get $refs() {
     return this.__refs;
   }
-  __options;
   get $options() {
     return this.__options;
   }
-  __children;
   get $children() {
     return this.__children;
   }
-  __events;
   get $log() {
     return this.__options.log ? window.console.log.bind(window, `[${this.__config.name}]`) : import_utils2.noop;
   }
@@ -159,33 +192,6 @@ var Base = class extends EventTarget {
     const eventHandlers = this.__eventHandlers.get(event);
     return eventHandlers && eventHandlers.size > 0;
   }
-  constructor(element) {
-    super();
-    if (!element) {
-      if (import_utils2.isDev) {
-        throw new Error("The root element must be defined.");
-      }
-      return;
-    }
-    const { __config } = this;
-    if (__config.name === "Base") {
-      if (import_utils2.isDev) {
-        throw new Error("The `config.name` property is required.");
-      }
-      return;
-    }
-    this.$id = `${__config.name}-${id}`;
-    id += 1;
-    this.$el = element;
-    if (!this.$el.__base__) {
-      this.$el.__base__ = /* @__PURE__ */ new WeakMap();
-    }
-    this.$el.__base__.set(this.__ctor, this);
-    createAndTestManagers(this);
-    if (import_utils2.isDev) {
-      this.__debug("constructor", this);
-    }
-  }
   $mount() {
     if (this.$isMounted) {
       return this;
@@ -287,7 +293,9 @@ var Base = class extends EventTarget {
   }
   static $factory(nameOrSelector) {
     if (import_utils2.isDev && !nameOrSelector) {
-      throw new Error("The $factory method requires a component\u2019s name or selector to be specified.");
+      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

@@ -28,8 +28,13 @@
  */
 /**
  * Base class.
+ * @template {{ $options: BaseOptions, $refs: BaseRefs, $children: BaseChildren }} BaseInterface
  */
-export default class Base extends EventTarget {
+export default class Base<BaseInterface extends {
+    $options: BaseOptions;
+    $refs: BaseRefs;
+    $children: BaseChildren;
+}> extends EventTarget {
     /**
      * This is a Base instance.
      * @type {boolean}
@@ -46,7 +51,7 @@ export default class Base extends EventTarget {
      * @param  {string}      nameOrSelector The selector on which to mount each instance.
      * @returns {Array<Base>}                A list of the created instance.
      */
-    static $factory(nameOrSelector: string): Array<Base>;
+    static $factory(nameOrSelector: string): Array<Base<any>>;
     /**
      * Class constructor where all the magic takes place.
      *
@@ -57,7 +62,7 @@ export default class Base extends EventTarget {
      * The instance parent.
      * @type {Base}
      */
-    $parent: Base;
+    $parent: Base<any>;
     /**
      * The instance id.
      * @type {string}
@@ -68,7 +73,7 @@ export default class Base extends EventTarget {
      * @type {HTMLElement & { __base__?: WeakMap<BaseConstructor, Base | 'terminated'> }}
      */
     $el: HTMLElement & {
-        __base__?: WeakMap<BaseConstructor, Base | 'terminated'>;
+        __base__?: WeakMap<BaseConstructor, Base<any> | 'terminated'>;
     };
     /**
      * The state of the component.
@@ -86,7 +91,7 @@ export default class Base extends EventTarget {
      * Get the root instance of the app.
      * @returns {Base}
      */
-    get $root(): Base;
+    get $root(): Base<any>;
     /**
      * Merge configuration with the parents' configurations.
      *
@@ -104,32 +109,34 @@ export default class Base extends EventTarget {
      */
     get $services(): ServicesManager;
     /**
-     * @type {RefsManager}
+     * @type {RefsManager & { [key in keyof BaseInterface['$refs']]: BaseInterface['$refs'][key] }}
      * @private
      */
     private __refs;
     /**
-     * @returns {RefsManager}
+     * @returns {RefsManager & { [key in keyof BaseInterface['$refs']]: BaseInterface['$refs'][key] }}
      */
-    get $refs(): RefsManager;
+    get $refs(): RefsManager & (BaseInterface["$refs"] extends infer T ? { [key in keyof T]: BaseInterface["$refs"][key]; } : never);
     /**
-     * @type {BaseOptions}
+     * @type {BaseOptions & { [key in keyof BaseInterface['$options']]: BaseInterface['$options'][key] }}
      * @private
      */
     private __options;
     /**
-     * @returns {BaseOptions}
+     * @returns {BaseOptions & { [key in keyof BaseInterface['$options']]: BaseInterface['$options'][key] }}
      */
-    get $options(): BaseOptions;
+    get $options(): OptionsManager & {
+        [name: string]: any;
+    } & (BaseInterface["$options"] extends infer T_1 ? { [key_1 in keyof T_1]: BaseInterface["$options"][key_1]; } : never);
     /**
-     * @type {ChildrenManager}
+     * @type {ChildrenManager & { [key in keyof BaseInterface['$children']]: Array<BaseInterface['$children'][key]> }}
      * @private
      */
     private __children;
     /**
-     * @returns {ChildrenManager}
+     * @returns {ChildrenManager & { [key in keyof BaseInterface['$children']]: Array<BaseInterface['$children'][key]> }}
      */
-    get $children(): ChildrenManager;
+    get $children(): ChildrenManager & (BaseInterface["$children"] extends infer T_2 ? { [key_2 in keyof T_2]: BaseInterface["$children"][key_2][]; } : never);
     /**
      * @type {EventsManager}
      * @private
@@ -259,9 +266,7 @@ export type BaseOptions = OptionsManager & {
 export type BaseRefs = {
     [name: string]: HTMLElement | HTMLElement[];
 };
-export type BaseChildren = {
-    [nameOrSelector: string]: Base[] | Promise<Base>[];
-};
+export type BaseChildren = BaseChildren;
 export type BaseConfigComponents = {
     [nameOrSelector: string]: typeof Base | BaseAsyncConstructor;
 };
@@ -285,6 +290,6 @@ export type Managers = {
 };
 import ServicesManager from "./managers/ServicesManager.js";
 import RefsManager from "./managers/RefsManager.js";
-import ChildrenManager from "./managers/ChildrenManager.js";
 import OptionsManager from "./managers/OptionsManager.js";
+import ChildrenManager from "./managers/ChildrenManager.js";
 import EventsManager from "./managers/EventsManager.js";

package/Base/index.js

@@ -1,3 +1,9 @@
+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;
+};
 import { getComponentElements, getEventTarget } from "./utils.js";
 import ChildrenManager from "./managers/ChildrenManager.js";
 import RefsManager from "./managers/RefsManager.js";
@@ -36,17 +42,50 @@ function createAndTestManagers(instance) {
   ].forEach(({ prop, constructorName, constructor }) => {
     instance[prop] = new instance.__managers[constructorName](instance);
     if (isDev && !(instance[prop] instanceof constructor)) {
-      throw new Error(`The \`$managers.${constructorName}\` must extend the \`${constructorName}\` class.`);
+      throw new Error(
+        `The \`$managers.${constructorName}\` must extend the \`${constructorName}\` class.`
+      );
     }
   });
 }
 class Base extends EventTarget {
-  static $isBase = true;
-  $parent = null;
-  $id;
-  $el;
-  $isMounted = false;
-  __eventHandlers = /* @__PURE__ */ new Map();
+  constructor(element) {
+    super();
+    __publicField(this, "$parent", null);
+    __publicField(this, "$id");
+    __publicField(this, "$el");
+    __publicField(this, "$isMounted", false);
+    __publicField(this, "__eventHandlers", /* @__PURE__ */ new Map());
+    __publicField(this, "__services");
+    __publicField(this, "__refs");
+    __publicField(this, "__options");
+    __publicField(this, "__children");
+    __publicField(this, "__events");
+    if (!element) {
+      if (isDev) {
+        throw new Error("The root element must be defined.");
+      }
+      return;
+    }
+    const { __config } = this;
+    if (__config.name === "Base") {
+      if (isDev) {
+        throw new Error("The `config.name` property is required.");
+      }
+      return;
+    }
+    this.$id = `${__config.name}-${id}`;
+    id += 1;
+    this.$el = element;
+    if (!this.$el.__base__) {
+      this.$el.__base__ = /* @__PURE__ */ new WeakMap();
+    }
+    this.$el.__base__.set(this.__ctor, this);
+    createAndTestManagers(this);
+    if (isDev) {
+      this.__debug("constructor", this);
+    }
+  }
   get $root() {
     if (!this.$parent) {
       return this;
@@ -62,6 +101,7 @@ class Base extends EventTarget {
     return root;
   }
   get __config() {
+    var _a, _b, _c;
     let proto = Object.getPrototypeOf(this);
     let { config } = proto.constructor;
     while (proto.constructor.config && proto.constructor.$isBase) {
@@ -74,44 +114,23 @@ class Base extends EventTarget {
       }
       proto = Object.getPrototypeOf(proto);
     }
-    config.options = config.options ?? {};
-    config.refs = config.refs ?? [];
-    config.components = config.components ?? {};
+    config.options = (_a = config.options) != null ? _a : {};
+    config.refs = (_b = config.refs) != null ? _b : [];
+    config.components = (_c = config.components) != null ? _c : {};
     return config;
   }
-  static config = {
-    name: "Base",
-    emits: [
-      "before-mounted",
-      "mounted",
-      "updated",
-      "destroyed",
-      "terminated",
-      "ticked",
-      "scrolled",
-      "resized",
-      "moved",
-      "loaded",
-      "keyed"
-    ]
-  };
-  __services;
   get $services() {
     return this.__services;
   }
-  __refs;
   get $refs() {
     return this.__refs;
   }
-  __options;
   get $options() {
     return this.__options;
   }
-  __children;
   get $children() {
     return this.__children;
   }
-  __events;
   get $log() {
     return this.__options.log ? window.console.log.bind(window, `[${this.__config.name}]`) : noop;
   }
@@ -144,33 +163,6 @@ class Base extends EventTarget {
     const eventHandlers = this.__eventHandlers.get(event);
     return eventHandlers && eventHandlers.size > 0;
   }
-  constructor(element) {
-    super();
-    if (!element) {
-      if (isDev) {
-        throw new Error("The root element must be defined.");
-      }
-      return;
-    }
-    const { __config } = this;
-    if (__config.name === "Base") {
-      if (isDev) {
-        throw new Error("The `config.name` property is required.");
-      }
-      return;
-    }
-    this.$id = `${__config.name}-${id}`;
-    id += 1;
-    this.$el = element;
-    if (!this.$el.__base__) {
-      this.$el.__base__ = /* @__PURE__ */ new WeakMap();
-    }
-    this.$el.__base__.set(this.__ctor, this);
-    createAndTestManagers(this);
-    if (isDev) {
-      this.__debug("constructor", this);
-    }
-  }
   $mount() {
     if (this.$isMounted) {
       return this;
@@ -272,11 +264,30 @@ class Base extends EventTarget {
   }
   static $factory(nameOrSelector) {
     if (isDev && !nameOrSelector) {
-      throw new Error("The $factory method requires a component\u2019s name or selector to be specified.");
+      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());
   }
 }
+__publicField(Base, "$isBase", true);
+__publicField(Base, "config", {
+  name: "Base",
+  emits: [
+    "before-mounted",
+    "mounted",
+    "updated",
+    "destroyed",
+    "terminated",
+    "ticked",
+    "scrolled",
+    "resized",
+    "moved",
+    "loaded",
+    "keyed"
+  ]
+});
 export {
   Base as default
 };

package/Base/managers/AbstractManager.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/Base/managers/AbstractManager.js
 var AbstractManager_exports = {};
@@ -23,7 +28,11 @@ __export(AbstractManager_exports, {
 });
 module.exports = __toCommonJS(AbstractManager_exports);
 var AbstractManager = class {
-  __base;
+  constructor(base) {
+    __publicField(this, "__base");
+    this.__base = base;
+    this.__hideProperties(["__base"]);
+  }
   get __element() {
     return this.__base.$el;
   }
@@ -33,19 +42,20 @@ var AbstractManager = class {
   get __eventsManager() {
     return this.__base.__events;
   }
-  constructor(base) {
-    this.__base = base;
-    this.__hideProperties(["__base"]);
-  }
   __hideProperties(properties) {
-    Object.defineProperties(this, Object.fromEntries(properties.map((property) => [
-      property,
-      {
-        enumerable: false,
-        writable: false,
-        value: this[property]
-      }
-    ])));
+    Object.defineProperties(
+      this,
+      Object.fromEntries(
+        properties.map((property) => [
+          property,
+          {
+            enumerable: false,
+            writable: false,
+            value: this[property]
+          }
+        ])
+      )
+    );
   }
 };
 if (module.exports.default) module.exports = module.exports.default;

package/Base/managers/AbstractManager.d.ts

@@ -12,11 +12,11 @@ export default class AbstractManager {
      *
      * @param   {Base} base
      */
-    constructor(base: Base);
+    constructor(base: import("../index.js").default<any>);
     /**
      * @type {Base}
      */
-    __base: Base;
+    __base: import("../index.js").default<any>;
     /**
      * Get the base instance root element.
      * @returns {HTMLElement}
@@ -39,6 +39,6 @@ export default class AbstractManager {
      */
     __hideProperties(properties: string[]): void;
 }
-export type Base = import('../index.js').default;
+export type Base = import("../index.js").default<any>;
 export type BaseConfig = import('../index.js').BaseConfig;
 export type EventsManager = import('./EventsManager.js').default;

package/Base/managers/AbstractManager.js

@@ -1,5 +1,15 @@
+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;
+};
 class AbstractManager {
-  __base;
+  constructor(base) {
+    __publicField(this, "__base");
+    this.__base = base;
+    this.__hideProperties(["__base"]);
+  }
   get __element() {
     return this.__base.$el;
   }
@@ -9,19 +19,20 @@ class AbstractManager {
   get __eventsManager() {
     return this.__base.__events;
   }
-  constructor(base) {
-    this.__base = base;
-    this.__hideProperties(["__base"]);
-  }
   __hideProperties(properties) {
-    Object.defineProperties(this, Object.fromEntries(properties.map((property) => [
-      property,
-      {
-        enumerable: false,
-        writable: false,
-        value: this[property]
-      }
-    ])));
+    Object.defineProperties(
+      this,
+      Object.fromEntries(
+        properties.map((property) => [
+          property,
+          {
+            enumerable: false,
+            writable: false,
+            value: this[property]
+          }
+        ])
+      )
+    );
   }
 }
 export {

package/Base/managers/ChildrenManager.cjs

@@ -4,6 +4,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 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 });
@@ -16,8 +17,15 @@ var __copyProps = (to, from, except, desc) => {
   }
   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 __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);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 
 // packages/js-toolkit/Base/managers/ChildrenManager.js
 var ChildrenManager_exports = {};
@@ -28,7 +36,9 @@ module.exports = __toCommonJS(ChildrenManager_exports);
 var import_AbstractManager = __toESM(require("./AbstractManager.cjs"), 1);
 var import_utils = require("../utils.cjs");
 function __getChild(that, el, ComponentClass, name) {
-  const asyncComponentPromise = that.__asyncComponentPromises.get(ComponentClass);
+  const asyncComponentPromise = that.__asyncComponentPromises.get(
+    ComponentClass
+  );
   if ("$isBase" in ComponentClass || asyncComponentPromise && asyncComponentPromise.status === "resolved") {
     let ctor = ComponentClass;
     if (asyncComponentPromise) {
@@ -50,7 +60,8 @@ function __getChild(that, el, ComponentClass, name) {
     });
   }
   return promise.then((module2) => {
-    const ctor = module2.default ?? module2;
+    var _a;
+    const ctor = (_a = module2.default) != null ? _a : module2;
     that.__asyncComponentPromises.set(ComponentClass, {
       promise,
       status: "resolved",
@@ -96,12 +107,17 @@ function __triggerHookForAll(that, hook) {
   });
 }
 var ChildrenManager = class extends import_AbstractManager.default {
-  __asyncComponentPromises = /* @__PURE__ */ new WeakMap();
+  constructor() {
+    super(...arguments);
+    __publicField(this, "__asyncComponentPromises", /* @__PURE__ */ new WeakMap());
+  }
   get registeredNames() {
     return Object.keys(this).filter((key) => !key.startsWith("__"));
   }
   registerAll() {
-    Object.entries(this.__config.components).forEach(([name, component]) => __register(this, name, component));
+    Object.entries(this.__config.components).forEach(
+      ([name, component]) => __register(this, name, component)
+    );
   }
   mountAll() {
     __triggerHookForAll(this, "$mount");

package/Base/managers/ChildrenManager.d.ts

@@ -34,7 +34,7 @@ export default class ChildrenManager extends AbstractManager {
      */
     destroyAll(): void;
 }
-export type Base = import('../index.js').default;
+export type Base = import("../index.js").default<any>;
 export type BaseConstructor = import('../index.js').BaseConstructor;
 export type BaseAsyncConstructor = import('../index.js').BaseAsyncConstructor;
 export type BaseConfigComponents = import('../index.js').BaseConfigComponents;