From 85f5e7fb2b1e568148b2f09a9c9fad00d5fcea87 Mon Sep 17 00:00:00 2001 From: yifanwww Date: Sat, 30 Sep 2023 19:39:35 +0800 Subject: [PATCH] feat: wrap ipc API --- packages/app-main/src/preload/app.ts | 2 +- packages/app-main/src/preload/index.ts | 8 ++-- packages/app-main/src/preload/logger.ts | 2 +- .../src/MainWindow/redux/thunks/thunks.app.ts | 4 +- packages/app-renderer/src/apis/exposes.ts | 11 +++++ packages/app-renderer/src/apis/index.ts | 44 ++++++++++++++++--- packages/app-renderer/src/index.tsx | 4 +- 7 files changed, 60 insertions(+), 15 deletions(-) create mode 100644 packages/app-renderer/src/apis/exposes.ts diff --git a/packages/app-main/src/preload/app.ts b/packages/app-main/src/preload/app.ts index 911fdb16..ee8bb63a 100644 --- a/packages/app-main/src/preload/app.ts +++ b/packages/app-main/src/preload/app.ts @@ -4,7 +4,7 @@ import { ipcRenderer } from 'electron'; import { webArgs } from './args'; -export const appAPI: AppRendererAPI = { +export const AppAPI: AppRendererAPI = { windowType: webArgs.windowType, createWindow: (...args) => ipcRenderer.invoke(AppAPIChannel.CREATE_WINDOW, ...args), getAppDetails: (...args) => ipcRenderer.invoke(AppAPIChannel.GET_APP_DETAILS, ...args), diff --git a/packages/app-main/src/preload/index.ts b/packages/app-main/src/preload/index.ts index 7bd560df..3557cbfc 100644 --- a/packages/app-main/src/preload/index.ts +++ b/packages/app-main/src/preload/index.ts @@ -1,7 +1,7 @@ import { contextBridge } from 'electron'; -import { appAPI } from './app'; -import { loggerAPI } from './logger'; +import { AppAPI } from './app'; +import { LoggerAPI } from './logger'; -contextBridge.exposeInMainWorld('appAPI', appAPI); -contextBridge.exposeInMainWorld('loggerAPI', loggerAPI); +contextBridge.exposeInMainWorld('APP_API', AppAPI); +contextBridge.exposeInMainWorld('LOGGER_API', LoggerAPI); diff --git a/packages/app-main/src/preload/logger.ts b/packages/app-main/src/preload/logger.ts index 0f8f58ec..df523373 100644 --- a/packages/app-main/src/preload/logger.ts +++ b/packages/app-main/src/preload/logger.ts @@ -2,7 +2,7 @@ import type { LoggerRendererAPI } from '@ter/app-common/apis/logger'; import { LoggerAPIChannel } from '@ter/app-common/apis/logger'; import { ipcRenderer } from 'electron'; -export const loggerAPI: LoggerRendererAPI = { +export const LoggerAPI: LoggerRendererAPI = { debug: (...args) => ipcRenderer.invoke(LoggerAPIChannel.DEBUG, ...args), error: (...args) => ipcRenderer.invoke(LoggerAPIChannel.ERROR, ...args), info: (...args) => ipcRenderer.invoke(LoggerAPIChannel.INFO, ...args), diff --git a/packages/app-renderer/src/MainWindow/redux/thunks/thunks.app.ts b/packages/app-renderer/src/MainWindow/redux/thunks/thunks.app.ts index 72fe7c56..4d2590df 100644 --- a/packages/app-renderer/src/MainWindow/redux/thunks/thunks.app.ts +++ b/packages/app-renderer/src/MainWindow/redux/thunks/thunks.app.ts @@ -1,10 +1,10 @@ -import { appAPI } from 'src/apis'; +import { AppAPI } from 'src/apis'; import { _actions } from '../actions'; import { createMainThunk } from './createThunk'; export const prepareAppDetails = createMainThunk(async (dispatch) => { - const appDetails = await appAPI.getAppDetails(); + const appDetails = await AppAPI.getAppDetails(); dispatch(_actions._setAppDetails(appDetails)); }); diff --git a/packages/app-renderer/src/apis/exposes.ts b/packages/app-renderer/src/apis/exposes.ts new file mode 100644 index 00000000..d1d10d14 --- /dev/null +++ b/packages/app-renderer/src/apis/exposes.ts @@ -0,0 +1,11 @@ +import type { AppRendererAPI } from '@ter/app-common/apis/app'; +import type { LoggerRendererAPI } from '@ter/app-common/apis/logger'; + +declare const window: { + /* eslint-disable @typescript-eslint/naming-convention */ + APP_API: AppRendererAPI; + LOGGER_API: LoggerRendererAPI; + /* eslint-enable @typescript-eslint/naming-convention */ +}; + +export const { APP_API, LOGGER_API } = window; diff --git a/packages/app-renderer/src/apis/index.ts b/packages/app-renderer/src/apis/index.ts index 14f42abb..84fc7529 100644 --- a/packages/app-renderer/src/apis/index.ts +++ b/packages/app-renderer/src/apis/index.ts @@ -1,9 +1,43 @@ +/* + * https://www.electronjs.org/docs/latest/api/context-bridge#api-functions + * Exposed functions have some limitations. + * Here we can convert them to meet our requirements, such as converting data structures: + * ```ts + * const { _getUser } = window; + * + * export async function getUser() { + * return User.deserialize(await _getUser()); + * } + * ``` + * + * We can also create new functions that combine some of the exposed functions: + * ```ts + * const { apiA, apiB } = window; + * + * export async function apiX() { + * const resA = await apiA(); + * const resB = await apiB(); + * return resA || resB; + * } + * ``` + */ + import type { AppRendererAPI } from '@ter/app-common/apis/app'; import type { LoggerRendererAPI } from '@ter/app-common/apis/logger'; -declare const window: { - appAPI: AppRendererAPI; - loggerAPI: LoggerRendererAPI; -}; +import { APP_API, LOGGER_API } from './exposes'; + +export const AppAPI = { + createWindow: APP_API.createWindow, + getAppDetails: APP_API.getAppDetails, + windowType: APP_API.windowType, +} satisfies Record; -export const { appAPI, loggerAPI } = window; +export const LoggerAPI = { + debug: LOGGER_API.debug, + error: LOGGER_API.error, + info: LOGGER_API.info, + log: LOGGER_API.log, + verbose: LOGGER_API.verbose, + warn: LOGGER_API.warn, +} satisfies Record; diff --git a/packages/app-renderer/src/index.tsx b/packages/app-renderer/src/index.tsx index 377d613f..6e825597 100644 --- a/packages/app-renderer/src/index.tsx +++ b/packages/app-renderer/src/index.tsx @@ -5,7 +5,7 @@ import { match } from 'ts-pattern'; import './index.css'; -import { appAPI } from './apis'; +import { AppAPI } from './apis'; import { MainWindow } from './MainWindow'; import { reportWebVitals } from './reportWebVitals'; import { assert } from './utils/assert'; @@ -14,7 +14,7 @@ function main(): void { const appElement = document.getElementById('app'); assert(appElement !== null); - const window = match(appAPI.windowType) + const window = match(AppAPI.windowType) .with(WindowType.MAIN, () => ) .exhaustive();