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

Merge pull request #65 from remcohaszing/webpack-5

Browse source 
Update dependencies
This commit is contained in:
Remco Haszing 2021-08-05 18:44:19 +02:00 committed by GitHub
commit 3094ebef91
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 4189 additions and 8606 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eslintrc.yaml
View file

@ -20,3 +20,4 @@ rules:
node/no-extraneous-import: off node/no-extraneous-import: off
node/no-unpublished-import: off node/no-unpublished-import: off
node/no-unsupported-features/node-builtins: off

10
examples/webpack-worker-loader/README.md
View file

@ -1,10 +0,0 @@
# Webpack worker-loader demo
This demo shows how to use `monaco-editor` and `monaco-yaml` with Webpack 4 and
[`worker-loader`](https://github.com/webpack-contrib/worker-loader). To start it, simply run:
```sh
npm start
```
The demo will open in your browser.

21
examples/webpack-worker-loader/package.json
View file

@ -1,21 +0,0 @@
{
"name": "webpack-worker-loader-example",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "webpack serve --open --mode development",
"build": "webpack --mode production"
},
"devDependencies": {
"css-loader": "^5.2.7",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.1",
"monaco-editor": "^0.26.1",
"monaco-yaml": "file:../..",
"style-loader": "^2.0.0",
"webpack": "^4.46.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2",
"worker-loader": "^3.0.8"
}
}

4
examples/webpack-worker-loader/src/index.css
View file

@ -1,4 +0,0 @@
#editor {
width: 800px;
height: 600px;
}

10
examples/webpack-worker-loader/src/index.ejs
View file

@ -1,10 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Monaco YAML</title>
</head>
<body>
<div id="editor"></div>
</body>
</html>

69
examples/webpack-worker-loader/src/index.js
View file

@ -1,69 +0,0 @@
import './index.css';
// NOTE: This will give you all editor featues. If you would prefer to limit to only the editor
// features you want to use, import them each individually. See this example: (https://github.com/microsoft/monaco-editor-samples/blob/master/browser-esm-webpack-small/index.js#L1-L91)
import 'monaco-editor';
import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
import { setDiagnosticsOptions } from 'monaco-yaml';
// NOTE: using loader syntax becuase Yaml worker imports editor.worker directly and that
// import shouldn't go through loader syntax.
import EditorWorker from 'worker-loader!monaco-editor/esm/vs/editor/editor.worker';
import YamlWorker from 'worker-loader!monaco-yaml/lib/esm/yaml.worker';
window.MonacoEnvironment = {
getWorker(workerId, label) {
if (label === 'yaml') {
return new YamlWorker();
}
return new EditorWorker();
},
};
setDiagnosticsOptions({
validate: true,
enableSchemaRequest: true,
hover: true,
completion: true,
schemas: [
{
// Id of the first schema
uri: 'http://myserver/foo-schema.json',
// Associate with our model
fileMatch: ['*'],
schema: {
// Id of the first schema
id: 'http://myserver/foo-schema.json',
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: {
// Id of the first schema
id: 'http://myserver/bar-schema.json',
type: 'object',
properties: {
q1: {
enum: ['x1', 'x2'],
},
},
},
},
],
});
editor.create(document.getElementById('editor'), {
value: 'p1: ',
language: 'yaml',
});

17
examples/webpack-worker-loader/webpack.config.js
View file

@ -1,17 +0,0 @@
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.ttf$/,
loader: 'file-loader',
},
],
},
plugins: [new HtmlWebPackPlugin()],
};

9
examples/webpack/package.json
View file

@ -7,13 +7,12 @@
"build": "webpack --mode production" "build": "webpack --mode production"
}, },
"devDependencies": { "devDependencies": {
"css-loader": "^5.2.7", "css-loader": "^6.2.0",
"file-loader": "^6.2.0", "html-webpack-plugin": "^5.3.2",
"html-webpack-plugin": "^4.5.1",
"monaco-editor": "^0.26.1", "monaco-editor": "^0.26.1",
"monaco-yaml": "file:../..", "monaco-yaml": "file:../..",
"style-loader": "2.0.0", "style-loader": "^3.2.1",
"webpack": "^4.46.0", "webpack": "^5.48.0",
"webpack-cli": "^4.7.2", "webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2" "webpack-dev-server": "^3.11.2"
} }

