refactor progress

client/src/plugins/anime.ts

@@ -0,0 +1,46 @@
+import { PluginObject } from 'vue'
+import anime, { StaggerOptions, AnimeTimelineInstance, AnimeParams, AnimeInstance } from 'animejs'
+
+type FunctionBasedParameter = (element: HTMLElement, index: number, length: number) => number
+type AnimeTarget = string | object | HTMLElement | SVGElement | NodeList | null
+type AnimeFunc = (params: AnimeParams) => AnimeInstance
+
+interface Anime {
+  version: string
+  speed: number
+  running: AnimeInstance[]
+  easings: { [EasingFunction: string]: (t: number) => any }
+  remove(targets: AnimeTarget | ReadonlyArray<AnimeTarget>): void
+  get(targets: AnimeTarget, prop: string): string | number
+  path(
+    path: string | HTMLElement | SVGElement | null,
+    percent?: number,
+  ): (
+    prop: string,
+  ) => {
+    el: HTMLElement | SVGElement
+    property: string
+    totalLength: number
+  }
+  setDashoffset(el: HTMLElement | SVGElement | null): number
+  bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number
+  stagger(value: number | string | ReadonlyArray<number | string>, options?: StaggerOptions): FunctionBasedParameter
+  set(targets: AnimeTarget, value: { [AnyAnimatedProperty: string]: any }): void
+  // Timeline
+  timeline(params?: AnimeParams | ReadonlyArray<AnimeInstance>): AnimeTimelineInstance
+  random(min: number, max: number): number
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $anime: AnimeFunc & Anime
+  }
+}
+
+const plugin: PluginObject<undefined> = {
+  install(Vue) {
+    Vue.prototype.$anime = anime
+  },
+}
+
+export default plugin

client/src/plugins/axios.ts

@@ -0,0 +1,16 @@
+import { PluginObject } from 'vue'
+import axios, { AxiosStatic } from 'axios'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $http: AxiosStatic
+  }
+}
+
+const plugin: PluginObject<undefined> = {
+  install(Vue) {
+    Vue.prototype.$http = axios
+  },
+}
+
+export default plugin

client/src/plugins/neko.ts

@@ -1,16 +1,29 @@
 import { PluginObject } from 'vue'
 import { NekoClient } from '~/client'
 
+declare global {
+  const $client: NekoClient
+
+  interface Window {
+    $client: NekoClient
+  }
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $client: NekoClient
+  }
+}
+
 const plugin: PluginObject<undefined> = {
   install(Vue) {
-    console.log()
-    const client = new NekoClient()
+    window.$client = new NekoClient()
       .on('error', error => console.error('[%cNEKO%c] %cERR', 'color: #498ad8;', '', 'color: #d84949;', error))
       .on('warn', (...log) => console.warn('[%cNEKO%c] %cWRN', 'color: #498ad8;', '', 'color: #eae364;', ...log))
       .on('info', (...log) => console.info('[%cNEKO%c] %cINF', 'color: #498ad8;', '', 'color: #4ac94c;', ...log))
       .on('debug', (...log) => console.log('[%cNEKO%c] %cDBG', 'color: #498ad8;', '', 'color: #eae364;', ...log))
 
-    Vue.prototype.$client = client
+    Vue.prototype.$client = window.$client
   },
 }
 

client/src/plugins/swal.ts

@@ -0,0 +1,58 @@
+import Vue from 'vue'
+
+import { SweetAlertOptions } from 'sweetalert2'
+import Swal from 'sweetalert2/dist/sweetalert2.js'
+
+type VueSwalInstance = typeof Swal.fire
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $swal: VueSwalInstance
+  }
+
+  interface VueConstructor<V extends Vue = Vue> {
+    swal: VueSwalInstance
+  }
+}
+
+interface VueSweetalert2Options extends SweetAlertOptions {
+  // includeCss?: boolean;
+}
+
+class VueSweetalert2 {
+  static install(vue: Vue | any, options?: VueSweetalert2Options): void {
+    const swalFunction = (...args: [SweetAlertOptions]) => {
+      if (options) {
+        const mixed = Swal.mixin(options)
+
+        return mixed.fire.apply(mixed, args)
+      }
+
+      return Swal.fire.apply(Swal, args)
+    }
+
+    let methodName: string | number | symbol
+
+    for (methodName in Swal) {
+      // @ts-ignore
+      if (Object.prototype.hasOwnProperty.call(Swal, methodName) && typeof Swal[methodName] === 'function') {
+        // @ts-ignore
+        swalFunction[methodName] = (method => {
+          return (...args: any[]) => {
+            // @ts-ignore
+            return Swal[method].apply(Swal, args)
+          }
+        })(methodName)
+      }
+    }
+
+    vue['swal'] = swalFunction
+
+    // add the instance method
+    if (!vue.prototype.hasOwnProperty('$swal')) {
+      vue.prototype.$swal = swalFunction
+    }
+  }
+}
+
+export default VueSweetalert2