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

package/Base/managers/RefsManager.d.ts

@@ -0,0 +1,84 @@
+/**
+ * @typedef {import('../index.js').default} Base
+ * @typedef {import('./EventsManager.js').default} EventsManager
+ */
+/**
+ * Refs Manager
+ */
+export default class RefsManager {
+    /**
+     * Normalize the name of ref.
+     *
+     * @param {string} name The original name.
+     * @return {string}     The normalized name.
+     */
+    static normalizeRefName(name: string): string;
+    /**
+     * Class constructor.
+     *
+     * @param {Base} base
+     *   The base instance tied to this manager.
+     * @param {HTMLElement} element
+     *   The root element of a Base component.
+     * @param {string[]} refs
+     *   The list of refs of this component.
+     * @param {EventsManager} eventsManager
+     */
+    constructor(base: Base, element: HTMLElement, refs: string[], eventsManager: EventsManager);
+    /**
+     * @type {HTMLElement}
+     * @private
+     */
+    private __element;
+    /**
+     * @type {string[]}
+     * @private
+     */
+    private __refs;
+    /**
+     * @type {Base}
+     * @private
+     */
+    private __base;
+    /**
+     * @type {EventsManager}
+     * @private
+     */
+    private __eventsManager;
+    /**
+     * Register all refs.
+     *
+     * @return {void}
+     */
+    registerAll(): void;
+    /**
+     * Unregister all refs.
+     *
+     * @return {void}
+     */
+    unregisterAll(): void;
+    /**
+     * Register one ref.
+     *
+     * @param {string} refName The ref name.
+     * @private
+     */
+    private __register;
+    /**
+     * Unregister one ref.
+     *
+     * @param {string} refName The ref name.
+     * @private
+     */
+    private __unregister;
+    /**
+     * Filter refs belonging to the related Base instance.
+     *
+     * @param {HTMLElement} ref The ref to test.
+     * @return {boolean}
+     * @private
+     */
+    private __filterRefsBelongingToInstance;
+}
+export type Base = import('../index.js').default;
+export type EventsManager = import('./EventsManager.js').default;

package/Base/managers/RefsManager.js

