refactor: Migrate to Typescript

.github/workflows/electron.yaml

@@ -49,11 +49,15 @@ jobs:
             - name: Build Vite App
               run: npm run vitebuildcli
 
-            - name: Upload Vite Build Artifact
+            - name: Zip dist-react and dist-electron
+              run: |
+                  zip -r vite-builds.zip dist-react dist-electron
+
+            - name: Upload Vite Build Artifacts Zip
               uses: actions/upload-artifact@main
               with:
-                  name: vite-dist
-                  path: ./dist
+                  name: vite-builds-zip
+                  path: vite-builds.zip
 
     build:
         if: github.event_name == 'push' && github.ref == 'refs/heads/main'
@@ -80,11 +84,16 @@ jobs:
             - name: Checkout code
               uses: actions/checkout@main
 
-            - name: Download Vite Build Artifact
+            - name: Download Vite Build Artifacts Zip
               uses: actions/download-artifact@main
               with:
-                  name: vite-dist
-                  path: ./dist
+                  name: vite-builds-zip
+                  path: .
+
+            - name: Unzip dist-react and dist-electron
+              run: |
+                  unzip -o vite-builds.zip
+                  # dist-react and dist-electron are now in the workspace root
 
             - name: Get version from package.json
               id: get_version

.github/workflows/static.yml

@@ -52,14 +52,14 @@ jobs:
             - name: Install dependencies
               run: npm ci
             - name: Build
-              run: npm run build && cp ./dist/index.html ./dist/404.html
+              run: npm run build && cp ./dist-react/index.html ./dist-react/404.html
             - name: Setup Pages
               uses: actions/configure-pages@main
             - name: Upload artifact
               uses: actions/upload-pages-artifact@main
               with:
                   # Upload dist folder
-                  path: "./dist"
+                  path: "./dist-react"
             - name: Deploy to GitHub Pages
               id: deployment
               uses: actions/deploy-pages@main

.gitignore

@@ -11,6 +11,9 @@ node_modules
 dist
 dist-ssr
 *.local
