Grafana-UI: Type onEditorDidMount (grafana#33178)

kevisong · Apr 21, 2021 · 0463164 · 0463164
1 parent 0dcd028
commit 0463164
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/packages/grafana-ui/src/components/Monaco/types.ts b/packages/grafana-ui/src/components/Monaco/types.ts
@@ -1,8 +1,11 @@
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+// We use `import type` to guarentee it'll be erased from the JS and it doesnt accidently bundle monaco
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
 export type CodeEditorChangeHandler = (value: string) => void;
 export type CodeEditorSuggestionProvider = () => CodeEditorSuggestionItem[];
 
+export type MonacoEditor = monaco.editor.IStandaloneCodeEditor;
+
 export interface CodeEditorProps {
   value: string;
   language: string;
@@ -17,9 +20,9 @@ export interface CodeEditorProps {
   /**
    * Callback after the editor has mounted that gives you raw access to monaco
    *
-   * @alpha -- experimental - real type is: monaco.editor.IStandaloneCodeEditor
+   * @alpha -- experimental
    */
-  onEditorDidMount?: (editor: any) => void;
+  onEditorDidMount?: (editor: monaco.editor.IStandaloneCodeEditor) => void;
 
   /** Handler to be performed when editor is blurred */
   onBlur?: CodeEditorChangeHandler;

diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
@@ -38,7 +38,7 @@ export { QueryField } from './QueryField/QueryField';
 
 // Code editor
 export { CodeEditor } from './Monaco/CodeEditorLazy';
-export { CodeEditorSuggestionItem, CodeEditorSuggestionItemKind } from './Monaco/types';
+export { MonacoEditor, CodeEditorSuggestionItem, CodeEditorSuggestionItemKind } from './Monaco/types';
 export { variableSuggestionToCodeEditorSuggestion } from './Monaco/utils';
 
 // TODO: namespace

diff --git a/public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx b/public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx
@@ -8,6 +8,7 @@ import {
   LinkButton,
   Segment,
   CodeEditor,
+  MonacoEditor,
   CodeEditorSuggestionItem,
   CodeEditorSuggestionItemKind,
 } from '@grafana/ui';
@@ -157,7 +158,7 @@ export class FluxQueryEditor extends PureComponent<Props> {
   // For some reason in angular, when this component gets re-mounted, the width
   // is not set properly.  This forces the layout shortly after mount so that it
   // displays OK.  Note: this is not an issue when used directly in react
-  editorDidMountCallbackHack = (editor: any) => {
+  editorDidMountCallbackHack = (editor: MonacoEditor) => {
     setTimeout(() => editor.layout(), 100);
   };