@studiometa/js-toolkit 2.0.0-beta.8 → 2.0.0-rc.2

package/Base/index.cjs

@@ -0,0 +1,285 @@
+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);
+    }
+    return 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.findIndex((value) => value === 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

@@ -57,9 +57,11 @@ 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}
@@ -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.
      *