chore(eslint): optimize imports

.eslint.common.js

@@ -12,9 +12,9 @@ const eslintCommon = {
             "plugin:@typescript-eslint/recommended",
             "plugin:@typescript-eslint/recommended-requiring-type-checking",
             "plugin:prettier/recommended",
-            "plugin:eslint-comments/recommended"
+            "plugin:eslint-comments/recommended",
         ],
-        plugins: ["@netless", "prettier", "@typescript-eslint", "eslint-comments"],
+        plugins: ["@netless", "prettier", "@typescript-eslint", "import", "eslint-comments"],
         rules: {
             "array-callback-return": "warn",
             "default-case": "off",
@@ -125,6 +125,48 @@ const eslintCommon = {
             "no-whitespace-before-property": "warn",
             "require-yield": "warn",
             "rest-spread-spacing": ["warn", "never"],
+            "sort-imports": [
+                "error",
+                {
+                    ignoreCase: false,
+                    ignoreDeclarationSort: true,
+                    ignoreMemberSort: false,
+                    memberSyntaxSortOrder: ["none", "all", "multiple", "single"],
+                    allowSeparatedGroups: false,
+                },
+            ],
+            "import/no-duplicates": "error",
+            "import/order": [
+                "error",
+                {
+                    groups: ["builtin", "external", "parent", "sibling", "index"],
+                    pathGroups: [
+                        {
+                            pattern: "react",
+                            group: "builtin",
+                            position: "before",
+                        },
+                        {
+                            pattern: "antd/es/*/style/index",
+                            group: "index",
+                            position: "after",
+                        },
+                        {
+                            pattern: "*.+(css|less|mp3)",
+                            patternOptions: { matchBase: true },
+                            group: "index",
+                            position: "after",
+                        },
+                    ],
+                    alphabetize: {
+                        order: "asc",
+                        caseInsensitive: true,
+                    },
+                    pathGroupsExcludedImportTypes: ["react"],
+                    warnOnUnassignedImports: true,
+                    "newlines-between": "never",
+                },
+            ],
             strict: ["warn", "never"],
             "unicode-bom": ["warn", "never"],
             "valid-typeof": "warn",
@@ -159,6 +201,12 @@ const eslintCommon = {
             ],
             "@typescript-eslint/no-empty-interface": "off",
             "@typescript-eslint/consistent-type-assertions": "error",
+            "@typescript-eslint/consistent-type-imports": [
+                "error",
+                {
+                    prefer: "no-type-imports",
+                },
+            ],
             "@typescript-eslint/explicit-member-accessibility": [
                 "error",
                 {
@@ -195,6 +243,13 @@ const eslintCommon = {
                 },
             ],
         },
+        settings: {
+            "import/resolver": {
+                node: {
+                    extensions: [".js", ".mjs", ".jsx", ".json", ".wasm", ".ts", "tsx"],
+                },
+            },
+        },
         overrides: [
             {
                 // enable the rule specifically for TypeScript files
@@ -239,8 +294,8 @@ const eslintCommon = {
                     ignore: [],
                 },
             ],
-            'react/jsx-sort-props': [
-                'error',
+            "react/jsx-sort-props": [
+                "error",
                 {
                     callbacksLast: true,
                     shorthandFirst: true,

desktop/main-app/package.json

@@ -47,6 +47,7 @@
     "eslint": "^7.26.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-webpack-plugin": "^3.0.1",
     "file-loader": "^6.2.0",

desktop/main-app/src/bootup/init-app-ipc.ts

@@ -1,6 +1,6 @@
-import { appActionAsync, appActionSync } from "../utils/ipc-actions";
-import { ipc } from "flat-types";
 import { ipcMain } from "electron";
+import { ipc } from "flat-types";
+import { appActionAsync, appActionSync } from "../utils/ipc-actions";
 
 export default (): void => {
     const appActionAsyncKeys = Object.keys(appActionAsync) as Array<keyof ipc.AppActionAsync>;

desktop/main-app/src/bootup/init-menus.ts

@@ -1,4 +1,4 @@
-import { app, Menu, MenuItemConstructorOptions } from "electron";
+import { Menu, MenuItemConstructorOptions, app } from "electron";
 import runtime from "../utils/runtime";
 
 export default (): void => {

desktop/main-app/src/bootup/init-url-protocol.ts

@@ -1,8 +1,8 @@
-import runtime from "../utils/runtime";
 import { app } from "electron";
+import { constants } from "flat-types";
 import closeAPP from "../utils/close-app";
+import runtime from "../utils/runtime";
 import { windowManager } from "../window-manager";
-import { constants } from "flat-types";
 import { CustomWindow } from "../window-manager/abstract";
 
 export default async (): Promise<void> => {

desktop/main-app/src/bootup/init-webRequest.ts

@@ -1,6 +1,6 @@
+import path from "path";
 import { protocol, session } from "electron";
 import fs from "fs-extra";
-import path from "path";
 import runtime from "../utils/runtime";
 
 export default (): void => {

desktop/main-app/src/bootup/init-window.ts

@@ -1,6 +1,6 @@
 import { app } from "electron";
-import { windowManager } from "../window-manager";
 import { constants } from "flat-types";
+import { windowManager } from "../window-manager";
 
 export default (): void => {
     app.allowRendererProcessReuse = false;

desktop/main-app/src/index.ts

@@ -1,12 +1,12 @@
-import bootstrap from "./utils/bootup-flow";
-import initEnv from "./bootup/init-env";
-import initWindow from "./bootup/init-window";
-import initWebRequest from "./bootup/init-webRequest";
-import initMenus from "./bootup/init-menus";
 import intAppIPC from "./bootup/init-app-ipc";
 import initAppListen from "./bootup/init-app-listener";
+import initEnv from "./bootup/init-env";
+import initMenus from "./bootup/init-menus";
 import initOtherListeners from "./bootup/init-other";
 import initURLProtocol from "./bootup/init-url-protocol";
+import initWebRequest from "./bootup/init-webRequest";
+import initWindow from "./bootup/init-window";
+import bootstrap from "./utils/bootup-flow";
 
 void bootstrap([
     initEnv,

desktop/main-app/src/preload.ts

@@ -1,4 +1,4 @@
-import type AgoraRtcEngine from "agora-electron-sdk";
+import AgoraRtcSDK from "agora-electron-sdk";
 const { ipcRenderer } = require("electron");
 
 /**
@@ -15,9 +15,7 @@ ipcRenderer.once("inject-agora-electron-sdk-addon", () => {
         throw new Error("Agora App Id not set.");
     }
 
-    const AgoraRtcSDK = require("agora-electron-sdk").default;
-
-    const rtcEngine: AgoraRtcEngine = new AgoraRtcSDK();
+    const rtcEngine = new AgoraRtcSDK();
     window.rtcEngine = rtcEngine;
 
     if (rtcEngine.initialize(process.env.AGORA_APP_ID) < 0) {

desktop/main-app/src/utils/ipc-actions.ts

@@ -1,11 +1,10 @@
-import { windowManager } from "../window-manager";
-import { ipc } from "flat-types";
 import { app, ipcMain, powerSaveBlocker } from "electron";
-import runtime from "./runtime";
-import { updateService } from "./update-service";
-import { update } from "flat-types";
+import { ipc, update } from "flat-types";
 import { gt } from "semver";
+import { windowManager } from "../window-manager";
 import { CustomWindow } from "../window-manager/abstract";
+import runtime from "./runtime";
+import { updateService } from "./update-service";
 
 const windowActionAsync = (customWindow: CustomWindow): ipc.WindowActionAsync => {
     const { window, options } = customWindow;

desktop/main-app/src/utils/ipc-emit.ts

@@ -1,8 +1,7 @@
-import { ipc } from "flat-types";
+import { constants, ipc } from "flat-types";
 import { windowManager } from "../window-manager";
-import runtime from "./runtime";
-import { constants } from "flat-types";
 import { CustomWindow, IsMultiInstance } from "../window-manager/abstract";
+import runtime from "./runtime";
 
 const sendIPC = (customWindow: CustomWindow | null, eventName: string, args: any): void => {
     if (customWindow) {

desktop/main-app/src/utils/runtime.ts

@@ -1,6 +1,6 @@
+import { platform } from "os";
 import path from "path";
 import { app } from "electron";
-import { platform } from "os";
 import { runtime as Runtime } from "flat-types";
 
 const isDevelopment = process.env.NODE_ENV === "development";

desktop/main-app/src/utils/update-service.ts

@@ -1,8 +1,8 @@
-import { autoUpdater, UpdateCheckResult } from "electron-updater";
-import runtime from "./runtime";
+import { UpdateCheckResult, autoUpdater } from "electron-updater";
 import { ProgressInfo } from "electron-updater/out/differentialDownloader/ProgressDifferentialDownloadCallbackTransform";
-import { ipcEmitByMain } from "./ipc-emit";
 import { update } from "flat-types";
+import { ipcEmitByMain } from "./ipc-emit";
+import runtime from "./runtime";
 
 class UpdateService {
     private cancellationToken: UpdateCheckResult["cancellationToken"];

desktop/main-app/src/utils/window-event.ts

@@ -1,6 +1,6 @@
-import { ipcEmit } from "./ipc-emit";
 import { autoUpdater } from "electron-updater";
 import { CustomWindow } from "../window-manager/abstract";
+import { ipcEmit } from "./ipc-emit";
 
 export const windowHookClose = (customWindow: CustomWindow): void => {
     customWindow.window.on("close", e => {

desktop/main-app/src/window-manager/abstract.ts

@@ -1,15 +1,15 @@
-import { constants } from "flat-types";
 import { BrowserWindow, BrowserWindowConstructorOptions } from "electron";
+import { constants } from "flat-types";
 import {
     windowHookClose,
     windowHookClosed,
     windowOpenDevTools,
     windowReadyToShow,
 } from "../utils/window-event";
 import {
+    WindowOptions,
     defaultBrowserWindowOptions,
     defaultWindowOptions,
-    WindowOptions,
 } from "./default-options";
 
 export abstract class AbstractWindow<MULTI_INSTANCE extends boolean> {

desktop/main-app/src/window-manager/index.ts

@@ -1,8 +1,8 @@
-import { WindowManager } from "./window-manager";
-import { WindowMain } from "./window-main";
 import { constants } from "flat-types";
-import { WindowShareScreenTip } from "./window-portal/window-share-screen-tip";
+import { WindowMain } from "./window-main";
+import { WindowManager } from "./window-manager";
 import { WindowPreviewFile } from "./window-portal/window-preview-file";
+import { WindowShareScreenTip } from "./window-portal/window-share-screen-tip";
 
 export const windowManager = new WindowManager({
     [constants.WindowsName.Main]: new WindowMain(),

desktop/main-app/src/window-manager/window-main/index.ts

@@ -1,10 +1,10 @@
-import { constants } from "flat-types";
-import { AbstractWindow, CustomWindow } from "../abstract";
-import runtime from "../../utils/runtime";
-import { RxSubject } from "./rx-subject";
 import { ipcMain } from "electron";
+import { constants } from "flat-types";
 import { zip } from "rxjs";
 import { ignoreElements, mergeMap } from "rxjs/operators";
+import runtime from "../../utils/runtime";
+import { AbstractWindow, CustomWindow } from "../abstract";
+import { RxSubject } from "./rx-subject";
 
 export class WindowMain extends AbstractWindow<false> {
     private readonly subject: RxSubject;

desktop/main-app/src/window-manager/window-main/rx-subject.ts

@@ -1,5 +1,5 @@
-import { Subject } from "rxjs";
 import { IpcMainEvent } from "electron";
+import { Subject } from "rxjs";
 
 export class RxSubject {
     public constructor(

desktop/main-app/src/window-manager/window-manager.ts

@@ -1,8 +1,8 @@
-import { constants, portal } from "flat-types";
 import { BrowserWindowConstructorOptions } from "electron";
-import { WindowStore } from "./window-store";
-import { CustomWindow, AbstractWindows } from "./abstract";
+import { constants, portal } from "flat-types";
 import { injectionWindowIPCAction } from "../utils/ipc-actions";
+import { AbstractWindows, CustomWindow } from "./abstract";
+import { WindowStore } from "./window-store";
 
 export class WindowManager<
     ABSTRACT_WINDOWS extends AbstractWindows,

desktop/main-app/src/window-manager/window-portal/utils.ts

@@ -1,6 +1,6 @@
 import { Display, screen } from "electron";
-import { windowManager } from "../index";
 import { constants } from "flat-types";
+import { windowManager } from "../index";
 
 export const getDisplayByMainWindow = (): Display => {
     const mainBounds = windowManager

desktop/main-app/src/window-manager/window-portal/window-preview-file.ts

@@ -1,5 +1,5 @@
-import { AbstractWindow, CustomWindow } from "../abstract";
 import { constants } from "flat-types";
+import { AbstractWindow, CustomWindow } from "../abstract";
 
 export class WindowPreviewFile extends AbstractWindow<true> {
     public constructor() {

desktop/main-app/src/window-manager/window-portal/window-share-screen-tip.ts

@@ -1,5 +1,5 @@
-import { AbstractWindow, CustomWindow } from "../abstract";
 import { constants } from "flat-types";
+import { AbstractWindow, CustomWindow } from "../abstract";
 import { getDisplayByMainWindow, getXCenterPoint } from "./utils";
 
 export class WindowShareScreenTip extends AbstractWindow<false> {

desktop/main-app/typings/globals.d.ts

@@ -1,6 +1,9 @@
+import AgoraRtcSDK from "agora-electron-sdk";
+import { Runtime } from "../src/utils/runtime";
+
 declare namespace NodeJS {
     export interface Global {
-        runtime: import("../src/utils/runtime").Runtime;
+        runtime: Runtime;
     }
 
     export interface ProcessEnv {
@@ -10,8 +13,10 @@ declare namespace NodeJS {
     }
 }
 
-interface Window {
-    rtcEngine: any;
-    $: any;
-    jQuery: any;
+declare global {
+    interface Window {
+        rtcEngine: AgoraRtcSDK;
+        $: any;
+        jQuery: any;
+    }
 }

desktop/renderer-app/package.json

@@ -74,6 +74,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",

desktop/renderer-app/scripts/vite-plugin-electron/index.ts

@@ -1,7 +1,7 @@
 import { builtinModules } from "module";
 import { Plugin as VitePlugin } from "vite";
-import { cjs2esm } from "./utils";
 import { options } from "./template/options";
+import { cjs2esm } from "./utils";
 
 // based on https://github.com/caoxiemeihao/vite-plugins/blob/main/packages/electron/src/index.ts
 

desktop/renderer-app/scripts/vite-plugin-electron/utils.ts

@@ -1,6 +1,6 @@
-import { build, OutputFile } from "esbuild";
 import { readFileSync } from "fs";
 import { join } from "path";
+import { OutputFile, build } from "esbuild";
 
 // e.g:
 // flat/node_modules/electron/index.js?v=19cea64f => flat/node_modules/electron/index.js

desktop/renderer-app/src/AppRoutes/AppRouteContainer.tsx

@@ -1,12 +1,12 @@
 import React, { useContext } from "react";
-import { useIsomorphicLayoutEffect } from "react-use";
+import { FlatThemeBodyProvider } from "flat-components";
+import { observer } from "mobx-react-lite";
 import { RouteComponentProps } from "react-router-dom";
+import { useIsomorphicLayoutEffect } from "react-use";
+import { ConfigStoreContext } from "../components/StoreProvider";
+import { useURLAppLauncher } from "../utils/hooks/use-url-app-launcher";
 import { ipcAsyncByMainWindow } from "../utils/ipc";
 import { AppRouteErrorBoundary } from "./AppRouteErrorBoundary";
-import { useURLAppLauncher } from "../utils/hooks/use-url-app-launcher";
-import { ConfigStoreContext } from "../components/StoreProvider";
-import { FlatThemeBodyProvider } from "flat-components";
-import { observer } from "mobx-react-lite";
 
 export interface AppRouteContainerProps {
     Comp: React.ComponentType<any>;