Compare commits

..

No commits in common. "main" and "1.0.0" have entirely different histories.
main ... 1.0.0

13 changed files with 28 additions and 363 deletions

View file

@ -40,6 +40,6 @@ appImage:
npmRebuild: false
publish:
provider: generic
url: https://git.thethomaas.net/TheThomaas/electron-vite-app/releases/download/latest/
url: https://git.thethomaas.net/TheThomaas/electron-vite-app
electronDownload:
mirror: https://npmmirror.com/mirrors/electron/

20
package-lock.json generated
View file

@ -1,18 +1,17 @@
{
"name": "electron-vite-app",
"version": "1.0.5",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "electron-vite-app",
"version": "1.0.5",
"version": "1.0.0",
"hasInstallScript": true,
"dependencies": {
"@electron-toolkit/preload": "^3.0.2",
"@electron-toolkit/utils": "^4.0.0",
"electron-updater": "^6.3.9",
"sonner": "^2.0.7"
"electron-updater": "^6.3.9"
},
"devDependencies": {
"@electron-toolkit/eslint-config-prettier": "^3.0.0",
@ -7846,6 +7845,7 @@
"version": "19.2.3",
"resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
"integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
@ -7855,6 +7855,7 @@
"version": "19.2.3",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
"integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
"dev": true,
"license": "MIT",
"dependencies": {
"scheduler": "^0.27.0"
@ -8234,6 +8235,7 @@
"version": "0.27.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
"integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
"dev": true,
"license": "MIT"
},
"node_modules/semver": {
@ -8506,16 +8508,6 @@
"node": ">= 14"
}
},
"node_modules/sonner": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
"integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
"license": "MIT",
"peerDependencies": {
"react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
"react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
}
},
"node_modules/source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",

View file

