✨ implements strategy pattern instead of direct require Vuex

Author: VitorLuizC

src/loadable.ts

@@ -2,32 +2,48 @@ import callWithHooks from './callWithHooks';
 import { LoadableMixinInstance } from './LoadableMixin';
 
 /**
- * Decorate a function to causes loading states changes during its execution. It
- * set state as loading when function is init and unset on throws an error or
+ * An union of any function and functions that have access to `this`
+ * (Vue instance).
+ */
+export type Method =
+  | ((...args: any[]) => any)
+  | ((this: LoadableMixinInstance, ...args: any[]) => any);
+
+/**
+ * A Higher-order type to trasnform a method into loadable method that have
+ * access to `this` (Vue instance) and returns a Promise.
+ */
+export type LoadableMethod <T extends Method> = (
+  this: LoadableMixinInstance,
+  ...args: Parameters<T>
+) =>
+  ReturnType<T> extends Promise<any>
+    ? ReturnType<T>
+    : Promise<ReturnType<T>>;
+
+/**
+ * Decorate a method to causes loading states changes during its execution. It
+ * sets state as loading when function is init and unsets on throws an error or
  * resolve/return.
- * @example ```js
+ * @example
  * Vue.component('SignInForm', {
  *   methods: {
  *     signIn: loadable(async function ({ email, password }) {
  *       // ...
  *     }, 'signIn')
  *   }
- * })```
- * @param λ - A function, commonly async, which causes loading state changes.
- * @param [state] - Loading state name.
+ * });
+ * @param method - A method, commonly async, which causes loading state changes.
+ * @param [state] - Loading state name. It's "unknown" if not defined.
  */
-export default function loadable <Return, Params extends any[]> (
-  λ: (this: LoadableMixinInstance, ...params: Params) => Return | Promise<Return>,
-  state: string = 'unknown',
-): (this: LoadableMixinInstance, ...params: Params) => Promise<Return> {
-  return function () {
-    const params = arguments as unknown as Params;
-
+const loadable = <T extends Method> (method: T, state: string = 'unknown') =>
+  function () {
     this.$setLoading(state);
 
     return callWithHooks(
-      () => λ.apply(this, params),
+      () => method.apply(this, arguments as any),
       () => this.$unsetLoading(state)
     );
-  };
-}
+  } as LoadableMethod<T>;
+
+export default loadable;

src/mapActions.ts

@@ -0,0 +1,52 @@
+import loadable, { Method, LoadableMethod } from './loadable';
+
+/**
+ * Type of an object whose keys are `string` and the values are methods.
+ */
+export type Methods = Record<string, Method>;
+
+/**
+ * A Higher-order type to transform methods into loadable methods. It keeps keys
+ * as-is, but values have access to `this` (Vue instance) and returns a Promise.
+ */
+export type LoadableMethods <T extends Methods> = {
+  [K in keyof T]: LoadableMethod<T[K]>;
+};
+
+/**
+ * Maps an object, whose keys are `string` and the values are methods, to
+ * loadable methods that triggers loading states. It uses property's keys as
+ * loading state names.
+ * @example
+ * Vue.component('SignInForm', {
+ *   ...,
+ *   methods: {
+ *     onClick() {
+ *       if (this.$isLoading('signIn') || this.$isLoading('signUp'))
+ *         return;
+ *       // ...
+ *     },
+ *     ...mapLoadableMethods(
+ *       mapActions('authentication', [
+ *         'signIn',
+ *         'signUp'
+ *       ])
+ *     )
+ *   }
+ * });
+ */
+const mapLoadableMethods = <T extends Methods> (
+  methods: T
+): LoadableMethods<T> => {
+  const names = Object.keys(methods) as (string & keyof T)[];
+
+  return names.reduce(
+    (loadableMethods, name) => {
+      loadableMethods[name] = loadable(methods[name], name);
+      return loadableMethods;
+    },
+    Object.create(null) as LoadableMethods<T>
+  );
+};
+
+export default mapLoadableMethods;

src/mapLoadableActions.ts

@@ -30,9 +30,13 @@ declare module 'vue/types/vue' {
 
 export { LoadableMixin };
 
-export { default as loadable } from './loadable';
+export { default as loadable, Method, LoadableMethod } from './loadable';
 
-export { default as mapLoadableActions } from './mapLoadableActions';
+export {
+  default as mapLoadableMethods,
+  Methods,
+  LoadableMethods
+} from './mapLoadableMethods';
 
 /**
  * Installs LoadableMixin globally.