diff --git a/.eslintrc.yaml b/.eslintrc.yaml index 2fd574c..3435395 100644 --- a/.eslintrc.yaml +++ b/.eslintrc.yaml @@ -8,6 +8,7 @@ rules: '@typescript-eslint/no-shadow': off '@typescript-eslint/no-unnecessary-condition': off + import/extensions: off import/no-extraneous-dependencies: off import/no-unresolved: off diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e1b6e28..e2a885b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,5 +1,15 @@ # 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 @@ -8,16 +18,19 @@ cd monaco-yaml npm ci ``` +## Building + To build the repository, run: ```sh -npm prepack +npm run prepack ``` +## Running + To test it, run one of the [examples](https://github.com/remcohaszing/monaco-yaml/tree/main/examples). ```sh -cd examples/webpack-worker-loader -npm start +npm --workspace demo start ``` diff --git a/build.js b/build.js index 413b941..f317daf 100755 --- a/build.js +++ b/build.js @@ -3,7 +3,7 @@ const { build } = require('esbuild'); const { dependencies, peerDependencies } = require('./package.json'); build({ - entryPoints: ['src/index.ts', 'src/yaml.worker.ts'], + entryPoints: ['src/monaco.contribution.ts', 'src/yaml.worker.ts'], bundle: true, external: Object.keys({ ...dependencies, ...peerDependencies }), logLevel: 'info', @@ -17,20 +17,8 @@ build({ setup({ onResolve }) { // The yaml language service only imports re-exports of vscode-languageserver-types from // vscode-languageserver. - onResolve({ filter: /^vscode-languageserver-textdocument$/ }, () => ({ - path: 'vscode-languageserver-textdocument/lib/esm/main.js', - external: true, - })); - // The yaml language service only imports re-exports of vscode-languageserver-types from - // vscode-languageserver. - onResolve({ filter: /^vscode-languageserver(\/node)?$/ }, () => ({ - path: 'vscode-languageserver-types/lib/esm/main.js', - external: true, - })); - // The yaml language service only imports re-exports of vscode-languageserver-types from - // vscode-languageserver. - onResolve({ filter: /^vscode-languageserver-(protocol|types)$/ }, () => ({ - path: 'vscode-languageserver-types/lib/esm/main.js', + 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. @@ -40,8 +28,8 @@ build({ })); // The main prettier entry point contains all of Prettier. // The standalone bundle is smaller and works fine for us. - onResolve({ filter: /^prettier$/ }, () => ({ - path: 'prettier/standalone', + onResolve({ filter: /^prettier/ }, ({ path }) => ({ + path: path === 'prettier' ? 'prettier/standalone.js' : `${path}.js`, external: true, })); // This tiny filler implementation serves all our needs. diff --git a/examples/demo/README.md b/examples/demo/README.md index 28bdb9f..1c9ecc3 100644 --- a/examples/demo/README.md +++ b/examples/demo/README.md @@ -2,10 +2,30 @@ 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). To start it, simply run: +[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 -npm start +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. diff --git a/examples/demo/src/index.ts b/examples/demo/src/index.ts index 2d8901e..626abc1 100644 --- a/examples/demo/src/index.ts +++ b/examples/demo/src/index.ts @@ -184,6 +184,7 @@ ed.onDidChangeCursorPosition(async (event) => { 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) { diff --git a/examples/demo/src/types.d.ts b/examples/demo/src/types.d.ts index e32f2bf..95032ee 100644 --- a/examples/demo/src/types.d.ts +++ b/examples/demo/src/types.d.ts @@ -15,7 +15,7 @@ declare module 'monaco-editor/esm/vs/editor/contrib/documentSymbols/documentSymb ): Promise; } -declare module 'monaco-editor/esm/vs/editor/editor.worker' { +declare module 'monaco-editor/esm/vs/editor/editor.worker.js' { import { worker } from 'monaco-editor/esm/vs/editor/editor.api'; export function initialize( diff --git a/examples/minimal-vite/README.md b/examples/minimal-vite/README.md deleted file mode 100644 index ff5796c..0000000 --- a/examples/minimal-vite/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Minimal Vite Example - -This minimal example shows how `monaco-yaml` can be used with [Vite](https://vitejs.dev). diff --git a/examples/monaco-editor-webpack-plugin/README.md b/examples/monaco-editor-webpack-plugin/README.md index c0023a7..86d2ced 100644 --- a/examples/monaco-editor-webpack-plugin/README.md +++ b/examples/monaco-editor-webpack-plugin/README.md @@ -7,8 +7,28 @@ Example is based on [link](https://github.com/microsoft/monaco-editor-samples/tree/main/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 -npm start +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. diff --git a/examples/monaco-editor-webpack-plugin/editor.js b/examples/monaco-editor-webpack-plugin/editor.js index 238aa0d..95aaba3 100644 --- a/examples/monaco-editor-webpack-plugin/editor.js +++ b/examples/monaco-editor-webpack-plugin/editor.js @@ -1,7 +1,5 @@ -// eslint-disable-next-line import/extensions import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'; -// eslint-disable-next-line import/extensions export { editor } from 'monaco-editor/esm/vs/editor/editor.api.js'; export { setDiagnosticsOptions } from 'monaco-yaml'; export default monaco; diff --git a/examples/monaco-editor-webpack-plugin/index.js b/examples/monaco-editor-webpack-plugin/index.js index ba237e0..80fe7f0 100644 --- a/examples/monaco-editor-webpack-plugin/index.js +++ b/examples/monaco-editor-webpack-plugin/index.js @@ -4,7 +4,6 @@ boolean: true `; async function create() { - // eslint-disable-next-line import/extensions const monaco = await import('./main.js'); monaco.editor.create(document.querySelector('.editor'), { diff --git a/examples/vite-example/README.md b/examples/vite-example/README.md new file mode 100644 index 0000000..bd1b48f --- /dev/null +++ b/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. diff --git a/examples/minimal-vite/index.html b/examples/vite-example/index.html similarity index 100% rename from examples/minimal-vite/index.html rename to examples/vite-example/index.html diff --git a/examples/minimal-vite/index.js b/examples/vite-example/index.js similarity index 100% rename from examples/minimal-vite/index.js rename to examples/vite-example/index.js diff --git a/examples/minimal-vite/package.json b/examples/vite-example/package.json similarity index 89% rename from examples/minimal-vite/package.json rename to examples/vite-example/package.json index 5c26c0b..096e7ac 100644 --- a/examples/minimal-vite/package.json +++ b/examples/vite-example/package.json @@ -1,5 +1,5 @@ { - "name": "minimal-vite", + "name": "vite-example", "version": "1.0.0", "private": true, "scripts": { diff --git a/index.d.ts b/index.d.ts index 296372c..724a4e5 100644 --- a/index.d.ts +++ b/index.d.ts @@ -70,14 +70,6 @@ declare module 'monaco-editor/esm/vs/editor/editor.api' { */ readonly isKubernetes?: boolean; - /** - * If specified, this prefix will be added to all on demand schema requests - * - * @default undefined - * @deprecated - */ - readonly prefix?: string; - /** * A list of known schemas and/or associations of schemas to file names. * diff --git a/src/index.ts b/src/index.ts index 8bcb4c1..80f98b1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,4 @@ -import { Emitter, languages } from 'monaco-editor/esm/vs/editor/editor.api'; +import { Emitter, languages } from 'monaco-editor/esm/vs/editor/editor.api.js'; import { languageId } from './constants'; import { setupMode } from './yamlMode'; diff --git a/src/languageFeatures.ts b/src/languageFeatures.ts index 02bd875..1997016 100644 --- a/src/languageFeatures.ts +++ b/src/languageFeatures.ts @@ -6,9 +6,9 @@ import { Position, Range, Uri, -} from 'monaco-editor/esm/vs/editor/editor.api'; +} 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'; +import { CustomFormatterOptions } from 'yaml-language-server/lib/esm/languageservice/yamlLanguageService.js'; import { languageId } from './constants'; import { YAMLWorker } from './yamlWorker'; @@ -140,7 +140,7 @@ function toRange(range: ls.Range): Range { ); } -function toCompletionItemKind(kind: languages.CompletionItemKind): languages.CompletionItemKind { +function toCompletionItemKind(kind: ls.CompletionItemKind): languages.CompletionItemKind { const mItemKind = languages.CompletionItemKind; switch (kind) { @@ -341,7 +341,7 @@ function toSymbolKind(kind: ls.SymbolKind): languages.SymbolKind { function toDocumentSymbol(item: ls.DocumentSymbol): languages.DocumentSymbol { return { - detail: '', + detail: item.detail || '', range: toRange(item.range), name: item.name, kind: toSymbolKind(item.kind), diff --git a/src/workerManager.ts b/src/workerManager.ts index 998d202..3ab9f7c 100644 --- a/src/workerManager.ts +++ b/src/workerManager.ts @@ -1,4 +1,4 @@ -import { editor, languages } from 'monaco-editor/esm/vs/editor/editor.api'; +import { editor, languages } from 'monaco-editor/esm/vs/editor/editor.api.js'; import { WorkerAccessor } from './languageFeatures'; import { YAMLWorker } from './yamlWorker'; @@ -48,7 +48,6 @@ export function createWorkerManager( createData: { languageSettings: defaults.diagnosticsOptions, enableSchemaRequest: defaults.diagnosticsOptions.enableSchemaRequest, - prefix: defaults.diagnosticsOptions.prefix, isKubernetes: defaults.diagnosticsOptions.isKubernetes, customTags: defaults.diagnosticsOptions.customTags, }, diff --git a/src/yaml.worker.ts b/src/yaml.worker.ts index 4425adb..015f221 100644 --- a/src/yaml.worker.ts +++ b/src/yaml.worker.ts @@ -1,4 +1,4 @@ -import { initialize } from 'monaco-editor/esm/vs/editor/editor.worker'; +import { initialize } from 'monaco-editor/esm/vs/editor/editor.worker.js'; import { createYAMLWorker, ICreateData } from './yamlWorker'; diff --git a/src/yamlMode.ts b/src/yamlMode.ts index b045c46..0c51b7a 100644 --- a/src/yamlMode.ts +++ b/src/yamlMode.ts @@ -1,4 +1,4 @@ -import { languages } from 'monaco-editor/esm/vs/editor/editor.api'; +import { languages } from 'monaco-editor/esm/vs/editor/editor.api.js'; import { languageId } from './constants'; import { diff --git a/src/yamlWorker.ts b/src/yamlWorker.ts index 6ace52a..35b0edd 100644 --- a/src/yamlWorker.ts +++ b/src/yamlWorker.ts @@ -1,4 +1,4 @@ -import { worker } from 'monaco-editor/esm/vs/editor/editor.api'; +import { worker } from 'monaco-editor/esm/vs/editor/editor.api.js'; import { Promisable } from 'type-fest'; import { TextDocument } from 'vscode-languageserver-textdocument'; import * as ls from 'vscode-languageserver-types'; @@ -6,14 +6,16 @@ import { CustomFormatterOptions, getLanguageService, LanguageSettings, -} from 'yaml-language-server/lib/esm/languageservice/yamlLanguageService'; +} from 'yaml-language-server/lib/esm/languageservice/yamlLanguageService.js'; import { languageId } from './constants'; -let defaultSchemaRequestService: (url: string) => Promise; - -if (typeof fetch !== 'undefined') { - defaultSchemaRequestService = (url) => fetch(url).then((response) => response.text()); +async function schemaRequestService(uri: string): Promise { + const response = await fetch(uri); + if (response.ok) { + return response.text(); + } + throw new Error(`Schema request failed for ${uri}`); } export interface YAMLWorker { @@ -36,10 +38,14 @@ export interface YAMLWorker { export function createYAMLWorker( ctx: worker.IWorkerContext, - { enableSchemaRequest, languageSettings, prefix = '' }: ICreateData, + { enableSchemaRequest, languageSettings }: ICreateData, ): YAMLWorker { - const service = (url: string): Promise => defaultSchemaRequestService(`${prefix}${url}`); - const languageService = getLanguageService(enableSchemaRequest && service, null, null, null); + const languageService = getLanguageService( + enableSchemaRequest ? schemaRequestService : null, + null, + null, + null, + ); languageService.configure(languageSettings); const getTextDocument = (uri: string): TextDocument => { @@ -100,6 +106,5 @@ export function createYAMLWorker( export interface ICreateData { languageSettings: LanguageSettings; enableSchemaRequest: boolean; - prefix?: string; isKubernetes?: boolean; }