@ -1,6 +1,6 @@
{
"name": "electron-vite-app",
"version": "1.0.5",
"version": "1.0.0",
"description": "An Electron application with React and TypeScript",
"main": "./out/main/index.js",
"author": "example.com",
@ -24,8 +24,7 @@
"dependencies": {
"@electron-toolkit/preload": "^3.0.2",
"@electron-toolkit/utils": "^4.0.0",
"electron-updater": "^6.3.9",
"sonner": "^2.0.7"
"electron-updater": "^6.3.9"
},
"devDependencies": {
"@electron-toolkit/eslint-config-prettier": "^3.0.0",

View file

@ -2,54 +2,13 @@ import { app, shell, BrowserWindow, ipcMain, Notification } from 'electron'
import { join } from 'path'
import { electronApp, optimizer, is } from '@electron-toolkit/utils'
import icon from '../../resources/icon.png?asset'
import { autoUpdater, UpdateInfo } from 'electron-updater'
import Store from './lib/Store'
import { registerToastTarget, showErrorToast, showSuccessToast, showToast } from './lib/Toast'
import { autoUpdater } from 'electron-updater'
autoUpdater.autoDownload = false;
autoUpdater.autoInstallOnAppQuit = true;
const store = new Store({
configName: 'user-preferences',
defaults: {
showSetupWindow: true
}
});
let mainWindow: BrowserWindow;
let splashWindow: BrowserWindow;
let setupWindow: BrowserWindow;
function createSplashWindow(): void {
splashWindow = new BrowserWindow({
width: 350,
height: 350,
transparent: true,
frame: false,
alwaysOnTop: true
});
splashWindow.loadFile('src/renderer/splash.html');
splashWindow.center();
splashWindow.setSkipTaskbar(true);
splashWindow.show();
}
function createSetupWindow(): void {
setupWindow = new BrowserWindow({
width: 380,
height: 390,
show: false,
autoHideMenuBar: true,
...(process.platform === 'linux' ? { icon } : {}),
webPreferences: {
preload: join(__dirname, '../preload/index.js'),
sandbox: false
},
});
setupWindow.loadFile('src/renderer/setup.html');
}
function createMainWindow(): void {
let mainWindow;
function createWindow(): void {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 900,
@ -63,6 +22,10 @@ function createMainWindow(): void {
}
})
mainWindow.on('ready-to-show', () => {
mainWindow.show()
})
mainWindow.webContents.setWindowOpenHandler((details) => {
shell.openExternal(details.url)
return { action: 'deny' }
@ -77,38 +40,6 @@ function createMainWindow(): void {
}
}
function finishSetup(): void {
store.set('showSetupWindow', false);
createMainWindow();
mainWindow.on('ready-to-show', () => {
registerToastTarget(mainWindow);
mainWindow.show();
setupWindow.close();
})
}
function createWindow(): void {
createSplashWindow();
let showSetupWindow = store.get('showSetupWindow');
if (showSetupWindow) {
createSetupWindow();
setupWindow.on('ready-to-show', () => {
splashWindow.close();
setupWindow.show();
})
} else {
createMainWindow();
mainWindow.on('ready-to-show', () => {
registerToastTarget(mainWindow);
checkForUpdates();
splashWindow.close();
mainWindow.show();
})
}
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
@ -124,13 +55,7 @@ app.whenReady().then(() => {
})
// IPC test
ipcMain.on('ping', () => {
console.log('pong');
showToast('pong');
});
ipcMain.on('finish-setup', () => finishSetup())
ipcMain.handle('get-version', () => app.getVersion())
ipcMain.on('ping', () => console.log('pong'))
createWindow()
@ -139,6 +64,8 @@ app.whenReady().then(() => {
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
checkForUpdates();
})
// Quit when all windows are closed, except on macOS. There, it's common
@ -161,36 +88,30 @@ function showNotification(value: any) {
function checkForUpdates() {
autoUpdater.checkForUpdates();
console.log(`Checking for updates. Current version ${app.getVersion()}`);
showToast(`Checking for updates. Current version ${app.getVersion()}`);
showNotification(`Checking for updates. Current version ${app.getVersion()}`);
}
/*New Update Available*/
autoUpdater.on("update-available", (info: UpdateInfo) => {
console.log(`Update available. Current version ${app.getVersion()}`, info.version);
showToast(`Update available. Current version ${app.getVersion()}`);
autoUpdater.on("update-available", () => {
console.log(`Update available. Current version ${app.getVersion()}`);
showNotification(`Update available. Current version ${app.getVersion()}`);
let pth = autoUpdater.downloadUpdate();
console.log(pth);
showToast(`Download update path : ${pth}`);
showNotification(`Download update path : ${pth}`);
showNotification(pth);
});
autoUpdater.on("update-not-available", (info: UpdateInfo) => {
console.log(`No update available. Current version ${app.getVersion()}`, info.version);
showToast(`No update available. Current version ${app.getVersion()}, ${info.version}`);
showNotification(`No update available. Current version ${app.getVersion()}, ${info.version}`);
autoUpdater.on("update-not-available", () => {
console.log(`No update available. Current version ${app.getVersion()}`);
showNotification(`No update available. Current version ${app.getVersion()}`);
});
/*Download Completion Message*/
autoUpdater.on("update-downloaded", () => {
console.log(`Update downloaded. Current version ${app.getVersion()}`);
showSuccessToast(`Update downloaded. Current version ${app.getVersion()}`);
showNotification(`Update downloaded. Current version ${app.getVersion()}`);
});
autoUpdater.on("error", (info) => {
console.log(info);
showErrorToast(`Error: ${info}`);
showNotification(`Error: ${info}`);
showNotification(info);
});

View file

@ -1,47 +0,0 @@
// Source - https://stackoverflow.com/a/55203597
// Posted by Herman Andres Figueroa, modified by community. See post 'Timeline' for change history
// Retrieved 2026-01-26, License - CC BY-SA 4.0
import { app } from 'electron'
import path from 'path';
import fs from 'fs';
export default class Store {
constructor(opts) {
// Renderer process has to get `app` module via `remote`, whereas the main process can get it directly
// app.getPath('userData') will return a string of the user's app data directory path.
const userDataPath = app.getPath('userData');
// We'll use the `configName` property to set the file name and path.join to bring it all together as a string
this.path = path.join(userDataPath, opts.configName + '.json');
this.data = parseDataFile(this.path, opts.defaults);
}
path; data;
// This will just return the property on the `data` object
get(key) {
return this.data[key];
}
// ...and this will set it
set(key, val) {
this.data[key] = val;
// Wait, I thought using the node.js' synchronous APIs was bad form?
// We're not writing a server so there's not nearly the same IO demand on the process
// Also if we used an async API and our app was quit before the asynchronous write had a chance to complete,
// we might lose that data. Note that in a real app, we would try/catch this.
fs.writeFileSync(this.path, JSON.stringify(this.data));
}
}
function parseDataFile(filePath, defaults) {
// We'll try/catch it in case the file doesn't exist yet, which will be the case on the first application run.
// `fs.readFileSync` will return a JSON string which we then parse into a Javascript object
try {
// @ts-ignore
return JSON.parse(fs.readFileSync(filePath));
} catch(error) {
// if there was some kind of error, return the passed in defaults instead.
return defaults;
}
}

View file

@ -1,51 +0,0 @@
import { BrowserWindow } from 'electron';
export type ToastType = 'default' | 'info' | 'success' | 'warning' | 'error';
export interface Toast {
type: 'toast';
payload: {
toastType: ToastType;
message: string;
options?: {
duration?: number;
[key: string]: any;
};
};
}
let toastTarget: BrowserWindow | null = null;
export function registerToastTarget(win: BrowserWindow) {
toastTarget = win;
}
function sendToast(toastType: ToastType, message: string, options?: object): void {
if (!toastTarget) {
console.warn('No target window registered for toasts.');
return;
}
let optionsJSON;
if (options) {
optionsJSON = JSON.stringify(options);
}
toastTarget.webContents.send('toast', {
type: 'toast',
payload: { toastType, message, optionsJSON },
});
}
export function showToast(message: string, options?: object): void {
return sendToast('default', message, options)
}
export function showInformationToast(message: string, options?: object): void {
return sendToast('info', message, options)
}
export function showSuccessToast(message: string, options?: object): void {
return sendToast('success', message, options)
}
export function showWarningToast(message: string, options?: object): void {
return sendToast('warning', message, options)
}
export function showErrorToast(message: string, options?: object): void {
return sendToast('error', message, options)
}

View file

@ -1,4 +1,4 @@
import { contextBridge, ipcRenderer } from 'electron'
import { contextBridge } from 'electron'
import { electronAPI } from '@electron-toolkit/preload'
// Custom APIs for renderer
@ -9,10 +9,7 @@ const api = {}
// just add to the DOM global.
if (process.contextIsolated) {
try {
contextBridge.exposeInMainWorld('electron', {
...electronAPI,
getVersion: () => ipcRenderer.invoke('get-version')
})
contextBridge.exposeInMainWorld('electron', electronAPI)
contextBridge.exposeInMainWorld('api', api)
} catch (error) {
console.error(error)

View file

@ -1,40 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Splash</title>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
/>
</head>
<body id="root">
<h2>First Launch</h2>
<img alt="logo" class="logo" src='./src/assets/electron.svg' height="256px" width="256px" />
<button type="button" id="button">Finish setup</button>
<style>
#root {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0;
height: 350px;
width: 350px;
}
.logo {
-webkit-user-drag: none;
filter: drop-shadow(0 0 1.6em #6988e6aa);
}
</style>
<script>
document.getElementById("button").addEventListener("click", () => {
window.electron.ipcRenderer.send('finish-setup')
})
</script>
</body>
</html>

View file

@ -1,33 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Splash</title>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
/>
</head>
<body id="root">
<img alt="logo" class="logo" src='./src/assets/electron.svg' height="256px" width="256px" />
<style>
#root {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0;
height: 350px;
width: 350px;
}
.logo {
-webkit-user-drag: none;
filter: drop-shadow(0 0 1.6em #6988e6aa);
}
</style>
</body>
</html>

View file

@ -1,6 +1,5 @@
import Versions from './components/Versions'
import electronLogo from './assets/electron.svg'
import ToastHandler from './components/ToastHandler'
function App(): React.JSX.Element {
const ipcHandle = (): void => window.electron.ipcRenderer.send('ping')
@ -29,8 +28,6 @@ function App(): React.JSX.Element {
</div>
</div>
<Versions></Versions>
<ToastHandler></ToastHandler>
</>
)
}

View file

@ -1,34 +0,0 @@
import { useEffect } from "react";
import { handleToast, Toast } from "./handleToasts";
import { Toaster } from 'sonner';
function ToastHandler(): React.JSX.Element {
useEffect(() => {
const listener = (_: any, toast: Toast) => {
handleToast(toast);
};
// @ts-ignore (define in dts)
window.electron.ipcRenderer.on('toast', listener);
return () => {
// @ts-ignore (define in dts)
window.electron.ipcRenderer.removeAllListeners('toast');
};
}, []);
return (
<Toaster
expand={true}
visibleToasts={9}
theme={"dark"}
toastOptions={{
style: {
background: 'var(--color-background)',
},
}} />
)
}
export default ToastHandler

View file

@ -2,14 +2,9 @@ import { useState } from 'react'
function Versions(): React.JSX.Element {
const [versions] = useState(window.electron.process.versions)
const [appVersion, setAppVersion] = useState()
// @ts-ignore (define in dts)
window.electron.getVersion().then(version => setAppVersion(version))
return (
<ul className="versions">
<li className="app-version">App v{appVersion}</li>
<li className="electron-version">Electron v{versions.electron}</li>
<li className="chrome-version">Chromium v{versions.chrome}</li>
<li className="node-version">Node v{versions.node}</li>

View file

@ -1,31 +0,0 @@
import { toast as sonnerToast } from 'sonner';
export type Toast = {
type: 'toast';
payload: {
toastType: 'default' | 'info' | 'success' | 'warning' | 'error';
message: string;
optionsJSON?: string;
options?: object;
};
};
export function handleToast(toast: Toast) {
if (toast.type === 'toast') {
const { toastType, message, optionsJSON } = toast.payload;
// @ts-ignore
let options;
if (optionsJSON) {
options = JSON.parse(optionsJSON);
}
if (toastType == 'default') {
sonnerToast(message, options);
} else if (['info', 'success', 'warning', 'error'].includes(toastType)) {
sonnerToast[toastType](message, options);
} else {
console.warn('Type de toast invalide :', toastType);
}
} else {
console.warn('toast inconnue :', toast);
}
}