@studiometa/js-toolkit 2.0.0-beta.7 → 2.0.0-rc.1

package/Base/index.js

@@ -1,344 +1,261 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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;
-var isDev = typeof __DEV__ !== 'undefined' && __DEV__;
-
-function noop() {}
-
-export default class Base extends EventTarget {
+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;
+};
+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 {
+  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 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);
+    if (isDev) {
+      this.__debug("constructor", this);
+    }
+    return this;
+  }
   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;
   }
-
   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, "[".concat(this.__config.name, "]")) : noop;
+    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] [".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];
-    }
-
+  __callMethod(method, ...args) {
     if (isDev) {
-      this.__debug('callMethod', method, ...args);
+      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);
-
     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) {
-    super();
-
-    _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);
-
-    if (!element) {
-      throw new Error('The root element must be defined.');
-    }
-
-    var {
-      __config
-    } = this;
-
-    if (__config.name === 'Base') {
-      throw new Error('The `config.name` property is required.');
-    }
-
-    this.$id = "".concat(__config.name, "-").concat(id);
-    id += 1;
-    this.$el = element;
-
-    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);
-
-    if (isDev) {
-      this.__debug('constructor', this);
-    }
-
-    return this;
-  }
-
   $mount() {
     if (this.$isMounted) {
       return this;
     }
-
     this.$isMounted = true;
-
     if (isDev) {
-      this.__debug('$mount');
+      this.__debug("$mount");
     }
-
     this.$children.registerAll();
     this.$refs.registerAll();
-
     this.__events.bindRootElement();
-
     this.$services.enableAll();
     this.$children.mountAll();
-
-    this.__callMethod('mounted');
-
+    this.__callMethod("mounted");
     return this;
   }
-
   $update() {
     if (isDev) {
-      this.__debug('$update');
+      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() {
     if (!this.$isMounted) {
       return this;
     }
-
     this.$isMounted = false;
-
     if (isDev) {
-      this.__debug('$destroy');
+      this.__debug("$destroy");
     }
-
     this.__events.unbindRootElement();
-
     this.$refs.unregisterAll();
     this.$services.disableAll();
     this.$children.destroyAll();
-
-    this.__callMethod('destroyed');
-
+    this.__callMethod("destroyed");
     return this;
   }
-
   $terminate() {
     if (isDev) {
-      this.__debug('$terminate');
+      this.__debug("$terminate");
     }
-
     this.$destroy();
-
-    this.__callMethod('terminated');
-
-    Object.defineProperty(this.$el, '__base__', {
-      value: 'terminated',
-      configurable: false,
-      writable: false
-    });
+    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("[".concat(this.__config.name, "]"), "The \"".concat(event, "\" event is missing from the configuration."));
+      console.warn(`[${this.__config.name}]`, `The "${event}" event is missing from the configuration.`);
     }
   }
-
   __addEmits(event) {
-    var ctor = this.constructor;
-
+    const ctor = this.__ctor;
     if (Array.isArray(ctor.config.emits)) {
       ctor.config.emits.push(event);
     } else {
       ctor.config.emits = [event];
     }
   }
-
   __removeEmits(event) {
-    var ctor = this.constructor;
-    var index = ctor.config.emits.findIndex(value => value === 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);
+      this.__debug("$on", event, listener, options);
     }
-
     if (isDev) {
       this.__testEventIsDefined(event);
     }
-
-    var set = this.__eventHandlers.get(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.addEventListener(event, listener, options);
     return () => {
       this.$off(event, listener, options);
     };
   }
-
   $off(event, listener, options) {
     if (isDev) {
-      this.__debug('$off', event, listener);
+      this.__debug("$off", event, listener);
     }
-
     if (isDev) {
       this.__testEventIsDefined(event);
     }
-
     this.__eventHandlers.get(event).delete(listener);
-
     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);
+      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’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", {
-  name: 'Base',
-  emits: ['mounted', 'updated', 'destroyed', 'terminated', 'ticked', 'scrolled', 'resized', 'moved', 'loaded']
-});
+__publicField(Base, "$isBase", true);
+__publicField(Base, "config", {
+  name: "Base",
+  emits: [
+    "mounted",
+    "updated",
+    "destroyed",
+    "terminated",
+    "ticked",
+    "scrolled",
+    "resized",
+    "moved",
+    "loaded",
+    "keyed"
+  ]
+});
+export {
+  Base as default
+};

package/Base/managers/ChildrenManager.cjs

@@ -0,0 +1,146 @@
+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/ChildrenManager.js
+var ChildrenManager_exports = {};
+__export(ChildrenManager_exports, {
+  default: () => ChildrenManager
+});
+module.exports = __toCommonJS(ChildrenManager_exports);
+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
+      }
+    });
+  }
+  get registeredNames() {
+    return Object.keys(this).filter((key) => !key.startsWith("__"));
+  }
+  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) {
+    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);
+      }
+      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);
+    });
+  }
+  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]();
+  }
+};
+if (module.exports.default) module.exports = module.exports.default;

package/Base/managers/ChildrenManager.d.ts

@@ -40,6 +40,14 @@ export default class ChildrenManager {
      * @private
      */
     private __eventsManager;
+    /**
+     * Store async component promises to avoid calling them multiple times and
+     * waiting for them when they are already resolved.
+     *
+     * @private
+     * @type {WeakMap<BaseAsyncConstructor, { promise: ReturnType<BaseAsyncConstructor>, status: 'pending'|'resolved', ctor?: BaseConstructor }>}
+     */
+    private __asyncComponentPromises;
     /**
      * @return {string[]}
      */
@@ -61,7 +69,7 @@ export default class ChildrenManager {
     /**
      * Get a child component's instance.
      *
-     * @param {HTMLElement & { __base__?: Base | 'terminated' }} el
+     * @param {HTMLElement & { __base__?: WeakMap<BaseConstructor, Base> }} el
      *   The root element of the child component.
      * @param {BaseConstructor|BaseAsyncConstructor} ComponentClass
      *   A Base class or a Promise for async components.