migrate to v2

Author: Arounte

.eslintignore

@@ -2,3 +2,4 @@ node_modules
 dist
 out
 .gitignore
+*.d.ts

.eslintrc.cjs

@@ -1,9 +1,9 @@
 module.exports = {
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    '@electron-toolkit/eslint-config-ts/recommended',
-    '@electron-toolkit/eslint-config-prettier'
-  ]
-}
+    extends: [
+        'eslint:recommended',
+        'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
+        '@electron-toolkit/eslint-config-ts/recommended',
+        '@electron-toolkit/eslint-config-prettier',
+    ],
+};

.prettierrc.json

@@ -0,0 +1,11 @@
+{
+    "printWidth": 100,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "arrowParens": "always",
+    "quoteProps": "preserve"
+}

.prettierrc.yaml

@@ -1,20 +1,20 @@
-import { resolve } from 'path'
-import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
-import react from '@vitejs/plugin-react'
+import { resolve } from 'path';
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite';
+import react from '@vitejs/plugin-react';
 
 export default defineConfig({
-  main: {
-    plugins: [externalizeDepsPlugin()]
-  },
-  preload: {
-    plugins: [externalizeDepsPlugin()]
-  },
-  renderer: {
-    resolve: {
-      alias: {
-        '@renderer': resolve('src/renderer/src')
-      }
+    main: {
+        plugins: [externalizeDepsPlugin()],
     },
-    plugins: [react()]
-  }
-})
+    preload: {
+        plugins: [externalizeDepsPlugin()],
+    },
+    renderer: {
+        resolve: {
+            alias: {
+                '@renderer': resolve('src/renderer/src'),
+            },
+        },
+        plugins: [react()],
+    },
+});

electron.vite.config.ts

@@ -1,6 +1,6 @@
 {
   "name": "zenith-boilerplate",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "An Electron application with React and TypeScript & TailwindCSS and NextUI",
   "main": "./out/main/index.js",
   "author": "Arounte",
@@ -20,32 +20,32 @@
     "build:linux": "electron-vite build && electron-builder --linux --config"
   },
   "dependencies": {
-    "@electron-toolkit/preload": "^2.0.0",
-    "@electron-toolkit/utils": "^2.0.0",
-    "@nextui-org/react": "^2.2.9",
-    "electron-updater": "^6.1.1",
-    "framer-motion": "^10.17.9"
+    "@electron-toolkit/preload": "^3.0.1",
+    "@electron-toolkit/utils": "^4.0.0",
+    "@heroui/react": "2.7.4",
+    "electron-updater": "^6.3.9",
+    "motion": "^12.4.9",
+    "autoprefixer": "^10.4.20",
+    "electron": "^34.3.0",
+    "electron-builder": "^25.1.8",
+    "@vitejs/plugin-react": "^4.3.4",
+    "electron-vite": "^3.0.0",
+    "vite": "^6.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^3",
+    "postcss": "^8.5.3"
   },
   "devDependencies": {
-    "@electron-toolkit/eslint-config-prettier": "^1.0.1",
-    "@electron-toolkit/eslint-config-ts": "^1.0.0",
+    "@electron-toolkit/eslint-config-prettier": "^1",
+    "@electron-toolkit/eslint-config-ts": "^1",
     "@electron-toolkit/tsconfig": "^1.0.1",
-    "@types/node": "^18.17.5",
-    "@types/react": "^18.2.20",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.4",
-    "autoprefixer": "^10.4.16",
-    "electron": "^28.1.1",
-    "electron-builder": "^24.6.3",
-    "electron-vite": "^1.0.27",
-    "eslint": "^8.47.0",
-    "eslint-plugin-react": "^7.33.2",
-    "postcss": "^8.4.33",
-    "prettier": "^3.0.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tailwindcss": "^3.4.0",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.9"
+    "@types/node": "^22.13.8",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "eslint": "^8",
+    "eslint-plugin-react": "^7.37.4",
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.2"
   }
-}
+}

package.json

@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

postcss.config.js

