@studiometa/js-toolkit 2.0.0-alpha.4 → 2.0.0-alpha.8

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

@@ -4,7 +4,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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';
@@ -13,11 +12,26 @@ import EventsManager from './managers/EventsManager.js';
 import OptionsManager from './managers/OptionsManager.js';
 var id = 0;
 
-var noop = function noop() {};
+function noop() {}
 
 export default class Base {
-  get __excludeFromAutoBind() {
-    return ['$mount', '$update', '$destroy', '$terminate', '$log', '$on', '$once', '$off', '$emit', 'mounted', 'loaded', 'ticked', 'resized', 'moved', 'keyed', 'scrolled', 'destroyed', 'terminated'];
+  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;
   }
 
   get __config() {
@@ -58,13 +72,8 @@ export default class Base {
   }
 
   get $children() {
-    this.__debug('before:getChildren', this.$el, this.__config.components);
-
     var children = this.__children;
     this.$emit('get:children', children);
-
-    this.__debug(this, 'after:getChildren', children);
-
     return children;
   }
 
@@ -127,9 +136,6 @@ export default class Base {
     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: [...this.__excludeFromAutoBind]
-    });
 
     this.__debug('constructor', this);
 
@@ -228,5 +234,4 @@ export default class Base {
 
 _defineProperty(Base, "$isBase", true);
 
-_defineProperty(Base, "config", void 0);
-//# 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;

package/Base/managers/ChildrenManager.js

@@ -103,5 +103,4 @@ export default class ChildrenManager {
     instance[hook]();
   }
 
-}
-//# 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

@@ -7,16 +7,14 @@ export default class EventsManager {
 
     _defineProperty(this, "__base", void 0);
 
-    _defineProperty(this, "__methodsCache", new WeakMap());
+    _defineProperty(this, "__methodsCache", new Map());
 
     _defineProperty(this, "__rootElementHandler", {
       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);
       }
     });
 
@@ -27,16 +25,13 @@ export default class EventsManager {
         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);
       }
     });
 
@@ -58,14 +53,9 @@ export default class EventsManager {
         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;
-
-          var args = (_event$detail = event.detail) !== null && _event$detail !== void 0 ? _event$detail : [];
-
-          this.__base[method](...args, index, event);
-        }
+        this.__base[method](...args, index, event);
       }
     });
 
@@ -148,24 +138,20 @@ export default class EventsManager {
     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();
 
-    var methods = this.__methodsCache.get(regex);
+    var methods = this.__methodsCache.get(key);
 
     if (!methods) {
-      methods = getAllProperties(this.__base, [], method => regex.test(method));
+      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(regex, methods);
+      this.__methodsCache.set(key, methods);
     }
 
-    return methods.reduce((acc, _ref) => {
-      var [method] = _ref;
-
-      if (!acc.includes(method)) {
-        acc.push(method);
-      }
-
-      return acc;
-    }, []);
+    return methods;
   }
 
   static normalizeName(name) {
@@ -176,5 +162,4 @@ export default class EventsManager {
     return name.replace(/[A-Z]/g, c => "-".concat(c.toLowerCase())).replace(/^-/, '');
   }
 
-}
-//# sourceMappingURL=EventsManager.js.map
+}

package/Base/managers/OptionsManager.d.ts

