fix: initView and load extensions after workbench be ready (#853)

* fix: only alow to create monacoInstance once

* fix: initView and load extensions after workbench be ready

Author: wewoor

src/components/monaco/index.tsx

@@ -44,12 +44,14 @@ export class MonacoEditor extends PureComponent<IMonacoEditorProps> {
 
     componentDidMount() {
         const { options = {}, override, editorInstanceRef } = this.props;
-        this.monacoInstance = this.monacoService?.create(
-            this.monacoDom,
-            options,
-            override
-        );
-        editorInstanceRef?.(this.monacoInstance);
+        if (!this.monacoInstance) {
+            this.monacoInstance = this.monacoService?.create(
+                this.monacoDom,
+                options,
+                override
+            );
+            editorInstanceRef?.(this.monacoInstance);
+        }
     }
 
     componentDidUpdate(prevProps) {

src/provider/__tests__/__snapshots__/molecule.test.tsx.snap

@@ -1058,16 +1058,7 @@ dmlldzJfOV8xNjM4ODQ4MDI1NDI2MTE4Ml8zOF9bMF0TNSl1AAAAAElFTkSuQmCC"
                     <div
                       class="keybindings"
                     >
-                      <ul>
-                        <li
-                          class="keys"
-                        >
-                          <span>
-                            Command Palette
-                          </span>
-                          <span />
-                        </li>
-                      </ul>
+                      <ul />
                     </div>
                   </div>
                 </div>

src/services/__tests__/instanceService.test.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { defaultExtensions } from 'mo/extensions';
 import InstanceService from '../instanceService';
 import { render } from '@testing-library/react';
+import { LayoutEvents } from 'mo/model/workbench/layout';
+import molecule from 'mo';
 
 describe('The InstanceService', () => {
     test('Constuctor with default config', () => {
@@ -39,6 +41,7 @@ describe('The InstanceService', () => {
         const mockFn = jest.fn();
         instance.onBeforeInit(mockFn);
         instance.onBeforeLoad(mockFn);
+        molecule.layout.emit(LayoutEvents.OnWorkbenchDidMount);
         instance.render(<div>123</div>);
 
         expect(mockFn).toBeCalledTimes(2);

src/services/instanceService.tsx

@@ -112,22 +112,26 @@ export default class InstanceService
                 StatusBarController,
             ];
 
-            // resolve all controllers, and call `initView` to inject initial values into services
-            Object.keys(controllers).forEach((key) => {
-                const module = controllers[key];
-                const controller = container.resolve<Controller>(module);
-                controller.initView?.();
-            });
-
-            this.emit(InstanceHookKind.beforeLoad);
-            molecule.extension.load(others);
-
             molecule.layout.onWorkbenchDidMount(() => {
-                molecule.monacoService.initWorkspace(
-                    molecule.layout.container!
-                );
+                if (!this.rendered) {
+                    molecule.monacoService.initWorkspace(
+                        molecule.layout.container!
+                    );
+
+                    // resolve all controllers, and call `initView` to inject initial values into services
+                    Object.keys(controllers).forEach((key) => {
+                        const module = controllers[key];
+                        const controller =
+                            container.resolve<Controller>(module);
+                        controller.initView?.();
+                    });
+
+                    this.emit(InstanceHookKind.beforeLoad);
+                    molecule.extension.load(others);
+
+                    this.rendered = true;
+                }
             });
-            this.rendered = true;
         }
 
         return workbench;