add monaco to kbn/ui-shared-deps and load required features for all uses (#58075)

* add monaco to kbn/ui-shared-deps and load required features for all uses

* forgot to save a change

* remove unused imports

* include a cache buster to counteract issue #58077

* include monaco.ts in ts project

Author: Spencer

packages/kbn-optimizer/src/index.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+// cache buster - https://github.com/elastic/kibana/issues/58077 - 1
 export { OptimizerConfig } from './optimizer';
 export * from './run_optimizer';
 export * from './log_optimizer_state';

packages/kbn-ui-shared-deps/entry.js

@@ -40,6 +40,8 @@ export const ReactDom = require('react-dom');
 export const ReactIntl = require('react-intl');
 export const ReactRouter = require('react-router'); // eslint-disable-line
 export const ReactRouterDom = require('react-router-dom');
+export const Monaco = require('./monaco.ts');
+export const MonacoBare = require('monaco-editor/esm/vs/editor/editor.api');
 
 // load timezone data into moment-timezone
 Moment.tz.load(require('moment-timezone/data/packed/latest.json'));

packages/kbn-ui-shared-deps/index.js

@@ -41,4 +41,7 @@ exports.externals = {
   'react-intl': '__kbnSharedDeps__.ReactIntl',
   'react-router': '__kbnSharedDeps__.ReactRouter',
   'react-router-dom': '__kbnSharedDeps__.ReactRouterDom',
+  '@kbn/ui-shared-deps/monaco': '__kbnSharedDeps__.Monaco',
+  // this is how plugins/consumers from npm load monaco
+  'monaco-editor/esm/vs/editor/editor.api': '__kbnSharedDeps__.MonacoBare',
 };

packages/kbn-ui-shared-deps/monaco.ts

@@ -0,0 +1,32 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
+import 'monaco-editor/esm/vs/base/common/worker/simpleWorker';
+import 'monaco-editor/esm/vs/base/worker/defaultWorkerFactory';
+
+import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';
+import 'monaco-editor/esm/vs/editor/browser/widget/codeEditorWidget.js';
+
+import 'monaco-editor/esm/vs/editor/contrib/suggest/suggestController.js'; // Needed for suggestions
+import 'monaco-editor/esm/vs/editor/contrib/hover/hover.js'; // Needed for hover
+import 'monaco-editor/esm/vs/editor/contrib/parameterHints/parameterHints.js'; // Needed for signature
+
+export { monaco };

packages/kbn-ui-shared-deps/package.json

@@ -12,6 +12,7 @@
     "@elastic/charts": "^17.0.2",
     "abortcontroller-polyfill": "^1.4.0",
     "@elastic/eui": "19.0.0",
+    "@kbn/babel-preset": "1.0.0",
     "@kbn/dev-utils": "1.0.0",
     "@kbn/i18n": "1.0.0",
     "@yarnpkg/lockfile": "^1.1.0",

packages/kbn-ui-shared-deps/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "include": [
-    "index.d.ts"
+    "index.d.ts",
+    "monaco.ts"
   ]
 }

packages/kbn-ui-shared-deps/webpack.config.js

@@ -59,6 +59,17 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({
         test: /\.css$/,
         use: [MiniCssExtractPlugin.loader, 'css-loader'],
       },
+      {
+        include: [require.resolve('./monaco.ts')],
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
+            },
+          },
+        ],
+      },
     ],
   },
 

src/legacy/core_plugins/vis_type_timelion/public/components/timelion_expression_input.tsx

@@ -20,7 +20,7 @@
 import React, { useEffect, useCallback, useRef, useMemo } from 'react';
 import { EuiFormLabel } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
+import { monaco } from '@kbn/ui-shared-deps/monaco';
 
 import { CodeEditor, useKibana } from '../../../../../plugins/kibana_react/public';
 import { suggest, getSuggestion } from './timelion_expression_input_helpers';
@@ -31,7 +31,7 @@ import {
 } from '../../../../../plugins/timelion/common/types';
 
 const LANGUAGE_ID = 'timelion_expression';
