mirror of
https://github.com/danbulant/monaco-yaml
synced 2026-05-19 04:08:48 +00:00
Update dependencies
Most notably update to Webpack 5. Webpack 5 supports web workers without the need of a loader, so the `webpack-worker-loader` example has been removed.
This commit is contained in:
Remco Haszing
parent
c1310d88ff
commit
13c46f5de6
12 changed files with 4189 additions and 8606 deletions
|
|
@ -20,3 +20,4 @@ rules:
|
|||
|
||||
node/no-extraneous-import: off
|
||||
node/no-unpublished-import: off
|
||||
node/no-unsupported-features/node-builtins: off
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
#editor {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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',
|
||||
});
|
||||
|
|
@ -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()],
|
||||
};
|
||||
|
|
@ -7,13 +7,12 @@
|
|||
"build": "webpack --mode production"
|
||||
},
|
||||
"devDependencies": {
|
||||
"css-loader": "^5.2.7",
|
||||
"file-loader": "^6.2.0",
|
||||
"html-webpack-plugin": "^4.5.1",
|
||||
"css-loader": "^6.2.0",
|
||||
"html-webpack-plugin": "^5.3.2",
|
||||
"monaco-editor": "^0.26.1",
|
||||
"monaco-yaml": "file:../..",
|
||||
"style-loader": "2.0.0",
|
||||
"webpack": "^4.46.0",
|
||||
"style-loader": "^3.2.1",
|
||||
"webpack": "^5.48.0",
|
||||
"webpack-cli": "^4.7.2",
|
||||
"webpack-dev-server": "^3.11.2"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,10 +9,20 @@ import 'monaco-editor';
|
|||
|
||||
window.MonacoEnvironment = {
|
||||
getWorkerUrl(moduleId, label) {
|
||||
if (label === 'yaml') {
|
||||
return './yaml.worker.bundle.js';
|
||||
switch (label) {
|
||||
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';
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
const HtmlWebPackPlugin = require('html-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
main: './src/index.js',
|
||||
'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
|
||||
'yaml.worker': 'monaco-yaml/lib/esm/yaml.worker.js',
|
||||
},
|
||||
output: {
|
||||
filename: '[name].bundle.js',
|
||||
resolve: {
|
||||
fallback: {
|
||||
// Yaml-ast-parser-custom-tags imports buffer. This can be omitted safely.
|
||||
buffer: false,
|
||||
},
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
|
|
@ -16,8 +14,9 @@ module.exports = {
|
|||
use: ['style-loader', 'css-loader'],
|
||||
},
|
||||
{
|
||||
// Monaco editor uses .ttf icons.
|
||||
test: /\.ttf$/,
|
||||
loader: 'file-loader',
|
||||
type: 'asset',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
12610
package-lock.json
generated
12610
package-lock.json
generated
File diff suppressed because it is too large
Load diff
13
package.json
13
package.json
|
|
@ -33,7 +33,7 @@
|
|||
"url": "https://github.com/remcohaszing/monaco-yaml/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/json-schema": "^7.0.8",
|
||||
"@types/json-schema": "^7.0.9",
|
||||
"js-yaml": "^3.14.1",
|
||||
"yaml-ast-parser-custom-tags": "^0.0.43"
|
||||
},
|
||||
|
|
@ -41,12 +41,12 @@
|
|||
"monaco-editor": ">=0.22"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^4.28.3",
|
||||
"@typescript-eslint/parser": "^4.28.3",
|
||||
"eslint": "^7.30.0",
|
||||
"eslint-config-remcohaszing": "^3.4.0",
|
||||
"@typescript-eslint/eslint-plugin": "^4.29.0",
|
||||
"@typescript-eslint/parser": "^4.29.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-remcohaszing": "^3.5.0",
|
||||
"husky": "^7.0.1",
|
||||
"lint-staged": "^10.5.4",
|
||||
"lint-staged": "^11.1.1",
|
||||
"monaco-editor": "^0.26.1",
|
||||
"monaco-plugin-helpers": "^1.0.3",
|
||||
"prettier": "2.0.5",
|
||||
|
|
@ -54,6 +54,7 @@
|
|||
"typescript": "^4.3.5",
|
||||
"yaml-language-server": "^0.11.1"
|
||||
},
|
||||
"resolutions": {},
|
||||
"lint-staged": {
|
||||
"*.{css,json,md,html,yaml}": [
|
||||
"prettier --write"
|
||||
|
|
|
|||
Loading…
Reference in a new issue