Refactor all services to be used via decorators

packages/js-toolkit/Base/managers/ServicesManager.ts

@@ -1,26 +1,14 @@
-import { usePointer, useRaf, useResize, useScroll, useKey, useLoad } from '../../services/index.js';
+import { AbstractManager } from './AbstractManager.js';
+import { noop, isFunction, isDefined } from '../../utils/index.js';
 import type {
-  PointerServiceInterface,
-  RafServiceInterface,
-  ResizeServiceInterface,
+  ServiceInterface,
   ScrollServiceInterface,
+  ResizeServiceInterface,
+  RafServiceInterface,
+  PointerServiceInterface,
   KeyServiceInterface,
   LoadServiceInterface,
-  ServiceInterface,
 } from '../../services/index.js';
-import { AbstractManager } from './AbstractManager.js';
-import { noop, isFunction, isDefined, isDev } from '../../utils/index.js';
-
-const SERVICES_MAP = {
-  scrolled: useScroll,
-  resized: useResize,
-  ticked: useRaf,
-  moved: usePointer,
-  keyed: useKey,
-  loaded: useLoad,
-};
-
-const SERVICE_NAMES = Object.keys(SERVICES_MAP);
 
 type Services = {
   scrolled: ScrollServiceInterface;
@@ -48,10 +36,7 @@ export class ServicesManager extends AbstractManager {
    * Get registered services.
    */
   get __services() {
-    return {
-      ...this.__customServices,
-      ...SERVICES_MAP,
-    };
+    return { ...this.__customServices };
   }
 
   /**
@@ -174,14 +159,8 @@ export class ServicesManager extends AbstractManager {
    * @param {string} name
    *   The name of the service hook.
    */
-  unregister(name: string) {
-    if (SERVICE_NAMES.includes(name)) {
-      if (isDev) {
-        throw new Error(`[ServicesManager] The \`${name}\` core service can not be unregistered.`);
-      }
-      return;
-    }
-
+  unregister(name) {
+    // @ts-ignore
     this.__base.__removeEmits(name);
     delete this.__customServices[name];
   }

packages/js-toolkit/decorators/index.ts

@@ -10,3 +10,4 @@ export * from './withMountWhenPrefersMotion.js';
 export * from './withRelativePointer.js';
 export * from './withResponsiveOptions.js';
 export * from './withScrolledInView/index.js';
+export * from './withServices';

packages/js-toolkit/decorators/withServices.ts

@@ -0,0 +1,45 @@
+import type { ServiceInterface } from '../services/index.js';
+import type { Base, BaseConstructor } from '../Base/index.js';
+
+export type WithServicesOptions = Record<string, (instance:Base) => ServiceInterface<any>>
+
+/**
+ * Add dragging capabilities to a component.
+ *
+ * @template {BaseConstructor} T
+ * @param {T} BaseClass
+ * @param {Array<any>} services
+ * @returns {T}
+ */
+export function withServices(BaseClass:BaseConstructor, services:WithServicesOptions = {}) {
+  const __services = Object.entries(services);
+  // @ts-ignore
+  return class extends BaseClass {
+    static config = {
+      name: `${BaseClass.config.name}WithServices`,
+      emits: __services.map(([name]) => name),
+    };
+
+    /**
+     * Class constructor.
+     * @param {HTMLElement} el
+     */
+    constructor(el) {
+      super(el);
+
+      this.$on('mounted', () => {
+        __services.forEach(([name, getInstance]) => {
+          this.$services.register(name, getInstance(this));
+          this.$services.enable(name);
+        });
+      });
+
+      this.$on('destroyed', () => {
+        __services.forEach(([name]) => {
+          this.$services.disable(name);
+          this.$services.unregister(name);
+        });
+      });
+    }
+  };
+}