@studiometa/js-toolkit 2.0.0-alpha.9 → 2.0.0-beta.11

package/Base/index.d.ts

@@ -14,13 +14,14 @@
  * @property {Boolean} [debug]
  * @property {Boolean} [log]
  * @property {String[]} [refs]
+ * @property {String[]} [emits]
  * @property {BaseConfigComponents} [components]
  * @property {BaseConfigOptions} [options]
  */
 /**
  * Base class.
  */
-export default class Base {
+export default class Base extends EventTarget {
     /**
      * This is a Base instance.
      * @type {Boolean}
@@ -64,6 +65,13 @@ export default class Base {
      * @type {Boolean}
      */
     $isMounted: boolean;
+    /**
+     * Store the event handlers.
+     *
+     * @private
+     * @type {Map<string, Set<EventListenerOrEventListenerObject>>}
+     */
+    private __eventHandlers;
     /**
      * Get the root instance of the app.
      * @return {Base}
@@ -126,9 +134,27 @@ export default class Base {
     /**
      * Small helper to debug information.
      *
+     * @private
      * @return {(...args:any) => void}
      */
-    get __debug(): (...args: any) => void;
+    private get __debug();
+    /**
+     * Call an instance method and emit corresponding events.
+     *
+     * @private
+     * @param {string} method
+     * @param {any[]} args
+     * @return {void}
+     */
+    private __callMethod;
+    /**
+     * Test if the given event has been bound to the instance.
+     *
+     * @private
+     * @param  {string} event The event's name.
+     * @return {boolean}      Wether the given event has been bound or not.
+     */
+    private __hasEvent;
     /**
      * Trigger the `mounted` callback.
      * @return {this}
@@ -149,6 +175,30 @@ export default class Base {
      * @return {void}
      */
     $terminate(): void;
+    /**
+     * Test if the given event is configured and warn otherwise.
+     *
+     * @private
+     * @param   {string} event The event name.
+     * @returns {void}
+     */
+    private __testEventIsDefined;
+    /**
+     * Add an emitted event.
+     *
+     * @private
+     * @param   {string} event The event name.
+     * @returns {void}
+     */
+    private __addEmits;
+    /**
+     * Remove an emitted event.
+     *
+     * @private
+     * @param   {string} event The event name.
+     * @returns {void}
+     */
+    private __removeEmits;
     /**
      * Bind a listener function to an event.
      *
@@ -208,6 +258,7 @@ export type BaseConfig = {
     debug?: boolean;
     log?: boolean;
     refs?: string[];
+    emits?: string[];
     components?: BaseConfigComponents;
     options?: BaseConfigOptions;
 };

package/Base/index.js

@@ -1,20 +1,21 @@
 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 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 = 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; }
+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 { callMethod, getComponentElements } from './utils.js';
+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 {
+export default class Base extends EventTarget {
   get $root() {
     if (!this.$parent) {
       return this;
@@ -47,6 +48,10 @@ export default class Base {
         config.options = _objectSpread(_objectSpread({}, 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);
     }
 
@@ -54,27 +59,19 @@ export default class Base {
   }
 
   get $services() {
-    var services = this.__services;
-    this.$emit('get:services', services);
-    return services;
+    return this.__services;
   }
 
   get $refs() {
-    var refs = this.__refs;
-    this.$emit('get:refs', refs);
-    return refs;
+    return this.__refs;
   }
 
   get $options() {
-    var options = this.__options;
-    this.$emit('get:options', options);
-    return options;
+    return this.__options;
   }
 
   get $children() {
-    var children = this.__children;
-    this.$emit('get:children', children);
-    return children;
+    return this.__children;
   }
 
   get $log() {
@@ -82,10 +79,40 @@ export default class Base {
   }
 
   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] [".concat(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];
+    }
+
+    if (isDev) {
+      this.__debug('callMethod', method, ...args);
+    }
+
+    this.$emit(method, ...args);
+
+    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);
+
+    return eventHandlers && eventHandlers.size > 0;
   }
 
   constructor(element) {
+    super();
+
     _defineProperty(this, "$parent", null);
 
     _defineProperty(this, "$id", void 0);
@@ -94,6 +121,8 @@ export default class Base {
 
     _defineProperty(this, "$isMounted", false);
 
+    _defineProperty(this, "__eventHandlers", new Map());
+
     _defineProperty(this, "__services", void 0);
 
     _defineProperty(this, "__refs", void 0);
@@ -112,11 +141,7 @@ export default class Base {
       __config
     } = this;
 
-    if (!__config) {
-      throw new Error('The `config` static property must be defined.');
-    }
-
-    if (!__config.name) {
+    if (__config.name === 'Base') {
       throw new Error('The `config.name` property is required.');
     }
 
@@ -137,13 +162,23 @@ export default class Base {
     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();
@@ -152,13 +187,16 @@ export default class Base {
 
     this.$services.enableAll();
     this.$children.mountAll();
-    callMethod(this, 'mounted');
-    this.$isMounted = true;
+
+    this.__callMethod('mounted');
+
     return this;
   }
 
   $update() {
-    this.__debug('$update');
+    if (isDev) {
+      this.__debug('$update');
+    }
 
     this.$refs.unregisterAll();
     this.$services.disableAll();
@@ -166,28 +204,43 @@ export default class Base {
     this.$refs.registerAll();
     this.$services.enableAll();
     this.$children.updateAll();
-    callMethod(this, '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();
-    callMethod(this, 'destroyed');
-    this.$isMounted = false;
+
+    this.__callMethod('destroyed');
+
     return this;
   }
 
   $terminate() {
-    this.__debug('$terminate');
+    if (isDev) {
+      this.__debug('$terminate');
+    }
 
     this.$destroy();
-    callMethod(this, 'terminated');
+
+    this.__callMethod('terminated');
+
     Object.defineProperty(this.$el, '__base__', {
       value: 'terminated',
       configurable: false,
@@ -195,43 +248,97 @@ export default class Base {
     });
   }
 
-  static $factory(nameOrSelector) {
-    if (!nameOrSelector) {
-      throw new Error('The $factory method requires a component’s name or selector to be specified.');
+  __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."));
     }
+  }
 
-    return getComponentElements(nameOrSelector).map(el => new this(el).$mount());
+  __addEmits(event) {
+    var ctor = this.constructor;
+
+    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);
+    ctor.config.emits.splice(index, 1);
   }
 
   $on(event, listener, options) {
-    this.__debug('$on', event, listener, options);
+    if (isDev) {
+      this.__debug('$on', event, listener, options);
+    }
+
+    if (isDev) {
+      this.__testEventIsDefined(event);
+    }
+
+    var set = this.__eventHandlers.get(event);
 
-    this.$el.addEventListener(event, listener, options);
+    if (!set) {
+      set = 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) {
-    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 _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
+    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
+    }
+
+    if (isDev) {
+      this.__debug('$emit', event, args);
     }
 
-    this.__debug('$emit', event, args);
+    if (isDev) {
+      this.__testEventIsDefined(event);
+    }
 
-    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.');
+    }
+
+    return getComponentElements(nameOrSelector).map(el => new this(el).$mount());
+  }
+
 }
 
 _defineProperty(Base, "$isBase", true);
 
-_defineProperty(Base, "config", void 0);
+_defineProperty(Base, "config", {
+  name: 'Base',
+  emits: ['mounted', 'updated', 'destroyed', 'terminated', 'ticked', 'scrolled', 'resized', 'moved', 'loaded', 'keyed']
+});

package/Base/managers/ChildrenManager.js

@@ -17,18 +17,22 @@ export default class ChildrenManager {
     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
       }
     });

package/Base/managers/EventsManager.d.ts

@@ -4,6 +4,8 @@
  */
 /**
  * Event management class.
+ * @todo Prevent binding of `onChildOrRefEvent` to the root element
+ * @todo Use event delegation?
  */
 export default class EventsManager {
     /**
@@ -150,7 +152,7 @@ export default class EventsManager {
      * Manage event methods on the root element.
      *
      * @param {'add'|'remove'} [mode]
-     *   The action to perform: add or remove the event listeners.
+     *   The action to perform: add or remove the event listeners, defaults to 'add'.
      *
      * @return {void}
      * @private

package/Base/managers/EventsManager.js

@@ -37,7 +37,7 @@ export default class EventsManager {
 
     _defineProperty(this, "__childrenHandler", {
       handleEvent: event => {
-        var child = event.currentTarget.__base__;
+        var child = event.currentTarget;
         var childName;
         var index = 0;
         var childrenManager = this.__base.$children;
@@ -62,26 +62,32 @@ export default class EventsManager {
     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
       }
     });
@@ -135,10 +141,14 @@ export default class EventsManager {
 
     var methods = this.__getEventMethodsByName();
 
+    var {
+      emits = []
+    } = this.__base.__config;
     methods.forEach(method => {
       var event = this.__getEventNameByMethod(method);
 
-      this.__rootElement[modeMethod](event, this.__rootElementHandler);
+      var target = emits.includes(event) ? this.__base : this.__rootElement;
+      target[modeMethod](event, this.__rootElementHandler);
     });
   }
 

package/Base/managers/OptionsManager.d.ts

@@ -8,6 +8,8 @@
  */
 /**
  * Class options to manage options as data attributes on an HTML element.
+ *
+ * @todo Use `MutationObserver` to update values? Might be more performant.
  * @augments {OptionsInterface}
  */
 export default class OptionsManager {

package/Base/managers/OptionsManager.js

@@ -26,14 +26,17 @@ export default class OptionsManager {
     Object.defineProperties(this, {
       __element: {
         enumerable: false,
+        writable: false,
         value: element
       },
       __values: {
         enumerable: false,
+        writable: false,
         value: this.__values
       },
       __defaultValues: {
         enumerable: false,
+        writable: false,
         value: this.__defaultValues
       }
     });

package/Base/managers/RefsManager.d.ts

@@ -4,6 +4,8 @@
  */
 /**
  * Refs Manager
+ *
+ * @todo Use `MutationObserver` to automatically update refs?
  */
 export default class RefsManager {
     /**

package/Base/managers/RefsManager.js

@@ -12,18 +12,22 @@ export default class RefsManager {
     Object.defineProperties(this, {
       __element: {
         enumerable: false,
+        writable: false,
         value: element
       },
       __refs: {
         enumerable: false,
+        writable: false,
         value: refs
       },
       __base: {
         enumerable: false,
+        writable: false,
         value: base
       },
       __eventsManager: {
         enumerable: false,
+        writable: false,
         value: eventsManager
       }
     });
@@ -46,6 +50,11 @@ export default class RefsManager {
       console.warn("[".concat(this.__base.$options.name, "]"), "The \"".concat(refName, "\" ref has been found multiple times."), 'Did you forgot to add the `[]` suffix to its name?');
     }
 
+    if (!isMultiple && refs.length <= 1 && refs[0] === undefined) {
+      console.warn("[".concat(this.__base.$options.name, "]"), "The \"".concat(refName, "\" ref is missing."), "Is there an `[data-ref=\"".concat(refName, "\"]` element in the component's scope?"));
+      return;
+    }
+
     this.__eventsManager.bindRef(refName, refs);
 
     Object.defineProperty(this, propName, {

package/Base/managers/ServicesManager.d.ts

@@ -1,8 +1,11 @@
 /**
- * @typedef {keyof SERVICES_MAP} ServiceName
+ * @typedef {typeof SERVICES_MAP & Record<string, () => ServiceInterface>} Services
+ * @typedef {keyof SERVICES_MAP|string} ServiceName
  */
 /**
  * Services management for the Base class.
+ *
+ * @todo Add support for disabled services on mount when the method is defined.
  */
 export default class ServicesManager {
     /**
@@ -56,6 +59,13 @@ export default class ServicesManager {
      * @return {void}
      */
     disable(service: string): void;
+    /**
+     * Toggle a service.
+     * @param  {string}  service    The name of the service.
+     * @param  {boolean} [force] The state to force.
+     * @return {void}
+     */
+    toggle(service: string, force?: boolean): void;
     /**
      * Register a new service to be enabled/disabled.
      *
@@ -74,7 +84,29 @@ export default class ServicesManager {
     unregister(name: string): void;
 }
 export type Base = import('../index').default;
-export type ServiceInterface = import('../../services').ServiceInterface;
+export type BaseConstructor = import('../index').BaseConstructor;
+export type ServiceInterface = import('../../services').ServiceInterface<any>;
+export type Services = typeof SERVICES_MAP & Record<string, () => ServiceInterface>;
 export type ServiceName = keyof {
-    [x: string]: () => import("../../services").ServiceInterface;
-};
+    scrolled: typeof useScroll;
+    resized: typeof useResize;
+    ticked: typeof useRaf;
+    moved: typeof usePointer;
+    keyed: typeof useKey;
+    loaded: typeof useLoad;
+} | string;
+declare namespace SERVICES_MAP {
+    export { useScroll as scrolled };
+    export { useResize as resized };
+    export { useRaf as ticked };
+    export { usePointer as moved };
+    export { useKey as keyed };
+    export { useLoad as loaded };
+}
+import useScroll from "../../services/scroll.js";
+import useResize from "../../services/resize.js";
+import useRaf from "../../services/raf.js";
+import usePointer from "../../services/pointer.js";
+import useKey from "../../services/key.js";
+import useLoad from "../../services/load.js";
+export {};