Merge pull request alibaba#16 from wangshihao111/feature-singleton

alvarto · web-flow · commit 877f0aa42b44 · 2022-06-09T19:59:30.000+08:00
feat: 单例优化
diff --git a/packages/base-monaco-editor/CHANGELOG.md b/packages/base-monaco-editor/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 1.1.0-beta.1
+
+- 添加 controller 实例，可用作中间交换介质，解决与代码编辑相关的插件间的协作问题 [@wangshihao111](https://github.com/wangshihao111)
+- 优化 Monaco 单例，元信息保存在 controller 实例内部 [@wangshihao111](https://github.com/wangshihao111)
+
 ## 1.1.0-beta.0
 
 - 重构 type / path / value 联动，彻底修复 monaco 在多文件模式下覆盖多个 path 值的 bug
diff --git a/packages/base-monaco-editor/README.md b/packages/base-monaco-editor/README.md
@@ -125,6 +125,24 @@ function App() {
 ReactDOM.render(<App />, mountNode);
 ```
 
+### Using controller
+
+```ts
+import { controller } from '@alilc/lowcode-plugin-base-monaco-editor';
+
+// configure Monaco to be singleton
+controller.updateMeta({ singleton: true });
+
+// Get all metadata
+controller.getMeta();
+
+// register a custom method
+controller.registerMethod('methodName', (a, b, c) => { });
+
+// call custom methods
+const ret = controller.call('methodName', a, b, c);
+```
+
 ## Citation
 
 This is forked from [monaco-react](https://github.com/suren-atoyan/monaco-react). Thanks for [suren-atoyan](https://github.com/suren-atoyan)'s effort for making monaco editor appoachable.
diff --git a/packages/base-monaco-editor/src/controller.ts b/packages/base-monaco-editor/src/controller.ts
@@ -0,0 +1,39 @@
+export interface EditorMeta {
+  singleton: boolean;
+  [key: string]: any;
+}
+
+export class Controller {
+  private methodMap: Record<string, Function>;
+  private meta: EditorMeta;
+
+  constructor() {
+    this.methodMap = {};
+    this.meta = { singleton: false };
+  }
+
+  registerMethod(name: string, fn: Function) {
+    this.methodMap[name] = fn;
+  }
+
+  call(name: string, ...args: any[]) {
+    return this.methodMap[name]?.(...args);
+  }
+
+  updateMeta(obj: Partial<EditorMeta>) {
+    Object.assign(this.meta, obj);
+  }
+
+  getMeta() {
+    return Object.freeze({ ...this.meta });
+  }
+}
+
+const CONFIGURE_KEY = '__base_monaco_editor_controller__';
+const fakeWindow: any = window;
+
+if (!fakeWindow[CONFIGURE_KEY]) {
+  fakeWindow[CONFIGURE_KEY] = new Controller();
+}
+
+export const controller: Controller = fakeWindow[CONFIGURE_KEY];
diff --git a/packages/base-monaco-editor/src/index.tsx b/packages/base-monaco-editor/src/index.tsx
@@ -11,6 +11,7 @@ import {
 } from './helper';
 
 export * from './monaco';
+export * from './controller';
 
 const SingleMonacoEditor = (props: ISingleMonacoEditorProps) => {
   const { onChange, enableOutline, width, height, language, supportFullScreen } = props;
diff --git a/packages/base-monaco-editor/src/monaco.ts b/packages/base-monaco-editor/src/monaco.ts
@@ -1,18 +1,7 @@
 import loader, { Monaco } from '@monaco-editor/loader';
+//@ts-ignore
 import isEqual from 'lodash/isEqual';
-
-export interface Configure {
-  singleton?: boolean;
-}
-
-const CONFIGURE_KEY = '__base_monaco_editor_config__';
-const fakeWindow: any = window;
-
-if (!fakeWindow[CONFIGURE_KEY]) {
-  fakeWindow[CONFIGURE_KEY] = {};
-}
-
-export const configuration: Configure = fakeWindow[CONFIGURE_KEY];
+import { controller, EditorMeta } from './controller';
 
 export const getSingletonMonaco = (() => {
   let monaco: Monaco;
@@ -29,7 +18,9 @@ export const getSingletonMonaco = (() => {
               },
             },
       );
+      // eslint-disable-next-line require-atomic-updates
       monaco = await loader.init();
+      // eslint-disable-next-line require-atomic-updates
       prevOptions = options;
     }
     return monaco;
@@ -49,14 +40,14 @@ export const getCommonMonaco = (config: any): Promise<Monaco> => {
   return loader.init();
 };
 
-export function getMonaco(config: any) {
+export function getMonaco(config?: any) {
   const hasConfig = Object.keys(config || {}).length > 0;
   const monacoConfig = hasConfig ? config : undefined;
-  return configuration.singleton
+  return controller.getMeta().singleton
     ? getSingletonMonaco(monacoConfig)
     : getCommonMonaco(monacoConfig);
 }
 
-export function configure(conf: Configure) {
-  Object.assign(configuration, conf || {});
+export function configure(config: EditorMeta) {
+  controller.updateMeta(config);
 }
