mirror of
https://github.com/danbulant/monaco-yaml
synced 2026-07-09 04:50:56 +00:00
Compare commits
42 commits
v4.0.0-alp
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4ab8e671e6 | ||
|
|
0e42b40a65 | ||
|
|
45d8d1ae57 | ||
|
|
629aaaa2a8 | ||
|
|
5efe47e449 | ||
|
|
e28f7fec9f | ||
|
|
c4ae02d2ef | ||
|
|
18cfa0a008 | ||
|
|
d35b72e1fe | ||
|
|
0518312cac | ||
|
|
326a253813 | ||
|
|
928d33cdc3 | ||
|
|
ef35d1be2b | ||
|
|
a959e028ce | ||
|
|
38e61fc7be | ||
|
|
f42c5e97e0 | ||
|
|
af88581fbb | ||
|
|
a18a75d137 | ||
|
|
9a2be95116 | ||
|
|
bd0ae90018 | ||
|
|
934eb8d1e3 | ||
|
|
3a873e083c | ||
|
|
ccfbbbe9d8 | ||
|
|
5bb55b6e96 | ||
|
|
90d895a214 | ||
|
|
72fc069c6d | ||
|
|
545e6a6bc4 | ||
|
|
f44c4e8e34 | ||
|
|
56372c1c2a | ||
|
|
c008952c87 | ||
|
|
2a80dc8913 | ||
|
|
e0d2f4ade6 | ||
|
|
f2948443e1 | ||
|
|
ed001fdc1c | ||
|
|
786cdb5dbb | ||
|
|
edf8623b78 | ||
|
|
5507d53dee | ||
|
|
c5d83c4543 | ||
|
|
90a7bcda0a | ||
|
|
f7fce45714 | ||
|
|
554699887d | ||
|
|
11f4465ee8 |
32 changed files with 2839 additions and 2631 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
10
.github/workflows/ci.yaml
vendored
10
.github/workflows/ci.yaml
vendored
|
|
@ -16,6 +16,16 @@ jobs:
|
|||
- 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:
|
||||
|
|
|
|||
4
.gitignore
vendored
4
.gitignore
vendored
|
|
@ -1,5 +1,7 @@
|
|||
dist/
|
||||
node_modules/
|
||||
/lib/
|
||||
/index.js
|
||||
/yaml.worker.js
|
||||
*.log
|
||||
*.map
|
||||
*.tgz
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
/dist/
|
||||
/lib/
|
||||
/out/
|
||||
dist/
|
||||
/index.js
|
||||
/yaml.worker.js
|
||||
|
|
|
|||
|
|
@ -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
|
||||
```
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ files:
|
|||
- Document Symbols
|
||||
- Automatically load remote schema files (by enabling DiagnosticsOptions.enableSchemaRequest)
|
||||
- Links from JSON references.
|
||||
- Links and hover effects from YAML anchors.
|
||||
|
||||
Schemas can also be provided by configuration. See
|
||||
[here](https://github.com/remcohaszing/monaco-yaml/blob/main/index.d.ts) for the API that the plugin
|
||||
|
|
@ -115,7 +116,7 @@ window.MonacoEnvironment = {
|
|||
new URL('monaco-editor/esm/vs/language/typescript/ts.worker', import.meta.url),
|
||||
);
|
||||
case 'yaml':
|
||||
return new Worker(new URL('monaco-yaml/lib/esm/yaml.worker', import.meta.url));
|
||||
return new Worker(new URL('monaco-yaml/yaml.worker', import.meta.url));
|
||||
default:
|
||||
throw new Error(`Unknown label ${label}`);
|
||||
}
|
||||
|
|
|
|||
122
build.js
122
build.js
|
|
@ -1,72 +1,58 @@
|
|||
const { promises: fs } = require('fs');
|
||||
const { join } = require('path');
|
||||
|
||||
const { build } = require('esbuild');
|
||||
|
||||
const { dependencies, peerDependencies } = require('./package.json');
|
||||
|
||||
fs.rm(join(__dirname, 'lib'), { force: true, recursive: true })
|
||||
.then(() =>
|
||||
build({
|
||||
entryPoints: ['src/monaco.contribution.ts', 'src/yaml.worker.ts'],
|
||||
bundle: true,
|
||||
external: Object.keys({ ...dependencies, ...peerDependencies }),
|
||||
logLevel: 'info',
|
||||
outdir: 'lib/esm',
|
||||
sourcemap: true,
|
||||
format: 'esm',
|
||||
target: ['es2019'],
|
||||
plugins: [
|
||||
{
|
||||
name: 'alias',
|
||||
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$/ }, () => ({
|
||||
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-types$/ }, () => ({
|
||||
path: 'vscode-languageserver-types/lib/esm/main.js',
|
||||
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: 'prettier/standalone',
|
||||
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);
|
||||
});
|
||||
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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@
|
|||
"build": "webpack --mode production"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^5.0.0",
|
||||
"@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.30.0",
|
||||
"monaco-editor": "^0.31.0",
|
||||
"monaco-yaml": "file:../..",
|
||||
"ts-loader": "^9.0.0",
|
||||
"typescript": "^4.0.0",
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ window.MonacoEnvironment = {
|
|||
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/lib/esm/yaml.worker', import.meta.url));
|
||||
return new Worker(new URL('monaco-yaml/yaml.worker', import.meta.url));
|
||||
default:
|
||||
throw new Error(`Unknown label ${label}`);
|
||||
}
|
||||
|
|
@ -44,11 +44,6 @@ const defaultSchema: SchemasSettings = {
|
|||
};
|
||||
|
||||
setDiagnosticsOptions({
|
||||
validate: true,
|
||||
enableSchemaRequest: true,
|
||||
format: true,
|
||||
hover: true,
|
||||
completion: true,
|
||||
schemas: [defaultSchema],
|
||||
});
|
||||
|
||||
|
|
@ -69,6 +64,10 @@ markdown: hover me to get a markdown based description 😮
|
|||
enum:
|
||||
|
||||
|
||||
# Unused anchors will be reported
|
||||
unused anchor: &unused anchor
|
||||
|
||||
|
||||
# Of course numbers are supported!
|
||||
number: 12
|
||||
|
||||
|
|
@ -100,6 +99,14 @@ 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.
|
||||
|
||||
|
||||
|
|
@ -181,6 +188,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) {
|
||||
|
|
|
|||
3
examples/demo/src/types.d.ts
vendored
3
examples/demo/src/types.d.ts
vendored
|
|
@ -6,7 +6,6 @@ declare module 'monaco-editor/esm/vs/base/common/cancellation' {
|
|||
|
||||
declare module 'monaco-editor/esm/vs/editor/contrib/documentSymbols/documentSymbols' {
|
||||
import { ITextModel, languages } from 'monaco-editor';
|
||||
// eslint-disable-next-line import/order
|
||||
import { CancellationToken } from 'monaco-editor/esm/vs/base/common/cancellation';
|
||||
|
||||
export function getDocumentSymbols(
|
||||
|
|
@ -16,7 +15,7 @@ declare module 'monaco-editor/esm/vs/editor/contrib/documentSymbols/documentSymb
|
|||
): Promise<languages.DocumentSymbol[]>;
|
||||
}
|
||||
|
||||
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(
|
||||
|
|
|
|||
|
|
@ -9,10 +9,6 @@ module.exports = {
|
|||
devtool: 'source-map',
|
||||
resolve: {
|
||||
extensions: ['.mjs', '.js', '.ts'],
|
||||
fallback: {
|
||||
// Yaml-ast-parser-custom-tags imports buffer. This can be omitted safely.
|
||||
buffer: false,
|
||||
},
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
|
|
|
|||
35
examples/monaco-editor-webpack-plugin/README.md
Normal file
35
examples/monaco-editor-webpack-plugin/README.md
Normal file
|
|
@ -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.
|
||||
4
examples/monaco-editor-webpack-plugin/editor.js
Normal file
4
examples/monaco-editor-webpack-plugin/editor.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
|
||||
|
||||
export { setDiagnosticsOptions } from 'monaco-yaml';
|
||||
export default monaco;
|
||||
20
examples/monaco-editor-webpack-plugin/index.html
Normal file
20
examples/monaco-editor-webpack-plugin/index.html
Normal file
|
|
@ -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>
|
||||
37
examples/monaco-editor-webpack-plugin/index.js
Normal file
37
examples/monaco-editor-webpack-plugin/index.js
Normal file
|
|
@ -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();
|
||||
20
examples/monaco-editor-webpack-plugin/package.json
Normal file
20
examples/monaco-editor-webpack-plugin/package.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
49
examples/monaco-editor-webpack-plugin/webpack.config.js
Normal file
49
examples/monaco-editor-webpack-plugin/webpack.config.js
Normal file
|
|
@ -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: './',
|
||||
},
|
||||
},
|
||||
};
|
||||
29
examples/vite-example/README.md
Normal file
29
examples/vite-example/README.md
Normal file
|
|
@ -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.
|
||||
11
examples/vite-example/index.html
Normal file
11
examples/vite-example/index.html
Normal file
|
|
@ -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>
|
||||
67
examples/vite-example/index.js
Normal file
67
examples/vite-example/index.js
Normal file
|
|
@ -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),
|
||||
});
|
||||
14
examples/vite-example/package.json
Normal file
14
examples/vite-example/package.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
70
index.d.ts
vendored
70
index.d.ts
vendored
|
|
@ -29,44 +29,68 @@ declare module 'monaco-editor/esm/vs/editor/editor.api' {
|
|||
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 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?: SchemasSettings[];
|
||||
|
||||
/**
|
||||
* 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
|
||||
* If true, a different diffing algorithm is used to generate error messages.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
readonly isKubernetes?: boolean;
|
||||
|
||||
/**
|
||||
* A list of custom tags.
|
||||
* A list of known schemas and/or associations of schemas to file names.
|
||||
*
|
||||
* @default []
|
||||
*/
|
||||
readonly customTags?: string[];
|
||||
readonly schemas?: SchemasSettings[];
|
||||
|
||||
readonly format?: boolean;
|
||||
/**
|
||||
* 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 {
|
||||
|
|
|
|||
4748
package-lock.json
generated
4748
package-lock.json
generated
File diff suppressed because it is too large
Load diff
25
package.json
25
package.json
|
|
@ -1,18 +1,17 @@
|
|||
{
|
||||
"name": "monaco-yaml",
|
||||
"version": "4.0.0-alpha.0",
|
||||
"version": "4.0.0-alpha.1",
|
||||
"description": "YAML plugin for the Monaco Editor",
|
||||
"homepage": "https://monaco-yaml.js.org",
|
||||
"scripts": {
|
||||
"prepack": "node build.js",
|
||||
"prepare": "husky install"
|
||||
},
|
||||
"main": "./lib/esm/monaco.contribution.js",
|
||||
"module": "./lib/esm/monaco.contribution.js",
|
||||
"typings": "./index.d.ts",
|
||||
"files": [
|
||||
"lib",
|
||||
"index.d.ts"
|
||||
"index.js",
|
||||
"index.d.ts",
|
||||
"yaml.worker.js"
|
||||
],
|
||||
"workspaces": [
|
||||
"examples/*"
|
||||
|
|
@ -39,30 +38,28 @@
|
|||
],
|
||||
"dependencies": {
|
||||
"@types/json-schema": "^7.0.0",
|
||||
"js-yaml": "^4.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-language-server-parser": "^0.1.0"
|
||||
"yaml": "2.0.0-10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"monaco-editor": ">=0.30"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^4.0.0",
|
||||
"@typescript-eslint/parser": "^4.0.0",
|
||||
"esbuild": "^0.12.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.0.0",
|
||||
"esbuild": "^0.14.0",
|
||||
"eslint": "^7.0.0",
|
||||
"eslint-config-remcohaszing": "^3.0.0",
|
||||
"husky": "^7.0.0",
|
||||
"lint-staged": "^11.0.0",
|
||||
"monaco-editor": "^0.30.0",
|
||||
"lint-staged": "^12.0.0",
|
||||
"monaco-editor": "^0.31.0",
|
||||
"type-fest": "^2.0.0",
|
||||
"typescript": "^4.0.0",
|
||||
"yaml-language-server": "^0.22.0"
|
||||
"yaml-language-server": "^1.0.0"
|
||||
},
|
||||
"resolutions": {},
|
||||
"lint-staged": {
|
||||
"*.{css,json,md,html,yaml}": [
|
||||
"prettier --write"
|
||||
|
|
|
|||
5
src/fillers/schemaSelectionHandlers.ts
Normal file
5
src/fillers/schemaSelectionHandlers.ts
Normal file
|
|
@ -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 {}
|
||||
|
|
@ -1,10 +1,22 @@
|
|||
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';
|
||||
|
||||
// --- 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 {
|
||||
|
|
@ -25,7 +37,7 @@ export function createLanguageServiceDefaults(
|
|||
},
|
||||
|
||||
setDiagnosticsOptions(options) {
|
||||
diagnosticsOptions = options || {};
|
||||
diagnosticsOptions = { ...diagnosticDefault, ...options };
|
||||
onDidChange.fire(languageServiceDefaults);
|
||||
},
|
||||
};
|
||||
|
|
@ -33,12 +45,6 @@ export function createLanguageServiceDefaults(
|
|||
return languageServiceDefaults;
|
||||
}
|
||||
|
||||
const diagnosticDefault: languages.yaml.DiagnosticsOptions = {
|
||||
validate: true,
|
||||
schemas: [],
|
||||
enableSchemaRequest: false,
|
||||
};
|
||||
|
||||
const yamlDefaults = createLanguageServiceDefaults(diagnosticDefault);
|
||||
|
||||
// Export API
|
||||
|
|
@ -3,12 +3,13 @@ import {
|
|||
IDisposable,
|
||||
languages,
|
||||
MarkerSeverity,
|
||||
MarkerTag,
|
||||
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';
|
||||
|
|
@ -32,6 +33,16 @@ function toSeverity(lsSeverity: ls.DiagnosticSeverity): MarkerSeverity {
|
|||
}
|
||||
}
|
||||
|
||||
function toMarkerDataTag(tag: ls.DiagnosticTag): MarkerTag {
|
||||
switch (tag) {
|
||||
case ls.DiagnosticTag.Deprecated:
|
||||
return MarkerTag.Deprecated;
|
||||
case ls.DiagnosticTag.Unnecessary:
|
||||
return MarkerTag.Unnecessary;
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
function toDiagnostics(diag: ls.Diagnostic): editor.IMarkerData {
|
||||
return {
|
||||
severity: toSeverity(diag.severity),
|
||||
|
|
@ -42,6 +53,7 @@ function toDiagnostics(diag: ls.Diagnostic): editor.IMarkerData {
|
|||
message: diag.message,
|
||||
code: String(diag.code),
|
||||
source: diag.source,
|
||||
tags: diag.tags?.map(toMarkerDataTag),
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -140,7 +152,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) {
|
||||
|
|
@ -252,6 +264,26 @@ export function createCompletionItemProvider(
|
|||
};
|
||||
}
|
||||
|
||||
// --- definition ------
|
||||
|
||||
export function createDefinitionProvider(getWorker: WorkerAccessor): languages.DefinitionProvider {
|
||||
return {
|
||||
async provideDefinition(model, position) {
|
||||
const resource = model.uri;
|
||||
|
||||
const worker = await getWorker(resource);
|
||||
const definitions = await worker.doDefinition(String(resource), fromPosition(position));
|
||||
|
||||
return definitions?.map((definition) => ({
|
||||
originSelectionRange: definition.originSelectionRange,
|
||||
range: toRange(definition.targetRange),
|
||||
targetSelectionRange: definition.targetSelectionRange,
|
||||
uri: Uri.parse(definition.targetUri),
|
||||
}));
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// --- hover ------
|
||||
|
||||
export function createHoverProvider(getWorker: WorkerAccessor): languages.HoverProvider {
|
||||
|
|
@ -321,7 +353,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),
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
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 {
|
||||
createCompletionItemProvider,
|
||||
createDefinitionProvider,
|
||||
createDiagnosticsAdapter,
|
||||
createDocumentFormattingEditProvider,
|
||||
createDocumentSymbolProvider,
|
||||
|
|
@ -48,6 +49,7 @@ export function setupMode(defaults: languages.yaml.LanguageServiceDefaults): voi
|
|||
|
||||
languages.registerCompletionItemProvider(languageId, createCompletionItemProvider(worker));
|
||||
languages.registerHoverProvider(languageId, createHoverProvider(worker));
|
||||
languages.registerDefinitionProvider(languageId, createDefinitionProvider(worker));
|
||||
languages.registerDocumentSymbolProvider(languageId, createDocumentSymbolProvider(worker));
|
||||
languages.registerDocumentFormattingEditProvider(
|
||||
languageId,
|
||||
|
|
|
|||
|
|
@ -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<string>;
|
||||
|
||||
if (typeof fetch !== 'undefined') {
|
||||
defaultSchemaRequestService = (url) => fetch(url).then((response) => response.text());
|
||||
async function schemaRequestService(uri: string): Promise<string> {
|
||||
const response = await fetch(uri);
|
||||
if (response.ok) {
|
||||
return response.text();
|
||||
}
|
||||
throw new Error(`Schema request failed for ${uri}`);
|
||||
}
|
||||
|
||||
export interface YAMLWorker {
|
||||
|
|
@ -21,6 +23,8 @@ export interface YAMLWorker {
|
|||
|
||||
doComplete: (uri: string, position: ls.Position) => Promisable<ls.CompletionList>;
|
||||
|
||||
doDefinition: (uri: string, position: ls.Position) => Promisable<ls.LocationLink[]>;
|
||||
|
||||
doHover: (uri: string, position: ls.Position) => Promisable<ls.Hover>;
|
||||
|
||||
format: (uri: string, options: CustomFormatterOptions) => Promisable<ls.TextEdit[]>;
|
||||
|
|
@ -34,15 +38,16 @@ export interface YAMLWorker {
|
|||
|
||||
export function createYAMLWorker(
|
||||
ctx: worker.IWorkerContext,
|
||||
{ enableSchemaRequest, isKubernetes = false, languageSettings, prefix = '' }: ICreateData,
|
||||
{ enableSchemaRequest, languageSettings }: ICreateData,
|
||||
): YAMLWorker {
|
||||
const service = (url: string): Promise<string> => defaultSchemaRequestService(`${prefix}${url}`);
|
||||
const languageService = getLanguageService(enableSchemaRequest && service, null, null, null);
|
||||
languageService.configure({
|
||||
...languageSettings,
|
||||
hover: true,
|
||||
isKubernetes,
|
||||
});
|
||||
const languageService = getLanguageService(
|
||||
enableSchemaRequest ? schemaRequestService : null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
);
|
||||
languageService.configure(languageSettings);
|
||||
|
||||
const getTextDocument = (uri: string): TextDocument => {
|
||||
const models = ctx.getMirrorModels();
|
||||
|
|
@ -58,14 +63,19 @@ export function createYAMLWorker(
|
|||
doValidation(uri) {
|
||||
const document = getTextDocument(uri);
|
||||
if (document) {
|
||||
return languageService.doValidation(document, isKubernetes);
|
||||
return languageService.doValidation(document, languageSettings.isKubernetes);
|
||||
}
|
||||
return [];
|
||||
},
|
||||
|
||||
doComplete(uri, position) {
|
||||
const document = getTextDocument(uri);
|
||||
return languageService.doComplete(document, position, isKubernetes);
|
||||
return languageService.doComplete(document, position, languageSettings.isKubernetes);
|
||||
},
|
||||
|
||||
doDefinition(uri, position) {
|
||||
const document = getTextDocument(uri);
|
||||
return languageService.doDefinition(document, { position, textDocument: { uri } });
|
||||
},
|
||||
|
||||
doHover(uri, position) {
|
||||
|
|
@ -89,7 +99,7 @@ export function createYAMLWorker(
|
|||
|
||||
findLinks(uri) {
|
||||
const document = getTextDocument(uri);
|
||||
return Promise.resolve(languageService.findLinks(document));
|
||||
return languageService.findLinks(document);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -97,6 +107,5 @@ export function createYAMLWorker(
|
|||
export interface ICreateData {
|
||||
languageSettings: LanguageSettings;
|
||||
enableSchemaRequest: boolean;
|
||||
prefix?: string;
|
||||
isKubernetes?: boolean;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue