feat: add auto-update support to text-diff-view (#32)

* feat: add auto-update support to text-diff-view and browser-space

- Add electron-updater to both projects
- Initialize autoUpdater in main process (disabled in dev)
- Expose installUpdate via preload IPC bridge
- Add update notification banner (bottom-right) in renderer
- Set publish provider to GitHub Releases in electron-builder.yml
- Add latest.yml / blockmap to release workflow artifacts
- Create dev-app-update.yml for browser-space

* 1.7.0

Author: kaishuu0123

.github/workflows/electron-build.yml

@@ -8,6 +8,8 @@ on:
 jobs:
   release:
     runs-on: ${{ matrix.os }}
+    permissions:
+      contents: write
 
     strategy:
       matrix:
@@ -57,5 +59,9 @@ jobs:
             dist/*.exe
             dist/*.snap
             dist/*.AppImage
+            dist/latest.yml
+            dist/latest-mac.yml
+            dist/latest-linux.yml
+            dist/*.blockmap
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

electron-builder.yml

@@ -43,7 +43,8 @@ appImage:
   artifactName: ${name}-${version}.${ext}
 npmRebuild: false
 publish:
-  provider: generic
-  url: https://example.com/auto-updates
+  provider: github
+  owner: kaishuu0123
+  repo: text-diff-view
 electronDownload:
   mirror: https://npmmirror.com/mirrors/electron/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "text-diff-view",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "text diff view electron app. Text-only.",
   "type": "module",
   "main": "./out/main/index.js",

src/main/index.ts

@@ -1,3 +1,5 @@
+import pkg from 'electron-updater'
+const { autoUpdater } = pkg
 import { app, shell, BrowserWindow, ipcMain, Menu } from 'electron'
 import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
@@ -27,12 +29,32 @@ if (process.platform !== 'darwin') {
   Menu.setApplicationMenu(null)
 }
 
+let mainWindow: BrowserWindow
+
+export function initAutoUpdater(win: BrowserWindow): void {
+  // 開発環境では動かさない
+  if (!app.isPackaged) return
+
+  autoUpdater.autoDownload = true
+  autoUpdater.autoInstallOnAppQuit = true
+
+  autoUpdater.on('update-downloaded', (info) => {
+    win.webContents.send('update-downloaded', info)
+  })
+
+  autoUpdater.on('error', (err) => {
+    console.error('AutoUpdater error:', err)
+  })
+
+  autoUpdater.checkForUpdates()
+}
+
 let resizeTimeout: NodeJS.Timeout | null = null
 let moveTimeout: NodeJS.Timeout | null = null
 
 function createWindow(): void {
   // Create the browser window.
-  const mainWindow = new BrowserWindow({
+  mainWindow = new BrowserWindow({
     width: store.get('windowWidth') || 800,
     height: store.get('windowHeight') || 600,
     x: store.get('windowX'),
@@ -115,8 +137,14 @@ app.whenReady().then(() => {
     store.set('themeName', data)
   })
 
+  ipcMain.on('install-update', () => {
+    autoUpdater.quitAndInstall()
+  })
+
   createWindow()
 
+  initAutoUpdater(mainWindow)
+
   app.on('activate', function () {
     // On macOS it's common to re-create a window in the app when the
     // dock icon is clicked and there are no other windows open.

src/preload/index.d.ts

@@ -6,6 +6,7 @@ declare global {
     api: {
       GetThemeName: () => Promise<string | null>
       SetThemeName: (themeName: string) => Promise<void>
+      installUpdate: () => void
     }
   }
 }

src/preload/index.ts

@@ -8,6 +8,9 @@ const api = {
   },
   SetThemeName: (themeName: string): Promise<boolean> => {
     return ipcRenderer.invoke('SetThemeName', themeName)
+  },
+  installUpdate: (): void => {
+    ipcRenderer.send('install-update')
   }
 }
 

src/renderer/src/App.tsx

@@ -47,6 +47,7 @@ function App(): JSX.Element {
     getThemeColorByThemeName('light')
   )
   const [unifiedDiffDialogOpen, setUnifiedDiffDialogOpen] = useState(false)
+  const [updateInfo, setUpdateInfo] = useState<{ version: string } | null>(null)
 
   const options: monaco.editor.IDiffEditorOptions = {
     fontSize: 14,
@@ -109,6 +110,12 @@ function App(): JSX.Element {
     })()
   }, [])
 
+  useEffect(() => {
+    window.electron.ipcRenderer.on('update-downloaded', (_event, info) => {
+      setUpdateInfo(info)
+    })
+  }, [])
+
   return (
     <div
       id="app"
@@ -192,6 +199,18 @@ function App(): JSX.Element {
         diffEditor={currentEditor.current}
         themeName={selectedTheme.name}
       />
+
+      {updateInfo && (
+        <div className="fixed bottom-4 right-4 z-50 bg-background border border-border text-foreground p-3 rounded-lg shadow-md flex gap-3 items-center">
+          <span className="text-sm">アップデート v{updateInfo.version} が利用可能です</span>
+          <Button size="sm" variant="default" onClick={() => window.api.installUpdate()}>
+            再起動して更新
+          </Button>
+          <Button size="sm" variant="ghost" onClick={() => setUpdateInfo(null)}>
+            後で
+          </Button>
+        </div>
+      )}
     </div>
   )
 }

src/renderer/src/main.tsx

@@ -12,7 +12,8 @@ if (window.api === undefined) {
     },
     SetThemeName: async (themeName: string): Promise<void> => {
       localStorage.setItem('themeName', themeName)
-    }
+    },
+    installUpdate: (): void => {}
   }
 }