@studiometa/js-toolkit 2.0.0-alpha.1 → 2.0.0-alpha.10

package/Base/managers/ChildrenManager.js

@@ -1,13 +1,11 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { getComponentElements } from '../utils.js';
+export default class ChildrenManager {
+  get registeredNames() {
+    return Object.keys(this).filter(key => !key.startsWith('__'));
+  }
 
-var ChildrenManager = function () {
-  function ChildrenManager(base, element, components, eventsManager) {
-    _classCallCheck(this, ChildrenManager);
-
+  constructor(base, element, components, eventsManager) {
     _defineProperty(this, "__base", void 0);
 
     _defineProperty(this, "__element", void 0);
@@ -16,133 +14,111 @@ var ChildrenManager = function () {
 
     _defineProperty(this, "__eventsManager", void 0);
 
-    this.__base = base;
-    this.__element = element;
-    this.__components = components;
-    this.__eventsManager = 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
+      }
+    });
   }
 
-  _createClass(ChildrenManager, [{
-    key: "registeredNames",
-    get: function get() {
-      return Object.keys(this).filter(function (key) {
-        return !key.startsWith('__');
-      });
-    }
-  }, {
-    key: "registerAll",
-    value: function registerAll() {
-      var _this = this;
+  registerAll() {
+    Object.entries(this.__components).forEach(_ref => {
+      var [name, component] = _ref;
+      return this.__register(name, component);
+    });
+  }
 
-      Object.entries(this.__components).forEach(function (_ref) {
-        var _ref2 = _slicedToArray(_ref, 2),
-            name = _ref2[0],
-            component = _ref2[1];
+  __register(name, component) {
+    Object.defineProperty(this, name, {
+      enumerable: true,
+      configurable: true,
+      get: () => {
+        var elements = getComponentElements(name, this.__element);
 
-        return _this.__register(name, component);
-      });
-    }
-  }, {
-    key: "__register",
-    value: function __register(name, component) {
-      var _this2 = this;
-
-      Object.defineProperty(this, name, {
-        enumerable: true,
-        configurable: true,
-        get: function get() {
-          var elements = getComponentElements(name, _this2.__element);
-
-          if (elements.length === 0) {
-            return [];
-          }
-
-          return elements.map(function (element) {
-            return _this2.__getChild(element, component, name);
-          }).filter(function (instance) {
-            return instance !== 'terminated';
-          });
+        if (elements.length === 0) {
+          return [];
         }
-      });
-    }
-  }, {
-    key: "__getChild",
-    value: function __getChild(el, ComponentClass, name) {
-      var _this3 = this;
-
-      if (el.__base__) {
-        return el.__base__;
-      }
 
-      if ('$isBase' in ComponentClass) {
-        var child = new ComponentClass(el);
-        Object.defineProperty(child, '$parent', {
-          get: function get() {
-            return _this3.__base;
-          }
-        });
-        return child;
+        return elements.map(element => this.__getChild(element, component, name)).filter(instance => instance !== 'terminated');
       }
+    });
+  }
 
-      return ComponentClass(this.__base).then(function (module) {
-        var _module$default;
+  __getChild(el, ComponentClass, name) {
+    if (el.__base__) {
+      return el.__base__;
+    }
 
-        return _this3.__getChild(el, (_module$default = module.default) !== null && _module$default !== void 0 ? _module$default : module, name);
+    if ('$isBase' in ComponentClass) {
+      var child = new ComponentClass(el);
+      Object.defineProperty(child, '$parent', {
+        get: () => this.__base
       });
+      return child;
     }
-  }, {
-    key: "mountAll",
-    value: function mountAll() {
-      this.__triggerHookForAll('$mount');
-    }
-  }, {
-    key: "updateAll",
-    value: function updateAll() {
-      this.__triggerHookForAll('$update');
-    }
-  }, {
-    key: "destroyAll",
-    value: function destroyAll() {
-      this.__triggerHookForAll('$destroy');
-    }
-  }, {
-    key: "__triggerHookForAll",
-    value: function __triggerHookForAll(hook) {
-      var _this4 = this;
-
-      this.registeredNames.forEach(function (name) {
-        _this4[name].forEach(function (instance) {
-          if (instance instanceof Promise) {
-            instance.then(function (resolvedInstance) {
-              return _this4.__triggerHook(hook, resolvedInstance, name);
-            });
-          } else {
-            _this4.__triggerHook(hook, instance, name);
-          }
-        });
+
+    return ComponentClass(this.__base).then(module => {
+      var _module$default;
+
+      return this.__getChild(el, (_module$default = module.default) !== null && _module$default !== void 0 ? _module$default : module, 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);
+        }
       });
-    }
-  }, {
-    key: "__triggerHook",
-    value: function __triggerHook(hook, instance, name) {
-      if (hook === '$update' && !instance.$isMounted) {
-        hook = '$mount';
-      }
+    });
+  }
 
-      if (hook === '$update' || hook === '$destroy') {
-        this.__eventsManager.unbindChild(name, instance);
-      }
+  __triggerHook(hook, instance, name) {
+    if (hook === '$update' && !instance.$isMounted) {
+      hook = '$mount';
+    }
 
-      if (hook === '$update' || hook === '$mount') {
-        this.__eventsManager.bindChild(name, instance);
-      }
+    if (hook === '$update' || hook === '$destroy') {
+      this.__eventsManager.unbindChild(name, instance);
+    }
 
-      instance[hook]();
+    if (hook === '$update' || hook === '$mount') {
+      this.__eventsManager.bindChild(name, instance);
     }
-  }]);
 
-  return ChildrenManager;
-}();
+    instance[hook]();
+  }
 
-export { ChildrenManager as default };
-//# sourceMappingURL=ChildrenManager.js.map
+}

package/Base/managers/EventsManager.d.ts

@@ -10,15 +10,15 @@ export default class EventsManager {
      * Normalize the given name to PascalCase, such as:
      *
      * ```
-     * sentence case         => SentenceCase
-     * lowercase             => Lowercase
-     * UPPERCASE             => Uppercase
-     * kebab-case            => KebabCase
-     * snake_case            => SnakeCase
-     * camelCase             => CamelCase
-     * PascalCase            => PascalCase
-     * .class-selector       => ClassSelector
-     * .bem__selector        => BemSelector
+     * sentence case          => SentenceCase
+     * lowercase              => Lowercase
+     * UPPERCASE              => Uppercase
+     * kebab-case             => KebabCase
+     * snake_case             => SnakeCase
+     * camelCase              => CamelCase
+     * PascalCase             => PascalCase
+     * .class-selector        => ClassSelector
+     * .bem__selector         => BemSelector
      * __id-selector          => IdSelector
      * .complex[class^ ="__"] => ComplexClass
      * ```

package/Base/managers/EventsManager.js

@@ -1,61 +1,47 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import getAllProperties from '../../utils/object/getAllProperties.js';
 import RefsManager from './RefsManager.js';
-
-var EventsManager = function () {
-  function EventsManager(rootElement, base) {
-    var _this = this;
-
-    _classCallCheck(this, EventsManager);
-
+export default class EventsManager {
+  constructor(rootElement, base) {
     _defineProperty(this, "__rootElement", void 0);
 
     _defineProperty(this, "__base", void 0);
 
-    _defineProperty(this, "__methodsCache", new WeakMap());
+    _defineProperty(this, "__methodsCache", new Map());
 
     _defineProperty(this, "__rootElementHandler", {
-      handleEvent: function handleEvent(event) {
+      handleEvent: event => {
         var normalizedEventName = EventsManager.normalizeName(event.type);
         var method = "on".concat(normalizedEventName);
 
-        if (typeof _this.__base[method] === 'function') {
-          _this.__base[method](event);
-        }
+        this.__base[method](event);
       }
     });
 
     _defineProperty(this, "__refsHandler", {
-      handleEvent: function handleEvent(event) {
+      handleEvent: event => {
         var ref = event.currentTarget;
         var refName = RefsManager.normalizeRefName(ref.dataset.ref);
         var normalizedRefName = EventsManager.normalizeName(refName);
         var normalizedEventName = EventsManager.normalizeName(event.type);
         var method = "on".concat(normalizedRefName).concat(normalizedEventName);
+        var index = 0;
 
-        if (typeof _this.__base[method] === 'function') {
-          var index = 0;
-
-          if (Array.isArray(_this.__base.$refs[refName])) {
-            index = _this.__base.$refs[refName].indexOf(ref);
-          }
-
-          _this.__base[method](event, index);
+        if (Array.isArray(this.__base.$refs[refName])) {
+          index = this.__base.$refs[refName].indexOf(ref);
         }
+
+        this.__base[method](event, index);
       }
     });
 
     _defineProperty(this, "__childrenHandler", {
-      handleEvent: function handleEvent(event) {
+      handleEvent: event => {
         var child = event.currentTarget.__base__;
         var childName;
         var index = 0;
-        var childrenManager = _this.__base.$children;
-        childrenManager.registeredNames.find(function (name) {
+        var childrenManager = this.__base.$children;
+        childrenManager.registeredNames.find(name => {
           if (childrenManager[name].includes(child)) {
             childName = name;
             index = childrenManager[name].indexOf(child);
@@ -67,162 +53,143 @@ var EventsManager = function () {
         var normalizedRefName = EventsManager.normalizeName(childName);
         var normalizedEventName = EventsManager.normalizeName(event.type);
         var method = "on".concat(normalizedRefName).concat(normalizedEventName);
+        var args = Array.isArray(event.detail) ? event.detail : [];
 
-        if (typeof _this.__base[method] === 'function') {
-          var _event$detail, _this$__base;
-
-          var args = (_event$detail = event.detail) !== null && _event$detail !== void 0 ? _event$detail : [];
+        this.__base[method](...args, index, event);
+      }
+    });
 
-          (_this$__base = _this.__base)[method].apply(_this$__base, _toConsumableArray(args).concat([index, event]));
-        }
+    Object.defineProperties(this, {
+      __rootElement: {
+        enumerable: false,
+        writable: false,
+        value: rootElement
+      },
+      __base: {
+        enumerable: false,
+        writable: false,
+        value: base
+      },
+      __methodsCache: {
+        enumerable: false,
+        writable: false,
+        value: this.__methodsCache
+      },
+      __rootElementHandler: {
+        enumerable: false,
+        writable: false,
+        value: this.__rootElementHandler
+      },
+      __refsHandler: {
+        enumerable: false,
+        writable: false,
+        value: this.__refsHandler
+      },
+      __childrenHandler: {
+        enumerable: false,
+        writable: false,
+        value: this.__childrenHandler
       }
     });
+  }
+
+  __manageRef(name, elements) {
+    var mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'add';
+    var action = "".concat(mode, "EventListener");
+
+    var methods = this.__getEventMethodsByName(name);
+
+    methods.forEach(method => {
+      var event = this.__getEventNameByMethod(method, name);
 
-    this.__rootElement = rootElement;
-    this.__base = base;
+      elements.forEach(element => element[action](event, this.__refsHandler));
+    });
   }
 
-  _createClass(EventsManager, [{
-    key: "__manageRef",
-    value: function __manageRef(name, elements) {
-      var _this2 = this;
+  bindRef(name, elements) {
+    this.__manageRef(name, elements);
+  }
 
-      var mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'add';
-      var action = "".concat(mode, "EventListener");
+  unbindRef(name, elements) {
+    this.__manageRef(name, elements, 'remove');
+  }
 
-      var methods = this.__getEventMethodsByName(name);
+  __manageChild(name, instance) {
+    var mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'add';
+    var action = mode === 'add' ? '$on' : '$off';
 
-      methods.forEach(function (method) {
-        var event = _this2.__getEventNameByMethod(method, name);
+    var methods = this.__getEventMethodsByName(name);
 
-        elements.forEach(function (element) {
-          return element[action](event, _this2.__refsHandler);
-        });
-      });
-    }
-  }, {
-    key: "bindRef",
-    value: function bindRef(name, elements) {
-      this.__manageRef(name, elements);
-    }
-  }, {
-    key: "unbindRef",
-    value: function unbindRef(name, elements) {
-      this.__manageRef(name, elements, 'remove');
-    }
-  }, {
-    key: "__manageChild",
-    value: function __manageChild(name, instance) {
-      var _this3 = this;
+    methods.forEach(method => {
+      var event = this.__getEventNameByMethod(method, name);
+
+      instance[action](event, this.__childrenHandler);
+    });
+  }
 
-      var mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'add';
-      var action = mode === 'add' ? '$on' : '$off';
+  bindChild(name, instance) {
+    this.__manageChild(name, instance);
+  }
 
-      var methods = this.__getEventMethodsByName(name);
+  unbindChild(name, instance) {
+    this.__manageChild(name, instance, 'remove');
+  }
 
-      methods.forEach(function (method) {
-        var event = _this3.__getEventNameByMethod(method, name);
+  __manageRootElement() {
+    var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'add';
+    var modeMethod = "".concat(mode, "EventListener");
 
-        instance[action](event, _this3.__childrenHandler);
-      });
-    }
-  }, {
-    key: "bindChild",
-    value: function bindChild(name, instance) {
-      this.__manageChild(name, instance);
-    }
-  }, {
-    key: "unbindChild",
-    value: function unbindChild(name, instance) {
-      this.__manageChild(name, instance, 'remove');
-    }
-  }, {
-    key: "__manageRootElement",
-    value: function __manageRootElement() {
-      var _this4 = this;
+    var methods = this.__getEventMethodsByName();
 
-      var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'add';
-      var modeMethod = "".concat(mode, "EventListener");
+    methods.forEach(method => {
+      var event = this.__getEventNameByMethod(method);
 
-      var methods = this.__getEventMethodsByName();
+      this.__rootElement[modeMethod](event, this.__rootElementHandler);
+    });
+  }
 
-      methods.forEach(function (method) {
-        var event = _this4.__getEventNameByMethod(method);
+  bindRootElement() {
+    this.__manageRootElement();
+  }
 
-        _this4.__rootElement[modeMethod](event, _this4.__rootElementHandler);
-      });
-    }
-  }, {
-    key: "bindRootElement",
-    value: function bindRootElement() {
-      this.__manageRootElement();
-    }
-  }, {
-    key: "unbindRootElement",
-    value: function unbindRootElement() {
-      this.__manageRootElement('remove');
-    }
-  }, {
-    key: "__getEventNameByMethod",
-    value: function __getEventNameByMethod(method) {
-      var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-      var normalizedName = EventsManager.normalizeName(name);
-      var regex = new RegExp("^on".concat(normalizedName, "([A-Z].*)$"));
-
-      var _method$match = method.match(regex),
-          _method$match2 = _slicedToArray(_method$match, 2),
-          event = _method$match2[1];
-
-      return EventsManager.normalizeEventName(event);
-    }
-  }, {
-    key: "__getEventMethodsByName",
-    value: function __getEventMethodsByName() {
-      var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-      var normalizedName = EventsManager.normalizeName(name);
-      var regex = new RegExp("^on".concat(normalizedName, "[A-Z].*$"));
-
-      var methods = this.__methodsCache.get(regex);
-
-      if (!methods) {
-        methods = getAllProperties(this.__base, [], function (method) {
-          return regex.test(method);
-        });
+  unbindRootElement() {
+    this.__manageRootElement('remove');
+  }
 
-        this.__methodsCache.set(regex, methods);
-      }
+  __getEventNameByMethod(method) {
+    var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    var normalizedName = EventsManager.normalizeName(name);
+    var regex = new RegExp("^on".concat(normalizedName, "([A-Z].*)$"));
+    var [, event] = method.match(regex);
+    return EventsManager.normalizeEventName(event);
+  }
 
-      return methods.reduce(function (acc, _ref) {
-        var _ref2 = _slicedToArray(_ref, 1),
-            method = _ref2[0];
+  __getEventMethodsByName() {
+    var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var normalizedName = EventsManager.normalizeName(name);
+    var regex = new RegExp("^on".concat(normalizedName, "[A-Z].*$"));
+    var key = regex.toString();
 
-        if (!acc.includes(method)) {
-          acc.push(method);
-        }
+    var methods = this.__methodsCache.get(key);
 
-        return acc;
-      }, []);
-    }
-  }], [{
-    key: "normalizeName",
-    value: function normalizeName(name) {
-      return name.replace(/[A-Z]([A-Z].*)/g, function (c) {
-        return c.toLowerCase();
-      }).replace(/[^a-zA-Z\d\s:]/g, ' ').replace(/(^\w|\s+\w)/g, function (c) {
-        return c.trim().toUpperCase();
-      }).trim();
-    }
-  }, {
-    key: "normalizeEventName",
-    value: function normalizeEventName(name) {
-      return name.replace(/[A-Z]/g, function (c) {
-        return "-".concat(c.toLowerCase());
-      }).replace(/^-/, '');
+    if (!methods) {
+      methods = Array.from(getAllProperties(this.__base, [], method => regex.test(method)).reduce((set, _ref) => {
+        var [method] = _ref;
+        return set.add(method);
+      }, new Set()));
+
+      this.__methodsCache.set(key, methods);
     }
-  }]);
 
-  return EventsManager;
-}();
+    return methods;
+  }
+
+  static normalizeName(name) {
+    return name.replace(/[A-Z]([A-Z].*)/g, c => c.toLowerCase()).replace(/[^a-zA-Z\d\s:]/g, ' ').replace(/(^\w|\s+\w)/g, c => c.trim().toUpperCase()).trim();
+  }
+
+  static normalizeEventName(name) {
+    return name.replace(/[A-Z]/g, c => "-".concat(c.toLowerCase())).replace(/^-/, '');
+  }
 
-export { EventsManager as default };
-//# sourceMappingURL=EventsManager.js.map
+}