feat: use vite electron (antfu-collective#122)

Co-authored-by: Anthony Fu <[email protected]>

.eslintignore

@@ -4,3 +4,4 @@ public/lib
 release
 collections-info.json
 collections-meta.json
+dist-electron

.gitignore

@@ -11,3 +11,5 @@ public/lib
 release
 collections-info.json
 collections-meta.json
+
+dist-electron

.npmrc

@@ -1 +1,2 @@
 shamefully-hoist=true
+ignore-workspace-root-check=true

.vscode/settings.json

@@ -3,5 +3,10 @@
   "cSpell.words": [
     "icones"
   ],
-  "i18n-ally.enabledFramework": []
+  "i18n-ally.enabledFramework": [],
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }

electron/electron-builder.json5

@@ -0,0 +1,41 @@
+/**
+ * @see https://www.electron.build/configuration/configuration
+ */
+{
+  "productName": "Icônes",
+  "appId": "me.antfu.icones",
+  "directories": {
+    "output": "release"
+  },
+  "icon": "build/icon.png",
+  "mac": {
+    "target": "dmg"
+  },
+  "extraResources": [
+    {
+      "from": "build/icon.png",
+      "to": "icon.png"
+    }
+  ],
+  "publish": {
+    "provider": "github",
+    "owner": "antfu",
+    "repo": "icones",
+    "private": false
+  },
+  "files": ["dist-electron", "dist"],
+  "win": {
+    "target": [
+      {
+        "target": "nsis",
+        "arch": ["x64"]
+      }
+    ]
+  },
+  "nsis": {
+    "oneClick": false,
+    "perMachine": false,
+    "allowToChangeInstallationDirectory": true,
+    "deleteAppDataOnUninstall": false
+  }
+}

electron/package.json

@@ -13,47 +13,19 @@
   "bugs": {
     "url": "https://github.com/antfu/icones/issues"
   },
-  "main": "dist/main/main.js",
+  "main": "dist-electron/main/index.js",
   "copyright": "Copyright © 2020 Anthony Fu",
   "scripts": {
-    "dev": "electron-webpack dev",
-    "compile": "electron-webpack",
-    "copy": "cp -r ../dist ./dist/main/app",
-    "build:vite": "cd .. && yarn build && cd electron",
-    "build": "cd .. && yarn build && cd electron && yarn compile && yarn copy && electron-builder build",
-    "package": "yarn copy && electron-builder build -c.mac.identity=null"
-  },
-  "build": {
-    "productName": "Icônes",
-    "appId": "me.antfu.icones",
-    "directories": {
-      "output": "release"
-    },
-    "mac": {
-      "target": "dmg"
-    },
-    "publish": {
-      "provider": "github",
-      "owner": "antfu",
-      "repo": "icones",
-      "private": false
-    },
-    "files": [
-      "dist",
-      "build"
-    ]
-  },
-  "dependencies": {
-    "babel-loader": "^8.2.5",
-    "electron-debug": "^3.2.0",
-    "electron-serve": "^1.1.0",
-    "electron-util": "^0.17.2",
-    "source-map-support": "^0.5.21"
+    "dev": "vite ../ --port 3333 --mode electron",
+    "copy": "cp -r ../dist ./",
+    "build": "vite build ../ --mode electron && yarn copy && electron-builder"
   },
   "devDependencies": {
-    "electron": "17.1.2",
-    "electron-builder": "^23.0.2",
-    "electron-webpack": "^2.8.2",
-    "webpack": "~5.74.0"
+    "electron": "^22.3.3",
+    "electron-builder": "^23.6.0",
+    "electron-devtools-installer": "^3.2.0",
+    "vite-plugin-electron": "^0.11.1",
+    "vite-plugin-electron-renderer": "^0.12.1",
+    "vite-plugin-esmodule": "^1.4.4"
   }
 }

electron/src/main/index.js → electron/src/main/index.ts

@@ -1,13 +1,12 @@
+import path from 'path'
 import { BrowserWindow, app, shell } from 'electron'
-import serve from 'electron-serve'
-import debug from 'electron-debug'
+import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
 
-const DEV = process.env.NODE_ENV !== 'production'
+let mainWindow: BrowserWindow | null = null
 
-debug({ showDevTools: false })
-serve({ directory: DEV ? '../../../dist' : 'app' })
+app.disableHardwareAcceleration()
 
-let mainWindow
+const PROJECT_ROOT = path.resolve(__dirname, '../..')
 
 const createMainWindow = async () => {
   const win = new BrowserWindow({
@@ -18,27 +17,43 @@ const createMainWindow = async () => {
     minWidth: 200,
     minHeight: 200,
     titleBarStyle: 'hiddenInset',
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false,
+    },
   })
 
+  if (app.isPackaged) {
+    win.loadFile(path.join(PROJECT_ROOT, 'dist/index.html'))
+    win.removeMenu()
+  }
+  else {
+    win.loadURL('https://localhost:3333/')
+    win.webContents.openDevTools()
+    await installExtension(VUEJS_DEVTOOLS)
+  }
+
   win.on('ready-to-show', () => {
     win.show()
   })
 
   win.on('closed', () => {
-    mainWindow = undefined
+    mainWindow = null
   })
 
-  win.removeMenu()
-
-  const handleRedirect = (e, url) => {
+  const handleRedirect = (e: Event, url: string) => {
     if (url !== win.webContents.getURL()) {
       e.preventDefault()
       shell.openExternal(url)
     }
   }
 
   win.webContents.on('will-navigate', handleRedirect)
-  win.webContents.on('new-window', handleRedirect)
+
+  win.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url)
+    return { action: 'deny' }
+  })
 
   return win
 }
@@ -55,11 +70,10 @@ app.on('activate', async () => {
     mainWindow = await createMainWindow()
 })
 
-;(async () => {
+; (async () => {
   await app.whenReady()
 
   mainWindow = await createMainWindow()
-  mainWindow.loadURL(DEV ? 'https://localhost:3333/' : 'app:https://-')
   mainWindow.focus()
 })()
   .catch(console.error)

package.json

@@ -32,6 +32,7 @@
     "fzf": "^0.5.1",
     "hotkeys-js": "^3.10.1",
     "iconify-icon": "1.0.7",
+    "prettier": "^2.8.4",
     "vue": "3.2.47",
     "vue-chemistry": "^0.2.2",
     "vue-router": "4.1.6"
@@ -42,6 +43,7 @@
     "@purge-icons/generated": "^0.9.0",
     "@types/file-saver": "^2.0.5",
     "@types/fs-extra": "^11.0.1",
+    "@types/prettier": "^2.7.2",
     "@vitejs/plugin-vue": "^4.1.0",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.7",
@@ -66,7 +68,10 @@
   "pnpm": {
     "neverBuiltDependencies": [
       "electron",
-      "electron-builder"
+      "electron-builder",
+      "vite-plugin-electron",
+      "vite-plugin-electron-renderer",
+      "vite-plugin-esmodule"
     ]
   }
 }