From 26448b2839080aeedc0c4c01e7b92307f39e59c0 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Mon, 30 Sep 2024 18:29:11 -0400 Subject: [PATCH] refactor: split code into main and renderer modules, adopt TS for main, and improve webpack process for bundling Signed-off-by: Adam Setch --- config/webpack.config.renderer.base.ts | 12 +----------- config/webpack.paths.ts | 7 ------- package.json | 9 ++++++++- src/main/icons.ts | 2 +- src/renderer/__mocks__/utils.ts | 6 ------ .../components/AccountNotifications.test.tsx | 3 +-- src/renderer/components/AllRead.test.tsx | 3 +-- src/renderer/components/EmojiText.test.tsx | 5 ----- src/renderer/components/EmojiText.tsx | 8 +------- src/renderer/components/Oops.test.tsx | 5 ----- .../__snapshots__/AccountNotifications.test.tsx.snap | 8 ++++---- .../components/__snapshots__/AllRead.test.tsx.snap | 4 ++-- .../components/__snapshots__/EmojiText.test.tsx.snap | 4 ++-- .../components/__snapshots__/Oops.test.tsx.snap | 4 ++-- src/renderer/utils/helpers.ts | 4 ---- src/renderer/utils/notifications.ts | 5 ++++- 16 files changed, 27 insertions(+), 62 deletions(-) diff --git a/config/webpack.config.renderer.base.ts b/config/webpack.config.renderer.base.ts index acb0fffea..7f3fd3e6a 100644 --- a/config/webpack.config.renderer.base.ts +++ b/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, diff --git a/config/webpack.paths.ts b/config/webpack.paths.ts index 884df2278..50686e8a0 100644 --- a/config/webpack.paths.ts +++ b/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, diff --git a/package.json b/package.json index d85c7111c..00c2571ca 100644 --- a/package.json +++ b/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", diff --git a/src/main/icons.ts b/src/main/icons.ts index a490a207c..2f6c6dd13 100644 --- a/src/main/icons.ts +++ b/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); } diff --git a/src/renderer/__mocks__/utils.ts b/src/renderer/__mocks__/utils.ts index 0e42e61a2..2b832d466 100644 --- a/src/renderer/__mocks__/utils.ts +++ b/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 */ diff --git a/src/renderer/components/AccountNotifications.test.tsx b/src/renderer/components/AccountNotifications.test.tsx index cf13eb496..db2665849 100644 --- a/src/renderer/components/AccountNotifications.test.tsx +++ b/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', () => { diff --git a/src/renderer/components/AllRead.test.tsx b/src/renderer/components/AllRead.test.tsx index 1014eb617..a818c607e 100644 --- a/src/renderer/components/AllRead.test.tsx +++ b/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', () => { diff --git a/src/renderer/components/EmojiText.test.tsx b/src/renderer/components/EmojiText.test.tsx index 5a9b0b6a7..3104f8d44 100644 --- a/src/renderer/components/EmojiText.test.tsx +++ b/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: '🍺', diff --git a/src/renderer/components/EmojiText.tsx b/src/renderer/components/EmojiText.tsx index 41a327e76..670a0723e 100644 --- a/src/renderer/components/EmojiText.tsx +++ b/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 = ({ text }) => { _options: TwemojiOptions, _variant: string, ) => { - return path.join( - getDirectoryPath(), - 'assets', - 'twemoji', - `${icon}.svg`, - ); + return path.join('assets', 'twemoji', `${icon}.svg`); }, }); } diff --git a/src/renderer/components/Oops.test.tsx b/src/renderer/components/Oops.test.tsx index 1646205d6..03d2156a8 100644 --- a/src/renderer/components/Oops.test.tsx +++ b/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', diff --git a/src/renderer/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/renderer/components/__snapshots__/AccountNotifications.test.tsx.snap index a2b0adc63..1ceda2c14 100644 --- a/src/renderer/components/__snapshots__/AccountNotifications.test.tsx.snap +++ b/src/renderer/components/__snapshots__/AccountNotifications.test.tsx.snap @@ -133,7 +133,7 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - acc alt="🔥" class="emoji" draggable="false" - src="/mocked/dir/name/assets/twemoji/1f525.svg" + src="assets/twemoji/1f525.svg" /> @@ -279,7 +279,7 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - acc alt="🔥" class="emoji" draggable="false" - src="/mocked/dir/name/assets/twemoji/1f525.svg" + src="assets/twemoji/1f525.svg" /> @@ -1814,7 +1814,7 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - no alt="🎊" class="emoji" draggable="false" - src="/mocked/dir/name/assets/twemoji/1f38a.svg" + src="assets/twemoji/1f38a.svg" /> @@ -1955,7 +1955,7 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - no alt="🎊" class="emoji" draggable="false" - src="/mocked/dir/name/assets/twemoji/1f38a.svg" + src="assets/twemoji/1f38a.svg" /> diff --git a/src/renderer/components/__snapshots__/AllRead.test.tsx.snap b/src/renderer/components/__snapshots__/AllRead.test.tsx.snap index f9c4985dc..6911fd775 100644 --- a/src/renderer/components/__snapshots__/AllRead.test.tsx.snap +++ b/src/renderer/components/__snapshots__/AllRead.test.tsx.snap @@ -16,7 +16,7 @@ exports[`renderer/components/AllRead.tsx should render itself & its children 1`] alt="🎊" class="emoji" draggable="false" - src="/mocked/dir/name/assets/twemoji/1f38a.svg" + src="assets/twemoji/1f38a.svg" /> @@ -40,7 +40,7 @@ exports[`renderer/components/AllRead.tsx should render itself & its children 1`] alt="🎊" class="emoji" draggable="false" - src="/mocked/dir/name/assets/twemoji/1f38a.svg" + src="assets/twemoji/1f38a.svg" /> diff --git a/src/renderer/components/__snapshots__/EmojiText.test.tsx.snap b/src/renderer/components/__snapshots__/EmojiText.test.tsx.snap index b3d206684..c0e2154ef 100644 --- a/src/renderer/components/__snapshots__/EmojiText.test.tsx.snap +++ b/src/renderer/components/__snapshots__/EmojiText.test.tsx.snap @@ -10,7 +10,7 @@ exports[`renderer/components/Emoji.tsx should render 1`] = ` alt="🍺" class="emoji" draggable="false" - src="/mocked/dir/name/assets/twemoji/1f37a.svg" + src="assets/twemoji/1f37a.svg" /> @@ -21,7 +21,7 @@ exports[`renderer/components/Emoji.tsx should render 1`] = ` alt="🍺" class="emoji" draggable="false" - src="/mocked/dir/name/assets/twemoji/1f37a.svg" + src="assets/twemoji/1f37a.svg" /> , diff --git a/src/renderer/components/__snapshots__/Oops.test.tsx.snap b/src/renderer/components/__snapshots__/Oops.test.tsx.snap index 1713b64ad..b6b826f13 100644 --- a/src/renderer/components/__snapshots__/Oops.test.tsx.snap +++ b/src/renderer/components/__snapshots__/Oops.test.tsx.snap @@ -16,7 +16,7 @@ exports[`renderer/components/Oops.tsx should render itself & its children 1`] = alt="🔥" class="emoji" draggable="false" - src="/mocked/dir/name/assets/twemoji/1f525.svg" + src="assets/twemoji/1f525.svg" /> @@ -45,7 +45,7 @@ exports[`renderer/components/Oops.tsx should render itself & its children 1`] = alt="🔥" class="emoji" draggable="false" - src="/mocked/dir/name/assets/twemoji/1f525.svg" + src="assets/twemoji/1f525.svg" /> diff --git a/src/renderer/utils/helpers.ts b/src/renderer/utils/helpers.ts index 6f81194ff..e93142bd9 100644 --- a/src/renderer/utils/helpers.ts +++ b/src/renderer/utils/helpers.ts @@ -209,7 +209,3 @@ export function getFilterCount(settings: SettingsState): number { return count; } - -export function getDirectoryPath(): string { - return `${__dirname}`; -} diff --git a/src/renderer/utils/notifications.ts b/src/renderer/utils/notifications.ts index 6d7e7ab25..89f362daf 100644 --- a/src/renderer/utils/notifications.ts +++ b/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(); };