chore: 增加多实例配置

Author: guqiankun.gqk

packages/alex/src/api/createApp.tsx

@@ -91,6 +91,9 @@ export function createApp({ appConfig, runtimeConfig }: IConfig): IAppInstance {
   opts.workspaceDir = makeWorkspaceDir(opts.workspaceDir);
   // 托管 preference 逻辑
   registerLocalStorageProvider(opts);
+  
+  console.log(' ==> opts',opts.injector);
+
   const app = new ClientApp(opts) as IAppInstance;
 
   Object.defineProperty(app, 'currentThemeType', {

packages/alex/src/api/createMutapleApp.tsx

@@ -5,9 +5,11 @@ import { REPORT_NAME, RuntimeConfig } from '@alipay/alex-core';
 import { createApp } from './createApp';
 import { Root } from '../core/Root';
 import { RootProps, LandingProps } from '../core/types';
-import { useConstant } from '../core/hooks';
+import { setSingleInjector, singleInjector, useConstant } from '../core/hooks';
 import { IConfig, IAppInstance } from './types';
 import styles from '../core/style.module.less';
+import { setInjector } from '@opensumi/di/dist/helper';
+import { Injector } from '@opensumi/di';
 
 export interface IAppRendererProps extends IConfig {
   onLoad?(app: IAppInstance): void;
@@ -119,3 +121,69 @@ export const AppRenderer: React.FC<IAppRendererProps> = ({ onLoad, Landing, ...o
     </Root>
   );
 };
+
+// 缓存apprender 每次渲染都不卸载组件
+export const AppRenderer2: React.FC<IAppRendererProps> = ({ onLoad, Landing, ...opts }) => {
+
+  const app = useConstant(() => createApp({
+    ...opts,
+    // @ts-ignore
+    injector: singleInjector
+  }));
+  const themeType = useConstant(() => app.currentThemeType);
+  const appElementRef = useRef<React.ReactElement | null>(null);
+  setSingleInjector(app.injector)
+
+  console.log('app', app);
+  // 确保回调始终为最新
+  // TODO: 用 PropsService
+  const runtimeConfig: RuntimeConfig = app.injector.get(RuntimeConfig);
+  runtimeConfig.workspace = opts.runtimeConfig.workspace;
+
+  const [state, setState] = useState<{
+    status: RootProps['status'];
+    error?: RootProps['error'];
+  }>(() => ({ status: 'loading' }));
+
+  useEffect(() => {
+    app
+      .start((appElement) => {
+        appElementRef.current = appElement;
+        setState({ status: 'success' });
+        return Promise.resolve();
+      })
+      .then(() => {
+        onLoad?.(app);
+      })
+      .catch((err: Error) => {
+        setState({ error: err?.message || localize('error.unknown'), status: 'error' });
+
+        (app.injector.get(IReporterService) as IReporterService).point(
+          REPORT_NAME.ALEX_APP_START_ERROR,
+          err?.message,
+          {
+            error: err,
+          }
+        );
+        getDebugLogger().error(err);
+        setTimeout(() => {
+          throw err;
+        });
+      });
+
+    return () => {
+      // app.destroy();
+    };
+  }, []);
+
+  const rootClassName = useMemo(
+    () => (opts.runtimeConfig.hideEditorTab ? styles['hide-editor-tab'] : ''),
+    [opts.runtimeConfig.hideEditorTab]
+  );
+
+  return (
+    <Root {...state} theme={themeType} Landing={Landing} className={rootClassName}>
+      {appElementRef.current}
+    </Root>
+  );
+};

packages/alex/src/api/renderApp.tsx

@@ -21,6 +21,10 @@ class AlexContribution implements KeybindingContribution {
         keybindings.unregisterKeybinding(binding);
       });
     }
+
+    if(this.runtimeConfig.registerKeybindings?.length){
+      keybindings.registerKeybindings(this.runtimeConfig.registerKeybindings)
+    }
   }
 }
 

packages/alex/src/core/alex.module.ts

@@ -1,4 +1,6 @@
+import { Injector } from '@opensumi/di';
 import { useRef } from 'react';
+import { IAppInstance } from '../api/types';
 
 export const useConstant = <T>(fn: () => T): T => {
   const valueRef = useRef<{ v: T }>();
@@ -7,3 +9,16 @@ export const useConstant = <T>(fn: () => T): T => {
   }
   return valueRef.current.v;
 };
+
+
+export let singleInjector: Injector | null = null;
+
+export function setSingleInjector(inject) {
+  singleInjector = inject;
+}
+
+export let singleApp: IAppInstance| null = null
+
+export function setSingleApp(app: IAppInstance){
+  singleApp = app;
+}

packages/alex/src/core/hooks.ts

@@ -140,9 +140,6 @@ export { IClientAppOpts };
 // 先 dispose，待 opensumi 修复
 // @ts-ignore
 export class ClientApp extends BasicClientApp {
-  private clearInjector: () => void;
-
-  private disposeSideEffect = () => {};
 
   private modules: ModuleConstructor[] = [];
 

packages/core/src/client/index.ts

@@ -1,3 +1,4 @@
+import { Keybinding } from '@opensumi/ide-core-browser';
 import { IReporter } from '@opensumi/ide-core-common';
 import { FileSystemConfiguration, FileSystemInstance } from '../server/node';
 
@@ -103,6 +104,13 @@ export interface RuntimeConfig {
    * 配置需注销的快捷键
    */
   unregisterKeybindings?: string[];
+  /**
+   * 配置快捷键
+   * 可以通过 plugin 注册对应 command 执行的命令
+   * opensumi keybinding 
+   * https://opensumi.com/zh/docs/integrate/universal-integrate-case/custom-keybinding
+   */
+  registerKeybindings?: Keybinding[];
   /**
    * 文本搜索相关的配置，用于开启了左侧搜索面板的配置选项
    */

packages/core/src/common/types.ts

@@ -5,6 +5,7 @@ import { IServerApp, RuntimeConfig, RootFS, AppConfig } from '../../common/types
 import { LaunchContribution } from './app';
 import { FileSystemContribution } from './base';
 import { BrowserFS } from '../node';
+import { setSingleInjector, singleInjector } from '@alipay/alex/lib/core/hooks';
 
 @Domain(LaunchContribution)
 export class FileSystemLaunchContribution implements LaunchContribution {