fix: 修复 app dispose 报错问题

Author: winjo

packages/alex/src/api/createApp.tsx

@@ -11,7 +11,13 @@ import { IThemeService } from '@ali/ide-theme/lib/common';
 import '@ali/ide-i18n/lib/browser';
 import '@alipay/alex-i18n';
 import '@ali/ide-core-browser/lib/style/index.less';
+import { isMonacoLoaded, loadMonaco } from '@ali/ide-monaco/lib/browser/monaco-loader';
+import { IEditorDocumentModelService } from '@ali/ide-editor/lib/browser';
+import { EditorDocumentModelServiceImpl } from '@ali/ide-editor/lib/browser/doc-model/editor-document-model-service';
+import { EditorDocumentModel } from '@ali/ide-editor/lib/browser/doc-model/editor-document-model';
+import { FileTreeModelService } from '@ali/ide-file-tree-next/lib/browser/services/file-tree-model.service';
 import * as os from 'os';
+
 import { modules } from '../core/modules';
 import { IconSlim, IDETheme } from '../core/extensions';
 import { mergeConfig, themeStorage } from '../core/utils';
@@ -50,6 +56,13 @@ const getDefaultAppConfig = (): IAppOpts => ({
 
 export const DEFAULT_APP_CONFIG = getDefaultAppConfig();
 
+// 提前加载 monaco 并提前缓存 codeEditorService
+loadMonaco();
+let codeEditorService: any = null;
+isMonacoLoaded()?.then(() => {
+  codeEditorService = (monaco as any).services.StaticServices.codeEditorService;
+});
+
 export function createApp({ appConfig, runtimeConfig }: IConfig): IAppInstance {
   const customConfig = typeof appConfig === 'function' ? appConfig() : appConfig;
   const opts = mergeConfig(getDefaultAppConfig(), customConfig);
@@ -84,6 +97,29 @@ export function createApp({ appConfig, runtimeConfig }: IConfig): IAppInstance {
     (app.injector.get(IThemeService) as IThemeService).onThemeChange((e) => {
       themeStorage.set(e.type);
     });
+    // IDE 销毁时，组件会触发 handleTreeBlur，但是 FileContextKey 实例会获取，此时在 dispose 阶段，injector.get(FileContextKey) 会抛出错误
+    app.injector.get(FileTreeModelService).handleTreeBlur();
+  };
+
+  let destroyed = false;
+  app.destroy = () => {
+    if (destroyed) {
+      return;
+    }
+    destroyed = true;
+    // from acr
+    const editorDocModelService = app.injector.get(
+      IEditorDocumentModelService
+    ) as EditorDocumentModelServiceImpl;
+    for (const instance of Array.from(
+      editorDocModelService['_modelReferenceManager'].instances.values()
+    ) as EditorDocumentModel[]) {
+      instance['monacoModel'].dispose();
+    }
+    if (codeEditorService) {
+      codeEditorService._value = null;
+    }
+    app.injector.disposeAll();
   };
 
   runtimeConfig ??= {};

packages/alex/src/api/renderApp.tsx

@@ -40,6 +40,10 @@ export const renderApp = (domElement: HTMLElement, props: IRenderProps) => {
         domElement
       );
     });
+
+  return () => {
+    app.destroy();
+  };
 };
 
 export const AppRenderer: React.FC<IRenderProps> = ({ onLoad, Landing, ...opts }) => {
@@ -68,7 +72,7 @@ export const AppRenderer: React.FC<IRenderProps> = ({ onLoad, Landing, ...opts }
       });
 
     return () => {
-      app.dispose();
+      app.destroy();
     };
   }, []);
 

packages/alex/src/api/types.ts

@@ -20,5 +20,14 @@ export interface IConfig {
 }
 
 export interface IAppInstance extends ClientApp {
+  /**
+   * 启动应用
+   * @param container 挂载位置
+   */
   start(container: HTMLElement | IAppRenderer): Promise<void>;
+
+  /**
+   * 销毁应用
+   */
+  destroy(): void;
 }

packages/alex/src/integration/startup/index.tsx

