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

package/Base/managers/ServicesManager.js

@@ -1,6 +1,9 @@
-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 usePointer from '../../services/pointer.js';
 import useRaf from '../../services/raf.js';
 import useResize from '../../services/resize.js';
@@ -16,99 +19,97 @@ 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);
+  }
 
-var ServicesManager = function () {
-  function ServicesManager(instance) {
-    _classCallCheck(this, ServicesManager);
-
+  constructor(instance) {
     _defineProperty(this, "__base", void 0);
 
-    this.__base = instance;
-  }
+    _defineProperty(this, "__customServices", {});
 
-  _createClass(ServicesManager, [{
-    key: "has",
-    value: function has(service) {
-      if (!hasMethod(this.__base, service) && !SERVICES_MAP[service]) {
-        return false;
+    Object.defineProperties(this, {
+      __base: {
+        enumerable: false,
+        writable: false,
+        value: instance
       }
+    });
+  }
 
-      var _SERVICES_MAP$service = SERVICES_MAP[service](),
-          has = _SERVICES_MAP$service.has;
-
-      return has(this.__base.$id);
+  has(service) {
+    if (!hasMethod(this.__base, service) && !this.__services[service]) {
+      return false;
     }
-  }, {
-    key: "enable",
-    value: function enable(service) {
-      if (this.has(service)) {
-        return this.disable.bind(this, service);
-      }
 
-      if (!hasMethod(this.__base, service) || !SERVICES_MAP[service]) {
-        return function noop() {};
-      }
+    var {
+      has
+    } = this.__services[service]();
+
+    return has(this.__base.$id);
+  }
+
+  enable(service) {
+    if (this.has(service)) {
+      return this.disable.bind(this, service);
+    }
 
-      var _SERVICES_MAP$service2 = SERVICES_MAP[service](),
-          add = _SERVICES_MAP$service2.add;
+    if (!hasMethod(this.__base, service) || !this.__services[service]) {
+      return function noop() {};
+    }
 
-      var self = this;
+    var {
+      add
+    } = this.__services[service]();
 
-      function serviceHandler() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
+    var self = this;
 
-        callMethod.apply(void 0, [self.__base, service].concat(args));
+    function serviceHandler() {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
       }
 
-      add(this.__base.$id, serviceHandler);
-      return this.disable.bind(this, service);
+      callMethod(self.__base, service, ...args);
     }
-  }, {
-    key: "enableAll",
-    value: function enableAll() {
-      var _this = this;
-
-      return Object.keys(SERVICES_MAP).map(function (serviceName) {
-        return _this.enable(serviceName);
-      });
-    }
-  }, {
-    key: "disableAll",
-    value: function disableAll() {
-      var _this2 = this;
-
-      Object.keys(SERVICES_MAP).forEach(function (serviceName) {
-        _this2.disable(serviceName);
-      });
-    }
-  }, {
-    key: "disable",
-    value: function disable(service) {
-      if (!SERVICES_MAP[service]) {
-        return;
-      }
 
-      var _SERVICES_MAP$service3 = SERVICES_MAP[service](),
-          remove = _SERVICES_MAP$service3.remove;
+    add(this.__base.$id, serviceHandler);
+    return this.disable.bind(this, service);
+  }
+
+  enableAll() {
+    return Object.keys(this.__services).map(serviceName => this.enable(serviceName));
+  }
 
-      remove(this.__base.$id);
-    }
-  }, {
-    key: "register",
-    value: function register(name, useFunction) {
-      SERVICES_MAP[name] = useFunction;
+  disableAll() {
+    Object.keys(this.__services).forEach(serviceName => {
+      this.disable(serviceName);
+    });
+  }
+
+  disable(service) {
+    if (!this.__services[service]) {
+      return;
     }
-  }, {
-    key: "unregister",
-    value: function unregister(name) {
-      delete SERVICES_MAP[name];
+
+    var {
+      remove
+    } = this.__services[service]();
+
+    remove(this.__base.$id);
+  }
+
+  register(name, useFunction) {
+    this.__customServices[name] = useFunction;
+  }
+
+  unregister(name) {
+    if (SERVICE_NAMES.includes(name)) {
+      throw new Error("[ServicesManager] The `".concat(name, "` core service can not be unregistered."));
     }
-  }]);
 
-  return ServicesManager;
-}();
+    delete this.__customServices[name];
+  }
 
-export { ServicesManager as default };
-//# sourceMappingURL=ServicesManager.js.map
+}

package/Base/utils.js

@@ -2,13 +2,11 @@ export function hasMethod(obj, name) {
   return typeof obj[name] === 'function';
 }
 export function callMethod(instance, method) {
-  var _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.apply(instance, ['callMethod', method].concat(args));
+  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.');
@@ -16,15 +14,15 @@ export function callMethod(instance, method) {
     return instance;
   }
 
-  instance.$emit.apply(instance, [method].concat(args));
+  instance.$emit(method, ...args);
 
   if (!hasMethod(instance, method)) {
     return instance;
   }
 
-  (_instance$method = instance[method]).call.apply(_instance$method, [instance].concat(args));
+  instance[method].call(instance, ...args);
 
-  instance.__debug.apply(instance, [method, instance].concat(args));
+  instance.__debug(method, instance, ...args);
 
   return instance;
 }
@@ -42,5 +40,4 @@ export function getComponentElements(nameOrSelector) {
   }
 
   return elements;
-}
-//# sourceMappingURL=utils.js.map
+}

package/README.md

@@ -1,8 +1,8 @@
 # JS Toolkit
 
 [![NPM Version](https://img.shields.io/npm/v/@studiometa/js-toolkit.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/js-toolkit/)
-[![Dependency Status](https://img.shields.io/david/studiometa/js-toolkit.svg?label=deps&style=flat-square)](https://david-dm.org/studiometa/js-toolkit)
-[![devDependency Status](https://img.shields.io/david/dev/studiometa/js-toolkit.svg?label=devDeps&style=flat-square)](https://david-dm.org/studiometa/js-toolkit?type=dev)
+[![Size](https://img.shields.io/bundlephobia/minzip/@studiometa/js-toolkit?label=size&style=flat-square)](https://bundlephobia.com/package/@studiometa/js-toolkit)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@studiometa/js-toolkit?style=flat-square)](https://david-dm.org/studiometa/js-toolkit)
 ![Codecov](https://img.shields.io/codecov/c/github/studiometa/js-toolkit?style=flat-square)
 
 > A set of useful little bits of JavaScript to boost your project! 🚀
@@ -15,29 +15,19 @@ Install the latest version via NPM:
 npm install @studiometa/js-toolkit
 ```
 
-The package can be used directly with the [Skypack CDN](https://www.skypack.dev) as follow:
-
-```html
-<script type="module">
-  // Import the Base class
-  import Base from 'https://cdn.skypack.dev/@studiometa/js-toolkit/';
-  // Import the full toolkit
-  import * as components from 'https://cdn.skypack.dev/@studiometa/js-toolkit/components';
-  import * as decorators from 'https://cdn.skypack.dev/@studiometa/js-toolkit/decorators';
-  import * as services from 'https://cdn.skypack.dev/@studiometa/js-toolkit/services';
-  import * as utils from 'https://cdn.skypack.dev/@studiometa/js-toolkit/utils';
-</script>
-```
-
 ## Usage
 
-### Modern JS with bundler
-
-Import the `Base` class to create your components from your `node_modules`:
+Import the `Base` class and extend it to create your components:
 
 ```js
-import Base from '@studiometa/js-toolkit';
-import Modal from '@studiometa/js-toolkit/components/Modal';
+import { Base } from '@studiometa/js-toolkit';
+import Modal from '@studiometa/ui/Modal';
+
+class Component {
+  static config = {
+    name: 'Component',
+  }
+}
 
 class App extends Base {
   static config = {
@@ -46,6 +36,7 @@ class App extends Base {
     debug: true,
     components: {
       Modal,
+      Component,
     },
     refs: ['btn', 'items[]'],
     options: {
@@ -90,53 +81,4 @@ export default new App(document.querySelector('#app'));
 
 Read the [documentation](https://js-toolkit.meta.fr/) to learn more.
 
-### Modern JS in browser
-
-Two modern builds are provided for prototyping purpose, they can be used as follow:
 
-```html
-<script type="module">
-  // Import the Base class
-  import Base from 'https://cdn.skypack.dev/@studiometa/js-toolkit/';
-  // Import the full toolkit
-  import Modal from 'https://cdn.skypack.dev/@studiometa/js-toolkit/components/Modal';
-</script>
-```
-
-### Legacy JS
-
-Two UMD builds are also provided to be used in legacy projects.
-
-```html
-<div id="app">
-  <button data-ref="btn">Add more</button>
-  <input data-ref="input" value="0" readonly />
-  <div data-component="Component"></div>
-</div>
-<script src="https://unpkg.com/@studiometa/js-toolkit/index.umd.js"></script>
-<script>
-  var Component = Base.defineComponent({
-    config: {
-      name: 'Component',
-    },
-  });
-
-  Base.createBase(document.querySelector('#app'), {
-    config: {
-      name: 'App',
-      log: true,
-      components: {
-        Component: Component,
-      },
-    },
-    mounted: function() {
-      this.$log('mounted');
-    },
-    methods: {
-      onBtnClick: function() {
-        this.$refs.input.value = Number(this.$refs.input.value) + 1;
-      },
-    },
-  });
-</script>
-```

package/decorators/index.js

@@ -4,5 +4,4 @@ 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 };
-//# sourceMappingURL=index.js.map
+export { withBreakpointManager, withBreakpointObserver, withDrag, withExtraConfig, withIntersectionObserver, withMountWhenInView };

package/decorators/withBreakpointManager.d.ts

@@ -1,10 +1,10 @@
 /**
  * BreakpointManager class.
- * @template {BaseComponent} T
+ * @template {BaseConstructor} T
  * @param {T} BaseClass
- * @param {Array<[String, BaseComponent]>} breakpoints
+ * @param {Array<[String, BaseConstructor]>} breakpoints
  * @return {T}
  */
-export default function withBreakpointManager<T extends typeof import("../Base").default>(BaseClass: T, breakpoints: Array<[string, BaseComponent]>): T;
+export default function withBreakpointManager<T extends typeof import("../Base").default>(BaseClass: T, breakpoints: Array<[string, BaseConstructor]>): T;
 export type Base = import('../Base').default;
-export type BaseComponent = import('../Base').BaseComponent;
+export type BaseConstructor = import('../Base').BaseConstructor;

package/decorators/withBreakpointManager.js

@@ -1,31 +1,14 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _get from "@babel/runtime/helpers/get";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 import useResize from '../services/resize.js';
 
 function testBreakpoints(breakpoints) {
-  var _useResize$props = useResize().props(),
-      breakpoint = _useResize$props.breakpoint;
-
-  breakpoints.forEach(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-        breakpointKeys = _ref2[0],
-        instance = _ref2[1];
+  var {
+    breakpoint
+  } = useResize().props();
+  breakpoints.forEach(_ref => {
+    var [breakpointKeys, instance] = _ref;
 
     if (breakpointKeys.includes(breakpoint) && !instance.$isMounted) {
-      setTimeout(function () {
-        return instance.$mount();
-      }, 0);
+      setTimeout(() => instance.$mount(), 0);
     } else if (!breakpointKeys.includes(breakpoint) && instance.$isMounted) {
       instance.$destroy();
     }
@@ -33,16 +16,11 @@ function testBreakpoints(breakpoints) {
 }
 
 function mountComponents(instance, breakpoints) {
-  return breakpoints.map(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-        bk = _ref4[0],
-        ComponentClass = _ref4[1];
-
+  return breakpoints.map(_ref2 => {
+    var [bk, ComponentClass] = _ref2;
     var child = new ComponentClass(instance.$el);
     Object.defineProperty(child, '$parent', {
-      get: function get() {
-        return instance.$parent;
-      }
+      get: () => instance.$parent
     });
     return [bk, child];
   });
@@ -58,62 +36,46 @@ export default function withBreakpointManager(BaseClass, breakpoints) {
     throw new Error('[withBreakpointManager] You must define at least 2 breakpoints.');
   }
 
-  var _useResize = useResize(),
-      add = _useResize.add,
-      props = _useResize.props;
+  var {
+    add,
+    props
+  } = useResize();
 
   if (!props().breakpoint) {
     throw new Error("The `BreakpointManager` class requires breakpoints to be defined.");
   }
 
-  return function (_BaseClass) {
-    _inherits(_class, _BaseClass);
-
-    var _super = _createSuper(_class);
-
-    function _class(element) {
-      var _this;
-
-      _classCallCheck(this, _class);
+  return class extends BaseClass {
+    constructor(element) {
+      super(element);
 
-      _this = _super.call(this, element);
-
-      if (!instances.has(_assertThisInitialized(_this))) {
-        instances.set(_assertThisInitialized(_this), mountComponents(_assertThisInitialized(_this), breakpoints));
+      if (!instances.has(this)) {
+        instances.set(this, mountComponents(this, breakpoints));
       }
 
-      add("BreakpointManager-".concat(_this.$id), function () {
-        testBreakpoints(instances.get(_assertThisInitialized(_this)));
+      add("BreakpointManager-".concat(this.$id), () => {
+        testBreakpoints(instances.get(this));
       });
-      _this.instances = instances.get(_assertThisInitialized(_this));
-      return _possibleConstructorReturn(_this, _assertThisInitialized(_this));
+      this.instances = instances.get(this);
+      return this;
     }
 
-    _createClass(_class, [{
-      key: "$mount",
-      value: function $mount() {
-        _get(_getPrototypeOf(_class.prototype), "$mount", this).call(this);
+    $mount() {
+      super.$mount();
+      testBreakpoints(instances.get(this));
+      return this;
+    }
 
-        testBreakpoints(instances.get(this));
-        return this;
+    $destroy() {
+      if (Array.isArray(instances.get(this))) {
+        instances.get(this).forEach(_ref3 => {
+          var [, instance] = _ref3;
+          instance.$destroy();
+        });
       }
-    }, {
-      key: "$destroy",
-      value: function $destroy() {
-        if (Array.isArray(instances.get(this))) {
-          instances.get(this).forEach(function (_ref5) {
-            var _ref6 = _slicedToArray(_ref5, 2),
-                instance = _ref6[1];
 
-            instance.$destroy();
-          });
-        }
-
-        return _get(_getPrototypeOf(_class.prototype), "$destroy", this).call(this);
-      }
-    }]);
+      return super.$destroy();
+    }
 
-    return _class;
-  }(BaseClass);
-}
-//# sourceMappingURL=withBreakpointManager.js.map
+  };
+}

package/decorators/withBreakpointObserver.d.ts

@@ -1,13 +1,13 @@
 /**
  * BreakpointObserver class.
  *
- * @template {BaseComponent} T
+ * @template {BaseConstructor} T
  * @param {T} BaseClass The Base class to extend from.
  * @return {T}
  */
 export default function withBreakpointObserver<T extends typeof import("../Base").default>(BaseClass: T): T;
 export type Base = import('../Base').default;
-export type BaseComponent = import('../Base').BaseComponent;
+export type BaseConstructor = import('../Base').BaseConstructor;
 export type WithBreakpointObserverOptions = {
     activeBreakpoints?: string;
     inactiveBreakpoints?: string;