initial commit

src/index.ejs

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Vutron</title>
+        <% if (htmlWebpackPlugin.options.nodeModules) { %>
+            <!-- Add `node_modules/` to global paths so `require` works properly in development -->
+            <script>
+                require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
+            </script>
+        <% } %>
+    </head>
+    <body>
+        <div id="app"></div>
+        <!-- Set `__static` path to static files in production -->
+        <% if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) { %>
+            <script>
+                window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
+            </script>
+        <% } %>
+        <!-- webpack builds are automatically injected -->
+    </body>
+</html>

src/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "app": {
+    "title": "Vutron"
+  }
+}

src/main/MainRunner.js

@@ -0,0 +1,81 @@
+import { app, BrowserWindow } from 'electron'
+import path from 'path'
+import Constants from './utils/Constants'
+
+export default class MainRunner {
+  static async createMainWindow (mainWindow) {
+    mainWindow = new BrowserWindow({
+      show: false,
+      width: Constants.IS_DEV_ENV ? 1500 : 1200,
+      height: 650,
+      icon: path.join(__static, Constants.APP_ICON),
+      title: Constants.APP_NAME,
+      useContentSize: true,
+      webPreferences: Constants.DEFAULT_WEB_PREFERENCES
+    })
+
+    mainWindow.setMenu(null)
+    mainWindow.on('close', (event) => {
+      event.preventDefault()
+      MainRunner.exitApp(mainWindow)
+    })
+
+    mainWindow.on('show', () => {
+      mainWindow.focus()
+    })
+
+    mainWindow.webContents.on('did-frame-finish-load', () => {
+      if (Constants.IS_DEV_ENV) {
+        mainWindow.webContents.openDevTools()
+      }
+    })
+
+    mainWindow.once('ready-to-show', () => {
+      mainWindow.setAlwaysOnTop(true)
+      mainWindow.show()
+      mainWindow.setAlwaysOnTop(false)
+    })
+
+    await mainWindow.loadURL(`${Constants.APP_INDEX_URL}`)
+
+    return mainWindow
+  }
+
+  static createCrashWindow (crashWindow, mainWindow, details) {
+    if (!Constants.IS_DEV_ENV) {
+      mainWindow?.hide()
+    }
+
+    crashWindow = new BrowserWindow({
+      show: false,
+      title: Constants.APP_NAME,
+      icon: path.join(__static, Constants.APP_ICON),
+      resizable: Constants.IS_DEV_ENV,
+      webPreferences: Constants.DEFAULT_WEB_PREFERENCES
+    })
+    crashWindow.setMenu(null)
+    crashWindow.loadURL(`${Constants.APP_INDEX_URL}#/crash`).then(() => true)
+    crashWindow.on('ready-to-show', () => {
+      if (!Constants.IS_DEV_ENV && mainWindow && !mainWindow.isDestroyed()) {
+        mainWindow.destroy()
+      }
+      crashWindow.show()
+      crashWindow.focus()
+    })
+    crashWindow.webContents.on('did-frame-finish-load', () => {
+      if (Constants.IS_DEV_ENV) {
+        crashWindow.webContents.openDevTools()
+      }
+    })
+
+    return crashWindow
+  }
+
+  static exitApp (mainWindow) {
+    if (mainWindow && !mainWindow.isDestroyed()) {
+      mainWindow.hide()
+    }
+    mainWindow = null
+    app.exit()
+  }
+}

src/main/index.dev.js

@@ -0,0 +1,10 @@
+import { app } from 'electron'
+import './index'
+import * as electronDevtoolsInstaller from 'electron-devtools-installer'
+
+app.on('ready', async () => {
+  await electronDevtoolsInstaller.default(electronDevtoolsInstaller.VUEJS_DEVTOOLS)
+    .catch(e => {
+      console.log(`Failed to install Vue Devtools \n(${e})`)
+    })
+})

src/main/index.js

