@studiometa/js-toolkit 2.0.0-beta.9 → 2.0.0

package/Base/managers/ChildrenManager.js

@@ -1,19 +1,17 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { getComponentElements } from '../utils.js';
-export default class ChildrenManager {
-  get registeredNames() {
-    return Object.keys(this).filter(key => !key.startsWith('__'));
-  }
-
+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 } from "../utils.js";
+class ChildrenManager {
   constructor(base, element, components, eventsManager) {
-    _defineProperty(this, "__base", void 0);
-
-    _defineProperty(this, "__element", void 0);
-
-    _defineProperty(this, "__components", void 0);
-
-    _defineProperty(this, "__eventsManager", void 0);
-
+    __publicField(this, "__base");
+    __publicField(this, "__element");
+    __publicField(this, "__components");
+    __publicField(this, "__eventsManager");
+    __publicField(this, "__asyncComponentPromises", /* @__PURE__ */ new WeakMap());
     Object.defineProperties(this, {
       __base: {
         enumerable: false,
@@ -37,88 +35,91 @@ export default class ChildrenManager {
       }
     });
   }
-
+  get registeredNames() {
+    return Object.keys(this).filter((key) => !key.startsWith("__"));
+  }
   registerAll() {
-    Object.entries(this.__components).forEach(_ref => {
-      var [name, component] = _ref;
-      return this.__register(name, component);
-    });
+    Object.entries(this.__components).forEach(([name, component]) => this.__register(name, component));
   }
-
   __register(name, component) {
     Object.defineProperty(this, name, {
       enumerable: true,
       configurable: true,
       get: () => {
-        var elements = getComponentElements(name, this.__element);
-
+        const elements = getComponentElements(name, this.__element);
         if (elements.length === 0) {
           return [];
         }
-
-        return elements.map(element => this.__getChild(element, component, name)).filter(instance => instance !== 'terminated');
+        return elements.map((element) => this.__getChild(element, component, name)).filter((instance) => instance !== "terminated");
       }
     });
   }
-
   __getChild(el, ComponentClass, name) {
-    if (el.__base__) {
-      return el.__base__;
+    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);
+      }
+      const child = new ctor(el);
+      Object.defineProperty(child, "$parent", { get: () => this.__base });
+      return child;
     }
-
-    if ('$isBase' in ComponentClass) {
-      var child = new ComponentClass(el);
-      Object.defineProperty(child, '$parent', {
-        get: () => this.__base
+    const promise = asyncComponentPromise ? asyncComponentPromise.promise : ComponentClass(this.__base);
+    if (!asyncComponentPromise) {
+      this.__asyncComponentPromises.set(ComponentClass, {
+        promise,
+        status: "pending",
+        ctor: void 0
       });
-      return child;
     }
-
-    return ComponentClass(this.__base).then(module => {
-      var _module$default;
-
-      return this.__getChild(el, (_module$default = module.default) !== null && _module$default !== void 0 ? _module$default : module, name);
+    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);
     });
   }
-
   mountAll() {
-    this.__triggerHookForAll('$mount');
+    this.__triggerHookForAll("$mount");
   }
-
   updateAll() {
-    this.__triggerHookForAll('$update');
+    this.__triggerHookForAll("$update");
   }
-
   destroyAll() {
-    this.__triggerHookForAll('$destroy');
+    this.__triggerHookForAll("$destroy");
   }
-
   __triggerHookForAll(hook) {
-    this.registeredNames.forEach(name => {
-      this[name].forEach(instance => {
+    this.registeredNames.forEach((name) => {
+      this[name].forEach((instance) => {
         if (instance instanceof Promise) {
-          instance.then(resolvedInstance => this.__triggerHook(hook, resolvedInstance, name));
+          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" && !instance.$isMounted) {
+      hook = "$mount";
     }
-
-    if (hook === '$update' || hook === '$destroy') {
+    if (hook === "$update" || hook === "$destroy") {
       this.__eventsManager.unbindChild(name, instance);
     }
-
-    if (hook === '$update' || hook === '$mount') {
+    if (hook === "$update" || hook === "$mount") {
       this.__eventsManager.bindChild(name, instance);
     }
-
     instance[hook]();
   }
-
-}
+}
+export {
+  ChildrenManager as default
+};

package/Base/managers/EventsManager.cjs

@@ -0,0 +1,183 @@
+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 __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 });
+};
+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);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/js-toolkit/Base/managers/EventsManager.js
+var EventsManager_exports = {};
+__export(EventsManager_exports, {
+  default: () => EventsManager
+});
+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");
+    __publicField(this, "__methodsCache", /* @__PURE__ */ new Map());
+    __publicField(this, "__rootElementHandler", {
+      handleEvent: (event) => {
+        const normalizedEventName = EventsManager.normalizeName(event.type);
+        const method = `on${normalizedEventName}`;
+        this.__base[method](event);
+      }
+    });
+    __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 method = `on${normalizedRefName}${normalizedEventName}`;
+        let index = 0;
+        if (Array.isArray(this.__base.$refs[refName])) {
+          index = this.__base.$refs[refName].indexOf(ref);
+        }
+        this.__base[method](event, index);
+      }
+    });
+    __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 = EventsManager.normalizeName(childName);
+        const normalizedEventName = EventsManager.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));
+    });
+  }
+  bindRef(name, elements) {
+    this.__manageRef(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);
+    });
+  }
+  bindChild(name, instance) {
+    this.__manageChild(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);
+    });
+  }
+  bindRootElement() {
+    this.__manageRootElement();
+  }
+  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(/^-/, "");
+  }
+};
+if (module.exports.default) module.exports = module.exports.default;