@@ -1,71 +1,71 @@
-import { app, shell, BrowserWindow } from 'electron'
-import { join } from 'path'
-import { electronApp, optimizer, is } from '@electron-toolkit/utils'
-import icon from '../../resources/icon.png?asset'
+import { app, shell, BrowserWindow } from 'electron';
+import { join } from 'path';
+import { electronApp, optimizer, is } from '@electron-toolkit/utils';
+import icon from '../../resources/icon.png?asset';
 
 function createWindow(): void {
-  // Create the browser window.
-  const mainWindow = new BrowserWindow({
-    width: 900,
-    height: 670,
-    show: false,
-    autoHideMenuBar: true,
-    ...(process.platform === 'linux' ? { icon } : {}),
-    webPreferences: {
-      preload: join(__dirname, '../preload/index.js'),
-      sandbox: false
-    }
-  })
+    // Create the browser window.
+    const mainWindow = new BrowserWindow({
+        width: 900,
+        height: 670,
+        show: false,
+        autoHideMenuBar: true,
+        ...(process.platform === 'linux' ? { icon } : {}),
+        webPreferences: {
+            preload: join(__dirname, '../preload/index.js'),
+            sandbox: false,
+        },
+    });
 
-  mainWindow.on('ready-to-show', () => {
-    mainWindow.show()
-  })
+    mainWindow.on('ready-to-show', () => {
+        mainWindow.show();
+    });
 
-  mainWindow.webContents.setWindowOpenHandler((details) => {
-    shell.openExternal(details.url)
-    return { action: 'deny' }
-  })
+    mainWindow.webContents.setWindowOpenHandler((details) => {
+        shell.openExternal(details.url);
+        return { action: 'deny' };
+    });
 
-  // HMR for renderer base on electron-vite cli.
-  // Load the remote URL for development or the local html file for production.
-  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
-    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
-  } else {
-    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
-  }
+    // HMR for renderer base on electron-vite cli.
+    // Load the remote URL for development or the local html file for production.
+    if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+        mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL']);
+    } else {
+        mainWindow.loadFile(join(__dirname, '../renderer/index.html'));
+    }
 }
 
 // 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.
 app.whenReady().then(() => {
-  // Set app user model id for windows
-  electronApp.setAppUserModelId('com.electron')
+    // Set app user model id for windows
+    electronApp.setAppUserModelId('com.electron');
 
-  // Default open or close DevTools by F12 in development
-  // and ignore CommandOrControl + R in production.
-  // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
-  app.on('browser-window-created', (_, window) => {
-    optimizer.watchWindowShortcuts(window)
-  })
+    // Default open or close DevTools by F12 in development
+    // and ignore CommandOrControl + R in production.
+    // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
+    app.on('browser-window-created', (_, window) => {
+        optimizer.watchWindowShortcuts(window);
+    });
 
-  createWindow()
+    createWindow();
 
-  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.
-    if (BrowserWindow.getAllWindows().length === 0) createWindow()
-  })
-})
+    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.
+        if (BrowserWindow.getAllWindows().length === 0) createWindow();
+    });
+});
 
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
 app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
-})
+    if (process.platform !== 'darwin') {
+        app.quit();
+    }
+});
 
 // In this file you can include the rest of your app"s specific main process
 // code. You can also put them in separate files and require them here.

src/main/index.ts

@@ -1,22 +1,22 @@
-import { contextBridge } from 'electron'
-import { electronAPI } from '@electron-toolkit/preload'
+import { contextBridge } from 'electron';
+import { electronAPI } from '@electron-toolkit/preload';
 
 // Custom APIs for renderer
-const api = {}
+const api = {};
 
 // Use `contextBridge` APIs to expose Electron APIs to
 // renderer only if context isolation is enabled, otherwise
 // just add to the DOM global.
 if (process.contextIsolated) {
-  try {
-    contextBridge.exposeInMainWorld('electron', electronAPI)
-    contextBridge.exposeInMainWorld('api', api)
-  } catch (error) {
-    console.error(error)
-  }
+    try {
+        contextBridge.exposeInMainWorld('electron', electronAPI);
+        contextBridge.exposeInMainWorld('api', api);
+    } catch (error) {
+        console.error(error);
+    }
 } else {
-  // @ts-ignore (define in dts)
-  window.electron = electronAPI
-  // @ts-ignore (define in dts)
-  window.api = api
+    // @ts-ignore (define in dts)
+    window.electron = electronAPI;
+    // @ts-ignore (define in dts)
+    window.api = api;
 }

src/preload/index.ts

@@ -1,17 +1,17 @@
 <!doctype html>
 <html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Electron</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'"
