4.0.0-alpha.1

Update dependencies

.editorconfig

@@ -3,12 +3,12 @@ root = true
 
 [*]
 charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
 end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 100
+trim_trailing_whitespace = true
 
-[*.md]
+[COMMIT_EDITMSG]
-max_line_length = off
+max_line_length = 72
-trim_trailing_whitespace = false

.eslintrc.yaml

@@ -0,0 +1,19 @@
+extends:
+  - remcohaszing
+  - remcohaszing/typechecking
+rules:
+  no-restricted-globals: off
+
+  '@typescript-eslint/no-misused-promises': off
+  '@typescript-eslint/no-shadow': off
+  '@typescript-eslint/no-unnecessary-condition': off
+
+  import/extensions: off
+  import/no-extraneous-dependencies: off
+  import/no-unresolved: off
+
+  jsdoc/require-jsdoc: off
+
+  node/no-extraneous-import: off
+  node/no-unsupported-features/es-syntax: off
+  node/no-unsupported-features/node-builtins: off

.github/workflows/ci.yaml

@@ -0,0 +1,66 @@
+name: ci
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+    tags: ['*']
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with: { node-version: 16 }
+      - run: npm ci
+      - run: npx eslint .
+
+  examples:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with: { node-version: 16 }
+      - run: npm ci
+      - run: npm run prepack
+      - run: npm run build --workspaces
+
+  pack:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with: { node-version: 16 }
+      - run: npm ci
+      - run: npm pack
+
+  prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with: { node-version: 16 }
+      - run: npm ci
+      - run: npx prettier --check .
+
+  tsc:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with: { node-version: 16 }
+      - run: npm ci
+      - run: npx tsc
+  # release:
+  #   runs-on: ubuntu-latest
+  #   needs: [eslint, pack, prettier, tsc]
+  #   if: startsWith(github.ref, 'refs/tags/')
+  #   steps:
+  #     - uses: actions/checkout@v2
+  #     - uses: actions/setup-node@v2
+  #       with: { node-version: 16 }
+  #     - run: npm ci
+  #     - run: npm publish
+  #       env:
+  #         NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -1,4 +1,7 @@
-/node_modules/
+dist/
-/out/
+node_modules/
-/lib/
+/index.js
+/yaml.worker.js
 *.log
+*.map
+*.tgz

.husky/pre-commit

@@ -0,0 +1,3 @@
+#!/usr/bin/env sh
+
+npx lint-staged

.npmignore

@@ -1,12 +0,0 @@
-/.vscode/
-/out/
-/scripts/
-/examples/
-/patches/
-/src/
-/test/
-/.gitignore
-/.npmignore
-/examples
-/test-demo.png
-/.editorconfig

.npmrc

@@ -0,0 +1 @@
+lockfile-version = 3

.nvmrc

@@ -0,0 +1 @@
+16

.prettierignore

@@ -1 +1,3 @@
-/lib/esm/_deps/
+dist/
+/index.js
+/yaml.worker.js

.prettierrc.yaml

@@ -0,0 +1,3 @@
+proseWrap: always
+singleQuote: true
+trailingComma: all

.vscode/launch.json

@@ -1,18 +0,0 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "type": "node",
-      "name": "vscode-jest-tests",
-      "request": "launch",
-      "args": ["--runInBand"],
-      "cwd": "${workspaceFolder}",
-      "console": "integratedTerminal",
-      "internalConsoleOptions": "neverOpen",
-      "program": "${workspaceFolder}/node_modules/jest/bin/jest"
-    }
-  ]
-}

.vscode/settings.json

@@ -1,11 +0,0 @@
-// Place your settings in this file to overwrite default and user settings.
-{
-  "files.trimTrailingWhitespace": true,
-  "search.exclude": {
-    "**/node_modules": true,
-    "**/lib": true,
-    "**/out": true
-  },
-  "javascript.preferences.quoteStyle": "single",
-  "typescript.preferences.quoteStyle": "single"
-}

CONTRIBUTING.md

