feat: wrap ipc API

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),

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);

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),

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));
 });

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;

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<keyof AppRendererAPI, unknown>;
 
-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<keyof LoggerRendererAPI, unknown>;

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, () => <MainWindow />)
         .exhaustive();