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

package/Base/index.cjs

@@ -0,0 +1,284 @@
+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/index.js
+var Base_exports = {};
+__export(Base_exports, {
+  default: () => Base
+});
+module.exports = __toCommonJS(Base_exports);
+var import_utils = require("./utils.cjs");
+var import_ChildrenManager = __toESM(require("./managers/ChildrenManager.cjs"), 1);
+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 id = 0;
+var isDev = typeof __DEV__ !== "undefined" && __DEV__;
+function noop() {
+}
+var Base = class extends EventTarget {
+  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) {
+      throw new Error("The root element must be defined.");
+    }
+    const { __config } = this;
+    if (__config.name === "Base") {
+      throw new Error("The `config.name` property is required.");
+    }
+    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);
+    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);
+    if (isDev) {
+      this.__debug("constructor", this);
+    }
+  }
+  get $root() {
+    if (!this.$parent) {
+      return this;
+    }
+    let parent = this.$parent;
+    let root = this.$parent;
+    while (parent) {
+      if (!parent.$parent) {
+        root = parent;
+      }
+      parent = parent.$parent;
+    }
+    return root;
+  }
+  get __config() {
+    let proto = Object.getPrototypeOf(this);
+    let { config } = proto.constructor;
+    while (proto.constructor.config && proto.constructor.$isBase) {
+      config = {
+        ...proto.constructor.config,
+        ...config
+      };
+      if (proto.constructor.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);
+    }
+    return config;
+  }
+  get $services() {
+    return this.__services;
+  }
+  get $refs() {
+    return this.__refs;
+  }
+  get $options() {
+    return this.__options;
+  }
+  get $children() {
+    return this.__children;
+  }
+  get $log() {
+    return this.__options.log ? window.console.log.bind(window, `[${this.__config.name}]`) : noop;
+  }
+  get __debug() {
+    return isDev && this.__options.debug ? window.console.log.bind(window, `[debug] [${this.$id}]`) : noop;
+  }
+  __callMethod(method, ...args) {
+    if (isDev) {
+      this.__debug("callMethod", method, ...args);
+    }
+    this.$emit(method, ...args);
+    if (typeof this[method] !== "function") {
+      return;
+    }
+    this[method].call(this, ...args);
+    if (isDev) {
+      this.__debug(method, this, ...args);
+    }
+  }
+  __hasEvent(event) {
+    const eventHandlers = this.__eventHandlers.get(event);
+    return eventHandlers && eventHandlers.size > 0;
+  }
+  $mount() {
+    if (this.$isMounted) {
+      return this;
+    }
+    this.$isMounted = true;
+    if (isDev) {
+      this.__debug("$mount");
+    }
+    this.$children.registerAll();
+    this.$refs.registerAll();
+    this.__events.bindRootElement();
+    this.$services.enableAll();
+    this.$children.mountAll();
+    this.__callMethod("mounted");
+    return this;
+  }
+  $update() {
+    if (isDev) {
+      this.__debug("$update");
+    }
+    this.$refs.unregisterAll();
+    this.$services.disableAll();
+    this.$children.registerAll();
+    this.$refs.registerAll();
+    this.$services.enableAll();
+    this.$children.updateAll();
+    this.__callMethod("updated");
+    return this;
+  }
+  $destroy() {
+    if (!this.$isMounted) {
+      return this;
+    }
+    this.$isMounted = false;
+    if (isDev) {
+      this.__debug("$destroy");
+    }
+    this.__events.unbindRootElement();
+    this.$refs.unregisterAll();
+    this.$services.disableAll();
+    this.$children.destroyAll();
+    this.__callMethod("destroyed");
+    return this;
+  }
+  $terminate() {
+    if (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)) {
+      ctor.config.emits.push(event);
+    } else {
+      ctor.config.emits = [event];
+    }
+  }
+  __removeEmits(event) {
+    const ctor = this.__ctor;
+    const index = ctor.config.emits.indexOf(event);
+    ctor.config.emits.splice(index, 1);
+  }
+  get __ctor() {
+    return this.constructor;
+  }
+  $on(event, listener, options) {
+    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);
+    return () => {
+      this.$off(event, listener, options);
+    };
+  }
+  $off(event, listener, options) {
+    if (isDev) {
+      this.__debug("$off", event, listener);
+    }
+    if (isDev) {
+      this.__testEventIsDefined(event);
+    }
+    this.__eventHandlers.get(event).delete(listener);
+    this.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) {
+      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());
+  }
+};
+__publicField(Base, "$isBase", true);
+__publicField(Base, "config", {
+  name: "Base",
+  emits: [
+    "mounted",
+    "updated",
+    "destroyed",
+    "terminated",
+    "ticked",
+    "scrolled",
+    "resized",
+    "moved",
+    "loaded",
+    "keyed"
+  ]
+});
+if (module.exports.default) module.exports = module.exports.default;

package/Base/index.d.ts

@@ -10,11 +10,11 @@
  */
 /**
  * @typedef {Object} BaseConfig
- * @property {String} name
- * @property {Boolean} [debug]
- * @property {Boolean} [log]
- * @property {String[]} [refs]
- * @property {String[]} [emits]
+ * @property {string} name
+ * @property {boolean} [debug]
+ * @property {boolean} [log]
+ * @property {string[]} [refs]
+ * @property {string[]} [emits]
  * @property {BaseConfigComponents} [components]
  * @property {BaseConfigOptions} [options]
  */
