Merge pull request #41 from alauda/feat/language-service

feat: support dynamic import monaco module

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-monaco-editor",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "description": "Angular wrapper for monaco-editor",
   "repository": "git+https://github.com/alauda/ng-monaco-editor.git",
   "author": "Alauda Frontend",
@@ -10,10 +10,10 @@
   ],
   "license": "MIT",
   "scripts": {
-    "build": "yarn clean && ng-packagr",
-    "clean": "rimraf release",
+    "build": "ng-packagr",
     "lint": "tslint -p . -t stylish",
     "prepublishOnly": "yarn build",
+    "start": "yarn storybook",
     "storybook": "start-storybook -p 9001 -s node_modules/monaco-editor/dev",
     "storybook:build": "rimraf demo && build-storybook -s node_modules/monaco-editor/min -o demo"
   },

src/monaco-common-editor.component.ts

@@ -38,8 +38,8 @@ export abstract class MonacoCommonEditorComponent
     OnDestroy,
     DoCheck,
     ControlValueAccessor {
-  private _rootEditor: import('monaco-editor').editor.IEditor;
-  protected model: import('monaco-editor').editor.IModel;
+  private _rootEditor: monaco.editor.IEditor;
+  protected model: monaco.editor.IModel;
   protected _value = '';
   protected _prevOptions: MonacoEditorOptions;
   protected destroyed = false;
@@ -52,7 +52,7 @@ export abstract class MonacoCommonEditorComponent
   protected editor: MonacoEditor;
   private relayoutFunction: ResizeSensorCallback;
   private resizeSensorInstance: ResizeSensor;
-  private disposables: import('monaco-editor').IDisposable[] = [];
+  private disposables: monaco.IDisposable[] = [];
 
   monacoLoaded = false;
 
@@ -197,10 +197,7 @@ export abstract class MonacoCommonEditorComponent
     this.onTouched = fn;
   }
 
-  createModel(
-    value: string,
-    uri?: string,
-  ): import('monaco-editor').editor.ITextModel {
+  createModel(value: string, uri?: string): monaco.editor.ITextModel {
     const { monaco } = this.monacoProvider;
     return monaco.editor.createModel(
       value,

src/monaco-diff-editor.component.ts

@@ -36,7 +36,7 @@ import { ResizeSensorService } from './resize-sensor.service';
 })
 export class MonacoDiffEditorComponent extends MonacoCommonEditorComponent
   implements OnChanges, OnDestroy {
-  protected originalModel: import('monaco-editor').editor.ITextModel;
+  protected originalModel: monaco.editor.ITextModel;
 
   @Input()
   originalValue: string;

src/monaco-editor-config.ts

@@ -1,9 +1,11 @@
+import { Monaco } from './typing';
+
 /**
  * All common option fields for monaco are merged together for ease of config.
  */
-export type MonacoEditorOptions = import('monaco-editor').editor.IStandaloneEditorConstructionOptions;
+export type MonacoEditorOptions = monaco.editor.IStandaloneEditorConstructionOptions;
 
-export type MonacoEditor = import('monaco-editor').editor.IStandaloneCodeEditor;
+export type MonacoEditor = monaco.editor.IStandaloneCodeEditor;
 
 /**
  * Configuration over monaco editor.
@@ -16,6 +18,13 @@ export class MonacoEditorConfig {
    */
   baseUrl?: string;
 
+  /**
+   * Use webpack dynamic import function to load monaco assets.
+   *
+   * e.g., () => import('monaco-editor/esm/vs/editor/editor.api')
+   */
+  dynamicImport?: () => Promise<typeof import('monaco-editor')>;
+
   /**
    * Default options when creating editors
    */

src/monaco-provider.service.ts

@@ -5,6 +5,7 @@ import {
   MonacoEditorConfig,
   MonacoEditorOptions,
 } from './monaco-editor-config';
+import { Monaco } from './typing';
 
 /**
  * Provider for monaco editor.
@@ -15,15 +16,21 @@ export class MonacoProviderService {
 
   private _theme = this.themes[0];
 
-  private _loadingPromise: Promise<void>;
+  private _loadingPromise: Promise<Monaco>;
 
   async initMonaco() {
     return this._loadingPromise || (this._loadingPromise = this.loadMonaco());
   }
 
-  private async loadMonaco() {
-    await this.configRequireJs();
-    await this.loadModule(['vs/editor/editor.main']);
+  private async loadMonaco(): Promise<Monaco> {
+    if (this.monacoEditorConfig.dynamicImport) {
+      return this.monacoEditorConfig.dynamicImport() as Promise<Monaco>;
+    } else if (this.monacoEditorConfig.baseUrl !== undefined) {
+      await this.configRequireJs();
+      return this.loadModule(['vs/editor/editor.main']);
+    } else {
+      return Promise.resolve(window.monaco);
+    }
   }
 
   /**
@@ -52,8 +59,8 @@ export class MonacoProviderService {
   /**
    * Expose global monaco object
    */
-  get monaco(): typeof import('monaco-editor') {
-    return (window as any).monaco;
+  get monaco() {
+    return window.monaco;
   }
 
   /**
@@ -66,7 +73,7 @@ export class MonacoProviderService {
   /**
    * Load additional monaco-editor modules.
    */
-  loadModule(deps: string[]) {
+  loadModule(deps: string[]): Promise<Monaco> {
     return new Promise(res => this.require(deps, res));
   }
 
@@ -101,8 +108,8 @@ export class MonacoProviderService {
 
   createDiffEditor(
     domElement: HTMLElement,
-    options?: import('monaco-editor').editor.IDiffEditorConstructionOptions,
-  ): import('monaco-editor').editor.IStandaloneDiffEditor {
+    options?: monaco.editor.IDiffEditorConstructionOptions,
+  ): monaco.editor.IStandaloneDiffEditor {
     if (!this.monaco) {
       return;
     }
@@ -122,7 +129,7 @@ export class MonacoProviderService {
    */
   colorizeElement(
     domElement: HTMLElement,
-    options?: import('monaco-editor').editor.IColorizerElementOptions,
+    options?: monaco.editor.IColorizerElementOptions,
   ) {
     if (!this.monaco) {
       return;
@@ -139,7 +146,7 @@ export class MonacoProviderService {
    */
   getLanguageExtensionPoint(
     alias: string,
-  ): import('monaco-editor').languages.ILanguageExtensionPoint {
+  ): monaco.languages.ILanguageExtensionPoint {
     if (!this.monaco) {
       return;
     }
@@ -170,7 +177,7 @@ export class MonacoProviderService {
       };
 
       const onAmdLoaderError = (error: ErrorEvent) => {
-        console.error('failed to load monaco', error);
+        console.error('Failed to load monaco', error);
         reject(error);
       };
 

src/public-api.ts

@@ -1,3 +1,6 @@
+/// <reference path="../node_modules/monaco-editor/monaco.d.ts" />
+
+export * from './typing';
 export * from './monaco-editor.component';
 export * from './monaco-diff-editor.component';
 export * from './monaco-common-editor.component';

src/resize-sensor.service.ts

@@ -1,8 +1,5 @@
 import { Injectable } from '@angular/core';
-// TODO: extract it as native ES module
-import ResizeSensor, {
-  ResizeSensorCallback,
-} from 'css-element-queries/src/ResizeSensor'; // for smaller bundle size
+import { ResizeSensor, ResizeSensorCallback } from 'css-element-queries';
 
 @Injectable()
 export class ResizeSensorService {

src/typing.ts

@@ -0,0 +1 @@
+export type Monaco = typeof monaco;

tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "target": "es2015",
-    "module": "es2015",
+    "module": "es2020",
     "moduleResolution": "node",
     "declaration": true,
     "inlineSourceMap": true,
@@ -15,8 +15,5 @@
     "lib": ["dom", "es2018"],
     "allowSyntheticDefaultImports": true
   },
-  "exclude": ["release", "dist", "node_modules"],
-  "angularCompilerOptions": {
-    "disableTypeScriptVersionCheck": true
-  }
+  "exclude": ["release", "dist"]
 }