@studiometa/js-toolkit 2.0.0-beta.1 → 2.0.0-beta.13

package/Base/managers/ServicesManager.cjs

@@ -0,0 +1,132 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/Base/managers/ServicesManager.js
+var ServicesManager_exports = {};
+__export(ServicesManager_exports, {
+  default: () => ServicesManager
+});
+var import_pointer = __toESM(require("../../services/pointer.cjs"), 1);
+var import_raf = __toESM(require("../../services/raf.cjs"), 1);
+var import_resize = __toESM(require("../../services/resize.cjs"), 1);
+var import_scroll = __toESM(require("../../services/scroll.cjs"), 1);
+var import_key = __toESM(require("../../services/key.cjs"), 1);
+var import_load = __toESM(require("../../services/load.cjs"), 1);
+var import_utils = require("../utils.cjs");
+var SERVICES_MAP = {
+  scrolled: import_scroll.default,
+  resized: import_resize.default,
+  ticked: import_raf.default,
+  moved: import_pointer.default,
+  keyed: import_key.default,
+  loaded: import_load.default
+};
+var SERVICE_NAMES = Object.keys(SERVICES_MAP);
+var ServicesManager = class {
+  __base;
+  __customServices = {};
+  get __services() {
+    return {
+      ...this.__customServices,
+      ...SERVICES_MAP
+    };
+  }
+  constructor(instance) {
+    Object.defineProperties(this, {
+      __base: {
+        enumerable: false,
+        writable: false,
+        value: instance
+      }
+    });
+  }
+  has(service) {
+    if (!(((0, import_utils.hasMethod)(this.__base, service) || this.__base.__hasEvent(service)) && this.__services[service])) {
+      return false;
+    }
+    const { has } = this.__services[service]();
+    return has(this.__base.$id);
+  }
+  enable(service) {
+    if (this.has(service)) {
+      return this.disable.bind(this, service);
+    }
+    if (!((0, import_utils.hasMethod)(this.__base, service) || this.__base.__hasEvent(service)) || !this.__services[service]) {
+      return function noop() {
+      };
+    }
+    const { add } = this.__services[service]();
+    const self = this;
+    function serviceHandler(...args) {
+      self.__base.__callMethod(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;
+    }
+    const { remove } = this.__services[service]();
+    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;
+    this.__base.__addEmits(name);
+  }
+  unregister(name) {
+    if (SERVICE_NAMES.includes(name)) {
+      throw new Error(`[ServicesManager] The \`${name}\` core service can not be unregistered.`);
+    }
+    this.__base.__removeEmits(name);
+    delete this.__customServices[name];
+  }
+};
+module.exports = __toCommonJS(ServicesManager_exports);

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 {
     /**
@@ -81,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 {};

package/Base/managers/ServicesManager.js

@@ -1,17 +1,11 @@
-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 } from '../utils.js';
-var SERVICES_MAP = {
+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 } from "../utils.js";
+const SERVICES_MAP = {
   scrolled: useScroll,
   resized: useResize,
   ticked: useRaf,
@@ -19,17 +13,17 @@ var SERVICES_MAP = {
   keyed: useKey,
   loaded: useLoad
 };
-var SERVICE_NAMES = Object.keys(SERVICES_MAP);
-export default class ServicesManager {
+const SERVICE_NAMES = Object.keys(SERVICES_MAP);
+class ServicesManager {
+  __base;
+  __customServices = {};
   get __services() {
-    return _objectSpread(_objectSpread({}, this.__customServices), SERVICES_MAP);
+    return {
+      ...this.__customServices,
+      ...SERVICES_MAP
+    };
   }
-
   constructor(instance) {
-    _defineProperty(this, "__base", void 0);
-
-    _defineProperty(this, "__customServices", {});
-
     Object.defineProperties(this, {
       __base: {
         enumerable: false,
@@ -38,74 +32,49 @@ export default class ServicesManager {
       }
     });
   }
-
   has(service) {
     if (!((hasMethod(this.__base, service) || this.__base.__hasEvent(service)) && this.__services[service])) {
       return false;
     }
-
-    var {
-      has
-    } = this.__services[service]();
-
+    const { 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.__base.__hasEvent(service)) || !this.__services[service]) {
-      return function noop() {};
+      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];
-      }
-
+    const { add } = this.__services[service]();
+    const self = this;
+    function serviceHandler(...args) {
       self.__base.__callMethod(service, ...args);
     }
-
     add(this.__base.$id, serviceHandler);
     return this.disable.bind(this, service);
   }
-
   enableAll() {
-    return Object.keys(this.__services).map(serviceName => this.enable(serviceName));
+    return Object.keys(this.__services).map((serviceName) => this.enable(serviceName));
   }
-
   disableAll() {
-    Object.keys(this.__services).forEach(serviceName => {
+    Object.keys(this.__services).forEach((serviceName) => {
       this.disable(serviceName);
     });
   }
-
   disable(service) {
     if (!this.__services[service]) {
       return;
     }
-
-    var {
-      remove
-    } = this.__services[service]();
-
+    const { remove } = this.__services[service]();
     remove(this.__base.$id);
   }
-
   toggle(service, force) {
-    if (typeof force !== 'undefined') {
+    if (typeof force !== "undefined") {
       if (force && !this.has(service)) {
         this.enable(service);
       }
-
       if (!force && this.has(service)) {
         this.disable(service);
       }
@@ -115,17 +84,18 @@ export default class ServicesManager {
       this.enable(service);
     }
   }
-
   register(name, useFunction) {
     this.__customServices[name] = useFunction;
+    this.__base.__addEmits(name);
   }
-
   unregister(name) {
     if (SERVICE_NAMES.includes(name)) {
-      throw new Error("[ServicesManager] The `".concat(name, "` core service can not be unregistered."));
+      throw new Error(`[ServicesManager] The \`${name}\` core service can not be unregistered.`);
     }
-
+    this.__base.__removeEmits(name);
     delete this.__customServices[name];
   }
-
-}
+}
+export {
+  ServicesManager as default
+};

package/Base/utils.cjs

@@ -0,0 +1,45 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/Base/utils.js
+var utils_exports = {};
+__export(utils_exports, {
+  getComponentElements: () => getComponentElements,
+  hasMethod: () => hasMethod
+});
+function hasMethod(obj, name) {
+  return typeof obj[name] === "function";
+}
+function getComponentElements(nameOrSelector, element = document) {
+  const selector = `[data-component="${nameOrSelector}"]`;
+  let elements = [];
+  try {
+    elements = Array.from(element.querySelectorAll(selector));
+  } catch {
+  }
+  if (elements.length === 0) {
+    elements = Array.from(element.querySelectorAll(nameOrSelector));
+  }
+  return elements;
+}
+module.exports = __toCommonJS(utils_exports);

package/Base/utils.js

@@ -1,18 +1,19 @@
-export function hasMethod(obj, name) {
-  return typeof obj[name] === 'function';
+function hasMethod(obj, name) {
+  return typeof obj[name] === "function";
 }
-export function getComponentElements(nameOrSelector) {
-  var element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
-  var selector = "[data-component=\"".concat(nameOrSelector, "\"]");
-  var elements = [];
-
+function getComponentElements(nameOrSelector, element = document) {
+  const selector = `[data-component="${nameOrSelector}"]`;
+  let elements = [];
   try {
     elements = Array.from(element.querySelectorAll(selector));
-  } catch (_unused) {}
-
+  } catch {
+  }
   if (elements.length === 0) {
     elements = Array.from(element.querySelectorAll(nameOrSelector));
   }
-
   return elements;
-}
+}
+export {
+  getComponentElements,
+  hasMethod
+};

package/README.md

@@ -15,80 +15,23 @@ Install the latest version via NPM:
 npm install @studiometa/js-toolkit
 ```
 
-## Concept
+## Documentation
 
-[] todo
+This project contains a JavaScript micro-framework and its utility functions whose main objectives are:
 
-## Usage
+- Enforcing best-practice and consistency between projects
+- Using elements from the DOM easily
+- Enabling custom behaviours on component initialization or other user events
+- Disabling custom behaviours on component destruction or other user events
+- Initializing components in the right place at the right time
+- Defining dependencies between components
 
-Import the `Base` class and extend it to create your components:
+Visit [js-toolkit.studiometa.dev](https://js-toolkit.studiometa.dev) to learn more.
 
-```js
-import { Base, createApp } from '@studiometa/js-toolkit';
+## Contributing
 
-class Component extends Base {
-  static config = {
-    name: 'Component',
-  }
+This projects follows the [Git Flow](https://github.com/petervanderdoes/gitflow-avh) methodology to manage its branches and features. The packages and their dependencies are managed with NPM workspaces. The files are linted with ESLint, type checked with TypeScript and formatted with Prettier.
 
-  sayHello() {
-    console.log('Hello!');
-  }
-}
+## License
 
-class App extends Base {
-  static config = {
-    name: 'App',
-    components: {
-      Component,
-    },
-    refs: ['btn', 'items[]'],
-    options: {
-      foo: String,
-      bar: { type: String, default: 'bar' },
-    }
-  };
-
-  mounted() {
-    this.$log('mounted');
-
-    // Options
-    this.$options.name; // 'App'
-    this.$options.log; // true
-    this.$options.debug; // false
-    this.$options.foo // ''
-    this.$options.bar // 'bar'
-
-    // Children
-    this.$children.Component; // Array<Component>
-
-    // DOM references
-    this.$refs.btn; // <button data-ref="btn"></button>
-    this.$refs.items[0]; // <li data-ref="items[]"></li>
-  }
-
-  destroyed() {
-    this.$log('destroyed');
-  }
-
-  scrolled(props) {
-    this.$log('scrolled', props);
-  }
-
-  resized(props) {
-    this.$log('resized', props);
-  }
-}
-
-export default createApp(App, document.body);
-```
-
-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.
+See [LICENSE](./LICENSE).

package/decorators/index.cjs

@@ -0,0 +1,49 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/decorators/index.js
+var decorators_exports = {};
+__export(decorators_exports, {
+  withBreakpointManager: () => import_withBreakpointManager.default,
+  withBreakpointObserver: () => import_withBreakpointObserver.default,
+  withDrag: () => import_withDrag.default,
+  withExtraConfig: () => import_withExtraConfig.default,
+  withIntersectionObserver: () => import_withIntersectionObserver.default,
+  withMountWhenInView: () => import_withMountWhenInView.default,
+  withScrolledInView: () => import_withScrolledInView.default,
+  withVue2: () => import_withVue2.default
+});
+var import_withBreakpointManager = __toESM(require("./withBreakpointManager.cjs"), 1);
+var import_withBreakpointObserver = __toESM(require("./withBreakpointObserver.cjs"), 1);
+var import_withDrag = __toESM(require("./withDrag.cjs"), 1);
+var import_withExtraConfig = __toESM(require("./withExtraConfig.cjs"), 1);
+var import_withIntersectionObserver = __toESM(require("./withIntersectionObserver.cjs"), 1);
+var import_withMountWhenInView = __toESM(require("./withMountWhenInView.cjs"), 1);
+var import_withScrolledInView = __toESM(require("./withScrolledInView.cjs"), 1);
+var import_withVue2 = __toESM(require("./withVue2.cjs"), 1);
+module.exports = __toCommonJS(decorators_exports);

package/decorators/index.d.ts

@@ -1,9 +1,8 @@
-import withBreakpointManager from "./withBreakpointManager.js";
-import withBreakpointObserver from "./withBreakpointObserver.js";
-import withDrag from "./withDrag.js";
-import withExtraConfig from "./withExtraConfig.js";
-import withIntersectionObserver from "./withIntersectionObserver.js";
-import withMountWhenInView from "./withMountWhenInView.js";
-import withScrolledInView from "./withScrolledInView.js";
-import withVue2 from "./withVue2.js";
-export { withBreakpointManager, withBreakpointObserver, withDrag, withExtraConfig, withIntersectionObserver, withMountWhenInView, withScrolledInView, withVue2 };
+export { default as withBreakpointManager } from "./withBreakpointManager.js";
+export { default as withBreakpointObserver } from "./withBreakpointObserver.js";
+export { default as withDrag } from "./withDrag.js";
+export { default as withExtraConfig } from "./withExtraConfig.js";
+export { default as withIntersectionObserver } from "./withIntersectionObserver.js";
+export { default as withMountWhenInView } from "./withMountWhenInView.js";
+export { default as withScrolledInView } from "./withScrolledInView.js";
+export { default as withVue2 } from "./withVue2.js";

package/decorators/index.js

@@ -1,9 +1,18 @@
-import withBreakpointManager from './withBreakpointManager.js';
-import withBreakpointObserver from './withBreakpointObserver.js';
-import withDrag from './withDrag.js';
-import withExtraConfig from './withExtraConfig.js';
-import withIntersectionObserver from './withIntersectionObserver.js';
-import withMountWhenInView from './withMountWhenInView.js';
-import withScrolledInView from './withScrolledInView.js';
-import withVue2 from './withVue2.js';
-export { withBreakpointManager, withBreakpointObserver, withDrag, withExtraConfig, withIntersectionObserver, withMountWhenInView, withScrolledInView, withVue2 };
+import { default as default2 } from "./withBreakpointManager.js";
+import { default as default3 } from "./withBreakpointObserver.js";
+import { default as default4 } from "./withDrag.js";
+import { default as default5 } from "./withExtraConfig.js";
+import { default as default6 } from "./withIntersectionObserver.js";
+import { default as default7 } from "./withMountWhenInView.js";
+import { default as default8 } from "./withScrolledInView.js";
+import { default as default9 } from "./withVue2.js";
+export {
+  default2 as withBreakpointManager,
+  default3 as withBreakpointObserver,
+  default4 as withDrag,
+  default5 as withExtraConfig,
+  default6 as withIntersectionObserver,
+  default7 as withMountWhenInView,
+  default8 as withScrolledInView,
+  default9 as withVue2
+};