16
examples/webpack/src/index.js
View file

@ -9,10 +9,20 @@ import 'monaco-editor';
window.MonacoEnvironment = { window.MonacoEnvironment = {
getWorkerUrl(moduleId, label) { getWorkerUrl(moduleId, label) {
if (label === 'yaml') { switch (label) {
return './yaml.worker.bundle.js'; case 'css':
return new Worker(new URL('monaco-editor/esm/vs/language/css/css.worker', import.meta.url));
case 'editorWorkerService':
return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url));
case 'json':
return new Worker(
new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url),
);
case 'yaml':
return new Worker(new URL('monaco-yaml/lib/esm/yaml.worker', import.meta.url));
default:
throw new Error(`Unknown label ${label}`);
} }
return './editor.worker.bundle.js';
}, },
}; };

15
examples/webpack/webpack.config.js
View file

@ -1,13 +1,11 @@
const HtmlWebPackPlugin = require('html-webpack-plugin'); const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = { module.exports = {
entry: { resolve: {
main: './src/index.js', fallback: {
'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js', // Yaml-ast-parser-custom-tags imports buffer. This can be omitted safely.
'yaml.worker': 'monaco-yaml/lib/esm/yaml.worker.js', buffer: false,
}, },
output: {
filename: '[name].bundle.js',
}, },
module: { module: {
rules: [ rules: [
@ -16,8 +14,9 @@ module.exports = {
use: ['style-loader', 'css-loader'], use: ['style-loader', 'css-loader'],
}, },
{ {
// Monaco editor uses .ttf icons.
test: /\.ttf$/, test: /\.ttf$/,
loader: 'file-loader', type: 'asset',
}, },
], ],
}, },

12610
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

13
package.json
View file

@ -33,7 +33,7 @@
"url": "https://github.com/remcohaszing/monaco-yaml/issues" "url": "https://github.com/remcohaszing/monaco-yaml/issues"
}, },
"dependencies": { "dependencies": {
"@types/json-schema": "^7.0.8", "@types/json-schema": "^7.0.9",
"js-yaml": "^3.14.1", "js-yaml": "^3.14.1",
"yaml-ast-parser-custom-tags": "^0.0.43" "yaml-ast-parser-custom-tags": "^0.0.43"
}, },
@ -41,12 +41,12 @@
"monaco-editor": ">=0.22" "monaco-editor": ">=0.22"
}, },
"devDependencies": { "devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.28.3", "@typescript-eslint/eslint-plugin": "^4.29.0",
"@typescript-eslint/parser": "^4.28.3", "@typescript-eslint/parser": "^4.29.0",
"eslint": "^7.30.0", "eslint": "^7.32.0",
"eslint-config-remcohaszing": "^3.4.0", "eslint-config-remcohaszing": "^3.5.0",
"husky": "^7.0.1", "husky": "^7.0.1",
"lint-staged": "^10.5.4", "lint-staged": "^11.1.1",
"monaco-editor": "^0.26.1", "monaco-editor": "^0.26.1",
"monaco-plugin-helpers": "^1.0.3", "monaco-plugin-helpers": "^1.0.3",
"prettier": "2.0.5", "prettier": "2.0.5",
@ -54,6 +54,7 @@
"typescript": "^4.3.5", "typescript": "^4.3.5",
"yaml-language-server": "^0.11.1" "yaml-language-server": "^0.11.1"
}, },
"resolutions": {},
"lint-staged": { "lint-staged": {
"*.{css,json,md,html,yaml}": [ "*.{css,json,md,html,yaml}": [
"prettier --write" "prettier --write"