Merge pull request #144 from domsew/fixExample

fix monaco-editor-webpack-plugin

Author: remcohaszing

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

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;

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,

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',
           },
         },
       ],