@@ -31,14 +31,6 @@ export default class OptionsManager {
      * @private
      */
     private static __getPropertyName;
-    /**
-     * Test if a value is primitive
-     *
-     * @param  {any} value
-     * @return {boolean}
-     * @private
-     */
-    private static __isPrimitive;
     /**
      * Class constructor.
      *

package/Base/managers/OptionsManager.js

@@ -157,13 +157,8 @@ export default class OptionsManager {
     return propertyName;
   }
 
-  static __isPrimitive(value) {
-    return typeof value === 'string' || typeof value === 'number' || typeof value === 'symbol' || typeof value === 'boolean';
-  }
-
 }
 
 _defineProperty(OptionsManager, "types", [String, Number, Boolean, Array, Object]);
 
-_defineProperty(OptionsManager, "__propertyNameCache", new Map());
-//# sourceMappingURL=OptionsManager.js.map
+_defineProperty(OptionsManager, "__propertyNameCache", new Map());

package/Base/managers/RefsManager.js

@@ -62,5 +62,4 @@ export default class RefsManager {
     return ancestor === null || ancestor === this.__element;
   }
 
-}
-//# sourceMappingURL=RefsManager.js.map
+}

package/Base/managers/ServicesManager.d.ts

@@ -15,6 +15,14 @@ export default class ServicesManager {
      * @private
      */
     private __base;
+    /**
+     * @type {Record<string, () => ServiceInterface>}
+     */
+    __customServices: Record<string, () => ServiceInterface>;
+    /**
+     * @return {Record<string, () => ServiceInterface>}
+     */
+    get __services(): Record<string, () => ServiceInterface>;
     /**
      * Test if the given service is registered.
      *
@@ -51,14 +59,17 @@ export default class ServicesManager {
     /**
      * Register a new service to be enabled/disabled.
      *
-     * @param {string}                 name        The name of the service hook.
-     * @param {() => ServiceInterface} useFunction The `use...` function for the service.
+     * @param {string} name
+     *   The name of the service hook.
+     * @param {() => ServiceInterface} useFunction
+     *   The `use...` function for the service.
      */
     register(name: string, useFunction: () => ServiceInterface): void;
     /**
      * Unregister a new service to be enabled disabled.
      *
-     * @param {string} name The name of the service hooK
+     * @param {string} name
+     *   The name of the service hook.
      */
     unregister(name: string): void;
 }

package/Base/managers/ServicesManager.js

@@ -1,4 +1,9 @@
 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 usePointer from '../../services/pointer.js';
 import useRaf from '../../services/raf.js';
 import useResize from '../../services/resize.js';
@@ -14,21 +19,29 @@ var SERVICES_MAP = {
   keyed: useKey,
   loaded: useLoad
 };
+var SERVICE_NAMES = Object.keys(SERVICES_MAP);
 export default class ServicesManager {
+  get __services() {
+    return _objectSpread(_objectSpread({}, this.__customServices), SERVICES_MAP);
+  }
+
   constructor(instance) {
     _defineProperty(this, "__base", void 0);
 
+    _defineProperty(this, "__customServices", {});
+
     this.__base = instance;
   }
 
   has(service) {
-    if (!hasMethod(this.__base, service) && !SERVICES_MAP[service]) {
+    if (!hasMethod(this.__base, service) && !this.__services[service]) {
       return false;
     }
 
     var {
       has
-    } = SERVICES_MAP[service]();
+    } = this.__services[service]();
+
     return has(this.__base.$id);
   }
 
@@ -37,13 +50,14 @@ export default class ServicesManager {
       return this.disable.bind(this, service);
     }
 
-    if (!hasMethod(this.__base, service) || !SERVICES_MAP[service]) {
+    if (!hasMethod(this.__base, service) || !this.__services[service]) {
       return function noop() {};
     }
 
     var {
       add
-    } = SERVICES_MAP[service]();
+    } = this.__services[service]();
+
     var self = this;
 
     function serviceHandler() {
@@ -59,33 +73,37 @@ export default class ServicesManager {
   }
 
   enableAll() {
-    return Object.keys(SERVICES_MAP).map(serviceName => this.enable(serviceName));
+    return Object.keys(this.__services).map(serviceName => this.enable(serviceName));
   }
 
   disableAll() {
-    Object.keys(SERVICES_MAP).forEach(serviceName => {
+    Object.keys(this.__services).forEach(serviceName => {
       this.disable(serviceName);
     });
   }
 
   disable(service) {
-    if (!SERVICES_MAP[service]) {
+    if (!this.__services[service]) {
       return;
     }
 
     var {
       remove
-    } = SERVICES_MAP[service]();
+    } = this.__services[service]();
+
     remove(this.__base.$id);
   }
 
   register(name, useFunction) {
-    SERVICES_MAP[name] = useFunction;
+    this.__customServices[name] = useFunction;
   }
 
   unregister(name) {
-    delete SERVICES_MAP[name];
+    if (SERVICE_NAMES.includes(name)) {
+      throw new Error("[ServicesManager] The `".concat(name, "` core service can not be unregistered."));
+    }
+
+    delete this.__customServices[name];
   }
 
-}
-//# sourceMappingURL=ServicesManager.js.map
+}

package/Base/utils.js

@@ -40,5 +40,4 @@ export function getComponentElements(nameOrSelector) {
   }
 
   return elements;
-}
-//# sourceMappingURL=utils.js.map
+}