@studiometa/js-toolkit 2.0.0-alpha.8 → 2.0.0-beta.2

package/Base/index.d.ts

@@ -64,6 +64,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 +133,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}

package/Base/index.js

@@ -4,7 +4,7 @@ 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 { 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';
@@ -85,6 +85,36 @@ export default class Base {
     return this.__options.debug && typeof window.__DEV__ !== 'undefined' && window.__DEV__ ? 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];
+    }
+
+    this.__debug('callMethod', method, ...args);
+
+    if (method === 'destroyed' && !this.$isMounted || method === 'mounted' && this.$isMounted) {
+      this.__debug('not', method, 'because the method has already been triggered once.');
+
+      return;
+    }
+
+    this.$emit(method, ...args);
+
+    if (typeof this[method] !== 'function') {
+      return;
+    }
+
+    this[method].call(this, ...args);
+
+    this.__debug(method, this, ...args);
+  }
+
+  __hasEvent(event) {
+    var eventHandlers = this.__eventHandlers.get(event);
+
+    return eventHandlers && eventHandlers.size > 0;
+  }
+
   constructor(element) {
     _defineProperty(this, "$parent", null);
 
@@ -94,6 +124,8 @@ export default class Base {
 
     _defineProperty(this, "$isMounted", false);
 
+    _defineProperty(this, "__eventHandlers", new Map());
+
     _defineProperty(this, "__services", void 0);
 
     _defineProperty(this, "__refs", void 0);
@@ -152,7 +184,9 @@ export default class Base {
 
     this.$services.enableAll();
     this.$children.mountAll();
-    callMethod(this, 'mounted');
+
+    this.__callMethod('mounted');
+
     this.$isMounted = true;
     return this;
   }
@@ -166,7 +200,9 @@ export default class Base {
     this.$refs.registerAll();
     this.$services.enableAll();
     this.$children.updateAll();
-    callMethod(this, 'updated');
+
+    this.__callMethod('updated');
+
     return this;
   }
 
@@ -178,7 +214,9 @@ export default class Base {
     this.$refs.unregisterAll();
     this.$services.disableAll();
     this.$children.destroyAll();
-    callMethod(this, 'destroyed');
+
+    this.__callMethod('destroyed');
+
     this.$isMounted = false;
     return this;
   }
@@ -187,7 +225,9 @@ export default class Base {
     this.__debug('$terminate');
 
     this.$destroy();
-    callMethod(this, 'terminated');
+
+    this.__callMethod('terminated');
+
     Object.defineProperty(this.$el, '__base__', {
       value: 'terminated',
       configurable: false,
@@ -195,17 +235,18 @@ 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.');
-    }
-
-    return getComponentElements(nameOrSelector).map(el => new this(el).$mount());
-  }
-
   $on(event, listener, options) {
     this.__debug('$on', event, listener, options);
 
+    var set = this.__eventHandlers.get(event);
+
+    if (!set) {
+      set = new Set();
+
+      this.__eventHandlers.set(event, set);
+    }
+
+    set.add(listener);
     this.$el.addEventListener(event, listener, options);
     return () => {
       this.$off(event, listener, options);
@@ -215,12 +256,14 @@ export default class Base {
   $off(event, listener, options) {
     this.__debug('$off', event, listener);
 
+    this.__eventHandlers.get(event).delete(listener);
+
     this.$el.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];
     }
 
     this.__debug('$emit', event, args);
@@ -230,6 +273,14 @@ 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.');
+    }
+
+    return getComponentElements(nameOrSelector).map(el => new this(el).$mount());
+  }
+
 }
 
 _defineProperty(Base, "$isBase", true);

package/Base/managers/ChildrenManager.js

@@ -14,10 +14,28 @@ export default class ChildrenManager {
 
     _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
+      }
+    });
   }
 
   registerAll() {

package/Base/managers/EventsManager.js

@@ -59,8 +59,38 @@ export default class EventsManager {
       }
     });
 