-    />
-  </head>
 
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8" />
+  <title>Electron</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'" />
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

src/renderer/index.html

@@ -1,15 +1,22 @@
-import { Chip } from '@nextui-org/react'
+import { Chip } from '@heroui/react';
+import { FC } from 'react';
+import Versions from '@renderer/components/Versions';
 
-function App(): JSX.Element {
-  return (
-    <div className="p-4">
-      <h1 className="text-3xl font-extrabold text-blue-500">Zenith Boilerplate</h1>
-      <a href="https://github.com/arounte">
-        <h2 className="text-lg font-light text-blue-400 hover:text-pink-500">GitHub: @Arounte</h2>
-      </a>
-      <Chip color="primary" variant="shadow" className="my-2">NextUI works 🍻</Chip>
-    </div>
-  )
-}
+const App: FC = () => {
+    return (
+        <div className="p-4 flex flex-col gap-4">
+            <h1 className="text-3xl font-extrabold text-blue-500">Zenith Boilerplate</h1>
+            <a href="https://github.com/arounte" target="_blank" rel="noreferrer">
+                <h2 className="text-lg font-light text-blue-400 hover:text-pink-500">
+                    GitHub: @Arounte
+                </h2>
+            </a>
+            <Chip color="primary" variant="shadow" className="my-2">
+                HeroUI works 🍻
+            </Chip>
+            <Versions />
+        </div>
+    );
+};
 
-export default App
+export default App;

src/renderer/src/App.tsx

@@ -1,16 +1,16 @@
-import { useState } from 'react'
+import { FC, useRef } from 'react';
 
-function Versions(): JSX.Element {
-  const [versions] = useState(window.electron.process.versions)
+const Versions: FC = () => {
+    const { current: versions } = useRef(window.electron.process.versions);
 
-  return (
-    <ul className="versions">
-      <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>
-      <li className="v8-version">V8 v{versions.v8}</li>
-    </ul>
-  )
-}
+    return (
+        <ul className="text-blue-500">
+            <li>Electron v{versions.electron}</li>
+            <li>Chromium v{versions.chrome}</li>
+            <li>Node v{versions.node}</li>
+            <li>V8 v{versions.v8}</li>
+        </ul>
+    );
+};
 
-export default Versions
+export default Versions;

src/renderer/src/components/Versions.tsx

@@ -1,13 +1,13 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import './assets/index.css'
-import App from './App'
-import { NextUIProvider } from '@nextui-org/react'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './assets/index.css';
+import App from './App';
+import { HeroUIProvider } from '@heroui/react';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <NextUIProvider>
-      <App />
-    </NextUIProvider>
-  </React.StrictMode>
-)
+    <React.StrictMode>
+        <HeroUIProvider>
+            <App />
+        </HeroUIProvider>
+    </React.StrictMode>,
+);

src/renderer/src/main.tsx

@@ -1,15 +1,15 @@
-import { nextui } from '@nextui-org/react'
+import { heroui } from '@heroui/react';
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    './index.html',
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
-  ],
-  theme: {
-    extend: {}
-  },
-  darkMode: 'class',
-  plugins: [nextui()]
-}
+    content: [
+        './index.html',
+        './src/**/*.{js,ts,jsx,tsx}',
+        './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}',
+    ],
+    theme: {
+        extend: {},
+    },
+    darkMode: 'class',
+    plugins: [heroui()],
+};

tailwind.config.js

@@ -1,8 +1,20 @@
 {
   "extends": "@electron-toolkit/tsconfig/tsconfig.node.json",
-  "include": ["electron.vite.config.*", "src/main/*", "src/preload/*"],
+  "include": [
+    "electron.vite.config.*",
+    "src/main/*",
+    "src/preload/*"
+  ],
   "compilerOptions": {
     "composite": true,
-    "types": ["electron-vite/node"]
+    "types": [
+      "electron-vite/node"
+    ],
+    "esModuleInterop": true,
+    "target": "ES2021",
+    "module": "ES2022",
+    "moduleResolution": "node",
+    "strict": true,
+    "skipLibCheck": true,
   }
 }

tsconfig.node.json

@@ -14,6 +14,12 @@
       "@renderer/*": [
         "src/renderer/src/*"
       ]
-    }
+    },
+    "esModuleInterop": true,
+    "target": "ES2021",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true
   }
 }