@@ -80,6 +80,7 @@ ReactDOM.render(
 //   },
 // });
 
+// for test
 (window as any).destroy = () => {
-  ReactDOM.render(<div>11</div>, document.getElementById('main'));
+  ReactDOM.render(<div>destroyed</div>, document.getElementById('main'));
 };

packages/core/src/client/index.ts

@@ -8,11 +8,6 @@ import {
 import { BasicModule } from '@ali/ide-core-common';
 import { WSChannelHandler } from '@ali/ide-connection';
 
-import { IEditorDocumentModelService } from '@ali/ide-editor/lib/browser';
-import { EditorDocumentModelServiceImpl } from '@ali/ide-editor/lib/browser/doc-model/editor-document-model-service';
-import { EditorDocumentModel } from '@ali/ide-editor/lib/browser/doc-model/editor-document-model';
-import { isMonacoLoaded } from '@ali/ide-monaco/lib/browser/monaco-loader';
-
 import { FCServiceCenter, ClientPort, initFCService } from '../connection';
 import { KaitianExtFsProvider, KtExtFsProviderContribution } from './extension';
 import { TextmateLanguageGrammarContribution } from './textmate-language-grammar/index.contribution';
@@ -36,11 +31,6 @@ export { TextmateLanguageGrammarContribution, LanguageGrammarRegistrationService
 
 export type ModuleConstructor = ConstructorOf<BrowserModule>;
 
-let codeEditorService: any = null;
-isMonacoLoaded()?.then(() => {
-  codeEditorService = (monaco as any).services.StaticServices.codeEditorService;
-});
-
 @Injectable()
 export class ClientModule extends BrowserModule {
   providers = [
@@ -65,6 +55,8 @@ export interface IAppOpts extends IClientAppOpts, IServerAppOpts {}
 export { IClientAppOpts };
 
 export class ClientApp extends BasicClientApp {
+  private disposed = false;
+
   constructor(opts: IAppOpts) {
     super(opts);
     this.initServer(opts);
@@ -99,23 +91,25 @@ export class ClientApp extends BasicClientApp {
     return super.start(container, type);
   }
 
-  public dispose() {
-    // from acr
-    // TODO: dispose 会存在报错，需要解决
-    if (this.injector.hasInstance(IEditorDocumentModelService)) {
-      const editorDocModelService = this.injector.get(
-        IEditorDocumentModelService
-      ) as EditorDocumentModelServiceImpl;
-      for (const instance of Array.from(
-        editorDocModelService['_modelReferenceManager'].instances.values()
-      ) as EditorDocumentModel[]) {
-        instance['monacoModel'].dispose();
-      }
+  stopContributions() {
+    if (!this.disposed) {
+      super.stopContributions();
     }
-    if (codeEditorService) {
-      codeEditorService._value = null;
+  }
+
+  preventStop() {
+    if (!this.disposed) {
+      return super.preventStop();
     }
-    this.injector.disposeAll();
+    return false;
+  }
+
+  /**
+   * kaitian 中没有注销注册在 window 上上的事件，在把 IDE 销毁后，此时刷新页面依然会执行事件
+   * 此时 injector.get 都会报错，因此这里加个状态判断
+   */
+  dispose() {
+    this.disposed = true;
   }
 }
 

packages/core/src/server/core/app.ts

@@ -7,6 +7,7 @@ import {
   ILogService,
   SupportLogNamespace,
   StoragePaths,
+  DisposableCollection,
 } from '@ali/ide-core-common';
 import { AppConfig, BrowserModule } from '@ali/ide-core-browser';
 import { IExtensionBasicMetadata } from '@alipay/alex-shared';
@@ -93,6 +94,8 @@ export class ServerApp implements IServerApp {
 
   public rootFS: RootFS;
 
+  private disposeCollection = new DisposableCollection();
+
   constructor(
     opts: IServerAppOpts & {
       injector: Injector;
@@ -124,8 +127,15 @@ export class ServerApp implements IServerApp {
   }
 
   private registerEventListeners() {
-    window.addEventListener('unload', () => {
+    const handleUnload = () => {
       this.stopContribution();
+    };
+    window.addEventListener('unload', handleUnload);
+
+    this.disposeCollection.push({
+      dispose: () => {
+        window.removeEventListener('unload', handleUnload);
+      },
     });
   }
 
@@ -205,6 +215,10 @@ export class ServerApp implements IServerApp {
     bindModuleBackService(this.injector, this.modules);
     await this.startContribution();
   }
+
+  dispose() {
+    this.disposeCollection.dispose();
+  }
 }
 
 export function bindModuleBackService(injector: Injector, modules: ModuleConstructor[]) {