package/Base/managers/EventsManager.d.ts

@@ -26,14 +26,14 @@ export default class EventsManager {
      * ```
      *
      * @param {string} name
-     * @return {string}
+     * @returns {string}
      */
     static normalizeName(name: string): string;
     /**
      * Normalize the event names from PascalCase to kebab-case.
      *
      * @param {string} name
-     * @return {string}
+     * @returns {string}
      */
     static normalizeEventName(name: string): string;
     /**
@@ -85,8 +85,7 @@ export default class EventsManager {
      *   The elements of the ref.
      * @param  {'add'|'remove'} [mode]
      *   The action to perform: add or remove the event listeners.
-     *
-     * @return {void}
+     * @returns {void}
      * @private
      */
     private __manageRef;
@@ -97,8 +96,7 @@ export default class EventsManager {
      *   The name of the ref.
      * @param {HTMLElement[]} elements
      *   The elements of the ref.
-     *
-     * @return {void}
+     * @returns {void}
      */
     bindRef(name: string, elements: HTMLElement[]): void;
     /**
@@ -108,8 +106,7 @@ export default class EventsManager {
      *   The name of the ref.
      * @param {HTMLElement[]} elements
      *   The elements of the ref.
-     *
-     * @return {void}
+     * @returns {void}
      */
     unbindRef(name: string, elements: HTMLElement[]): void;
     /**
@@ -121,8 +118,7 @@ export default class EventsManager {
      *   A base instance.
      * @param {'add'|'remove'} [mode]
      *   The action to perform: add or remove the event listeners.
-     *
-     * @return {void}
+     * @returns {void}
      * @private
      */
     private __manageChild;
@@ -133,8 +129,7 @@ export default class EventsManager {
      *   The name of the ref.
      * @param {Base} instance
      *   A base instance.
-     *
-     * @return {void}
+     * @returns {void}
      */
     bindChild(name: string, instance: Base): void;
     /**
@@ -144,8 +139,7 @@ export default class EventsManager {
      *   The name of the ref.
      * @param {Base} instance
      *   A base instance.
-     *
-     * @return {void}
+     * @returns {void}
      */
     unbindChild(name: string, instance: Base): void;
     /**
@@ -153,21 +147,20 @@ export default class EventsManager {
      *
      * @param {'add'|'remove'} [mode]
      *   The action to perform: add or remove the event listeners, defaults to 'add'.
-     *
-     * @return {void}
+     * @returns {void}
      * @private
      */
     private __manageRootElement;
     /**
      * Bind event methods on the root element.
      *
-     * @return {void}
+     * @returns {void}
      */
     bindRootElement(): void;
     /**
      * Unbind event method from the root element.
      *
-     * @return {void}
+     * @returns {void}
      */
     unbindRootElement(): void;
     /**
@@ -175,7 +168,7 @@ export default class EventsManager {
      *
      * @param {string} method
      * @param {string} name
-     * @return {string}
+     * @returns {string}
      * @private
      */
     private __getEventNameByMethod;
@@ -183,7 +176,7 @@ export default class EventsManager {
      * Get the base instance methods matching the `onSomething` pattern.
      *
      * @param {string} [name]
-     * @return {string[]}
+     * @returns {string[]}
      * @private
      */
     private __getEventMethodsByName;