feat: 增加 editor 入口

Author: winjo

package.json

@@ -8,7 +8,7 @@
   "description": "Ant Codespaces for browser",
   "main": "index.js",
   "engines": {
-    "kaitian": "1.33.0"
+    "kaitian": "1.35.2"
   },
   "scripts": {
     "preinstall": "node scripts/preinstall",

packages/alex/package.json

@@ -28,41 +28,41 @@
     "registry": "https://registry.npm.alibaba-inc.com"
   },
   "dependencies": {
-    "@ali/ide-addons": "1.33.0",
-    "@ali/ide-comments": "1.33.0",
-    "@ali/ide-core-browser": "1.33.0",
-    "@ali/ide-core-common": "1.33.0",
-    "@ali/ide-debug": "1.33.0",
-    "@ali/ide-decoration": "1.33.0",
-    "@ali/ide-editor": "1.33.0",
-    "@ali/ide-explorer": "1.33.0",
-    "@ali/ide-express-file-server": "1.33.0",
-    "@ali/ide-extension-storage": "1.33.0",
-    "@ali/ide-file-scheme": "1.33.0",
-    "@ali/ide-file-service": "1.33.0",
-    "@ali/ide-file-tree-next": "1.33.0",
-    "@ali/ide-kaitian-extension": "1.33.0",
-    "@ali/ide-keymaps": "1.33.0",
-    "@ali/ide-logs": "1.33.0",
-    "@ali/ide-main-layout": "1.33.0",
-    "@ali/ide-markers": "1.33.0",
-    "@ali/ide-menu-bar": "1.33.0",
-    "@ali/ide-monaco": "1.33.0",
-    "@ali/ide-monaco-enhance": "1.33.0",
-    "@ali/ide-opened-editor": "1.33.0",
-    "@ali/ide-outline": "1.33.0",
-    "@ali/ide-output": "1.33.0",
-    "@ali/ide-overlay": "1.33.0",
-    "@ali/ide-preferences": "1.33.0",
-    "@ali/ide-quick-open": "1.33.0",
-    "@ali/ide-scm": "1.33.0",
-    "@ali/ide-static-resource": "1.33.0",
-    "@ali/ide-status-bar": "1.33.0",
-    "@ali/ide-storage": "1.33.0",
-    "@ali/ide-theme": "1.33.0",
-    "@ali/ide-webview": "1.33.0",
-    "@ali/ide-workspace": "1.33.0",
-    "@ali/ide-workspace-edit": "1.33.0",
+    "@ali/ide-addons": "1.35.2",
+    "@ali/ide-comments": "1.35.2",
+    "@ali/ide-core-browser": "1.35.2",
+    "@ali/ide-core-common": "1.35.2",
+    "@ali/ide-debug": "1.35.2",
+    "@ali/ide-decoration": "1.35.2",
+    "@ali/ide-editor": "1.35.2",
+    "@ali/ide-explorer": "1.35.2",
+    "@ali/ide-express-file-server": "1.35.2",
+    "@ali/ide-extension-storage": "1.35.2",
+    "@ali/ide-file-scheme": "1.35.2",
+    "@ali/ide-file-service": "1.35.2",
+    "@ali/ide-file-tree-next": "1.35.2",
+    "@ali/ide-kaitian-extension": "1.35.2",
+    "@ali/ide-keymaps": "1.35.2",
+    "@ali/ide-logs": "1.35.2",
+    "@ali/ide-main-layout": "1.35.2",
+    "@ali/ide-markers": "1.35.2",
+    "@ali/ide-menu-bar": "1.35.2",
+    "@ali/ide-monaco": "1.35.2",
+    "@ali/ide-monaco-enhance": "1.35.2",
+    "@ali/ide-opened-editor": "1.35.2",
+    "@ali/ide-outline": "1.35.2",
+    "@ali/ide-output": "1.35.2",
+    "@ali/ide-overlay": "1.35.2",
+    "@ali/ide-preferences": "1.35.2",
+    "@ali/ide-quick-open": "1.35.2",
+    "@ali/ide-scm": "1.35.2",
+    "@ali/ide-static-resource": "1.35.2",
+    "@ali/ide-status-bar": "1.35.2",
+    "@ali/ide-storage": "1.35.2",
+    "@ali/ide-theme": "1.35.2",
+    "@ali/ide-webview": "1.35.2",
+    "@ali/ide-workspace": "1.35.2",
+    "@ali/ide-workspace-edit": "1.35.2",
     "@ali/kaitian-textmate-languages": "^2.2.0",
     "@alipay/alex-cli": "0.7.2",
     "@alipay/alex-code-api": "0.7.2",

packages/alex/src/api/createApp.tsx

@@ -15,8 +15,8 @@ import { isMonacoLoaded, loadMonaco } from '@ali/ide-monaco/lib/browser/monaco-l
 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 { 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';
@@ -105,7 +105,7 @@ export function createApp({ appConfig, runtimeConfig }: IConfig): IAppInstance {
       themeStorage.set(e.type);
     });
     // IDE 销毁时，组件会触发 handleTreeBlur，但是 FileContextKey 实例尚未初始化，此时在 dispose 阶段，injector.get(FileContextKey) 会抛出错误
-    // app.injector.get(FileTreeModelService).handleTreeBlur();
+    app.injector.get(FileTreeModelService).handleTreeBlur();
 
     setTimeout(() => {
       logPv(runtimeConfig.biz);
@@ -138,9 +138,9 @@ export function createApp({ appConfig, runtimeConfig }: IConfig): IAppInstance {
     (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.get(WorkerExtensionService)?.protocol?._locals?.forEach((instance) => {
+      instance.dispose?.();
+    });
     app.injector.disposeAll();
   };
 

packages/alex/src/api/createEditor.tsx

@@ -0,0 +1,136 @@
+import '@ali/ide-i18n/lib/browser';
+import '@alipay/alex-i18n';
+import {
+  ClientApp,
+  RuntimeConfig,
+  makeWorkspaceDir,
+  IAppOpts,
+  STORAGE_DIR,
+} from '@alipay/alex-core';
+import { SlotRenderer, SlotLocation, IAppRenderer, FILES_DEFAULTS } from '@ali/ide-core-browser';
+import { BoxPanel, SplitPanel } from '@ali/ide-core-browser/lib/components';
+import { IThemeService } from '@ali/ide-theme/lib/common';
+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 * as os from 'os';
+
+import '../core/editor/style.module.less';
+import { modules } from '../core/editor/modules';
+import { mergeConfig, themeStorage } from '../core/utils';
+import { EditorLayoutComponent, getEditorLayoutConfig } from '../core/layout';
+import { IConfig, IAppInstance } from './types';
+import { logPv } from '../core/tracert';
+
+export { SlotLocation, SlotRenderer, BoxPanel, SplitPanel };
+
+const getDefaultAppConfig = (): IAppOpts => ({
+  modules,
+  useCdnIcon: true,
+  noExtHost: true,
+  defaultPreferences: {
+    'general.theme': 'ide-light',
+    'application.confirmExit': 'never',
+    'editor.autoSave': 'afterDelay',
+    'editor.autoSaveDelay': 1000, // one second
+    'files.exclude': {
+      ...FILES_DEFAULTS.filesExclude,
+      // browserfs OverlayFS 用来记录删除的文件
+      '**/.deletedFiles.log': true,
+    },
+  },
+  layoutConfig: getEditorLayoutConfig(),
+  layoutComponent: EditorLayoutComponent,
+  logDir: `${os.homedir()}/${STORAGE_DIR}/logs/`,
+  preferenceDirName: STORAGE_DIR,
+  storageDirName: STORAGE_DIR,
+  extensionStorageDirName: STORAGE_DIR,
+  appName: 'ALEX',
+  allowSetDocumentTitleFollowWorkspaceDir: false,
+});
+
+// 提前加载 monaco 并提前缓存 codeEditorService
+loadMonaco();
+let codeEditorService: any = null;
+isMonacoLoaded()?.then(() => {
+  codeEditorService = (monaco as any).services.StaticServices.codeEditorService;
+});
+
+export function createEditor({ appConfig, runtimeConfig }: IConfig): IAppInstance {
+  const customConfig = typeof appConfig === 'function' ? appConfig() : appConfig;
+  const opts = mergeConfig(getDefaultAppConfig(), customConfig);
+
+  if (!opts.workspaceDir) {
+    throw new Error(
+      '需工作空间目录，最好确保不同项目名称不同，如 group/repository 的形式，工作空间目录会挂载到 /workspace 目录下'
+    );
+  }
+  opts.workspaceDir = makeWorkspaceDir(opts.workspaceDir);
+
+  let themeType = themeStorage.get();
+  if (!themeType) {
+    const defaultTheme = opts.defaultPreferences?.['general.theme'];
+    opts.extensionMetadata?.find((item) => {
+      const themeConfig = item.packageJSON.contributes?.themes?.find(
+        (item: any) => item.id === defaultTheme
+      );
+      if (themeConfig) {
+        themeType = !themeConfig.uiTheme || themeConfig.uiTheme === 'vs-dark' ? 'dark' : 'light';
+        themeStorage.set(themeType);
+      }
+    });
+  }
+
+  const app = new ClientApp(opts) as IAppInstance;
+
+  const _start = app.start;
+  app.start = async (container: HTMLElement | IAppRenderer) => {
+    await _start.call(app, container);
+    // 在 start 不能 injector.get，否则有的 service 立即初始化，此时 file-system 还没有初始化完成
+    (app.injector.get(IThemeService) as IThemeService).onThemeChange((e) => {
+      themeStorage.set(e.type);
+    });
+    setTimeout(() => {
+      logPv(runtimeConfig.biz);
+    });
+  };
+
+  /**
+   * 目前整个应用有太多的副作用，尤其是注册到 monaco 的事件，如 DocumentSymbolProviderRegistry.onChange
+   * 在 monaco 上的事件无法注销，除非重新全局实例化一个 monaco，目前 kaitian 并未暴露，暂时不可行
+   * 因此这里的 destroy 仍然可能有不少副作用无法清除，暂时清理已知的，避免报错
+   */
+  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;
+    }
+    (monaco as any).services.StaticServices.modeService._value = null;
+    app.injector.disposeAll();
+  };
+
+  // 基于场景的运行时数据
+  app.injector.addProviders({
+    token: RuntimeConfig,
+    useValue: runtimeConfig,
+  });
+
+  (window as any)[RuntimeConfig] = runtimeConfig;
+
+  return app;
+}

packages/alex/src/api/renderEditor.tsx

@@ -0,0 +1,110 @@
+import React, { useState, useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { IReporterService, localize, getDebugLogger } from '@ali/ide-core-common';
+import { REPORT_NAME } from '@alipay/alex-core';
+import { createEditor } from './createEditor';
+import { Root } from '../core/Root';
+import { RootProps, LandingProps } from '../core/types';
+import { themeStorage } from '../core/utils';
+import { useConstant } from '../core/hooks';
+import { IConfig, IAppInstance } from './types';
+import { EditorProps } from '../core/editor/types';
+import { Container } from '../core/editor/container';
+
+interface IRenderProps extends IConfig {
+  onLoad?(app: IAppInstance): void;
+  Landing?: React.ComponentType<LandingProps>;
+}
+
+export type IEditorRenderProps = IRenderProps & EditorProps;
+
+export const renderEditor = (domElement: HTMLElement, props: IEditorRenderProps) => {
+  const { onLoad, Landing, ...opts } = props;
+  const app = createEditor(opts);
+  const themeType = themeStorage.get();
+  ReactDOM.render(<Root status="loading" theme={themeType} Landing={Landing} />, domElement);
+
+  app
+    .start((appElement) => {
+      return new Promise((resolve) => {
+        ReactDOM.render(
+          <Root status="success" theme={themeType}>
+            {appElement}
+          </Root>,
+          domElement,
+          resolve
+        );
+      });
+    })
+    .then(() => {
+      onLoad?.(app);
+    })
+    .catch((err: Error) => {
+      ReactDOM.render(
+        <Root status="error" error={err?.message || localize('error.unknown')} theme={themeType} />,
+        domElement
+      );
+
+      (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();
+  };
+};
+
+export const EditorRenderer: React.FC<IEditorRenderProps> = ({ onLoad, Landing, ...opts }) => {
+  const app = useConstant(() => createEditor(opts));
+  const themeType = useConstant(() => themeStorage.get());
+  const appElementRef = useRef<React.ReactElement | null>(null);
+
+  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();
+    };
+  }, []);
+
+  return (
+    <Container value={{ documentModel: opts.documentModel }}>
+      <Root {...state} theme={themeType} Landing={Landing}>
+        {appElementRef.current}
+      </Root>
+    </Container>
+  );
+};