@studiometa/js-toolkit 2.0.0-beta.0 → 2.0.0-beta.12

package/Base/index.cjs

@@ -0,0 +1,287 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var Base_exports = {};
+__export(Base_exports, {
+  default: () => Base
+});
+var import_utils = require("./utils.js");
+var import_ChildrenManager = __toESM(require("./managers/ChildrenManager.js"), 1);
+var import_RefsManager = __toESM(require("./managers/RefsManager.js"), 1);
+var import_ServicesManager = __toESM(require("./managers/ServicesManager.js"), 1);
+var import_EventsManager = __toESM(require("./managers/EventsManager.js"), 1);
+var import_OptionsManager = __toESM(require("./managers/OptionsManager.js"), 1);
+let id = 0;
+const isDev = typeof __DEV__ !== "undefined" && __DEV__;
+function noop() {
+}
+class Base extends EventTarget {
+  static $isBase = true;
+  $parent = null;
+  $id;
+  $el;
+  $isMounted = false;
+  __eventHandlers = /* @__PURE__ */ new Map();
+  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;
+  }
+  static config = {
+    name: "Base",
+    emits: [
+      "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;
+  }
+  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;
+  }
+  constructor(element) {
+    super();
+    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 (!("__base__" in this.$el)) {
+      Object.defineProperty(this.$el, "__base__", {
+        get: () => this,
+        configurable: true
+      });
+    }
+    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);
+    }
+    return this;
+  }
+  $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");
+    Object.defineProperty(this.$el, "__base__", {
+      value: "terminated",
+      configurable: false,
+      writable: false
+    });
+  }
+  __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.constructor;
+    if (Array.isArray(ctor.config.emits)) {
+      ctor.config.emits.push(event);
+    } else {
+      ctor.config.emits = [event];
+    }
+  }
+  __removeEmits(event) {
+    const ctor = this.constructor;
+    const index = ctor.config.emits.findIndex((value) => value === event);
+    ctor.config.emits.splice(index, 1);
+  }
+  $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());
+  }
+}
+module.exports = __toCommonJS(Base_exports);

package/Base/index.d.ts

@@ -14,13 +14,14 @@
  * @property {Boolean} [debug]
  * @property {Boolean} [log]
  * @property {String[]} [refs]
+ * @property {String[]} [emits]
  * @property {BaseConfigComponents} [components]
  * @property {BaseConfigOptions} [options]
  */
 /**
  * Base class.
  */
-export default class Base {
+export default class Base extends EventTarget {
     /**
      * This is a Base instance.
      * @type {Boolean}
@@ -174,6 +175,30 @@ export default class Base {
      * @return {void}
      */
     $terminate(): void;
+    /**
+     * Test if the given event is configured and warn otherwise.
+     *
+     * @private
+     * @param   {string} event The event name.
+     * @returns {void}
+     */
+    private __testEventIsDefined;
+    /**
+     * Add an emitted event.
+     *
+     * @private
+     * @param   {string} event The event name.
+     * @returns {void}
+     */
+    private __addEmits;
+    /**
+     * Remove an emitted event.
+     *
+     * @private
+     * @param   {string} event The event name.
+     * @returns {void}
+     */
+    private __removeEmits;
     /**
      * Bind a listener function to an event.
      *
@@ -233,6 +258,7 @@ export type BaseConfig = {
     debug?: boolean;
     log?: boolean;
     refs?: string[];
+    emits?: string[];
     components?: BaseConfigComponents;
     options?: BaseConfigOptions;
 };