diff --git a/examples/monaco-editor-webpack-plugin/README.md b/examples/monaco-editor-webpack-plugin/README.md index 86d2ced..7d5ae68 100644 --- a/examples/monaco-editor-webpack-plugin/README.md +++ b/examples/monaco-editor-webpack-plugin/README.md @@ -1,10 +1,11 @@ # 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). +[monaco-editor-webpack-plugin](https://github.com/microsoft/monaco-editor/tree/main/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/tree/main/samples/browser-esm-webpack-monaco-plugin). To start it, simply run: ## Prerequisites diff --git a/examples/monaco-editor-webpack-plugin/editor.js b/examples/monaco-editor-webpack-plugin/editor.js index 95aaba3..d605ea8 100644 --- a/examples/monaco-editor-webpack-plugin/editor.js +++ b/examples/monaco-editor-webpack-plugin/editor.js @@ -1,5 +1,4 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'; -export { editor } from 'monaco-editor/esm/vs/editor/editor.api.js'; export { setDiagnosticsOptions } from 'monaco-yaml'; export default monaco; diff --git a/examples/monaco-editor-webpack-plugin/index.js b/examples/monaco-editor-webpack-plugin/index.js index 80fe7f0..1f11312 100644 --- a/examples/monaco-editor-webpack-plugin/index.js +++ b/examples/monaco-editor-webpack-plugin/index.js @@ -4,8 +4,29 @@ boolean: true `; async function create() { - const monaco = await import('./main.js'); + // Dynamic import is possible + const { default: monaco } = await import('./main.js'); + // Define schema first + monaco.languages.yaml.yamlDefaults.setDiagnosticsOptions({ + schemas: [ + { + fileMatch: ['*'], + uri: 'my-schema.json', + schema: { + type: 'object', + properties: { + number: { + description: 'number property', + type: 'number', + }, + }, + }, + }, + ], + }); + + // Create editor monaco.editor.create(document.querySelector('.editor'), { language: 'yaml', tabSize: 2, diff --git a/examples/monaco-editor-webpack-plugin/webpack.config.js b/examples/monaco-editor-webpack-plugin/webpack.config.js index 47f4009..a2c3667 100644 --- a/examples/monaco-editor-webpack-plugin/webpack.config.js +++ b/examples/monaco-editor-webpack-plugin/webpack.config.js @@ -14,12 +14,6 @@ export default { outputModule: true, }, devtool: 'source-map', - resolve: { - fallback: { - // Yaml-ast-parser-custom-tags imports buffer. This can be omitted safely. - buffer: false, - }, - }, module: { rules: [ { @@ -38,13 +32,10 @@ export default { customLanguages: [ { label: 'yaml', - entry: [ - 'monaco-yaml/lib/esm/monaco.contribution', - 'vs/basic-languages/yaml/yaml.contribution', - ], + entry: ['monaco-yaml', 'vs/basic-languages/yaml/yaml.contribution'], worker: { - id: 'monaco-yaml/lib/esm/yamlWorker', - entry: 'monaco-yaml/lib/esm/yaml.worker', + id: 'monaco-yaml/yamlWorker', + entry: 'monaco-yaml/yaml.worker', }, }, ],