@studiometa/js-toolkit 2.0.0 → 2.2.0-alpha.0

package/Base/managers/ChildrenManager.d.ts

@@ -1,53 +1,18 @@
-/**
- * @typedef {import('../index.js').default} Base
- * @typedef {import('../index.js').BaseConstructor} BaseConstructor
- * @typedef {import('../index.js').BaseAsyncConstructor} BaseAsyncConstructor
- * @typedef {import('../index.js').BaseConfigComponents} BaseConfigComponents
- * @typedef {import('./EventsManager.js').default} EventsManager
- */
 /**
  * Children manager.
  */
-export default class ChildrenManager {
-    /**
-     * Class constructor.
-     * @param {Base} base
-     *   The component's instance.
-     * @param {HTMLElement} element
-     *   The component's root element
-     * @param {BaseConfigComponents} components
-     *   The children components' classes
-     * @param {EventsManager} eventsManager
-     */
-    constructor(base: Base, element: HTMLElement, components: BaseConfigComponents, eventsManager: EventsManager);
-    /**
-     * @type {Base}
-     * @private
-     */
-    private __base;
-    /**
-     * @type {HTMLElement}
-     * @private
-     */
-    private __element;
-    /**
-     * @type {BaseConfigComponents}
-     * @private
-     */
-    private __components;
-    /**
-     * @type {EventsManager}
-     * @private
-     */
-    private __eventsManager;
+export default class ChildrenManager extends AbstractManager {
     /**
      * Store async component promises to avoid calling them multiple times and
      * waiting for them when they are already resolved.
      *
-     * @private
      * @type {WeakMap<BaseAsyncConstructor, { promise: ReturnType<BaseAsyncConstructor>, status: 'pending'|'resolved', ctor?: BaseConstructor }>}
      */
-    private __asyncComponentPromises;
+    __asyncComponentPromises: WeakMap<BaseAsyncConstructor, {
+        promise: ReturnType<BaseAsyncConstructor>;
+        status: 'pending' | 'resolved';
+        ctor?: BaseConstructor;
+    }>;
     /**
      * @returns {string[]}
      */
@@ -56,30 +21,6 @@ export default class ChildrenManager {
      * Register instances of all children components.
      */
     registerAll(): void;
-    /**
-     * Register instance of a child component.
-     *
-     * @param {string} name
-     *   The name of the child component.
-     * @param {BaseConstructor|BaseAsyncConstructor} component
-     *   A Base class or a Promise for async components.
-     * @private
-     */
-    private __register;
-    /**
-     * Get a child component's instance.
-     *
-     * @param {HTMLElement & { __base__?: WeakMap<BaseConstructor, Base> }} el
-     *   The root element of the child component.
-     * @param {BaseConstructor|BaseAsyncConstructor} ComponentClass
-     *   A Base class or a Promise for async components.
-     * @param {string} name
-     *   The name of the child component.
-     * @returns {Base|Promise|'terminated'}
-     *   A Base instance or a Promise resolving to a Base instance.
-     * @private
-     */
-    private __getChild;
     /**
      * Mount all child component instances.
      */
@@ -92,25 +33,9 @@ export default class ChildrenManager {
      * Destroy all child component instances.
      */
     destroyAll(): void;
-    /**
-     * Execute the given hook for all children instances.
-     *
-     * @param {'$mount'|'$update'|'$destroy'} hook The hook to execute.
-     * @private
-     */
-    private __triggerHookForAll;
-    /**
-     * Execute the given hook for the given instance.
-     *
-     * @param {'$mount'|'$update'|'$destroy'} hook The hook to trigger.
-     * @param {Base} instance The target instance.
-     * @param {string} name The name of the component.
-     * @private
-     */
-    private __triggerHook;
 }
 export type Base = import('../index.js').default;
 export type BaseConstructor = import('../index.js').BaseConstructor;
 export type BaseAsyncConstructor = import('../index.js').BaseAsyncConstructor;
 export type BaseConfigComponents = import('../index.js').BaseConfigComponents;
-export type EventsManager = import('./EventsManager.js').default;
+import AbstractManager from "./AbstractManager.js";

package/Base/managers/ChildrenManager.js

@@ -4,120 +4,96 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
+import AbstractManager from "./AbstractManager.js";
 import { getComponentElements } from "../utils.js";
-class ChildrenManager {
-  constructor(base, element, components, eventsManager) {
-    __publicField(this, "__base");
-    __publicField(this, "__element");
-    __publicField(this, "__components");
-    __publicField(this, "__eventsManager");
-    __publicField(this, "__asyncComponentPromises", /* @__PURE__ */ new WeakMap());
-    Object.defineProperties(this, {
-      __base: {
-        enumerable: false,
-        writable: false,
-        value: base
-      },
-      __element: {
-        enumerable: false,
-        writable: false,
-        value: element
-      },
-      __components: {
-        enumerable: false,
-        writable: false,
-        value: components
-      },
-      __eventsManager: {
-        enumerable: false,
-        writable: false,
-        value: eventsManager
-      }
+function __getChild(that, el, ComponentClass, name) {
+  const asyncComponentPromise = that.__asyncComponentPromises.get(ComponentClass);
+  if ("$isBase" in ComponentClass || asyncComponentPromise && asyncComponentPromise.status === "resolved") {
+    let ctor = ComponentClass;
+    if (asyncComponentPromise) {
+      ctor = asyncComponentPromise.ctor;
+    }
+    if (el.__base__ && el.__base__.has(ctor)) {
+      return el.__base__.get(ctor);
+    }
+    const child = new ctor(el);
+    Object.defineProperty(child, "$parent", { get: () => that.__base });
+    return child;
+  }
+  const promise = asyncComponentPromise ? asyncComponentPromise.promise : ComponentClass(that.__base);
+  if (!asyncComponentPromise) {
+    that.__asyncComponentPromises.set(ComponentClass, {
+      promise,
+      status: "pending",
+      ctor: void 0
     });
   }
-  get registeredNames() {
-    return Object.keys(this).filter((key) => !key.startsWith("__"));
+  return promise.then((module) => {
+    var _a;
+    const ctor = (_a = module.default) != null ? _a : module;
+    that.__asyncComponentPromises.set(ComponentClass, {
+      promise,
+      status: "resolved",
+      ctor
+    });
+    return __getChild(that, el, ctor, name);
+  });
+}
+function __register(that, name, component) {
+  Object.defineProperty(that, name, {
+    enumerable: true,
+    configurable: true,
+    get: () => {
+      const elements = getComponentElements(name, that.__element);
+      if (elements.length === 0) {
+        return [];
+      }
+      return elements.map((element) => __getChild(that, element, component, name)).filter((instance) => instance !== "terminated");
+    }
+  });
+}
+function __triggerHook(that, hook, instance, name) {
+  if (hook === "$update" && !instance.$isMounted) {
+    hook = "$mount";
   }
-  registerAll() {
-    Object.entries(this.__components).forEach(([name, component]) => this.__register(name, component));
+  if (hook === "$update" || hook === "$destroy") {
+    that.__eventsManager.unbindChild(name, instance);
   }
-  __register(name, component) {
-    Object.defineProperty(this, name, {
-      enumerable: true,
-      configurable: true,
-      get: () => {
-        const elements = getComponentElements(name, this.__element);
-        if (elements.length === 0) {
-          return [];
-        }
-        return elements.map((element) => this.__getChild(element, component, name)).filter((instance) => instance !== "terminated");
-      }
-    });
+  if (hook === "$update" || hook === "$mount") {
+    that.__eventsManager.bindChild(name, instance);
   }
-  __getChild(el, ComponentClass, name) {
-    const asyncComponentPromise = this.__asyncComponentPromises.get(ComponentClass);
-    if ("$isBase" in ComponentClass || asyncComponentPromise && asyncComponentPromise.status === "resolved") {
-      let ctor = ComponentClass;
-      if (asyncComponentPromise) {
-        ctor = asyncComponentPromise.ctor;
-      }
-      if (el.__base__ && el.__base__.has(ctor)) {
-        return el.__base__.get(ctor);
+  instance[hook]();
+}
+function __triggerHookForAll(that, hook) {
+  that.registeredNames.forEach((name) => {
+    that[name].forEach((instance) => {
+      if (instance instanceof Promise) {
+        instance.then((resolvedInstance) => __triggerHook(that, hook, resolvedInstance, name));
+      } else {
+        __triggerHook(that, hook, instance, name);
       }
-      const child = new ctor(el);
-      Object.defineProperty(child, "$parent", { get: () => this.__base });
-      return child;
-    }
-    const promise = asyncComponentPromise ? asyncComponentPromise.promise : ComponentClass(this.__base);
-    if (!asyncComponentPromise) {
-      this.__asyncComponentPromises.set(ComponentClass, {
-        promise,
-        status: "pending",
-        ctor: void 0
-      });
-    }
-    return promise.then((module) => {
-      var _a;
-      const ctor = (_a = module.default) != null ? _a : module;
-      this.__asyncComponentPromises.set(ComponentClass, {
-        promise,
-        status: "resolved",
-        ctor
-      });
-      return this.__getChild(el, ctor, name);
     });
+  });
+}
+class ChildrenManager extends AbstractManager {
+  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));
   }
   mountAll() {
-    this.__triggerHookForAll("$mount");
+    __triggerHookForAll(this, "$mount");
   }
   updateAll() {
-    this.__triggerHookForAll("$update");
+    __triggerHookForAll(this, "$update");
   }
   destroyAll() {
-    this.__triggerHookForAll("$destroy");
-  }
-  __triggerHookForAll(hook) {
-    this.registeredNames.forEach((name) => {
-      this[name].forEach((instance) => {
-        if (instance instanceof Promise) {
-          instance.then((resolvedInstance) => this.__triggerHook(hook, resolvedInstance, name));
-        } else {
-          this.__triggerHook(hook, instance, name);
-        }
-      });
-    });
-  }
-  __triggerHook(hook, instance, name) {
-    if (hook === "$update" && !instance.$isMounted) {
-      hook = "$mount";
-    }
-    if (hook === "$update" || hook === "$destroy") {
-      this.__eventsManager.unbindChild(name, instance);
-    }
-    if (hook === "$update" || hook === "$mount") {
-      this.__eventsManager.bindChild(name, instance);
-    }
-    instance[hook]();
+    __triggerHookForAll(this, "$destroy");
   }
 }
 export {

package/Base/managers/EventsManager.cjs

@@ -27,19 +27,70 @@ var __publicField = (obj, key, value) => {
 // packages/js-toolkit/Base/managers/EventsManager.js
 var EventsManager_exports = {};
 __export(EventsManager_exports, {
-  default: () => EventsManager
+  default: () => EventsManager,
+  normalizeEventName: () => normalizeEventName,
+  normalizeName: () => normalizeName
 });
 module.exports = __toCommonJS(EventsManager_exports);
 var import_getAllProperties = __toESM(require("../../utils/object/getAllProperties.cjs"), 1);
-var import_RefsManager = __toESM(require("./RefsManager.cjs"), 1);
-var EventsManager = class {
-  constructor(rootElement, base) {
-    __publicField(this, "__rootElement");
-    __publicField(this, "__base");
+var import_AbstractManager = __toESM(require("./AbstractManager.cjs"), 1);
+var import_RefsManager = require("./RefsManager.cjs");
+function normalizeName(name) {
+  return name.replace(/[A-Z]([A-Z].*)/g, (c) => c.toLowerCase()).replace(/[^a-zA-Z\d\s:]/g, " ").replace(/(^\w|\s+\w)/g, (c) => c.trim().toUpperCase()).trim();
+}
+function normalizeEventName(name) {
+  return name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`).replace(/^-/, "");
+}
+function __getEventNameByMethod(that, method, name = "") {
+  const normalizedName = normalizeName(name);
+  const regex = new RegExp(`^on${normalizedName}([A-Z].*)$`);
+  const [, event] = method.match(regex);
+  return normalizeEventName(event);
+}
+function __getEventMethodsByName(that, name = "") {
+  const normalizedName = normalizeName(name);
+  const regex = new RegExp(`^on${normalizedName}[A-Z].*$`);
+  const key = regex.toString();
+  let methods = that.__methodsCache.get(key);
+  if (!methods) {
+    methods = Array.from((0, import_getAllProperties.default)(that.__base, [], (method) => regex.test(method)).reduce((set, [method]) => set.add(method), /* @__PURE__ */ new Set()));
+    that.__methodsCache.set(key, methods);
+  }
+  return methods;
+}
+function __manageRef(that, name, elements, mode = "add") {
+  const action = `${mode}EventListener`;
+  const methods = __getEventMethodsByName(that, name);
+  methods.forEach((method) => {
+    const event = __getEventNameByMethod(that, method, name);
+    elements.forEach((element) => element[action](event, that.__refsHandler));
+  });
+}
+function __manageChild(that, name, instance, mode = "add") {
+  const action = mode === "add" ? "$on" : "$off";
+  const methods = __getEventMethodsByName(that, name);
+  methods.forEach((method) => {
+    const event = __getEventNameByMethod(that, method, name);
+    instance[action](event, that.__childrenHandler);
+  });
+}
+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;
+    target[modeMethod](event, that.__rootElementHandler);
+  });
+}
+var EventsManager = class extends import_AbstractManager.default {
+  constructor(base) {
+    super(base);
     __publicField(this, "__methodsCache", /* @__PURE__ */ new Map());
     __publicField(this, "__rootElementHandler", {
       handleEvent: (event) => {
-        const normalizedEventName = EventsManager.normalizeName(event.type);
+        const normalizedEventName = normalizeName(event.type);
         const method = `on${normalizedEventName}`;
         this.__base[method](event);
       }
@@ -47,9 +98,9 @@ var EventsManager = class {
     __publicField(this, "__refsHandler", {
       handleEvent: (event) => {
         const ref = event.currentTarget;
-        const refName = import_RefsManager.default.normalizeRefName(ref.dataset.ref);
-        const normalizedRefName = EventsManager.normalizeName(refName);
-        const normalizedEventName = EventsManager.normalizeName(event.type);
+        const refName = (0, import_RefsManager.normalizeRefName)(ref.dataset.ref);
+        const normalizedRefName = normalizeName(refName);
+        const normalizedEventName = normalizeName(event.type);
         const method = `on${normalizedRefName}${normalizedEventName}`;
         let index = 0;
         if (Array.isArray(this.__base.$refs[refName])) {
@@ -72,112 +123,37 @@ var EventsManager = class {
           }
           return false;
         });
-        const normalizedRefName = EventsManager.normalizeName(childName);
-        const normalizedEventName = EventsManager.normalizeName(event.type);
+        const normalizedRefName = normalizeName(childName);
+        const normalizedEventName = normalizeName(event.type);
         const method = `on${normalizedRefName}${normalizedEventName}`;
         const args = Array.isArray(event.detail) ? event.detail : [];
         this.__base[method](...args, index, event);
       }
     });
-    Object.defineProperties(this, {
-      __rootElement: {
-        enumerable: false,
-        writable: false,
-        value: rootElement
-      },
-      __base: {
-        enumerable: false,
-        writable: false,
-        value: base
-      },
-      __methodsCache: {
-        enumerable: false,
-        writable: false,
-        value: this.__methodsCache
-      },
-      __rootElementHandler: {
-        enumerable: false,
-        writable: false,
-        value: this.__rootElementHandler
-      },
-      __refsHandler: {
-        enumerable: false,
-        writable: false,
-        value: this.__refsHandler
-      },
-      __childrenHandler: {
-        enumerable: false,
-        writable: false,
-        value: this.__childrenHandler
-      }
-    });
-  }
-  __manageRef(name, elements, mode = "add") {
-    const action = `${mode}EventListener`;
-    const methods = this.__getEventMethodsByName(name);
-    methods.forEach((method) => {
-      const event = this.__getEventNameByMethod(method, name);
-      elements.forEach((element) => element[action](event, this.__refsHandler));
-    });
+    this.__hideProperties([
+      "__methodsCache",
+      "__rootElementHandler",
+      "__refsHandler",
+      "__childrenHandler"
+    ]);
   }
   bindRef(name, elements) {
-    this.__manageRef(name, elements);
+    __manageRef(this, name, elements);
   }
   unbindRef(name, elements) {
-    this.__manageRef(name, elements, "remove");
-  }
-  __manageChild(name, instance, mode = "add") {
-    const action = mode === "add" ? "$on" : "$off";
-    const methods = this.__getEventMethodsByName(name);
-    methods.forEach((method) => {
-      const event = this.__getEventNameByMethod(method, name);
-      instance[action](event, this.__childrenHandler);
-    });
+    __manageRef(this, name, elements, "remove");
   }
   bindChild(name, instance) {
-    this.__manageChild(name, instance);
+    __manageChild(this, name, instance);
   }
   unbindChild(name, instance) {
-    this.__manageChild(name, instance, "remove");
-  }
-  __manageRootElement(mode = "add") {
-    const modeMethod = `${mode}EventListener`;
-    const methods = this.__getEventMethodsByName();
-    const { emits = [] } = this.__base.__config;
-    methods.forEach((method) => {
-      const event = this.__getEventNameByMethod(method);
-      const target = emits.includes(event) ? this.__base : this.__rootElement;
-      target[modeMethod](event, this.__rootElementHandler);
-    });
+    __manageChild(this, name, instance, "remove");
   }
   bindRootElement() {
-    this.__manageRootElement();
+    __manageRootElement(this);
   }
   unbindRootElement() {
-    this.__manageRootElement("remove");
-  }
-  __getEventNameByMethod(method, name = "") {
-    const normalizedName = EventsManager.normalizeName(name);
-    const regex = new RegExp(`^on${normalizedName}([A-Z].*)$`);
-    const [, event] = method.match(regex);
-    return EventsManager.normalizeEventName(event);
-  }
-  __getEventMethodsByName(name = "") {
-    const normalizedName = EventsManager.normalizeName(name);
-    const regex = new RegExp(`^on${normalizedName}[A-Z].*$`);
-    const key = regex.toString();
-    let methods = this.__methodsCache.get(key);
-    if (!methods) {
-      methods = Array.from((0, import_getAllProperties.default)(this.__base, [], (method) => regex.test(method)).reduce((set, [method]) => set.add(method), /* @__PURE__ */ new Set()));
-      this.__methodsCache.set(key, methods);
-    }
-    return methods;
-  }
-  static normalizeName(name) {
-    return name.replace(/[A-Z]([A-Z].*)/g, (c) => c.toLowerCase()).replace(/[^a-zA-Z\d\s:]/g, " ").replace(/(^\w|\s+\w)/g, (c) => c.trim().toUpperCase()).trim();
-  }
-  static normalizeEventName(name) {
-    return name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`).replace(/^-/, "");
+    __manageRootElement(this, "remove");
   }
 };
 if (module.exports.default) module.exports = module.exports.default;