dan/monaco-yaml
1
0
Fork 0
mirror of https://github.com/danbulant/monaco-yaml synced 2026-06-24 09:01:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'main' into update-dependencies

Browse source
This commit is contained in:
Remco Haszing 2021-11-15 17:31:25 +01:00
commit 56372c1c2a
No known key found for this signature in database
GPG key ID: 40D9F5FE9155FD3C
11 changed files with 12345 additions and 2310 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
examples/minimal-vite/README.md Normal file
View file

@ -0,0 +1,3 @@
# Minimal Vite Example
This minimal example shows how `monaco-yaml` can be used with [Vite](https://vitejs.dev).

11
examples/minimal-vite/index.html Normal file
View 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/minimal-vite/index.js Normal file
View 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/lib/esm/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/minimal-vite/package.json Normal file
View file

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

14
examples/monaco-editor-webpack-plugin/README.md Normal file
View file

@ -0,0 +1,14 @@
# 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-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-samples/tree/main/browser-esm-webpack-monaco-plugin).
To start it, simply run:
```sh
npm start
```
The demo will open in your browser.

7
examples/monaco-editor-webpack-plugin/editor.js Normal file
View file

@ -0,0 +1,7 @@
// 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;

20
examples/monaco-editor-webpack-plugin/index.html Normal file
View 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>

17
examples/monaco-editor-webpack-plugin/index.js Normal file
View file

@ -0,0 +1,17 @@
const value = `
number: 0xfe
boolean: true
`;
async function create() {
// eslint-disable-next-line import/extensions
const monaco = await import('./main.js');
monaco.editor.create(document.querySelector('.editor'), {
language: 'yaml',
tabSize: 2,
value,
});
}
create();

20
examples/monaco-editor-webpack-plugin/package.json Normal file
View 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": {
"monaco-editor": "^0.30.0",
"monaco-yaml": "file:../..",
"css-loader": "^6.0.0",
"style-loader": "^3.0.0",
"monaco-editor-webpack-plugin": "^6.0.0",
"webpack": "^5.0.0",
"webpack-cli": "^4.0.0",
"webpack-dev-server": "^4.0.0"
}
}

58
examples/monaco-editor-webpack-plugin/webpack.config.js Normal file
View file

@ -0,0 +1,58 @@
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',
resolve: {
fallback: {
// Yaml-ast-parser-custom-tags imports buffer. This can be omitted safely.
buffer: false,
},
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.ttf$/,
type: 'asset',
},
],
},
plugins: [
new MonacoWebpackPlugin({
languages: [],
customLanguages: [
{
label: 'yaml',
entry: [
'monaco-yaml/lib/esm/monaco.contribution',
'vs/basic-languages/yaml/yaml.contribution',
],
worker: {
id: 'monaco-yaml/lib/esm/yamlWorker',
entry: 'monaco-yaml/lib/esm/yaml.worker',
},
},
],
}),
],
devServer: {
static: {
directory: './',
},
},
};

14424
package-lock.json generated
View file

File diff suppressed because it is too large Load diff