Change flash mixin

Author: DaneEveritt

resources/assets/scripts/app.ts

@@ -9,7 +9,7 @@ import {Ziggy} from './helpers/ziggy';
 // @ts-ignore
 import Locales from './../../../resources/lang/locales';
 
-import {flash} from './mixins/flash';
+import {FlashMixin} from './mixins/flash';
 import store from './store/index';
 import router from './router';
 
@@ -30,7 +30,7 @@ Vue.use(VueI18n);
 const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
 
 Vue.mixin({methods: {route}});
-Vue.mixin(flash);
+Vue.mixin(FlashMixin);
 
 const i18n = new VueI18n({
     locale: 'en',

resources/assets/scripts/mixins/flash.ts

@@ -1,52 +1,57 @@
-export const flash = {
-    methods: {
-        /**
-         * Flash a message to the event stream in the browser.
-         */
-        flash: function (message: string, title: string, severity: string = 'info'): void {
-            severity = severity || 'info';
-            if (['danger', 'fatal', 'error'].includes(severity)) {
-                severity = 'error';
-            }
-
-            // @ts-ignore
-            window.events.$emit('flash', { message, title, severity });
-        },
-
-        /**
-         * Clear all of the flash messages from the screen.
-         */
-        clearFlashes: function (): void {
-            // @ts-ignore
-            window.events.$emit('clear-flashes');
-        },
-
-        /**
-         * Helper function to flash a normal success message to the user.
-         */
-        success: function (message: string): void {
-            this.flash(message, 'Success', 'success');
-        },
-
-        /**
-         * Helper function to flash a normal info message to the user.
-         */
-        info: function (message: string): void {
-            this.flash(message, 'Info', 'info');
-        },
-
-        /**
-         * Helper function to flash a normal warning message to the user.
-         */
-        warning: function (message: string): void {
-            this.flash(message, 'Warning', 'warning');
-        },
-
-        /**
-         * Helper function to flash a normal error message to the user.
-         */
-        error: function (message: string): void {
-            this.flash(message, 'Error', 'danger');
-        },
+import {ComponentOptions} from "vue";
+import {Vue} from "vue/types/vue";
+
+export interface FlashInterface {
+    flash(message: string, title: string, severity: string): void;
+
+    clear(): void,
+
+    success(message: string): void,
+
+    info(message: string): void,
+
+    warning(message: string): void,
+
+    error(message: string): void,
+}
+
+class Flash implements FlashInterface {
+    flash(message: string, title: string, severity: string = 'info'): void {
+        severity = severity || 'info';
+        if (['danger', 'fatal', 'error'].includes(severity)) {
+            severity = 'error';
+        }
+
+        // @ts-ignore
+        window.events.$emit('flash', {message, title, severity});
+    }
+
+    clear(): void {
+        // @ts-ignore
+        window.events.$emit('clear-flashes');
     }
+
+    success(message: string): void {
+        this.flash(message, 'Success', 'success');
+    }
+
+    info(message: string): void {
+        this.flash(message, 'Info', 'info');
+    }
+
+    warning(message: string): void {
+        this.flash(message, 'Warning', 'warning');
+    }
+
+    error(message: string): void {
+        this.flash(message, 'Error', 'error');
+    }
+}
+
+export const FlashMixin: ComponentOptions<Vue> = {
+    methods: {
+        '$flash': function () {
+            return new Flash();
+        }
+    },
 };

resources/assets/scripts/pterodactyl-shims.d.ts

@@ -1,5 +1,6 @@
 import Vue from "vue";
 import {Store} from "vuex";
+import {FlashInterface} from "./mixins/flash";
 
 declare module 'vue/types/options' {
     interface ComponentOptions<V extends Vue> {
@@ -15,5 +16,6 @@ declare module 'vue/types/options' {
 declare module 'vue/types/vue' {
     interface Vue {
         $store: Store<any>,
+        $flash: FlashInterface
     }
 }

tsconfig.json

@@ -1,27 +1,15 @@
 {
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
+    "target": "es6",
     "strict": true,
+    "noImplicitReturns": true,
     "moduleResolution": "node",
     "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ],
-    "baseUrl": ".",
-    "paths": {
-      "@/*": [
-        "resources/*"
-      ]
-    }
+      "es2016",
+      "dom"
+    ]
   },
   "include": [
-    "./resources/assets/**/*.ts",
-    "./resources/assets/**/*.vue"
-  ],
-  "exclude": [
-    "node_modules"
+    "./resources/assets/scripts/**/*"
   ]
 }