@@ -0,0 +1,38 @@
+import { app } from 'electron'
+import path from 'path'
+import MainRunner from './MainRunner'
+import { fileURLToPath } from 'url'
+import Constants from './utils/Constants'
+import electronRemote from '@electron/remote/main'
+
+let mainWindow
+let crashWindow
+
+if (!Constants.IS_DEV_ENV) {
+  global.__static = path.join(path.dirname(fileURLToPath(import.meta.url)), '/static')
+    .replace(/\\/g, '\\\\')
+}
+
+app.on('ready', () => {
+  electronRemote.initialize()
+
+  mainWindow = MainRunner.createMainWindow(mainWindow)
+})
+
+app.on('activate', () => {
+  if (!mainWindow) {
+    mainWindow = MainRunner.createMainWindow(mainWindow)
+  }
+})
+
+app.on('window-all-closed', () => {
+  mainWindow = null
+
+  if (!Constants.IS_MAC) {
+    app.quit()
+  }
+})
+
+app.on('render-process-gone', (ev, webContents, details) => {
+  crashWindow = MainRunner.createCrashWindow(crashWindow, mainWindow, details)
+})

src/main/utils/Constants.js

@@ -0,0 +1,23 @@
+import path from 'path'
+import os from 'os'
+import { app } from 'electron'
+
+export default class Constants {
+  static APP_NAME = 'Vutron'
+  static APP_ICON = 'app-icon.png'
+
+  static IS_DEV_ENV = process.env.NODE_ENV === 'development'
+
+  static IS_MAC = os.platform() === 'darwin'
+
+  static DEFAULT_WEB_PREFERENCES = {
+    nodeIntegration: true,
+    contextIsolation: false,
+    nodeIntegrationInWorker: true,
+    enableRemoteModule: true
+  }
+
+  static APP_INDEX_URL = process.env.NODE_ENV === 'development'
+    ? 'http://localhost:9080/index.html'
+    : path.join('file://', app.getAppPath(), '/dist/electron/index.html')
+}

src/renderer/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>

src/renderer/components/screen/ErrorScreen.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    Unknown error occurred
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ErrorScreen'
+}
+</script>

src/renderer/components/screen/MainScreen.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    Main Screen
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MainScreen'
+}
+</script>

src/renderer/components/screen/index.js

@@ -0,0 +1,7 @@
+import ErrorScreen from './ErrorScreen.vue'
+import MainScreen from './MainScreen.vue'
+
+export {
+  ErrorScreen,
+  MainScreen
+}

src/renderer/main.js

@@ -0,0 +1,14 @@
+import { createApp } from 'vue'
+
+import App from './App'
+import router from './router'
+import vuetify from './plugins/vuetify'
+import 'vuetify/dist/vuetify.min.css'
+
+const app = createApp(App)
+
+app
+  .use(vuetify)
+  .use(router)
+
+app.mount('#app')

src/renderer/plugins/i18n.js

@@ -0,0 +1,5 @@
+import en from '../../locales/en.json'
+
+export default {
+  en
+}

src/renderer/plugins/vuetify.js

@@ -0,0 +1,15 @@
+import { createVuetify } from 'vuetify/dist/vuetify'
+import messages from './i18n'
+
+const vuetify = createVuetify({
+  icons: {
+    iconfont: 'mdi'
+  },
+  locale: {
+    defaultLocale: 'en',
+    fallbackLocale: 'en',
+    messages
+  }
+})
+
+export default vuetify

src/renderer/router/index.js

@@ -0,0 +1,22 @@
+import { createRouter, createWebHashHistory } from 'vue-router/dist/vue-router.esm-bundler'
+import { MainScreen, ErrorScreen } from '../components/screen'
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: '/',
+      component: MainScreen
+    },
+    {
+      path: '/crash',
+      component: ErrorScreen
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      redirect: '/'
+    }
+  ]
+})
+
+export default router