Simplified extension cliend code organization

src/renderer/Core/Extension.tsx

@@ -0,0 +1,12 @@
+import { useParams } from "react-router";
+import { getExtension } from "../Extensions";
+
+export const Extension = () => {
+    const extensionId = useParams().extensionId;
+
+    if (!extensionId) {
+        return <>Missing extension id</>;
+    }
+
+    return getExtension(extensionId)?.extension ?? <>Extension with id {extensionId} did not provide any UI</>;
+};

src/renderer/Core/Hooks/index.ts

@@ -1,4 +1,5 @@
 export * from "./useContextBridge";
+export * from "./useExtensionProps";
 export * from "./useExtensionSetting";
 export * from "./useScrollbar";
 export * from "./useSearchResultItems";

src/renderer/Core/Hooks/useExtensionProps.ts

@@ -0,0 +1,13 @@
+import { ExtensionProps } from "@Core/ExtensionProps";
+import { useNavigate } from "react-router";
+import { useContextBridge } from "./useContextBridge";
+
+export const useExtensionProps = (): ExtensionProps => {
+    const navigate = useNavigate();
+    const { contextBridge } = useContextBridge();
+
+    return {
+        contextBridge,
+        goBack: () => navigate({ pathname: "/" }),
+    };
+};

src/renderer/Core/Settings/Pages/ExtensionSettings.tsx

