Esbuild main process (#580)

* main is working

* make web compile too

* updating ci

* fix

.github/workflows/main.yml

@@ -7,64 +7,71 @@ on:
     tags-ignore:
       - '**'
     paths-ignore:
-      - 'showcase/**'
       - README.md
 
 jobs:
+  renderer:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+    - run: yarn --frozen-lockfile
+      working-directory: ./renderer
+    - run: yarn make-index-files
+      working-directory: ./renderer
+    - run: yarn build
+      working-directory: ./renderer
+    - uses: actions/upload-artifact@v3
+      with:
+        name: renderer-dist
+        path: ./renderer/dist
+        retention-days: 1
+
   windows:
+    needs: renderer
     runs-on: windows-2019
     steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
         node-version: 14
-    - uses: actions/cache@v2
-      id: yarn-cache
+    - uses: actions/download-artifact@v3
       with:
-        path: node_modules
-        key: ${{ runner.os }}-node-modules-${{ hashFiles('**/yarn.lock') }}
+        name: renderer-dist
+        path: ./renderer/dist
     - run: yarn --frozen-lockfile
-      if: steps.yarn-cache.outputs.cache-hit != 'true'
-    - run: yarn make-index-files
-    - run: yarn electron:publish
+      working-directory: ./main
+    - run: yarn build
+      working-directory: ./main
+    - run: yarn package -p onTagOrDraft
+      working-directory: ./main
       env:
         GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     - name: Hash
-      run: type .\dist_electron\latest.yml
+      run: type .\main\dist\latest.yml
 
   linux:
+    needs: renderer
     runs-on: ubuntu-20.04
     steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
         node-version: 14
-    - uses: actions/cache@v2
-      id: yarn-cache
+    - uses: actions/download-artifact@v3
       with:
-        path: node_modules
-        key: ${{ runner.os }}-node-modules-${{ hashFiles('**/yarn.lock') }}
+        name: renderer-dist
+        path: ./renderer/dist
     - run: |
         sudo apt-get update
         sudo apt-get install -y libxtst-dev libpng++-dev
     - run: yarn --frozen-lockfile
-      if: steps.yarn-cache.outputs.cache-hit != 'true'
-    - run: yarn make-index-files
-    - run: yarn electron:publish
+      working-directory: ./main
+    - run: yarn build
+      working-directory: ./main
+    - run: yarn package -p onTagOrDraft
+      working-directory: ./main
       env:
         GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     - name: Hash
-      run: cat ./dist_electron/latest-linux.yml
-
-  # darwin:
-  #   runs-on: macos-10.15
-  #   steps:
-  #   - uses: actions/checkout@v2
-  #   - uses: actions/setup-node@v2
-  #     with:
-  #       node-version: 12
-  #   - run: yarn --frozen-lockfile
-  #   - run: yarn make-index-files
-  #   - run: yarn electron:publish
-  #     env:
-  #       GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      run: cat ./main/dist/latest-linux.yml

.gitignore

@@ -1,6 +1,6 @@
 .DS_Store
 node_modules
-/dist
+*/dist/**
 
 # local env files
 .env.local

main/build/script.cjs

@@ -0,0 +1,52 @@
+const path = require('path')
+const child_process = require('child_process')
+const electron = require('electron')
+const esbuild = require('esbuild')
+
+const isDev = !process.argv.includes('--prod')
+
+const electronRunner = (() => {
+  let handle = null
+  return {
+    restart () {
+      console.info('Restarting Electron process.')
+
+      if (handle) handle.kill()
+      handle = child_process.spawn(electron, ['./dist/main.js'], {
+        stdio: 'inherit'
+      })
+    }
+  }
+})()
+
+const preloadBuild = esbuild.build({
+  entryPoints: ['../ipc/preload.ts'],
+  bundle: true,
+  platform: 'node',
+  external: ['electron'],
+  outfile: 'dist/preload.js',
+  watch: isDev
+})
+
+const mainBuild = esbuild.build({
+  entryPoints: ['src/main.ts'],
+  bundle: true,
+  minify: !isDev,
+  platform: 'node',
+  external: ['electron', 'uiohook-napi', 'robotjs', 'electron-overlay-window'],
+  outfile: 'dist/main.js',
+  define: {
+    'process.env.STATIC': (isDev) ? '"../build/icons"' : '"."',
+    'process.env.VITE_DEV_SERVER_URL': (isDev) ? '"http://localhost:3000"' : 'null'
+  },
+  watch: (isDev)
+    ? { onRebuild (error) { if (!error) electronRunner.restart() } }
+    : false
+})
+
+Promise.all([
+  preloadBuild,
+  mainBuild
+])
+.then(() => { if (isDev) electronRunner.restart() })
+.catch(() => process.exit(1))

main/electron-builder.yml

@@ -0,0 +1,21 @@
+publish:
+  - "github"
+productName: "Awakened PoE Trade"
+npmRebuild: false
+files:
+  - "package.json"
+  - from: "dist"
+    to: "."
+    filter: ["main.js", "preload.js"]
+  - from: "../renderer/dist"
+    to: "."
+nsis:
+  oneClick: false
+  allowToChangeInstallationDirectory: true
+win:
+  target:
+  - "nsis"
+  - "portable"
+linux:
+  target:
+  - "AppImage"

main/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "awakened-poe-trade",
+  "version": "3.17.10005",
+  "private": true,
+  "scripts": {
+    "dev": "node build/script.cjs",
+    "build": "tsc --noEmit && node build/script.cjs --prod",
+    "package": "electron-builder build",
+    "postinstall": "patch-package && electron-builder install-app-deps",
+    "postuninstall": "electron-builder install-app-deps"
+  },
+  "author": {
+    "name": "Alexander Drozdov"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SnosMe/awakened-poe-trade.git"
+  },
+  "main": "main.js",
+  "dependencies": {
+    "electron-overlay-window": "3.0.0-beta.1",
+    "robotjs": "^0.6.0",
+    "uiohook-napi": "1.0.x"
+  },
+  "devDependencies": {
+    "@types/ini": "^1.3.30",
+    "@types/node": "^14.0.0",
+    "electron-store": "8.0.x",
+    "electron-updater": "^4.2.0",
+    "fast-deep-equal": "3.1.x",
+    "esbuild": "^0.14.27",
+    "ini": "^2.0.0",
+    "winston": "3.x.x",
+    "electron": "14.0.1",
+    "patch-package": "^6.2.0",
+    "typescript": "4.4.x",
+    "electron-builder": "22.14.5"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}

main/src/config.ts

@@ -1,10 +1,10 @@
 import Store from 'electron-store'
 import { dialog, app } from 'electron'
 import isDeepEq from 'fast-deep-equal'
-import { Config, defaultConfig } from '@/ipc/types'
+import { Config, defaultConfig } from '../../ipc/types'
 import { logger } from './logger'
 import { LogWatcher } from './LogWatcher'
-import { ItemCheckWidget } from '@/ipc/widgets'
+import { ItemCheckWidget } from '../../ipc/widgets'
 import { loadAndCache as loadAndCacheGameCfg } from './game-config'
 import { overlayOnEvent } from './overlay-window'
 

main/src/game-config.ts

@@ -4,7 +4,7 @@ import ini from 'ini'
 import { app } from 'electron'
 import { config as appConfig } from './config'
 import { logger } from './logger'
-import { hotkeyToString, CodeToKey } from '@/ipc/KeyToCode'
+import { hotkeyToString, CodeToKey } from '../../ipc/KeyToCode'
 
 export interface GameConfig {
   highlightKey: string | null

main/src/logger.ts

@@ -4,7 +4,7 @@ import winston from 'winston'
 import { config } from './config'
 
 export const logger = winston.createLogger({
-  level: config.get('logLevel') as winston.level,
+  level: config.get('logLevel'),
   format: winston.format.json(),
   defaultMeta: { source: 'etc' },
   transports: [

main/src/main.ts

@@ -1,18 +1,18 @@
 'use strict'
 
 import { app, protocol } from 'electron'
-import { setupShortcuts } from './main/shortcuts'
-import { createTray } from './main/tray'
-import { setupShowHide } from './main/price-check'
-import { setupConfigEvents, config } from './main/config'
-import { logger } from './main/logger'
-import { checkForUpdates } from './main/updates'
+import { setupShortcuts } from './shortcuts'
+import { createTray } from './tray'
+import { setupShowHide } from './price-check'
+import { setupConfigEvents, config } from './config'
+import { logger } from './logger'
+import { checkForUpdates } from './updates'
 import os from 'os'
-import { createOverlayWindow } from './main/overlay-window'
-import { setupAltVisibility } from './main/alt-visibility'
-import { createFileProtocol } from './main/app-file-protocol'
-import { LogWatcher } from './main/LogWatcher'
-import { loadAndCache as loadAndCacheGameCfg } from './main/game-config'
+import { createOverlayWindow } from './overlay-window'
+import { setupAltVisibility } from './alt-visibility'
+import { createFileProtocol } from './app-file-protocol'
+import { LogWatcher } from './LogWatcher'
+import { loadAndCache as loadAndCacheGameCfg } from './game-config'
 
 if (!app.requestSingleInstanceLock()) {
   app.exit()

main/src/overlay-window.ts

@@ -3,7 +3,7 @@ import assert from 'assert'
 import { BrowserWindow, ipcMain, dialog, shell, Menu, systemPreferences, IpcMainEvent, WebContents } from 'electron'
 import { PoeWindow } from './PoeWindow'
 import { logger } from './logger'
-import * as ipc from '@/ipc/ipc-event'
+import * as ipc from '../../ipc/ipc-event'
 import { OverlayWindow as OW } from 'electron-overlay-window'
 import { config } from './config'
 
@@ -45,7 +45,7 @@ export async function createOverlayWindow () {
   PoeWindow.onAttach(handleOverlayAttached)
 
   overlayWindow = new BrowserWindow({
-    icon: path.join(__static, 'icon.png'),
+    icon: path.join(__dirname, process.env.STATIC!, 'icon.png'),
     ...OW.WINDOW_OPTS,
     width: 800,
     height: 600,
@@ -71,8 +71,8 @@ export async function createOverlayWindow () {
     return { action: 'deny' }
   })
 
-  if (process.env.WEBPACK_DEV_SERVER_URL) {
-    overlayWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
+  if (process.env.VITE_DEV_SERVER_URL) {
+    overlayWindow.loadURL(process.env.VITE_DEV_SERVER_URL)
     overlayWindow.webContents.openDevTools({ mode: 'detach', activate: false })
   } else {
     overlayWindow.loadURL('app://./index.html')

main/src/price-check.ts

@@ -5,7 +5,7 @@ import { PoeWindow } from './PoeWindow'
 import { config } from './config'
 import { logger } from './logger'
 import { isInteractable, assertOverlayActive, assertPoEActive, DPR, overlayOnEvent, overlaySendEvent } from './overlay-window'
-import type { PriceCheckWidget } from '@/ipc/widgets'
+import type { PriceCheckWidget } from '../../ipc/widgets'
 
 const WIDTH_96DPI = 460 / 16
 const CLOSE_THRESHOLD_96DPI = 40 / 16

main/src/shortcuts.ts

@@ -3,12 +3,12 @@ import robotjs from 'robotjs'
 import { uIOhook, UiohookKey, UiohookWheelEvent } from 'uiohook-napi'
 import { pollClipboard } from './poll-clipboard'
 import { priceCheckConfig, showWidget as showPriceCheck } from './price-check'
-import { isModKey, KeyToElectron, mergeTwoHotkeys } from '@/ipc/KeyToCode'
+import { isModKey, KeyToElectron, mergeTwoHotkeys } from '../../ipc/KeyToCode'
 import { config } from './config'
 import { PoeWindow } from './PoeWindow'
 import { logger } from './logger'
 import { toggleOverlayState, assertOverlayActive, assertPoEActive, overlayOnEvent, overlaySendEvent } from './overlay-window'
-import * as ipc from '@/ipc/ipc-event'
+import * as ipc from '../../ipc/ipc-event'
 import { typeInChat } from './game-chat'
 import { gameConfig } from './game-config'
 import { restoreClipboard } from './clipboard-saver'

main/src/tray.ts

@@ -7,7 +7,7 @@ let tray: Tray
 
 export function createTray () {
   tray = new Tray(
-    nativeImage.createFromPath(path.join(__static, process.platform === 'win32' ? 'icon.ico' : 'icon.png'))
+    nativeImage.createFromPath(path.join(__dirname, process.env.STATIC!, process.platform === 'win32' ? 'icon.ico' : 'icon.png'))
   )
 
   tray.setToolTip('Awakened PoE Trade')

main/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "module": "esnext",
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node"
+  }
+}

renderer/package.json

@@ -1,54 +1,30 @@
 {
   "name": "awakened-poe-trade",
-  "version": "3.17.10004",
+  "version": "0.0.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "electron:build": "vue-cli-service electron:build",
-    "electron:publish": "vue-cli-service electron:build -p onTagOrDraft",
-    "electron:serve": "vue-cli-service electron:serve",
-    "electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten",
-    "postinstall": "patch-package && electron-builder install-app-deps",
-    "postuninstall": "electron-builder install-app-deps",
     "make-index-files": "node src/assets/make-index-files.mjs"
   },
-  "author": {
-    "name": "Alexander Drozdov"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/SnosMe/awakened-poe-trade.git"
-  },
-  "main": "background.js",
   "dependencies": {
     "@bensjoberg/fnv1a": "3.0.0",
     "@fortawesome/fontawesome-free": "5.15.x",
     "animate.css": "^4.1.1",
     "apexcharts": "^3.23.1",
     "dot-prop": "6.x.x",
-    "electron-overlay-window": "3.0.0-beta.1",
-    "electron-store": "8.0.x",
-    "electron-updater": "^4.2.0",
-    "fast-deep-equal": "3.1.x",
-    "ini": "^2.0.0",
     "luxon": "2.x.x",
     "object-hash": "^2.1.1",
-    "robotjs": "^0.6.0",
     "tailwindcss": "2.x.x",
     "tippy.js": "^6.2.7",
-    "uiohook-napi": "1.0.x",
     "vue": "3.2.x",
     "vue-i18n": "9.0.0-rc.7",
     "vue-slider-component": "4.0.0-beta.3",
     "vue3-apexcharts": "^1.1.1",
-    "vuedraggable": "4.0.1",
-    "winston": "3.x.x"
+    "vuedraggable": "4.0.1"
   },
   "devDependencies": {
     "@intlify/vue-i18n-loader": "^3.0.0",
-    "@types/ini": "^1.3.30",
     "@types/luxon": "^2.0.0",
     "@types/node": "^14.0.0",
     "@types/object-hash": "^2.0.0",
@@ -58,21 +34,14 @@
     "@vue/cli-plugin-typescript": "5.0.0-beta.7",
     "@vue/cli-service": "5.0.0-beta.7",
     "@vue/compiler-sfc": "^3.0.0",
-    "electron": "14.0.1",
     "eslint": "^7.15.0",
     "eslint-config-standard-with-typescript": "^21.0.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-only-warn": "^1.0.2",
     "eslint-plugin-promise": "^5.0.0",
     "eslint-plugin-vue": "^7.2.0",
-    "patch-package": "^6.2.0",
     "postcss-nested": "^5.0.3",
-    "typescript": "4.4.x",
-    "vue-cli-plugin-electron-builder": "2.1.1"
-  },
-  "resolutions": {
-    "vue-cli-plugin-electron-builder/electron-builder": "22.14.5"
+    "typescript": "4.4.x"
   },
   "postcss": {
     "plugins": {
@@ -80,8 +49,5 @@
       "postcss-nested": {},
       "autoprefixer": {}
     }
-  },
-  "engines": {
-    "node": ">=14"
   }
 }

renderer/src/shims-vue.d.ts

@@ -0,0 +1,21 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare module 'vue3-apexcharts' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare module '*.json' {
+  const value: any
+  export default value
+}
+
+interface File {
+  // https://www.electronjs.org/docs/latest/api/file-object
+  path: string
+}

renderer/src/web/Config.ts

@@ -1,6 +1,6 @@
 import { reactive as deepReactive, shallowRef } from 'vue'
 import { MainProcess } from '@/web/background/IPC'
-import type { Config } from '@/ipc/types'
+import type { Config } from '@/../../ipc/types'
 import type { Widget } from './overlay/interfaces'
 
 const _config = shallowRef<Config | null>(null)

renderer/src/web/background/AutoUpdates.ts

@@ -1,4 +1,4 @@
-import type { IpcUpdateInfo } from '@/ipc/ipc-event'
+import type { IpcUpdateInfo } from '@/../../ipc/ipc-event'
 import { MainProcess } from '@/web/background/IPC'
 import { shallowRef } from 'vue'
 

renderer/src/web/background/IPC.ts

@@ -1,5 +1,5 @@
-import type { IpcEvent, IpcEventPayload } from '@/ipc/ipc-event'
-import { Config, defaultConfig, PreloadExposed } from '@/ipc/types'
+import type { IpcEvent, IpcEventPayload } from '@/../../ipc/ipc-event'
+import { Config, defaultConfig, PreloadExposed } from '@/../../ipc/types'
 
 declare global {
   interface Window {