mirror of
https://github.com/oliverschwendener/ueli.git
synced 2024-08-17 01:30:31 +03:00
Simplified extension cliend code organization
This commit is contained in:
parent
a00568d4ef
commit
163c9625fa
12
src/renderer/Core/Extension.tsx
Normal file
12
src/renderer/Core/Extension.tsx
Normal file
@ -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</>;
|
||||||
|
};
|
@ -1,4 +1,5 @@
|
|||||||
export * from "./useContextBridge";
|
export * from "./useContextBridge";
|
||||||
|
export * from "./useExtensionProps";
|
||||||
export * from "./useExtensionSetting";
|
export * from "./useExtensionSetting";
|
||||||
export * from "./useScrollbar";
|
export * from "./useScrollbar";
|
||||||
export * from "./useSearchResultItems";
|
export * from "./useSearchResultItems";
|
13
src/renderer/Core/Hooks/useExtensionProps.ts
Normal file
13
src/renderer/Core/Hooks/useExtensionProps.ts
Normal file
@ -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: "/" }),
|
||||||
|
};
|
||||||
|
};
|
@ -1,6 +1,5 @@
|
|||||||
import type { ReactElement } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { ApplicationSearchSettings, DeeplTranslatorSettings } from "../../Extensions";
|
import { getExtension } from "../../../Extensions";
|
||||||
|
|
||||||
type ExtensionSettingsProps = {
|
type ExtensionSettingsProps = {
|
||||||
extensionId: string;
|
extensionId: string;
|
||||||
@ -9,13 +8,10 @@ type ExtensionSettingsProps = {
|
|||||||
export const ExtensionSettings = ({ extensionId }: ExtensionSettingsProps) => {
|
export const ExtensionSettings = ({ extensionId }: ExtensionSettingsProps) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const map: Record<string, ReactElement> = {
|
const result = getExtension(extensionId);
|
||||||
ApplicationSearch: <ApplicationSearchSettings />,
|
|
||||||
DeeplTranslator: <DeeplTranslatorSettings />,
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
map[extensionId] ?? (
|
result?.settings ?? (
|
||||||
<div style={{ textAlign: "center", padding: 10, boxSizing: "border-box" }}>
|
<div style={{ textAlign: "center", padding: 10, boxSizing: "border-box" }}>
|
||||||
{t("settings.extensions.noSettingsAvailable")}
|
{t("settings.extensions.noSettingsAvailable")}
|
||||||
</div>
|
</div>
|
@ -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];
|
|
||||||
};
|
|
@ -1,6 +1,6 @@
|
|||||||
|
import { useContextBridge } from "@Core/Hooks";
|
||||||
import type { OperatingSystem } from "@common/Core";
|
import type { OperatingSystem } from "@common/Core";
|
||||||
import type { ReactElement } from "react";
|
import type { ReactElement } from "react";
|
||||||
import { useContextBridge } from "../../Hooks";
|
|
||||||
import { MacOsSettings } from "./MacOs";
|
import { MacOsSettings } from "./MacOs";
|
||||||
import { WindowsSettings } from "./Windows";
|
import { WindowsSettings } from "./Windows";
|
||||||
|
|
||||||
|
@ -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 { Button, Field, Input, Tooltip } from "@fluentui/react-components";
|
||||||
import { AddRegular, DismissRegular, FolderRegular } from "@fluentui/react-icons";
|
import { AddRegular, DismissRegular, FolderRegular } from "@fluentui/react-icons";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useContextBridge, useExtensionSetting } from "../../../Hooks";
|
|
||||||
import { Section } from "../../../Settings/Section";
|
|
||||||
import { SectionList } from "../../../Settings/SectionList";
|
|
||||||
|
|
||||||
export const MacOsSettings = () => {
|
export const MacOsSettings = () => {
|
||||||
const { contextBridge } = useContextBridge();
|
const { contextBridge } = useContextBridge();
|
||||||
|
@ -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 { Button, Text } from "@fluentui/react-components";
|
||||||
import { ArrowLeftFilled, CopyRegular } from "@fluentui/react-icons";
|
import { ArrowLeftFilled, CopyRegular } from "@fluentui/react-icons";
|
||||||
import { useState } from "react";
|
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 { MissingApiKey } from "./MissingApiKey";
|
||||||
import { Translator } from "./Translator";
|
import { Translator } from "./Translator";
|
||||||
|
|
||||||
|
@ -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 { 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 { sourceLanguages } from "./sourceLanguages";
|
||||||
import { targetLanguages } from "./targetLanguages";
|
import { targetLanguages } from "./targetLanguages";
|
||||||
|
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
|
import { useExtensionSetting } from "@Core/Hooks";
|
||||||
import type { ContextBridge } from "@common/Core";
|
import type { ContextBridge } from "@common/Core";
|
||||||
import { Dropdown, Option, ProgressBar, Textarea } from "@fluentui/react-components";
|
import { Dropdown, Option, ProgressBar, Textarea } from "@fluentui/react-components";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useExtensionSetting } from "../../Hooks";
|
|
||||||
import { sourceLanguages } from "./sourceLanguages";
|
import { sourceLanguages } from "./sourceLanguages";
|
||||||
import { targetLanguages } from "./targetLanguages";
|
import { targetLanguages } from "./targetLanguages";
|
||||||
|
|
||||||
|
@ -1,2 +0,0 @@
|
|||||||
export * from "./ApplicationSearch";
|
|
||||||
export * from "./DeeplTranslator";
|
|
25
src/renderer/Extensions/index.tsx
Normal file
25
src/renderer/Extensions/index.tsx
Normal file
@ -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];
|
||||||
|
};
|
@ -1,6 +1,6 @@
|
|||||||
|
import { App } from "@Core/App";
|
||||||
import { createRoot } from "react-dom/client";
|
import { createRoot } from "react-dom/client";
|
||||||
import { HashRouter } from "react-router-dom";
|
import { HashRouter } from "react-router-dom";
|
||||||
import { App } from "./App";
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
createRoot(document.getElementById("react-app") as HTMLDivElement).render(
|
createRoot(document.getElementById("react-app") as HTMLDivElement).render(
|
||||||
|
@ -17,7 +17,8 @@
|
|||||||
"jsx": "react-jsx",
|
"jsx": "react-jsx",
|
||||||
"rootDir": "./src",
|
"rootDir": "./src",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@common/*": ["./src/common/*"]
|
"@common/*": ["./src/common/*"],
|
||||||
|
"@Core/*": ["./src/renderer/Core/*"]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import react from "@vitejs/plugin-react";
|
import react from "@vitejs/plugin-react";
|
||||||
import { join } from "path";
|
import { join } from "path";
|
||||||
import { defineConfig, type AliasOptions } from "vite";
|
import { defineConfig } from "vite";
|
||||||
import electron from "vite-plugin-electron";
|
import electron from "vite-plugin-electron";
|
||||||
import renderer from "vite-plugin-electron-renderer";
|
import renderer from "vite-plugin-electron-renderer";
|
||||||
import pkg from "./package.json";
|
import pkg from "./package.json";
|
||||||
@ -10,16 +10,14 @@ export default defineConfig(({ command }) => {
|
|||||||
const isBuild = command === "build";
|
const isBuild = command === "build";
|
||||||
const sourcemap = isServe ? "inline" : undefined;
|
const sourcemap = isServe ? "inline" : undefined;
|
||||||
|
|
||||||
const resolve: { alias: AliasOptions } = {
|
|
||||||
alias: {
|
|
||||||
"@common": join(__dirname, "src", "common"),
|
|
||||||
"@Core": join(__dirname, "src", "main", "Core"),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
root: "src/renderer",
|
root: "src/renderer",
|
||||||
resolve,
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@common": join(__dirname, "src", "common"),
|
||||||
|
"@Core": join(__dirname, "src", "renderer", "Core"),
|
||||||
|
},
|
||||||
|
},
|
||||||
build: {
|
build: {
|
||||||
outDir: "../../dist-renderer",
|
outDir: "../../dist-renderer",
|
||||||
emptyOutDir: true,
|
emptyOutDir: true,
|
||||||
@ -34,7 +32,12 @@ export default defineConfig(({ command }) => {
|
|||||||
options.startup();
|
options.startup();
|
||||||
},
|
},
|
||||||
vite: {
|
vite: {
|
||||||
resolve,
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@common": join(__dirname, "src", "common"),
|
||||||
|
"@Core": join(__dirname, "src", "main", "Core"),
|
||||||
|
},
|
||||||
|
},
|
||||||
build: {
|
build: {
|
||||||
sourcemap,
|
sourcemap,
|
||||||
minify: isBuild,
|
minify: isBuild,
|
||||||
@ -54,7 +57,11 @@ export default defineConfig(({ command }) => {
|
|||||||
options.reload();
|
options.reload();
|
||||||
},
|
},
|
||||||
vite: {
|
vite: {
|
||||||
resolve,
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@common": join(__dirname, "src", "common"),
|
||||||
|
},
|
||||||
|
},
|
||||||
build: {
|
build: {
|
||||||
sourcemap,
|
sourcemap,
|
||||||
minify: isBuild,
|
minify: isBuild,
|
||||||
|
Loading…
Reference in New Issue
Block a user