feat: support win (#13)

Author: antonreshetov

package.json

@@ -7,7 +7,7 @@
   "main": "build/src/main/index.js",
   "scripts": {
     "dev": "run-p dev:watch dev:vue-devtools",
-    "dev:watch": "tsc-watch -p tsconfig.electron.json --onFirstSuccess 'npm run dev:server'",
+    "dev:watch": "tsc-watch -p tsconfig.electron.json --onFirstSuccess \"npm run dev:server\"",
     "dev:server": "node build/scripts/dev-server.js",
     "dev:vue-devtools": "vue-devtools",
     "build:ts": "tsc -p tsconfig.electron.json",

scripts/dev-server.ts

@@ -1,5 +1,5 @@
 import { spawn } from 'child_process'
-import type { ChildProcess, SpawnOptionsWithoutStdio } from 'child_process'
+import type { ChildProcess } from 'child_process'
 import path from 'path'
 import chalk from 'chalk'
 import chokidar from 'chokidar'
@@ -23,9 +23,9 @@ async function startRenderer () {
 function startElectron () {
   if (electronProcess) return
 
-  const args = ['.', rendererPort] as SpawnOptionsWithoutStdio
-
-  electronProcess = spawn('electron', args)
+  electronProcess = spawn('electron', ['.', (rendererPort || 0).toString()], {
+    shell: true
+  })
 
   electronProcess?.stdout?.on('data', data => {
     console.log(chalk.blueBright('[Electron] ') + chalk.white(data.toString()))
@@ -34,6 +34,10 @@ function startElectron () {
   electronProcess?.stderr?.on('data', data => {
     console.log(chalk.redBright('[Electron] ') + chalk.white(data.toString()))
   })
+
+  electronProcess?.on('error', error => {
+    console.log(chalk.redBright('[Electron] ', error))
+  })
 }
 
 function restartElectron () {

src/main/components/menu.ts

@@ -5,10 +5,3 @@ export const createMenu = (template: MenuItemConstructorOptions[]) => {
   const menu = Menu.buildFromTemplate(template)
   return menu
 }
-
-export const createPopupMenu = (template: MenuItemConstructorOptions[]) => {
-  const menu = createMenu(template)
-  menu.popup({ window: BrowserWindow.getFocusedWindow()! })
-
-  return menu
-}

src/main/index.ts

@@ -11,6 +11,7 @@ import { subscribeToDialog } from './services/ipc/dialog'
 import { checkForUpdate } from './services/update-check'
 
 const isDev = process.env.NODE_ENV === 'development'
+const isMac = process.platform === 'darwin'
 
 createDb()
 const apiServer = new ApiServer()
@@ -24,7 +25,7 @@ function createWindow () {
     width: 1000,
     height: 600,
     ...bounds,
-    titleBarStyle: 'hidden',
+    titleBarStyle: isMac ? 'hidden' : 'default',
     webPreferences: {
       preload: path.resolve(__dirname, 'preload.js'),
       nodeIntegration: true,

src/main/menu/main.ts

@@ -1,7 +1,8 @@
 import { createMenu } from '../components/menu'
 import type { MenuItemConstructorOptions } from 'electron'
-import { app, BrowserWindow } from 'electron'
+import { dialog, app, BrowserWindow } from 'electron'
 import { version, author } from '../../../package.json'
+import os from 'os'
 
 const isDev = process.env.NODE_ENV === 'development'
 const isMac = process.platform === 'darwin'
@@ -80,6 +81,25 @@ const helpMenu: MenuItemConstructorOptions[] = [
   {
     label: 'Toogle Dev tools',
     role: 'toggleDevTools'
+  },
+  {
+    label: 'About',
+    click () {
+      dialog.showMessageBox(BrowserWindow.getFocusedWindow()!, {
+        title: 'massCode',
+        message: 'massCode',
+        type: 'info',
+        detail: `
+          Version: ${version}
+          Electron: ${process.versions.electron}
+          Chrome: ${process.versions.chrome}
+          Node.js: ${process.versions.node}
+          V8: ${process.versions.v8}
+          OS: ${os.type()} ${os.arch()} ${os.release()}
+          ©2019-${year} Anton Reshetov <[email protected]>
+        `
+      })
+    }
   }
 ]
 

src/main/preload.ts

@@ -5,6 +5,7 @@ import type { ElectronBridge } from '@shared/types/main'
 import { version } from '../../package.json'
 import type { TrackEvents } from '@shared/types/main/analytics'
 import { analytics } from './services/analytics'
+import { platform } from 'os'
 
 const isDev = process.env.NODE_ENV === 'development'
 
@@ -39,5 +40,6 @@ contextBridge.exposeInMainWorld('electron', {
       : `${version}/${event}`
 
     analytics.pageview(path).send()
-  }
+  },
+  platform: () => platform()
 } as ElectronBridge)

src/main/services/ipc/context-menu.ts

@@ -1,4 +1,4 @@
-import { createPopupMenu } from '../../components/menu'
+import { createMenu } from '../../components/menu'
 import type { MenuItemConstructorOptions } from 'electron'
 import { BrowserWindow, MenuItem, dialog, ipcMain } from 'electron'
 import type {
@@ -14,7 +14,7 @@ export const subscribeToContextMenu = () => {
       const { name, type } = payload
 
       return new Promise(resolve => {
-        createPopupMenu([
+        const menu = createMenu([
           {
             label: `Rename "${name}"`,
             click: () =>
@@ -45,6 +45,8 @@ export const subscribeToContextMenu = () => {
             }
           }
         ])
+
+        menu.popup({ window: BrowserWindow.getFocusedWindow()! })
       })
     }
   )
@@ -55,7 +57,7 @@ export const subscribeToContextMenu = () => {
       const { name, type, selectedCount } = payload
 
       return new Promise(resolve => {
-        const menu = createPopupMenu([])
+        const menu = createMenu([])
 
         const defaultMenu: MenuItemConstructorOptions[] = [
           {
@@ -151,18 +153,21 @@ export const subscribeToContextMenu = () => {
         if (type === 'folder' || type === 'all' || type === 'inbox') {
           defaultMenu.forEach(i => {
             menu.append(new MenuItem(i))
+            menu.popup({ window: BrowserWindow.getFocusedWindow()! })
           })
         }
 
         if (type === 'favorites') {
           favoritesMenu.forEach(i => {
             menu.append(new MenuItem(i))
+            menu.popup({ window: BrowserWindow.getFocusedWindow()! })
           })
         }
 
         if (type === 'trash') {
           trashMenu.forEach(i => {
             menu.append(new MenuItem(i))
+            menu.popup({ window: BrowserWindow.getFocusedWindow()! })
           })
         }
 
@@ -181,7 +186,7 @@ export const subscribeToContextMenu = () => {
       const { name, type, data } = payload
 
       return new Promise(resolve => {
-        const menu = createPopupMenu([])
+        const menu = createMenu([])
 
         const createLanguageMenu = () => {
           return languages.map(i => {
@@ -308,18 +313,21 @@ export const subscribeToContextMenu = () => {
         if (type === 'folder') {
           folderMenu.forEach(i => {
             menu.append(new MenuItem(i))
+            menu.popup({ window: BrowserWindow.getFocusedWindow()! })
           })
         }
 
         if (type === 'tag') {
           tagMenu.forEach(i => {
             menu.append(new MenuItem(i))
+            menu.popup({ window: BrowserWindow.getFocusedWindow()! })
           })
         }
 
         if (type === 'trash') {
           trashMenu.forEach(i => {
             menu.append(new MenuItem(i))
+            menu.popup({ window: BrowserWindow.getFocusedWindow()! })
           })
         }
 

src/renderer/App.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="app-title-bar" />
+  <div
+    class="app-title-bar"
+    :class="{ 'is-win': appStore.platform === 'win32' }"
+  />
   <RouterView />
   <div
     v-if="isUpdateAvailable"
@@ -63,6 +66,9 @@ body {
     -webkit-app-region: drag;
     z-index: 1010;
     transition: all 0.5s;
+    &.is-win {
+      border-top: 1px solid var(--color-border);
+    }
   }
 }
 .update {

src/renderer/electron.ts

@@ -1,3 +1,3 @@
-const { ipc, store, db, track } = window.electron
+const { ipc, store, db, track, platform } = window.electron
 
-export { ipc, store, db, track }
+export { ipc, store, db, track, platform }

src/renderer/store/app.ts

@@ -1,3 +1,4 @@
+import { platform } from '@/electron'
 import type { State } from '@shared/types/renderer/store/app'
 import { defineStore } from 'pinia'
 import { version } from '../../../package.json'
@@ -16,6 +17,7 @@ export const useAppStore = defineStore('app', {
         footerHeight: 30
       }
     },
-    version
+    version,
+    platform: platform()
   })
 })