feat: desktop apps with electron!

.eslintrc.js

@@ -80,7 +80,9 @@ module.exports = {
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
-
+    '@typescript-eslint/no-unsafe-call': 'off',
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
     // allow debugger during development only
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   }

README.md

@@ -1,4 +1,4 @@
-# Mirai MAL (mirai)
+# Mirai (mirai)
 
 A modern client for MyAnimeList
 

package.json

@@ -2,7 +2,7 @@
   "name": "mirai",
   "version": "1.4.0",
   "description": "A modern client for MyAnimeList",
-  "productName": "Mirai MAL",
+  "productName": "Mirai",
   "author": "Jabster28 <justynboyer@gmail.com>",
   "private": true,
   "scripts": {
@@ -25,6 +25,11 @@
     "@typescript-eslint/eslint-plugin": "3.6.0",
     "@typescript-eslint/parser": "3.6.0",
     "babel-eslint": "10.1.0",
+    "devtron": "^1.4.0",
+    "electron": "^9.0.0",
+    "electron-debug": "^3.0.1",
+    "electron-devtools-installer": "^3.0.0",
+    "electron-packager": "^14.1.1",
     "eslint": "7.4.0",
     "eslint-config-prettier": "6.11.0",
     "eslint-loader": "4.0.2",

quasar.conf.js

@@ -89,7 +89,15 @@ module.exports = configure(function(ctx) {
       iconSet: 'material-icons', // Quasar icon set
       lang: 'en-us', // Quasar language pack
       config: {
-        dark: true
+        dark: true,
+        loading: {
+          message: [
+            'Loading...',
+            'Spinning up the hamster...',
+            'Engaging the flux capacitor...',
+            'The other load screen is quicker. Try that one next time.'
+          ].find((_, i, ar) => Math.random() < 1 / (ar.length - i))
+        }
       },
 
       // Possible values for "importStrategy":

src-electron/electron-flag.d.ts

@@ -0,0 +1,9 @@
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    electron: true;
+  }
+}

src-electron/main-process/electron-main.dev.js

@@ -0,0 +1,31 @@
+/**
+ * This file is used specifically and only for development. It installs
+ * `electron-debug` & `vue-devtools`. There shouldn't be any need to
+ *  modify this file, but it can be used to extend your development
+ *  environment.
+ */
+
+import electronDebug from 'electron-debug';
+import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';
+import { app } from 'electron';
+
+// Install `electron-debug` with `devtron`
+electronDebug({ showDevTools: true });
+
+// Install vuejs devtools
+app
+  .whenReady()
+  .then(() => {
+    installExtension(VUEJS_DEVTOOLS)
+      .then((ext: string) => {
+        console.log(`Added Extension: ${ext}`);
+      })
+      .catch(err => {
+        console.log('An error occurred: ', err);
+      });
+  })
+  .catch(err => {
+    console.log('An error occurred: ', err);
+  });
+
+import './electron-main';

src-electron/main-process/electron-main.js

@@ -0,0 +1,62 @@
+import { app, BrowserWindow, nativeTheme } from 'electron';
+import * as fs from 'fs';
+import * as path from 'path';
+try {
+  if (
+    process.platform === 'win32' &&
+    nativeTheme.shouldUseDarkColors === true
+  ) {
+    fs.unlinkSync(path.join(app.getPath('userData'), 'DevTools Extensions'));
+  }
+} catch (_) {}
+
+/**
+ * Set `__statics` path to static files in production;
+ * The reason we are setting it here is that the path needs to be evaluated at runtime
+ */
+if (process.env.PROD) {
+  global.__statics = __dirname;
+}
+
+let mainWindow;
+
+function createWindow() {
+  /**
+   * Initial window options
+   */
+  mainWindow = new BrowserWindow({
+    width: 1000,
+    height: 600,
+    titleBarStyle: 'hiddenInset',
+    useContentSize: true,
+    webPreferences: {
+      // Change from /quasar.conf.js > electron > nodeIntegration;
+      // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
+      nodeIntegration: process.env.QUASAR_NODE_INTEGRATION,
+      nodeIntegrationInWorker: process.env.QUASAR_NODE_INTEGRATION
+
+      // More info: /quasar-cli/developing-electron-apps/electron-preload-script
+      // preload: path.resolve(__dirname, 'electron-preload.js')
+    }
+  });
+
+  mainWindow.loadURL(process.env.APP_URL).catch(e => console.log(e));
+
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
+}
+
+app.on('ready', createWindow);
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  if (mainWindow === null) {
+    createWindow();
+  }
+});

src/App.vue

@@ -15,11 +15,12 @@ export default {
     let theme = this.$q.localStorage.getItem('theme');
     if (!theme) {
       /* @ts-ignore */
-      this.$q.localStorage.set('theme', true);
+      this.$q.localStorage.set('theme', 'auto');
       /* @ts-ignore */
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       theme = this.$q.localStorage.getItem('theme');
     }
+
     /* @ts-ignore */
     this.$q.dark.set(theme);
   },

src/index.template.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title><%= productName %></title>
+    <title>Mirai</title>
     <script type="application/ld+json">
       {
         "@context": "https://schema.org",

src/layouts/MainLayout.vue

@@ -1,7 +1,22 @@
 <template>
   <q-layout view="lHh Lpr lFf">
     <q-header elevated>
-      <q-toolbar>
+      <q-toolbar
+        :class="
+          $q.platform.is.electron && $q.platform.is.mac
+            ? ['q-pt-xl', 'q-pb-sm']
+            : ''
+        "
+      >
+        <q-btn
+          v-if="$q.platform.is.electron"
+          flat
+          dense
+          round
+          icon="arrow_back"
+          aria-label="Back"
+          @click="$router.go(-1)"
+        />
         <q-btn
           flat
           dense
@@ -10,7 +25,15 @@
           aria-label="Menu"
           @click="leftDrawerOpen = !leftDrawerOpen"
         />
-
+        <q-btn
+          v-if="$q.platform.is.electron"
+          flat
+          dense
+          round
+          icon="arrow_forward"
+          aria-label="Forward"
+          @click="$router.go(1)"
+        />
         <q-toolbar-title>
           Mirai
         </q-toolbar-title>
@@ -28,7 +51,9 @@
     </q-header>
 
     <q-drawer v-model="leftDrawerOpen" behavior="mobile" show-if-above bordered>
-      <q-list>
+      <q-list
+        :class="$q.platform.is.electron && $q.platform.is.mac ? 'q-pt-md' : ''"
+      >
         <q-item-label header class="text-grey-8">
           Main
         </q-item-label>