@@ -1,6 +1,5 @@
-import type { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
-import { ApplicationSearchSettings, DeeplTranslatorSettings } from "../../Extensions";
+import { getExtension } from "../../../Extensions";
 
 type ExtensionSettingsProps = {
     extensionId: string;
@@ -9,13 +8,10 @@ type ExtensionSettingsProps = {
 export const ExtensionSettings = ({ extensionId }: ExtensionSettingsProps) => {
     const { t } = useTranslation();
 
-    const map: Record<string, ReactElement> = {
-        ApplicationSearch: <ApplicationSearchSettings />,
-        DeeplTranslator: <DeeplTranslatorSettings />,
-    };
+    const result = getExtension(extensionId);
 
     return (
-        map[extensionId] ?? (
+        result?.settings ?? (
             <div style={{ textAlign: "center", padding: 10, boxSizing: "border-box" }}>
                 {t("settings.extensions.noSettingsAvailable")}
             </div>

src/renderer/Extension.tsx

@@ -1,26 +0,0 @@
-import type { ReactElement } from "react";
-import { useNavigate, useParams } from "react-router";
-import type { ExtensionProps } from "./ExtensionProps";
-import { DeeplTranslator } from "./Extensions";
-import { useContextBridge } from "./Hooks";
-
-export const Extension = () => {
-    const { contextBridge } = useContextBridge();
-    const navigate = useNavigate();
-    const extensionId = useParams().extensionId;
-
-    if (!extensionId) {
-        return <>Missing extension id</>;
-    }
-
-    const props: ExtensionProps = {
-        contextBridge,
-        goBack: () => navigate({ pathname: "/" }),
-    };
-
-    const extensions: Record<string, ReactElement> = {
-        DeeplTranslator: <DeeplTranslator {...props} />,
-    };
-
-    return extensions[extensionId];
-};

src/renderer/Extensions/ApplicationSearch/ApplicationSearchSettings.tsx

@@ -1,6 +1,6 @@
+import { useContextBridge } from "@Core/Hooks";
 import type { OperatingSystem } from "@common/Core";
 import type { ReactElement } from "react";
-import { useContextBridge } from "../../Hooks";
 import { MacOsSettings } from "./MacOs";
 import { WindowsSettings } from "./Windows";
 

src/renderer/Extensions/ApplicationSearch/MacOs/MacOsSettings.tsx

@@ -1,9 +1,9 @@
+import { useContextBridge, useExtensionSetting } from "@Core/Hooks";
+import { Section } from "@Core/Settings/Section";
+import { SectionList } from "@Core/Settings/SectionList";
 import { Button, Field, Input, Tooltip } from "@fluentui/react-components";
 import { AddRegular, DismissRegular, FolderRegular } from "@fluentui/react-icons";
 import { useState } from "react";
-import { useContextBridge, useExtensionSetting } from "../../../Hooks";
-import { Section } from "../../../Settings/Section";
-import { SectionList } from "../../../Settings/SectionList";
 
 export const MacOsSettings = () => {
     const { contextBridge } = useContextBridge();

src/renderer/Extensions/DeeplTranslator/DeeplTranslator.tsx

@@ -1,10 +1,10 @@
+import { BaseLayout } from "@Core/BaseLayout";
+import type { ExtensionProps } from "@Core/ExtensionProps";
+import { Header } from "@Core/Header";
+import { useExtensionSetting } from "@Core/Hooks";
 import { Button, Text } from "@fluentui/react-components";
 import { ArrowLeftFilled, CopyRegular } from "@fluentui/react-icons";
 import { useState } from "react";
-import { BaseLayout } from "../../BaseLayout";
-import type { ExtensionProps } from "../../ExtensionProps";
-import { Header } from "../../Header";
-import { useExtensionSetting } from "../../Hooks";
 import { MissingApiKey } from "./MissingApiKey";
 import { Translator } from "./Translator";
 

src/renderer/Extensions/DeeplTranslator/DeeplTranslatorSettings.tsx

@@ -1,7 +1,7 @@
+import { useContextBridge, useExtensionSetting } from "@Core/Hooks";
+import { Section } from "@Core/Settings/Section";
+import { SectionList } from "@Core/Settings/SectionList";
 import { Dropdown, Field, Input, Option } from "@fluentui/react-components";
-import { useContextBridge, useExtensionSetting } from "../../Hooks";
-import { Section } from "../../Settings/Section";
-import { SectionList } from "../../Settings/SectionList";
 import { sourceLanguages } from "./sourceLanguages";
 import { targetLanguages } from "./targetLanguages";
 

src/renderer/Extensions/DeeplTranslator/Translator.tsx

@@ -1,7 +1,7 @@
+import { useExtensionSetting } from "@Core/Hooks";
 import type { ContextBridge } from "@common/Core";
 import { Dropdown, Option, ProgressBar, Textarea } from "@fluentui/react-components";
 import { useEffect, useState } from "react";
-import { useExtensionSetting } from "../../Hooks";
 import { sourceLanguages } from "./sourceLanguages";
 import { targetLanguages } from "./targetLanguages";
 

src/renderer/Extensions/index.ts

@@ -1,2 +0,0 @@
-export * from "./ApplicationSearch";
-export * from "./DeeplTranslator";

src/renderer/Extensions/index.tsx

@@ -0,0 +1,25 @@
+import { useExtensionProps } from "@Core/Hooks";
+import type { ReactElement } from "react";
+import { ApplicationSearchSettings } from "./ApplicationSearch";
+import { DeeplTranslator, DeeplTranslatorSettings } from "./DeeplTranslator";
+
+type ExtensionReactElements = {
+    extension?: ReactElement;
+    settings?: ReactElement;
+};
+
+export const getExtension = (extensionId: string): ExtensionReactElements | undefined => {
+    const props = useExtensionProps();
+
+    const extensions: Record<string, ExtensionReactElements> = {
+        ApplicationSearch: {
+            settings: <ApplicationSearchSettings />,
+        },
+        DeeplTranslator: {
+            extension: <DeeplTranslator {...props} />,
+            settings: <DeeplTranslatorSettings />,
+        },
+    };
+
+    return extensions[extensionId];
+};

src/renderer/index.tsx

@@ -1,6 +1,6 @@
+import { App } from "@Core/App";
 import { createRoot } from "react-dom/client";
 import { HashRouter } from "react-router-dom";
-import { App } from "./App";
 
 document.addEventListener("DOMContentLoaded", () => {
     createRoot(document.getElementById("react-app") as HTMLDivElement).render(

tsconfig.renderer.json

@@ -17,7 +17,8 @@
         "jsx": "react-jsx",
         "rootDir": "./src",
         "paths": {
-            "@common/*": ["./src/common/*"]
+            "@common/*": ["./src/common/*"],
+            "@Core/*": ["./src/renderer/Core/*"]
         }
     }
 }

vite.config.mts

@@ -1,6 +1,6 @@
 import react from "@vitejs/plugin-react";
 import { join } from "path";
-import { defineConfig, type AliasOptions } from "vite";
+import { defineConfig } from "vite";
 import electron from "vite-plugin-electron";
 import renderer from "vite-plugin-electron-renderer";
 import pkg from "./package.json";
@@ -10,16 +10,14 @@ export default defineConfig(({ command }) => {
     const isBuild = command === "build";
     const sourcemap = isServe ? "inline" : undefined;
 
-    const resolve: { alias: AliasOptions } = {
-        alias: {
-            "@common": join(__dirname, "src", "common"),
-            "@Core": join(__dirname, "src", "main", "Core"),
-        },
-    };
-
     return {
         root: "src/renderer",
-        resolve,
+        resolve: {
+            alias: {
+                "@common": join(__dirname, "src", "common"),
+                "@Core": join(__dirname, "src", "renderer", "Core"),
+            },
+        },
         build: {
             outDir: "../../dist-renderer",
             emptyOutDir: true,
@@ -34,7 +32,12 @@ export default defineConfig(({ command }) => {
                         options.startup();
                     },
                     vite: {
-                        resolve,
+                        resolve: {
+                            alias: {
+                                "@common": join(__dirname, "src", "common"),
+                                "@Core": join(__dirname, "src", "main", "Core"),
+                            },
+                        },
                         build: {
                             sourcemap,
                             minify: isBuild,
@@ -54,7 +57,11 @@ export default defineConfig(({ command }) => {
                         options.reload();
                     },
                     vite: {
-                        resolve,
+                        resolve: {
+                            alias: {
+                                "@common": join(__dirname, "src", "common"),
+                            },
+                        },
                         build: {
                             sourcemap,
                             minify: isBuild,