chore(eslint): add sort-imports and import/order

.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,47 @@ 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/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",
@@ -195,6 +236,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 +287,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/utils/ipc-actions.ts

@@ -1,11 +1,11 @@
-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 { ipc } from "flat-types";
 import { 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,8 @@
 import { ipc } from "flat-types";
-import { windowManager } from "../window-manager";
-import runtime from "./runtime";
 import { constants } from "flat-types";
+import { windowManager } from "../window-manager";
 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/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,9 +1,9 @@
 import React, { FC } from "react";
-import { useIsomorphicLayoutEffect } from "react-use";
 import { RouteComponentProps } from "react-router-dom";
+import { useIsomorphicLayoutEffect } from "react-use";
+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";
 
 export interface AppRouteContainerProps {
     Comp: React.ComponentType<any>;

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

@@ -1,6 +1,6 @@
 import React, { ComponentType } from "react";
-import { RouteComponentProps } from "react-router-dom";
 import { ErrorPage } from "flat-components";
+import { RouteComponentProps } from "react-router-dom";
 
 export interface AppRouteErrorBoundaryProps {
     Comp: ComponentType<any>;

desktop/renderer-app/src/api-middleware/cloud-recording.ts

@@ -1,16 +1,16 @@
 import { updateRecordEndTime } from "./flatServer";
 import {
-    cloudRecordAcquire,
-    CloudRecordStopResult,
-    cloudRecordStop,
     CloudRecordAcquirePayload,
-    CloudRecordStartPayload,
-    cloudRecordStart,
     CloudRecordQueryResult,
-    cloudRecordQuery,
-    cloudRecordUpdateLayout,
+    CloudRecordStartPayload,
+    CloudRecordStopResult,
     CloudRecordUpdateLayoutPayload,
     CloudRecordUpdateLayoutResult,
+    cloudRecordAcquire,
+    cloudRecordQuery,
+    cloudRecordStart,
+    cloudRecordStop,
+    cloudRecordUpdateLayout,
 } from "./flatServer/agora";
 
 /**

desktop/renderer-app/src/api-middleware/flatServer/utils.ts

@@ -1,8 +1,8 @@
 import Axios, { AxiosRequestConfig } from "axios";
+import { RequestErrorCode } from "../../constants/error-code";
 import { globalStore } from "../../stores/global-store";
-import { FLAT_SERVER_VERSIONS, Status } from "./constants";
 import { ServerRequestError } from "../../utils/error/server-request-error";
-import { RequestErrorCode } from "../../constants/error-code";
+import { FLAT_SERVER_VERSIONS, Status } from "./constants";
 
 export type FlatServerResponse<T> =
     | {

desktop/renderer-app/src/api-middleware/rtm.ts

@@ -1,11 +1,11 @@
+import { EventEmitter } from "events";
 import AgoraRTM, { RtmChannel, RtmClient } from "agora-rtm-sdk";
 import polly from "polly-js";
 import { v4 as uuidv4 } from "uuid";
 import { AGORA, NODE_ENV } from "../constants/process";
-import { EventEmitter } from "events";
-import { RoomStatus } from "./flatServer/constants";
-import { generateRTMToken } from "./flatServer/agora";
 import { globalStore } from "../stores/global-store";
+import { generateRTMToken } from "./flatServer/agora";
+import { RoomStatus } from "./flatServer/constants";
 
 export interface RtmRESTfulQueryPayload {
     filter: {

desktop/renderer-app/src/api-middleware/share-screen.ts

@@ -1,7 +1,7 @@
-import { globalStore } from "../stores/global-store";
-import { AGORA } from "../constants/process";
 import type AgoraSDK from "agora-electron-sdk";
 import { ScreenSymbol } from "agora-electron-sdk/types/Api/native_type";
+import { AGORA } from "../constants/process";
+import { globalStore } from "../stores/global-store";
 
 export class RTCShareScreen {
     public constructor(