@@ -24,7 +24,7 @@
 export default class Base extends EventTarget {
     /**
      * This is a Base instance.
-     * @type {Boolean}
+     * @type {boolean}
      * @readonly
      */
     static readonly $isBase: boolean;
@@ -35,8 +35,8 @@ export default class Base extends EventTarget {
     /**
      * Factory method to generate multiple instance of the class.
      *
-     * @param  {String}      nameOrSelector The selector on which to mount each instance.
-     * @return {Array<Base>}                A list of the created instance.
+     * @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>;
     /**
@@ -57,12 +57,14 @@ export default class Base extends EventTarget {
     $id: string;
     /**
      * The root element.
-     * @type {HTMLElement}
+     * @type {HTMLElement & { __base__?: WeakMap<BaseConstructor, Base | 'terminated'> }}
      */
-    $el: HTMLElement;
+    $el: HTMLElement & {
+        __base__?: WeakMap<BaseConstructor, Base | 'terminated'>;
+    };
     /**
      * The state of the component.
-     * @type {Boolean}
+     * @type {boolean}
      */
     $isMounted: boolean;
     /**
@@ -74,13 +76,13 @@ export default class Base extends EventTarget {
     private __eventHandlers;
     /**
      * Get the root instance of the app.
-     * @return {Base}
+     * @returns {Base}
      */
     get $root(): Base;
     /**
      * Merge configuration with the parents' configurations.
      *
-     * @return {BaseConfig}
+     * @returns {BaseConfig}
      * @private
      */
     private get __config();
@@ -99,7 +101,7 @@ export default class Base extends EventTarget {
      */
     private __refs;
     /**
-     * @return {RefsManager}
+     * @returns {RefsManager}
      */
     get $refs(): RefsManager;
     /**
@@ -108,7 +110,7 @@ export default class Base extends EventTarget {
      */
     private __options;
     /**
-     * @return {BaseOptions}
+     * @returns {BaseOptions}
      */
     get $options(): BaseOptions;
     /**
@@ -117,7 +119,7 @@ export default class Base extends EventTarget {
      */
     private __children;
     /**
-     * @return {ChildrenManager}
+     * @returns {ChildrenManager}
      */
     get $children(): ChildrenManager;
     /**
@@ -128,14 +130,14 @@ export default class Base extends EventTarget {
     /**
      * Small helper to log stuff.
      *
-     * @return {(...args: any) => void}
+     * @returns {(...args: any) => void}
      */
     get $log(): (...args: any) => void;
     /**
      * Small helper to debug information.
      *
      * @private
-     * @return {(...args:any) => void}
+     * @returns {(...args:any) => void}
      */
     private get __debug();
     /**
@@ -144,7 +146,7 @@ export default class Base extends EventTarget {
      * @private
      * @param {string} method
      * @param {any[]} args
-     * @return {void}
+     * @returns {void}
      */
     private __callMethod;
     /**
@@ -152,27 +154,27 @@ export default class Base extends EventTarget {
      *
      * @private
      * @param  {string} event The event's name.
-     * @return {boolean}      Wether the given event has been bound or not.
+     * @returns {boolean}      Wether the given event has been bound or not.
      */
     private __hasEvent;
     /**
      * Trigger the `mounted` callback.
-     * @return {this}
+     * @returns {this}
      */
     $mount(): this;
     /**
      * Update the instance children.
-     * @return {this}
+     * @returns {this}
      */
     $update(): this;
     /**
      * Trigger the `destroyed` callback.
-     * @return {this}
+     * @returns {this}
      */
     $destroy(): this;
     /**
      * Terminate a child instance when it is not needed anymore.
-     * @return {void}
+     * @returns {void}
      */
     $terminate(): void;
     /**
@@ -199,6 +201,13 @@ export default class Base extends EventTarget {
      * @returns {void}
      */
     private __removeEmits;
+    /**
+     * Get the instance constructor.
+     *
+     * @private
+     * @returns {BaseConstructor}
+     */
+    private get __ctor();
     /**
      * Bind a listener function to an event.
      *
@@ -208,7 +217,7 @@ export default class Base extends EventTarget {
      *   Function to be called.
      * @param {boolean|AddEventListenerOptions} [options]
      *   Options for the `removeEventListener` method.
-     * @return {() => void}
+     * @returns {() => void}
      *   A function to unbind the listener.
      */
     $on(event: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): () => void;
@@ -221,8 +230,7 @@ export default class Base extends EventTarget {
      *   Function to be removed.
      * @param {boolean|EventListenerOptions} [options]
      *   Options for the `removeEventListener` method.
-     *
-     * @return {void}
+     * @returns {void}
      */
     $off(event: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     /**
@@ -231,7 +239,7 @@ export default class Base extends EventTarget {
      * @param  {string} event
      *   Name of the event.
      * @param  {any[]}        args  The arguments to apply to the functions bound to this event.
-     * @return {void}
+     * @returns {void}
      */
     $emit(event: string, ...args: any[]): void;
 }