@studiometa/js-toolkit 2.0.1 → 2.2.0-alpha.1

package/Base/index.cjs

@@ -40,6 +40,40 @@ var id = 0;
 var isDev = typeof __DEV__ !== "undefined" && __DEV__;
 function noop() {
 }
+function createAndTestManagers(instance) {
+  [
+    {
+      prop: "__options",
+      constructorName: "OptionsManager",
+      constructor: import_OptionsManager.default
+    },
+    {
+      prop: "__services",
+      constructorName: "ServicesManager",
+      constructor: import_ServicesManager.default
+    },
+    {
+      prop: "__events",
+      constructorName: "EventsManager",
+      constructor: import_EventsManager.default
+    },
+    {
+      prop: "__refs",
+      constructorName: "RefsManager",
+      constructor: import_RefsManager.default
+    },
+    {
+      prop: "__children",
+      constructorName: "ChildrenManager",
+      constructor: import_ChildrenManager.default
+    }
+  ].forEach(({ prop, constructorName, constructor }) => {
+    instance[prop] = new instance.__managers[constructorName](instance);
+    if (!(instance[prop] instanceof constructor)) {
+      throw new Error(`The \`$managers.${constructorName}\` must extend the \`${constructorName}\` class.`);
+    }
+  });
+}
 var Base = class extends EventTarget {
   constructor(element) {
     super();
@@ -67,11 +101,7 @@ var Base = class extends EventTarget {
       this.$el.__base__ = /* @__PURE__ */ new WeakMap();
     }
     this.$el.__base__.set(this.__ctor, this);
-    this.__options = new import_OptionsManager.default(element, __config.options || {}, __config);
-    this.__services = new import_ServicesManager.default(this);
-    this.__events = new import_EventsManager.default(element, this);
-    this.__children = new import_ChildrenManager.default(this, element, __config.components || {}, this.__events);
-    this.__refs = new import_RefsManager.default(this, element, __config.refs || [], this.__events);
+    createAndTestManagers(this);
     if (isDev) {
       this.__debug("constructor", this);
     }
@@ -91,24 +121,22 @@ 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) {
-      config = {
-        ...proto.constructor.config,
-        ...config
-      };
+      config = { ...proto.constructor.config, ...config };
       if (proto.constructor.config.options) {
-        config.options = {
-          ...proto.constructor.config.options,
-          ...config.options
-        };
+        config.options = { ...proto.constructor.config.options, ...config.options };
       }
       if (proto.constructor.config.emits && config.emits) {
         config.emits = [...proto.constructor.config.emits, ...config.emits];
       }
       proto = Object.getPrototypeOf(proto);
     }
+    config.options = (_a = config.options) != null ? _a : {};
+    config.refs = (_b = config.refs) != null ? _b : [];
+    config.components = (_c = config.components) != null ? _c : {};
     return config;
   }
   get $services() {
@@ -129,18 +157,27 @@ var Base = class extends EventTarget {
   get __debug() {
     return isDev && this.__options.debug ? window.console.log.bind(window, `[debug] [${this.$id}]`) : noop;
   }
+  get __managers() {
+    return {
+      ChildrenManager: import_ChildrenManager.default,
+      EventsManager: import_EventsManager.default,
+      OptionsManager: import_OptionsManager.default,
+      RefsManager: import_RefsManager.default,
+      ServicesManager: import_ServicesManager.default
+    };
+  }
   __callMethod(method, ...args) {
     if (isDev) {
       this.__debug("callMethod", method, ...args);
     }
     this.$emit(method, ...args);
     if (typeof this[method] !== "function") {
-      return;
+      return null;
     }
-    this[method].call(this, ...args);
     if (isDev) {
       this.__debug(method, this, ...args);
     }
+    return this[method].call(this, ...args);
   }
   __hasEvent(event) {
     const eventHandlers = this.__eventHandlers.get(event);
@@ -150,6 +187,7 @@ var Base = class extends EventTarget {
     if (this.$isMounted) {
       return this;
     }
+    this.$emit("before-mounted");
     this.$isMounted = true;
     if (isDev) {
       this.__debug("$mount");
@@ -254,9 +292,7 @@ var Base = class extends EventTarget {
     if (isDev) {
       this.__testEventIsDefined(event);
     }
-    this.dispatchEvent(new CustomEvent(event, {
-      detail: args
-    }));
+    this.dispatchEvent(new CustomEvent(event, { detail: args }));
   }
   static $factory(nameOrSelector) {
     if (!nameOrSelector) {
@@ -269,6 +305,7 @@ __publicField(Base, "$isBase", true);
 __publicField(Base, "config", {
   name: "Base",
   emits: [
+    "before-mounted",
     "mounted",
     "updated",
     "destroyed",

package/Base/index.d.ts

@@ -18,6 +18,14 @@
  * @property {BaseConfigComponents} [components]
  * @property {BaseConfigOptions} [options]
  */
+/**
+ * @typedef {Object} Managers
+ * @property {typeof ChildrenManager} ChildrenManager
+ * @property {typeof EventsManager} EventsManager
+ * @property {typeof OptionsManager} OptionsManager
+ * @property {typeof RefsManager} RefsManager
+ * @property {typeof ServicesManager} ServicesManager
+ */
 /**
  * Base class.
  */
@@ -140,13 +148,19 @@ export default class Base extends EventTarget {
      * @returns {(...args:any) => void}
      */
     private get __debug();
+    /**
+     * Get manager constructors.
+     *
+     * @returns {Managers}
+     */
+    get __managers(): Managers;
     /**
      * Call an instance method and emit corresponding events.
      *
      * @private
      * @param {string} method
      * @param {any[]} args
-     * @returns {void}
+     * @returns {any}
      */
     private __callMethod;
     /**
@@ -270,7 +284,15 @@ export type BaseConfig = {
     components?: BaseConfigComponents;
     options?: BaseConfigOptions;
 };
+export type Managers = {
+    ChildrenManager: typeof ChildrenManager;
+    EventsManager: typeof EventsManager;
+    OptionsManager: typeof OptionsManager;
+    RefsManager: typeof RefsManager;
+    ServicesManager: typeof ServicesManager;
+};
 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 EventsManager from "./managers/EventsManager.js";

package/Base/index.js

@@ -14,6 +14,40 @@ let id = 0;
 const isDev = typeof __DEV__ !== "undefined" && __DEV__;
 function noop() {
 }
+function createAndTestManagers(instance) {
+  [
+    {
+      prop: "__options",
+      constructorName: "OptionsManager",
+      constructor: OptionsManager
+    },
+    {
+      prop: "__services",
+      constructorName: "ServicesManager",
+      constructor: ServicesManager
+    },
+    {
+      prop: "__events",
+      constructorName: "EventsManager",
+      constructor: EventsManager
+    },
+    {
+      prop: "__refs",
+      constructorName: "RefsManager",
+      constructor: RefsManager
+    },
+    {
+      prop: "__children",
+      constructorName: "ChildrenManager",
+      constructor: ChildrenManager
+    }
+  ].forEach(({ prop, constructorName, constructor }) => {
+    instance[prop] = new instance.__managers[constructorName](instance);
+    if (!(instance[prop] instanceof constructor)) {
+      throw new Error(`The \`$managers.${constructorName}\` must extend the \`${constructorName}\` class.`);
+    }
+  });
+}
 class Base extends EventTarget {
   constructor(element) {
     super();
@@ -41,11 +75,7 @@ class Base extends EventTarget {
       this.$el.__base__ = /* @__PURE__ */ new WeakMap();
     }
     this.$el.__base__.set(this.__ctor, this);
-    this.__options = new OptionsManager(element, __config.options || {}, __config);
-    this.__services = new ServicesManager(this);
-    this.__events = new EventsManager(element, this);
-    this.__children = new ChildrenManager(this, element, __config.components || {}, this.__events);
-    this.__refs = new RefsManager(this, element, __config.refs || [], this.__events);
+    createAndTestManagers(this);
     if (isDev) {
       this.__debug("constructor", this);
     }
@@ -65,24 +95,22 @@ 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) {
-      config = {
-        ...proto.constructor.config,
-        ...config
-      };
+      config = { ...proto.constructor.config, ...config };
       if (proto.constructor.config.options) {
-        config.options = {
-          ...proto.constructor.config.options,
-          ...config.options
-        };
+        config.options = { ...proto.constructor.config.options, ...config.options };
       }
       if (proto.constructor.config.emits && config.emits) {
         config.emits = [...proto.constructor.config.emits, ...config.emits];
       }
       proto = Object.getPrototypeOf(proto);
     }
+    config.options = (_a = config.options) != null ? _a : {};
+    config.refs = (_b = config.refs) != null ? _b : [];
+    config.components = (_c = config.components) != null ? _c : {};
     return config;
   }
   get $services() {
@@ -103,18 +131,27 @@ class Base extends EventTarget {
   get __debug() {
     return isDev && this.__options.debug ? window.console.log.bind(window, `[debug] [${this.$id}]`) : noop;
   }
+  get __managers() {
+    return {
+      ChildrenManager,
+      EventsManager,
+      OptionsManager,
+      RefsManager,
+      ServicesManager
+    };
+  }
   __callMethod(method, ...args) {
     if (isDev) {
       this.__debug("callMethod", method, ...args);
     }
     this.$emit(method, ...args);
     if (typeof this[method] !== "function") {
-      return;
+      return null;
     }
-    this[method].call(this, ...args);
     if (isDev) {
       this.__debug(method, this, ...args);
     }
+    return this[method].call(this, ...args);
   }
   __hasEvent(event) {
     const eventHandlers = this.__eventHandlers.get(event);
@@ -124,6 +161,7 @@ class Base extends EventTarget {
     if (this.$isMounted) {
       return this;
     }
+    this.$emit("before-mounted");
     this.$isMounted = true;
     if (isDev) {
       this.__debug("$mount");
@@ -228,9 +266,7 @@ class Base extends EventTarget {
     if (isDev) {
       this.__testEventIsDefined(event);
     }
-    this.dispatchEvent(new CustomEvent(event, {
-      detail: args
-    }));
+    this.dispatchEvent(new CustomEvent(event, { detail: args }));
   }
   static $factory(nameOrSelector) {
     if (!nameOrSelector) {
@@ -243,6 +279,7 @@ __publicField(Base, "$isBase", true);
 __publicField(Base, "config", {
   name: "Base",
   emits: [
+    "before-mounted",
     "mounted",
     "updated",
     "destroyed",

package/Base/managers/AbstractManager.cjs

@@ -0,0 +1,56 @@
+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 });
+};
+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);
+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 = {};
+__export(AbstractManager_exports, {
+  default: () => AbstractManager
+});
+module.exports = __toCommonJS(AbstractManager_exports);
+var AbstractManager = class {
+  constructor(base) {
+    __publicField(this, "__base");
+    this.__base = base;
+    this.__hideProperties(["__base"]);
+  }
+  get __element() {
+    return this.__base.$el;
+  }
+  get __config() {
+    return this.__base.__config;
+  }
+  get __eventsManager() {
+    return this.__base.__events;
+  }
+  __hideProperties(properties) {
+    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

@@ -0,0 +1,44 @@
+/**
+ * @typedef {import('../index.js').default} Base
+ * @typedef {import('../index.js').BaseConfig} BaseConfig
+ * @typedef {import('./EventsManager.js').default} EventsManager
+ */
+/**
+ * AbstractManager class.
+ */
+export default class AbstractManager {
+    /**
+     * Class constructor.
+     *
+     * @param   {Base} base
+     */
+    constructor(base: Base);
+    /**
+     * @type {Base}
+     */
+    __base: Base;
+    /**
+     * Get the base instance root element.
+     * @returns {HTMLElement}
+     */
+    get __element(): HTMLElement;
+    /**
+     * Get the base instance config.
+     * @returns {BaseConfig}
+     */
+    get __config(): import("../index.js").BaseConfig;
+    /**
+     * Get the events manager.
+     * @returns {EventsManager}
+     */
+    get __eventsManager(): import("./EventsManager.js").default;
+    /**
+     * Prevent a list of properties from being enumerable and writable.
+     * @param   {string[]} properties
+     * @returns {void}
+     */
+    __hideProperties(properties: string[]): void;
+}
+export type Base = import('../index.js').default;
+export type BaseConfig = import('../index.js').BaseConfig;
+export type EventsManager = import('./EventsManager.js').default;

package/Base/managers/AbstractManager.js

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

package/Base/managers/ChildrenManager.cjs

@@ -1,6 +1,8 @@
+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) => {
@@ -15,6 +17,7 @@ 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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -27,120 +30,96 @@ __export(ChildrenManager_exports, {
   default: () => ChildrenManager
 });
 module.exports = __toCommonJS(ChildrenManager_exports);
+var import_AbstractManager = __toESM(require("./AbstractManager.cjs"), 1);
 var import_utils = require("../utils.cjs");
-var ChildrenManager = class {
-  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((module2) => {
+    var _a;
+    const ctor = (_a = module2.default) != null ? _a : module2;
+    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 = (0, import_utils.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 = (0, import_utils.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((module2) => {
-      var _a;
-      const ctor = (_a = module2.default) != null ? _a : module2;
-      this.__asyncComponentPromises.set(ComponentClass, {
-        promise,
-        status: "resolved",
-        ctor
-      });
-      return this.__getChild(el, ctor, name);
     });
+  });
+}
+var ChildrenManager = class extends import_AbstractManager.default {
+  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");
   }
 };
 if (module.exports.default) module.exports = module.exports.default;