feat: monaco单例化

wangshihao111 · wangshihao111 · commit 58231ea663cd · 2022-06-09T15:41:20.000+08:00
diff --git a/packages/base-monaco-editor/src/helper.ts b/packages/base-monaco-editor/src/helper.ts
@@ -1,12 +1,7 @@
 /* eslint-disable no-empty */
 import { useEffect, useState, useRef, CSSProperties } from 'react';
 import loader from '@monaco-editor/loader';
-
-loader.config({
-  paths: {
-    vs: 'https://g.alicdn.com/code/lib/monaco-editor/0.31.1/min/vs',
-  },
-});
+import { getMonaco } from './monaco';
 
 type IAmbigousFn = (...args: any[]) => any;
 
@@ -52,7 +47,7 @@ export interface IMonacoInstance {
   [otherKeys: string]: any;
 }
 
-type ICodeEditorViewState = {
+interface ICodeEditorViewState {
   contributionsState: any;
   cursorState: any;
   viewState: any;
@@ -154,7 +149,7 @@ export const useEditor = (type: 'single' | 'diff', props: IGeneralManacoEditorPr
   const editorWillMountRef = useRef<ISingleMonacoEditorProps['editorWillMount']>();
 
   const decomposeRef = useRef(false);
-  const viewStatusRef = useRef<Map<any, ICodeEditorViewState>>(new Map())
+  const viewStatusRef = useRef<Map<any, ICodeEditorViewState>>(new Map());
 
   useEffect(() => {
     editorDidMountRef.current = editorDidMount;
@@ -185,7 +180,7 @@ export const useEditor = (type: 'single' | 'diff', props: IGeneralManacoEditorPr
       loader.config(requireConfigRef.current);
     }
 
-    loader.init()
+    getMonaco(requireConfigRef.current)
       .then((monaco: any) => {
         // 兼容旧版本 monaco-editor 写死 MonacoEnvironment 的问题
         (window as any).MonacoEnvironment = undefined;
@@ -209,7 +204,7 @@ export const useEditor = (type: 'single' | 'diff', props: IGeneralManacoEditorPr
             monaco,
             valueRef.current ?? defaultValueRef.current ?? '',
             languageRef.current,
-            pathRef.current
+            pathRef.current,
           );
           editor = monaco.editor.create(containerRef.current, {
             automaticLayout: true,
@@ -268,7 +263,7 @@ export const useEditor = (type: 'single' | 'diff', props: IGeneralManacoEditorPr
       ? editorRef.current.getModifiedEditor()
       : editorRef.current;
 
-    const nextValue = value ?? defaultValueRef.current ?? ''
+    const nextValue = value ?? defaultValueRef.current ?? '';
     if (editor?.getOption?.(monacoRef.current?.editor.EditorOption.readOnly)) {
       editor?.setValue(nextValue);
     } else if (value !== editor?.getValue()) {
@@ -330,7 +325,7 @@ export const useEditor = (type: 'single' | 'diff', props: IGeneralManacoEditorPr
     if (valueRef.current !== null && valueRef.current !== undefined && model.getValue() !== valueRef.current) {
       model.setValue(valueRef.current);
     }
-    
+
     if (model !== editorRef.current.getModel()) {
       saveViewState && viewStatusRef.current.set(previousPath, editorRef.current.saveViewState());
       editorRef.current.setModel(model);
@@ -365,9 +360,9 @@ function getOrCreateModel(monaco: IMonacoInstance, value?: string, language?: st
 }
 
 function usePrevious<T>(value: T) {
-  const ref = useRef<T>()
+  const ref = useRef<T>();
   useEffect(() => {
-    ref.current = value
-  }, [value])
-  return ref.current
+    ref.current = value;
+  }, [value]);
+  return ref.current;
 }
diff --git a/packages/base-monaco-editor/src/index.tsx b/packages/base-monaco-editor/src/index.tsx
@@ -9,6 +9,8 @@ import {
   INITIAL_OPTIONS,
 } from './helper';
 
+export * from './monaco';
+
 const SingleMonacoEditor = (props: ISingleMonacoEditorProps) => {
   const { onChange, enableOutline, width, height, language, supportFullScreen } = props;
   const onChangeRef = useRef(onChange);
diff --git a/packages/base-monaco-editor/src/monaco.ts b/packages/base-monaco-editor/src/monaco.ts
@@ -0,0 +1,65 @@
+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];
+
+export const getSingletonMonaco = (() => {
+  let monaco: Monaco;
+  let prevOptions: any;
+  return async (options?: any) => {
+    if (!monaco || !isEqual(prevOptions, options)) {
+      const hasConfig = Object.keys(options || {}).length > 0;
+      loader.config(
+        hasConfig
+          ? options
+          : {
+              paths: {
+                vs: 'https://g.alicdn.com/code/lib/monaco-editor/0.33.0/min/vs',
+              },
+            },
+      );
+      // eslint-disable-next-line require-atomic-updates
+      monaco = await loader.init();
+      // eslint-disable-next-line require-atomic-updates
+      prevOptions = options;
+    }
+    return monaco;
+  };
+})();
+
+export const getCommonMonaco = (config: any): Promise<Monaco> => {
+  if (config) {
+    loader.config(config);
+  } else {
+    loader.config({
+      paths: {
+        vs: 'https://g.alicdn.com/code/lib/monaco-editor/0.31.1/min/vs',
+      },
+    });
+  }
+  return loader.init();
+};
+
+export function getMonaco(config: any) {
+  const hasConfig = Object.keys(config || {}).length > 0;
+  const monacoConfig = hasConfig ? config : undefined;
+  return configuration.singleton
+    ? getSingletonMonaco(monacoConfig)
+    : getCommonMonaco(monacoConfig);
+}
+
+export function configure(conf: Configure) {
+  Object.assign(configuration, conf || {});
+}
