🔥 remove LoadableMixinInstance and other helper types

Author: VitorLuizC

src/LoadableMixin.ts

@@ -1,36 +1,5 @@
 import Vue from 'vue';
 
-export type LoadableMixinInstance = Vue & LoadableMixinState & LoadableMixinMethods;
-
-export type LoadableMixinState = {
-  LOADING_STATES: Record<string, number>;
-};
-
-export type LoadableMixinMethods = {
-  /**
-   * Check if a state is loading.
-   * @param [state] - Loading state name.
-   */
-  $isLoading (this: LoadableMixinInstance, state?: string): boolean;
-
-  /**
-   * Check if any state is loading.
-   */
-  $isLoadingAny (this: LoadableMixinInstance): boolean;
-
-  /**
-   * Set state as loading.
-   * @param [state] - Loading state name.
-   */
-  $setLoading (this: LoadableMixinInstance, state?: string): void;
-
-  /**
-   * Unset state as loading.
-   * @param [state] - Loading state name.
-   */
-  $unsetLoading (this: LoadableMixinInstance, state?: string): void;
-};
-
 /**
  * A mixin which adds loading states and helpers to Vue components.
  * @example ```js
@@ -44,31 +13,31 @@ export type LoadableMixinMethods = {
  * })```
  */
 const LoadableMixin = Vue.extend({
-  data (): LoadableMixinState {
+  data() {
     return {
-      LOADING_STATES: Object.create(null)
+      LOADING_STATES: Object.create(null) as Record<string, number>,
     };
   },
   methods: {
-    $isLoading (state = 'unknown') {
+    $isLoading(state = 'unknown') {
       const value = this.LOADING_STATES[state];
       return !!value && value > 0;
     },
 
-    $isLoadingAny () {
+    $isLoadingAny() {
       return Object.keys(this.LOADING_STATES).some(this.$isLoading);
     },
 
-    $setLoading (state = 'unknown') {
+    $setLoading(state = 'unknown') {
       const value = this.LOADING_STATES[state];
       this.$set(this.LOADING_STATES, state, value ? value + 1 : 1);
     },
 
-    $unsetLoading (state = 'unknown') {
+    $unsetLoading(state = 'unknown') {
       const value = this.LOADING_STATES[state];
       this.$set(this.LOADING_STATES, state, value ? value - 1 : 0);
-    }
-  } as LoadableMixinMethods
+    },
+  },
 });
 
 export default LoadableMixin;

src/loadable.ts

@@ -1,25 +1,24 @@
+import Vue from 'vue';
 import callWithHooks from './callWithHooks';
-import { LoadableMixinInstance } from './LoadableMixin';
 
 /**
  * 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);
+  | ((this: Vue, ...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,
+export type LoadableMethod<T extends Method> = (
+  this: Vue,
   ...args: Parameters<T>
-) =>
-  ReturnType<T> extends Promise<any>
-    ? ReturnType<T>
-    : Promise<ReturnType<T>>;
+) => ReturnType<T> extends Promise<any>
+  ? ReturnType<T>
+  : Promise<ReturnType<T>>;
 
 /**
  * Decorate a method to causes loading states changes during its execution. It
@@ -36,13 +35,13 @@ export type LoadableMethod <T extends Method> = (
  * @param method - A method, commonly async, which causes loading state changes.
  * @param [state] - Loading state name. It's "unknown" if not defined.
  */
-const loadable = <T extends Method> (method: T, state: string = 'unknown') =>
-  function () {
+const loadable = <T extends Method>(method: T, state: string = 'unknown') =>
+  function() {
     this.$setLoading(state);
 
     return callWithHooks(
       () => method.apply(this, arguments as any),
-      () => this.$unsetLoading(state)
+      () => this.$unsetLoading(state),
     );
   } as LoadableMethod<T>;
 

src/mapLoadableMethods.ts

@@ -9,7 +9,7 @@ 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> = {
+export type LoadableMethods<T extends Methods> = {
   [K in keyof T]: LoadableMethod<T[K]>;
 };
 
@@ -35,8 +35,8 @@ export type LoadableMethods <T extends Methods> = {
  *   }
  * });
  */
-const mapLoadableMethods = <T extends Methods> (
-  methods: T
+const mapLoadableMethods = <T extends Methods>(
+  methods: T,
 ): LoadableMethods<T> => {
   const names = Object.keys(methods) as (string & keyof T)[];
 
@@ -45,7 +45,7 @@ const mapLoadableMethods = <T extends Methods> (
       loadableMethods[name] = loadable(methods[name], name);
       return loadableMethods;
     },
-    Object.create(null) as LoadableMethods<T>
+    Object.create(null) as LoadableMethods<T>,
   );
 };
 

src/vue-loadable.ts

@@ -7,24 +7,24 @@ declare module 'vue/types/vue' {
      * Check if a state is loading.
      * @param [state] - Loading state name.
      */
-    $isLoading (state?: string): boolean;
+    $isLoading(state?: string): boolean;
 
     /**
      * Check if any state is loading.
      */
-    $isLoadingAny (): boolean;
+    $isLoadingAny(): boolean;
 
     /**
      * Set state as loading.
      * @param [state] - Loading state name.
      */
-    $setLoading (state?: string): void;
+    $setLoading(state?: string): void;
 
     /**
      * Unset state as loading.
      * @param [state] - Loading state name.
      */
-    $unsetLoading (state?: string): void;
+    $unsetLoading(state?: string): void;
   }
 }
 
@@ -35,7 +35,7 @@ export { default as loadable, Method, LoadableMethod } from './loadable';
 export {
   default as mapLoadableMethods,
   Methods,
-  LoadableMethods
+  LoadableMethods,
 } from './mapLoadableMethods';
 
 /**
@@ -44,7 +44,7 @@ export {
  * Vue.use(install)```
  * @param Vue - The Vue constructor.
  */
-export function install (Vue: VueConstructor): void {
+export function install(Vue: VueConstructor): void {
   Vue.mixin(LoadableMixin);
 }