[ES UI Shared] Monaco XJSON (#67485)

* First iteration of xjson in monaco

* Throwaway implementation in painless lab - THIS MUST BE REVERTED

* WiP on build process for new kbn-lang package

* new @kbn/langs package and update ui-shared-deps

* Update jest config for new work files

* Update painless lab -- REVERT THIS COMMIT

* Create shared useXJson mode hook

* Final update to using the new shared useXJsonMode hook -- REVERT

* Created @kbn/monaco and share through shared deps

* always access monaco through `@kbn/monaco`

* use path.resolve to create path

* add basic readme

* remove console.log call

* remove typescript support from ui-shared-deps webpack config

* use `@kbn/babel-preset`

* include the monaco styles in the kbn-ui-shared-deps

* sort package.json

* build worker at bootstrap rather than commiting to repo

* only build worker, don't pre-bundle monaco

* fix type check errors

* remove section from readme about committed dist

* keep editor.worker.js postfix

* forgot to save update to import

* license package as apache-2.0

* Added regenerator runtime for worker bundle

* revert changes to painless lab

Co-authored-by: spalger <spalger@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

packages/eslint-config-kibana/.eslintrc.js

@@ -56,6 +56,15 @@ module.exports = {
           from: 'react-router',
           to: 'react-router-dom',
         },
+        {
+          from: '@kbn/ui-shared-deps/monaco',
+          to: '@kbn/monaco',
+        },
+        {
+          from: 'monaco-editor',
+          to: false,
+          disallowedMessage: `Don't import monaco directly, use or add exports to @kbn/monaco`
+        },
       ],
     ],
   },

packages/kbn-monaco/README.md

@@ -0,0 +1,5 @@
+# @kbn/monaco
+
+A customized version of monaco that is automatically configured the way we want it to be when imported as `@kbn/monaco`. Additionally, imports to this package are automatically shared with all plugins using `@kbn/ui-shared-deps`.
+
+Includes custom xjson language support. The `es_ui_shared` plugin has an example of how to use it, in the future we will likely expose helpers from this package to make using it everywhere a little more seamless.

packages/kbn-monaco/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@kbn/monaco",
+  "version": "1.0.0",
+  "private": true,
+  "main": "./target/index.js",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "node ./scripts/build.js",
+    "kbn:bootstrap": "yarn build --dev"
+  },
+  "dependencies": {
+    "regenerator-runtime": "^0.13.3",
+    "monaco-editor": "~0.17.0"
+  },
+  "devDependencies": {
+    "@kbn/babel-preset": "1.0.0",
+    "@kbn/dev-utils": "1.0.0",
+    "babel-loader": "^8.0.6",
+    "css-loader": "^3.4.2",
+    "del": "^5.1.0",
+    "raw-loader": "3.1.0",
+    "supports-color": "^7.0.0",
+    "typescript": "3.7.2",
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10"
+  }
+}

packages/kbn-monaco/scripts/build.js

@@ -0,0 +1,64 @@
+/*
+ * 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.
+ */
+
+const path = require('path');
+const del = require('del');
+const supportsColor = require('supports-color');
+const { run } = require('@kbn/dev-utils');
+
+const TARGET_BUILD_DIR = path.resolve(__dirname, '../target');
+const ROOT_DIR = path.resolve(__dirname, '../');
+const WEBPACK_CONFIG_PATH = path.resolve(ROOT_DIR, 'webpack.config.js');
+
+run(
+  async ({ procRunner, log, flags }) => {
+    log.info('Deleting old output');
+
+    await del(TARGET_BUILD_DIR);
+
+    const cwd = ROOT_DIR;
+    const env = { ...process.env };
+    if (supportsColor.stdout) {
+      env.FORCE_COLOR = 'true';
+    }
+
+    await procRunner.run('worker', {
+      cmd: 'webpack',
+      args: ['--config', WEBPACK_CONFIG_PATH, flags.dev ? '--env.dev' : '--env.prod'],
+      wait: true,
+      env,
+      cwd,
+    });
+
+    await procRunner.run('tsc   ', {
+      cmd: 'tsc',
+      args: [],
+      wait: true,
+      env,
+      cwd,
+    });
+
+    log.success('Complete');
+  },
+  {
+    flags: {
+      boolean: ['dev'],
+    },
+  }
+);

packages/kbn-monaco/src/index.ts

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+export { monaco } from './monaco';
+export { XJsonLang } from './xjson';
+
+/* eslint-disable-next-line @kbn/eslint/module_migration */
+import * as BarePluginApi from 'monaco-editor/esm/vs/editor/editor.api';
+export { BarePluginApi };

packages/kbn-monaco/src/monaco.ts

@@ -17,6 +17,8 @@
  * under the License.
  */
 
+/* eslint-disable @kbn/eslint/module_migration */
+
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
 import 'monaco-editor/esm/vs/base/common/worker/simpleWorker';

packages/kbn-monaco/src/xjson/README.md

@@ -0,0 +1,28 @@
+# README
+
+This folder contains the language definitions for XJSON used by the Monaco editor.
+
+## Summary of contents
+
+Note: All source code.
+
+### ./worker
+
+The worker proxy and worker instantiation code used in both the main thread and the worker thread.
+
+### ./lexer_rules
+
+Contains the Monarch-specific language tokenization rules for XJSON. Each set of rules registers itself against monaco.
+
+### ./constants.ts
+
+Contains the unique language ID.
+
+### ./language
+
+Takes care of global setup steps for the language (like registering it against Monaco) and exports a way to load up
+the grammar parser.
+
+### ./worker_proxy_service
+
+A stateful mechanism for holding a reference to the Monaco-provided proxy getter.

