refactor: split code into main and renderer modules, adopt TS for mai…

…n, and improve webpack process for bundling

Signed-off-by: Adam Setch <adam.setch@outlook.com>

config/webpack.config.renderer.base.ts

@@ -61,19 +61,9 @@ const configuration: webpack.Configuration = {
       isBrowser: false,
     }),
 
+    // Twemoji SVGs for Emoji parsing
     new CopyWebpackPlugin({
       patterns: [
-        // Image Assets
-        {
-          from: webpackPaths.assetsImagesPath,
-          to: 'assets/images',
-        },
-        // Sound Assets
-        {
-          from: webpackPaths.assetsSoundsPath,
-          to: 'assets/sounds',
-        },
-        // Twemoji SVGs for Emojis
         {
           from: path.join(
             webpackPaths.nodeModulesPath,

config/webpack.paths.ts

@@ -4,10 +4,6 @@ const rootPath = path.join(__dirname, '..');
 
 const nodeModulesPath = path.join(rootPath, 'node_modules');
 
-const assetsPath = path.join(rootPath, 'assets');
-const assetsImagesPath = path.join(assetsPath, 'images');
-const assetsSoundsPath = path.join(assetsPath, 'sounds');
-
 const srcPath = path.join(rootPath, 'src');
 const srcMainPath = path.join(srcPath, 'main');
 const srcRendererPath = path.join(srcPath, 'renderer');
@@ -19,9 +15,6 @@ const distPath = path.join(rootPath, 'dist');
 export default {
   rootPath,
   nodeModulesPath,
-  assetsPath,
-  assetsImagesPath,
-  assetsSoundsPath,
   srcPath,
   srcMainPath,
   srcRendererPath,

package.json

@@ -71,7 +71,14 @@
     "appId": "com.electron.gitify",
     "copyright": "Copyright © 2024 Gitify Team",
     "asar": true,
-    "files": ["build/**/*", "node_modules/**/*", "package.json", "LICENSE"],
+    "files": [
+      "assets/images/*",
+      "assets/sounds/*",
+      "build/**/*",
+      "LICENSE",
+      "node_modules/**/*",
+      "package.json"
+    ],
     "mac": {
       "category": "public.app-category.developer-tools",
       "icon": "assets/images/app-icon.icns",

src/main/icons.ts

@@ -11,5 +11,5 @@ export const activeIcon = getIconPath('tray-active.png');
 export const activeUpdateIcon = getIconPath('tray-active-update.png');
 
 function getIconPath(iconName: string) {
-  return path.resolve(__dirname, '../assets/images', iconName);
+  return path.resolve(__dirname, '..', 'assets', 'images', iconName);
 }

src/renderer/__mocks__/utils.ts

@@ -1,9 +1,3 @@
-import * as helpers from '../utils/helpers';
-
-export function mockDirectoryPath() {
-  jest.spyOn(helpers, 'getDirectoryPath').mockReturnValue('/mocked/dir/name');
-}
-
 /**
  * Ensure stable snapshots for our randomized emoji use-cases
  */

src/renderer/components/AccountNotifications.test.tsx

@@ -1,6 +1,6 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { mockGitHubCloudAccount, mockSettings } from '../__mocks__/state-mocks';
-import { ensureStableEmojis, mockDirectoryPath } from '../__mocks__/utils';
+import { ensureStableEmojis } from '../__mocks__/utils';
 import { AppContext } from '../context/App';
 import { GroupBy } from '../types';
 import { mockGitHubNotifications } from '../utils/api/__mocks__/response-mocks';
@@ -14,7 +14,6 @@ jest.mock('./RepositoryNotifications', () => ({
 describe('renderer/components/AccountNotifications.tsx', () => {
   beforeEach(() => {
     ensureStableEmojis();
-    mockDirectoryPath();
   });
 
   it('should render itself - group notifications by repositories', () => {

src/renderer/components/AllRead.test.tsx

@@ -1,11 +1,10 @@
 import { render } from '@testing-library/react';
-import { ensureStableEmojis, mockDirectoryPath } from '../__mocks__/utils';
+import { ensureStableEmojis } from '../__mocks__/utils';
 import { AllRead } from './AllRead';
 
 describe('renderer/components/AllRead.tsx', () => {
   beforeEach(() => {
     ensureStableEmojis();
-    mockDirectoryPath();
   });
 
   it('should render itself & its children', () => {

src/renderer/components/EmojiText.test.tsx

@@ -1,12 +1,7 @@
 import { render } from '@testing-library/react';
-import { mockDirectoryPath } from '../__mocks__/utils';
 import { EmojiText, type IEmojiText } from './EmojiText';
 
 describe('renderer/components/Emoji.tsx', () => {
-  beforeEach(() => {
-    mockDirectoryPath();
-  });
-
   it('should render', () => {
     const props: IEmojiText = {
       text: '🍺',

src/renderer/components/EmojiText.tsx

@@ -1,7 +1,6 @@
 import path from 'node:path';
 import twemoji from '@discordapp/twemoji';
 import { type FC, useEffect, useRef } from 'react';
-import { getDirectoryPath } from '../utils/helpers';
 
 export interface IEmojiText {
   text: string;
@@ -26,12 +25,7 @@ export const EmojiText: FC<IEmojiText> = ({ text }) => {
           _options: TwemojiOptions,
           _variant: string,
         ) => {
-          return path.join(
-            getDirectoryPath(),
-            'assets',
-            'twemoji',
-            `${icon}.svg`,
-          );
+          return path.join('assets', 'twemoji', `${icon}.svg`);
         },
       });
     }

src/renderer/components/Oops.test.tsx

@@ -1,12 +1,7 @@
 import { render } from '@testing-library/react';
-import { mockDirectoryPath } from '../__mocks__/utils';
 import { Oops } from './Oops';
 
 describe('renderer/components/Oops.tsx', () => {
-  beforeEach(() => {
-    mockDirectoryPath();
-  });
-
   it('should render itself & its children', () => {
     const mockError = {
       title: 'Error title',

src/renderer/utils/helpers.ts

@@ -209,7 +209,3 @@ export function getFilterCount(settings: SettingsState): number {
 
   return count;
 }
-
-export function getDirectoryPath(): string {
-  return `${__dirname}`;
-}

src/renderer/utils/notifications.ts

@@ -1,3 +1,4 @@
+import path from 'node:path';
 import log from 'electron-log';
 import type {
   AccountNotifications,
@@ -103,7 +104,9 @@ export const raiseNativeNotification = (notifications: Notification[]) => {
 };
 
 export const raiseSoundNotification = () => {
-  const audio = new Audio('assets/sounds/clearly.mp3');
+  const audio = new Audio(
+    path.resolve(__dirname, '..', 'assets', 'sounds', 'clearly.mp3'),
+  );
   audio.volume = 0.2;
   audio.play();
 };