@@ -0,0 +1,83 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export default class RefsManager {
+  constructor(base, element, refs, eventsManager) {
+    _defineProperty(this, "__element", void 0);
+
+    _defineProperty(this, "__refs", void 0);
+
+    _defineProperty(this, "__base", void 0);
+
+    _defineProperty(this, "__eventsManager", void 0);
+
+    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() {
+    this.__refs.forEach(refName => this.__register(refName));
+  }
+
+  unregisterAll() {
+    this.__refs.forEach(refName => this.__unregister(refName));
+  }
+
+  __register(refName) {
+    var isMultiple = refName.endsWith('[]');
+    var propName = RefsManager.normalizeRefName(refName);
+    var refs = Array.from(this.__element.querySelectorAll("[data-ref=\"".concat(refName, "\"]"))).filter(ref => this.__filterRefsBelongingToInstance(ref));
+
+    if (!isMultiple && refs.length > 1) {
+      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?');
+    }
+
+    this.__eventsManager.bindRef(refName, refs);
+
+    Object.defineProperty(this, propName, {
+      value: isMultiple || refs.length > 1 ? refs : refs[0],
+      enumerable: true,
+      configurable: true
+    });
+  }
+
+  __unregister(refName) {
+    var propName = RefsManager.normalizeRefName(refName);
+    var refs = Array.isArray(this[propName]) ? this[propName] : [this[propName]];
+
+    this.__eventsManager.unbindRef(refName, refs);
+  }
+
+  static normalizeRefName(name) {
+    return name.endsWith('[]') ? name.replace(/\[\]$/, '') : name;
+  }
+
+  __filterRefsBelongingToInstance(ref) {
+    var ancestor = ref.parentElement;
+
+    while (ancestor && ancestor.dataset.component === undefined) {
+      ancestor = ancestor.parentElement;
+    }
+
+    return ancestor === null || ancestor === this.__element;
+  }
+
+}

package/{abstracts/Base/classes/Services.d.ts → Base/managers/ServicesManager.d.ts}

@@ -4,12 +4,25 @@
 /**
  * Services management for the Base class.
  */
-export default class Services {
+export default class ServicesManager {
     /**
      * Class constructor.
      * @param {Base} instance The Base instance.
      */
     constructor(instance: Base);
+    /**
+     * @type {Base}
+     * @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.
      *
@@ -46,20 +59,22 @@ export default class Services {
     /**
      * 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;
-    #private;
 }
 export type Base = import('../index').default;
-export type ServiceInterface = import('../../../services').ServiceInterface;
+export type ServiceInterface = import('../../services').ServiceInterface;
 export type ServiceName = keyof {
-    [x: string]: () => import("../../../services").ServiceInterface;
+    [x: string]: () => import("../../services").ServiceInterface;
 };

package/Base/managers/ServicesManager.js

@@ -0,0 +1,115 @@
+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';
+import useScroll from '../../services/scroll.js';
+import useKey from '../../services/key.js';
+import useLoad from '../../services/load.js';
+import { hasMethod, callMethod } from '../utils.js';
+var SERVICES_MAP = {
+  scrolled: useScroll,
+  resized: useResize,
+  ticked: useRaf,
+  moved: usePointer,
+  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", {});
+
+    Object.defineProperties(this, {
+      __base: {
+        enumerable: false,
+        writable: false,
+        value: instance
+      }
+    });
+  }
+
+  has(service) {
+    if (!hasMethod(this.__base, service) && !this.__services[service]) {
+      return false;
+    }
+
+    var {
+      has
+    } = this.__services[service]();
+
+    return has(this.__base.$id);
+  }
+
+  enable(service) {
+    if (this.has(service)) {
+      return this.disable.bind(this, service);
+    }
+
+    if (!hasMethod(this.__base, service) || !this.__services[service]) {
+      return function noop() {};
+    }
+
+    var {
+      add
+    } = this.__services[service]();
+
+    var self = this;
+
+    function serviceHandler() {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      callMethod(self.__base, service, ...args);
+    }
+
+    add(this.__base.$id, serviceHandler);
+    return this.disable.bind(this, service);
+  }
+
+  enableAll() {
+    return Object.keys(this.__services).map(serviceName => this.enable(serviceName));
+  }
+
+  disableAll() {
+    Object.keys(this.__services).forEach(serviceName => {
+      this.disable(serviceName);
+    });
+  }
+
+  disable(service) {
+    if (!this.__services[service]) {
+      return;
+    }
+
+    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."));
+    }
+
+    delete this.__customServices[name];
+  }
+
+}

package/{abstracts/Base → Base}/utils.d.ts

@@ -1,35 +1,6 @@
 /**
  * @typedef {import('./index.js').default} Base
- * @typedef {import('./index.js').BaseConfig} BaseConfig
  */
-/**
- * Get the config from a Base instance, either the new static one or the old getter one.
- *
- * @param  {Base}       instance The instance to get the config from.
- * @return {BaseConfig}         A Base class configuration object.
- */
-export function getConfig(instance: Base): BaseConfig;
-/**
- * Display a console warning for the given instance.
- *
- * @param {Base}      instance A Base instance.
- * @param {...String} msg   Values to display in the console.
- */
-export function warn(instance: Base, ...msg: string[]): void;
-/**
- * Display a console log for the given instance.
- *
- * @param {Base}   instance The instance to log information from.
- * @param {...any} msg      The data to print to the console.
- */
-export function log(instance: Base, ...msg: any[]): void;
-/**
- * Verbose debug for the component.
- *
- * @param {Base}   instance The instance to debug.
- * @param {...any} args     The data to print.
- */
-export function debug(instance: Base, ...args: any[]): void;
 /**
  * Test if an object has a method.
  *
@@ -58,4 +29,3 @@ export function callMethod(instance: Base, method: string, ...args: any[]): impo
  */
 export function getComponentElements(nameOrSelector: string, element?: HTMLElement | Document): Array<HTMLElement>;
 export type Base = import('./index.js').default;
-export type BaseConfig = import('./index.js').BaseConfig;

package/Base/utils.js

@@ -0,0 +1,43 @@
+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, "\"]");
+  var elements = [];
+
+  try {
+    elements = Array.from(element.querySelectorAll(selector));
+  } catch (_unused) {}
+
+  if (elements.length === 0) {
+    elements = Array.from(element.querySelectorAll(nameOrSelector));
+  }
+
+  return elements;
+}

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("../abstracts/Base").default>(BaseClass: T, breakpoints: Array<[string, BaseComponent]>): T;
-export type Base = import('../abstracts/Base').default;
-export type BaseComponent = import('../abstracts/Base').BaseComponent;
+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 BaseConstructor = import('../Base').BaseConstructor;