Add minimal vite example

Closes #115
This commit is contained in:
Remco Haszing 2021-09-17 18:09:59 +02:00
parent 979ed62d6f
commit 11f4465ee8
No known key found for this signature in database
GPG key ID: 40D9F5FE9155FD3C
5 changed files with 200 additions and 5 deletions

View file

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

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>

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),
});

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.27.0",
"monaco-yaml": "file:../..",
"vite": "^2.0.8"
}
}

110
package-lock.json generated
View file

@ -55,6 +55,14 @@
"webpack-dev-server": "^4.0.0"
}
},
"examples/minimal-vite": {
"version": "1.0.0",
"dependencies": {
"monaco-editor": "^0.27.0",
"monaco-yaml": "file:../..",
"vite": "^2.0.8"
}
},
"node_modules/@babel/code-frame": {
"version": "7.12.11",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
@ -2525,7 +2533,6 @@
"version": "0.12.24",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.24.tgz",
"integrity": "sha512-C0ibY+HsXzYB6L/pLWEiWjMpghKsIc58Q5yumARwBQsHl9DXPakW+5NI/Y9w4YXiz0PEP6XTGTT/OV4Nnsmb4A==",
"dev": true,
"hasInstallScript": true,
"bin": {
"esbuild": "bin/esbuild"
@ -5367,6 +5374,10 @@
"webpack": "^5.0.0"
}
},
"node_modules/minimal-vite": {
"resolved": "examples/minimal-vite",
"link": true
},
"node_modules/minimalistic-assert": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@ -7136,6 +7147,20 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/rollup": {
"version": "2.56.3",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.3.tgz",
"integrity": "sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg==",
"bin": {
"rollup": "dist/bin/rollup"
},
"engines": {
"node": ">=10.0.0"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/run-parallel": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@ -8195,6 +8220,26 @@
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/vite": {
"version": "2.5.8",
"resolved": "https://registry.npmjs.org/vite/-/vite-2.5.8.tgz",
"integrity": "sha512-2GRsLrmMsFI0u31WTtkGbKvEIJO4I9qDltma3QiyDJEk14IzjM35OCElAFHFs2VlL7h2qX5AdHbwfEhnmwhQgw==",
"dependencies": {
"esbuild": "^0.12.17",
"postcss": "^8.3.6",
"resolve": "^1.20.0",
"rollup": "^2.38.5"
},
"bin": {
"vite": "bin/vite.js"
},
"engines": {
"node": ">=12.2.0"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/vscode-json-languageservice": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/vscode-json-languageservice/-/vscode-json-languageservice-4.1.7.tgz",
@ -10595,8 +10640,7 @@
"esbuild": {
"version": "0.12.24",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.24.tgz",
"integrity": "sha512-C0ibY+HsXzYB6L/pLWEiWjMpghKsIc58Q5yumARwBQsHl9DXPakW+5NI/Y9w4YXiz0PEP6XTGTT/OV4Nnsmb4A==",
"dev": true
"integrity": "sha512-C0ibY+HsXzYB6L/pLWEiWjMpghKsIc58Q5yumARwBQsHl9DXPakW+5NI/Y9w4YXiz0PEP6XTGTT/OV4Nnsmb4A=="
},
"escalade": {
"version": "3.1.1",
@ -12684,6 +12728,14 @@
"schema-utils": "^3.1.0"
}
},
"minimal-vite": {
"version": "file:examples/minimal-vite",
"requires": {
"monaco-editor": "^0.27.0",
"monaco-yaml": "file:../..",
"vite": "^2.0.8"
}
},
"minimalistic-assert": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@ -12728,6 +12780,7 @@
"husky": "^7.0.0",
"js-yaml": "^4.0.0",
"lint-staged": "^11.0.0",
"minimal-vite": "file:examples/minimal-vite",
"monaco-editor": "^0.27.0",
"path-browserify": "^1.0.0",
"prettier": "2.0.5",
@ -14648,8 +14701,7 @@
"esbuild": {
"version": "0.12.24",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.24.tgz",
"integrity": "sha512-C0ibY+HsXzYB6L/pLWEiWjMpghKsIc58Q5yumARwBQsHl9DXPakW+5NI/Y9w4YXiz0PEP6XTGTT/OV4Nnsmb4A==",
"dev": true
"integrity": "sha512-C0ibY+HsXzYB6L/pLWEiWjMpghKsIc58Q5yumARwBQsHl9DXPakW+5NI/Y9w4YXiz0PEP6XTGTT/OV4Nnsmb4A=="
},
"escalade": {
"version": "3.1.1",
@ -16737,6 +16789,14 @@
"schema-utils": "^3.1.0"
}
},
"minimal-vite": {
"version": "file:examples/minimal-vite",
"requires": {
"monaco-editor": "^0.27.0",
"monaco-yaml": "file:../..",
"vite": "^2.0.8"
}
},
"minimalistic-assert": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@ -17994,6 +18054,14 @@
"glob": "^7.1.3"
}
},
"rollup": {
"version": "2.56.3",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.3.tgz",
"integrity": "sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg==",
"requires": {
"fsevents": "~2.3.2"
}
},
"run-parallel": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@ -18815,6 +18883,18 @@
"resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
"integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w=="
},
"vite": {
"version": "2.5.8",
"resolved": "https://registry.npmjs.org/vite/-/vite-2.5.8.tgz",
"integrity": "sha512-2GRsLrmMsFI0u31WTtkGbKvEIJO4I9qDltma3QiyDJEk14IzjM35OCElAFHFs2VlL7h2qX5AdHbwfEhnmwhQgw==",
"requires": {
"esbuild": "^0.12.17",
"fsevents": "~2.3.2",
"postcss": "^8.3.6",
"resolve": "^1.20.0",
"rollup": "^2.38.5"
}
},
"vscode-json-languageservice": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/vscode-json-languageservice/-/vscode-json-languageservice-4.1.7.tgz",
@ -20381,6 +20461,14 @@
"glob": "^7.1.3"
}
},
"rollup": {
"version": "2.56.3",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.3.tgz",
"integrity": "sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg==",
"requires": {
"fsevents": "~2.3.2"
}
},
"run-parallel": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@ -21202,6 +21290,18 @@
"resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
"integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w=="
},
"vite": {
"version": "2.5.8",
"resolved": "https://registry.npmjs.org/vite/-/vite-2.5.8.tgz",
"integrity": "sha512-2GRsLrmMsFI0u31WTtkGbKvEIJO4I9qDltma3QiyDJEk14IzjM35OCElAFHFs2VlL7h2qX5AdHbwfEhnmwhQgw==",
"requires": {
"esbuild": "^0.12.17",
"fsevents": "~2.3.2",
"postcss": "^8.3.6",
"resolve": "^1.20.0",
"rollup": "^2.38.5"
}
},
"vscode-json-languageservice": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/vscode-json-languageservice/-/vscode-json-languageservice-4.1.7.tgz",