+production
+dist-electron
+dist-react
 
 # Editor directories and files
 .vscode/*

CONTRIBUTING.md

@@ -6,27 +6,37 @@ Thank you for your interest in contributing! Please take a moment to review this
 
 ## 📬 Submitting issues, feature requests, or translations
 
-- To report bugs or request features, please [open an issue](https://github.com/learnercraft/ispeakerreact/issues/new/choose) and choose the appropriate category.
+- To report bugs or request features, [open an issue](https://github.com/learnercraft/ispeakerreact/issues/new/choose) and choose the appropriate category.
 
-- For translation contributions, please [refer to this issue](https://github.com/learnercraft/ispeakerreact/issues/18) for more information.
+- For translation contributions, [refer to this issue](https://github.com/learnercraft/ispeakerreact/issues/18) for more information.
 
-## 🔀 Submitting pull requests
+## ▶️ Run the code locally
+
+To run the code locally, you need the latest **LTS (Long Term Support)** version of [Node.js](https://nodejs.org/en/) installed.
+
+Then, clone the repository using either [Git](https://git-scm.com/downloads) (if you are familiar with the command line) or [GitHub Desktop](https://desktop.github.com/).
+
+Install dependencies with `npm install`, then start the development server using one of the following commands:
+
+- Web: `npm run dev`  
+- Electron: `npm run start`
 
-### 📌 Project note
+To test the production build:
 
-- This project **does not use TypeScript** or any kind of static type checking yet.
-  - In the meantime, **use** `PropTypes` to validate component props for basic type safety.
+- Web: `npm run build`, then `npm run preview`
+- Electron: `npm run make` — the executable will appear in the `./out` folder
+
+## 🔀 Submitting pull requests
+
+As of [pull request #65](https://github.com/learnercraft/ispeakerreact/pull/65), this project uses TypeScript for improved type safety and developer experience.
 
 ### ✅ What you should do
 
 - **Use a code editor** (e.g., Visual Studio Code) to write and format code efficiently.
 
-- **Format your code** before committing and pushing. You must use **Prettier with our configuration** to ensure consistent formatting.
-
-- **Test your code thoroughly** before pushing. Resolve any ESLint errors if possible.
-  - An exception is allowed for variables defined in `vite.config.js` and available only at build time. If ESLint complains about these (e.g., the `__APP_VERSION__` variable), you can safely ignore the warning.
+- **Format your code** before committing using Prettier with the project's configuration.
 
-- **Use clear, concise variable names** written in `camelCase`. Names should be self-explanatory and reflect their purpose.
+- **Test your code thoroughly** before pushing. Resolve any TypeScript and ESLint errors if possible.
 
 - **Use a clear, concise pull request title**. We recommend following [semantic commit message conventions](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716). Examples:
   - `fix: handle audio timeout error on older devices`
@@ -38,20 +48,35 @@ Thank you for your interest in contributing! Please take a moment to review this
 
 - Before submitting a **large pull request** or major change, open an issue first and select the appropriate category. After a review by our team, you can start your work.
 
+### 💻 Coding style
+
+- Follow the latest ECMAScript standards. This project is built with modern JavaScript in mind, so polyfills are typically unnecessary.
+  - Be mindful of browser compatibility. Check [Can I use...](https://caniuse.com/) before using experimental APIs.
+
+- Do not use deprecated APIs. Refer to [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API) for up-to-date information.
+
+- **Use clear, concise variable names** written in `camelCase`. For React components, use `PascalCase`. Names should be self-explanatory and reflect their purpose.
+
+- Prefer **arrow functions** over `function` declarations to avoid hoisting issues and for consistency.
+
+- Use `async` and `await` instead of `.then()` where possible for readability.
+
+- In React components, wrap expensive computations in `useMemo` and functions in `useCallback` hooks when appropriate.
+
 ### 🧪 Review process
 
 - All PRs are reviewed before merging. Please be responsive to feedback.  
-  When resolving comments, **make a new commit with**:  
+  When addressing review comments, commit with a message like:  
   `address feedback by @<username>`
 
 ### 🤔 What you should NOT do
 
 - Submit pull requests that only include **cosmetic changes** like whitespace tweaks or code reformatting without any functional impact.  
   These changes clutter diffs and make code reviews harder. [See this comment by the Rails team](https://github.com/rails/rails/pull/13771#issuecomment-32746700).
 
-- Submit a pull request with **one or several giant commit(s)**. This makes it difficult to review.
+- Submit pull requests that consist of a single large commit or several oversized commits. Break your changes into logical, reviewable commits.
 
-- Use unclear, vague, or default commit messages like `Update file`, `fix`, or `misc changes`.
+- Use vague or default commit messages like `update file`, `fix`, or `misc changes`.
 
 - Modify configuration files (e.g., `.prettierrc`, `eslint.config.js`, etc.), or any files in the `.github` folder without prior discussion.
 
@@ -60,12 +85,15 @@ Thank you for your interest in contributing! Please take a moment to review this
 - Add code or commits that:
   - Are **obscure** or **unclear** in intent  
   - Are **malicious** or **unsafe**  
-  - **Executes scripts from external sources** associated with malicious, unsafe, or illegal behavior  
+  - **Executes scripts from external sources** associated with **malicious, unsafe, or illegal behavior**  
   - Attempts to introduce **backdoors** or hidden functionality
 
-  If we find any code that violates these rules, you will be blocked from further contributions and reported to GitHub for Terms of Use violations.
+  Violations will result in being blocked from contributing. In severe cases, you may also be reported to GitHub for Terms of Use violations.
+
+- Commit **hardcoded secrets, tokens, or sensitive user information**.  
+  While our project includes a secret-scanning tool, it is still your responsibility to ensure that no sensitive data is committed to the repository.
 
-- Use expletives or offensive language. This project is intended for everyone, and we strive to maintain a respectful environment for all contributors and users.
+- Use **expletives** or **offensive language**. This project is intended for everyone, and we strive to maintain a respectful environment for all contributors and users. Any inappropriate comments will be removed and treated as a final warning.
 
 ---
 

data/splash.html

@@ -17,20 +17,13 @@
     </head>
     <body>
         <div>
-            <img
-                class="img-fluid"
-                src="../dist/images/icons/windows11/Wide310x150Logo.scale-400.png"
-                id="splash"
-                alt="Splash Image"
-            />
+            <img class="img-fluid" id="splash" alt="Splash Image" />
         </div>
         <script>
             const htmlEl = document.documentElement;
             const bodyElement = document.body;
             const splashImage = document.getElementById("splash");
 
-            const splashImageDark = "../dist/images/icons/logo-splash-dark.png";
-            const splashImageLight = "../dist/images/icons/windows11/Wide310x150Logo.scale-400.png";
             const bodyElementDark = "#222";
             const bodyElementLight = "#f2f2f2";
 
@@ -46,13 +39,29 @@
             };
 
             document.addEventListener("DOMContentLoaded", async () => {
+                const nodeEnv = await window.electron.ipcRenderer.invoke("get-node-env");
+                const srcBase = nodeEnv === "development" ? "../public" : "../dist-react";
+                const splashImageDark = `${srcBase}/images/icons/logo-splash-dark.png`;
+                const splashImageLight = `${srcBase}/images/icons/windows11/Wide310x150Logo.scale-400.png`;
+
                 let storedTheme;
                 storedTheme = await window.electron.ipcRenderer.invoke(
                     "get-theme",
                     "ispeakerreact-ui-theme"
                 );
                 if (storedTheme === "dark") storedTheme = "dim";
 
+                const darkElement = () => {
+                    htmlEl.setAttribute("data-theme", "dim");
+                    splashImage.src = splashImageDark;
+                    bodyElement.style.backgroundColor = bodyElementDark;
+                };
+                const lightElement = () => {
+                    htmlEl.setAttribute("data-theme", "light");
+                    splashImage.src = splashImageLight;
+                    bodyElement.style.backgroundColor = bodyElementLight;
+                };
+
                 const applyTheme = (theme) => {
                     switch (theme) {
                         case "dim":

eslint.config.js

@@ -1,38 +1,46 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import react from 'eslint-plugin-react'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
+import js from "@eslint/js";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
+import tseslint from "typescript-eslint";
 
-export default [
-  { ignores: ['dist'] },
-  {
-    files: ['**/*.{js,jsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-      parserOptions: {
-        ecmaVersion: 'latest',
-        ecmaFeatures: { jsx: true },
-        sourceType: 'module',
-      },
-    },
-    settings: { react: { version: '18.3' } },
-    plugins: {
-      react,
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...js.configs.recommended.rules,
-      ...react.configs.recommended.rules,
-      ...react.configs['jsx-runtime'].rules,
-      ...reactHooks.configs.recommended.rules,
-      'react/jsx-no-target-blank': 'off',
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-]
+export default tseslint.config(
+    { ignores: ["dist"] },
+    {
+        extends: [
+            js.configs.recommended,
+            ...tseslint.configs.strict,
+            ...tseslint.configs.stylistic,
+        ],
+        files: ["**/*.{ts,tsx}"],
+        languageOptions: {
+            ecmaVersion: "latest",
+            globals: {
+                ...globals.browser,
+                __APP_VERSION__: "readonly",
+            },
+        },
+        plugins: {
+            react,
+            "react-hooks": reactHooks,
+            "react-refresh": reactRefresh,
+        },
+        settings: { react: { version: "detect" } },
+        rules: {
+            ...react.configs.recommended.rules,
+            ...reactHooks.configs.recommended.rules,
+            ...react.configs["jsx-runtime"].rules,
+            "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+            "@typescript-eslint/no-unused-vars": ["warn"],
+            "@typescript-eslint/ban-ts-comment": [
+                "error",
+                {
+                    "ts-expect-error": {
+                        descriptionFormat: "^: TS\\d+ because .+$",
+                    },
+                },
+            ],
+        },
+    }
+);

