infra: add renderer UI powered by Vite & React (#27)

.gitignore

@@ -1,8 +1,33 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
 dist
+dist-ssr
+*.local
+
 .cache
 .env
 config.gypi
 *.nupkg
 *.bak
 dev-app-update.yml
+
+
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.npmrc

@@ -0,0 +1 @@
+strict-peer-dependencies = false

docs/DEVELOPING.md

@@ -0,0 +1,20 @@
+# Developer Guide
+
+## Development workflow
+
+Run `npm start` to open the Electron app and load the WebUI via the Vite DEV server. Changes made
+inside `renderer` files will be immediately applied in the running app.
+
+Run `npm lint` to check for coding style issues and type errors.
+
+## CommonJS vs ES Modules
+
+Electron does not support ESM for the backend code. We use CommonJS (`require`) in those files.
+
+The front-end is written in TypeScript; there is no such limitation. Therefore inside `renderer`,
+we use ESM to get better developer experience and tooling support.
+
+## Updating to a new major version of Electron/Chromium
+
+After updating to a newer Chromium version, update the compilation target for `renderer` files
+in [vite.config.js](./../vite.config.js).

electron-builder.yml

@@ -3,12 +3,13 @@ generateUpdatesFilesForAllChannels: true
 
 files:
   - filter:
-    - src/**/*
+    - main/**/*
     - assets/**/*
+    - renderer/dist/**/*
     - node_modules/**/*
     - package.json
 
-asarUnpack: 'src/**/scripts/**/*'
+asarUnpack: 'main/**/scripts/**/*'
 
 afterSign: 'build/notarize-macos.js'
 

main/ui.js

@@ -0,0 +1,81 @@
+const { BrowserWindow, app, screen } = require('electron')
+const store = require('./store')
+const path = require('node:path')
+const { pathToFileURL } = require('node:url')
+
+/**
+ * @param {import('./typings').Context} ctx
+ * @returns {Promise<BrowserWindow>}
+ */
+module.exports = async function (ctx) {
+  // Show docks only when UI is visible
+  if (app.dock) app.dock.hide()
+
+  const dimensions = screen.getPrimaryDisplay().size
+  const ui = new BrowserWindow({
+    title: 'Filecoin Station',
+    show: false, // we show it via ready-to-show
+    width: store.get('ui.width', dimensions.width < 1440 ? dimensions.width : 1440),
+    height: store.get('ui.height', dimensions.height < 900 ? dimensions.height : 900),
+    autoHideMenuBar: true,
+    titleBarStyle: 'hiddenInset',
+    webPreferences: {
+      nodeIntegration: false
+      // TODO: preload: path.join(__dirname, 'preload.js')
+    }
+  })
+
+  /** @type {import('vite').ViteDevServer} */
+  let devServer
+
+  if (app.isPackaged || process.env.NODE_ENV !== 'development') {
+    ui.loadURL(pathToFileURL(path.join(__dirname, '../renderer/dist/index.html')).toString())
+  } else {
+    console.log('Starting Vite DEV server')
+    const { createServer } = require('vite')
+    devServer = await createServer({
+      configFile: require.resolve('../vite.config.js'),
+      server: {
+        port: 3000
+      }
+    })
+    await devServer.listen()
+
+    console.log('Installing React developer tools')
+    const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer')
+    await installExtension(REACT_DEVELOPER_TOOLS).then(
+      name => console.log('Added extension:', name),
+      error => console.error('Cannot install React developer tools:', error)
+    )
+
+    console.log('Opening DevTools')
+    ui.webContents.openDevTools()
+
+    console.log('Loading the WebUI')
+    ui.loadURL('http://localhost:3000/')
+  }
+
+  // UX trick to avoid jittery UI while browser initializes chrome
+  ctx.showUI = () => {
+    if (app.dock) app.dock.show()
+    ui.show()
+  }
+  ui.once('ready-to-show', ctx.showUI)
+
+  // Don't exit when window is closed (Quit only via Tray icon menu)
+  ui.on('close', (event) => {
+    event.preventDefault()
+    ui.hide()
+    if (app.dock) app.dock.hide()
+  })
+
+  // When true quit is triggered we need to remove listeners
+  // that were added to keep app running when the UI is closed.
+  // (Without this, the app would run forever and/or fail to update)
+  app.on('before-quit', () => {
+    ui.removeAllListeners('close')
+    devServer?.close()
+  })
+
+  return ui
+}