@studiometa/js-toolkit 2.0.0-beta.1 → 2.0.0-beta.13

package/Base/index.js

@@ -1,288 +1,258 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-import { getComponentElements } from './utils.js';
-import ChildrenManager from './managers/ChildrenManager.js';
-import RefsManager from './managers/RefsManager.js';
-import ServicesManager from './managers/ServicesManager.js';
-import EventsManager from './managers/EventsManager.js';
-import OptionsManager from './managers/OptionsManager.js';
-var id = 0;
-
-function noop() {}
-
-export default class Base {
+import { getComponentElements } from "./utils.js";
+import ChildrenManager from "./managers/ChildrenManager.js";
+import RefsManager from "./managers/RefsManager.js";
+import ServicesManager from "./managers/ServicesManager.js";
+import EventsManager from "./managers/EventsManager.js";
+import OptionsManager from "./managers/OptionsManager.js";
+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;
     }
-
-    var parent = this.$parent;
-    var root = this.$parent;
-
+    let parent = this.$parent;
+    let root = this.$parent;
     while (parent) {
       if (!parent.$parent) {
         root = parent;
       }
-
       parent = parent.$parent;
     }
-
     return root;
   }
-
   get __config() {
-    var proto = Object.getPrototypeOf(this);
-    var {
-      config
-    } = proto.constructor;
-
+    let proto = Object.getPrototypeOf(this);
+    let { config } = proto.constructor;
     while (proto.constructor.config && proto.constructor.$isBase) {
-      config = _objectSpread(_objectSpread({}, proto.constructor.config), config);
-
+      config = {
+        ...proto.constructor.config,
+        ...config
+      };
       if (proto.constructor.config.options) {
-        config.options = _objectSpread(_objectSpread({}, 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);
     }
-
     return config;
   }
-
+  static config = {
+    name: "Base",
+    emits: [
+      "mounted",
+      "updated",
+      "destroyed",
+      "terminated",
+      "ticked",
+      "scrolled",
+      "resized",
+      "moved",
+      "loaded",
+      "keyed"
+    ]
+  };
+  __services;
   get $services() {
-    var services = this.__services;
-    this.$emit('get:services', services);
-    return services;
+    return this.__services;
   }
-
+  __refs;
   get $refs() {
-    var refs = this.__refs;
-    this.$emit('get:refs', refs);
-    return refs;
+    return this.__refs;
   }
-
+  __options;
   get $options() {
-    var options = this.__options;
-    this.$emit('get:options', options);
-    return options;
+    return this.__options;
   }
-
+  __children;
   get $children() {
-    var children = this.__children;
-    this.$emit('get:children', children);
-    return children;
+    return this.__children;
   }
-
+  __events;
   get $log() {
-    return this.__options.log ? window.console.log.bind(window, "[".concat(this.__config.name, "]")) : noop;
+    return this.__options.log ? window.console.log.bind(window, `[${this.__config.name}]`) : noop;
   }
-
   get __debug() {
-    return this.__options.debug && typeof window.__DEV__ !== 'undefined' && window.__DEV__ ? window.console.log.bind(window, "[debug] [".concat(this.$id, "]")) : noop;
+    return isDev && this.__options.debug ? window.console.log.bind(window, `[debug] [${this.$id}]`) : noop;
   }
-
-  __callMethod(method) {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
-
-    this.__debug('callMethod', method, ...args);
-
-    if (method === 'destroyed' && !this.$isMounted || method === 'mounted' && this.$isMounted) {
-      this.__debug('not', method, 'because the method has already been triggered once.');
-
-      return;
+  __callMethod(method, ...args) {
+    if (isDev) {
+      this.__debug("callMethod", method, ...args);
     }
-
     this.$emit(method, ...args);
-
-    if (typeof this[method] !== 'function') {
+    if (typeof this[method] !== "function") {
       return;
     }
-
     this[method].call(this, ...args);
-
-    this.__debug(method, this, ...args);
+    if (isDev) {
+      this.__debug(method, this, ...args);
+    }
   }
-
   __hasEvent(event) {
-    var eventHandlers = this.__eventHandlers.get(event);
-
+    const eventHandlers = this.__eventHandlers.get(event);
     return eventHandlers && eventHandlers.size > 0;
   }
-
   constructor(element) {
-    _defineProperty(this, "$parent", null);
-
-    _defineProperty(this, "$id", void 0);
-
-    _defineProperty(this, "$el", void 0);
-
-    _defineProperty(this, "$isMounted", false);
-
-    _defineProperty(this, "__eventHandlers", new Map());
-
-    _defineProperty(this, "__services", void 0);
-
-    _defineProperty(this, "__refs", void 0);
-
-    _defineProperty(this, "__options", void 0);
-
-    _defineProperty(this, "__children", void 0);
-
-    _defineProperty(this, "__events", void 0);
-
+    super();
     if (!element) {
-      throw new Error('The root element must be defined.');
-    }
-
-    var {
-      __config
-    } = this;
-
-    if (!__config) {
-      throw new Error('The `config` static property must be defined.');
+      throw new Error("The root element must be defined.");
     }
-
-    if (!__config.name) {
-      throw new Error('The `config.name` property is required.');
+    const { __config } = this;
+    if (__config.name === "Base") {
+      throw new Error("The `config.name` property is required.");
     }
-
-    this.$id = "".concat(__config.name, "-").concat(id);
+    this.$id = `${__config.name}-${id}`;
     id += 1;
     this.$el = element;
-
-    if (!('__base__' in this.$el)) {
-      Object.defineProperty(this.$el, '__base__', {
+    if (!("__base__" in this.$el)) {
+      Object.defineProperty(this.$el, "__base__", {
         get: () => this,
         configurable: true
       });
     }
-
     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);
-
-    this.__debug('constructor', this);
-
+    if (isDev) {
+      this.__debug("constructor", this);
+    }
     return this;
   }
-
   $mount() {
-    this.__debug('$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');
-
-    this.$isMounted = true;
+    this.__callMethod("mounted");
     return this;
   }
-
   $update() {
-    this.__debug('$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');
-
+    this.__callMethod("updated");
     return this;
   }
-
   $destroy() {
-    this.__debug('$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');
-
-    this.$isMounted = false;
+    this.__callMethod("destroyed");
     return this;
   }
-
   $terminate() {
-    this.__debug('$terminate');
-
+    if (isDev) {
+      this.__debug("$terminate");
+    }
     this.$destroy();
-
-    this.__callMethod('terminated');
-
-    Object.defineProperty(this.$el, '__base__', {
-      value: 'terminated',
+    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) {
-    this.__debug('$on', event, listener, options);
-
-    var set = this.__eventHandlers.get(event);
-
+    if (isDev) {
+      this.__debug("$on", event, listener, options);
+    }
+    if (isDev) {
+      this.__testEventIsDefined(event);
+    }
+    let set = this.__eventHandlers.get(event);
     if (!set) {
-      set = new Set();
-
+      set = /* @__PURE__ */ new Set();
       this.__eventHandlers.set(event, set);
     }
-
     set.add(listener);
-    this.$el.addEventListener(event, listener, options);
+    this.addEventListener(event, listener, options);
     return () => {
       this.$off(event, listener, options);
     };
   }
-
   $off(event, listener, options) {
-    this.__debug('$off', event, listener);
-
+    if (isDev) {
+      this.__debug("$off", event, listener);
+    }
+    if (isDev) {
+      this.__testEventIsDefined(event);
+    }
     this.__eventHandlers.get(event).delete(listener);
-
-    this.$el.removeEventListener(event, listener, options);
+    this.removeEventListener(event, listener, options);
   }
-
-  $emit(event) {
-    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      args[_key2 - 1] = arguments[_key2];
+  $emit(event, ...args) {
+    if (isDev) {
+      this.__debug("$emit", event, args);
+    }
+    if (isDev) {
+      this.__testEventIsDefined(event);
     }
-
-    this.__debug('$emit', event, args);
-
-    this.$el.dispatchEvent(new CustomEvent(event, {
+    this.dispatchEvent(new CustomEvent(event, {
       detail: args
     }));
   }
-
   static $factory(nameOrSelector) {
     if (!nameOrSelector) {
-      throw new Error('The $factory method requires a component’s name or selector to be specified.');
+      throw new Error("The $factory method requires a component\u2019s name or selector to be specified.");
     }
-
-    return getComponentElements(nameOrSelector).map(el => new this(el).$mount());
+    return getComponentElements(nameOrSelector).map((el) => new this(el).$mount());
   }
-
 }
-
-_defineProperty(Base, "$isBase", true);
-
-_defineProperty(Base, "config", void 0);
+export {
+  Base as default
+};

package/Base/managers/ChildrenManager.cjs

@@ -0,0 +1,124 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __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);
+
+// packages/js-toolkit/Base/managers/ChildrenManager.js
+var ChildrenManager_exports = {};
+__export(ChildrenManager_exports, {
+  default: () => ChildrenManager
+});
+var import_utils = require("../utils.cjs");
+var ChildrenManager = class {
+  __base;
+  __element;
+  __components;
+  __eventsManager;
+  get registeredNames() {
+    return Object.keys(this).filter((key) => !key.startsWith("__"));
+  }
+  constructor(base, element, components, eventsManager) {
+    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
+      }
+    });
+  }
+  registerAll() {
+    Object.entries(this.__components).forEach(([name, component]) => this.__register(name, component));
+  }
+  __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");
+      }
+    });
+  }
+  __getChild(el, ComponentClass, name) {
+    if (el.__base__) {
+      return el.__base__;
+    }
+    if ("$isBase" in ComponentClass) {
+      const child = new ComponentClass(el);
+      Object.defineProperty(child, "$parent", { get: () => this.__base });
+      return child;
+    }
+    return ComponentClass(this.__base).then((module2) => {
+      return this.__getChild(el, module2.default ?? module2, name);
+    });
+  }
+  mountAll() {
+    this.__triggerHookForAll("$mount");
+  }
+  updateAll() {
+    this.__triggerHookForAll("$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]();
+  }
+};
+module.exports = __toCommonJS(ChildrenManager_exports);