forge.config.cjs → forge.config.ts

@@ -1,8 +1,9 @@
-const { FusesPlugin } = require("@electron-forge/plugin-fuses");
-const { FuseV1Options, FuseVersion } = require("@electron/fuses");
-const path = require("path");
+import { FusesPlugin } from "@electron-forge/plugin-fuses";
+import type { ForgeConfig } from "@electron-forge/shared-types";
+import { FuseV1Options, FuseVersion } from "@electron/fuses";
+import path from "node:path";
 
-module.exports = {
+const config: ForgeConfig = {
     packagerConfig: {
         asar: true,
         name: "iSpeakerReact",
@@ -16,7 +17,7 @@ module.exports = {
             ProductName: "iSpeakerReact",
         },
         prune: true,
-        icon: path.join(__dirname, "dist", "appicon"),
+        icon: path.join(__dirname, "dist-react", "appicon"),
         ignore: [
             "^/\\.github$", // Ignore the .github directory
             "^/venv$", // Ignore the venv directory
@@ -30,41 +31,39 @@ module.exports = {
             "^/public$",
             "^/src$",
             "^/netlify.toml$",
+            "^/*\\.ts*$", // Ignore typescript,
+            "^/stats.html$"
         ],
     },
     rebuildConfig: {},
     makers: [
         {
             name: "@electron-forge/maker-zip",
             platforms: ["linux", "win32", "darwin"],
+            config: {},
         },
-        /*{
-            name: "@electron-forge/maker-dmg",
-            config: {
-                options: {
-                    icon: path.join(__dirname, "dist", "appicon.icns"),
-                },
-            },
-        },*/
         {
             name: "@electron-forge/maker-deb",
             config: {
                 options: {
-                    icon: path.join(__dirname, "dist", "appicon.png"),
+                    icon: path.join(__dirname, "dist-react", "appicon.png"),
                 },
             },
         },
         {
             name: "@electron-forge/maker-rpm",
-            options: {
-                icon: path.join(__dirname, "dist", "appicon.png"),
+            platforms: ["linux"],
+            config: {
+                options: {
+                    icon: path.join(__dirname, "dist-react", "appicon.png"),
+                },
             },
         },
         /*{
             name: "@electron-forge/maker-squirrel",
             config: (arch) => ({
-                setupIcon: path.join(__dirname, "dist", "appicon.ico"),
-                iconUrl: path.join(__dirname, "dist", "appicon.ico"),
+                setupIcon: path.join(__dirname, "dist-react", "appicon.ico"),
+                iconUrl: path.join(__dirname, "dist-react", "appicon.ico"),
                 setupExe: `iSpeakerReact-win32-${arch}-Setup.exe`,
             }),
         },*/
@@ -87,3 +86,5 @@ module.exports = {
         }),
     ],
 };
+
+export default config;

index.html

@@ -55,6 +55,6 @@
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="root"></div>
-        <script type="module" src="/src/index.jsx"></script>
+        <script type="module" src="/src/frontend/index.jsx"></script>
     </body>
 </html>