Refactoring

src/background.ts

@@ -11,12 +11,12 @@ import {
 import ContextMenu from 'electron-context-menu'
 
 import Application from './main/Application'
-import ApplicationMenu from "./main/ApplicationMenu";
+import ApplicationMenu from './main/ApplicationMenu'
 
-export type PackageJson = typeof import('../package.json');
+export type PackageJson = typeof import('../package.json')
 import { author, contributors, homepage } from '../package.json'
 import TheDeskInfo from '../info.json'
-export type TheDeskInfoObject = typeof TheDeskInfo;
+export type TheDeskInfoObject = typeof TheDeskInfo
 
 ipcMain.on('thedesk-info', (event: Event) => {
     event.returnValue = Object.assign({
@@ -24,13 +24,11 @@ ipcMain.on('thedesk-info', (event: Event) => {
         author: author,
         contributors: contributors,
         homePage: homepage,
-        versions: Object.assign(pick(process.versions, ["chrome", "electron", "node"]), { internal: app.getVersion() }),
+        versions: Object.assign(pick(process.versions, ['chrome', 'electron', 'node']), { internal: app.getVersion() }),
     }, TheDeskInfo)
 })
 
-const isDevelopment = process.env.NODE_ENV !== 'production'
-
-if (isDevelopment) {
+if (process.env.NODE_ENV !== 'production') {
     if (process.platform === 'win32') {
         process.on('message', data => {
             if (data === 'graceful-exit') {

src/components/_globals.ts

@@ -1,6 +1,6 @@
 'use strict'
 
-import Vue from 'vue';
+import Vue from 'vue'
 import { upperFirst, camelCase } from 'lodash'
 
 const requireComponent = require.context('./globals', false, /Base[A-Z]\w+\.(vue|js)$/)

src/main/Application.ts

@@ -11,17 +11,17 @@ import Window from './Window'
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
 export default class Application {
-    private static _instance: Application;
+    private static _instance: Application
 
     public static get shared() {
         // Do you need arguments? Make it a regular static method instead.
-        return this._instance || (this._instance = new this());
+        return this._instance || (this._instance = new this())
     }
 
     private constructor() {
         app.on('window-all-closed', () => this.onWindowAllClosed())
-        app.on('ready', () => this.onReady());
-        app.on('activate', () => this.onActivated());
+        app.on('ready', () => this.onReady())
+        app.on('activate', () => this.onActivated())
     }
 
     public setApplicationMenu(menu: Menu) {

src/main/ApplicationMenu.ts

@@ -3,10 +3,10 @@ import {
     shell,
     Menu,
     MenuItemConstructorOptions
-} from 'electron';
-import Window from "./Window";
-import { bugs } from '../../package.json';
-import { documentURL } from '../../info.json';
+} from 'electron'
+import Window from './Window'
+import { bugs } from '../../package.json'
+import { documentURL } from '../../info.json'
 
 const isMac = process.platform === 'darwin'
 
@@ -19,7 +19,7 @@ export default class ApplicationMenu {
         { role: 'hide' },
         { role: 'hideOthers' },
         { role: 'unhide' },
-    ];
+    ]
     private static macOnlyEditMenu: MenuItemConstructorOptions[] = [
         { type: 'separator' },
         {
@@ -29,38 +29,38 @@ export default class ApplicationMenu {
                 { role: 'stopspeaking' },
             ]
         }
-    ];
+    ]
     private static aboutMenuItem: MenuItemConstructorOptions = {
-        label: process.platform !== 'darwin' ? 'About' : `About ${app.getName()}`,
+        label: !isMac ? 'About' : `About ${app.getName()}`,
         click: () => Window.About(),
     }
 
     public static get menuConstruct(): MenuItemConstructorOptions[] {
         return [
-            this.AppMenu(isMac),
-            this.EditMenu(isMac),
+            this.AppMenu(),
+            this.EditMenu(),
             this.ViewMenu(),
-            this.WindowMenu(isMac),
+            this.WindowMenu(),
             this.HelpMenu(),
         ]
     }
 
     public static buildTemplate(): Menu {
-        return Menu.buildFromTemplate(this.menuConstruct);
+        return Menu.buildFromTemplate(this.menuConstruct)
     }
-    private static AppMenu(isMac: boolean): MenuItemConstructorOptions {
+    private static AppMenu(): MenuItemConstructorOptions {
         let appMenu: MenuItemConstructorOptions[] = [
             this.aboutMenuItem,
             ...(isMac ? this.macOnlyAppMenu : []),
             { type: 'separator' },
             { role: 'quit' },
-        ];
+        ]
         return {
             label: app.getName(),
             submenu: appMenu,
-        };
         }
-    private static EditMenu(isMac: boolean): MenuItemConstructorOptions {
+    }
+    private static EditMenu(): MenuItemConstructorOptions {
         let editMenu: MenuItemConstructorOptions[] = [
             { role: 'undo' },
             { role: 'redo' },
@@ -72,11 +72,11 @@ export default class ApplicationMenu {
             { role: 'delete' },
             { role: 'selectall' },
             ...(isMac ? this.macOnlyEditMenu : []),
-        ];
+        ]
         return {
             label: 'Edit',
             submenu: editMenu,
-        };
+        }
     }
     private static ViewMenu(): MenuItemConstructorOptions {
         let viewMenu: MenuItemConstructorOptions[] = [
@@ -85,13 +85,13 @@ export default class ApplicationMenu {
             { role: 'toggledevtools' },
             { type: 'separator' },
             { role: 'togglefullscreen' },
-        ];
+        ]
         return {
             label: 'View',
             submenu: viewMenu
-        };
         }
-    private static WindowMenu(isMac: boolean): MenuItemConstructorOptions {
+    }
+    private static WindowMenu(): MenuItemConstructorOptions {
         let windowMenu: MenuItemConstructorOptions[] = isMac ? [
             { role: 'close' },
             { role: 'minimize' },
@@ -101,11 +101,11 @@ export default class ApplicationMenu {
         ] : [
                 { role: 'minimize' },
                 { role: 'close' },
-            ];
+            ]
         return {
             label: 'Window',
             submenu: windowMenu,
-        };
+        }
     }
     private static HelpMenu(): MenuItemConstructorOptions {
         let helpMenu: MenuItemConstructorOptions[] = [
@@ -117,10 +117,10 @@ export default class ApplicationMenu {
                 label: 'Learn More',
                 click: () => shell.openExternal(documentURL),
             }
-        ];
+        ]
         return {
             label: 'Help',
             submenu: helpMenu,
-        };
+        }
     }
 }

src/main/Window.ts

@@ -10,7 +10,7 @@ import {
 } from 'electron'
 import { register as shortcutRegister } from 'electron-localshortcut'
 
-declare const __static: string;
+declare const __static: string
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
 export interface CreateWindowOptions {
@@ -23,6 +23,8 @@ export interface CreateWindowOptions {
 }
 
 export default class Window {
+    public static ApplicationURL: string = process.env.WEBPACK_DEV_SERVER_URL /* `electron:serve`で起動した時 */ || 'app://./' /* ビルドしたアプリ */
+
     public static single: Map<string, BrowserWindow> = new Map()
     public static list: BrowserWindow[]
 
@@ -64,7 +66,7 @@ export default class Window {
             lastAction: (win) => {
                 win.setMenuBarVisibility(false)
                 win.webContents.on('before-input-event', (event: Event, input: Input) => {
-                    this.single.get('about')!.webContents.setIgnoreMenuShortcuts((process.platform === 'darwin' ? input.meta : input.control) && input.key === "r")
+                    this.single.get('about')!.webContents.setIgnoreMenuShortcuts((process.platform === 'darwin' ? input.meta : input.control) && input.key === 'r')
                 })
                 shortcutRegister(win, 'Esc', () => this.single.get('about')!.destroy())
             },
@@ -89,7 +91,7 @@ export default class Window {
         })
 
         let openUrl = (event: Event, url: string) => {
-            if (isDevelopment && url === process.env.WEBPACK_DEV_SERVER_URL + options.loadPath) {
+            if (url === this.ApplicationURL + options.loadPath) {
                 return
             }
             event.preventDefault()
@@ -102,13 +104,7 @@ export default class Window {
         win.webContents.on('will-navigate', openUrl)
         win.webContents.on('new-window', openUrl)
 
-        if (process.env.WEBPACK_DEV_SERVER_URL) {
-            // `electron:serve`で起動した時の読み込み
-            win.loadURL(process.env.WEBPACK_DEV_SERVER_URL + options.loadPath)
-        } else {
-            // ビルドしたアプリでの読み込み
-            win.loadURL(`app://./${options.loadPath}`)
-        }
+        win.loadURL(this.ApplicationURL + options.loadPath)
 
         if (isDevelopment && options.openDevTools) win.webContents.openDevTools()
 

src/views/About.vue

@@ -42,8 +42,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator"
-import { ipcRenderer } from "electron"
+import { Component, Vue } from 'vue-property-decorator'
+import { ipcRenderer } from 'electron'
 
 type Versions = { [key: string]: string }
 
@@ -55,7 +55,7 @@ interface Maintainer {
 interface TheDeskInfo {
   productName: string
   author: Maintainer
-  contributors: [Maintainer]
+  contributors: Maintainer[]
   homePage: string
   copyrightYear: string
   codeName: string
@@ -66,7 +66,7 @@ interface TheDeskInfo {
 export default class About extends Vue {
   public productName: string
   public author: Maintainer
-  public contributors: [Maintainer]
+  public contributors: Maintainer[]
   public homePage: string
   public copyrightYear: string
   public versions: Versions
@@ -74,7 +74,7 @@ export default class About extends Vue {
   public get ctrHtml(): string {
     return this.contributors.map(contributer => {
       return `<a href="${contributer.url}" target="_blank">${contributer.name}</a>`
-    }).join(", ")
+    }).join(', ')
   }
 
   constructor() {

src/views/App.vue

@@ -1,13 +1,13 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="@/assets/logo.png" />
+    <img alt="Vue logo" src="@/assets/logo.png">
     <Welcome/>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import Welcome from '@/components/Welcome.vue';
+import { Component, Vue } from 'vue-property-decorator'
+import Welcome from '@/components/Welcome.vue'
 
 @Component({
   components: {

vue.config.js

@@ -1,5 +1,5 @@
-const { productName, author } = require("./package.json");
-const { appId, copyrightYear } = require("./info.json");
+const { productName, author } = require('./package.json')
+const { appId, copyrightYear } = require('./info.json')
 
 module.exports = {
   pages: {
@@ -32,29 +32,29 @@ module.exports = {
         appId: appId,
         copyright: `Copyright © ${copyrightYear} ${author.name}`,
         win: {
-          "target": [
-            "nsis",
-            "portable",
+          'target': [
+            'nsis',
+            'portable',
           ],
         },
         nsis: {
           oneClick: false,
           allowToChangeInstallationDirectory: true,
-          artifactName: "TheDesk-Vue-setup.${ext}",
+          artifactName: 'TheDesk-Vue-setup.${ext}',
         },
         linux: {
           target: [
-            "snap",
+            'snap',
           ],
-          category: "Network",
+          category: 'Network',
         },
         mac: {
           darkModeSupport: true,
           target: [
-            "dmg",
+            'dmg',
           ],
         },
       },
     },
   },
-};
+}