mirror of
https://github.com/danbulant/monaco-yaml
synced 2026-07-08 12:30:39 +00:00
Merge pull request #116 from remcohaszing/vite-example
Add minimal vite example
This commit is contained in:
commit
c008952c87
5 changed files with 11203 additions and 1924 deletions
3
examples/minimal-vite/README.md
Normal file
3
examples/minimal-vite/README.md
Normal 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
11
examples/minimal-vite/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/minimal-vite/index.js
Normal file
67
examples/minimal-vite/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/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
14
examples/minimal-vite/package.json
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
||||||
13032
package-lock.json
generated
13032
package-lock.json
generated
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue