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

package/Base/managers/EventsManager.d.ts

@@ -0,0 +1,190 @@
+/**
+ * @typedef {import('../index.js').default} Base
+ * @typedef {import('./ChildrenManager.js').default} ChildrenManager
+ */
+/**
+ * Event management class.
+ */
+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
+     * __id-selector          => IdSelector
+     * .complex[class^ ="__"] => ComplexClass
+     * ```
+     *
+     * @param {string} name
+     * @return {string}
+     */
+    static normalizeName(name: string): string;
+    /**
+     * Normalize the event names from PascalCase to kebab-case.
+     *
+     * @param {string} name
+     * @return {string}
+     */
+    static normalizeEventName(name: string): string;
+    /**
+     * Class constructor.
+     *
+     * @param {HTMLElement} rootElement
+     * @param {Base} base
+     */
+    constructor(rootElement: HTMLElement, base: Base);
+    /**
+     * @type {HTMLElement}
+     * @private
+     */
+    private __rootElement;
+    /**
+     * @type {Base}
+     * @private
+     */
+    private __base;
+    /**
+     * @type {WeakMap}
+     * @private
+     */
+    private __methodsCache;
+    /**
+     * Event listener object for the root element.
+     *
+     * @type {EventListenerObject}
+     */
+    __rootElementHandler: EventListenerObject;
+    /**
+     * Event listener object for the refs.
+     *
+     * @type {EventListenerObject}
+     */
+    __refsHandler: EventListenerObject;
+    /**
+     * Event listener object for the children.
+     *
+     * @type {EventListenerObject}
+     */
+    __childrenHandler: EventListenerObject;
+    /**
+     * Manage a ref event methods.
+     *
+     * @param  {string} name
+     *   The name of the ref.
+     * @param  {HTMLElement[]} elements
+     *   The elements of the ref.
+     * @param  {'add'|'remove'} [mode]
+     *   The action to perform: add or remove the event listeners.
+     *
+     * @return {void}
+     * @private
+     */
+    private __manageRef;
+    /**
+     * Bind event methods to the given ref elements.
+     *
+     * @param {string} name
+     *   The name of the ref.
+     * @param {HTMLElement[]} elements
+     *   The elements of the ref.
+     *
+     * @return {void}
+     */
+    bindRef(name: string, elements: HTMLElement[]): void;
+    /**
+     * Bind event methods to the given ref elements.
+     *
+     * @param {string} name
+     *   The name of the ref.
+     * @param {HTMLElement[]} elements
+     *   The elements of the ref.
+     *
+     * @return {void}
+     */
+    unbindRef(name: string, elements: HTMLElement[]): void;
+    /**
+     * Manage event methods to the given child instance.
+     *
+     * @param {string} name
+     *   The name of the ref.
+     * @param {Base} instance
+     *   A base instance.
+     * @param {'add'|'remove'} [mode]
+     *   The action to perform: add or remove the event listeners.
+     *
+     * @return {void}
+     * @private
+     */
+    private __manageChild;
+    /**
+     * Bind event methods to the given child instance.
+     *
+     * @param {string} name
+     *   The name of the ref.
+     * @param {Base} instance
+     *   A base instance.
+     *
+     * @return {void}
+     */
+    bindChild(name: string, instance: Base): void;
+    /**
+     * Unbind event methods to the given child instance.
+     *
+     * @param {string} name
+     *   The name of the ref.
+     * @param {Base} instance
+     *   A base instance.
+     *
+     * @return {void}
+     */
+    unbindChild(name: string, instance: Base): void;
+    /**
+     * Manage event methods on the root element.
+     *
+     * @param {'add'|'remove'} [mode]
+     *   The action to perform: add or remove the event listeners.
+     *
+     * @return {void}
+     * @private
+     */
+    private __manageRootElement;
+    /**
+     * Bind event methods on the root element.
+     *
+     * @return {void}
+     */
+    bindRootElement(): void;
+    /**
+     * Unbind event method from the root element.
+     *
+     * @return {void}
+     */
+    unbindRootElement(): void;
+    /**
+     * Get the event name from the given method and its tied ref or children name.
+     *
+     * @param {string} method
+     * @param {string} name
+     * @return {string}
+     * @private
+     */
+    private __getEventNameByMethod;
+    /**
+     * Get the base instance methods matching the `onSomething` pattern.
+     *
+     * @param {string} [name]
+     * @return {string[]}
+     * @private
+     */
+    private __getEventMethodsByName;
+}
+export type Base = import('../index.js').default;
+export type ChildrenManager = import('./ChildrenManager.js').default;

package/Base/managers/EventsManager.js

@@ -0,0 +1,195 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import getAllProperties from '../../utils/object/getAllProperties.js';
+import RefsManager from './RefsManager.js';
+export default class EventsManager {
+  constructor(rootElement, base) {
+    _defineProperty(this, "__rootElement", void 0);
+
+    _defineProperty(this, "__base", void 0);
+
+    _defineProperty(this, "__methodsCache", new Map());
+
+    _defineProperty(this, "__rootElementHandler", {
+      handleEvent: event => {
+        var normalizedEventName = EventsManager.normalizeName(event.type);
+        var method = "on".concat(normalizedEventName);
+
+        this.__base[method](event);
+      }
+    });
+
+    _defineProperty(this, "__refsHandler", {
+      handleEvent: event => {
+        var ref = event.currentTarget;
+        var refName = RefsManager.normalizeRefName(ref.dataset.ref);
+        var normalizedRefName = EventsManager.normalizeName(refName);
+        var normalizedEventName = EventsManager.normalizeName(event.type);
+        var method = "on".concat(normalizedRefName).concat(normalizedEventName);
+        var index = 0;
+
+        if (Array.isArray(this.__base.$refs[refName])) {
+          index = this.__base.$refs[refName].indexOf(ref);
+        }
+
+        this.__base[method](event, index);
+      }
+    });
+
+    _defineProperty(this, "__childrenHandler", {
+      handleEvent: event => {
+        var child = event.currentTarget.__base__;
+        var childName;
+        var index = 0;
+        var childrenManager = this.__base.$children;
+        childrenManager.registeredNames.find(name => {
+          if (childrenManager[name].includes(child)) {
+            childName = name;
+            index = childrenManager[name].indexOf(child);
+            return true;
+          }
+
+          return false;
+        });
+        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 : [];
+
+        this.__base[method](...args, index, event);
+      }
+    });
+
+    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) {
+    var mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'add';
+    var action = "".concat(mode, "EventListener");
+
+    var methods = this.__getEventMethodsByName(name);
+
+    methods.forEach(method => {
+      var event = this.__getEventNameByMethod(method, name);
+
+      elements.forEach(element => element[action](event, this.__refsHandler));
+    });
+  }
+
+  bindRef(name, elements) {
+    this.__manageRef(name, elements);
+  }
+
+  unbindRef(name, elements) {
+    this.__manageRef(name, elements, 'remove');
+  }
+
+  __manageChild(name, instance) {
+    var mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'add';
+    var action = mode === 'add' ? '$on' : '$off';
+
+    var methods = this.__getEventMethodsByName(name);
+
+    methods.forEach(method => {
+      var event = this.__getEventNameByMethod(method, name);
+
+      instance[action](event, this.__childrenHandler);
+    });
+  }
+
+  bindChild(name, instance) {
+    this.__manageChild(name, instance);
+  }
+
+  unbindChild(name, instance) {
+    this.__manageChild(name, instance, 'remove');
+  }
+
+  __manageRootElement() {
+    var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'add';
+    var modeMethod = "".concat(mode, "EventListener");
+
+    var methods = this.__getEventMethodsByName();
+
+    methods.forEach(method => {
+      var event = this.__getEventNameByMethod(method);
+
+      this.__rootElement[modeMethod](event, this.__rootElementHandler);
+    });
+  }
+
+  bindRootElement() {
+    this.__manageRootElement();
+  }
+
+  unbindRootElement() {
+    this.__manageRootElement('remove');
+  }
+
+  __getEventNameByMethod(method) {
+    var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    var normalizedName = EventsManager.normalizeName(name);
+    var regex = new RegExp("^on".concat(normalizedName, "([A-Z].*)$"));
+    var [, event] = method.match(regex);
+    return EventsManager.normalizeEventName(event);
+  }
+
+  __getEventMethodsByName() {
+    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(key);
+
+    if (!methods) {
+      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(key, methods);
+    }
+
+    return methods;
+  }
+
+  static normalizeName(name) {
+    return name.replace(/[A-Z]([A-Z].*)/g, c => c.toLowerCase()).replace(/[^a-zA-Z\d\s:]/g, ' ').replace(/(^\w|\s+\w)/g, c => c.trim().toUpperCase()).trim();
+  }
+
+  static normalizeEventName(name) {
+    return name.replace(/[A-Z]/g, c => "-".concat(c.toLowerCase())).replace(/^-/, '');
+  }
+
+}

package/Base/managers/OptionsManager.d.ts

@@ -0,0 +1,120 @@
+/**
+ * @typedef {import('../index.js').BaseConfig} BaseConfig
+ * @typedef {StringConstructor|NumberConstructor|BooleanConstructor|ArrayConstructor|ObjectConstructor} OptionType
+ * @typedef {{ type: OptionType, default: String|Number|Boolean|(() => Array|Object)}} OptionWithDefault
+ * @typedef {OptionType | OptionWithDefault} OptionValue
+ * @typedef {{ [name:string]: OptionValue }} OptionsSchema
+ * @typedef {{ [optionName:string]: any }} OptionsInterface
+ */
+/**
+ * Class options to manage options as data attributes on an HTML element.
+ * @augments {OptionsInterface}
+ */
+export default class OptionsManager {
+    /**
+     * List of allowed types.
+     * @type {Array}
+     * @private
+     */
+    private static types;
+    /**
+     * Property name cache.
+     * @type {Map}
+     * @private
+     */
+    private static __propertyNameCache;
+    /**
+     * Get a property name.
+     *
+     * @param  {string} name
+     * @return {string}
+     * @private
+     */
+    private static __getPropertyName;
+    /**
+     * Class constructor.
+     *
+     * @param {HTMLElement}   element The HTML element storing the options.
+     * @param {OptionsSchema} schema  A Base class config options.
+     * @param {BaseConfig}    baseConfig  A Base class config.
+     */
+    constructor(element: HTMLElement, schema: OptionsSchema, baseConfig: BaseConfig);
+    /**
+     * The HTML element holding the options attributes.
+     * @type {HTMLElement}
+     * @private
+     */
+    private __element;
+    /**
+     * An object to store Array and Object values for reference.
+     * @type {Object}
+     * @private
+     */
+    private __values;
+    /**
+     * The default values to return for each available type.
+     * @type {Object}
+     * @private
+     */
+    private __defaultValues;
+    /**
+     * Default value for the name property.
+     * @type {string}
+     */
+    name: string;
+    /**
+     * Default value for the debug property.
+     * @type {boolean}
+     */
+    debug: boolean;
+    /**
+     * Default value for the log property.
+     * @type {Boolean}
+     */
+    log: boolean;
+    /**
+     * Register an option.
+     *
+     * @param  {string} name
+     * @param  {OptionValue} config
+     * @return {void}
+     * @private
+     */
+    private __register;
+    /**
+     * Get an option value.
+     *
+     * @param {String} name The option name.
+     * @param {OptionType} type The option data's type.
+     * @param {any} defaultValue The default value for this option.
+     */
+    get(name: string, type: OptionType, defaultValue: any): any;
+    /**
+     * Set an option value.
+     *
+     * @param {String} name The option name.
+     * @param {OptionType} type The option data's type.
+     * @param {any} value The new value for this option.
+     */
+    set(name: string, type: OptionType, value: any, defaultValue: any): void;
+    /**
+     * Test if the element has a given property.
+     *
+     * @param  {string} prop
+     * @return {boolean}
+     */
+    __hasProperty(prop: string): boolean;
+}
+export type BaseConfig = import('../index.js').BaseConfig;
+export type OptionType = StringConstructor | NumberConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor;
+export type OptionWithDefault = {
+    type: OptionType;
+    default: string | number | boolean | (() => any[] | any);
+};
+export type OptionValue = OptionType | OptionWithDefault;
+export type OptionsSchema = {
+    [name: string]: OptionValue;
+};
+export type OptionsInterface = {
+    [optionName: string]: any;
+};

package/Base/managers/OptionsManager.js

@@ -0,0 +1,180 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import deepmerge from 'deepmerge';
+import isObject from '../../utils/object/isObject.js';
+export default class OptionsManager {
+  constructor(element, schema, baseConfig) {
+    var _baseConfig$debug, _baseConfig$log;
+
+    _defineProperty(this, "__element", void 0);
+
+    _defineProperty(this, "__values", {});
+
+    _defineProperty(this, "__defaultValues", {
+      String: '',
+      Number: 0,
+      Boolean: false,
+      Array: () => [],
+      Object: () => ({})
+    });
+
+    _defineProperty(this, "name", 'Base');
+
+    _defineProperty(this, "debug", false);
+
+    _defineProperty(this, "log", false);
+
+    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,
+      default: (_baseConfig$debug = baseConfig.debug) !== null && _baseConfig$debug !== void 0 ? _baseConfig$debug : false
+    };
+    schema.log = {
+      type: Boolean,
+      default: (_baseConfig$log = baseConfig.log) !== null && _baseConfig$log !== void 0 ? _baseConfig$log : false
+    };
+    Object.entries(schema).forEach(_ref => {
+      var [name, config] = _ref;
+
+      this.__register(name, config);
+    });
+    return this;
+  }
+
+  __register(name, config) {
+    var hasDefaultValue = !OptionsManager.types.includes(config);
+    var type = hasDefaultValue ? config.type : config;
+
+    if (!OptionsManager.types.includes(type)) {
+      throw new Error("The \"".concat(name, "\" option has an invalid type. The allowed types are: String, Number, Boolean, Array and Object."));
+    }
+
+    var defaultValue = hasDefaultValue ? config.default : this.__defaultValues[type.name];
+
+    if ((type === Array || type === Object) && typeof defaultValue !== 'function') {
+      throw new Error("The default value for options of type \"".concat(type.name, "\" must be returned by a function."));
+    }
+
+    Object.defineProperty(this, name, {
+      get: () => {
+        return this.get(name, type, defaultValue);
+      },
+      set: value => {
+        this.set(name, type, value, defaultValue);
+      },
+      enumerable: true
+    });
+  }
+
+  get(name, type, defaultValue) {
+    var propertyName = OptionsManager.__getPropertyName(name);
+
+    var hasProperty = this.__hasProperty(propertyName);
+
+    if (type === Boolean) {
+      if (defaultValue) {
+        var negatedPropertyName = OptionsManager.__getPropertyName(name, 'No');
+
+        var hasNegatedProperty = this.__hasProperty(negatedPropertyName);
+
+        return !hasNegatedProperty;
+      }
+
+      return hasProperty || defaultValue;
+    }
+
+    var value = this.__element.dataset[propertyName];
+
+    if (type === Number) {
+      return hasProperty ? Number(value) : defaultValue;
+    }
+
+    if (type === Array || type === Object) {
+      var val = deepmerge(defaultValue(), hasProperty ? JSON.parse(value) : this.__defaultValues[type.name]());
+
+      if (!this.__values[name]) {
+        this.__values[name] = val;
+      }
+
+      return this.__values[name];
+    }
+
+    return hasProperty ? value : defaultValue;
+  }
+
+  set(name, type, value, defaultValue) {
+    var propertyName = OptionsManager.__getPropertyName(name);
+
+    if (value.constructor.name !== type.name) {
+      var val = Array.isArray(value) || isObject(value) ? JSON.stringify(value) : value;
+      throw new TypeError("The \"".concat(val, "\" value for the \"").concat(name, "\" option must be of type \"").concat(type.name, "\""));
+    }
+
+    switch (type) {
+      case Boolean:
+        if (defaultValue) {
+          var negatedPropertyName = OptionsManager.__getPropertyName(name, 'No');
+
+          if (value) {
+            delete this.__element.dataset[negatedPropertyName];
+          } else {
+            this.__element.dataset[negatedPropertyName] = '';
+          }
+        } else if (value) {
+          this.__element.dataset[propertyName] = '';
+        } else {
+          delete this.__element.dataset[propertyName];
+        }
+
+        break;
+
+      case Array:
+      case Object:
+        this.__values[name] = value;
+        break;
+
+      default:
+        this.__element.dataset[propertyName] = value;
+    }
+  }
+
+  __hasProperty(prop) {
+    return typeof this.__element.dataset[prop] !== 'undefined';
+  }
+
+  static __getPropertyName(name) {
+    var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    var key = name + prefix;
+
+    if (OptionsManager.__propertyNameCache.has(key)) {
+      return OptionsManager.__propertyNameCache.get(key);
+    }
+
+    var propertyName = "option".concat(prefix).concat(name.replace(/^\w/, c => c.toUpperCase()));
+
+    OptionsManager.__propertyNameCache.set(key, propertyName);
+
+    return propertyName;
+  }
+
+}
+
+_defineProperty(OptionsManager, "types", [String, Number, Boolean, Array, Object]);
+
+_defineProperty(OptionsManager, "__propertyNameCache", new Map());