@@ -0,0 +1,36 @@
+# Contributing
+
+## Prerequisites
+
+The following are required to start working on this project:
+
+- [Git](https://git-scm.com)
+- [NodeJS](https://nodejs.org) 16 or higher
+- [npm](https://github.com/npm/cli) 8.1.2 or higher
+
+## Getting started
+
+To get started with contributing, clone the repository and install its dependencies.
+
+```sh
+git clone https://github.com/remcohaszing/monaco-yaml
+cd monaco-yaml
+npm ci
+```
+
+## Building
+
+To build the repository, run:
+
+```sh
+npm run prepack
+```
+
+## Running
+
+To test it, run one of the
+[examples](https://github.com/remcohaszing/monaco-yaml/tree/main/examples).
+
+```sh
+npm --workspace demo start
+```

LICENSE.md

@@ -1,21 +1,18 @@
-The MIT License (MIT)
+The MIT License (MIT)
-
+
-Copyright (c) Microsoft Corporation
+Copyright (c) Microsoft Corporation
-
+
-Permission is hereby granted, free of charge, to any person obtaining a copy
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
-of this software and associated documentation files (the "Software"), to deal
+associated documentation files (the "Software"), to deal in the Software without restriction,
-in the Software without restriction, including without limitation the rights
+including without limitation the rights to use, copy, modify, merge, publish, distribute,
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
-copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
-furnished to do so, subject to the following conditions:
+
-
+The above copyright notice and this permission notice shall be included in all copies or substantial
-The above copyright notice and this permission notice shall be included in all
+portions of the Software.
-copies or substantial portions of the Software.
+
-
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

@@ -1,34 +1,219 @@
 # Monaco YAML
 
-YAML language plugin for the Monaco Editor. It provides the following features when editing YAML files:
+[![ci workflow](https://github.com/remcohaszing/monaco-yaml/actions/workflows/ci.yaml/badge.svg)](https://github.com/remcohaszing/monaco-yaml/actions/workflows/ci.yaml)
-* Code completion, based on JSON schemas or by looking at similar objects in the same file
+[![npm version](https://img.shields.io/npm/v/monaco-yaml)](https://www.npmjs.com/package/monaco-yaml)
-* Hovers, based on JSON schemas
+[![prettier code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io)
-* Validation: Syntax errors and schema validation
+[![demo](https://img.shields.io/badge/demo-monaco--yaml.js.org-61ffcf.svg)](https://monaco-yaml.js.org)
-* Formatting
+[![netlify status](https://api.netlify.com/api/v1/badges/20b08937-99d0-4882-b9a3-d5f09ddd29b7/deploy-status)](https://app.netlify.com/sites/monaco-yaml/deploys)
-* Document Symbols
-* Syntax highlighting
-* Automatically load remote schema files (by enabling DiagnosticsOptions.enableSchemaRequest)
 
-Schemas can also be provided by configuration. See [here](https://github.com/Microsoft/monaco-json/blob/master/src/monaco.d.ts)
+YAML language plugin for the Monaco Editor. It provides the following features when editing YAML
-for the API that the JSON plugin offers to configure the JSON language support.
+files:
 
-## Installing
+- Code completion, based on JSON schemas or by looking at similar objects in the same file
+- Hovers, based on JSON schemas
+- Validation: Syntax errors and schema validation
+- Formatting using Prettier
+- Document Symbols
+- Automatically load remote schema files (by enabling DiagnosticsOptions.enableSchemaRequest)
+- Links from JSON references.
+- Links and hover effects from YAML anchors.
 
-`yarn add monaco-yaml`
+Schemas can also be provided by configuration. See
-Both vs loader and ESM are supported.
+[here](https://github.com/remcohaszing/monaco-yaml/blob/main/index.d.ts) for the API that the plugin
-See `examples` directory for esm and umd examples.
+offers to configure the YAML language support.
 
-## Development
+## Installation
 
-* `git clone https://github.com/pengx17/monaco-yaml`
+```sh
-* `cd monaco-yaml`
+npm install monaco-yaml
-* `yarn`
+```
 
-A running example:
+## Usage
-![demo-image](test-demo.png)
+
+Import `monaco-yaml` and configure it before an editor instance is created.
+
+```typescript
+import { editor, Uri } from 'monaco-editor';
+import { setDiagnosticsOptions } from 'monaco-yaml';
+
+// The uri is used for the schema file match.
+const modelUri = Uri.parse('a://b/foo.yaml');
+
+setDiagnosticsOptions({
+  enableSchemaRequest: true,
+  hover: true,
+  completion: true,
+  validate: true,
+  format: true,
+  schemas: [
+    {
+      // Id of the first schema
+      uri: 'http://myserver/foo-schema.json',
+      // Associate with our model
+      fileMatch: [String(modelUri)],
+      schema: {
+        type: 'object',
+        properties: {
+          p1: {
+            enum: ['v1', 'v2'],
+          },
+          p2: {
+            // Reference the second schema
+            $ref: 'http://myserver/bar-schema.json',
+          },
+        },
+      },
+    },
+    {
+      // Id of the first schema
+      uri: 'http://myserver/bar-schema.json',
+      schema: {
+        type: 'object',
+        properties: {
+          q1: {
+            enum: ['x1', 'x2'],
+          },
+        },
+      },
+    },
+  ],
+});
+
+editor.create(document.createElement('editor'), {
+  // Monaco-yaml features should just work if the editor language is set to 'yaml'.
+  language: 'yaml',
+  model: editor.createModel('p1: \n', 'yaml', modelUri),
+});
+```
+
+Also make sure to register the web worker. When using Webpack 5, this looks like the code below.
+Other bundlers may use a different syntax, but the idea is the same. Languages you don’t used can be
+omitted.
+
+```js
+window.MonacoEnvironment = {
+  getWorker(moduleId, label) {
+    switch (label) {
+      case 'editorWorkerService':
+        return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url));
+      case 'css':
+      case 'less':
+      case 'scss':
+        return new Worker(new URL('monaco-editor/esm/vs/language/css/css.worker', import.meta.url));
+      case 'handlebars':
+      case 'html':
+      case 'razor':
+        return new Worker(
+          new URL('monaco-editor/esm/vs/language/html/html.worker', import.meta.url),
+        );
+      case 'json':
+        return new Worker(
+          new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url),
+        );
+      case 'javascript':
+      case 'typescript':
+        return new Worker(
+          new URL('monaco-editor/esm/vs/language/typescript/ts.worker', import.meta.url),
+        );
+      case 'yaml':
+        return new Worker(new URL('monaco-yaml/yaml.worker', import.meta.url));
+      default:
+        throw new Error(`Unknown label ${label}`);
+    }
+  },
+};
+```
+
+## Examples
+
+A demo is available on [monaco-yaml.js.org](https://monaco-yaml.js.org).
+
+A running example: ![demo-image](test-demo.png)
+
+Some usage examples can be found in the
+[examples](https://github.com/remcohaszing/monaco-yaml/tree/main/examples) directory.
+
+## FAQ
+
+### Does this work with the Monaco UMD bundle?
+
+No. Only ESM is supported.
+
+### Does this work with Monaco Editor from a CDN?
+
+No, because these use a UMD bundle, which isn’t supported.
+
+### Does this work with `@monaco-editor/loader` or `@monaco-editor/react`?
+
+No. These packages pull in the Monaco UMD bundle from a CDN. Because UMD isn’t supported, neither
+are these packages.
+
+### Is the web worker necessary?
+
+Yes. The web worker provides the core functionality of `monaco-yaml`.
+
+### Does it work without a bundler?
+
+No. `monaco-yaml` uses dependencies from `node_modules`, so they can be deduped and your bundle size
+is decreased. This comes at the cost of not being able to use it without a bundler.
+
+### How do I integrate `monaco-yaml` with a framework? (Angular, React, Vue, etc.)
+
+`monaco-yaml` only uses the Monaco Editor. It’s not tied to a framework, all that’s needed is a DOM
+node to attach the Monaco Editor to. See the
+[Monaco Editor examples](https://github.com/microsoft/monaco-editor/tree/main/monaco-editor-samples)
+for examples on how to integrate Monaco Editor in your project, then configure `monaco-yaml` as
+described above.
+
+### Does `monaco-yaml` work with `create-react-app`?
+
+Yes, but you’ll have to eject. See
+[#92 (comment)](https://github.com/remcohaszing/monaco-yaml/issues/92#issuecomment-905836058) for
+details.
+
+### Why isn’t `monaco-yaml` working? Official Monaco language extensions do work.
+
+This is most likely due to the fact that `monaco-yaml` is using a different instance of the
+`monaco-editor` package than you are. This is something you’ll want to avoid regardless of
+`monaco-editor`, because it means your bundle is significantly larger than it needs to be. This is
+likely caused by one of the following issues:
+
+- A code splitting misconfiguration
+
+  To solve this, try inspecting your bundle using for example
+  [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer). If
+  `monaco-editor` is in there twice, this is the issue. It’s up to you to solve this, as it’s
+  project-specific.
+
+- You’re using a package which imports `monaco-editor` for you, but it’s using a different version.
+
+  You can find out why the `monaco-editor` is installed using `npm ls monaco-editor` or
+  `yarn why monaco-editor`. It should exist only once, but it’s ok if it’s deduped.
+
+  You may be able to solve this by deleting your `node_modules` folder and `package-lock.json` or
+  `yarn.lock`, then running `npm install` or `yarn install` respectively.
+
+## Contributing
+
+Please see our [contributing guidelines](CONTRIBUTING.md)
 
 ## Credits
-- https://github.com/redhat-developer/yaml-language-server
+
+Originally [@kpdecker](https://github.com/kpdecker) forked this repository from
+[`monaco-json`](https://github.com/microsoft/monaco-json) by
+[@microsoft](https://github.com/microsoft) and rewrote it to work with
+[`yaml-language-server`](https://github.com/redhat-developer/yaml-language-server) instead. Later
+the repository maintenance was taken over by [@pengx17](https://github.com/pengx17). Eventually the
+repository was tranferred to the account of [@remcohaszing](https://github.com/remcohaszing), who is
+currently maintaining this repository with the help of [@fleon](https://github.com/fleon) and
+[@yazaabed](https://github.com/yazaabed).
+
+The heavy processing is done in
+[`yaml-language-server`](https://github.com/redhat-developer/yaml-language-server), best known for
+being the backbone for [`vscode-yaml`](https://github.com/redhat-developer/vscode-yaml). This
+repository provides a thin layer to add functionality provided by `yaml-language-server` into
+`monaco-editor`.
 
 ## License
-[MIT](https://github.com/pengx17/monaco-yaml/blob/master/LICENSE.md)
+
+[MIT](https://github.com/remcohaszing/monaco-yaml/blob/main/LICENSE.md)

build.js

@@ -0,0 +1,58 @@
+const { build } = require('esbuild');
+
+const { dependencies, peerDependencies } = require('./package.json');
+
+build({
+  entryPoints: ['src/index.ts', 'src/yaml.worker.ts'],
+  bundle: true,
+  external: Object.keys({ ...dependencies, ...peerDependencies }),
+  logLevel: 'info',
+  outdir: '.',
+  sourcemap: true,
+  format: 'esm',
+  target: ['es2019'],
+  plugins: [
+    {
+      name: 'alias',
+      setup({ onResolve }) {
+        // The file monaco-yaml/lib/esm/schemaSelectionHandlers.js imports code from the language
+        // server part that we don’t want.
+        onResolve({ filter: /\/schemaSelectionHandlers$/ }, () => ({
+          path: require.resolve('./src/fillers/schemaSelectionHandlers.ts'),
+        }));
+        // The yaml language service only imports re-exports of vscode-languageserver-types from
+        // vscode-languageserver.
+        onResolve({ filter: /^vscode-languageserver(\/node|-protocol)?$/ }, () => ({
+          path: 'vscode-languageserver-types',
+          external: true,
+        }));
+        // The yaml language service uses path. We can stub it using path-browserify.
+        onResolve({ filter: /^path$/ }, () => ({
+          path: 'path-browserify',
+          external: true,
+        }));
+        // The main prettier entry point contains all of Prettier.
+        // The standalone bundle is smaller and works fine for us.
+        onResolve({ filter: /^prettier/ }, ({ path }) => ({
+          path: path === 'prettier' ? 'prettier/standalone.js' : `${path}.js`,
+          external: true,
+        }));
+        // This tiny filler implementation serves all our needs.
+        onResolve({ filter: /vscode-nls/ }, () => ({
+          path: require.resolve('./src/fillers/vscode-nls.ts'),
+        }));
+        // The language server dependencies tend to write both ESM and UMD output alongside each
+        // other, then use UMD for imports. We prefer ESM.
+        onResolve({ filter: /\/umd\// }, (args) => ({
+          path: require.resolve(args.path.replace(/\/umd\//, '/esm/'), {
+            paths: [args.resolveDir],
+          }),
+        }));
+      },
+    },
+  ],
+}).catch((error) => {
+  // eslint-disable-next-line no-console
+  console.error(error);
+  process.exit(1);
+});

examples/demo/README.md

@@ -0,0 +1,31 @@
+# Demo
+
+This demo is deployed to [monaco-yaml.js.org](https://monaco-yaml.js.org). It shows how
+`monaco-editor` and `monaco-yaml` can be used with
+[Webpack 5](https://webpack.js.org/concepts/entry-points).
+
+## Prerequisites
+
+- [NodeJS](https://nodejs.org) 16 or higher
+- [npm](https://github.com/npm/cli) 8.1.2 or higher
+
+## Setup
+
+To run the project locally, clone the repository and set it up:
+
+```sh
+git clone https://github.com/remcohaszing/monaco-yaml
+cd monaco-yaml
+npm ci
+npm run prepack
+```
+
+## Running
+
+To start it, simply run:
+
+```sh
+npm --workspace demo start
+```
+
+The demo will open in your browser.

examples/demo/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "demo",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "webpack serve --open --mode development",
+    "build": "webpack --mode production"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.0.0",
+    "@schemastore/schema-catalog": "^0.0.5",
+    "css-loader": "^6.0.0",
+    "css-minimizer-webpack-plugin": "^3.0.0",
+    "html-webpack-plugin": "^5.0.0",
+    "mini-css-extract-plugin": "^2.0.0",
+    "monaco-editor": "^0.31.0",
+    "monaco-yaml": "file:../..",
+    "ts-loader": "^9.0.0",
+    "typescript": "^4.0.0",
+    "webpack": "^5.0.0",
+    "webpack-cli": "^4.0.0",
+    "webpack-dev-server": "^4.0.0"
+  }
+}

examples/demo/src/icon.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 470.647">
+  <style>
+    @media (prefers-color-scheme: dark) {
+      .char {
+        fill: #ffffff;
+      }
+    }
+  </style>
+	<polygon class="char" points="512 422.735 395.638 422.735 395.638 250.125 347.442 250.125 347.442 469.647 512 469.647 512 422.737 512 422.735" />
+	<polygon class="char" points="87.701 250.177 87.701 470.647 135.004 470.647 135.004 318.569 184.509 420.789 221.743 420.789 272.939 314.976 272.939 470.602 318.318 470.602 318.318 250.177 256.358 250.177 201.381 349.883 149.021 250.177 87.701 250.177 87.701 250.177" />
+	<path fill="#cb171e" d="M330.294,195.39H228.433l-20.717,50.024H162.61L257.99,20.465h46.137l91.51,224.949h-48.2L330.293,195.39Zm-16.92-44.911-31.226-82.55-34.837,82.55h66.063Z" transform="translate(0 -19.939)" />
+	<polygon class="char" points="235.793 0 143.978 137.674 143.978 224.949 87.702 224.949 87.702 137.674 0 0 63.25 0 119.018 88.646 175.243 0 235.793 0 235.793 0" />
+</svg>

examples/demo/src/index.css

@@ -0,0 +1,122 @@
+:root {
+  --background-color: hsl(0, 0%, 96%);
+  --editor-background: hsl(60, 100%, 100%);
+  --foreground-color: hsl(0, 0%, 0%);
+  --primary-color: hsl(189, 100%, 63%);
+  --shadow-color: hsla(0, 0%, 27%, 0.239);
+  --warning-color: hsl(49, 100%, 40%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: hsl(0, 0%, 23%);
+    --editor-background: hsl(0, 0%, 12%);
+    --foreground-color: hsl(0, 0%, 100%);
+    --shadow-color: hsl(0, 0%, 43%);
+    --warning-color: hsl(49, 100%, 40%);
+  }
+}
+
+body {
+  background: var(--background-color);
+  display: flex;
+  flex-flow: column;
+  font-family: sans-serif;
+  height: 100vh;
+  margin: 0;
+}
+
+h1 {
+  margin: 0 1rem;
+}
+
+nav {
+  align-items: center;
+  background-color: var(--primary-color);
+  box-shadow: 0px 5px 5px var(--shadow-color);
+  display: flex;
+  flex: 0 0 auto;
+  height: 3rem;
+  justify-content: space-between;
+}
+
+.nav-icon {
+  text-decoration: none;
+}
+
+.nav-icon > img {
+  height: 2rem;
+  margin-right: 1rem;
+  vertical-align: middle;
+}
+
+.editor-wrapper {
+  background: var(--editor-background);
+  box-shadow: 0 0 10px var(--shadow-color);
+  display: flex;
+  flex: 1 1 auto;
+  flex-flow: column;
+  margin: 1.5rem;
+}
+
+#schema-selection {
+  background-color: var(--editor-background);
+  border: none;
+  border-bottom: 1px solid var(--shadow-color);
+  color: var(--foreground-color);
+  width: 100%;
+}
+
+#breadcrumbs {
+  border-bottom: 1px solid var(--shadow-color);
+  color: var(--foreground-color);
+  flex: 0 0 1rem;
+}
+
+.breadcrumb {
+  cursor: pointer;
+}
+
+#breadcrumbs::before,
+.breadcrumb:not(:last-child)::after {
+  content: '›';
+  margin: 0 0.2rem;
+}
+
+.breadcrumb.array::before {
+  content: '[]';
+}
+
+.breadcrumb.object::before {
+  content: '{}';
+}
+
+#editor {
+  flex: 1 1 auto;
+}
+
+#problems {
+  border-top: 1px solid var(--shadow-color);
+  flex: 0 0 20vh;
+  color: var(--foreground-color);
+  overflow-y: scroll;
+}
+
+.problem {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  padding: 0.25rem;
+}
+
+.problem:hover {
+  background-color: var(--shadow-color);
+}
+
+.problem-text {
+  margin-left: 0.5rem;
+}
+
+.problem .codicon-warning {
+  color: var(--warning-color);
+}

examples/demo/src/index.ejs

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="<%= require('./icon.svg') %>" />
+    <title>Monaco YAML</title>
+  </head>
+  <body>
+    <nav>
+      <h1>Monaco YAML</h1>
+      <div>
+        <a href="https://npmjs.com/package/monaco-yaml" class="nav-icon">
+          <img
+            alt="npm icon"
+            src="<%= require('@fortawesome/fontawesome-free/svgs/brands/npm.svg') %>"
+          />
+        </a>
+        <a href="https://github.com/remcohaszing/monaco-yaml" class="nav-icon">
+          <img
+            alt="GitHub icon"
+            src="<%= require('@fortawesome/fontawesome-free/svgs/brands/github.svg') %>"
+          />
+        </a>
+      </div>
+    </nav>
+    <div class="editor-wrapper">
+      <div>
+        <select id="schema-selection">
+          <option value="monaco-yaml.yaml">Monaco YAML example</option>
+        </select>
+      </div>
+      <div id="breadcrumbs"></div>
+      <div id="editor"></div>
+      <div id="problems"></div>
+    </div>
+  </body>
+</html>

examples/demo/src/index.ts

@@ -0,0 +1,230 @@
+import './index.css';
+
+import { JSONSchemaForSchemaStoreOrgCatalogFiles } from '@schemastore/schema-catalog';
+import { CancellationToken } from 'monaco-editor/esm/vs/base/common/cancellation';
+import { getDocumentSymbols } from 'monaco-editor/esm/vs/editor/contrib/documentSymbols/documentSymbols';
+import {
+  editor,
+  Environment,
+  languages,
+  Position,
+  Range,
+  Uri,
+} from 'monaco-editor/esm/vs/editor/editor.api';
+import { SchemasSettings, setDiagnosticsOptions } from 'monaco-yaml';
+
+// NOTE: This will give you all editor featues. If you would prefer to limit to only the editor
+// features you want to use, import them each individually. See this example: (https://github.com/microsoft/monaco-editor-samples/blob/main/browser-esm-webpack-small/index.js#L1-L91)
+import 'monaco-editor';
+
+import defaultSchemaUri from './schema.json';
+
+declare global {
+  interface Window {
+    MonacoEnvironment: Environment;
+  }
+}
+
+window.MonacoEnvironment = {
+  getWorker(moduleId, label) {
+    switch (label) {
+      case 'editorWorkerService':
+        return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url));
+      case 'yaml':
+        return new Worker(new URL('monaco-yaml/yaml.worker', import.meta.url));
+      default:
+        throw new Error(`Unknown label ${label}`);
+    }
+  },
+};
+
+const defaultSchema: SchemasSettings = {
+  uri: defaultSchemaUri,
+  fileMatch: ['monaco-yaml.yaml'],
+};
+
+setDiagnosticsOptions({
+  schemas: [defaultSchema],
+});
+
+const value = `
+# Property descriptions are displayed when hovering over properties using your cursor
+property: This property has a JSON schema description
+
+
+# Titles work too!
+titledProperty: Titles work too!
+
+
+# Even markdown descriptions work
+markdown: hover me to get a markdown based description 😮
+
+
+# Enums can be autocompleted by placing the cursor after the colon and pressing Ctrl+Space
+enum:
+
+
+# Unused anchors will be reported
+unused anchor: &unused anchor
+
+
+# Of course numbers are supported!
+number: 12
+
+
+# As well as booleans!
+boolean: true
+
+
+# And strings
+string: I am a string
+
+
+# This property is using the JSON schema recursively
+reference:
+  boolean: Not a boolean
+
+
+# Also works in arrays
+array:
+  - string: 12
+    enum: Mewtwo
+    reference:
+      reference:
+        boolean: true
+
+
+# JSON referenses can be clicked for navigation
+pointer:
+  $ref: '#/array'
+
+
+# This anchor can be referenced
+anchorRef: &anchor can be clicked as well
+
+
+# Press control while hovering over the anchor
+anchorPointer: *anchor
+
+
+formatting:       Formatting is supported too! Under the hood this is powered by Prettier. Just press Ctrl+Shift+I or right click and press Format to format this document.
+
+
+
+
+
+
+`.replace(/:$/m, ': ');
+
+const ed = editor.create(document.getElementById('editor'), {
+  automaticLayout: true,
+  model: editor.createModel(value, 'yaml', Uri.parse('monaco-yaml.yaml')),
+  theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'vs-dark' : 'vs-light',
+});
+
+const select = document.getElementById('schema-selection') as HTMLSelectElement;
+
+fetch('https://www.schemastore.org/api/json/catalog.json').then(async (response) => {
+  if (!response.ok) {
+    return;
+  }
+  const catalog = (await response.json()) as JSONSchemaForSchemaStoreOrgCatalogFiles;
+  const schemas = [defaultSchema];
+  catalog.schemas.sort((a, b) => a.name.localeCompare(b.name));
+  for (const { fileMatch, name, url } of catalog.schemas) {
+    const match =
+      typeof name === 'string' && fileMatch?.find((filename) => /\.ya?ml$/i.test(filename));
+    if (!match) {
+      continue;
+    }
+    const option = document.createElement('option');
+    option.value = match;
+
+    option.textContent = name;
+    select.append(option);
+    schemas.push({
+      fileMatch: [match],
+      uri: url,
+    });
+  }
+
+  setDiagnosticsOptions({
+    validate: true,
+    enableSchemaRequest: true,
+    format: true,
+    hover: true,
+    completion: true,
+    schemas,
+  });
+});
+
+select.addEventListener('change', () => {
+  const oldModel = ed.getModel();
+  const newModel = editor.createModel(oldModel.getValue(), 'yaml', Uri.parse(select.value));
+  ed.setModel(newModel);
+  oldModel.dispose();
+});
+
+function* iterateSymbols(
+  symbols: languages.DocumentSymbol[],
+  position: Position,
+): Iterable<languages.DocumentSymbol> {
+  for (const symbol of symbols) {
+    if (Range.containsPosition(symbol.range, position)) {
+      yield symbol;
+      yield* iterateSymbols(symbol.children, position);
+    }
+  }
+}
+
+ed.onDidChangeCursorPosition(async (event) => {
+  const breadcrumbs = document.getElementById('breadcrumbs');
+  const symbols = await getDocumentSymbols(ed.getModel(), false, CancellationToken.None);
+  while (breadcrumbs.lastChild) {
+    breadcrumbs.lastChild.remove();
+  }
+  for (const symbol of iterateSymbols(symbols, event.position)) {
+    const breadcrumb = document.createElement('span');
+    breadcrumb.setAttribute('role', 'button');
+    breadcrumb.classList.add('breadcrumb');
+    breadcrumb.textContent = symbol.name;
+    breadcrumb.title = symbol.detail;
+    if (symbol.kind === languages.SymbolKind.Array) {
+      breadcrumb.classList.add('array');
+    } else if (symbol.kind === languages.SymbolKind.Module) {
+      breadcrumb.classList.add('object');
+    }
+    breadcrumb.addEventListener('click', () => {
+      ed.setPosition({
+        lineNumber: symbol.range.startLineNumber,
+        column: symbol.range.startColumn,
+      });
+      ed.focus();
+    });
+    breadcrumbs.append(breadcrumb);
+  }
+});
+
+editor.onDidChangeMarkers(([resource]) => {
+  const problems = document.getElementById('problems');
+  const markers = editor.getModelMarkers({ resource });
+  while (problems.lastChild) {
+    problems.lastChild.remove();
+  }
+  for (const marker of markers) {
+    const wrapper = document.createElement('div');
+    wrapper.setAttribute('role', 'button');
+    const codicon = document.createElement('div');
+    const text = document.createElement('div');
+    wrapper.classList.add('problem');
+    codicon.classList.add('codicon', 'codicon-warning');
+    text.classList.add('problem-text');
+    text.textContent = marker.message;
+    wrapper.append(codicon, text);
+    wrapper.addEventListener('click', () => {
+      ed.setPosition({ lineNumber: marker.startLineNumber, column: marker.startColumn });
+      ed.focus();
+    });
+    problems.append(wrapper);
+  }
+});

examples/demo/src/schema.json

@@ -0,0 +1,41 @@
+{
+  "type": "object",
+  "properties": {
+    "property": {
+      "description": "I have a description"
+    },
+    "titledProperty": {
+      "title": "I have a title",
+      "description": "I also have a description"
+    },
+    "markdown": {
+      "markdownDescription": "Even **markdown** _descriptions_ `are` ~~not~~ supported!"
+    },
+    "enum": {
+      "description": "Pick your starter",
+      "enum": ["Bulbasaur", "Squirtle", "Charmander", "Pikachu"]
+    },
+    "number": {
+      "description": "Numbers work!",
+      "minimum": 42,
+      "maximum": 1337
+    },
+    "boolean": {
+      "description": "Are boolean supported?",
+      "type": "boolean"
+    },
+    "string": {
+      "type": "string"
+    },
+    "reference": {
+      "description": "JSON schemas can be referenced, even recursively",
+      "$ref": "#"
+    },
+    "array": {
+      "description": "It also works in arrays",
+      "items": {
+        "$ref": "#"
+      }
+    }
+  }
+}

examples/demo/src/types.d.ts

@@ -0,0 +1,29 @@
+declare module 'monaco-editor/esm/vs/base/common/cancellation' {
+  export enum CancellationToken {
+    None,
+  }
+}
+
+declare module 'monaco-editor/esm/vs/editor/contrib/documentSymbols/documentSymbols' {
+  import { ITextModel, languages } from 'monaco-editor';
+  import { CancellationToken } from 'monaco-editor/esm/vs/base/common/cancellation';
+
+  export function getDocumentSymbols(
+    model: ITextModel,
+    flat: boolean,
+    token: CancellationToken,
+  ): Promise<languages.DocumentSymbol[]>;
+}
+
+declare module 'monaco-editor/esm/vs/editor/editor.worker.js' {
+  import { worker } from 'monaco-editor/esm/vs/editor/editor.api';
+
+  export function initialize(
+    fn: (ctx: worker.IWorkerContext, createData: unknown) => unknown,
+  ): void;
+}
+
+declare module '*.json' {
+  declare const uri: string;
+  export default uri;
+}

examples/demo/webpack.config.js

@@ -0,0 +1,39 @@
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  output: {
+    filename: '[contenthash].js',
+  },
+  devtool: 'source-map',
+  resolve: {
+    extensions: ['.mjs', '.js', '.ts'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+      {
+        // Monaco editor uses .ttf icons.
+        test: /\.(svg|ttf)$/,
+        type: 'asset/resource',
+      },
+      {
+        test: /schema\.json$/,
+        type: 'asset/resource',
+      },
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader',
+        options: { transpileOnly: true },
+      },
+    ],
+  },
+  optimization: {
+    minimizer: ['...', new CssMinimizerPlugin()],
+  },
+  plugins: [new HtmlWebPackPlugin(), new MiniCssExtractPlugin({ filename: '[contenthash].css' })],
+};

examples/monaco-editor-webpack-plugin/README.md

@@ -0,0 +1,35 @@
+# Monaco Editor Webpack Loader Plugin Example
+
+This demo demonstrates how bundle `monaco-editor` and `monaco-yaml` with
+[monaco-editor-webpack-plugin](https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin).
+The build output is
+[esm library](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). Example is
+based on
+[link](https://github.com/microsoft/monaco-editor/tree/main/samples/browser-esm-webpack-monaco-plugin).
+To start it, simply run:
+
+## Prerequisites
+
+- [NodeJS](https://nodejs.org) 16 or higher
+- [npm](https://github.com/npm/cli) 8.1.2 or higher
+
+## Setup
+
+To run the project locally, clone the repository and set it up:
+
+```sh
+git clone https://github.com/remcohaszing/monaco-yaml
+cd monaco-yaml
+npm ci
+npm run prepack
+```
+
+## Running
+
+To start it, simply run:
+
+```sh
+npm --workspace monaco-editor-webpack-plugin-example start
+```
+
+The demo will open in your browser.

examples/monaco-editor-webpack-plugin/editor.js

@@ -0,0 +1,4 @@
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+
+export { setDiagnosticsOptions } from 'monaco-yaml';
+export default monaco;

examples/monaco-editor-webpack-plugin/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Monaco Editor Webpack Plugin Example</title>
+    <style>
+      .editor {
+        width: 800px;
+        height: 600px;
+        border: 1px solid #ccc;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="editor"></div>
+    <script src="index.js" type="module"></script>
+  </body>
+</html>

examples/monaco-editor-webpack-plugin/index.js

@@ -0,0 +1,37 @@
+const value = `
+number: 0xfe
+boolean: true
+`;
+
+async function create() {
+  // Dynamic import is possible
+  const { default: monaco } = await import('./main.js');
+
+  // Define schema first
+  monaco.languages.yaml.yamlDefaults.setDiagnosticsOptions({
+    schemas: [
+      {
+        fileMatch: ['*'],
+        uri: 'my-schema.json',
+        schema: {
+          type: 'object',
+          properties: {
+            number: {
+              description: 'number property',
+              type: 'number',
+            },
+          },
+        },
+      },
+    ],
+  });
+
+  // Create editor
+  monaco.editor.create(document.querySelector('.editor'), {
+    language: 'yaml',
+    tabSize: 2,
+    value,
+  });
+}
+
+create();

examples/monaco-editor-webpack-plugin/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "monaco-editor-webpack-plugin-example",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "webpack serve --open --mode development",
+    "build": "webpack --mode production"
+  },
+  "dependencies": {
+    "css-loader": "^6.0.0",
+    "monaco-editor": "^0.31.0",
+    "monaco-editor-webpack-plugin": "^7.0.0",
+    "monaco-yaml": "file:../..",
+    "style-loader": "^3.0.0",
+    "webpack": "^5.0.0",
+    "webpack-cli": "^4.0.0",
+    "webpack-dev-server": "^4.0.0"
+  }
+}

examples/monaco-editor-webpack-plugin/webpack.config.js

@@ -0,0 +1,49 @@
+import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
+
+export default {
+  entry: './editor.js',
+  output: {
+    filename: '[name].js',
+    library: {
+      type: 'module',
+    },
+    clean: true,
+  },
+  target: 'es2020',
+  experiments: {
+    outputModule: true,
+  },
+  devtool: 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.ttf$/,
+        type: 'asset',
+      },
+    ],
+  },
+  plugins: [
+    new MonacoWebpackPlugin({
+      languages: [],
+      customLanguages: [
+        {
+          label: 'yaml',
+          entry: ['monaco-yaml', 'vs/basic-languages/yaml/yaml.contribution'],
+          worker: {
+            id: 'monaco-yaml/yamlWorker',
+            entry: 'monaco-yaml/yaml.worker',
+          },
+        },
+      ],
+    }),
+  ],
+  devServer: {
+    static: {
+      directory: './',
+    },
+  },
+};

examples/react-webpack-worker-loader/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
-}

examples/react-webpack-worker-loader/.gitignore

@@ -1,2 +0,0 @@
-dist/
-node_modules/

examples/react-webpack-worker-loader/README.md

@@ -1,9 +0,0 @@
-# Demo: React + Weback + Worker Loader + Babel
-
-To run:
-```
-yarn && yarn start
-```
-
-The demo will open in your browser. See (index.jsx)[index.jsx#L34-L36] for the schema loaded.
-

examples/react-webpack-worker-loader/index.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>React Example</title>
-  </head>
-  <body>
-    <div id="react"></div>
-  </body>
-</html>

examples/react-webpack-worker-loader/index.jsx

@@ -1,80 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import MonacoEditor from 'react-monaco-editor';
-import 'monaco-yaml/lib/esm/monaco.contribution';
-import { languages } from 'monaco-editor/esm/vs/editor/editor.api';
-
-// NOTE: This will give you all editor featues. If you would prefer to limit to only the editor
-// features you want to use, import them each individually. See this example: (https://github.com/microsoft/monaco-editor-samples/blob/master/browser-esm-webpack-small/index.js#L1-L91)
-import 'monaco-editor';
-
-// NOTE: using loader syntax becuase Yaml worker imports editor.worker directly and that
-// import shouldn't go through loader syntax.
-import EditorWorker from 'worker-loader!monaco-editor/esm/vs/editor/editor.worker';
-import YamlWorker from 'worker-loader!monaco-yaml/lib/esm/yaml.worker';
-
-window.MonacoEnvironment = {
-  getWorker(workerId, label) {
-    if (label === 'yaml') {
-      return new YamlWorker();
-    }
-    return new EditorWorker();
-  },
-};
-
-const { yaml } = languages || {};
-
-const Editor = () => {
-  const [value, setValue] = useState('p1: ');
-  useEffect(() => {
-    yaml &&
-      yaml.yamlDefaults.setDiagnosticsOptions({
-        validate: true,
-        enableSchemaRequest: true,
-        hover: true,
-        completion: true,
-        schemas: [
-          {
-            uri: 'http://myserver/foo-schema.json', // id of the first schema
-            fileMatch: ['*'], // associate with our model
-            schema: {
-              id: 'http://myserver/foo-schema.json', // id of the first schema
-              type: 'object',
-              properties: {
-                p1: {
-                  enum: ['v1', 'v2'],
-                },
-                p2: {
-                  $ref: 'http://myserver/bar-schema.json', // reference the second schema
-                },
-              },
-            },
-          },
-          {
-            uri: 'http://myserver/bar-schema.json', // id of the first schema
-            schema: {
-              id: 'http://myserver/bar-schema.json', // id of the first schema
-              type: 'object',
-              properties: {
-                q1: {
-                  enum: ['x1', 'x2'],
-                },
-              },
-            },
-          },
-        ],
-      });
-  }, []);
-
-  return (
-    <MonacoEditor
-      width="800"
-      height="600"
-      language="yaml"
-      value={value}
-      onChange={setValue}
-    />
-  );
-};
-
-ReactDOM.render(<Editor />, document.getElementById('react'));

examples/react-webpack-worker-loader/package.json

@@ -1,31 +0,0 @@
-{
-  "name": "react-webpack-worker-loader-example",
-  "version": "1.0.0",
-  "description": "",
-  "private": true,
-  "main": "index.js",
-  "scripts": {
-    "start": "webpack-dev-server --open --mode development",
-    "build": "webpack --mode production"
-  },
-  "author": "",
-  "devDependencies": {
-    "@babel/core": "^7.8.4",
-    "@babel/preset-env": "^7.8.4",
-    "@babel/preset-react": "^7.8.3",
-    "babel-loader": "^8.0.6",
-    "css-loader": "^3.4.2",
-    "file-loader": "^5.1.0",
-    "html-webpack-plugin": "^3.2.0",
-    "monaco-editor": "^0.20.0",
-    "monaco-yaml": "file:../..",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-monaco-editor": "^0.34.0",
-    "style-loader": "^1.1.3",
-    "webpack": "^4.41.6",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3",
-    "worker-loader": "^2.0.0"
-  }
-}

examples/react-webpack-worker-loader/webpack.config.js

@@ -1,41 +0,0 @@
-const HtmlWebPackPlugin = require('html-webpack-plugin');
-const path = require('path');
-
-module.exports = {
-  entry: {
-    main: './index.jsx',
-  },
-  output: {
-    globalObject: 'this',
-    filename: '[name].bundle.js',
-    path: path.resolve(__dirname, 'dist'),
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-        },
-      },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
-      },
-      {
-        test: /\.ttf$/,
-        loader: 'file-loader',
-      },
-    ],
-  },
-  plugins: [
-    new HtmlWebPackPlugin({
-      template: './index.html',
-    }),
-  ],
-  node: {
-    fs: 'empty',
-    module: 'empty',
-  },
-};

examples/react-webpack/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
-}

examples/react-webpack/.gitignore

@@ -1,2 +0,0 @@
-dist/
-node_modules/

examples/react-webpack/README.md

@@ -1,9 +0,0 @@
-# Demo: React + Weback + Babel
-
-To run:
-```
-yarn && yarn start
-```
-
-The demo will open in your browser. See (index.jsx)[index.jsx#L34-L36] for the schema loaded.
-

examples/react-webpack/index.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>React Example</title>
-  </head>
-  <body>
-    <div id="react"></div>
-  </body>
-</html>

examples/react-webpack/index.jsx

@@ -1,75 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import MonacoEditor from 'react-monaco-editor';
-import 'monaco-yaml/lib/esm/monaco.contribution';
-import { languages } from 'monaco-editor/esm/vs/editor/editor.api';
-
-// NOTE: This will give you all editor featues. If you would prefer to limit to only the editor
-// features you want to use, import them each individually. See this example: (https://github.com/microsoft/monaco-editor-samples/blob/master/browser-esm-webpack-small/index.js#L1-L91)
-import 'monaco-editor';
-
-window.MonacoEnvironment = {
-  getWorkerUrl(moduleId, label) {
-    if (label === 'yaml') {
-      return './yaml.worker.bundle.js';
-    }
-    return './editor.worker.bundle.js';
-  },
-};
-
-const { yaml } = languages || {};
-
-const Editor = () => {
-  const [value, setValue] = useState('p1: ');
-  useEffect(() => {
-    yaml &&
-      yaml.yamlDefaults.setDiagnosticsOptions({
-        validate: true,
-        enableSchemaRequest: true,
-        hover: true,
-        completion: true,
-        schemas: [
-          {
-            uri: 'http://myserver/foo-schema.json', // id of the first schema
-            fileMatch: ['*'], // associate with our model
-            schema: {
-              id: 'http://myserver/foo-schema.json', // id of the first schema
-              type: 'object',
-              properties: {
-                p1: {
-                  enum: ['v1', 'v2'],
-                },
-                p2: {
-                  $ref: 'http://myserver/bar-schema.json', // reference the second schema
-                },
-              },
-            },
-          },
-          {
-            uri: 'http://myserver/bar-schema.json', // id of the first schema
-            schema: {
-              id: 'http://myserver/bar-schema.json', // id of the first schema
-              type: 'object',
-              properties: {
-                q1: {
-                  enum: ['x1', 'x2'],
-                },
-              },
-            },
-          },
-        ],
-      });
-  }, []);
-
-  return (
-    <MonacoEditor
-      width="800"
-      height="600"
-      language="yaml"
-      value={value}
-      onChange={setValue}
-    />
-  );
-};
-
-ReactDOM.render(<Editor />, document.getElementById('react'));

examples/react-webpack/package.json

@@ -1,30 +0,0 @@
-{
-  "name": "react-webpack-example",
-  "version": "1.0.0",
-  "description": "",
-  "private": true,
-  "main": "index.js",
-  "scripts": {
-    "start": "webpack-dev-server --open --mode development",
-    "build": "webpack --mode production"
-  },
-  "author": "",
-  "devDependencies": {
-    "@babel/core": "^7.8.4",
-    "@babel/preset-env": "^7.8.4",
-    "@babel/preset-react": "^7.8.3",
-    "babel-loader": "^8.0.6",
-    "css-loader": "^3.4.2",
-    "file-loader": "^5.1.0",
-    "html-webpack-plugin": "^3.2.0",
-    "monaco-editor": "^0.20.0",
-    "monaco-yaml": "file:../..",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-monaco-editor": "^0.34.0",
-    "style-loader": "^1.1.3",
-    "webpack": "^4.41.6",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
-  }
-}

examples/react-webpack/webpack.config.js

@@ -1,43 +0,0 @@
-const HtmlWebPackPlugin = require('html-webpack-plugin');
-const path = require('path');
-
-module.exports = {
-  entry: {
-    main: './index.jsx',
-    'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
-    'yaml.worker': 'monaco-yaml/lib/esm/yaml.worker.js',
-  },
-  output: {
-    globalObject: 'this',
-    filename: '[name].bundle.js',
-    path: path.resolve(__dirname, 'dist'),
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-        },
-      },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
-      },
-      {
-        test: /\.ttf$/,
-        loader: 'file-loader',
-      },
-    ],
-  },
-  plugins: [
-    new HtmlWebPackPlugin({
-      template: './index.html',
-    }),
-  ],
-  node: {
-    fs: 'empty',
-    module: 'empty',
-  },
-};

examples/umd/index.html

@@ -1,162 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-    <link
-      rel="stylesheet"
-      data-name="vs/editor/editor.main"
-      href="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.css"
-    />
-  </head>
-
-  <body>
-    <h2>Monaco Editor YAML test page</h2>
-    <code id="path"></code>
-    <div
-      id="container"
-      style="width:800px;height:600px;border:1px solid grey"
-    ></div>
-
-    <style>
-      .x-highlight-range {
-        background-color: lightblue;
-      }
-    </style>
-
-    <script>
-      // Loading basic-languages to get the YAML language definition
-      var paths = {
-        'vs/basic-languages': '../node_modules/monaco-languages/release/dev',
-        'vs/language/yaml': '../lib/dev',
-        vs: '../node_modules/monaco-editor-core/dev/vs',
-        prettier: '../node_modules/prettier',
-      };
-      if (document.location.protocol === 'http:') {
-        // Add support for running local http server
-        let testIndex = document.location.pathname.indexOf('/test/');
-        if (testIndex !== -1) {
-          let prefix = document.location.pathname.substr(0, testIndex);
-          paths['vs/language/yaml'] = prefix + '/lib/dev';
-        }
-      }
-      var require = {
-        paths: paths,
-      };
-    </script>
-    <script src="../node_modules/monaco-editor-core/dev/vs/loader.js"></script>
-    <script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.nls.js"></script>
-    <script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.js"></script>
-
-    <script>
-      require([
-        'vs/basic-languages/monaco.contribution',
-        'vs/language/yaml/monaco.contribution',
-        'prettier/standalone',
-        'prettier/parser-yaml',
-      ], function() {
-        const yaml = `p1: `;
-        const modelUri = monaco.Uri.parse('a://b/foo.json');
-        const editor = monaco.editor.create(
-          document.getElementById('container'),
-          {
-            language: 'yaml',
-            showFoldingControls: 'always',
-            model: monaco.editor.createModel(yaml, 'yaml', modelUri),
-          }
-        );
-
-        monaco.languages.yaml.yamlDefaults.setDiagnosticsOptions({
-          enableSchemaRequest: true,
-          hover: true,
-          completion: true,
-          validate: true,
-          format: true,
-          schemas: [
-            {
-              uri: 'http://myserver/foo-schema.json', // id of the first schema
-              fileMatch: [modelUri.toString()], // associate with our model
-              schema: {
-                type: 'object',
-                properties: {
-                  p1: {
-                    enum: ['v1', 'v2'],
-                  },
-                  p2: {
-                    $ref: 'http://myserver/bar-schema.json', // reference the second schema
-                  },
-                },
-              },
-            },
-            {
-              uri: 'http://myserver/bar-schema.json', // id of the first schema
-              schema: {
-                type: 'object',
-                properties: {
-                  q1: {
-                    enum: ['x1', 'x2'],
-                  },
-                },
-              },
-            },
-          ],
-        });
-
-        require(['vs/editor/contrib/quickOpen/quickOpen'], async quickOpen => {
-          const NEVER_CANCEL_TOKEN = {
-            isCancellationRequested: false,
-            onCancellationRequested: () => Event.NONE,
-          };
-
-          let oldDecorations = [];
-
-          async function _getSymbolForPosition(model, position) {
-            const symbols = await quickOpen.getDocumentSymbols(
-              model,
-              false,
-              NEVER_CANCEL_TOKEN
-            );
-
-            function _recur(symbol) {
-              let target = symbol;
-              if (symbol && symbol.children && symbol.children.length) {
-                target =
-                  _recur(
-                    symbol.children.find(child =>
-                      child.range.containsPosition(position)
-                    )
-                  ) || symbol;
-              }
-
-              return target;
-            }
-
-            return _recur({ children: symbols });
-          }
-
-          editor.onDidChangeCursorSelection(async ({ selection }) => {
-            const model = editor.getModel();
-            const position = selection.getPosition();
-            const symbol = await _getSymbolForPosition(model, position);
-
-            console.log(`${symbol.name}: ${symbol.range}`);
-            if (symbol && symbol.range) {
-              const decoration = {
-                range: symbol.range,
-                options: {
-                  isWholeLine: false,
-                  className: 'x-highlight-range',
-                },
-              };
-
-              oldDecorations = editor.deltaDecorations(
-                oldDecorations,
-                decoration ? [decoration] : []
-              );
-            }
-          });
-        });
-      });
-    </script>
-  </body>
-</html>

examples/vite-example/README.md

@@ -0,0 +1,29 @@
+# Vite Example
+
+This minimal example shows how `monaco-yaml` can be used with [Vite](https://vitejs.dev).
+
+## Prerequisites
+
+- [NodeJS](https://nodejs.org) 16 or higher
+- [npm](https://github.com/npm/cli) 8.1.2 or higher
+
+## Setup
+
+To run the project locally, clone the repository and set it up:
+
+```sh
+git clone https://github.com/remcohaszing/monaco-yaml
+cd monaco-yaml
+npm ci
+npm run prepack
+```
+
+## Running
+
+To start it, simply run:
+
+```sh
+npm --workspace vite-example start
+```
+
+The demo will be available on http://localhost:3000.

examples/vite-example/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Monaco YAML</title>
+  </head>
+  <body>
+    <div id="editor" style="width: 800px; height: 600px;"></div>
+    <script type="module" src="/index.js"></script>
+  </body>
+</html>

examples/vite-example/index.js

@@ -0,0 +1,67 @@
+import { editor, Uri } from 'monaco-editor';
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import { setDiagnosticsOptions } from 'monaco-yaml';
+import YamlWorker from 'monaco-yaml/yaml.worker?worker';
+
+window.MonacoEnvironment = {
+  getWorker(moduleId, label) {
+    switch (label) {
+      case 'editorWorkerService':
+        return new EditorWorker();
+      case 'yaml':
+        return new YamlWorker();
+      default:
+        throw new Error(`Unknown label ${label}`);
+    }
+  },
+};
+
+// The uri is used for the schema file match.
+const modelUri = Uri.parse('a://b/foo.yaml');
+
+setDiagnosticsOptions({
+  enableSchemaRequest: true,
+  hover: true,
+  completion: true,
+  validate: true,
+  format: true,
+  schemas: [
+    {
+      // Id of the first schema
+      uri: 'http://myserver/foo-schema.json',
+      // Associate with our model
+      fileMatch: [String(modelUri)],
+      schema: {
+        type: 'object',
+        properties: {
+          p1: {
+            enum: ['v1', 'v2'],
+          },
+          p2: {
+            // Reference the second schema
+            $ref: 'http://myserver/bar-schema.json',
+          },
+        },
+      },
+    },
+    {
+      // Id of the first schema
+      uri: 'http://myserver/bar-schema.json',
+      schema: {
+        type: 'object',
+        properties: {
+          q1: {
+            enum: ['x1', 'x2'],
+          },
+        },
+      },
+    },
+  ],
+});
+
+const value = 'p1: \np2: \n';
+
+editor.create(document.getElementById('editor'), {
+  automaticLayout: true,
+  model: editor.createModel(value, 'yaml', modelUri),
+});

examples/vite-example/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "vite-example",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "monaco-editor": "^0.31.0",
+    "monaco-yaml": "file:../..",
+    "vite": "^2.0.0"
+  }
+}

index.d.ts

@@ -0,0 +1,112 @@
+import { JSONSchema4, JSONSchema6, JSONSchema7 } from 'json-schema';
+import { IEvent, languages } from 'monaco-editor/esm/vs/editor/editor.api';
+
+export interface SchemasSettings {
+  /**
+   * A `Uri` file match which will trigger the schema validation. This may be a glob or an exact
+   * path.
+   *
+   * @example '.gitlab-ci.yml'
+   * @example 'file://**\/.github/actions/*.yaml'
+   */
+  fileMatch: string[];
+
+  /**
+   * The JSON schema which will be used for validation. If not specified, it will be downloaded from
+   * `uri`.
+   */
+  schema?: JSONSchema4 | JSONSchema6 | JSONSchema7;
+
+  /**
+   * The source URI of the JSON schema. The JSON schema will be downloaded from here if no schema
+   * was supplied. It will also be displayed as the source in hover tooltips.
+   */
+  uri: string;
+}
+
+declare module 'monaco-editor/esm/vs/editor/editor.api' {
+  namespace languages.yaml {
+    export interface DiagnosticsOptions {
+      /**
+       * If set, enable schema based autocompletion.
+       *
+       * @default true
+       */
+      readonly completion?: boolean;
+
+      /**
+       * A list of custom tags.
+       *
+       * @default []
+       */
+      readonly customTags?: string[];
+
+      /**
+       * If set, the schema service would load schema content on-demand with 'fetch' if available
+       *
+       * @default false
+       */
+      readonly enableSchemaRequest?: boolean;
+
+      /**
+       * If true, formatting using Prettier is enabled. Setting this to `false` does **not** exclude
+       * Prettier from the bundle.
+       *
+       * @default true
+       */
+      readonly format?: boolean;
+
+      /**
+       * If set, enable hover typs based the JSON schema.
+       *
+       * @default true
+       */
+      readonly hover?: boolean;
+
+      /**
+       * If true, a different diffing algorithm is used to generate error messages.
+       *
+       * @default false
+       */
+      readonly isKubernetes?: boolean;
+
+      /**
+       * A list of known schemas and/or associations of schemas to file names.
+       *
+       * @default []
+       */
+      readonly schemas?: SchemasSettings[];
+
+      /**
+       * If set, the validator will be enabled and perform syntax validation as well as schema
+       * based validation.
+       *
+       * @default true
+       */
+      readonly validate?: boolean;
+
+      /**
+       * The YAML version to use for parsing.
+       *
+       * @default '1.2'
+       */
+      readonly yamlVersion?: '1.1' | '1.2';
+    }
+
+    export interface LanguageServiceDefaults {
+      readonly onDidChange: IEvent<LanguageServiceDefaults>;
+      readonly languageId: string;
+      readonly diagnosticsOptions: DiagnosticsOptions;
+      setDiagnosticsOptions: (options: DiagnosticsOptions) => void;
+    }
+
+    export const yamlDefaults: LanguageServiceDefaults;
+  }
+}
+
+/**
+ * Configure `monaco-yaml` diagnostics options.
+ *
+ * @param options - The options to set.
+ */
+export function setDiagnosticsOptions(options?: languages.yaml.DiagnosticsOptions): void;

netlify.toml

@@ -0,0 +1,3 @@
+[build]
+publish = 'examples/demo/dist/'
+command = 'npm ci && npm run prepack && npm --workspace demo run build'

package.json

@@ -1,91 +1,71 @@
 {
   "name": "monaco-yaml",
-  "version": "2.5.0",
+  "version": "4.0.0-alpha.1",
   "description": "YAML plugin for the Monaco Editor",
+  "homepage": "https://monaco-yaml.js.org",
   "scripts": {
-    "watch": "tsc -p ./src --watch",
+    "prepack": "node build.js",
-    "compile": "rimraf ./out && yarn compile:umd && yarn compile:esm",
+    "prepare": "husky install"
-    "compile:umd": "tsc -p ./tsconfig.json",
-    "compile:esm": "tsc -p ./tsconfig.esm.json",
-    "bundle": "rimraf ./lib && yarn bundle:umd && yarn bundle:esm && mcopy ./src/monaco.d.ts ./lib/monaco.d.ts",
-    "bundle:umd": "node ./scripts/bundle-umd",
-    "bundle:esm": "node ./scripts/bundle-esm",
-    "build": "yarn compile && yarn bundle",
-    "prepare": "yarn build",
-    "lint": "prettier \"{src,test}/**/*.{json,scss,html,ts}\" --write",
-    "test": "jest --verbose"
-  },
-  "main": "./lib/esm/monaco.contribution.js",
-  "module": "./lib/esm/monaco.contribution.js",
-  "typings": "./lib/monaco.d.ts",
-  "directories": {
-    "lib": "./lib"
   },
+  "typings": "./index.d.ts",
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "yaml.worker.js"
+  ],
+  "workspaces": [
+    "examples/*"
+  ],
   "author": "Kevin Decker <kpdecker@gmail.com> (http://incaseofstairs.com)",
   "maintainers": [
-    "kpdecker",
+    "Remco Haszing <remcohaszing@gmail.com> (https://github.com/remcohaszing)"
-    "pengx17"
   ],
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/pengx17/monaco-yaml"
+    "url": "https://github.com/remcohaszing/monaco-yaml"
   },
   "bugs": {
-    "url": "https://github.com/pengx17/monaco-yaml/issues"
+    "url": "https://github.com/remcohaszing/monaco-yaml/issues"
   },
+  "keywords": [
+    "editor",
+    "frontend",
+    "front-end",
+    "monaco",
+    "monaco-editor",
+    "yaml"
+  ],
   "dependencies": {
-    "yaml-language-server": "^0.11.1"
+    "@types/json-schema": "^7.0.0",
+    "jsonc-parser": "^3.0.0",
+    "path-browserify": "^1.0.0",
+    "prettier": "2.0.5",
+    "vscode-languageserver-textdocument": "^1.0.0",
+    "vscode-languageserver-types": "^3.0.0",
+    "yaml": "2.0.0-10"
+  },
+  "peerDependencies": {
+    "monaco-editor": ">=0.30"
   },
   "devDependencies": {
-    "@types/jest": "^23.3.10",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
-    "@types/node": "^12.12.6",
+    "esbuild": "^0.14.0",
-    "husky": "^1.2.1",
+    "eslint": "^7.0.0",
-    "jest": "^23.6.0",
+    "eslint-config-remcohaszing": "^3.0.0",
-    "lint-staged": "^10.1.2",
+    "husky": "^7.0.0",
-    "monaco-editor": "^0.21.2",
+    "lint-staged": "^12.0.0",
-    "monaco-editor-core": "^0.21.2",
+    "monaco-editor": "^0.31.0",
-    "monaco-languages": "^2.1.1",
+    "type-fest": "^2.0.0",
-    "monaco-plugin-helpers": "^1.0.3",
+    "typescript": "^4.0.0",
-    "prettier": "^1.19.1",
+    "yaml-language-server": "^1.0.0"
-    "requirejs": "^2.3.6",
-    "rimraf": "^2.6.2",
-    "ts-jest": "^23.10.5",
-    "typescript": "^3.8.3",
-    "typescript-tslint-plugin": "^0.5.5",
-    "eslint": "^6.8.0",
-    "uglify-es": "^3.3.9"
-  },
-  "prettier": {
-    "singleQuote": true,
-    "trailingComma": "es5",
-    "semi": true
   },
   "lint-staged": {
-    "src/*.{json,scss,html,ts,js,jsx}|scripts/*.js": [
+    "*.{css,json,md,html,yaml}": [
       "prettier --write"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "jest": {
-    "globals": {
-      "ts-jest": {
-        "tsConfig": "./test/tsconfig.json"
-      }
-    },
-    "moduleFileExtensions": [
-      "js",
-      "ts"
     ],
-    "transform": {
+    "*.{js,ts}": [
-      "^.+\\.(ts|tsx)$": "ts-jest"
+      "eslint"
-    },
-    "testMatch": [
-      "**/test/*.test.+(ts|js)"
     ]
   }
 }

scripts/bundle-esm.js

@@ -1,70 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-const path = require('path');
-const helpers = require('monaco-plugin-helpers');
-
-const REPO_ROOT = path.join(__dirname, '../');
-
-helpers.packageESM({
-  repoRoot: REPO_ROOT,
-  esmSource: 'out/esm',
-  esmDestination: 'lib/esm',
-  entryPoints: ['monaco.contribution.js', 'yamlMode.js', 'yaml.worker.js'],
-  resolveAlias: {
-    'vscode-nls': path.join(REPO_ROOT, 'out/esm/fillers/vscode-nls.js'),
-    'vscode-json-languageservice/lib/umd/services/jsonValidation': path.join(
-      REPO_ROOT,
-      'node_modules/vscode-json-languageservice/lib/esm/services/jsonValidation.js'
-    ),
-    'vscode-json-languageservice': path.join(
-      REPO_ROOT,
-      'node_modules/vscode-json-languageservice/lib/esm/jsonLanguageService.js'
-    ),
-    'vscode-json-languageservice/lib/umd/services/jsonHover': path.join(
-      REPO_ROOT,
-      'node_modules/vscode-json-languageservice/lib/esm/services/jsonHover.js'
-    ),
-    'vscode-json-languageservice/lib/umd/services/jsonDocumentSymbols': path.join(
-      REPO_ROOT,
-      'node_modules/vscode-json-languageservice/lib/esm/services/jsonDocumentSymbols.js'
-    ),
-    'vscode-json-languageservice/lib/umd/services/jsonSchemaService': path.join(
-      REPO_ROOT,
-      'node_modules/vscode-json-languageservice/lib/esm/services/jsonSchemaService.js'
-    ),
-
-    'vscode-json-languageservice/lib/umd/services/jsonCompletion': path.join(
-      REPO_ROOT,
-      'node_modules/vscode-json-languageservice/lib/esm/services/jsonCompletion.js'
-    ),
-    'vscode-json-languageservice/lib/umd/services/jsonDefinition': path.join(
-      REPO_ROOT,
-      'node_modules/vscode-json-languageservice/lib/esm/services/jsonDefinition.js'
-    ),
-    'yaml-language-server': path.join(
-      REPO_ROOT,
-      'node_modules/yaml-language-server/lib/esm/languageservice/yamlLanguageService.js'
-    ),
-    prettier: path.join(REPO_ROOT, 'node_modules/prettier/standalone.js'),
-    'prettier/parser-yaml': path.join(
-      REPO_ROOT,
-      'node_modules/prettier/parser-yaml.js'
-    ),
-  },
-  resolveSkip: [
-    'monaco-editor',
-    'monaco-editor-core',
-    'js-yaml',
-
-    'yaml-ast-parser-custom-tags',
-  ],
-  destinationFolderSimplification: {
-    node_modules: '_deps',
-    'jsonc-parser/lib/esm': 'jsonc-parser',
-    'vscode-languageserver-types/lib/esm': 'vscode-languageserver-types',
-    'vscode-uri/lib/esm': 'vscode-uri',
-  },
-});

scripts/bundle-umd.js

@@ -1,75 +0,0 @@
-const requirejs = require('requirejs');
-const path = require('path');
-const fs = require('fs');
-const uglifyES = require('uglify-es');
-const helpers = require('monaco-plugin-helpers');
-
-const REPO_ROOT = path.resolve(__dirname, '..');
-
-const sha1 = helpers.getGitVersion(REPO_ROOT);
-const semver = require('../package.json').version;
-const headerVersion = semver + '(' + sha1 + ')';
-
-const BUNDLED_FILE_HEADER = [
-  '/*!-----------------------------------------------------------------------------',
-  ' * Copyright (c) Microsoft Corporation. All rights reserved.',
-  ' * monaco-yaml version: ' + headerVersion,
-  ' * Released under the MIT license',
-  ' * https://github.com/kpdecker/monaco-yaml/blob/master/LICENSE.md',
-  ' *-----------------------------------------------------------------------------*/',
-  '',
-].join('\n');
-
-bundleOne('monaco.contribution');
-bundleOne('yamlMode');
-bundleOne('yamlWorker');
-
-function bundleOne(moduleId, exclude) {
-  requirejs.optimize(
-    {
-      baseUrl: 'out/amd/',
-      name: 'vs/language/yaml/' + moduleId,
-      out: 'lib/dev/' + moduleId + '.js',
-      exclude: exclude,
-      paths: {
-        'vs/language/yaml': REPO_ROOT + '/out/amd',
-      },
-      optimize: 'none',
-      packages: [
-        {
-          name: 'vscode-languageserver-types',
-          location: path.join(
-            REPO_ROOT,
-            'node_modules/vscode-languageserver-types/lib/umd'
-          ),
-          main: 'main',
-        },
-        {
-          name: 'yaml-language-server',
-          location: path.join(
-            REPO_ROOT,
-            'node_modules/yaml-language-server/out/server/src'
-          ),
-          main: 'index',
-        },
-      ],
-    },
-    function() {
-      const devFilePath = path.join(REPO_ROOT, 'lib/dev/' + moduleId + '.js');
-      const minFilePath = path.join(REPO_ROOT, 'lib/min/' + moduleId + '.js');
-      const fileContents = fs.readFileSync(devFilePath).toString();
-      console.log();
-      console.log(`Minifying ${devFilePath}...`);
-      const result = uglifyES.minify(fileContents, {
-        output: {
-          comments: 'some',
-        },
-      });
-      console.log(`Done.`);
-      try {
-        fs.mkdirSync(path.join(REPO_ROOT, 'lib/min'));
-      } catch (err) {}
-      fs.writeFileSync(minFilePath, BUNDLED_FILE_HEADER + result.code);
-    }
-  );
-}

src/constants.ts

@@ -0,0 +1 @@
+export const languageId = 'yaml';

src/fillers/os.ts

@@ -1 +0,0 @@
-export const EOL = '\n';

src/fillers/schemaSelectionHandlers.ts

@@ -0,0 +1,5 @@
+/**
+ * This is a stub for `monaco-yaml/lib/esm/schemaSelectionHandlers.js`.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export function JSONSchemaSelection(): void {}

src/fillers/vscode-nls.ts

@@ -1,8 +1,3 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
 export interface Options {
   locale?: string;
   cacheLanguageResolution?: boolean;
@@ -11,38 +6,30 @@ export interface LocalizeInfo {
   key: string;
   comment: string[];
 }
-export interface LocalizeFunc {
+export type LocalizeFunc = (
-  (info: LocalizeInfo, message: string, ...args: any[]): string;
+  info: LocalizeInfo | string,
-  (key: string, message: string, ...args: any[]): string;
+  message: string,
-}
+  ...args: unknown[]
+) => string;
 export type LoadFunc = (file?: string) => LocalizeFunc;
 
-function format(message: string, args: any[]): string {
+function format(message: string, args: string[]): string {
-  let result: string;
+  return args.length === 0
-
+    ? message
-  if (args.length === 0) {
+    : message.replace(/{(\d+)}/g, (match, rest: number[]) => {
-    result = message;
+        const [index] = rest;
-  } else {
+        return typeof args[index] === 'undefined' ? match : args[index];
-    result = message.replace(/\{(\d+)\}/g, (match, rest) => {
+      });
-      const index = rest[0];
-      return typeof args[index] !== 'undefined' ? args[index] : match;
-    });
-  }
-  return result;
 }
 
-function localize(
+function localize(key: LocalizeInfo | string, message: string, ...args: string[]): string {
-  key: string | LocalizeInfo,
-  message: string,
-  ...args: any[]
-): string {
   return format(message, args);
 }
 
-export function loadMessageBundle(file?: string): LocalizeFunc {
+export function loadMessageBundle(): LocalizeFunc {
   return localize;
 }
 
-export function config(opt?: Options | string): LoadFunc {
+export function config(): LoadFunc {
   return loadMessageBundle;
 }

src/index.ts

@@ -0,0 +1,78 @@
+import { Emitter, languages } from 'monaco-editor/esm/vs/editor/editor.api.js';
+
+import { languageId } from './constants';
+import { setupMode } from './yamlMode';
+
+// --- YAML configuration and defaults ---------
+
+const diagnosticDefault: languages.yaml.DiagnosticsOptions = {
+  completion: true,
+  customTags: [],
+  enableSchemaRequest: false,
+  format: true,
+  isKubernetes: false,
+  hover: true,
+  schemas: [],
+  validate: true,
+  yamlVersion: '1.2',
+};
+
+export function createLanguageServiceDefaults(
+  initialDiagnosticsOptions: languages.yaml.DiagnosticsOptions,
+): languages.yaml.LanguageServiceDefaults {
+  const onDidChange = new Emitter<languages.yaml.LanguageServiceDefaults>();
+  let diagnosticsOptions = initialDiagnosticsOptions;
+
+  const languageServiceDefaults: languages.yaml.LanguageServiceDefaults = {
+    get onDidChange() {
+      return onDidChange.event;
+    },
+
+    get languageId() {
+      return languageId;
+    },
+
+    get diagnosticsOptions() {
+      return diagnosticsOptions;
+    },
+
+    setDiagnosticsOptions(options) {
+      diagnosticsOptions = { ...diagnosticDefault, ...options };
+      onDidChange.fire(languageServiceDefaults);
+    },
+  };
+
+  return languageServiceDefaults;
+}
+
+const yamlDefaults = createLanguageServiceDefaults(diagnosticDefault);
+
+// Export API
+function createAPI(): typeof languages.yaml {
+  return {
+    yamlDefaults,
+  };
+}
+languages.yaml = createAPI();
+
+// --- Registration to monaco editor ---
+
+languages.register({
+  id: languageId,
+  extensions: ['.yaml', '.yml'],
+  aliases: ['YAML', 'yaml', 'YML', 'yml'],
+  mimetypes: ['application/x-yaml'],
+});
+
+languages.onLanguage('yaml', () => {
+  setupMode(yamlDefaults);
+});
+
+/**
+ * Configure `monaco-yaml` diagnostics options.
+ *
+ * @param options - The options to set.
+ */
+export function setDiagnosticsOptions(options: languages.yaml.DiagnosticsOptions = {}): void {
+  languages.yaml.yamlDefaults.setDiagnosticsOptions(options);
+}

src/languageFeatures.ts

@@ -1,149 +1,49 @@
-/*---------------------------------------------------------------------------------------------
+import {
- *  Copyright (c) Microsoft Corporation. All rights reserved.
+  editor,
- *  Licensed under the MIT License. See License.txt in the project root for license information.
+  IDisposable,
- *--------------------------------------------------------------------------------------------*/
+  languages,
-'use strict';
+  MarkerSeverity,
+  MarkerTag,
+  Position,
+  Range,
+  Uri,
+} from 'monaco-editor/esm/vs/editor/editor.api.js';
+import * as ls from 'vscode-languageserver-types';
+import { CustomFormatterOptions } from 'yaml-language-server/lib/esm/languageservice/yamlLanguageService.js';
 
-import { LanguageServiceDefaultsImpl } from './monaco.contribution';
+import { languageId } from './constants';
 import { YAMLWorker } from './yamlWorker';
 
-import * as ls from 'vscode-languageserver-types';
+export type WorkerAccessor = (...more: Uri[]) => PromiseLike<YAMLWorker>;
-
-import Uri = monaco.Uri;
-import Position = monaco.Position;
-import Range = monaco.Range;
-import IRange = monaco.IRange;
-import Thenable = monaco.Thenable;
-import CancellationToken = monaco.CancellationToken;
-import IDisposable = monaco.IDisposable;
-import { CustomFormatterOptions } from 'yaml-language-server';
-
-export type WorkerAccessor = (...more: Uri[]) => Thenable<YAMLWorker>;
 
 // --- diagnostics --- ---
 
-export class DiagnosticsAdapter {
+function toSeverity(lsSeverity: ls.DiagnosticSeverity): MarkerSeverity {
-  private _disposables: IDisposable[] = [];
-  private _listener: { [uri: string]: IDisposable } = Object.create(null);
-
-  constructor(
-    private _languageId: string,
-    private _worker: WorkerAccessor,
-    defaults: LanguageServiceDefaultsImpl
-  ) {
-    const onModelAdd = (model: monaco.editor.IModel): void => {
-      const modeId = model.getModeId();
-      if (modeId !== this._languageId) {
-        return;
-      }
-
-      let handle: NodeJS.Timer;
-      this._listener[model.uri.toString()] = model.onDidChangeContent(() => {
-        clearTimeout(handle);
-        handle = setTimeout(() => this._doValidate(model.uri, modeId), 500);
-      });
-
-      this._doValidate(model.uri, modeId);
-    };
-
-    const onModelRemoved = (model: monaco.editor.IModel): void => {
-      monaco.editor.setModelMarkers(model, this._languageId, []);
-      const uriStr = model.uri.toString();
-      const listener = this._listener[uriStr];
-      if (listener) {
-        listener.dispose();
-        delete this._listener[uriStr];
-      }
-    };
-
-    this._disposables.push(monaco.editor.onDidCreateModel(onModelAdd));
-    this._disposables.push(
-      monaco.editor.onWillDisposeModel(model => {
-        onModelRemoved(model);
-        this._resetSchema(model.uri);
-      })
-    );
-    this._disposables.push(
-      monaco.editor.onDidChangeModelLanguage(event => {
-        onModelRemoved(event.model);
-        onModelAdd(event.model);
-        this._resetSchema(event.model.uri);
-      })
-    );
-
-    this._disposables.push(
-      defaults.onDidChange(_ => {
-        monaco.editor.getModels().forEach(model => {
-          if (model.getModeId() === this._languageId) {
-            onModelRemoved(model);
-            onModelAdd(model);
-          }
-        });
-      })
-    );
-
-    this._disposables.push({
-      dispose: () => {
-        monaco.editor.getModels().forEach(onModelRemoved);
-        for (const key in this._listener) {
-          this._listener[key].dispose();
-        }
-      },
-    });
-
-    monaco.editor.getModels().forEach(onModelAdd);
-  }
-
-  public dispose(): void {
-    this._disposables.forEach(d => d && d.dispose());
-    this._disposables = [];
-  }
-
-  private _resetSchema(resource: Uri): void {
-    this._worker().then(worker => {
-      worker.resetSchema(resource.toString());
-    });
-  }
-
-  private _doValidate(resource: Uri, languageId: string): void {
-    this._worker(resource)
-      .then(worker => {
-        return worker.doValidation(resource.toString()).then(diagnostics => {
-          const markers = diagnostics.map(d => toDiagnostics(resource, d));
-          const model = monaco.editor.getModel(resource);
-          if (model.getModeId() === languageId) {
-            monaco.editor.setModelMarkers(model, languageId, markers);
-          }
-        });
-      })
-      .then(undefined, err => {
-        console.error(err);
-      });
-  }
-}
-
-function toSeverity(lsSeverity: number): monaco.MarkerSeverity {
   switch (lsSeverity) {
     case ls.DiagnosticSeverity.Error:
-      return monaco.MarkerSeverity.Error;
+      return MarkerSeverity.Error;
     case ls.DiagnosticSeverity.Warning:
-      return monaco.MarkerSeverity.Warning;
+      return MarkerSeverity.Warning;
     case ls.DiagnosticSeverity.Information:
-      return monaco.MarkerSeverity.Info;
+      return MarkerSeverity.Info;
     case ls.DiagnosticSeverity.Hint:
-      return monaco.MarkerSeverity.Hint;
+      return MarkerSeverity.Hint;
     default:
-      return monaco.MarkerSeverity.Info;
+      return MarkerSeverity.Info;
   }
 }
 
-function toDiagnostics(
+function toMarkerDataTag(tag: ls.DiagnosticTag): MarkerTag {
-  resource: Uri,
+  switch (tag) {
-  diag: ls.Diagnostic
+    case ls.DiagnosticTag.Deprecated:
-): monaco.editor.IMarkerData {
+      return MarkerTag.Deprecated;
-  const code =
+    case ls.DiagnosticTag.Unnecessary:
-    typeof diag.code === 'number' ? String(diag.code) : (diag.code as string);
+      return MarkerTag.Unnecessary;
+    default:
+  }
+}
 
+function toDiagnostics(diag: ls.Diagnostic): editor.IMarkerData {
   return {
     severity: toSeverity(diag.severity),
     startLineNumber: diag.range.start.line + 1,
@@ -151,48 +51,109 @@ function toDiagnostics(
     endLineNumber: diag.range.end.line + 1,
     endColumn: diag.range.end.character + 1,
     message: diag.message,
-    code,
+    code: String(diag.code),
     source: diag.source,
+    tags: diag.tags?.map(toMarkerDataTag),
   };
 }
 
+export function createDiagnosticsAdapter(
+  getWorker: WorkerAccessor,
+  defaults: languages.yaml.LanguageServiceDefaults,
+): void {
+  const listeners = new Map<string, IDisposable>();
+
+  const resetSchema = async (resource: Uri): Promise<void> => {
+    const worker = await getWorker();
+    worker.resetSchema(String(resource));
+  };
+
+  const doValidate = async (resource: Uri): Promise<void> => {
+    const worker = await getWorker(resource);
+    const diagnostics = await worker.doValidation(String(resource));
+    const markers = diagnostics.map(toDiagnostics);
+    const model = editor.getModel(resource);
+    // Return value from getModel can be null if model not found
+    // (e.g. if user navigates away from editor)
+    if (model && model.getLanguageId() === languageId) {
+      editor.setModelMarkers(model, languageId, markers);
+    }
+  };
+
+  const onModelAdd = (model: editor.IModel): void => {
+    if (model.getLanguageId() !== languageId) {
+      return;
+    }
+
+    let handle: ReturnType<typeof setTimeout>;
+    listeners.set(
+      String(model.uri),
+      model.onDidChangeContent(() => {
+        clearTimeout(handle);
+        handle = setTimeout(() => doValidate(model.uri), 500);
+      }),
+    );
+
+    doValidate(model.uri);
+  };
+
+  const onModelRemoved = (model: editor.IModel): void => {
+    editor.setModelMarkers(model, languageId, []);
+    const uriStr = String(model.uri);
+    const listener = listeners.get(uriStr);
+    if (listener) {
+      listener.dispose();
+      listeners.delete(uriStr);
+    }
+  };
+
+  editor.onDidCreateModel(onModelAdd);
+  editor.onWillDisposeModel((model) => {
+    onModelRemoved(model);
+    resetSchema(model.uri);
+  });
+  editor.onDidChangeModelLanguage((event) => {
+    onModelRemoved(event.model);
+    onModelAdd(event.model);
+    resetSchema(event.model.uri);
+  });
+  defaults.onDidChange(() => {
+    for (const model of editor.getModels()) {
+      if (model.getLanguageId() === languageId) {
+        onModelRemoved(model);
+        onModelAdd(model);
+      }
+    }
+  });
+
+  for (const model of editor.getModels()) {
+    onModelAdd(model);
+  }
+}
+
 // --- completion ------
 
 function fromPosition(position: Position): ls.Position {
   if (!position) {
-    return void 0;
+    return;
   }
   return { character: position.column - 1, line: position.lineNumber - 1 };
 }
 
-function fromRange(range: IRange): ls.Range {
-  if (!range) {
-    return void 0;
-  }
-  return {
-    start: {
-      line: range.startLineNumber - 1,
-      character: range.startColumn - 1,
-    },
-    end: { line: range.endLineNumber - 1, character: range.endColumn - 1 },
-  };
-}
 function toRange(range: ls.Range): Range {
   if (!range) {
-    return void 0;
+    return;
   }
   return new Range(
     range.start.line + 1,
     range.start.character + 1,
     range.end.line + 1,
-    range.end.character + 1
+    range.end.character + 1,
   );
 }
 
-function toCompletionItemKind(
+function toCompletionItemKind(kind: ls.CompletionItemKind): languages.CompletionItemKind {
-  kind: number
+  const mItemKind = languages.CompletionItemKind;
-): monaco.languages.CompletionItemKind {
-  const mItemKind = monaco.languages.CompletionItemKind;
 
   switch (kind) {
     case ls.CompletionItemKind.Text:
@@ -231,59 +192,14 @@ function toCompletionItemKind(
       return mItemKind.File;
     case ls.CompletionItemKind.Reference:
       return mItemKind.Reference;
+    default:
+      return mItemKind.Property;
   }
-  return mItemKind.Property;
 }
 
-function fromCompletionItemKind(
+function toTextEdit(textEdit: ls.TextEdit): editor.ISingleEditOperation {
-  kind: monaco.languages.CompletionItemKind
-): ls.CompletionItemKind {
-  const mItemKind = monaco.languages.CompletionItemKind;
-
-  switch (kind) {
-    case mItemKind.Text:
-      return ls.CompletionItemKind.Text;
-    case mItemKind.Method:
-      return ls.CompletionItemKind.Method;
-    case mItemKind.Function:
-      return ls.CompletionItemKind.Function;
-    case mItemKind.Constructor:
-      return ls.CompletionItemKind.Constructor;
-    case mItemKind.Field:
-      return ls.CompletionItemKind.Field;
-    case mItemKind.Variable:
-      return ls.CompletionItemKind.Variable;
-    case mItemKind.Class:
-      return ls.CompletionItemKind.Class;
-    case mItemKind.Interface:
-      return ls.CompletionItemKind.Interface;
-    case mItemKind.Module:
-      return ls.CompletionItemKind.Module;
-    case mItemKind.Property:
-      return ls.CompletionItemKind.Property;
-    case mItemKind.Unit:
-      return ls.CompletionItemKind.Unit;
-    case mItemKind.Value:
-      return ls.CompletionItemKind.Value;
-    case mItemKind.Enum:
-      return ls.CompletionItemKind.Enum;
-    case mItemKind.Keyword:
-      return ls.CompletionItemKind.Keyword;
-    case mItemKind.Snippet:
-      return ls.CompletionItemKind.Snippet;
-    case mItemKind.Color:
-      return ls.CompletionItemKind.Color;
-    case mItemKind.File:
-      return ls.CompletionItemKind.File;
-    case mItemKind.Reference:
-      return ls.CompletionItemKind.Reference;
-  }
-  return ls.CompletionItemKind.Property;
-}
-
-function toTextEdit(textEdit: ls.TextEdit): monaco.editor.ISingleEditOperation {
   if (!textEdit) {
-    return void 0;
+    return;
   }
   return {
     range: toRange(textEdit.range),
@@ -291,150 +207,107 @@ function toTextEdit(textEdit: ls.TextEdit): monaco.editor.ISingleEditOperation {
   };
 }
 
-export class CompletionAdapter
+export function createCompletionItemProvider(
-  implements monaco.languages.CompletionItemProvider {
+  getWorker: WorkerAccessor,
-  constructor(private _worker: WorkerAccessor) {}
+): languages.CompletionItemProvider {
+  return {
+    triggerCharacters: [' ', ':'],
 
-  public get triggerCharacters(): string[] {
+    async provideCompletionItems(model, position) {
-    return [' ', ':'];
+      const resource = model.uri;
-  }
 
-  public provideCompletionItems(
+      const worker = await getWorker(resource);
-    model: monaco.editor.IReadOnlyModel,
+      const info = await worker.doComplete(String(resource), fromPosition(position));
-    position: Position,
+      if (!info) {
-    context: monaco.languages.CompletionContext,
+        return;
-    token: CancellationToken
+      }
-  ): Thenable<monaco.languages.CompletionList> {
-    const resource = model.uri;
 
-    return this._worker(resource)
+      const wordInfo = model.getWordUntilPosition(position);
-      .then(worker => {
+      const wordRange = new Range(
-        return worker.doComplete(resource.toString(), fromPosition(position));
+        position.lineNumber,
-      })
+        wordInfo.startColumn,
-      .then(info => {
+        position.lineNumber,
-        if (!info) {
+        wordInfo.endColumn,
-          return;
+      );
-        }
 
-        const wordInfo = model.getWordUntilPosition(position);
+      const items = info.items.map((entry) => {
-        const wordRange = new Range(
+        const item: languages.CompletionItem = {
-          position.lineNumber,
+          label: entry.label,
-          wordInfo.startColumn,
+          insertText: entry.insertText || entry.label,
-          position.lineNumber,
+          sortText: entry.sortText,
-          wordInfo.endColumn
+          filterText: entry.filterText,
-        );
+          documentation: entry.documentation,
-
+          detail: entry.detail,
-        const items: monaco.languages.CompletionItem[] = info.items.map(
+          kind: toCompletionItemKind(entry.kind),
-          entry => {
+          range: wordRange,
-            const item: monaco.languages.CompletionItem = {
-              label: entry.label,
-              insertText: entry.insertText || entry.label,
-              sortText: entry.sortText,
-              filterText: entry.filterText,
-              documentation: entry.documentation,
-              detail: entry.detail,
-              kind: toCompletionItemKind(entry.kind),
-              range: wordRange,
-            };
-            if (entry.textEdit) {
-              item.range = toRange(entry.textEdit.range);
-              item.insertText = entry.textEdit.newText;
-            }
-            if (entry.additionalTextEdits) {
-              item.additionalTextEdits = entry.additionalTextEdits.map(
-                toTextEdit
-              );
-            }
-            if (entry.insertTextFormat === ls.InsertTextFormat.Snippet) {
-              item.insertTextRules =
-                monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet;
-            }
-            return item;
-          }
-        );
-
-        return {
-          isIncomplete: info.isIncomplete,
-          suggestions: items,
         };
+        if (entry.textEdit) {
+          item.range = toRange(
+            'range' in entry.textEdit ? entry.textEdit.range : entry.textEdit.replace,
+          );
+          item.insertText = entry.textEdit.newText;
+        }
+        if (entry.additionalTextEdits) {
+          item.additionalTextEdits = entry.additionalTextEdits.map(toTextEdit);
+        }
+        if (entry.insertTextFormat === ls.InsertTextFormat.Snippet) {
+          item.insertTextRules = languages.CompletionItemInsertTextRule.InsertAsSnippet;
+        }
+        return item;
       });
-  }
-}
 
-function isMarkupContent(thing: any): thing is ls.MarkupContent {
-  return (
-    thing &&
-    typeof thing === 'object' &&
-    typeof (thing as ls.MarkupContent).kind === 'string'
-  );
-}
-
-function toMarkdownString(
-  entry: ls.MarkupContent | ls.MarkedString
-): monaco.IMarkdownString {
-  if (typeof entry === 'string') {
-    return {
-      value: entry,
-    };
-  }
-  if (isMarkupContent(entry)) {
-    if (entry.kind === 'plaintext') {
       return {
-        value: entry.value.replace(/[\\`*_{}[\]()#+\-.!]/g, '\\$&'),
+        incomplete: info.isIncomplete,
+        suggestions: items,
       };
-    }
+    },
-    return {
+  };
-      value: entry.value,
-    };
-  }
-
-  return { value: '```' + entry.language + '\n' + entry.value + '\n```\n' };
 }
 
-function toMarkedStringArray(
+// --- definition ------
-  contents: ls.MarkupContent | ls.MarkedString | ls.MarkedString[]
+
-): monaco.IMarkdownString[] {
+export function createDefinitionProvider(getWorker: WorkerAccessor): languages.DefinitionProvider {
-  if (!contents) {
+  return {
-    return void 0;
+    async provideDefinition(model, position) {
-  }
+      const resource = model.uri;
-  if (Array.isArray(contents)) {
+
-    return contents.map(toMarkdownString);
+      const worker = await getWorker(resource);
-  }
+      const definitions = await worker.doDefinition(String(resource), fromPosition(position));
-  return [toMarkdownString(contents)];
+
+      return definitions?.map((definition) => ({
+        originSelectionRange: definition.originSelectionRange,
+        range: toRange(definition.targetRange),
+        targetSelectionRange: definition.targetSelectionRange,
+        uri: Uri.parse(definition.targetUri),
+      }));
+    },
+  };
 }
 
 // --- hover ------
 
-export class HoverAdapter implements monaco.languages.HoverProvider {
+export function createHoverProvider(getWorker: WorkerAccessor): languages.HoverProvider {
-  constructor(private _worker: WorkerAccessor) {}
+  return {
+    async provideHover(model, position) {
+      const resource = model.uri;
 
-  public provideHover(
+      const worker = await getWorker(resource);
-    model: monaco.editor.IReadOnlyModel,
+      const info = await worker.doHover(String(resource), fromPosition(position));
-    position: Position,
+      if (!info) {
-    token: CancellationToken
+        return;
-  ): Thenable<monaco.languages.Hover> {
+      }
-    const resource = model.uri;
+      return {
-
+        range: toRange(info.range),
-    return this._worker(resource)
+        contents: [{ value: (info.contents as ls.MarkupContent).value }],
-      .then(worker => {
+      };
-        return worker.doHover(resource.toString(), fromPosition(position));
+    },
-      })
+  };
-      .then(info => {
-        if (!info) {
-          return;
-        }
-        return {
-          range: toRange(info.range),
-          contents: toMarkedStringArray(info.contents),
-        } as monaco.languages.Hover;
-      });
-  }
 }
 
 // --- document symbols ------
 
-function toSymbolKind(kind: ls.SymbolKind): monaco.languages.SymbolKind {
+function toSymbolKind(kind: ls.SymbolKind): languages.SymbolKind {
-  const mKind = monaco.languages.SymbolKind;
+  const mKind = languages.SymbolKind;
 
   switch (kind) {
     case ls.SymbolKind.File:
@@ -473,48 +346,43 @@ function toSymbolKind(kind: ls.SymbolKind): monaco.languages.SymbolKind {
       return mKind.Boolean;
     case ls.SymbolKind.Array:
       return mKind.Array;
-  }
+    default:
-  return mKind.Function;
+      return mKind.Function;
-}
-
-export class DocumentSymbolAdapter
-  implements monaco.languages.DocumentSymbolProvider {
-  constructor(private _worker: WorkerAccessor) {}
-
-  public provideDocumentSymbols(
-    model: monaco.editor.IReadOnlyModel,
-    token: CancellationToken
-  ): Thenable<monaco.languages.DocumentSymbol[]> {
-    const resource = model.uri;
-
-    return this._worker(resource)
-      .then(worker => worker.findDocumentSymbols(resource.toString()))
-      .then(items => {
-        if (!items) {
-          return;
-        }
-        return items.map(item => toDocumentSymbol(item));
-      });
   }
 }
 
-function toDocumentSymbol(
+function toDocumentSymbol(item: ls.DocumentSymbol): languages.DocumentSymbol {
-  item: ls.DocumentSymbol
-): monaco.languages.DocumentSymbol {
   return {
-    detail: '',
+    detail: item.detail || '',
     range: toRange(item.range),
     name: item.name,
     kind: toSymbolKind(item.kind),
     selectionRange: toRange(item.selectionRange),
-    children: item.children.map(child => toDocumentSymbol(child)),
+    children: item.children.map(toDocumentSymbol),
     tags: [],
   };
 }
 
+export function createDocumentSymbolProvider(
+  getWorker: WorkerAccessor,
+): languages.DocumentSymbolProvider {
+  return {
+    async provideDocumentSymbols(model) {
+      const resource = model.uri;
+
+      const worker = await getWorker(resource);
+      const items = await worker.findDocumentSymbols(String(resource));
+      if (!items) {
+        return;
+      }
+      return items.map(toDocumentSymbol);
+    },
+  };
+}
+
 function fromFormattingOptions(
-  options: monaco.languages.FormattingOptions
+  options: languages.FormattingOptions,
-): ls.FormattingOptions & CustomFormatterOptions {
+): CustomFormatterOptions & ls.FormattingOptions {
   return {
     tabSize: options.tabSize,
     insertSpaces: options.insertSpaces,
@@ -522,115 +390,42 @@ function fromFormattingOptions(
   };
 }
 
-export class DocumentFormattingEditProvider
+export function createDocumentFormattingEditProvider(
-  implements monaco.languages.DocumentFormattingEditProvider {
+  getWorker: WorkerAccessor,
-  constructor(private _worker: WorkerAccessor) {}
+): languages.DocumentFormattingEditProvider {
+  return {
+    async provideDocumentFormattingEdits(model, options) {
+      const resource = model.uri;
 
-  public provideDocumentFormattingEdits(
+      const worker = await getWorker(resource);
-    model: monaco.editor.IReadOnlyModel,
+      const edits = await worker.format(String(resource), fromFormattingOptions(options));
-    options: monaco.languages.FormattingOptions,
+      if (!edits || edits.length === 0) {
-    token: CancellationToken
+        return;
-  ): Thenable<monaco.editor.ISingleEditOperation[]> {
+      }
-    const resource = model.uri;
+      return edits.map(toTextEdit);
-
+    },
-    return this._worker(resource).then(worker => {
+  };
-      return worker
-        .format(resource.toString(), null, fromFormattingOptions(options))
-        .then(edits => {
-          if (!edits || edits.length === 0) {
-            return;
-          }
-          return edits.map(toTextEdit);
-        });
-    });
-  }
 }
 
-export class DocumentRangeFormattingEditProvider
+function toLink(link: ls.DocumentLink): languages.ILink {
-  implements monaco.languages.DocumentRangeFormattingEditProvider {
+  return {
-  constructor(private _worker: WorkerAccessor) {}
+    range: toRange(link.range),
-
+    tooltip: link.tooltip,
-  public provideDocumentRangeFormattingEdits(
+    url: link.target,
-    model: monaco.editor.IReadOnlyModel,
+  };
-    range: Range,
-    options: monaco.languages.FormattingOptions,
-    token: CancellationToken
-  ): Thenable<monaco.editor.ISingleEditOperation[]> {
-    const resource = model.uri;
-
-    return this._worker(resource).then(worker => {
-      return worker
-        .format(
-          resource.toString(),
-          fromRange(range),
-          fromFormattingOptions(options)
-        )
-        .then(edits => {
-          if (!edits || edits.length === 0) {
-            return;
-          }
-          return edits.map(toTextEdit);
-        });
-    });
-  }
 }
 
-// export class DocumentColorAdapter
+export function createLinkProvider(getWorker: WorkerAccessor): languages.LinkProvider {
-// implements monaco.languages.DocumentColorProvider {
+  return {
-// constructor(private _worker: WorkerAccessor) {}
+    async provideLinks(model) {
+      const resource = model.uri;
 
-// public provideDocumentColors(
+      const worker = await getWorker(resource);
-// model: monaco.editor.IReadOnlyModel,
+      const links = await worker.findLinks(String(resource));
-// token: CancellationToken
-// ): Thenable<monaco.languages.IColorInformation[]> {
-// const resource = model.uri;
 
-// return this._worker(resource)
+      return {
-// .then(worker => worker.findDocumentColors(resource.toString()))
+        links: links.map(toLink),
-// .then(infos => {
+      };
-// if (!infos) {
+    },
-// return;
+  };
-// }
+}
-// return infos.map(item => ({
-// color: item.color,
-// range: toRange(item.range),
-// }));
-// });
-// }
-
-// public provideColorPresentations(
-// model: monaco.editor.IReadOnlyModel,
-// info: monaco.languages.IColorInformation,
-// token: CancellationToken
-// ): Thenable<monaco.languages.IColorPresentation[]> {
-// const resource = model.uri;
-
-// return this._worker(resource)
-// .then(worker =>
-// worker.getColorPresentations(
-// resource.toString(),
-// info.color,
-// fromRange(info.range)
-// )
-// )
-// .then(presentations => {
-// if (!presentations) {
-// return;
-// }
-// return presentations.map(presentation => {
-// const item: monaco.languages.IColorPresentation = {
-// label: presentation.label,
-// };
-// if (presentation.textEdit) {
-// item.textEdit = toTextEdit(presentation.textEdit);
-// }
-// if (presentation.additionalTextEdits) {
-// item.additionalTextEdits = presentation.additionalTextEdits.map(
-// toTextEdit
-// );
-// }
-// return item;
-// });
-// });
-// }
-// }

src/monaco.contribution.ts

@@ -1,82 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-'use strict';
-
-import { setupMode } from './yamlMode';
-
-import Emitter = monaco.Emitter;
-import IEvent = monaco.IEvent;
-
-declare var require: <T>(
-  moduleId: [string],
-  callback: (module: T) => void
-) => void;
-
-// --- YAML configuration and defaults ---------
-
-export class LanguageServiceDefaultsImpl
-  implements monaco.languages.yaml.LanguageServiceDefaults {
-  private _onDidChange = new Emitter<
-    monaco.languages.yaml.LanguageServiceDefaults
-  >();
-  private _diagnosticsOptions: monaco.languages.yaml.DiagnosticsOptions;
-  private _languageId: string;
-
-  constructor(
-    languageId: string,
-    diagnosticsOptions: monaco.languages.yaml.DiagnosticsOptions
-  ) {
-    this._languageId = languageId;
-    this.setDiagnosticsOptions(diagnosticsOptions);
-  }
-
-  get onDidChange(): IEvent<monaco.languages.yaml.LanguageServiceDefaults> {
-    return this._onDidChange.event;
-  }
-
-  get languageId(): string {
-    return this._languageId;
-  }
-
-  get diagnosticsOptions(): monaco.languages.yaml.DiagnosticsOptions {
-    return this._diagnosticsOptions;
-  }
-
-  public setDiagnosticsOptions(
-    options: monaco.languages.yaml.DiagnosticsOptions
-  ): void {
-    this._diagnosticsOptions = options || Object.create(null);
-    this._onDidChange.fire(this);
-  }
-}
-
-const diagnosticDefault: monaco.languages.yaml.DiagnosticsOptions = {
-  validate: true,
-  schemas: [],
-  enableSchemaRequest: false,
-};
-
-const yamlDefaults = new LanguageServiceDefaultsImpl('yaml', diagnosticDefault);
-
-// Export API
-function createAPI(): typeof monaco.languages.yaml {
-  return {
-    yamlDefaults,
-  };
-}
-monaco.languages.yaml = createAPI();
-
-// --- Registration to monaco editor ---
-
-monaco.languages.register({
-  id: 'yaml',
-  extensions: ['.yaml', '.yml'],
-  aliases: ['YAML', 'yaml', 'YML', 'yml'],
-  mimetypes: ['application/x-yaml'],
-});
-
-monaco.languages.onLanguage('yaml', () => {
-  setupMode(yamlDefaults);
-});

src/monaco.d.ts

@@ -1,54 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-declare namespace monaco.languages.yaml {
-  export interface DiagnosticsOptions {
-    /**
-     * If set, the validator will be enabled and perform syntax validation as well as schema based validation.
-     */
-    readonly validate?: boolean;
-
-    /**
-     * A list of known schemas and/or associations of schemas to file names.
-     */
-    readonly schemas?: Array<{
-      /**
-       * The URI of the schema, which is also the identifier of the schema.
-       */
-      readonly uri: string;
-      /**
-       * A list of file names that are associated to the schema. The '*' wildcard can be used. For example '*.schema.json', 'package.json'
-       */
-      readonly fileMatch?: string[];
-      /**
-       * The schema for the given URI.
-       */
-      readonly schema?: any;
-    }>;
-
-    /**
-     *  If set, the schema service would load schema content on-demand with 'fetch' if available
-     */
-    readonly enableSchemaRequest?: boolean;
-    /**
-     * If specified, this prefix will be added to all on demand schema requests
-     */
-    readonly prefix?: string;
-    /**
-     * Whether or not kubernetes yaml is supported
-     */
-    readonly isKubernetes?: boolean;
-
-    readonly format?: boolean;
-  }
-
-  export interface LanguageServiceDefaults {
-    readonly onDidChange: IEvent<LanguageServiceDefaults>;
-    readonly diagnosticsOptions: DiagnosticsOptions;
-    setDiagnosticsOptions(options: DiagnosticsOptions): void;
-  }
-
-  export const yamlDefaults: LanguageServiceDefaults;
-}

src/typings/refs.d.ts

@@ -1,5 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-/// <reference path='../../node_modules/monaco-editor-core/monaco.d.ts'/>

src/workerManager.ts

@@ -1,96 +1,67 @@
-/*---------------------------------------------------------------------------------------------
+import { editor, languages } from 'monaco-editor/esm/vs/editor/editor.api.js';
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-'use strict';
 
-import { LanguageServiceDefaultsImpl } from './monaco.contribution';
+import { WorkerAccessor } from './languageFeatures';
 import { YAMLWorker } from './yamlWorker';
 
-import IDisposable = monaco.IDisposable;
+// 2min
-import Uri = monaco.Uri;
+const STOP_WHEN_IDLE_FOR = 2 * 60 * 1000;
 
-const STOP_WHEN_IDLE_FOR = 2 * 60 * 1000; // 2min
+export function createWorkerManager(
+  defaults: languages.yaml.LanguageServiceDefaults,
+): WorkerAccessor {
+  let worker: editor.MonacoWebWorker<YAMLWorker>;
+  let client: Promise<YAMLWorker>;
+  let lastUsedTime = 0;
 
-export class WorkerManager {
+  const stopWorker = (): void => {
-  private _defaults: LanguageServiceDefaultsImpl;
+    if (worker) {
-  private _idleCheckInterval: NodeJS.Timer;
+      worker.dispose();
-  private _lastUsedTime: number;
+      worker = undefined;
-  private _configChangeListener: IDisposable;
-
-  private _worker: monaco.editor.MonacoWebWorker<YAMLWorker>;
-  private _client: Promise<YAMLWorker>;
-
-  constructor(defaults: LanguageServiceDefaultsImpl) {
-    this._defaults = defaults;
-    this._worker = null;
-    this._idleCheckInterval = setInterval(() => this._checkIfIdle(), 30 * 1000);
-    this._lastUsedTime = 0;
-    this._configChangeListener = this._defaults.onDidChange(() =>
-      this._stopWorker()
-    );
-  }
-
-  public dispose(): void {
-    clearInterval(this._idleCheckInterval);
-    this._configChangeListener.dispose();
-    this._stopWorker();
-  }
-
-  public getLanguageServiceWorker(...resources: Uri[]): Promise<YAMLWorker> {
-    let _client: YAMLWorker;
-    return this._getClient()
-      .then(client => {
-        _client = client;
-      })
-      .then(_ => {
-        return this._worker.withSyncedResources(resources);
-      })
-      .then(_ => _client);
-  }
-
-  private _stopWorker(): void {
-    if (this._worker) {
-      this._worker.dispose();
-      this._worker = null;
     }
-    this._client = null;
+    client = undefined;
-  }
+  };
 
-  private _checkIfIdle(): void {
+  setInterval(() => {
-    if (!this._worker) {
+    if (!worker) {
       return;
     }
-    const timePassedSinceLastUsed = Date.now() - this._lastUsedTime;
+    const timePassedSinceLastUsed = Date.now() - lastUsedTime;
     if (timePassedSinceLastUsed > STOP_WHEN_IDLE_FOR) {
-      this._stopWorker();
+      stopWorker();
     }
-  }
+  }, 30 * 1000);
 
-  private _getClient(): Promise<YAMLWorker> {
+  // This is necessary to have updated language options take effect (e.g. schema changes)
-    this._lastUsedTime = Date.now();
+  defaults.onDidChange(() => stopWorker());
 
-    if (!this._client) {
+  const getClient = (): Promise<YAMLWorker> => {
-      this._worker = monaco.editor.createWebWorker<YAMLWorker>({
+    lastUsedTime = Date.now();
-        // module that exports the create() method and returns a `YAMLWorker` instance
+
+    if (!client) {
+      worker = editor.createWebWorker<YAMLWorker>({
+        // Module that exports the create() method and returns a `YAMLWorker` instance
         moduleId: 'vs/language/yaml/yamlWorker',
 
-        label: this._defaults.languageId,
+        label: defaults.languageId,
 
-        // passed in to the create() method
+        // Passed in to the create() method
         createData: {
-          languageSettings: this._defaults.diagnosticsOptions,
+          languageSettings: defaults.diagnosticsOptions,
-          languageId: this._defaults.languageId,
+          enableSchemaRequest: defaults.diagnosticsOptions.enableSchemaRequest,
-          enableSchemaRequest: this._defaults.diagnosticsOptions
+          isKubernetes: defaults.diagnosticsOptions.isKubernetes,
-            .enableSchemaRequest,
+          customTags: defaults.diagnosticsOptions.customTags,
-          prefix: this._defaults.diagnosticsOptions.prefix,
-          isKubernetes: this._defaults.diagnosticsOptions.isKubernetes,
         },
       });
 
-      this._client = this._worker.getProxy();
+      client = worker.getProxy();
     }
 
-    return this._client;
+    return client;
-  }
+  };
+
+  return async (...resources) => {
+    const client = await getClient();
+    await worker.withSyncedResources(resources);
+    return client;
+  };
 }

src/yaml.worker.ts

@@ -1,15 +1,7 @@
-/*---------------------------------------------------------------------------------------------
+import { initialize } from 'monaco-editor/esm/vs/editor/editor.worker.js';
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-'use strict';
 
-import * as worker from 'monaco-editor/esm/vs/editor/editor.worker';
+import { createYAMLWorker, ICreateData } from './yamlWorker';
-import { YAMLWorker } from './yamlWorker';
 
 self.onmessage = () => {
-  // ignore the first message
+  initialize((ctx, createData: ICreateData) => Object.create(createYAMLWorker(ctx, createData)));
-  worker.initialize((ctx, createData) => {
-    return new YAMLWorker(ctx, createData);
-  });
 };

src/yamlMode.ts

@@ -1,73 +1,18 @@
-/*---------------------------------------------------------------------------------------------
+import { languages } from 'monaco-editor/esm/vs/editor/editor.api.js';
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-'use strict';
 
-import * as languageFeatures from './languageFeatures';
+import { languageId } from './constants';
-import { LanguageServiceDefaultsImpl } from './monaco.contribution';
+import {
-import { WorkerManager } from './workerManager';
+  createCompletionItemProvider,
-import { YAMLWorker } from './yamlWorker';
+  createDefinitionProvider,
+  createDiagnosticsAdapter,
+  createDocumentFormattingEditProvider,
+  createDocumentSymbolProvider,
+  createHoverProvider,
+  createLinkProvider,
+} from './languageFeatures';
+import { createWorkerManager } from './workerManager';
 
-import Uri = monaco.Uri;
+const richEditConfiguration: languages.LanguageConfiguration = {
-import IDisposable = monaco.IDisposable;
-
-export function setupMode(defaults: LanguageServiceDefaultsImpl): void {
-  const disposables: IDisposable[] = [];
-
-  const client = new WorkerManager(defaults);
-  disposables.push(client);
-
-  const worker: languageFeatures.WorkerAccessor = (
-    ...uris: Uri[]
-  ): Promise<YAMLWorker> => {
-    return client.getLanguageServiceWorker(...uris);
-  };
-
-  const languageId = defaults.languageId;
-
-  disposables.push(
-    monaco.languages.registerCompletionItemProvider(
-      languageId,
-      new languageFeatures.CompletionAdapter(worker)
-    )
-  );
-  disposables.push(
-    monaco.languages.registerHoverProvider(
-      languageId,
-      new languageFeatures.HoverAdapter(worker)
-    )
-  );
-  disposables.push(
-    monaco.languages.registerDocumentSymbolProvider(
-      languageId,
-      new languageFeatures.DocumentSymbolAdapter(worker)
-    )
-  );
-  disposables.push(
-    monaco.languages.registerDocumentFormattingEditProvider(
-      languageId,
-      new languageFeatures.DocumentFormattingEditProvider(worker)
-    )
-  );
-  disposables.push(
-    monaco.languages.registerDocumentRangeFormattingEditProvider(
-      languageId,
-      new languageFeatures.DocumentRangeFormattingEditProvider(worker)
-    )
-  );
-  disposables.push(
-    new languageFeatures.DiagnosticsAdapter(languageId, worker, defaults)
-  );
-  disposables.push(
-    monaco.languages.setLanguageConfiguration(languageId, richEditConfiguration)
-  );
-
-  // Color adapter should be necessary most of the time:
-  // disposables.push(monaco.languages.registerColorProvider(languageId, new languageFeatures.DocumentColorAdapter(worker)));
-}
-
-const richEditConfiguration: monaco.languages.LanguageConfiguration = {
   comments: {
     lineComment: '#',
   },
@@ -94,7 +39,23 @@ const richEditConfiguration: monaco.languages.LanguageConfiguration = {
   onEnterRules: [
     {
       beforeText: /:\s*$/,
-      action: { indentAction: monaco.languages.IndentAction.Indent },
+      action: { indentAction: languages.IndentAction.Indent },
     },
   ],
 };
+
+export function setupMode(defaults: languages.yaml.LanguageServiceDefaults): void {
+  const worker = createWorkerManager(defaults);
+
+  languages.registerCompletionItemProvider(languageId, createCompletionItemProvider(worker));
+  languages.registerHoverProvider(languageId, createHoverProvider(worker));
+  languages.registerDefinitionProvider(languageId, createDefinitionProvider(worker));
+  languages.registerDocumentSymbolProvider(languageId, createDocumentSymbolProvider(worker));
+  languages.registerDocumentFormattingEditProvider(
+    languageId,
+    createDocumentFormattingEditProvider(worker),
+  );
+  languages.registerLinkProvider(languageId, createLinkProvider(worker));
+  createDiagnosticsAdapter(worker, defaults);
+  languages.setLanguageConfiguration(languageId, richEditConfiguration);
+}

src/yamlWorker.ts

@@ -1,127 +1,111 @@
-/*---------------------------------------------------------------------------------------------
+import { worker } from 'monaco-editor/esm/vs/editor/editor.api.js';
- *  Copyright (c) Red Hat, Inc. All rights reserved.
+import { Promisable } from 'type-fest';
- *  Copyright (c) Adam Voss. All rights reserved.
+import { TextDocument } from 'vscode-languageserver-textdocument';
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-'use strict';
-
-import Thenable = monaco.Thenable;
-import IWorkerContext = monaco.worker.IWorkerContext;
-
 import * as ls from 'vscode-languageserver-types';
-import * as yamlService from 'yaml-language-server';
+import {
+  CustomFormatterOptions,
+  getLanguageService,
+  LanguageSettings,
+} from 'yaml-language-server/lib/esm/languageservice/yamlLanguageService.js';
 
-let defaultSchemaRequestService;
+import { languageId } from './constants';
-if (typeof fetch !== 'undefined') {
+
-  defaultSchemaRequestService = function(url) {
+async function schemaRequestService(uri: string): Promise<string> {
-    return fetch(url).then(response => response.text());
+  const response = await fetch(uri);
-  };
+  if (response.ok) {
+    return response.text();
+  }
+  throw new Error(`Schema request failed for ${uri}`);
 }
 
-export class YAMLWorker {
+export interface YAMLWorker {
-  private _ctx: IWorkerContext;
+  doValidation: (uri: string) => Promisable<ls.Diagnostic[]>;
-  private _languageService: yamlService.LanguageService;
-  private _languageSettings: yamlService.LanguageSettings;
-  private _languageId: string;
-  private _isKubernetes: boolean;
 
-  constructor(ctx: IWorkerContext, createData: ICreateData) {
+  doComplete: (uri: string, position: ls.Position) => Promisable<ls.CompletionList>;
-    const prefix = createData.prefix || '';
-    const service = (url: string) =>
-      defaultSchemaRequestService(`${prefix}${url}`);
-    this._ctx = ctx;
-    this._languageSettings = createData.languageSettings;
-    this._languageId = createData.languageId;
-    this._languageService = yamlService.getLanguageService(
-      createData.enableSchemaRequest && service,
-      null,
-      []
-    );
-    this._isKubernetes = createData.isKubernetes || false;
-    this._languageService.configure({
-      ...this._languageSettings,
-      hover: true,
-      isKubernetes: this._isKubernetes,
-    });
-  }
 
-  public doValidation(uri: string): Thenable<ls.Diagnostic[]> {
+  doDefinition: (uri: string, position: ls.Position) => Promisable<ls.LocationLink[]>;
-    const document = this._getTextDocument(uri);
-    if (document) {
-      return this._languageService.doValidation(document, this._isKubernetes);
-    }
-    return Promise.resolve([]);
-  }
 
-  public doComplete(
+  doHover: (uri: string, position: ls.Position) => Promisable<ls.Hover>;
-    uri: string,
-    position: ls.Position
-  ): Thenable<ls.CompletionList> {
-    const document = this._getTextDocument(uri);
-    return this._languageService.doComplete(
-      document,
-      position,
-      this._isKubernetes
-    );
-  }
 
-  public doResolve(item: ls.CompletionItem): Thenable<ls.CompletionItem> {
+  format: (uri: string, options: CustomFormatterOptions) => Promisable<ls.TextEdit[]>;
-    return this._languageService.doResolve(item);
-  }
 
-  public doHover(uri: string, position: ls.Position): Thenable<ls.Hover> {
+  resetSchema: (uri: string) => Promisable<boolean>;
-    const document = this._getTextDocument(uri);
-    return this._languageService.doHover(document, position);
-  }
 
-  public format(
+  findDocumentSymbols: (uri: string) => Promisable<ls.DocumentSymbol[]>;
-    uri: string,
-    range: ls.Range,
-    options: yamlService.CustomFormatterOptions
-  ): Thenable<ls.TextEdit[]> {
-    const document = this._getTextDocument(uri);
-    const textEdits = this._languageService.doFormat(document, options);
-    return Promise.resolve(textEdits);
-  }
 
-  public resetSchema(uri: string): Thenable<boolean> {
+  findLinks: (uri: string) => Promisable<ls.DocumentLink[]>;
-    return Promise.resolve(this._languageService.resetSchema(uri));
+}
-  }
 
-  public findDocumentSymbols(uri: string): Thenable<ls.DocumentSymbol[]> {
+export function createYAMLWorker(
-    const document = this._getTextDocument(uri);
+  ctx: worker.IWorkerContext,
-    const symbols = this._languageService.findDocumentSymbols2(document);
+  { enableSchemaRequest, languageSettings }: ICreateData,
-    return Promise.resolve(symbols);
+): YAMLWorker {
-  }
+  const languageService = getLanguageService(
+    enableSchemaRequest ? schemaRequestService : null,
+    null,
+    null,
+    null,
+    null,
+  );
+  languageService.configure(languageSettings);
 
-  private _getTextDocument(uri: string): ls.TextDocument {
+  const getTextDocument = (uri: string): TextDocument => {
-    const models = this._ctx.getMirrorModels();
+    const models = ctx.getMirrorModels();
     for (const model of models) {
-      if (model.uri.toString() === uri) {
+      if (String(model.uri) === uri) {
-        return ls.TextDocument.create(
+        return TextDocument.create(uri, languageId, model.version, model.getValue());
-          uri,
-          this._languageId,
-          model.version,
-          model.getValue()
-        );
       }
     }
     return null;
-  }
+  };
+
+  return {
+    doValidation(uri) {
+      const document = getTextDocument(uri);
+      if (document) {
+        return languageService.doValidation(document, languageSettings.isKubernetes);
+      }
+      return [];
+    },
+
+    doComplete(uri, position) {
+      const document = getTextDocument(uri);
+      return languageService.doComplete(document, position, languageSettings.isKubernetes);
+    },
+
+    doDefinition(uri, position) {
+      const document = getTextDocument(uri);
+      return languageService.doDefinition(document, { position, textDocument: { uri } });
+    },
+
+    doHover(uri, position) {
+      const document = getTextDocument(uri);
+      return languageService.doHover(document, position);
+    },
+
+    format(uri, options) {
+      const document = getTextDocument(uri);
+      return languageService.doFormat(document, options);
+    },
+
+    resetSchema(uri) {
+      return languageService.resetSchema(uri);
+    },
+
+    findDocumentSymbols(uri) {
+      const document = getTextDocument(uri);
+      return languageService.findDocumentSymbols2(document, {});
+    },
+
+    findLinks(uri) {
+      const document = getTextDocument(uri);
+      return languageService.findLinks(document);
+    },
+  };
 }
 
 export interface ICreateData {
-  languageId: string;
+  languageSettings: LanguageSettings;
-  languageSettings: yamlService.LanguageSettings;
   enableSchemaRequest: boolean;
-  prefix?: string;
   isKubernetes?: boolean;
 }
-
-export function create(
-  ctx: IWorkerContext,
-  createData: ICreateData
-): YAMLWorker {
-  return new YAMLWorker(ctx, createData);
-}

tsconfig.esm.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "alwaysStrict": true,
-    "declaration": true,
-    "forceConsistentCasingInFileNames": true,
-    "downlevelIteration": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "lib": ["dom", "es2016"],
-    "outDir": "./out/esm",
-    "sourceMap": true,
-    "target": "es6",
-    "plugins": [
-      {
-        "name": "typescript-tslint-plugin"
-      }
-    ]
-  },
-  "exclude": ["node_modules", "out", "lib", "test"]
-}

tsconfig.json

@@ -2,16 +2,14 @@
   "compilerOptions": {
     "declaration": true,
     "forceConsistentCasingInFileNames": true,
-    "module": "umd",
+    "downlevelIteration": true,
+    "lib": ["dom", "dom.iterable", "es2017"],
+    "module": "esnext",
     "moduleResolution": "node",
-    "lib": ["dom", "es2016"],
+    "noEmit": true,
-    "outDir": "./out/amd",
+    "skipLibCheck": true,
+    "sourceMap": true,
     "target": "es6",
-    "plugins": [
+    "types": []
-      {
+  }
-        "name": "typescript-tslint-plugin"
-      }
-    ]
-  },
-  "exclude": ["node_modules", "out", "lib", "test"]
 }