packages/kbn-monaco/src/xjson/constants.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export const ID = 'xjson';

packages/kbn-monaco/src/xjson/grammar.ts

@@ -0,0 +1,213 @@
+/*
+ * 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.
+ */
+
+export enum AnnoTypes {
+  error = 'error',
+  warning = 'warning',
+}
+
+/* eslint-disable */
+
+export const createParser = () => {
+  'use strict';
+  let at: any,
+    annos: any[], // annotations
+    ch: any,
+    text: any,
+    value: any,
+    escapee: any = {
+      '"': '"',
+      '\\': '\\',
+      '/': '/',
+      b: '\b',
+      f: '\f',
+      n: '\n',
+      r: '\r',
+      t: '	',
+    },
+    error = function (m: string) {
+      throw {
+        at: at,
+        text: m,
+        message: m,
+      };
+    },
+    warning = function (m: string, idx: number) {
+      annos.push({
+        type: AnnoTypes.warning,
+        at: idx,
+        text: m,
+      });
+    },
+    reset = function (newAt: number) {
+      ch = text.charAt(newAt);
+      at = newAt + 1;
+    },
+    next = function (c?: string) {
+      return (
+        c && c !== ch && error("Expected '" + c + "' instead of '" + ch + "'"),
+        (ch = text.charAt(at)),
+        (at += 1),
+        ch
+      );
+    },
+    nextUpTo = function (upTo: any, errorMessage: string) {
+      let currentAt = at,
+        i = text.indexOf(upTo, currentAt);
+      if (i < 0) {
+        error(errorMessage || "Expected '" + upTo + "'");
+      }
+      reset(i + upTo.length);
+      return text.substring(currentAt, i);
+    },
+    peek = function (c: string) {
+      return text.substr(at, c.length) === c; // nocommit - double check
+    },
+    number = function () {
+      var number,
+        string = '';
+      for ('-' === ch && ((string = '-'), next('-')); ch >= '0' && '9' >= ch; )
+        (string += ch), next();
+      if ('.' === ch) for (string += '.'; next() && ch >= '0' && '9' >= ch; ) string += ch;
+      if ('e' === ch || 'E' === ch)
+        for (
+          string += ch, next(), ('-' === ch || '+' === ch) && ((string += ch), next());
+          ch >= '0' && '9' >= ch;
+
+        )
+          (string += ch), next();
+      return (number = +string), isNaN(number) ? (error('Bad number'), void 0) : number;
+    },
+    string = function () {
+      let hex: any,
+        i: any,
+        uffff: any,
+        string = '';
+      if ('"' === ch) {
+        if (peek('""')) {
+          // literal
+          next('"');
+          next('"');
+          return nextUpTo('"""', 'failed to find closing \'"""\'');
+        } else {
+          for (; next(); ) {
+            if ('"' === ch) return next(), string;
+            if ('\\' === ch)
+              if ((next(), 'u' === ch)) {
+                for (
+                  uffff = 0, i = 0;
+                  4 > i && ((hex = parseInt(next(), 16)), isFinite(hex));
+                  i += 1
+                )
+                  uffff = 16 * uffff + hex;
+                string += String.fromCharCode(uffff);
+              } else {
+                if ('string' != typeof escapee[ch]) break;
+                string += escapee[ch];
+              }
+            else string += ch;
+          }
+        }
+      }
+      error('Bad string');
+    },
+    white = function () {
+      for (; ch && ' ' >= ch; ) next();
+    },
+    word = function () {
+      switch (ch) {
+        case 't':
+          return next('t'), next('r'), next('u'), next('e'), !0;
+        case 'f':
+          return next('f'), next('a'), next('l'), next('s'), next('e'), !1;
+        case 'n':
+          return next('n'), next('u'), next('l'), next('l'), null;
+      }
+      error("Unexpected '" + ch + "'");
+    },
+    array = function () {
+      var array: any[] = [];
+      if ('[' === ch) {
+        if ((next('['), white(), ']' === ch)) return next(']'), array;
+        for (; ch; ) {
+          if ((array.push(value()), white(), ']' === ch)) return next(']'), array;
+          next(','), white();
+        }
+      }
+      error('Bad array');
+    },
+    object = function () {
+      var key,
+        object: any = {};
+      if ('{' === ch) {
+        if ((next('{'), white(), '}' === ch)) return next('}'), object;
+        for (; ch; ) {
+          let latchKeyStart = at;
+          if (
+            ((key = string()),
+            white(),
+            next(':'),
+            Object.hasOwnProperty.call(object, key) &&
+              warning('Duplicate key "' + key + '"', latchKeyStart),
+            (object[key] = value()),
+            white(),
+            '}' === ch)
+          )
+            return next('}'), object;
+          next(','), white();
+        }
+      }
+      error('Bad object');
+    };
+  return (
+    (value = function () {
+      switch ((white(), ch)) {
+        case '{':
+          return object();
+        case '[':
+          return array();
+        case '"':
+          return string();
+        case '-':
+          return number();
+        default:
+          return ch >= '0' && '9' >= ch ? number() : word();
+      }
+    }),
+    function (source: string) {
+      annos = [];
+      let errored = false;
+      text = source;
+      at = 0;
+      ch = ' ';
+      white();
+
+      try {
+        value();
+      } catch (e) {
+        errored = true;
+        annos.push({ type: AnnoTypes.error, at: e.at - 1, text: e.message });
+      }
+      if (!errored && ch) {
+        error('Syntax error');
+      }
+      return { annotations: annos };
+    }
+  );
+};

packages/kbn-monaco/src/xjson/index.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 { registerGrammarChecker } from './language';
+
+import { ID } from './constants';
+
+export const XJsonLang = { registerGrammarChecker, ID };

