From 72fc069c6dd976b2e8be6cc8197dbba5b66725ba Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Mon, 15 Nov 2021 18:08:27 +0100 Subject: [PATCH 1/7] Enhance contribution instructions For both the project and all exmaples the prerequisites, setup steps, and running instructions have been added. --- CONTRIBUTING.md | 19 ++++++++++-- examples/demo/README.md | 24 +++++++++++++-- examples/minimal-vite/README.md | 3 -- .../monaco-editor-webpack-plugin/README.md | 22 +++++++++++++- examples/vite-example/README.md | 29 +++++++++++++++++++ .../{minimal-vite => vite-example}/index.html | 0 .../{minimal-vite => vite-example}/index.js | 0 .../package.json | 2 +- 8 files changed, 89 insertions(+), 10 deletions(-) delete mode 100644 examples/minimal-vite/README.md create mode 100644 examples/vite-example/README.md rename examples/{minimal-vite => vite-example}/index.html (100%) rename examples/{minimal-vite => vite-example}/index.js (100%) rename examples/{minimal-vite => vite-example}/package.json (89%) 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/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/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/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": { From 5bb55b6e961c9d7e9ffb1a4eb171a4320de5fa3c Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Fri, 19 Nov 2021 16:21:07 +0100 Subject: [PATCH 2/7] Fix a small type issue The language server completion kind and monaco completion kind are compatible by coincidence, not by definition. --- src/languageFeatures.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/languageFeatures.ts b/src/languageFeatures.ts index 02bd875..833bdb9 100644 --- a/src/languageFeatures.ts +++ b/src/languageFeatures.ts @@ -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) { From ccfbbbe9d860fc84dd85970b80fd8c6ce743bedc Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Sat, 20 Nov 2021 12:05:44 +0100 Subject: [PATCH 3/7] Use extensions for directly importing files For better ESM compatibility, this adds a file extension for nested package files. This also removes the nested special handling of `vscode-languageserver-types` and `vscode-languageserver-document` imports. This is unnecessary, because they use the `"module"` field in `package.json`. --- .eslintrc.yaml | 1 + build.js | 20 ++++---------------- examples/demo/src/types.d.ts | 2 +- src/languageFeatures.ts | 4 ++-- src/monaco.contribution.ts | 2 +- src/workerManager.ts | 2 +- src/yaml.worker.ts | 2 +- src/yamlMode.ts | 2 +- src/yamlWorker.ts | 4 ++-- 9 files changed, 14 insertions(+), 25 deletions(-) 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/build.js b/build.js index fa9dd83..ace46af 100755 --- a/build.js +++ b/build.js @@ -22,20 +22,8 @@ fs.rm(join(__dirname, 'lib'), { force: true, recursive: true }) 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. @@ -45,8 +33,8 @@ fs.rm(join(__dirname, 'lib'), { force: true, recursive: true }) })); // 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/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/src/languageFeatures.ts b/src/languageFeatures.ts index 02bd875..22102bc 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'; diff --git a/src/monaco.contribution.ts b/src/monaco.contribution.ts index 8bcb4c1..80f98b1 100644 --- a/src/monaco.contribution.ts +++ b/src/monaco.contribution.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/workerManager.ts b/src/workerManager.ts index 998d202..581bca0 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'; 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..ab342d5 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,7 +6,7 @@ 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'; From 3a873e083c36891d18cef81deb9ac81946658b79 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Sat, 20 Nov 2021 12:20:23 +0100 Subject: [PATCH 4/7] Add support for document symbol details This is set to the raw value for primitives by the YAML language service. The demo now uses this value as the title attribute on the breadcrumbs. Closes #137 --- examples/demo/src/index.ts | 1 + src/languageFeatures.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/demo/src/index.ts b/examples/demo/src/index.ts index 48e73e1..e79dc46 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/src/languageFeatures.ts b/src/languageFeatures.ts index 02bd875..3622230 100644 --- a/src/languageFeatures.ts +++ b/src/languageFeatures.ts @@ -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), From 934eb8d1e302d2e2fffa117b3d0e1b78cd42baf7 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Sat, 20 Nov 2021 12:23:11 +0100 Subject: [PATCH 5/7] Fix ESLint issues --- examples/monaco-editor-webpack-plugin/editor.js | 2 -- 1 file changed, 2 deletions(-) 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; From bd0ae900187fff9b09e5193d653761d1f8984017 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Sat, 20 Nov 2021 12:39:43 +0100 Subject: [PATCH 6/7] Remove support for the prefix option If it turns out people use this, we can support a custom schema request service implementation instead. Also error responses for schema requests are now handled. --- index.d.ts | 8 -------- src/workerManager.ts | 1 - src/yamlWorker.ts | 21 +++++++++++++-------- 3 files changed, 13 insertions(+), 17 deletions(-) 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/workerManager.ts b/src/workerManager.ts index 998d202..96a1b7d 100644 --- a/src/workerManager.ts +++ b/src/workerManager.ts @@ -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/yamlWorker.ts b/src/yamlWorker.ts index 6ace52a..3bae7b2 100644 --- a/src/yamlWorker.ts +++ b/src/yamlWorker.ts @@ -10,10 +10,12 @@ import { 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; } From 38e61fc7be2c42a221d8cfd9ffe69c57b2a005fa Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Tue, 23 Nov 2021 15:00:08 +0100 Subject: [PATCH 7/7] Remove unused eslint-disable comment --- examples/monaco-editor-webpack-plugin/index.js | 1 - 1 file changed, 1 deletion(-) 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'), {