-monacoEditor.languages.register({ id: LANGUAGE_ID });
+monaco.languages.register({ id: LANGUAGE_ID });
 
 interface TimelionExpressionInputProps {
   value: string;
@@ -44,10 +44,10 @@ function TimelionExpressionInput({ value, setValue }: TimelionExpressionInputPro
   const argValueSuggestions = useMemo(getArgValueSuggestions, []);
 
   const provideCompletionItems = useCallback(
-    async (model: monacoEditor.editor.ITextModel, position: monacoEditor.Position) => {
+    async (model: monaco.editor.ITextModel, position: monaco.Position) => {
       const text = model.getValue();
       const wordUntil = model.getWordUntilPosition(position);
-      const wordRange = new monacoEditor.Range(
+      const wordRange = new monaco.Range(
         position.lineNumber,
         wordUntil.startColumn,
         position.lineNumber,
@@ -75,7 +75,7 @@ function TimelionExpressionInput({ value, setValue }: TimelionExpressionInputPro
   );
 
   const provideHover = useCallback(
-    async (model: monacoEditor.editor.ITextModel, position: monacoEditor.Position) => {
+    async (model: monaco.editor.ITextModel, position: monaco.Position) => {
       const suggestions = await suggest(
         model.getValue(),
         functionList.current,

src/legacy/core_plugins/vis_type_timelion/public/components/timelion_expression_input_helpers.ts

@@ -19,7 +19,7 @@
 
 import { get, startsWith } from 'lodash';
 import { i18n } from '@kbn/i18n';
-import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
+import { monaco } from '@kbn/ui-shared-deps/monaco';
 
 import { Parser } from 'pegjs';
 
@@ -215,22 +215,21 @@ export async function suggest(
 export function getSuggestion(
   suggestion: ITimelionFunction | TimelionFunctionArgs,
   type: SUGGESTION_TYPE,
-  range: monacoEditor.Range
-): monacoEditor.languages.CompletionItem {
-  let kind: monacoEditor.languages.CompletionItemKind =
-    monacoEditor.languages.CompletionItemKind.Method;
+  range: monaco.Range
+): monaco.languages.CompletionItem {
+  let kind: monaco.languages.CompletionItemKind = monaco.languages.CompletionItemKind.Method;
   let insertText: string = suggestion.name;
-  let insertTextRules: monacoEditor.languages.CompletionItem['insertTextRules'];
+  let insertTextRules: monaco.languages.CompletionItem['insertTextRules'];
   let detail: string = '';
-  let command: monacoEditor.languages.CompletionItem['command'];
+  let command: monaco.languages.CompletionItem['command'];
 
   switch (type) {
     case SUGGESTION_TYPE.ARGUMENTS:
       command = {
         title: 'Trigger Suggestion Dialog',
         id: 'editor.action.triggerSuggest',
       };
-      kind = monacoEditor.languages.CompletionItemKind.Property;
+      kind = monaco.languages.CompletionItemKind.Property;
       insertText = `${insertText}=`;
       detail = `${i18n.translate(
         'timelion.expressionSuggestions.argument.description.acceptsText',
@@ -245,9 +244,9 @@ export function getSuggestion(
         title: 'Trigger Suggestion Dialog',
         id: 'editor.action.triggerSuggest',
       };
-      kind = monacoEditor.languages.CompletionItemKind.Function;
+      kind = monaco.languages.CompletionItemKind.Function;
       insertText = `${insertText}($0)`;
-      insertTextRules = monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet;
+      insertTextRules = monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet;
       detail = `(${
         (suggestion as ITimelionFunction).chainable
           ? i18n.translate('timelion.expressionSuggestions.func.description.chainableHelpText', {
@@ -270,7 +269,7 @@ export function getSuggestion(
         title: 'Trigger Suggestion Dialog',
         id: 'editor.action.triggerSuggest',
       };
-      kind = monacoEditor.languages.CompletionItemKind.Property;
+      kind = monaco.languages.CompletionItemKind.Property;
       detail = suggestion.help || '';
 
       break;

src/plugins/kibana_react/public/code_editor/code_editor.test.tsx

@@ -19,13 +19,13 @@
 
 import React from 'react';
 import { CodeEditor } from './code_editor';
-import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
+import { monaco } from '@kbn/ui-shared-deps/monaco';
 import { shallow } from 'enzyme';
 
 import 'monaco-editor/esm/vs/basic-languages/html/html.contribution.js';
 
 // A sample language definition with a few example tokens
-const simpleLogLang: monacoEditor.languages.IMonarchLanguage = {
+const simpleLogLang: monaco.languages.IMonarchLanguage = {
   tokenizer: {
     root: [
       [/\[error.*/, 'constant'],
@@ -36,8 +36,8 @@ const simpleLogLang: monacoEditor.languages.IMonarchLanguage = {
   },
 };
 
-monacoEditor.languages.register({ id: 'loglang' });
-monacoEditor.languages.setMonarchTokensProvider('loglang', simpleLogLang);
+monaco.languages.register({ id: 'loglang' });
+monaco.languages.setMonarchTokensProvider('loglang', simpleLogLang);
 
 const logs = `
 [Sun Mar 7 20:54:27 2004] [notice] [client xx.xx.xx.xx] This is a notice!
@@ -55,35 +55,34 @@ test('is rendered', () => {
 
 test('editor mount setup', () => {
   const suggestionProvider = {
-    provideCompletionItems: (
-      model: monacoEditor.editor.ITextModel,
-      position: monacoEditor.Position
-    ) => ({ suggestions: [] }),
+    provideCompletionItems: (model: monaco.editor.ITextModel, position: monaco.Position) => ({
+      suggestions: [],
+    }),
   };
   const signatureProvider = {
     provideSignatureHelp: () => ({ signatures: [], activeParameter: 0, activeSignature: 0 }),
   };
   const hoverProvider = {
-    provideHover: (model: monacoEditor.editor.ITextModel, position: monacoEditor.Position) => ({
+    provideHover: (model: monaco.editor.ITextModel, position: monaco.Position) => ({
       contents: [],
     }),
   };
 
   const editorWillMount = jest.fn();
 
-  monacoEditor.languages.onLanguage = jest.fn((languageId, func) => {
+  monaco.languages.onLanguage = jest.fn((languageId, func) => {
     expect(languageId).toBe('loglang');
 
     // Call the function immediately so we can see our providers
     // get setup without a monaco editor setting up completely
     func();
   }) as any;
 
-  monacoEditor.languages.registerCompletionItemProvider = jest.fn();
-  monacoEditor.languages.registerSignatureHelpProvider = jest.fn();
-  monacoEditor.languages.registerHoverProvider = jest.fn();
+  monaco.languages.registerCompletionItemProvider = jest.fn();
+  monaco.languages.registerSignatureHelpProvider = jest.fn();
+  monaco.languages.registerHoverProvider = jest.fn();
 
-  monacoEditor.editor.defineTheme = jest.fn();
+  monaco.editor.defineTheme = jest.fn();
 
   const wrapper = shallow(
     <CodeEditor
@@ -98,21 +97,17 @@ test('editor mount setup', () => {
   );
 
   const instance = wrapper.instance() as CodeEditor;
-  instance._editorWillMount(monacoEditor);
+  instance._editorWillMount(monaco);
 
   // Verify our mount callback will be called
   expect(editorWillMount.mock.calls.length).toBe(1);
 
   // Verify our theme will be setup
-  expect((monacoEditor.editor.defineTheme as jest.Mock).mock.calls.length).toBe(1);
+  expect((monaco.editor.defineTheme as jest.Mock).mock.calls.length).toBe(1);
 
   // Verify our language features have been registered
-  expect((monacoEditor.languages.onLanguage as jest.Mock).mock.calls.length).toBe(1);
-  expect(
-    (monacoEditor.languages.registerCompletionItemProvider as jest.Mock).mock.calls.length
-  ).toBe(1);
-  expect(
-    (monacoEditor.languages.registerSignatureHelpProvider as jest.Mock).mock.calls.length
-  ).toBe(1);
-  expect((monacoEditor.languages.registerHoverProvider as jest.Mock).mock.calls.length).toBe(1);
+  expect((monaco.languages.onLanguage as jest.Mock).mock.calls.length).toBe(1);
+  expect((monaco.languages.registerCompletionItemProvider as jest.Mock).mock.calls.length).toBe(1);
+  expect((monaco.languages.registerSignatureHelpProvider as jest.Mock).mock.calls.length).toBe(1);
+  expect((monaco.languages.registerHoverProvider as jest.Mock).mock.calls.length).toBe(1);
 });