packages/kbn-monaco/src/xjson/language.ts

@@ -0,0 +1,89 @@
+/*
+ * 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.
+ */
+
+// This file contains a lot of single setup logic for registering a language globally
+
+import { monaco } from '../monaco';
+import { WorkerProxyService } from './worker_proxy_service';
+import { registerLexerRules } from './lexer_rules';
+import { ID } from './constants';
+// @ts-ignore
+import workerSrc from '!!raw-loader!../../target/public/xjson.editor.worker.js';
+
+const wps = new WorkerProxyService();
+
+// Register rules against shared monaco instance.
+registerLexerRules(monaco);
+
+// In future we will need to make this map languages to workers using "id" and/or "label" values
+// that get passed in.
+// @ts-ignore
+window.MonacoEnvironment = {
+  getWorker: (id: any, label: any) => {
+    // In kibana we will probably build this once and then load with raw-loader
+    const blob = new Blob([workerSrc], { type: 'application/javascript' });
+    return new Worker(URL.createObjectURL(blob));
+  },
+};
+
+monaco.languages.onLanguage(ID, async () => {
+  return wps.setup();
+});
+
+const OWNER = 'XJSON_GRAMMAR_CHECKER';
+export const registerGrammarChecker = (editor: monaco.editor.IEditor) => {
+  const allDisposables: monaco.IDisposable[] = [];
+
+  const updateAnnos = async () => {
+    const { annotations } = await wps.getAnnos();
+    const model = editor.getModel() as monaco.editor.ITextModel;
+    monaco.editor.setModelMarkers(
+      model,
+      OWNER,
+      annotations.map(({ at, text, type }) => {
+        const { column, lineNumber } = model.getPositionAt(at);
+        return {
+          startLineNumber: lineNumber,
+          startColumn: column,
+          endLineNumber: lineNumber,
+          endColumn: column,
+          message: text,
+          severity: type === 'error' ? monaco.MarkerSeverity.Error : monaco.MarkerSeverity.Warning,
+        };
+      })
+    );
+  };
+
+  const onModelAdd = (model: monaco.editor.IModel) => {
+    allDisposables.push(
+      model.onDidChangeContent(async () => {
+        updateAnnos();
+      })
+    );
+
+    updateAnnos();
+  };
+
+  allDisposables.push(monaco.editor.onDidCreateModel(onModelAdd));
+  monaco.editor.getModels().forEach(onModelAdd);
+  return () => {
+    wps.stop();
+    allDisposables.forEach((d) => d.dispose());
+  };
+};

packages/kbn-monaco/src/xjson/lexer_rules/esql.ts

