fix: clear side effect when destroy

Author: winjo

packages/alex/src/api/createApp.tsx

@@ -16,6 +16,7 @@ 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 { WorkerExtensionService } from '@ali/ide-kaitian-extension/lib/browser/extension.worker.service';
 import * as os from 'os';
 
 import { modules } from '../core/modules';
@@ -101,6 +102,11 @@ export function createApp({ appConfig, runtimeConfig }: IConfig): IAppInstance {
     app.injector.get(FileTreeModelService).handleTreeBlur();
   };
 
+  /**
+   * 目前整个应用有太多的副作用，尤其是注册到 monaco 的事件，如 DocumentSymbolProviderRegistry.onChange
+   * 在 monaco 上的事件无法注销，除非重新全局实例化一个 monaco，目前 kaitian 并未暴露，暂时不可行
+   * 因此这里的 destroy 仍然可能有不少副作用无法清除，暂时清理已知的，避免报错
+   */
   let destroyed = false;
   app.destroy = () => {
     if (destroyed) {
@@ -119,6 +125,12 @@ export function createApp({ appConfig, runtimeConfig }: IConfig): IAppInstance {
     if (codeEditorService) {
       codeEditorService._value = null;
     }
+    (monaco as any).services.StaticServices.modeService._value = null;
+    // @ts-ignore
+    // common-di 通过参数实例化无法自动 dispose
+    app.injector.get(WorkerExtensionService).protocol._locals.forEach((instance) => {
+      instance.dispose?.();
+    });
     app.injector.disposeAll();
   };
 

packages/core/src/client/index.ts

@@ -4,9 +4,14 @@ import {
   ClientApp as BasicClientApp,
   IAppRenderer,
   IClientAppOpts,
+  NO_KEYBINDING_NAME,
 } from '@ali/ide-core-browser';
-import { BasicModule } from '@ali/ide-core-common';
+import { BasicModule, isOSX, DisposableCollection } from '@ali/ide-core-common';
 import { WSChannelHandler } from '@ali/ide-connection';
+import { WorkerExtensionService } from '@ali/ide-kaitian-extension/lib/browser/extension.worker.service';
+import { WorkerExtensionServicePatch } from './patch/extension.worker.service';
+import { TextmateService } from '@ali/ide-monaco/lib/browser/textmate.service';
+import { TextmateServicePatch } from './patch/textmate.service';
 
 import { FCServiceCenter, ClientPort, initFCService } from '../connection';
 import { KaitianExtFsProvider, KtExtFsProviderContribution } from './extension';
@@ -33,7 +38,7 @@ export type ModuleConstructor = ConstructorOf<BrowserModule>;
 
 @Injectable()
 export class ClientModule extends BrowserModule {
-  providers = [
+  providers: Provider[] = [
     KaitianExtFsProvider,
     KtExtFsProviderContribution,
     TextmateLanguageGrammarContribution,
@@ -46,6 +51,14 @@ export class ClientModule extends BrowserModule {
     EditorEmptyContribution,
     WelcomeContribution,
     MenuConfigContribution,
+    {
+      token: WorkerExtensionService,
+      useClass: WorkerExtensionServicePatch,
+    },
+    {
+      token: TextmateService,
+      useClass: TextmateServicePatch,
+    },
   ];
   preferences = injectDebugPreferences;
 }
@@ -55,7 +68,7 @@ export interface IAppOpts extends IClientAppOpts, IServerAppOpts {}
 export { IClientAppOpts };
 
 export class ClientApp extends BasicClientApp {
-  private disposed = false;
+  private disposeCollection = new DisposableCollection();
 
   constructor(opts: IAppOpts) {
     super(opts);
@@ -91,25 +104,78 @@ export class ClientApp extends BasicClientApp {
     return super.start(container, type);
   }
 
-  stopContributions() {
-    if (!this.disposed) {
-      super.stopContributions();
-    }
-  }
+  /**
+   * 注册全局事件监听
+   * TODO: kaitian 中无 removeEventLister 逻辑，这里 override 下，待提 mr
+   */
+  protected registerEventListeners(): void {
+    const addEventListener = (
+      target: Window | HTMLElement,
+      type: string,
+      listener: (...args: any[]) => any,
+      ...extra: any
+    ) => {
+      target.addEventListener(type, listener, ...extra);
+      this.disposeCollection.push({
+        dispose() {
+          target.removeEventListener(type, listener, ...extra);
+        },
+      });
+    };
+
+    addEventListener(window, 'beforeunload', (event) => {
+      // 为了避免不必要的弹窗，如果页面并没有发生交互浏览器可能不会展示在 beforeunload 事件中引发的弹框，甚至可能即使发生交互了也直接不显示。
+      if (this.preventStop()) {
+        (event || window.event).returnValue = true;
+        return true;
+      }
+    });
+    addEventListener(window, 'unload', () => {
+      // 浏览器关闭事件
+      this.stateService.state = 'closing_window';
+      this.stopContributions();
+    });
 
-  preventStop() {
-    if (!this.disposed) {
-      return super.preventStop();
+    addEventListener(window, 'resize', () => {
+      // 浏览器resize事件
+    });
+    // 处理中文输入回退时可能出现多个光标问题
+    // https://github.com/eclipse-theia/theia/pull/6673
+    let inComposition = false;
+    addEventListener(window, 'compositionstart', (event) => {
+      inComposition = true;
+    });
+    addEventListener(window, 'compositionend', (event) => {
+      inComposition = false;
+    });
+    addEventListener(
+      window,
+      'keydown',
+      (event: any) => {
+        if (event && event.target!.name !== NO_KEYBINDING_NAME && !inComposition) {
+          this.keybindingService.run(event);
+        }
+      },
+      true
+    );
+
+    if (isOSX) {
+      addEventListener(
+        document.body,
+        'wheel',
+        (event) => {
+          // 屏蔽在OSX系统浏览器中由于滚动导致的前进后退事件
+        },
+        { passive: false }
+      );
     }
-    return false;
   }
 
   /**
-   * kaitian 中没有注销注册在 window 上上的事件，在把 IDE 销毁后，此时刷新页面依然会执行事件
-   * 此时 injector.get 都会报错，因此这里加个状态判断
+   * kaitian 中没有注销注册在 window 上的事件
    */
   dispose() {
-    this.disposed = true;
+    this.disposeCollection.dispose();
   }
 }
 

packages/core/src/client/patch/extension.worker.service.ts

@@ -0,0 +1,45 @@
+// @ts-nocheck
+
+// TODO:
+/**
+ * kaitian 没有在 dispose terminal worker
+ * 临时 override，待 PR
+ */
+
+import { Injectable } from '@ali/common-di';
+import { Deferred, Emitter } from '@ali/ide-core-common';
+import { WorkerExtensionService } from '@ali/ide-kaitian-extension/lib/browser/extension.worker.service';
+import { IRPCProtocol } from '@ali/ide-connection/lib/common/rpcProtocol';
+
+@Injectable()
+export class WorkerExtensionServicePatch extends WorkerExtensionService {
+  private extendWorkerHost: Worker;
+
+  initWorkerProtocol(workerUrl: string): Promise<IRPCProtocol> {
+    this.logger.log('[Worker Host] init web worker extension host');
+
+    return new Promise((resolve, reject) => {
+      const ready = new Deferred<MessagePort>();
+      const onMessageEmitter = new Emitter<any>();
+      try {
+        const extendWorkerHost = new Worker(workerUrl, { name: 'KaitianWorkerExtensionHost' });
+        this.extendWorkerHost = extendWorkerHost;
+        extendWorkerHost.onmessage = (e) => {
+          if (e.data instanceof MessagePort) {
+            ready.resolve(e.data);
+          }
+        };
+
+        ready.promise.then((port) => {
+          resolve(this.createProtocol(port, onMessageEmitter));
+        });
+      } catch (err) {
+        reject(err);
+      }
+    });
+  }
+
+  dispose() {
+    this.extendWorkerHost.terminate();
+  }
+}

packages/core/src/client/patch/textmate.service.ts

@@ -0,0 +1,26 @@
+// @ts-nocheck
+
+import { TextmateService } from '@ali/ide-monaco/lib/browser/textmate.service';
+import { IOnigLib } from 'vscode-textmate';
+import { OnigScanner, OnigString } from 'vscode-oniguruma';
+
+let onigLoaded = false;
+
+class OnigasmLib implements IOnigLib {
+  createOnigScanner(source: string[]) {
+    return new OnigScanner(source);
+  }
+  createOnigString(source: string) {
+    return new OnigString(source);
+  }
+}
+
+export class TextmateServicePatch extends TextmateService {
+  getOnigLib() {
+    if (onigLoaded) {
+      return new OnigasmLib();
+    }
+    onigLoaded = true;
+    return super.getOnigLib();
+  }
+}

packages/core/src/client/textmate-language-grammar/language-grammar.service.ts

@@ -3,13 +3,19 @@ import { Disposable, Deferred, Emitter, Event, URI } from '@ali/ide-core-common'
 import { TextmateService } from '@ali/ide-monaco/lib/browser/textmate.service';
 import { LanguagesContribution, GrammarsContribution } from '@ali/ide-monaco';
 
+const languageListCache: LanguagesContribution[] = [];
+const grammarListCache: GrammarsContribution[] = [];
+
+class SingleEventEmitter<T> extends Emitter<T> {
+  clear() {
+    this._listeners?.clear();
+  }
+}
+
 @Injectable()
 export class LanguageGrammarRegistrationService extends Disposable {
-  static languageEmitter = new Emitter<LanguagesContribution>();
-  static grammarEmitter = new Emitter<GrammarsContribution>();
-
-  static languageEvent = Event.buffer(LanguageGrammarRegistrationService.languageEmitter.event);
-  static grammarEvent = Event.buffer(LanguageGrammarRegistrationService.grammarEmitter.event);
+  static languageEmitter = new SingleEventEmitter<LanguagesContribution>();
+  static grammarEmitter = new SingleEventEmitter<GrammarsContribution>();
 
   @Autowired(TextmateService)
   private readonly textMateService: TextmateService;
@@ -20,14 +26,38 @@ export class LanguageGrammarRegistrationService extends Disposable {
   }
 
   async initRegisterLanguageAndGrammar() {
-    // TODO: 框架侧参数类型改为可选
+    // 没啥作用，只是确保传参类型正确
     const uri = new URI();
-    LanguageGrammarRegistrationService.languageEvent((contrib) => {
+    languageListCache.forEach((contrib) => {
       this.textMateService.registerLanguage(contrib, uri);
     });
-    LanguageGrammarRegistrationService.grammarEvent((contrib) => {
+    grammarListCache.forEach((contrib) => {
+      this.textMateService.registerGrammar(contrib, uri);
+    });
+    this.clear();
+    LanguageGrammarRegistrationService.languageEmitter.event((contrib) => {
+      this.textMateService.registerLanguage(contrib, uri);
+    });
+    LanguageGrammarRegistrationService.grammarEmitter.event((contrib) => {
       this.textMateService.registerGrammar(contrib, uri);
     });
     this.languageDidRegisterDeferred.resolve();
   }
+
+  clear() {
+    LanguageGrammarRegistrationService.languageEmitter.clear();
+    LanguageGrammarRegistrationService.grammarEmitter.clear();
+  }
+
+  dispose() {
+    this.clear();
+  }
 }
+
+LanguageGrammarRegistrationService.languageEmitter.event((e) => {
+  languageListCache.push(e);
+});
+
+LanguageGrammarRegistrationService.grammarEmitter.event((e) => {
+  grammarListCache.push(e);
+});