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

package/Base/index.d.ts

@@ -1,10 +1,10 @@
 /**
- * @typedef {typeof Base} BaseComponent
- * @typedef {(Base) => Promise<BaseComponent | { default: BaseComponent }>} BaseAsyncComponent
+ * @typedef {typeof Base} BaseConstructor
+ * @typedef {(Base) => Promise<BaseConstructor | { default: BaseConstructor }>} BaseAsyncConstructor
  * @typedef {OptionsManager & { [name:string]: any }} BaseOptions
  * @typedef {{ [name:string]: HTMLElement | HTMLElement[] }} BaseRefs
  * @typedef {{ [nameOrSelector:string]: Base[] | Promise<Base>[] }} BaseChildren
- * @typedef {{ [nameOrSelector:string]: BaseComponent | BaseAsyncComponent }} BaseConfigComponents
+ * @typedef {{ [nameOrSelector:string]: BaseConstructor | BaseAsyncConstructor }} BaseConfigComponents
  * @typedef {import('./managers/OptionsManager').OptionsSchema} BaseConfigOptions
  * @typedef {import('./managers/ServicesManager.js').ServiceName} ServiceName
  */
@@ -18,39 +18,15 @@
  * @property {BaseConfigOptions} [options]
  */
 /**
- * Base class to easily create components.
- *
- * @example
- * ```js
- * class Component extends Base {
- *   static config = {
- *     name: 'Component',
- *     log: true,
- *   };
- *
- *   mounted() {
- *     this.$log('Component is mounted!');
- *   }
- * }
- *
- * class App extends Base {
- *   static config = {
- *     name: 'App',
- *     components: {
- *       Component,
- *     },
- *   };
- * }
- *
- * new App(document.body).$mount();
- * ```
+ * Base class.
  */
 export default class Base {
     /**
      * This is a Base instance.
      * @type {Boolean}
+     * @readonly
      */
-    static $isBase: boolean;
+    static readonly $isBase: boolean;
     /**
      * @type {BaseConfig}
      */
@@ -89,10 +65,10 @@ export default class Base {
      */
     $isMounted: boolean;
     /**
-     * Get properties to exclude from the autobind call.
-     * @return {Array<String|RegExp>}
+     * Get the root instance of the app.
+     * @return {Base}
      */
-    get __excludeFromAutoBind(): (string | RegExp)[];
+    get $root(): Base;
     /**
      * Merge configuration with the parents' configurations.
      *
@@ -102,41 +78,45 @@ export default class Base {
     private get __config();
     /**
      * @type {ServicesManager}
+     * @private
      */
-    __services: ServicesManager;
+    private __services;
     /**
-     * The instance services.
      * @type {ServicesManager}
      */
     get $services(): ServicesManager;
     /**
      * @type {RefsManager}
+     * @private
      */
-    __refs: RefsManager;
+    private __refs;
     /**
      * @return {RefsManager}
      */
     get $refs(): RefsManager;
     /**
      * @type {BaseOptions}
+     * @private
      */
-    __options: BaseOptions;
+    private __options;
     /**
      * @return {BaseOptions}
      */
     get $options(): BaseOptions;
     /**
      * @type {ChildrenManager}
+     * @private
      */
-    __children: ChildrenManager;
+    private __children;
     /**
      * @return {ChildrenManager}
      */
     get $children(): ChildrenManager;
     /**
      * @type {EventsManager}
+     * @private
      */
-    __events: EventsManager;
+    private __events;
     /**
      * Small helper to log stuff.
      *
@@ -151,16 +131,19 @@ export default class Base {
     get __debug(): (...args: any) => void;
     /**
      * Trigger the `mounted` callback.
+     * @return {this}
      */
-    $mount(): Base;
+    $mount(): this;
     /**
      * Update the instance children.
+     * @return {this}
      */
-    $update(): Base;
+    $update(): this;
     /**
      * Trigger the `destroyed` callback.
+     * @return {this}
      */
-    $destroy(): Base;
+    $destroy(): this;
     /**
      * Terminate a child instance when it is not needed anymore.
      * @return {void}
@@ -202,9 +185,9 @@ export default class Base {
      */
     $emit(event: string, ...args: any[]): void;
 }
-export type BaseComponent = typeof Base;
-export type BaseAsyncComponent = (Base: any) => Promise<BaseComponent | {
-    default: BaseComponent;
+export type BaseConstructor = typeof Base;
+export type BaseAsyncConstructor = (Base: any) => Promise<BaseConstructor | {
+    default: BaseConstructor;
 }>;
 export type BaseOptions = OptionsManager & {
     [name: string]: any;
@@ -216,7 +199,7 @@ export type BaseChildren = {
     [nameOrSelector: string]: Base[] | Promise<Base>[];
 };
 export type BaseConfigComponents = {
-    [nameOrSelector: string]: typeof Base | BaseAsyncComponent;
+    [nameOrSelector: string]: typeof Base | BaseAsyncConstructor;
 };
 export type BaseConfigOptions = import('./managers/OptionsManager').OptionsSchema;
 export type ServiceName = import('./managers/ServicesManager.js').ServiceName;
@@ -231,5 +214,4 @@ export type BaseConfig = {
 import ServicesManager from "./managers/ServicesManager.js";
 import RefsManager from "./managers/RefsManager.js";
 import ChildrenManager from "./managers/ChildrenManager.js";
-import EventsManager from "./managers/EventsManager.js";
 import OptionsManager from "./managers/OptionsManager.js";

package/Base/index.js

@@ -1,13 +1,9 @@
-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";
 
 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 autoBind from '../utils/object/autoBind.js';
 import { callMethod, getComponentElements } from './utils.js';
 import ChildrenManager from './managers/ChildrenManager.js';
 import RefsManager from './managers/RefsManager.js';
@@ -16,14 +12,80 @@ import EventsManager from './managers/EventsManager.js';
 import OptionsManager from './managers/OptionsManager.js';
 var id = 0;
 
-var noop = function noop() {};
+function noop() {}
 
-var Base = function () {
-  function Base(element) {
-    var _this = this;
+export default class Base {
+  get $root() {
+    if (!this.$parent) {
+      return this;
+    }
+
+    var parent = this.$parent;
+    var root = this.$parent;
+
+    while (parent) {
+      if (!parent.$parent) {
+        root = parent;
+      }
+
+      parent = parent.$parent;
+    }
+
+    return root;
+  }
 
-    _classCallCheck(this, Base);
+  get __config() {
+    var proto = Object.getPrototypeOf(this);
+    var {
+      config
+    } = proto.constructor;
 
+    while (proto.constructor.config && proto.constructor.$isBase) {
+      config = _objectSpread(_objectSpread({}, proto.constructor.config), config);
+
+      if (proto.constructor.config.options) {
+        config.options = _objectSpread(_objectSpread({}, proto.constructor.config.options), config.options);
+      }
+
+      proto = Object.getPrototypeOf(proto);
+    }
+
+    return config;
+  }
+
+  get $services() {
+    var services = this.__services;
+    this.$emit('get:services', services);
+    return services;
+  }
+
+  get $refs() {
+    var refs = this.__refs;
+    this.$emit('get:refs', refs);
+    return refs;
+  }
+
+  get $options() {
+    var options = this.__options;
+    this.$emit('get:options', options);
+    return options;
+  }
+
+  get $children() {
+    var children = this.__children;
+    this.$emit('get:children', children);
+    return children;
+  }
+
+  get $log() {
+    return this.__options.log ? window.console.log.bind(window, "[".concat(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;
+  }
+
+  constructor(element) {
     _defineProperty(this, "$parent", null);
 
     _defineProperty(this, "$id", void 0);
@@ -46,7 +108,9 @@ var Base = function () {
       throw new Error('The root element must be defined.');
     }
 
-    var __config = this.__config;
+    var {
+      __config
+    } = this;
 
     if (!__config) {
       throw new Error('The `config` static property must be defined.');
@@ -62,9 +126,7 @@ var Base = function () {
 
     if (!('__base__' in this.$el)) {
       Object.defineProperty(this.$el, '__base__', {
-        get: function get() {
-          return _this;
-        },
+        get: () => this,
         configurable: true
       });
     }
@@ -74,191 +136,102 @@ var Base = function () {
     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);
-    autoBind(this, {
-      exclude: _toConsumableArray(this.__excludeFromAutoBind)
-    });
 
     this.__debug('constructor', this);
 
     return this;
   }
 
-  _createClass(Base, [{
-    key: "__excludeFromAutoBind",
-    get: function get() {
-      return ['$mount', '$update', '$destroy', '$terminate', '$log', '$on', '$once', '$off', '$emit', 'mounted', 'loaded', 'ticked', 'resized', 'moved', 'keyed', 'scrolled', 'destroyed', 'terminated'];
-    }
-  }, {
-    key: "__config",
-    get: function get() {
-      var proto = Object.getPrototypeOf(this);
-      var config = proto.constructor.config;
+  $mount() {
+    this.__debug('$mount');
 
-      while (proto.constructor.config && proto.constructor.$isBase) {
-        config = _objectSpread(_objectSpread({}, proto.constructor.config), config);
+    this.$children.registerAll();
+    this.$refs.registerAll();
 
-        if (proto.constructor.config.options) {
-          config.options = _objectSpread(_objectSpread({}, proto.constructor.config.options), config.options);
-        }
+    this.__events.bindRootElement();
 
-        proto = Object.getPrototypeOf(proto);
-      }
+    this.$services.enableAll();
+    this.$children.mountAll();
+    callMethod(this, 'mounted');
+    this.$isMounted = true;
+    return this;
+  }
 
-      return config;
-    }
-  }, {
-    key: "$services",
-    get: function get() {
-      var services = this.__services;
-      this.$emit('get:services', services);
-      return services;
-    }
-  }, {
-    key: "$refs",
-    get: function get() {
-      var refs = this.__refs;
-      this.$emit('get:refs', refs);
-      return refs;
-    }
-  }, {
-    key: "$options",
-    get: function get() {
-      var options = this.__options;
-      this.$emit('get:options', options);
-      return options;
-    }
-  }, {
-    key: "$children",
-    get: function get() {
-      this.__debug('before:getChildren', this.$el, this.__config.components);
+  $update() {
+    this.__debug('$update');
 
-      var children = this.__children;
-      this.$emit('get:children', children);
+    this.$refs.unregisterAll();
+    this.$services.disableAll();
+    this.$children.registerAll();
+    this.$refs.registerAll();
+    this.$services.enableAll();
+    this.$children.updateAll();
+    callMethod(this, 'updated');
+    return this;
+  }
 
-      this.__debug(this, 'after:getChildren', children);
+  $destroy() {
+    this.__debug('$destroy');
 
-      return children;
-    }
-  }, {
-    key: "$log",
-    get: function get() {
-      return this.__options.log ? window.console.log.bind(window, "[".concat(this.__config.name, "]")) : noop;
-    }
-  }, {
-    key: "__debug",
-    get: function get() {
-      return this.__options.debug && typeof window.__DEV__ !== 'undefined' && window.__DEV__ ? window.console.log.bind(window, "[debug] [".concat(this.$id, "]")) : noop;
-    }
-  }, {
-    key: "$mount",
-    value: function $mount() {
-      this.__debug('$mount');
+    this.__events.unbindRootElement();
 
-      this.$children.registerAll();
-      this.$refs.registerAll();
+    this.$refs.unregisterAll();
+    this.$services.disableAll();
+    this.$children.destroyAll();
+    callMethod(this, 'destroyed');
+    this.$isMounted = false;
+    return this;
+  }
 
-      this.__events.bindRootElement();
+  $terminate() {
+    this.__debug('$terminate');
 
-      this.$services.enableAll();
-      this.$children.mountAll();
-      callMethod(this, 'mounted');
-      this.$isMounted = true;
-      return this;
-    }
-  }, {
-    key: "$update",
-    value: function $update() {
-      this.__debug('$update');
-
-      this.$refs.unregisterAll();
-      this.$services.disableAll();
-      this.$children.registerAll();
-      this.$refs.registerAll();
-      this.$services.enableAll();
-      this.$children.updateAll();
-      callMethod(this, 'updated');
-      return this;
-    }
-  }, {
-    key: "$destroy",
-    value: function $destroy() {
-      this.__debug('$destroy');
-
-      this.__events.unbindRootElement();
-
-      this.$refs.unregisterAll();
-      this.$services.disableAll();
-      this.$children.destroyAll();
-      callMethod(this, 'destroyed');
-      this.$isMounted = false;
-      return this;
-    }
-  }, {
-    key: "$terminate",
-    value: function $terminate() {
-      this.__debug('$terminate');
+    this.$destroy();
+    callMethod(this, 'terminated');
+    Object.defineProperty(this.$el, '__base__', {
+      value: 'terminated',
+      configurable: false,
+      writable: false
+    });
+  }
 
-      this.$destroy();
-      callMethod(this, 'terminated');
-      Object.defineProperty(this.$el, '__base__', {
-        value: 'terminated',
-        configurable: false,
-        writable: false
-      });
+  static $factory(nameOrSelector) {
+    if (!nameOrSelector) {
+      throw new Error('The $factory method requires a component’s name or selector to be specified.');
     }
-  }, {
-    key: "$on",
-    value: function $on(event, listener, options) {
-      var _this2 = this;
 
-      this.__debug('$on', event, listener, options);
+    return getComponentElements(nameOrSelector).map(el => new this(el).$mount());
+  }
 
-      this.$el.addEventListener(event, listener, options);
-      return function () {
-        _this2.$off(event, listener, options);
-      };
-    }
-  }, {
-    key: "$off",
-    value: function $off(event, listener, options) {
-      this.__debug('$off', event, listener);
+  $on(event, listener, options) {
+    this.__debug('$on', event, listener, options);
 
-      this.$el.removeEventListener(event, listener, options);
-    }
-  }, {
-    key: "$emit",
-    value: function $emit(event) {
-      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        args[_key - 1] = arguments[_key];
-      }
+    this.$el.addEventListener(event, listener, options);
+    return () => {
+      this.$off(event, listener, options);
+    };
+  }
+
+  $off(event, listener, options) {
+    this.__debug('$off', event, listener);
 
-      this.__debug('$emit', event, args);
+    this.$el.removeEventListener(event, listener, options);
+  }
 
-      this.$el.dispatchEvent(new CustomEvent(event, {
-        detail: args
-      }));
+  $emit(event) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
     }
-  }], [{
-    key: "$factory",
-    value: function $factory(nameOrSelector) {
-      var _this3 = this;
 
-      if (!nameOrSelector) {
-        throw new Error('The $factory method requires a component’s name or selector to be specified.');
-      }
+    this.__debug('$emit', event, args);
 
-      return getComponentElements(nameOrSelector).map(function (el) {
-        return new _this3(el).$mount();
-      });
-    }
-  }]);
+    this.$el.dispatchEvent(new CustomEvent(event, {
+      detail: args
+    }));
+  }
 
-  return Base;
-}();
+}
 
 _defineProperty(Base, "$isBase", true);
 
-_defineProperty(Base, "config", void 0);
-
-export { Base as default };
-//# sourceMappingURL=index.js.map
+_defineProperty(Base, "config", void 0);

package/Base/managers/ChildrenManager.d.ts

@@ -1,7 +1,7 @@
 /**
  * @typedef {import('../index.js').default} Base
- * @typedef {import('../index.js').BaseComponent} BaseComponent
- * @typedef {import('../index.js').BaseAsyncComponent} BaseAsyncComponent
+ * @typedef {import('../index.js').BaseConstructor} BaseConstructor
+ * @typedef {import('../index.js').BaseAsyncConstructor} BaseAsyncConstructor
  * @typedef {import('../index.js').BaseConfigComponents} BaseConfigComponents
  * @typedef {import('./EventsManager.js').default} EventsManager
  */
@@ -53,7 +53,7 @@ export default class ChildrenManager {
      *
      * @param {string} name
      *   The name of the child component.
-     * @param {BaseComponent|BaseAsyncComponent} component
+     * @param {BaseConstructor|BaseAsyncConstructor} component
      *   A Base class or a Promise for async components.
      * @private
      */
@@ -63,7 +63,7 @@ export default class ChildrenManager {
      *
      * @param {HTMLElement & { __base__?: Base | 'terminated' }} el
      *   The root element of the child component.
-     * @param {BaseComponent|BaseAsyncComponent} ComponentClass
+     * @param {BaseConstructor|BaseAsyncConstructor} ComponentClass
      *   A Base class or a Promise for async components.
      * @param {string} name
      *   The name of the child component.
@@ -102,7 +102,7 @@ export default class ChildrenManager {
     private __triggerHook;
 }
 export type Base = import('../index.js').default;
-export type BaseComponent = import('../index.js').BaseComponent;
-export type BaseAsyncComponent = import('../index.js').BaseAsyncComponent;
+export type BaseConstructor = import('../index.js').BaseConstructor;
+export type BaseAsyncConstructor = import('../index.js').BaseAsyncConstructor;
 export type BaseConfigComponents = import('../index.js').BaseConfigComponents;
 export type EventsManager = import('./EventsManager.js').default;