@@ -0,0 +1,270 @@
+/*
+ * 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 { monaco } from '../../monaco';
+
+export const ID = 'esql';
+
+const brackets = [
+  { open: '[', close: ']', token: 'delimiter.square' },
+  { open: '(', close: ')', token: 'delimiter.parenthesis' },
+];
+
+const keywords = [
+  'describe',
+  'between',
+  'in',
+  'like',
+  'not',
+  'and',
+  'or',
+  'desc',
+  'select',
+  'from',
+  'where',
+  'having',
+  'group',
+  'by',
+  'order',
+  'asc',
+  'desc',
+  'pivot',
+  'for',
+  'in',
+  'as',
+  'show',
+  'columns',
+  'include',
+  'frozen',
+  'tables',
+  'escape',
+  'limit',
+  'rlike',
+  'all',
+  'distinct',
+  'is',
+];
+const builtinFunctions = [
+  'avg',
+  'count',
+  'first',
+  'first_value',
+  'last',
+  'last_value',
+  'max',
+  'min',
+  'sum',
+  'kurtosis',
+  'mad',
+  'percentile',
+  'percentile_rank',
+  'skewness',
+  'stddev_pop',
+  'sum_of_squares',
+  'var_pop',
+  'histogram',
+  'case',
+  'coalesce',
+  'greatest',
+  'ifnull',
+  'iif',
+  'isnull',
+  'least',
+  'nullif',
+  'nvl',
+  'curdate',
+  'current_date',
+  'current_time',
+  'current_timestamp',
+  'curtime',
+  'dateadd',
+  'datediff',
+  'datepart',
+  'datetrunc',
+  'date_add',
+  'date_diff',
+  'date_part',
+  'date_trunc',
+  'day',
+  'dayname',
+  'dayofmonth',
+  'dayofweek',
+  'dayofyear',
+  'day_name',
+  'day_of_month',
+  'day_of_week',
+  'day_of_year',
+  'dom',
+  'dow',
+  'doy',
+  'hour',
+  'hour_of_day',
+  'idow',
+  'isodayofweek',
+  'isodow',
+  'isoweek',
+  'isoweekofyear',
+  'iso_day_of_week',
+  'iso_week_of_year',
+  'iw',
+  'iwoy',
+  'minute',
+  'minute_of_day',
+  'minute_of_hour',
+  'month',
+  'monthname',
+  'month_name',
+  'month_of_year',
+  'now',
+  'quarter',
+  'second',
+  'second_of_minute',
+  'timestampadd',
+  'timestampdiff',
+  'timestamp_add',
+  'timestamp_diff',
+  'today',
+  'week',
+  'week_of_year',
+  'year',
+  'abs',
+  'acos',
+  'asin',
+  'atan',
+  'atan2',
+  'cbrt',
+  'ceil',
+  'ceiling',
+  'cos',
+  'cosh',
+  'cot',
+  'degrees',
+  'e',
+  'exp',
+  'expm1',
+  'floor',
+  'log',
+  'log10',
+  'mod',
+  'pi',
+  'power',
+  'radians',
+  'rand',
+  'random',
+  'round',
+  'sign',
+  'signum|sin',
+  'sinh',
+  'sqrt',
+  'tan',
+  'truncate',
+  'ascii',
+  'bit_length',
+  'char',
+  'character_length',
+  'char_length',
+  'concat',
+  'insert',
+  'lcase',
+  'left',
+  'length',
+  'locate',
+  'ltrim',
+  'octet_length',
+  'position',
+  'repeat',
+  'replace',
+  'right',
+  'rtrim',
+  'space',
+  'substring',
+  'ucase',
+  'cast',
+  'convert',
+  'database',
+  'user',
+  'st_astext',
+  'st_aswkt',
+  'st_distance',
+  'st_geometrytype',
+  'st_geomfromtext',
+  'st_wkttosql',
+  'st_x',
+  'st_y',
+  'st_z',
+  'score',
+];
+
+export const lexerRules = {
+  defaultToken: 'invalid',
+  ignoreCase: true,
+  tokenPostfix: '',
+  keywords,
+  builtinFunctions,
+  brackets,
+  tokenizer: {
+    root: [
+      [
+        /[a-zA-Z_$][a-zA-Z0-9_$]*\b/,
+        {
+          cases: {
+            '@keywords': 'keyword',
+            '@builtinFunctions': 'identifier',
+            '@default': 'identifier',
+          },
+        },
+      ],
+      [/[()]/, '@brackets'],
+      [/--.*$/, 'comment'],
+      [/\/\*/, 'comment', '@comment'],
+      [/\/.*$/, 'comment'],
+
+      [/".*?"/, 'string'],
+
+      [/'.*?'/, 'constant'],
+      [/`.*?`/, 'string'],
+      // whitespace
+      [/[ \t\r\n]+/, { token: '@whitespace' }],
+      [/[+-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b/, 'entity.name.function'],
+      [/⇐|<⇒|\*|\.|\:\:|\+|\-|\/|\/\/|%|&|\^|~|<|>|<=|=>|==|!=|<>|=/, 'keyword.operator'],
+      [/[\(]/, 'paren.lparen'],
+      [/[\)]/, 'paren.rparen'],
+      [/\s+/, 'text'],
+    ],
+    numbers: [
+      [/0[xX][0-9a-fA-F]*/, 'number'],
+      [/[$][+-]*\d*(\.\d*)?/, 'number'],
+      [/((\d+(\.\d*)?)|(\.\d+))([eE][\-+]?\d+)?/, 'number'],
+    ],
+    strings: [
+      [/N'/, { token: 'string', next: '@string' }],
+      [/'/, { token: 'string', next: '@string' }],
+    ],
+    string: [
+      [/[^']+/, 'string'],
+      [/''/, 'string'],
+      [/'/, { token: 'string', next: '@pop' }],
+    ],
+    comment: [
+      [/[^\/*]+/, 'comment'],
+      [/\*\//, 'comment', '@pop'],
+      [/[\/*]/, 'comment'],
+    ],
+  },
+} as monaco.languages.IMonarchLanguage;

packages/kbn-monaco/src/xjson/lexer_rules/index.ts

@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable-next-line @kbn/eslint/module_migration */
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import * as xJson from './xjson';
+import * as esql from './esql';
+import * as painless from './painless';
+
+export const registerLexerRules = (m: typeof monaco) => {
+  m.languages.register({ id: xJson.ID });
+  m.languages.setMonarchTokensProvider(xJson.ID, xJson.lexerRules);
+  m.languages.register({ id: painless.ID });
+  m.languages.setMonarchTokensProvider(painless.ID, painless.lexerRules);
+  m.languages.register({ id: esql.ID });
+  m.languages.setMonarchTokensProvider(esql.ID, esql.lexerRules);
+};

packages/kbn-monaco/src/xjson/lexer_rules/painless.ts

@@ -0,0 +1,194 @@
+/*
+ * 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 { monaco } from '../../monaco';
+
+export const ID = 'painless';
+
+/**
+ * Extends the default type for a Monarch language so we can use
+ * attribute references (like @keywords to reference the keywords list)
+ * in the defined tokenizer
+ */
+interface Language extends monaco.languages.IMonarchLanguage {
+  default: string;
+  brackets: any;
+  keywords: string[];
+  symbols: RegExp;
+  escapes: RegExp;
+  digits: RegExp;
+  primitives: string[];
+  octaldigits: RegExp;
+  binarydigits: RegExp;
+  constants: string[];
+  operators: string[];
+}
+
+export const lexerRules = {
+  default: 'invalid',
+  tokenPostfix: '',
+  // painless does not use < >, so we define our own
+  brackets: [
+    ['{', '}', 'delimiter.curly'],
+    ['[', ']', 'delimiter.square'],
+    ['(', ')', 'delimiter.parenthesis'],
+  ],
+  keywords: [
+    'if',
+    'in',
+    'else',
+    'while',
+    'do',
+    'for',
+    'continue',
+    'break',
+    'return',
+    'new',
+    'try',
+    'catch',
+    'throw',
+    'this',
+    'instanceof',
+  ],
+  primitives: ['void', 'boolean', 'byte', 'short', 'char', 'int', 'long', 'float', 'double', 'def'],
+  constants: ['true', 'false'],
+  operators: [
+    '=',
+    '>',
+    '<',
+    '!',
+    '~',
+    '?',
+    '?:',
+    '?.',
+    ':',
+    '==',
+    '===',
+    '<=',
+    '>=',
+    '!=',
+    '!==',
+    '&&',
+    '||',
+    '++',
+    '--',
+    '+',
+    '-',
+    '*',
+    '/',
+    '&',
+    '|',
+    '^',
+    '%',
+    '<<',
+    '>>',
+    '>>>',
+    '+=',
+    '-=',
+    '*=',
+    '/=',
+    '&=',
+    '|=',
+    '^=',
+    '%=',
+    '<<=',
+    '>>=',
+    '>>>=',
+    '->',
+    '::',
+    '=~',
+    '==~',
+  ],
+  symbols: /[=><!~?:&|+\-*\/^%]+/,
+  escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+  digits: /\d+(_+\d+)*/,
+  octaldigits: /[0-7]+(_+[0-7]+)*/,
+  binarydigits: /[0-1]+(_+[0-1]+)*/,
+  hexdigits: /[[0-9a-fA-F]+(_+[0-9a-fA-F]+)*/,
+  tokenizer: {
+    root: [
+      // identifiers and keywords
+      [
+        /[a-zA-Z_][\w]*/,
+        {
+          cases: {
+            '@keywords': 'keyword',
+            '@primitives': 'type',
+            '@constants': 'constant',
+            '@default': 'identifier',
+          },
+        },
+      ],
+      // whitespace
+      [/[ \t\r\n]+/, { token: 'whitespace' }],
+      // comments
+      [/\/\*/, 'comment', '@comment'],
+      [/\/\/.*$/, 'comment'],
+      // brackets
+      [/[{}()\[\]]/, '@brackets'],
+      // operators
+      [
+        /@symbols/,
+        {
+          cases: {
+            '@operators': 'operators',
+            '@default': '',
+          },
+        },
+      ],
+      // numbers
+      [/(@digits)[eE]([\-+]?(@digits))?[fFdD]?/, 'number.float'],
+      [/(@digits)\.(@digits)([eE][\-+]?(@digits))?[fFdD]?/, 'number.float'],
+      [/0[xX](@hexdigits)[Ll]?/, 'number.hex'],
+      [/0(@octaldigits)[Ll]?/, 'number.octal'],
+      [/0[bB](@binarydigits)[Ll]?/, 'number.binary'],
+      [/(@digits)[fFdD]/, 'number.float'],
+      [/(@digits)[lL]?/, 'number'],
+      // delimiter: after numbers due to conflict with decimals and dot
+      [/[;,.]/, 'delimiter'],
+      // strings double quoted
+      [/"([^"\\]|\\.)*$/, 'string.invalid'], // string without termination
+      [/"/, 'string', '@string_dq'],
+      // strings single quoted
+      [/'([^'\\]|\\.)*$/, 'string.invalid'], // string without termination
+      [/'/, 'string', '@string_sq'],
+      [/"""/, { token: 'punctuation.end_triple_quote', nextEmbedded: '@pop' }],
+    ],
+    comment: [
+      [/[^\/*]+/, 'comment'],
+      [/\*\//, 'comment', '@pop'],
+      [/[\/*]/, 'comment'],
+    ],
+    string_dq: [
+      [/[^\\"]+/, 'string'],
+      [/@escapes/, 'string.escape'],
+      [/\\./, 'string.escape.invalid'],
+      [/"/, 'string', '@pop'],
+    ],
+    string_sq: [
+      [/[^\\']+/, 'string'],
+      [/@escapes/, 'string.escape'],
+      [/\\./, 'string.escape.invalid'],
+      [/'/, 'string', '@pop'],
+    ],
+  },
+} as Language;
+
+monaco.languages.register({ id: ID });
+monaco.languages.setMonarchTokensProvider(ID, lexerRules);

packages/kbn-monaco/src/xjson/lexer_rules/shared.ts

@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+export const globals = {
+  escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+};

packages/kbn-monaco/src/xjson/lexer_rules/xjson.ts

@@ -0,0 +1,141 @@
+/*
+ * 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 { monaco } from '../../monaco';
+import { ID } from '../constants';
+import './painless';
+import './esql';
+
+import { globals } from './shared';
+
+export { ID };
+
+export const lexerRules: monaco.languages.IMonarchLanguage = {
+  ...(globals as any),
+
+  defaultToken: 'invalid',
+  tokenPostfix: '',
+
+  tokenizer: {
+    root: [
+      [
+        /("(?:[^"]*_)?script"|"inline"|"source")(\s*?)(:)(\s*?)(""")/,
+        [
+          'variable',
+          'whitespace',
+          'ace.punctuation.colon',
+          'whitespace',
+          {
+            token: 'punctuation.start_triple_quote',
+            nextEmbedded: 'painless',
+            next: 'my_painless',
+          },
+        ],
+      ],
+      [
+        /(:)(\s*?)(""")(sql)/,
+        [
+          'ace.punctuation.colon',
+          'whitespace',
+          'punctuation.start_triple_quote',
+          {
+            token: 'punctuation.start_triple_quote.lang_marker',
+            nextEmbedded: 'esql',
+            next: 'my_sql',
+          },
+        ],
+      ],
+      [/{/, { token: 'paren.lparen', next: '@push' }],
+      [/}/, { token: 'paren.rparen', next: '@pop' }],
+      [/[[(]/, { token: 'paren.lparen' }],
+      [/[\])]/, { token: 'paren.rparen' }],
+      [/,/, { token: 'punctuation.comma' }],
+      [/:/, { token: 'punctuation.colon' }],
+      [/\s+/, { token: 'whitespace' }],
+      [/["](?:(?:\\.)|(?:[^"\\]))*?["]\s*(?=:)/, { token: 'variable' }],
+      [/"""/, { token: 'string_literal', next: 'string_literal' }],
+      [/0[xX][0-9a-fA-F]+\b/, { token: 'constant.numeric' }],
+      [/[+-]?\d+(?:(?:\.\d*)?(?:[eE][+-]?\d+)?)?\b/, { token: 'constant.numeric' }],
+      [/(?:true|false)\b/, { token: 'constant.language.boolean' }],
+      // strings
+      [/"([^"\\]|\\.)*$/, 'string.invalid'], // non-teminated string
+      [
+        /"/,
+        {
+          token: 'string.quote',
+          bracket: '@open',
+          next: '@string',
+        },
+      ],
+      [/['](?:(?:\\.)|(?:[^'\\]))*?[']/, { token: 'invalid' }],
+      [/.+?/, { token: 'text' }],
+      [/\/\/.*$/, { token: 'invalid' }],
+    ],
+
+    my_painless: [
+      [
+        /"""/,
+        {
+          token: 'punctuation.end_triple_quote',
+          nextEmbedded: '@pop',
+          next: '@pop',
+        },
+      ],
+    ],
+
+    my_sql: [
+      [
+        /"""/,
+        {
+          token: 'punctuation.end_triple_quote',
+          nextEmbedded: '@pop',
+          next: '@pop',
+        },
+      ],
+    ],
+
+    string: [
+      [/[^\\"]+/, 'string'],
+      [/@escapes/, 'string.escape'],
+      [/\\./, 'string.escape.invalid'],
+      [/"/, { token: 'string.quote', bracket: '@close', next: '@pop' }],
+    ],
+
+    string_literal: [
+      [/"""/, { token: 'punctuation.end_triple_quote', next: '@pop' }],
+      [/./, { token: 'multi_string' }],
+    ],
+  },
+};
+
+monaco.languages.register({
+  id: ID,
+});
+monaco.languages.setMonarchTokensProvider(ID, lexerRules);
+monaco.languages.setLanguageConfiguration(ID, {
+  brackets: [
+    ['{', '}'],
+    ['[', ']'],
+  ],
+  autoClosingPairs: [
+    { open: '{', close: '}' },
+    { open: '[', close: ']' },
+    { open: '"', close: '"' },
+  ],
+});

packages/kbn-monaco/src/xjson/worker/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export { XJsonWorker } from './xjson_worker';

packages/kbn-monaco/src/xjson/worker/xjson.worker.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.
+ */
+
+// Please note: this module is intended to be run inside of a webworker.
+/* eslint-disable @kbn/eslint/module_migration */
+
+import 'regenerator-runtime/runtime';
+// @ts-ignore
+import * as worker from 'monaco-editor/esm/vs/editor/editor.worker';
+import { XJsonWorker } from './xjson_worker';
+
+self.onmessage = () => {
+  worker.initialize((ctx: any, createData: any) => {
+    return new XJsonWorker(ctx);
+  });
+};

packages/kbn-monaco/src/xjson/worker/xjson_worker.ts

@@ -0,0 +1,35 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable-next-line @kbn/eslint/module_migration */
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import { createParser } from '../grammar';
+
+export class XJsonWorker {
+  constructor(private ctx: monaco.worker.IWorkerContext) {}
+  private parser: any;
+
+  async parse() {
+    if (!this.parser) {
+      this.parser = createParser();
+    }
+    const [model] = this.ctx.getMirrorModels();
+    return this.parser(model.getValue());
+  }
+}

packages/kbn-monaco/src/xjson/worker_proxy_service.ts

@@ -0,0 +1,55 @@
+/*
+ * 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 { AnnoTypes } from './grammar';
+import { monaco } from '../monaco';
+import { XJsonWorker } from './worker';
+import { ID } from './constants';
+
+export interface Annotation {
+  name?: string;
+  type: AnnoTypes;
+  text: string;
+  at: number;
+}
+
+export interface AnnotationsResponse {
+  annotations: Annotation[];
+}
+
+export class WorkerProxyService {
+  private worker: monaco.editor.MonacoWebWorker<XJsonWorker> | undefined;
+
+  public async getAnnos(): Promise<AnnotationsResponse> {
+    if (!this.worker) {
+      throw new Error('Worker Proxy Service has not been setup!');
+    }
+    await this.worker.withSyncedResources(monaco.editor.getModels().map(({ uri }) => uri));
+    const proxy = await this.worker.getProxy();
+    return proxy.parse();
+  }
+
+  public setup() {
+    this.worker = monaco.editor.createWebWorker({ label: ID, moduleId: '' });
+  }
+
+  public stop() {
+    if (this.worker) this.worker.dispose();
+  }
+}

packages/kbn-monaco/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./target",
+    "declaration": true,
+    "sourceMap": true,
+    "types": [
+      "jest",
+      "node"
+    ]
+  },
+  "include": [
+    "src/**/*"
+  ]
+}

packages/kbn-monaco/webpack.config.js

@@ -0,0 +1,51 @@
+/*
+ * 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.
+ */
+
+const path = require('path');
+
+const createLangWorkerConfig = (lang) => ({
+  mode: 'production',
+  entry: path.resolve(__dirname, 'src', lang, 'worker', `${lang}.worker.ts`),
+  output: {
+    path: path.resolve(__dirname, 'target/public'),
+    filename: `${lang}.editor.worker.js`,
+  },
+  resolve: {
+    modules: ['node_modules'],
+    extensions: ['.js', '.ts', '.tsx'],
+  },
+  stats: 'errors-only',
+  module: {
+    rules: [
+      {
+        test: /\.(js|ts)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            babelrc: false,
+            presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
+          },
+        },
+      },
+    ],
+  },
+});
+
+module.exports = [createLangWorkerConfig('xjson')];

packages/kbn-monaco/yarn.lock

@@ -0,0 +1 @@
+../../yarn.lock

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

@@ -30,8 +30,8 @@ export const KbnI18nReact = require('@kbn/i18n/react');
 export const Angular = require('angular');
 export const Moment = require('moment');
 export const MomentTimezone = require('moment-timezone/moment-timezone');
-export const Monaco = require('./monaco.ts');
-export const MonacoBare = require('monaco-editor/esm/vs/editor/editor.api');
+export const KbnMonaco = require('@kbn/monaco');
+export const MonacoBarePluginApi = require('@kbn/monaco').BarePluginApi;
 export const React = require('react');
 export const ReactDom = require('react-dom');
 export const ReactDomServer = require('react-dom/server');

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

@@ -42,9 +42,9 @@ exports.externals = {
   'react-intl': '__kbnSharedDeps__.ReactIntl',
   'react-router': '__kbnSharedDeps__.ReactRouter',
   'react-router-dom': '__kbnSharedDeps__.ReactRouterDom',
-  '@kbn/ui-shared-deps/monaco': '__kbnSharedDeps__.Monaco',
+  '@kbn/monaco': '__kbnSharedDeps__.KbnMonaco',
   // this is how plugins/consumers from npm load monaco
-  'monaco-editor/esm/vs/editor/editor.api': '__kbnSharedDeps__.MonacoBare',
+  'monaco-editor/esm/vs/editor/editor.api': '__kbnSharedDeps__.MonacoBarePluginApi',
 
   /**
    * big deps which are locked to a single version

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

@@ -13,6 +13,7 @@
     "@elastic/eui": "23.3.1",
     "@elastic/numeral": "^2.5.0",
     "@kbn/i18n": "1.0.0",
+    "@kbn/monaco": "1.0.0",
     "abortcontroller-polyfill": "^1.4.0",
     "angular": "^1.7.9",
     "compression-webpack-plugin": "^3.1.0",
@@ -22,7 +23,6 @@
     "jquery": "^3.5.0",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.27",
-    "monaco-editor": "~0.17.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-intl": "^2.8.0",

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

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

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

@@ -78,17 +78,6 @@ 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')],
-            },
-          },
-        ],
-      },
     ],
   },
 
@@ -96,6 +85,7 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({
     alias: {
       moment: MOMENT_SRC,
     },
+    extensions: ['.js', '.ts'],
   },
 
   optimization: {

src/dev/jest/config.js

@@ -64,7 +64,8 @@ export default {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/src/dev/jest/mocks/file_mock.js',
     '\\.(css|less|scss)$': '<rootDir>/src/dev/jest/mocks/style_mock.js',
-    '\\.ace\\.worker.js$': '<rootDir>/src/dev/jest/mocks/ace_worker_module_mock.js',
+    '\\.ace\\.worker.js$': '<rootDir>/src/dev/jest/mocks/worker_module_mock.js',
+    '\\.editor\\.worker.js$': '<rootDir>/src/dev/jest/mocks/worker_module_mock.js',
     '^(!!)?file-loader!': '<rootDir>/src/dev/jest/mocks/file_mock.js',
   },
   setupFiles: [

src/plugins/es_ui_shared/__packages_do_not_import__/monaco/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export { useXJsonMode } from './use_xjson_mode';

src/plugins/es_ui_shared/__packages_do_not_import__/monaco/use_xjson_mode.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 { XJsonLang } from '@kbn/monaco';
+import { useXJsonMode as useBaseXJsonMode } from '../xjson';
+
+interface ReturnValue extends ReturnType<typeof useBaseXJsonMode> {
+  XJsonLang: typeof XJsonLang;
+}
+
+export const useXJsonMode = (json: Parameters<typeof useBaseXJsonMode>[0]): ReturnValue => {
+  return {
+    ...useBaseXJsonMode(json),
+    XJsonLang,
+  };
+};

src/plugins/es_ui_shared/__packages_do_not_import__/xjson/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export { useXJsonMode } from './use_xjson_mode';

src/plugins/es_ui_shared/__packages_do_not_import__/xjson/use_xjson_mode.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 { useState, Dispatch } from 'react';
+import { collapseLiteralStrings, expandLiteralStrings } from '../../public';
+
+interface ReturnValue {
+  xJson: string;
+  setXJson: Dispatch<string>;
+  convertToJson: typeof collapseLiteralStrings;
+}
+
+export const useXJsonMode = (json: Record<string, any> | string | null): ReturnValue => {
+  const [xJson, setXJson] = useState(() =>
+    json === null
+      ? ''
+      : expandLiteralStrings(typeof json === 'string' ? json : JSON.stringify(json, null, 2))
+  );
+
+  return {
+    xJson,
+    setXJson,
+    convertToJson: collapseLiteralStrings,
+  };
+};

src/plugins/es_ui_shared/public/index.ts

@@ -47,6 +47,10 @@ export {
   expandLiteralStrings,
 } from './console_lang';
 
+import * as Monaco from './monaco';
+
+export { Monaco };
+
 export {
   AuthorizationContext,
   AuthorizationProvider,

src/plugins/es_ui_shared/public/monaco/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export { useXJsonMode } from '../../__packages_do_not_import__/monaco';

src/plugins/es_ui_shared/static/ace_x_json/hooks/use_x_json.ts

@@ -16,23 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { useState } from 'react';
-import { XJsonMode, collapseLiteralStrings, expandLiteralStrings } from '../../../public';
+import { XJsonMode } from '../../../public';
+import { useXJsonMode as useBaseXJsonMode } from '../../../__packages_do_not_import__/xjson';
 
 const xJsonMode = new XJsonMode();
 
-export const useXJsonMode = (json: Record<string, any> | string | null) => {
-  const [xJson, setXJson] = useState(() =>
-    json === null
-      ? ''
-      : expandLiteralStrings(typeof json === 'string' ? json : JSON.stringify(json, null, 2))
-  );
+interface ReturnValue extends ReturnType<typeof useBaseXJsonMode> {
+  xJsonMode: typeof xJsonMode;
+}
 
+export const useXJsonMode = (json: Parameters<typeof useBaseXJsonMode>[0]): ReturnValue => {
   return {
-    xJson,
-    setXJson,
+    ...useBaseXJsonMode(json),
     xJsonMode,
-    convertToJson: collapseLiteralStrings,
   };
 };

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

@@ -20,7 +20,7 @@
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import { monaco as monacoEditor } from '@kbn/ui-shared-deps/monaco';
+import { monaco as monacoEditor } from '@kbn/monaco';
 import { CodeEditor } from './code_editor';
 
 // A sample language definition with a few example tokens

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

@@ -19,9 +19,11 @@
 
 import React from 'react';
 import { CodeEditor } from './code_editor';
-import { monaco } from '@kbn/ui-shared-deps/monaco';
+import { monaco } from '@kbn/monaco';
 import { shallow } from 'enzyme';
 
+// disabled because this is a test, but also it seems we shouldn't need this?
+/* eslint-disable-next-line @kbn/eslint/module_migration */
 import 'monaco-editor/esm/vs/basic-languages/html/html.contribution.js';
 
 // A sample language definition with a few example tokens

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

@@ -21,7 +21,7 @@ import React from 'react';
 import ReactResizeDetector from 'react-resize-detector';
 import MonacoEditor from 'react-monaco-editor';
 
-import { monaco } from '@kbn/ui-shared-deps/monaco';
+import { monaco } from '@kbn/monaco';
 
 import { LIGHT_THEME, DARK_THEME } from './editor_theme';
 

src/plugins/kibana_react/public/code_editor/editor_theme.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { monaco } from '@kbn/ui-shared-deps/monaco';
+import { monaco } from '@kbn/monaco';
 
 import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
 import lightTheme from '@elastic/eui/dist/eui_theme_light.json';

src/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 { monaco } from '@kbn/ui-shared-deps/monaco';
+import { monaco } from '@kbn/monaco';
 
 import { CodeEditor, useKibana } from '../../../kibana_react/public';
 import { suggest, getSuggestion } from './timelion_expression_input_helpers';

src/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 { monaco } from '@kbn/ui-shared-deps/monaco';
+import { monaco } from '@kbn/monaco';
 
 import { Parser } from 'pegjs';
 

x-pack/dev-tools/jest/create_jest_config.js

@@ -24,7 +24,8 @@ export function createJestConfig({ kibanaDirectory, rootDir, xPackKibanaDirector
       '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': fileMockPath,
       '\\.module.(css|scss)$': `${kibanaDirectory}/src/dev/jest/mocks/css_module_mock.js`,
       '\\.(css|less|scss)$': `${kibanaDirectory}/src/dev/jest/mocks/style_mock.js`,
-      '\\.ace\\.worker.js$': `${kibanaDirectory}/src/dev/jest/mocks/ace_worker_module_mock.js`,
+      '\\.ace\\.worker.js$': `${kibanaDirectory}/src/dev/jest/mocks/worker_module_mock.js`,
+      '\\.editor\\.worker.js$': `${kibanaDirectory}/src/dev/jest/mocks/worker_module_mock.js`,
       '^test_utils/enzyme_helpers': `${xPackKibanaDirectory}/test_utils/enzyme_helpers.tsx`,
       '^test_utils/find_test_subject': `${xPackKibanaDirectory}/test_utils/find_test_subject.ts`,
       '^test_utils/stub_web_worker': `${xPackKibanaDirectory}/test_utils/stub_web_worker.ts`,

x-pack/plugins/canvas/public/components/expression_input/__examples__/expression_input.examples.tsx

@@ -7,7 +7,7 @@
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import { monaco } from '@kbn/ui-shared-deps/monaco';
+import { monaco } from '@kbn/monaco';
 
 import { ExpressionInput } from '../expression_input';
 import { language, LANGUAGE_ID } from '../../../lib/monaco_language_def';

x-pack/plugins/canvas/public/components/expression_input/expression_input.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiFormRow } from '@elastic/eui';
 import { debounce } from 'lodash';
-import { monaco } from '@kbn/ui-shared-deps/monaco';
+import { monaco } from '@kbn/monaco';
 import { ExpressionFunction } from '../../../types';
 import { CodeEditor } from '../../../../../../src/plugins/kibana_react/public';
 import {

x-pack/plugins/canvas/public/lib/monaco_language_def.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { monaco } from '@kbn/ui-shared-deps/monaco';
+import { monaco } from '@kbn/monaco';
 import { ExpressionFunction } from '../../types';
 
 export const LANGUAGE_ID = 'canvas-expression';

x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx

@@ -14,7 +14,7 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { monaco } from '@kbn/ui-shared-deps/monaco';
+import { monaco } from '@kbn/monaco';
 import { i18n } from '@kbn/i18n';
 import { CodeEditor } from '../../../../../../../src/plugins/kibana_react/public';
 

x-pack/plugins/painless_lab/public/lib/monaco_painless_lang.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import * as monaco from 'monaco-editor';
+import { monaco } from '@kbn/monaco';
 
 /**
  * Extends the default type for a Monarch language so we can use

x-pack/plugins/painless_lab/public/services/language_service.ts

@@ -7,7 +7,7 @@
 // It is important that we use this specific monaco instance so that
 // editor settings are registered against the instance our React component
 // uses.
-import { monaco } from '@kbn/ui-shared-deps/monaco';
+import { monaco } from '@kbn/monaco';
 
 // @ts-ignore
 import workerSrc from 'raw-loader!monaco-editor/min/vs/base/worker/workerMain.js';