-    this.__rootElement = rootElement;
-    this.__base = base;
+    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) {

package/Base/managers/OptionsManager.js

@@ -23,7 +23,23 @@ export default class OptionsManager {
 
     _defineProperty(this, "log", false);
 
-    this.__element = element;
+    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
+      }
+    });
     this.name = baseConfig.name;
     schema.debug = {
       type: Boolean,

package/Base/managers/RefsManager.js

@@ -9,10 +9,28 @@ export default class RefsManager {
 
     _defineProperty(this, "__eventsManager", void 0);
 
-    this.__element = element;
-    this.__refs = refs;
-    this.__base = base;
-    this.__eventsManager = eventsManager;
+    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
+      }
+    });
   }
 
   registerAll() {

package/Base/managers/ServicesManager.d.ts

@@ -56,6 +56,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.
      *

package/Base/managers/ServicesManager.js

@@ -10,7 +10,7 @@ import useResize from '../../services/resize.js';
 import useScroll from '../../services/scroll.js';
 import useKey from '../../services/key.js';
 import useLoad from '../../services/load.js';
-import { hasMethod, callMethod } from '../utils.js';
+import { hasMethod } from '../utils.js';
 var SERVICES_MAP = {
   scrolled: useScroll,
   resized: useResize,
@@ -30,11 +30,17 @@ export default class ServicesManager {
 
     _defineProperty(this, "__customServices", {});
 
-    this.__base = instance;
+    Object.defineProperties(this, {
+      __base: {
+        enumerable: false,
+        writable: false,
+        value: instance
+      }
+    });
   }
 
   has(service) {
-    if (!hasMethod(this.__base, service) && !this.__services[service]) {
+    if (!((hasMethod(this.__base, service) || this.__base.__hasEvent(service)) && this.__services[service])) {
       return false;
     }
 
@@ -50,7 +56,7 @@ export default class ServicesManager {
       return this.disable.bind(this, service);
     }
 
-    if (!hasMethod(this.__base, service) || !this.__services[service]) {
+    if (!(hasMethod(this.__base, service) || this.__base.__hasEvent(service)) || !this.__services[service]) {
       return function noop() {};
     }
 
@@ -65,7 +71,7 @@ export default class ServicesManager {
         args[_key] = arguments[_key];
       }
 
-      callMethod(self.__base, service, ...args);
+      self.__base.__callMethod(service, ...args);
     }
 
     add(this.__base.$id, serviceHandler);
@@ -94,6 +100,22 @@ export default class ServicesManager {
     remove(this.__base.$id);
   }
 
+  toggle(service, force) {
+    if (typeof force !== 'undefined') {
+      if (force && !this.has(service)) {
+        this.enable(service);
+      }
+
+      if (!force && this.has(service)) {
+        this.disable(service);
+      }
+    } else if (this.has(service)) {
+      this.disable(service);
+    } else {
+      this.enable(service);
+    }
+  }
+
   register(name, useFunction) {
     this.__customServices[name] = useFunction;
   }

package/Base/utils.d.ts

@@ -9,14 +9,6 @@
  * @return {Boolean}
  */
 export function hasMethod(obj: any, name: string): boolean;
-/**
- * Call the given method while applying the given arguments.
- *
- * @param {Base}   instance The Base instance on which to trigger the method.
- * @param {String} method   The method to call.
- * @param {...any} args     The arguments to pass to the method.
- */
-export function callMethod(instance: Base, method: string, ...args: any[]): import("./index.js").default;
 /**
  * Get a list of elements based on the name of a component.
  *

package/Base/utils.js

@@ -1,31 +1,6 @@
 export function hasMethod(obj, name) {
   return typeof obj[name] === 'function';
 }
-export function callMethod(instance, method) {
-  for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    args[_key - 2] = arguments[_key];
-  }
-
-  instance.__debug('callMethod', method, ...args);
-
-  if (method === 'destroyed' && !instance.$isMounted || method === 'mounted' && instance.$isMounted) {
-    instance.__debug('not', method, 'because the method has already been triggered once.');
-
-    return instance;
-  }
-
-  instance.$emit(method, ...args);
-
-  if (!hasMethod(instance, method)) {
-    return instance;
-  }
-
-  instance[method].call(instance, ...args);
-
-  instance.__debug(method, instance, ...args);
-
-  return instance;
-}
 export function getComponentElements(nameOrSelector) {
   var element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
   var selector = "[data-component=\"".concat(nameOrSelector, "\"]");

package/README.md

@@ -15,27 +15,31 @@ Install the latest version via NPM:
 npm install @studiometa/js-toolkit
 ```
 
+## Concept
+
+[] todo
+
 ## Usage
 
 Import the `Base` class and extend it to create your components:
 
 ```js
-import { Base } from '@studiometa/js-toolkit';
-import Modal from '@studiometa/ui/Modal';
+import { Base, createApp } from '@studiometa/js-toolkit';
 
-class Component {
+class Component extends Base {
   static config = {
     name: 'Component',
   }
+
+  sayHello() {
+    console.log('Hello!');
+  }
 }
 
 class App extends Base {
   static config = {
     name: 'App',
-    log: true,
-    debug: true,
     components: {
-      Modal,
       Component,
     },
     refs: ['btn', 'items[]'],
@@ -51,16 +55,16 @@ class App extends Base {
     // Options
     this.$options.name; // 'App'
     this.$options.log; // true
-    this.$options.debug; // true
+    this.$options.debug; // false
     this.$options.foo // ''
     this.$options.bar // 'bar'
 
     // Children
-    this.$children.Modal; // Array<Modal>
+    this.$children.Component; // Array<Component>
 
     // DOM references
     this.$refs.btn; // <button data-ref="btn"></button>
-    this.$refs.items; // <li data-ref="items[]"></li>
+    this.$refs.items[0]; // <li data-ref="items[]"></li>
   }
 
   destroyed() {
@@ -76,9 +80,15 @@ class App extends Base {
   }
 }
 
-export default new App(document.querySelector('#app'));
+export default createApp(App, document.body);
 ```
 
-Read the [documentation](https://js-toolkit.meta.fr/) to learn more.
+Read the [documentation](https://js-toolkit.studiometa.dev/) to learn more.
+
+## Contribution
+
+This projects follows the [Git Flow](https://github.com/petervanderdoes/gitflow-avh) methodology to manage its branches and features.
 
+The packages from this project are managed with NPM workspaces.
 
+The files are linted with ESLint, type checked with TypeScript and formatted with Prettier.

package/decorators/index.d.ts

@@ -4,4 +4,6 @@ import withDrag from "./withDrag.js";
 import withExtraConfig from "./withExtraConfig.js";
 import withIntersectionObserver from "./withIntersectionObserver.js";
 import withMountWhenInView from "./withMountWhenInView.js";
-export { withBreakpointManager, withBreakpointObserver, withDrag, withExtraConfig, withIntersectionObserver, withMountWhenInView };
+import withScrolledInView from "./withScrolledInView.js";
+import withVue2 from "./withVue2.js";
+export { withBreakpointManager, withBreakpointObserver, withDrag, withExtraConfig, withIntersectionObserver, withMountWhenInView, withScrolledInView, withVue2 };

package/decorators/index.js

@@ -4,4 +4,6 @@ import withDrag from './withDrag.js';
 import withExtraConfig from './withExtraConfig.js';
 import withIntersectionObserver from './withIntersectionObserver.js';
 import withMountWhenInView from './withMountWhenInView.js';
-export { withBreakpointManager, withBreakpointObserver, withDrag, withExtraConfig, withIntersectionObserver, withMountWhenInView };
+import withScrolledInView from './withScrolledInView.js';
+import withVue2 from './withVue2.js';
+export { withBreakpointManager, withBreakpointObserver, withDrag, withExtraConfig, withIntersectionObserver, withMountWhenInView, withScrolledInView, withVue2 };

package/decorators/withDrag.d.ts

@@ -4,7 +4,7 @@
  * @typedef {import('../services/drag').DragServiceOptions} DragServiceOptions
  */
 /**
- * @typedef {DragServiceOptions & { target: (this:Base) => HTMLElement }} DragDecoratorOptions
+ * @typedef {DragServiceOptions & { target?: (this:Base, Base) => HTMLElement }} DragDecoratorOptions
  */
 /**
  * Add dragging capabilities to a component.
@@ -14,10 +14,10 @@
  * @param {DragDecoratorOptions} options
  * @return {T}
  */
-export default function withDrag<T extends typeof import("../Base").default>(BaseClass: T, options?: DragDecoratorOptions): T;
+export default function withDrag<T extends typeof import("../Base").default>(BaseClass: T, { target, ...options }?: DragDecoratorOptions): T;
 export type Base = import('../Base').default;
 export type BaseConstructor = import('../Base').BaseConstructor;
 export type DragServiceOptions = import('../services/drag').DragServiceOptions;
 export type DragDecoratorOptions = import("../services/drag.js").DragServiceOptions & {
-    target: (this: Base) => HTMLElement;
+    target?: (this: import("../Base").default, Base: any) => HTMLElement;
 };

package/decorators/withDrag.js

@@ -2,23 +2,17 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["target"];
 import useDrag from '../services/drag.js';
 export default function withDrag(BaseClass) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    target() {
-      return this.$el;
-    }
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      {
+    target = instance => instance.$el
+  } = _ref,
+      options = _objectWithoutProperties(_ref, _excluded);
 
-  };
   return class extends BaseClass {
     constructor(el) {
       super(el);
       this.$on('mounted', () => {
-        var {
-          target
-        } = options,
-            otherOptions = _objectWithoutProperties(options, _excluded);
-
-        var boundUseDrag = useDrag.bind(undefined, target.call(this), otherOptions);
-        this.$services.register('dragged', boundUseDrag);
+        this.$services.register('dragged', useDrag.bind(undefined, target.call(this, this), options));
         this.$services.enable('dragged');
       });
       this.$on('destroyed', () => {

package/decorators/withIntersectionObserver.js

@@ -23,10 +23,7 @@ export default function withIntersectionObserver(BaseClass) {
       }
 
       this.$observer = new IntersectionObserver(entries => {
-        this.__debug('intersected', entries);
-
-        this.$emit('intersected', entries);
-        this.intersected(entries);
+        this.__callMethod('intersected', entries);
       }, _objectSpread(_objectSpread({}, defaultOptions), this.$options.intersectionObserver || {}));
       this.$on('mounted', () => {
         this.$observer.observe(this.$el);

package/decorators/withMountWhenInView.d.ts

@@ -5,7 +5,7 @@
  */
 /**
  * @typedef {Object} WithMountWhenInViewOptions
- * @property {Object} intersectionObserver
+ * @property {IntersectionObserverInit} intersectionObserver
  */
 /**
  * @typedef {Object} WithMountWhenInViewInterface
@@ -17,15 +17,15 @@
  *
  * @template {BaseConstructor} T
  * @param {T} BaseClass The Base class to extend.
- * @param {Object} [defaultOptions] The options for the IntersectionObserver instance.
+ * @param {IntersectionObserverInit} [defaultOptions] The options for the IntersectionObserver instance.
  * @return {T}
  */
-export default function withMountWhenInView<T extends typeof import("../Base").default>(BaseClass: T, defaultOptions?: any): T;
+export default function withMountWhenInView<T extends typeof import("../Base").default>(BaseClass: T, defaultOptions?: IntersectionObserverInit): T;
 export type Base = import('../Base').default;
 export type BaseOptions = import('../Base').BaseOptions;
 export type BaseConstructor = import('../Base').BaseConstructor;
 export type WithMountWhenInViewOptions = {
-    intersectionObserver: any;
+    intersectionObserver: IntersectionObserverInit;
 };
 export type WithMountWhenInViewInterface = {
     terminated: () => void;

package/decorators/withMountWhenInView.js

@@ -6,6 +6,10 @@ 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; }
 
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
 export default function withMountWhenInView(BaseClass) {
   var _class, _isVisible, _observer, _temp, _BaseClass$config$nam, _BaseClass$config, _BaseClass$config2;
 
@@ -16,12 +20,12 @@ export default function withMountWhenInView(BaseClass) {
     constructor(element) {
       super(element);
 
-      _isVisible.set(this, {
+      _classPrivateFieldInitSpec(this, _isVisible, {
         writable: true,
         value: false
       });
 
-      _observer.set(this, {
+      _classPrivateFieldInitSpec(this, _observer, {
         writable: true,
         value: void 0
       });